| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Armée d'IA Professionnelles - Suivi en Direct</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| body { |
| font-family: 'Montserrat', sans-serif; |
| scroll-behavior: smooth; |
| } |
| .hero-gradient { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .dashboard-gradient { |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .skill-bar { |
| transition: width 1.5s ease-in-out; |
| } |
| .nav-link { |
| position: relative; |
| } |
| .nav-link:after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: 0; |
| left: 0; |
| background-color: #667eea; |
| transition: width 0.3s ease; |
| } |
| .nav-link:hover:after { |
| width: 100%; |
| } |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| .ai-army-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| .ai-status-ready { |
| background: linear-gradient(135deg, #10B981 0%, #059669 100%); |
| } |
| .ai-status-busy { |
| background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); |
| } |
| .ai-status-offline { |
| background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%); |
| } |
| .payment-method { |
| transition: all 0.3s ease; |
| } |
| .payment-method:hover { |
| transform: scale(1.05); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| .payment-method.active { |
| border: 2px solid #4F46E5; |
| background-color: #EEF2FF; |
| } |
| .live-terminal { |
| background-color: #1a1a1a; |
| color: #00ff00; |
| font-family: 'Courier New', monospace; |
| border-radius: 8px; |
| padding: 15px; |
| height: 300px; |
| overflow-y: auto; |
| } |
| .live-terminal-line { |
| margin-bottom: 5px; |
| line-height: 1.5; |
| } |
| .live-terminal-cursor { |
| display: inline-block; |
| width: 10px; |
| height: 20px; |
| background-color: #00ff00; |
| animation: blink 1s infinite; |
| } |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
| .live-preview { |
| border: 2px dashed #4F46E5; |
| border-radius: 8px; |
| background-color: #f8fafc; |
| min-height: 200px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| position: relative; |
| overflow: hidden; |
| } |
| .live-preview-content { |
| width: 100%; |
| height: 100%; |
| transition: all 0.3s ease; |
| } |
| .progress-steps { |
| counter-reset: step; |
| } |
| .progress-step { |
| position: relative; |
| padding-left: 40px; |
| margin-bottom: 20px; |
| } |
| .progress-step:before { |
| counter-increment: step; |
| content: counter(step); |
| position: absolute; |
| left: 0; |
| width: 30px; |
| height: 30px; |
| border-radius: 50%; |
| background-color: #e2e8f0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| } |
| .progress-step.active:before { |
| background-color: #4F46E5; |
| color: white; |
| } |
| .progress-step.completed:before { |
| background-color: #10B981; |
| color: white; |
| content: "✓"; |
| } |
| .tooltip { |
| position: relative; |
| display: inline-block; |
| } |
| .tooltip .tooltiptext { |
| visibility: hidden; |
| width: 200px; |
| background-color: #333; |
| color: #fff; |
| text-align: center; |
| border-radius: 6px; |
| padding: 5px; |
| position: absolute; |
| z-index: 1; |
| bottom: 125%; |
| left: 50%; |
| margin-left: -100px; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| .tooltip:hover .tooltiptext { |
| visibility: visible; |
| opacity: 1; |
| } |
| .admin-overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0,0,0,0.9); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| z-index: 1000; |
| } |
| .admin-login { |
| background: white; |
| padding: 2rem; |
| border-radius: 8px; |
| width: 90%; |
| max-width: 400px; |
| } |
| .hidden { |
| display: none; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| |
| <div id="admin-overlay" class="admin-overlay hidden"> |
| <div class="admin-login"> |
| <h2 class="text-2xl font-bold text-center mb-6">Accès Administrateur</h2> |
| <div class="mb-4"> |
| <label for="admin-password" class="block text-gray-700 mb-2">Mot de passe secret</label> |
| <input type="password" id="admin-password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Entrez le mot de passe magique"> |
| <p class="text-xs text-gray-500 mt-1">Astuce: pensez à votre accès gratuit</p> |
| </div> |
| <button id="admin-login-btn" class="w-full bg-indigo-600 text-white py-2 rounded-lg font-semibold hover:bg-indigo-700 transition"> |
| <i class="fas fa-unlock-alt mr-2"></i> Déverrouiller l'accès complet |
| </button> |
| <div id="login-error" class="text-red-500 text-sm mt-2 hidden">Mot de passe incorrect. Essayez à nouveau.</div> |
| </div> |
| </div> |
|
|
| |
| <nav class="fixed w-full bg-white shadow-md z-50"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex items-center justify-between"> |
| <div class="text-2xl font-bold text-indigo-600">AI Army Live</div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#accueil" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Accueil</a> |
| <a href="#armee" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Armée d'IA</a> |
| <a href="#live" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Suivi en Direct</a> |
| <a href="#dashboard" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Tableau de Bord</a> |
| <a href="#contact" class="nav-link px-3 py-2 text-gray-700 hover:text-indigo-600">Nouveau Projet</a> |
| <a href="#" id="admin-access-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Admin</a> |
| </div> |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> |
| <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div id="mobile-menu" class="hidden md:hidden fixed inset-0 z-40 bg-white mt-16"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex flex-col space-y-4"> |
| <a href="#accueil" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100">Accueil</a> |
| <a href="#armee" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100">Armée d'IA</a> |
| <a href="#live" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100">Suivi en Direct</a> |
| <a href="#dashboard" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100">Tableau de Bord</a> |
| <a href="#contact" class="px-3 py-2 text-gray-700 hover:text-indigo-600 border-b border-gray-100">Nouveau Projet</a> |
| <a href="#" id="mobile-admin-access-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition text-center mt-4">Admin</a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section id="accueil" class="hero-gradient pt-32 pb-20 text-white"> |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-4">Suivi <span class="text-yellow-300">en Direct</span> des IA</h1> |
| <h2 class="text-2xl md:text-3xl mb-6">Observez vos projets se construire étape par étape</h2> |
| <p class="text-lg mb-8 opacity-90">Notre système unique vous permet de voir en temps réel le travail de nos IA spécialisées sur votre projet.</p> |
| <div class="flex space-x-4"> |
| <a href="#armee" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300">Voir les IA</a> |
| <a href="#contact" class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition duration-300">Nouveau Projet</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative w-64 h-64 md:w-80 md:h-80"> |
| <div class="absolute inset-0 bg-white rounded-xl shadow-2xl flex items-center justify-center p-6"> |
| <div class="text-center"> |
| <div class="animate-pulse mb-4"> |
| <i class="fas fa-robot text-5xl text-indigo-600"></i> |
| </div> |
| <h3 class="font-bold text-gray-800">50 IA en attente</h3> |
| <p class="text-sm text-gray-600 mt-2">Prêtes à traiter votre demande</p> |
| <div class="mt-4"> |
| <div class="flex justify-center space-x-2"> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| </div> |
| <p class="text-xs text-gray-500 mt-1">Système opérationnel</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="armee" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Notre Armée d'Intelligences Artificielles</h2> |
| |
| <div class="mb-12 flex justify-center"> |
| <div class="bg-indigo-50 rounded-full px-6 py-2 inline-flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
| <span class="text-indigo-700 font-medium">42 IA disponibles</span> |
| <span class="mx-2 text-gray-400">|</span> |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
| <span class="text-indigo-700 font-medium">8 IA occupées</span> |
| </div> |
| </div> |
| |
| <div class="ai-army-grid" id="ai-grid"> |
| |
| <div class="ai-status-ready rounded-xl p-6 text-white shadow-lg"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <h3 class="text-xl font-bold mb-1">IA Développement Web</h3> |
| <p class="text-indigo-100 mb-4">Spécialiste React, Vue, Node.js</p> |
| <div class="flex items-center text-sm"> |
| <i class="fas fa-bolt mr-2"></i> |
| <span>Vitesse: 95%</span> |
| </div> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i class="fas fa-code text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-white border-opacity-20"> |
| <button class="w-full bg-white text-indigo-600 py-2 rounded-lg font-semibold hover:bg-gray-100 transition assign-ai-btn" data-ai="web-dev"> |
| Assigner ce projet |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="ai-status-ready rounded-xl p-6 text-white shadow-lg"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <h3 class="text-xl font-bold mb-1">IA Design UI/UX</h3> |
| <p class="text-indigo-100 mb-4">Expert Figma, Adobe XD, Sketch</p> |
| <div class="flex items-center text-sm"> |
| <i class="fas fa-bolt mr-2"></i> |
| <span>Vitesse: 90%</span> |
| </div> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i class="fas fa-paint-brush text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-white border-opacity-20"> |
| <button class="w-full bg-white text-indigo-600 py-2 rounded-lg font-semibold hover:bg-gray-100 transition assign-ai-btn" data-ai="ui-ux"> |
| Assigner ce projet |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="ai-status-busy rounded-xl p-6 text-white shadow-lg"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <h3 class="text-xl font-bold mb-1">IA Marketing Digital</h3> |
| <p class="text-indigo-100 mb-4">SEO, Publicités, Analytics</p> |
| <div class="flex items-center text-sm"> |
| <i class="fas fa-bolt mr-2"></i> |
| <span>Vitesse: 85%</span> |
| </div> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i class="fas fa-bullhorn text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-white border-opacity-20"> |
| <button class="w-full bg-gray-300 text-gray-600 py-2 rounded-lg font-semibold cursor-not-allowed" disabled> |
| Occupée - Disponible dans 2h |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="ai-status-ready rounded-xl p-6 text-white shadow-lg"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <h3 class="text-xl font-bold mb-1">IA Rédaction SEO</h3> |
| <p class="text-indigo-100 mb-4">Contenu optimisé, articles, traductions</p> |
| <div class="flex items-center text-sm"> |
| <i class="fas fa-bolt mr-2"></i> |
| <span>Vitesse: 92%</span> |
| </div> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i class="fas fa-pen-fancy text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-white border-opacity-20"> |
| <button class="w-full bg-white text-indigo-600 py-2 rounded-lg font-semibold hover:bg-gray-100 transition assign-ai-btn" data-ai="seo-writing"> |
| Assigner ce projet |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="ai-status-ready rounded-xl p-6 text-white shadow-lg"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <h3 class="text-xl font-bold mb-1">IA Analyse de Données</h3> |
| <p class="text-indigo-100 mb-4">Python, SQL, Machine Learning</p> |
| <div class="flex items-center text-sm"> |
| <i class="fas fa-bolt mr-2"></i> |
| <span>Vitesse: 88%</span> |
| </div> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i class="fas fa-chart-line text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-white border-opacity-20"> |
| <button class="w-full bg-white text-indigo-600 py-2 rounded-lg font-semibold hover:bg-gray-100 transition assign-ai-btn" data-ai="data-analysis"> |
| Assigner ce projet |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="ai-status-ready rounded-xl p-6 text-white shadow-lg"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <h3 class="text-xl font-bold mb-1">IA Support Client</h3> |
| <p class="text-indigo-100 mb-4">Chatbots, FAQ, Assistance 24/7</p> |
| <div class="flex items-center text-sm"> |
| <i class="fas fa-bolt mr-2"></i> |
| <span>Vitesse: 98%</span> |
| </div> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i class="fas fa-headset text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-white border-opacity-20"> |
| <button class="w-full bg-white text-indigo-600 py-2 rounded-lg font-semibold hover:bg-gray-100 transition assign-ai-btn" data-ai="support"> |
| Assigner ce projet |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <button id="load-more-ai" class="bg-indigo-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-indigo-700 transition duration-300"> |
| Charger plus d'IA (32 disponibles) |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Outils IA Avancés</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> |
| <div class="bg-indigo-600 text-white p-6"> |
| <div class="flex justify-between items-center"> |
| <i class="fas fa-brain text-4xl"></i> |
| <span class="bg-white text-indigo-600 px-3 py-1 rounded-full text-sm font-bold">Nouveau</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">IA de Génération de Code</h3> |
| <p class="text-gray-600 mb-4">Générez du code complet à partir de descriptions en langage naturel avec notre IA spécialisée.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">React</span> |
| <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Python</span> |
| <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">SQL</span> |
| </div> |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-lg font-semibold hover:bg-indigo-700 transition"> |
| Essayer maintenant |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> |
| <div class="bg-purple-600 text-white p-6"> |
| <div class="flex justify-between items-center"> |
| <i class="fas fa-robot text-4xl"></i> |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-bold">Pro</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Assistant IA Multitâche</h3> |
| <p class="text-gray-600 mb-4">Une IA polyvalente capable de gérer simultanément développement, design et marketing.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Fullstack</span> |
| <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">UI/UX</span> |
| <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">SEO</span> |
| </div> |
| <button class="w-full bg-purple-600 text-white py-2 rounded-lg font-semibold hover:bg-purple-700 transition"> |
| Démarrer |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> |
| <div class="bg-green-600 text-white p-6"> |
| <div class="flex justify-between items-center"> |
| <i class="fas fa-chart-network text-4xl"></i> |
| <span class="bg-white text-green-600 px-3 py-1 rounded-full text-sm font-bold">IA++</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Optimiseur IA Automatique</h3> |
| <p class="text-gray-600 mb-4">Analyse et optimise automatiquement vos projets existants pour des performances maximales.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Performance</span> |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Sécurité</span> |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">SEO</span> |
| </div> |
| <button class="w-full bg-green-600 text-white py-2 rounded-lg font-semibold hover:bg-green-700 transition"> |
| Optimiser |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-8 mt-8"> |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> |
| <div class="bg-blue-600 text-white p-6"> |
| <div class="flex justify-between items-center"> |
| <i class="fas fa-eye text-4xl"></i> |
| <span class="bg-white text-blue-600 px-3 py-1 rounded-full text-sm font-bold">Vision</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">IA Vision par Ordinateur</h3> |
| <p class="text-gray-600 mb-4">Analyse d'images avancée pour la reconnaissance d'objets, de visages et de motifs complexes.</p> |
| <div class="flex items-center mb-4"> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 95%"></div> |
| </div> |
| <span class="ml-2 text-sm font-medium">95% de précision</span> |
| </div> |
| <button class="w-full bg-blue-600 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 transition"> |
| Analyser des images |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> |
| <div class="bg-red-600 text-white p-6"> |
| <div class="flex justify-between items-center"> |
| <i class="fas fa-language text-4xl"></i> |
| <span class="bg-white text-red-600 px-3 py-1 rounded-full text-sm font-bold">NLP</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Super Traducteur IA</h3> |
| <p class="text-gray-600 mb-4">Traduction en temps réel avec compréhension contextuelle dans plus de 100 langues.</p> |
| <div class="flex items-center mb-4"> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-red-600 h-2 rounded-full" style="width: 98%"></div> |
| </div> |
| <span class="ml-2 text-sm font-medium">98% de fidélité</span> |
| </div> |
| <button class="w-full bg-red-600 text-white py-2 rounded-lg font-semibold hover:bg-red-700 transition"> |
| Traduire maintenant |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <button class="bg-indigo-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-indigo-700 transition duration-300"> |
| Voir tous les outils (25+ disponibles) |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="live" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Suivi en Direct des Projets</h2> |
| |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden"> |
| <div class="dashboard-gradient text-white p-6"> |
| <div class="flex justify-between items-center"> |
| <h3 class="text-xl font-semibold">Suivi en Temps Réel du Projet</h3> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm">Projet: Site E-commerce ABC</span> |
| <div class="w-8 h-8 rounded-full bg-white text-indigo-600 flex items-center justify-center"> |
| <i class="fas fa-code"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-6 p-6"> |
| |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Journal d'Activité de l'IA</h4> |
| <div class="live-terminal" id="terminal-output"> |
| <div class="live-terminal-line">> Initialisation du projet "Site E-commerce ABC"...</div> |
| <div class="live-terminal-line">> Analyse des spécifications client...</div> |
| <div class="live-terminal-line">> Création de l'arborescence du projet...</div> |
| <div class="live-terminal-line">> Installation des dépendances: React, Node.js, MongoDB</div> |
| <div class="live-terminal-line">> Configuration de l'environnement de développement...</div> |
| <div class="live-terminal-line">> Création des composants principaux...</div> |
| <div class="live-terminal-line">> <span id="current-line">Développement de la page d'accueil en cours...</span><span class="live-terminal-cursor"></span></div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Aperçu en Direct</h4> |
| <div class="live-preview"> |
| <div class="live-preview-content" id="live-preview"> |
| <div class="text-center p-6"> |
| <i class="fas fa-laptop-code text-4xl text-indigo-500 mb-4"></i> |
| <p class="text-gray-600">L'aperçu du projet s'affichera ici en temps réel</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-6 border-t border-gray-200"> |
| <h4 class="font-semibold text-lg mb-4">Progression du Projet</h4> |
| |
| <div class="progress-steps"> |
| <div class="progress-step completed"> |
| <h5 class="font-medium">Analyse des besoins</h5> |
| <p class="text-sm text-gray-600">L'IA a analysé les spécifications et créé un plan détaillé</p> |
| </div> |
| |
| <div class="progress-step completed"> |
| <h5 class="font-medium">Configuration initiale</h5> |
| <p class="text-sm text-gray-600">Environnement de développement configuré avec toutes les dépendances</p> |
| </div> |
| |
| <div class="progress-step active"> |
| <h5 class="font-medium">Développement frontend</h5> |
| <p class="text-sm text-gray-600">Création des interfaces utilisateur avec React</p> |
| </div> |
| |
| <div class="progress-step"> |
| <h5 class="font-medium">Développement backend</h5> |
| <p class="text-sm text-gray-600">API et logique métier à développer</p> |
| </div> |
| |
| <div class="progress-step"> |
| <h5 class="font-medium">Tests et déploiement</h5> |
| <p class="text-sm text-gray-600">Validation finale et mise en production</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-6 border-t border-gray-200 bg-gray-50"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h4 class="font-semibold">IA Assignée: <span class="text-indigo-600">IA Développement Web</span></h4> |
| <p class="text-sm text-gray-600">Démarré il y a 1 heure 25 minutes</p> |
| </div> |
| <div class="flex items-center"> |
| <div class="mr-4"> |
| <div class="text-sm text-gray-600 mb-1">Progression</div> |
| <div class="w-32 bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-600 h-2 rounded-full" style="width: 45%"></div> |
| </div> |
| <span class="text-xs text-gray-500">45% complété</span> |
| </div> |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition"> |
| <i class="fas fa-pause mr-2"></i> Pause |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="dashboard" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Tableau de Bord Intelligent</h2> |
| |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden"> |
| <div class="dashboard-gradient text-white p-6"> |
| <div class="flex justify-between items-center"> |
| <h3 class="text-xl font-semibold">Tableau de Bord Administrateur</h3> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm">Connecté en tant que: Admin</span> |
| <div class="w-8 h-8 rounded-full bg-white text-indigo-600 flex items-center justify-center"> |
| <i class="fas fa-user"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-4 gap-6 p-6"> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">IA Actives</p> |
| <h3 class="text-2xl font-bold mt-2">42</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-green-500"> |
| <i class="fas fa-arrow-up mr-1"></i> |
| <span>8% ce mois</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Projets en cours</p> |
| <h3 class="text-2xl font-bold mt-2">18</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-tasks text-green-600"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-green-500"> |
| <i class="fas fa-arrow-up mr-1"></i> |
| <span>23% ce mois</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Clients actifs</p> |
| <h3 class="text-2xl font-bold mt-2">27</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-users text-blue-600"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-green-500"> |
| <i class="fas fa-arrow-up mr-1"></i> |
| <span>12% ce mois</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Revenus mensuels</p> |
| <h3 class="text-2xl font-bold mt-2">$24,500</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-dollar-sign text-purple-600"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-red-500"> |
| <i class="fas fa-arrow-down mr-1"></i> |
| <span>5% ce mois</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-6 p-6"> |
| |
| <div class="md:col-span-2 bg-white rounded-lg shadow"> |
| <div class="p-6 border-b border-gray-200"> |
| <h3 class="font-semibold text-lg">Projets Récents</h3> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projet</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IA Assignée</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progression</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="font-medium">Site E-commerce</div> |
| <div class="text-sm text-gray-500">Client: ABC Company</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> |
| <i class="fas fa-code text-xs text-indigo-600"></i> |
| </div> |
| <span>IA Développement</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">En cours</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div> |
| </div> |
| <span class="text-xs text-gray-500 mt-1">75% complété</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="font-medium">Application Mobile</div> |
| <div class="text-sm text-gray-500">Client: XYZ Startup</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> |
| <i class="fas fa-paint-brush text-xs text-indigo-600"></i> |
| </div> |
| <span>IA Design</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En attente</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 30%"></div> |
| </div> |
| <span class="text-xs text-gray-500 mt-1">30% complété</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="font-medium">Campagne Marketing</div> |
| <div class="text-sm text-gray-500">Client: Marketing Pro</div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2"> |
| <i class="fas fa-bullhorn text-xs text-indigo-600"></i> |
| </div> |
| <span>IA Marketing</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">En révision</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| <span class="text-xs text-gray-500 mt-1">90% complété</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow"> |
| <div class="p-6 border-b border-gray-200"> |
| <h3 class="font-semibold text-lg">Activité des IA</h3> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>IA Développement</span> |
| <span>8 projets</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-indigo-600 h-2 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>IA Design</span> |
| <span>5 projets</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 60%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>IA Marketing</span> |
| <span>3 projets</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-600 h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>IA Rédaction</span> |
| <span>2 projets</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 40%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 pt-4 border-t border-gray-200"> |
| <h4 class="font-medium mb-2">Prochaine Maintenance</h4> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-calendar-alt mr-2"></i> |
| <span>15 Mars 2023 à 02:00</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Nouveau Projet</h2> |
| |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden border-2 border-indigo-100"> |
| <div class="dashboard-gradient text-white p-6"> |
| <h3 class="text-xl font-semibold">Demande de Service Automatisée</h3> |
| <p class="opacity-90 mt-2">Notre système IA analysera votre demande et assignera automatiquement la meilleure IA pour votre projet</p> |
| </div> |
| |
| <div class="p-6"> |
| <form id="project-form" class="space-y-6"> |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label> |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Votre nom" required> |
| </div> |
| |
| <div> |
| <label for="email" class="block text-gray-700 font-medium mb-2">Adresse email</label> |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="votre@email.com" required> |
| </div> |
| </div> |
| |
| <div> |
| <label for="project-type" class="block text-gray-700 font-medium mb-2">Type de projet</label> |
| <select id="project-type" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" required> |
| <option value="">Sélectionnez un type</option> |
| <option value="web-dev">Développement Web</option> |
| <option value="mobile-app">Application Mobile</option> |
| <option value="ui-ux">Design UI/UX</option> |
| <option value="marketing">Marketing Digital</option> |
| <option value="content">Rédaction SEO</option> |
| <option value="data">Analyse de Données</option> |
| <option value="other">Autre</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="project-details" class="block text-gray-700 font-medium mb-2">Détails du projet</label> |
| <textarea id="project-details" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Décrivez votre projet en détail..." required></textarea> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <label for="budget" class="block text-gray-700 font-medium mb-2">Budget estimé (optionnel)</label> |
| <select id="budget" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
| <option value="">Sélectionnez une fourchette</option> |
| <option value="500-1000">$500 - $1,000</option> |
| <option value="1000-3000">$1,000 - $3,000</option> |
| <option value="3000-5000">$3,000 - $5,000</option> |
| <option value="5000+">$5,000+</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="timeline" class="block text-gray-700 font-medium mb-2">Délai souhaité (optionnel)</label> |
| <select id="timeline" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
| <option value="">Sélectionnez un délai</option> |
| <option value="1-2">1-2 semaines</option> |
| <option value="2-4">2-4 semaines</option> |
| <option value="1-2m">1-2 mois</option> |
| <option value="3m+">3 mois+</option> |
| </select> |
| </div> |
| </div> |
| |
| <div id="ai-suggestion" class="hidden bg-indigo-50 rounded-lg p-4 border border-indigo-100"> |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-indigo-800">Suggestion d'IA</h4> |
| <p class="text-sm text-indigo-600">Notre système recommande d'assigner <span id="suggested-ai" class="font-bold">IA Développement Web</span> pour ce projet.</p> |
| </div> |
| </div> |
| <div class="mt-3 flex justify-between"> |
| <button type="button" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-info-circle mr-1"></i> Plus de détails |
| </button> |
| <button type="button" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| <i class="fas fa-random mr-1"></i> Changer d'IA |
| </button> |
| </div> |
| </div> |
| |
| <div class="pt-4 border-t border-gray-200"> |
| <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition duration-300 flex items-center justify-center"> |
| <i class="fas fa-paper-plane mr-2"></i> |
| Soumettre la demande |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="admin" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Panneau d'Administration</h2> |
| |
| <div class="bg-gray-50 rounded-xl shadow-xl overflow-hidden"> |
| <div class="dashboard-gradient text-white p-6"> |
| <h3 class="text-xl font-semibold">Configuration Automatique</h3> |
| <p class="opacity-90 mt-2">Gérez votre armée d'IA et automatisations depuis ce panneau</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-6 p-6"> |
| |
| <div class="md:col-span-2 bg-white rounded-lg shadow"> |
| <div class="p-6 border-b border-gray-200"> |
| <h3 class="font-semibold text-lg">Configuration des IA</h3> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-6"> |
| |
| <div class="flex items-start"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-cogs text-indigo-600"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium mb-2">Assignation Automatique</h4> |
| <div class="mb-2"> |
| <label class="block text-sm text-gray-600 mb-1">Mode d'assignation:</label> |
| <select class="border border-gray-300 rounded px-2 py-1 text-sm w-full"> |
| <option>Automatique (recommandé)</option> |
| <option>Manuel</option> |
| <option>Hybride</option> |
| </select> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="auto-assign" class="mr-2" checked> |
| <label for="auto-assign" class="text-sm">Activer l'assignation intelligente</label> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-expand text-blue-600"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium mb-2">Mise à l'échelle automatique</h4> |
| <div class="mb-2"> |
| <label class="block text-sm text-gray-600 mb-1">Niveau d'IA actives:</label> |
| <div class="flex items-center"> |
| <input type="range" min="10" max="50" value="42" class="w-full mr-4"> |
| <span class="text-sm font-medium">42 IA</span> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="auto-scale" class="mr-2" checked> |
| <label for="auto-scale" class="text-sm">Ajustement automatique selon la charge</label> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-bell text-green-600"></i> |
| </div> |
| <div class="flex-1"> |
| <h4 class="font-medium mb-2">Notifications</h4> |
| <div class="mb-2"> |
| <label class="block text-sm text-gray-600 mb-1">Fréquence des rapports:</label> |
| <select class="border border-gray-300 rounded px-2 py-1 text-sm w-full"> |
| <option>Quotidien</option> |
| <option selected>Hebdomadaire</option> |
| <option>Mensuel</option> |
| </select> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="email-notifications" class="mr-2" checked> |
| <label for="email-notifications" class="text-sm">Notifications par email</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 pt-6 border-t border-gray-200"> |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 transition"> |
| Enregistrer les modifications |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow"> |
| <div class="p-6 border-b border-gray-200"> |
| <h3 class="font-semibold text-lg">Statut du Système</h3> |
| </div> |
| <div class="p-6"> |
| <div class="mb-6"> |
| <h4 class="font-medium mb-3">Performance des IA</h4> |
| <div class="h-40"> |
| |
| <div class="w-full h-full bg-gray-100 rounded flex items-center justify-center text-gray-400"> |
| Graphique des performances |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>IA Disponibles</span> |
| <span>42/50</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-600 h-2 rounded-full" style="width: 84%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>Charge CPU Moyenne</span> |
| <span>62%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 62%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>Mémoire Utilisée</span> |
| <span>45%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 pt-4 border-t border-gray-200"> |
| <h4 class="font-medium mb-2">Prochaine Maintenance</h4> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-calendar-alt mr-2"></i> |
| <span>15 Mars 2023 à 02:00</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-600 mt-1"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>Durée estimée: 30 minutes</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <div class="text-2xl font-bold text-white mb-2">AI Army Live</div> |
| <p class="text-gray-400">Solutions IA automatisées pour vos projets.</p> |
| </div> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i class="fab fa-linkedin-in text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 mt-10 pt-10 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 AI Army Live. Tous droits réservés.</p> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300">Mentions légales</a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300">Confidentialité</a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300">Conditions</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| // Mobile menu toggle |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| document.getElementById('mobile-menu').classList.toggle('hidden'); |
| }); |
| |
| // Smooth scrolling for anchor links |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| // Close mobile menu if open |
| if (!document.getElementById('mobile-menu').classList.contains('hidden')) { |
| document.getElementById('mobile-menu').classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| |
| // Payment method selection |
| const paymentMethods = document.querySelectorAll('.payment-method'); |
| paymentMethods.forEach(method => { |
| method.addEventListener('click', function() { |
| paymentMethods.forEach(m => m.classList.remove('active')); |
| this.classList.add('active'); |
| }); |
| }); |
| |
| // AI assignment buttons |
| document.querySelectorAll('.assign-ai-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| const aiType = this.getAttribute('data-ai'); |
| alert(`L'IA ${aiType} a été assignée à votre projet. Elle commencera à travailler immédiatement.`); |
| }); |
| }); |
| |
| // Project type change handler |
| document.getElementById('project-type').addEventListener('change', function() { |
| const aiSuggestion = document.getElementById('ai-suggestion'); |
| const suggestedAi = document.getElementById('suggested-ai'); |
| |
| if (this.value) { |
| let aiName = ''; |
| switch(this.value) { |
| case 'web-dev': aiName = 'IA Développement Web'; break; |
| case 'mobile-app': aiName = 'IA Application Mobile'; break; |
| case 'ui-ux': aiName = 'IA Design UI/UX'; break; |
| case 'marketing': aiName = 'IA Marketing Digital'; break; |
| case 'content': aiName = 'IA Rédaction SEO'; break; |
| case 'data': aiName = 'IA Analyse de Données'; break; |
| default: aiName = 'IA Polyvalente'; |
| } |
| |
| suggestedAi.textContent = aiName; |
| aiSuggestion.classList.remove('hidden'); |
| } else { |
| aiSuggestion.classList.add('hidden'); |
| } |
| }); |
| |
| // Load more AI button |
| document.getElementById('load-more-ai').addEventListener('click', function() { |
| const aiGrid = document.getElementById('ai-grid'); |
| const newAIs = [ |
| { |
| name: "IA Vision par Ordinateur", |
| description: "Analyse d'images et reconnaissance d'objets", |
| icon: "fa-eye", |
| speed: "95%", |
| status: "ready" |
| }, |
| { |
| name: "IA Traduction Automatique", |
| description: "Traduction en temps réel dans 100+ langues", |
| icon: "fa-language", |
| speed: "98%", |
| status: "ready" |
| }, |
| { |
| name: "IA Analyse de Sentiments", |
| description: "Analyse des émotions dans les textes", |
| icon: "fa-smile", |
| speed: "92%", |
| status: "busy" |
| }, |
| { |
| name: "IA Génération de Contenu", |
| description: "Création automatique de textes optimisés", |
| icon: "fa-keyboard", |
| speed: "90%", |
| status: "ready" |
| }, |
| { |
| name: "IA Optimisation SEO", |
| description: "Analyse et amélioration du référencement", |
| icon: "fa-search", |
| speed: "94%", |
| status: "ready" |
| }, |
| { |
| name: "IA Analyse Financière", |
| description: "Prédictions et analyses de marchés", |
| icon: "fa-chart-pie", |
| speed: "88%", |
| status: "ready" |
| } |
| ]; |
| |
| newAIs.forEach(ai => { |
| const aiCard = document.createElement('div'); |
| aiCard.className = `ai-status-${ai.status} rounded-xl p-6 text-white shadow-lg`; |
| aiCard.innerHTML = ` |
| <div class="flex items-start justify-between"> |
| <div> |
| <h3 class="text-xl font-bold mb-1">${ai.name}</h3> |
| <p class="text-indigo-100 mb-4">${ai.description}</p> |
| <div class="flex items-center text-sm"> |
| <i class="fas fa-bolt mr-2"></i> |
| <span>Vitesse: ${ai.speed}</span> |
| </div> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i class="fas ${ai.icon} text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-white border-opacity-20"> |
| <button class="w-full bg-white text-indigo-600 py-2 rounded-lg font-semibold hover:bg-gray-100 transition assign-ai-btn" data-ai="${ai.name.toLowerCase().replace(/ /g, '-')}"> |
| ${ai.status === 'ready' ? 'Assigner ce projet' : 'Occupée - Disponible bientôt'} |
| </button> |
| </div> |
| `; |
| aiGrid.appendChild(aiCard); |
| }); |
| |
| // Update button text |
| this.textContent = 'Toutes les IA chargées'; |
| this.disabled = true; |
| this.classList.remove('hover:bg-indigo-700'); |
| this.classList.add('bg-gray-400', 'cursor-not-allowed'); |
| }); |
| |
| // Project form submission |
| document.getElementById('project-form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| const submitButton = this.querySelector('button[type="submit"]'); |
| const originalText = submitButton.innerHTML; |
| |
| // Show processing state |
| submitButton.disabled = true; |
| submitButton.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Analyse en cours par notre IA...'; |
| |
| // Simulate AI processing delay |
| setTimeout(() => { |
| submitButton.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Demande envoyée'; |
| |
| // Show success message |
| const successMessage = document.createElement('div'); |
| successMessage.className = 'mt-4 p-4 bg-green-100 text-green-700 rounded-lg'; |
| successMessage.innerHTML = ' |
| </html> |
