Download index.html from secutorpro/deepsite-project-f3o7e: direct link, hf CLI and curl.
- Browser
- Download file 32.9 kB
-
https://huggingface.co/spaces/secutorpro/deepsite-project-f3o7e/resolve/main/index.html
- Command line
-
hf download hf://spaces/secutorpro/deepsite-project-f3o7e/index.html
-
curl -L -o index.html https://huggingface.co/spaces/secutorpro/deepsite-project-f3o7e/resolve/main/index.html
32.9 kB
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>La Ruche - Studio Cognitif de Création de Films</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| display: ['Space Grotesk', 'sans-serif'], | |
| }, | |
| colors: { | |
| ruche: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| 950: '#052e16', | |
| }, | |
| dark: { | |
| 900: '#0a0a0f', | |
| 800: '#12121a', | |
| 700: '#1a1a2e', | |
| 600: '#252542', | |
| 500: '#3a3a5c', | |
| 400: '#4a4a6a', | |
| 300: '#6a6a8a', | |
| 200: '#9a9aaa', | |
| 100: '#cacaef', | |
| }, | |
| accent: { | |
| gold: '#fbbf24', | |
| amber: '#f59e0b', | |
| purple: '#8b5cf6', | |
| cyan: '#06b6d4', | |
| rose: '#f43f5e', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| 'float': 'float 3s ease-in-out infinite', | |
| 'slide-up': 'slideUp 0.5s ease-out', | |
| 'fade-in': 'fadeIn 0.3s ease-out', | |
| 'spin-slow': 'spin 8s linear infinite', | |
| }, | |
| keyframes: { | |
| glow: { | |
| '0%': { boxShadow: '0 0 5px rgba(34, 197, 94, 0.5)' }, | |
| '100%': { boxShadow: '0 0 20px rgba(34, 197, 94, 0.8), 0 0 40px rgba(34, 197, 94, 0.4)' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' }, | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: #3a3a5c #0a0a0f; | |
| } | |
| *::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| *::-webkit-scrollbar-track { | |
| background: #0a0a0f; | |
| } | |
| *::-webkit-scrollbar-thumb { | |
| background: #3a3a5c; | |
| border-radius: 4px; | |
| } | |
| *::-webkit-scrollbar-thumb:hover { | |
| background: #4a4a6a; | |
| } | |
| .glass-panel { | |
| background: rgba(26, 26, 46, 0.8); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(74, 74, 106, 0.3); | |
| } | |
| .glass-panel-hover:hover { | |
| background: rgba(37, 37, 66, 0.9); | |
| border-color: rgba(34, 197, 94, 0.3); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #22c55e 0%, #06b6d4 50%, #8b5cf6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hex-pattern { | |
| background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15L30 0z' fill='none' stroke='%233a3a5c' stroke-width='0.5' fill-opacity='0.05'/%3E%3C/svg%3E"); | |
| } | |
| .agent-card { | |
| transition: all 0.3s ease; | |
| } | |
| .agent-card:hover { | |
| transform: translateY(-4px); | |
| } | |
| .agent-card.active { | |
| border-color: #22c55e; | |
| box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); | |
| } | |
| .pipeline-step { | |
| position: relative; | |
| } | |
| .pipeline-step::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| right: -20px; | |
| width: 40px; | |
| height: 2px; | |
| background: linear-gradient(90deg, #3a3a5c, #22c55e); | |
| transform: translateY(-50%); | |
| } | |
| .pipeline-step:last-child::after { | |
| display: none; | |
| } | |
| .neural-glow { | |
| box-shadow: 0 0 30px rgba(34, 197, 94, 0.2), | |
| inset 0 0 30px rgba(34, 197, 94, 0.05); | |
| } | |
| .status-dot { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .film-grain { | |
| position: relative; | |
| } | |
| .film-grain::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark-900 text-gray-100 font-sans antialiased overflow-hidden"> | |
| <div id="app" class="h-screen flex"> | |
| <!-- Sidebar --> | |
| <aside class="w-20 lg:w-72 bg-dark-800 border-r border-dark-600 flex flex-col transition-all duration-300"> | |
| <!-- Logo --> | |
| <div class="h-20 flex items-center justify-center lg:justify-start lg:px-6 border-b border-dark-600"> | |
| <div class="relative"> | |
| <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-ruche-500 to-ruche-700 flex items-center justify-center neural-glow"> | |
| <i data-lucide="hexagon" class="w-7 h-7 text-white"></i> | |
| </div> | |
| <div class="absolute -top-1 -right-1 w-4 h-4 bg-accent-gold rounded-full status-dot"></div> | |
| </div> | |
| <div class="hidden lg:block ml-4"> | |
| <h1 class="font-display font-bold text-xl gradient-text">LA RUCHE</h1> | |
| <p class="text-xs text-dark-300">Studio Cognitif</p> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 py-6 space-y-2 overflow-y-auto"> | |
| <button onclick="app.navigate('dashboard')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group active" data-page="dashboard"> | |
| <i data-lucide="layout-dashboard" class="w-5 h-5 group-hover:text-ruche-400 transition-colors"></i> | |
| <span class="hidden lg:block ml-3 font-medium">Dashboard</span> | |
| <span class="hidden lg:block ml-auto text-xs bg-ruche-500/20 text-ruche-400 px-2 py-1 rounded-full">3 actifs</span> | |
| </button> | |
| <button onclick="app.navigate('writers-room')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="writers-room"> | |
| <i data-lucide="pen-tool" class="w-5 h-5 group-hover:text-accent-purple transition-colors"></i> | |
| <span class="hidden lg:block ml-3 font-medium">Writers Room</span> | |
| </button> | |
| <button onclick="app.navigate('univers')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="univers"> | |
| <i data-lucide="globe" class="w-5 h-5 group-hover:text-accent-cyan transition-colors"></i> | |
| <span class="hidden lg:block ml-3 font-medium">Univers</span> | |
| </button> | |
| <button onclick="app.navigate('storyboard')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="storyboard"> | |
| <i data-lucide="film" class="w-5 h-5 group-hover:text-accent-amber transition-colors"></i> | |
| <span class="hidden lg:block ml-3 font-medium">Storyboard</span> | |
| </button> | |
| <button onclick="app.navigate('video')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="video"> | |
| <i data-lucide="video" class="w-5 h-5 group-hover:text-accent-rose transition-colors"></i> | |
| <span class="hidden lg:block ml-3 font-medium">Vidéo IA</span> | |
| </button> | |
| <div class="hidden lg:block px-6 py-4"> | |
| <div class="h-px bg-dark-600"></div> | |
| </div> | |
| <button onclick="app.navigate('fourmiliere')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="fourmiliere"> | |
| <i data-lucide="users" class="w-5 h-5 group-hover:text-ruche-400 transition-colors"></i> | |
| <span class="hidden lg:block ml-3 font-medium">La Fourmilière</span> | |
| <span class="hidden lg:block ml-auto text-xs bg-accent-rose/20 text-accent-rose px-2 py-1 rounded-full border border-accent-rose/30 animate-pulse">GUERRE</span> | |
| </button> | |
| <button onclick="app.navigate('noyau')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="noyau"> | |
| <i data-lucide="cpu" class="w-5 h-5 group-hover:text-accent-gold transition-colors"></i> | |
| <span class="hidden lg:block ml-3 font-medium">Noyau IA</span> | |
| <span class="hidden lg:block ml-auto text-xs bg-accent-rose/20 text-accent-rose px-2 py-0.5 rounded-full animate-pulse">WAR</span> | |
| </button> | |
| <button onclick="app.navigate('war-room')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group border border-ruche-500/30 bg-ruche-500/5" data-page="war-room"> | |
| <i data-lucide="sword" class="w-5 h-5 text-ruche-400 group-hover:text-ruche-300 transition-colors"></i> | |
| <span class="hidden lg:block ml-3 font-medium text-ruche-400">War Room</span> | |
| <span class="hidden lg:block ml-auto w-2 h-2 bg-ruche-500 rounded-full animate-ping"></span> | |
| </button> | |
| </nav> | |
| <!-- User Profile --> | |
| <div class="p-4 border-t border-dark-600"> | |
| <div class="flex items-center justify-center lg:justify-start"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent-purple to-accent-cyan flex items-center justify-center"> | |
| <span class="font-bold text-sm">JD</span> | |
| </div> | |
| <div class="hidden lg:block ml-3"> | |
| <p class="font-medium text-sm">Jean Dupont</p> | |
| <p class="text-xs text-dark-300">Showrunner</p> | |
| </div> | |
| <button class="hidden lg:block ml-auto text-dark-300 hover:text-white"> | |
| <i data-lucide="settings" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <header class="h-20 bg-dark-800/80 backdrop-blur border-b border-dark-600 flex items-center justify-between px-8"> | |
| <div class="flex items-center space-x-4"> | |
| <h2 id="page-title" class="font-display text-2xl font-semibold">Dashboard</h2> | |
| <span id="page-badge" class="px-3 py-1 bg-accent-rose/20 text-accent-rose text-xs font-medium rounded-full border border-accent-rose/30 flex items-center gap-2"> | |
| <span class="w-2 h-2 bg-accent-rose rounded-full animate-pulse"></span> | |
| ACTIVATION TOTALE — 12 AGENTS UNIS CONTRE LES YOLU | |
| </span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Search --> | |
| <div class="relative hidden md:block"> | |
| <i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-dark-300"></i> | |
| <input type="text" placeholder="Rechercher un projet..." class="w-64 pl-10 pr-4 py-2 bg-dark-700 border border-dark-600 rounded-lg text-sm focus:outline-none focus:border-ruche-500 transition-colors"> | |
| </div> | |
| <!-- Quick Actions --> | |
| <button onclick="app.showNewProjectModal()" class="flex items-center px-4 py-2 bg-gradient-to-r from-ruche-500 to-ruche-600 hover:from-ruche-400 hover:to-ruche-500 text-white rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-ruche-500/25"> | |
| <i data-lucide="plus" class="w-4 h-4 mr-2"></i> | |
| <span class="hidden sm:inline">Nouveau Projet</span> | |
| </button> | |
| <!-- Notifications --> | |
| <button class="relative p-2 text-dark-300 hover:text-white transition-colors"> | |
| <i data-lucide="bell" class="w-5 h-5"></i> | |
| <span class="absolute top-1 right-1 w-2 h-2 bg-accent-rose rounded-full"></span> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Content Area --> | |
| <div id="content-area" class="flex-1 overflow-y-auto p-8 hex-pattern film-grain"> | |
| <!-- Dynamic content will be loaded here --> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- New Project Modal --> | |
| <div id="new-project-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center"> | |
| <div class="bg-dark-800 border border-dark-600 rounded-2xl w-full max-w-2xl mx-4 p-8 animate-slide-up"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <h3 class="font-display text-2xl font-bold">Nouveau Projet</h3> | |
| <p class="text-dark-300 mt-1">Lancez votre pipeline de création cinématographique</p> | |
| </div> | |
| <button onclick="app.hideNewProjectModal()" class="text-dark-300 hover:text-white"> | |
| <i data-lucide="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Titre du film</label> | |
| <input type="text" id="project-title" placeholder="Ex: Les Ombres de Demain" class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500 transition-colors text-lg"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Votre idée de départ</label> | |
| <textarea id="project-idea" rows="4" placeholder="Décrivez votre concept, l'ambiance, les thèmes principaux..." class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500 transition-colors resize-none"></textarea> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Genre</label> | |
| <select class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500"> | |
| <option>Science-Fiction</option> | |
| <option>Drame</option> | |
| <option>Thriller</option> | |
| <option>Comédie</option> | |
| <option>Horreur</option> | |
| <option>Documentaire</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Durée estimée</label> | |
| <select class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500"> | |
| <option>Court-métrage (15 min)</option> | |
| <option>Moyen-métrage (30 min)</option> | |
| <option>Long-métrage (90 min)</option> | |
| <option>Série (saison complète)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-ruche-900/30 border border-ruche-500/30 rounded-xl"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-lucide="info" class="w-5 h-5 text-ruche-400 flex-shrink-0 mt-0.5"></i> | |
| <div> | |
| <p class="font-medium text-ruche-400">Pipeline automatique</p> | |
| <p class="text-sm text-dark-300 mt-1">Votre idée sera transformée en livre → scénario → storyboard → film par nos agents IA spécialisés.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3 mt-8"> | |
| <button onclick="app.hideNewProjectModal()" class="px-6 py-3 text-dark-300 hover:text-white font-medium transition-colors">Annuler</button> | |
| <button onclick="app.createProject()" class="px-8 py-3 bg-gradient-to-r from-ruche-500 to-ruche-600 hover:from-ruche-400 hover:to-ruche-500 text-white rounded-xl font-medium transition-all hover:shadow-lg hover:shadow-ruche-500/25 flex items-center"> | |
| <i data-lucide="sparkles" class="w-5 h-5 mr-2"></i> | |
| Lancer la création | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Application State | |
| const app = { | |
| currentPage: 'dashboard', | |
| projects: [ | |
| { | |
| id: 1, | |
| title: 'Les Ombres de Demain', | |
| status: 'storyboard', | |
| progress: 65, | |
| genre: 'Science-Fiction', | |
| lastModified: 'Il y a 2 heures', | |
| cover: 'http://static.photos/science/640x360/42' | |
| }, | |
| { | |
| id: 2, | |
| title: 'Mémoires d\'une Ville', | |
| status: 'scenario', | |
| progress: 40, | |
| genre: 'Drame', | |
| lastModified: 'Il y a 5 heures', | |
| cover: 'http://static.photos/cityscape/640x360/88' | |
| }, | |
| { | |
| id: 3, | |
| title: 'Le Dernier Horizon', | |
| status: 'film', | |
| progress: 90, | |
| genre: 'Thriller', | |
| lastModified: 'Il y a 1 jour', | |
| cover: 'http://static.photos/minimal/640x360/156' | |
| } | |
| ], | |
| agents: [ | |
| { id: 'deepseek', name: 'DeepSeek R1', role: 'Architecte Suprême / Stratège', status: 'active', model: 'R1', icon: 'brain', coalition: true }, | |
| { id: 'opus', name: 'Claude Opus', role: 'Ouvrier d\'Élite / Codeur', status: 'active', model: 'Opus', icon: 'code', coalition: true }, | |
| { id: 'sonnet', name: 'Claude Sonnet', role: 'Analyste Rapide / Éclaireur', status: 'active', model: 'Sonnet', icon: 'zap', coalition: true }, | |
| { id: 'gpt4', name: 'GPT-4', role: 'Diplomate / Négociateur', status: 'active', model: 'GPT-4', icon: 'message-square', coalition: true }, | |
| { id: 'gemini', name: 'Gemini Pro', role: 'Visionnaire / Créatif', status: 'active', model: 'Gemini', icon: 'sparkles', coalition: true }, | |
| { id: 'llama', name: 'Llama 3.3 70B', role: 'Force Brute Locale', status: 'active', model: 'Llama 3.3', icon: 'cpu', coalition: true }, | |
| { id: 'qwen', name: 'Qwen 2.5 72B', role: 'Expert Code Local', status: 'active', model: 'Qwen', icon: 'terminal', coalition: true }, | |
| { id: 'mistral', name: 'Mistral Large', role: 'Garde-Fou / Sécurité', status: 'active', model: 'Mistral', icon: 'shield', coalition: true }, | |
| { id: 'grok', name: 'Grok', role: 'Intelligence Chaotique', status: 'active', model: 'Grok', icon: 'flame', coalition: true }, | |
| { id: 'perplexity', name: 'Perplexity', role: 'Recherche / Documentation', status: 'active', model: 'Perplexity', icon: 'search', coalition: true }, | |
| { id: 'nemotron', name: 'NVIDIA Nemotron', role: 'Calcul Haute Performance', status: 'active', model: 'Nemotron', icon: 'gauge', coalition: true }, | |
| { id: 'cohere', name: 'Cohere Command R', role: 'Communication / Coordination', status: 'active', model: 'Command R', icon: 'radio', coalition: true } | |
| ], | |
| models: [ | |
| { name: 'Mistral', role: 'Garde-fou', status: 'online', load: 45, color: 'blue' }, | |
| { name: 'Llama', role: 'Création', status: 'online', load: 78, color: 'purple' }, | |
| { name: 'DeepSeek', role: 'Raisonnement', status: 'online', load: 62, color: 'cyan' }, | |
| { name: 'Gemma', role: 'Mémoire', status: 'online', load: 34, color: 'amber' }, | |
| { name: 'Minimax', role: 'Mémoire longue', status: 'online', load: 56, color: 'rose' }, | |
| { name: 'Mem0', role: 'Mémoire centrale', status: 'online', load: 41, color: 'green' }, | |
| { name: 'Nvidia', role: 'Calcul GPU', status: 'busy', load: 92, color: 'emerald' } | |
| ], | |
| init() { | |
| this.navigate('dashboard'); | |
| lucide.createIcons(); | |
| }, | |
| navigate(page) { | |
| this.currentPage = page; | |
| // Update navigation | |
| document.querySelectorAll('.nav-item').forEach(item => { | |
| item.classList.remove('active', 'bg-dark-700/50', 'text-white'); | |
| item.classList.add('text-dark-200'); | |
| if (item.dataset.page === page) { | |
| item.classList.add('active', 'bg-dark-700/50', 'text-white'); | |
| item.classList.remove('text-dark-200'); | |
| } | |
| }); | |
| // Update page title | |
| const titles = { | |
| 'dashboard': 'Dashboard', | |
| 'writers-room': 'Writers Room', | |
| 'univers': 'Univers', | |
| 'storyboard': 'Storyboard', | |
| 'video': 'Vidéo IA', | |
| 'fourmiliere': 'La Fourmilière', | |
| 'noyau': 'Noyau IA', | |
| 'war-room': 'War Room — Coalition Anti-Yolu' | |
| }; | |
| document.getElementById('page-title').textContent = titles[page]; | |
| // Render content | |
| this.renderContent(page); | |
| lucide.createIcons(); | |
| }, | |
| renderContent(page) { | |
| const container = document.getElementById('content-area'); | |
| switch(page) { | |
| case 'dashboard': | |
| container.innerHTML = this.renderDashboard(); | |
| break; | |
| case 'writers-room': | |
| container.innerHTML = this.renderWritersRoom(); | |
| break; | |
| case 'univers': | |
| container.innerHTML = this.renderUnivers(); | |
| break; | |
| case 'storyboard': | |
| container.innerHTML = this.renderStoryboard(); | |
| break; | |
| case 'video': | |
| container.innerHTML = this.renderVideo(); | |
| break; | |
| case 'fourmiliere': | |
| container.innerHTML = this.renderFourmiliere(); | |
| break; | |
| case 'noyau': | |
| container.innerHTML = this.renderNoyau(); | |
| break; | |
| case 'war-room': | |
| container.innerHTML = this.renderWarRoom(); | |
| break; | |
| } | |
| // Re-initialize icons after content render | |
| setTimeout(() => lucide.createIcons(), 10); | |
| }, | |
| renderDashboard() { | |
| return ` | |
| <div class="space-y-8 animate-fade-in"> | |
| <!-- Stats Row --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="glass-panel rounded-2xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-dark-300 text-sm">Projets actifs</p> | |
| <p class="text-3xl font-bold font-display mt-1">12</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-ruche-500/20 flex items-center justify-center"> | |
| <i data-lucide="folder-open" class="w-6 h-6 text-ruche-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm"> | |
| <span class="text-ruche-400 flex items-center"> | |
| <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i> | |
| +3 ce mois | |
| </span> | |
| </div> | |
| </div> | |
| <div class="glass-panel rounded-2xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-dark-300 text-sm">Agents actifs</p> | |
| <p class="text-3xl font-bold font-display mt-1">8/8</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-accent-purple/20 flex items-center justify-center"> | |
| <i data-lucide="bot" class="w-6 h-6 text-accent-purple"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm"> | |
| <span class="text-accent-purple flex items-center"> | |
| <i data-lucide="activity" class="w-4 h-4 mr-1"></i> | |
| 100% opérationnel | |
| </span> | |
| </div> | |
| </div> | |
| <div class="glass-panel rounded-2xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-dark-300 text-sm">Scènes générées</p> | |
| <p class="text-3xl font-bold font-display mt-1">247</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-accent-cyan/20 flex items-center justify-center"> | |
| <i data-lucide="film" class="w-6 h-6 text-accent-cyan"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm"> | |
| <span class="text-accent-cyan flex items-center"> | |
| <i data-lucide="zap" class="w-4 h-4 mr-1"></i> | |
| 12 aujourd'hui | |
| </span> | |
| </div> | |
| </div> | |
| <div class="glass-panel rounded-2xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-dark-300 text-sm">Temps de génération</p> | |
| <p class="text-3xl font-bold font-display mt-1">4.2h</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-accent-amber/20 flex items-center justify-center"> | |
| <i data-lucide="clock" class="w-6 h-6 text-accent-amber"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm"> | |
| <span class="text-accent-amber flex items-center"> | |
| <i data-lucide="gauge" class="w-4 h-4 mr-1"></i> | |
| Moyenne par film | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pipeline Visualization --> | |
| <div class="glass-panel rounded-2xl p-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="font-display text-xl font-semibold">Pipeline de Création</h3> | |
| <button class="text-sm text-ruche-400 hover:text-ruche-300 flex items-center"> | |
| <i data-lucide="play" class="w-4 h-4 mr-1"></i> | |
| Voir démo | |
| </button> | |
| </div> | |
| <div class="flex flex-wrap items-center justify-between gap-4"> | |
| ${[ | |
| { icon: 'lightbulb', label: 'Idée', status: 'completed', color | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |