Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Army Generator - BVL974</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .ai-card: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); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .command-center { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%); | |
| } | |
| .ai-status-active { | |
| background: linear-gradient(90deg, #10b981 0%, #84cc16 100%); | |
| } | |
| .ai-status-standby { | |
| background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| .generating { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| color: white; | |
| } | |
| .progress-container { | |
| width: 80%; | |
| max-width: 500px; | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <!-- Command Center Header --> | |
| <header class="command-center py-12 px-4"> | |
| <div class="container mx-auto text-center"> | |
| <h1 class="text-5xl font-bold mb-4">AI ARMY COMMAND CENTER</h1> | |
| <p class="text-xl opacity-90 mb-8">Déployez votre armée d'IA pour générer tout type de contenu, code, design et plus</p> | |
| <div class="max-w-4xl mx-auto bg-black bg-opacity-40 rounded-xl p-6 backdrop-blur-sm"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input type="text" id="missionInput" placeholder="Entrez votre commande (ex: 'Générer un site e-commerce complet')" | |
| class="flex-grow px-6 py-4 rounded-lg bg-gray-800 border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <button id="deployBtn" class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-lg font-bold transition-all transform hover:scale-105 flex items-center justify-center"> | |
| <i class="fas fa-rocket mr-2"></i> DÉPLOYER | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- AI Units Dashboard --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> | |
| <!-- AI Unit Card --> | |
| <div class="ai-card bg-gray-800 rounded-xl p-6 border border-gray-700 transition-all duration-300 shadow-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-blue-900 p-3 rounded-full mr-4"> | |
| <i class="fas fa-robot text-2xl text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">CodeMaster-3000</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2 pulse"></span> | |
| <span class="text-sm text-green-400">En ligne</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-4">Spécialiste en génération de code HTML, CSS, JS, Python, etc.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Capacité</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded-lg font-medium mt-2 generate-btn" data-type="code"> | |
| <i class="fas fa-terminal mr-2"></i> Générer du code | |
| </button> | |
| </div> | |
| <!-- AI Unit Card --> | |
| <div class="ai-card bg-gray-800 rounded-xl p-6 border border-gray-700 transition-all duration-300 shadow-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-purple-900 p-3 rounded-full mr-4"> | |
| <i class="fas fa-paint-brush text-2xl text-purple-300"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">DesignBot-X</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2 pulse"></span> | |
| <span class="text-sm text-green-400">En ligne</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-4">Création de designs UI/UX, logos, illustrations et assets visuels</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Capacité</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg font-medium mt-2 generate-btn" data-type="design"> | |
| <i class="fas fa-magic mr-2"></i> Générer un design | |
| </button> | |
| </div> | |
| <!-- AI Unit Card --> | |
| <div class="ai-card bg-gray-800 rounded-xl p-6 border border-gray-700 transition-all duration-300 shadow-lg"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-green-900 p-3 rounded-full mr-4"> | |
| <i class="fas fa-file-alt text-2xl text-green-300"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">ContentGen Pro</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2 pulse"></span> | |
| <span class="text-sm text-green-400">En ligne</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 mb-4">Rédaction de contenu, articles, scripts, traductions et copywriting</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Capacité</span> | |
| <span>78%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-green-600 hover:bg-green-700 py-2 rounded-lg font-medium mt-2 generate-btn" data-type="content"> | |
| <i class="fas fa-keyboard mr-2"></i> Générer du contenu | |
| </button> | |
| </div> | |
| </div> | |
| <!-- AI Army Status --> | |
| <div class="bg-gray-800 rounded-xl p-6 mb-12 border border-gray-700"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-chart-bar mr-3 text-blue-400"></i> | |
| État de l'Armée d'IA | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-gray-900 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium text-gray-400">Unités Actives</h3> | |
| <span class="text-2xl font-bold text-green-400">27</span> | |
| </div> | |
| <div class="text-sm text-gray-500">Prêtes à exécuter des tâches</div> | |
| </div> | |
| <div class="bg-gray-900 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium text-gray-400">Tâches en cours</h3> | |
| <span class="text-2xl font-bold text-yellow-400">14</span> | |
| </div> | |
| <div class="text-sm text-gray-500">En traitement actif</div> | |
| </div> | |
| <div class="bg-gray-900 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium text-gray-400">Capacité totale</h3> | |
| <span class="text-2xl font-bold text-blue-400">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2 mt-2"> | |
| <div class="bg-blue-500 h-2 rounded-full progress-bar" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-left"> | |
| <thead class="border-b border-gray-700 text-gray-400"> | |
| <tr> | |
| <th class="pb-3">Unité d'IA</th> | |
| <th class="pb-3">Spécialité</th> | |
| <th class="pb-3">Statut</th> | |
| <th class="pb-3">Charge</th> | |
| <th class="pb-3">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-700 hover:bg-gray-900"> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-900 p-2 rounded-full mr-3"> | |
| <i class="fas fa-code text-blue-300"></i> | |
| </div> | |
| <span>DevAI-7</span> | |
| </div> | |
| </td> | |
| <td>Développement Web</td> | |
| <td> | |
| <span class="px-3 py-1 rounded-full text-xs bg-green-900 text-green-300">Active</span> | |
| </td> | |
| <td> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </td> | |
| <td> | |
| <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm generate-btn" data-type="code"> | |
| <i class="fas fa-play mr-1"></i> Générer | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-900"> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-900 p-2 rounded-full mr-3"> | |
| <i class="fas fa-image text-purple-300"></i> | |
| </div> | |
| <span>DesignMaster-2</span> | |
| </div> | |
| </td> | |
| <td>Design Graphique</td> | |
| <td> | |
| <span class="px-3 py-1 rounded-full text-xs bg-yellow-900 text-yellow-300">Occupée</span> | |
| </td> | |
| <td> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </td> | |
| <td> | |
| <button class="px-3 py-1 bg-gray-600 hover:bg-gray-700 rounded text-sm" disabled> | |
| <i class="fas fa-clock mr-1"></i> En attente | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-900"> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-900 p-2 rounded-full mr-3"> | |
| <i class="fas fa-language text-green-300"></i> | |
| </div> | |
| <span>LinguaBot</span> | |
| </div> | |
| </td> | |
| <td>Traduction</td> | |
| <td> | |
| <span class="px-3 py-1 rounded-full text-xs bg-green-900 text-green-300">Active</span> | |
| </td> | |
| <td> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </td> | |
| <td> | |
| <button class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded text-sm generate-btn" data-type="content"> | |
| <i class="fas fa-play mr-1"></i> Générer | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Task Generator --> | |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-tasks mr-3 text-purple-400"></i> | |
| Générateur de Tâches Avancé | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-400 mb-2">Type de travail</label> | |
| <select id="taskType" class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="code">Développement Web</option> | |
| <option value="design">Design Graphique</option> | |
| <option value="content">Rédaction de Contenu</option> | |
| <option value="data">Analyse de Données</option> | |
| <option value="automation">Automatisation</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-400 mb-2">Complexité</label> | |
| <div class="flex items-center space-x-4"> | |
| <button class="complexity-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg" data-level="simple">Simple</button> | |
| <button class="complexity-btn px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg" data-level="medium">Moyen</button> | |
| <button class="complexity-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg" data-level="complex">Complexe</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-400 mb-2">Délai</label> | |
| <div class="flex items-center space-x-4"> | |
| <button class="timeframe-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg" data-time="24h">24h</button> | |
| <button class="timeframe-btn px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg" data-time="1h">1h</button> | |
| <button class="timeframe-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg" data-time="urgent">Urgent</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Instructions détaillées</label> | |
| <textarea id="taskInstructions" class="w-full h-40 px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Décrivez précisément la tâche à accomplir..."></textarea> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="priorityCheck" class="form-checkbox h-5 w-5 text-purple-600 rounded"> | |
| <label for="priorityCheck" class="ml-2 text-gray-400">Priorité Maximum</label> | |
| </div> | |
| <button id="sendTaskBtn" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-bold flex items-center"> | |
| <i class="fas fa-paper-plane mr-2"></i> Générer maintenant | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Results Section --> | |
| <section class="bg-gray-800 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center"> | |
| <i class="fas fa-trophy mr-3 text-yellow-400"></i> | |
| Résultats Générés | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="resultsContainer"> | |
| <!-- Result Card --> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-700 hover:border-blue-500 transition-all"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Site E-commerce</h3> | |
| <p class="text-sm text-gray-500">Généré il y a 2 heures</p> | |
| </div> | |
| <span class="px-2 py-1 bg-blue-900 text-blue-300 rounded text-xs">HTML/CSS/JS</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Site complet avec panier, paiements et gestion de produits</p> | |
| <div class="flex justify-between"> | |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm"> | |
| <i class="fas fa-eye mr-1"></i> Prévisualiser | |
| </button> | |
| <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm"> | |
| <i class="fas fa-download mr-1"></i> Télécharger | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Result Card --> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-700 hover:border-purple-500 transition-all"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Logo Entreprise</h3> | |
| <p class="text-sm text-gray-500">Généré il y a 5 heures</p> | |
| </div> | |
| <span class="px-2 py-1 bg-purple-900 text-purple-300 rounded text-xs">SVG/AI</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Logo moderne avec variations de couleurs et formats</p> | |
| <div class="flex justify-between"> | |
| <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg text-sm"> | |
| <i class="fas fa-eye mr-1"></i> Prévisualiser | |
| </button> | |
| <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm"> | |
| <i class="fas fa-download mr-1"></i> Télécharger | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Result Card --> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-700 hover:border-green-500 transition-all"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Article de Blog</h3> | |
| <p class="text-sm text-gray-500">Généré il y a 1 jour</p> | |
| </div> | |
| <span class="px-2 py-1 bg-green-900 text-green-300 rounded text-xs">SEO Optimisé</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Guide complet sur l'utilisation des IA génératives en 2024</p> | |
| <div class="flex justify-between"> | |
| <button class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg text-sm"> | |
| <i class="fas fa-eye mr-1"></i> Prévisualiser | |
| </button> | |
| <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm"> | |
| <i class="fas fa-download mr-1"></i> Télécharger | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-bold"> | |
| <i class="fas fa-history mr-2"></i> Voir tous les résultats | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-8 border-t border-gray-800"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="flex justify-center space-x-6 mb-6"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-500"> | |
| © 2024 BVL974 AI Army Generator. Tous droits réservés. | |
| </p> | |
| </div> | |
| </footer> | |
| <!-- Generating Overlay (hidden by default) --> | |
| <div id="generatingOverlay" class="generating" style="display: none;"> | |
| <i class="fas fa-cog fa-spin text-6xl mb-6 text-blue-400"></i> | |
| <h2 class="text-3xl font-bold mb-4">Génération en cours...</h2> | |
| <p id="generatingMessage" class="text-xl mb-8">Votre armée d'IA travaille sur votre demande</p> | |
| <div class="progress-container"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>Progression</span> | |
| <span id="progressPercent">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-4"> | |
| <div id="progressBar" class="bg-blue-500 h-4 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <button id="cancelGeneration" class="mt-8 px-6 py-3 bg-red-600 hover:bg-red-700 rounded-lg font-bold"> | |
| <i class="fas fa-times mr-2"></i> Annuler | |
| </button> | |
| </div> | |
| <script> | |
| // Animation for deploy button | |
| document.getElementById('deployBtn').addEventListener('click', function() { | |
| const missionInput = document.getElementById('missionInput').value; | |
| if (!missionInput) { | |
| alert("Veuillez entrer une commande avant de déployer"); | |
| return; | |
| } | |
| startGeneration("Déploiement de l'armée d'IA pour: " + missionInput); | |
| }); | |
| // Generate buttons functionality | |
| document.querySelectorAll('.generate-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const type = this.getAttribute('data-type'); | |
| let message = ""; | |
| switch(type) { | |
| case 'code': | |
| message = "Génération de code en cours..."; | |
| break; | |
| case 'design': | |
| message = "Création de design en cours..."; | |
| break; | |
| case 'content': | |
| message = "Rédaction de contenu en cours..."; | |
| break; | |
| default: | |
| message = "Traitement de la demande en cours..."; | |
| } | |
| startGeneration(message); | |
| }); | |
| }); | |
| // Advanced task generator | |
| document.getElementById('sendTaskBtn').addEventListener('click', function() { | |
| const taskType = document.getElementById('taskType').value; | |
| const instructions = document.getElementById('taskInstructions').value; | |
| const isPriority = document.getElementById('priorityCheck').checked; | |
| if (!instructions) { | |
| alert("Veuillez entrer des instructions détaillées"); | |
| return; | |
| } | |
| let message = "Traitement de la tâche '" + taskType + "' en cours"; | |
| if (isPriority) message += " (priorité maximum)"; | |
| startGeneration(message); | |
| }); | |
| // Complexity buttons | |
| document.querySelectorAll('.complexity-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.querySelectorAll('.complexity-btn').forEach(b => { | |
| b.classList.remove('bg-purple-600', 'hover:bg-purple-700'); | |
| b.classList.add('bg-gray-700', 'hover:bg-gray-600'); | |
| }); | |
| this.classList.remove('bg-gray-700', 'hover:bg-gray-600'); | |
| this.classList.add('bg-purple-600', 'hover:bg-purple-700'); | |
| }); | |
| }); | |
| // Timeframe buttons | |
| document.querySelectorAll('.timeframe-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.querySelectorAll('.timeframe-btn').forEach(b => { | |
| b.classList.remove('bg-purple-600', 'hover:bg-purple-700'); | |
| b.classList.add('bg-gray-700', 'hover:bg-gray-600'); | |
| }); | |
| this.classList.remove('bg-gray-700', 'hover:bg-gray-600'); | |
| this.classList.add('bg-purple-600', 'hover:bg-purple-700'); | |
| }); | |
| }); | |
| // Cancel generation | |
| document.getElementById('cancelGeneration').addEventListener('click', function() { | |
| document.getElementById('generatingOverlay').style.display = 'none'; | |
| }); | |
| // AI card hover effects | |
| document.querySelectorAll('.ai-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| const icon = this.querySelector('.fa-robot, .fa-paint-brush, .fa-file-alt'); | |
| if (icon) { | |
| icon.classList.add('float'); | |
| icon.style.animation = 'float 3s ease-in-out infinite'; | |
| } | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| const icon = this.querySelector('.fa-robot, .fa-paint-brush, .fa-file-alt'); | |
| if (icon) { | |
| icon.classList.remove('float'); | |
| icon.style.animation = ''; | |
| } | |
| }); | |
| }); | |
| // Start generation function | |
| function startGeneration(message) { | |
| const overlay = document.getElementById('generatingOverlay'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const progressPercent = document.getElementById('progressPercent'); | |
| const generatingMessage = document.getElementById('generatingMessage'); | |
| // Show overlay | |
| generatingMessage.textContent = message; | |
| overlay.style.display = 'flex'; | |
| // Simulate progress | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 5; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = progress + '%'; | |
| progressPercent.textContent = Math.round(progress) + '%'; | |
| if (progress >= 100) { | |
| clearInterval(interval); | |
| // Hide overlay after completion | |
| setTimeout(() => { | |
| overlay.style.display = 'none'; | |
| // Add new result | |
| addNewResult(message); | |
| }, 1000); | |
| } | |
| }, 300); | |
| } | |
| // Add new result to the results section | |
| function addNewResult(message) { | |
| const resultsContainer = document.getElementById('resultsContainer'); | |
| const types = ['code', 'design', 'content']; | |
| const randomType = types[Math.floor(Math.random() * types.length)]; | |
| let newResult = document.createElement('div'); | |
| newResult.className = 'bg-gray-900 rounded-xl p-6 border border-gray-700 hover:border-blue-500 transition-all'; | |
| newResult.innerHTML = ` | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">${message.substring(0, 20)}...</h3> | |
| <p class="text-sm text-gray-500">Généré à l'instant</p> | |
| </div> | |
| <span class="px-2 py-1 ${ | |
| randomType === 'code' ? 'bg-blue-900 text-blue-300' : | |
| randomType === 'design' ? 'bg-purple-900 text-purple-300' : | |
| 'bg-green-900 text-green-300' | |
| } rounded text-xs">${ | |
| randomType === 'code' ? 'HTML/CSS/JS' : | |
| randomType === 'design' ? 'SVG/AI' : | |
| 'SEO Optimisé' | |
| }</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">${message}</p> | |
| <div class="flex justify-between"> | |
| <button class="px-4 py-2 ${ | |
| randomType === 'code' ? 'bg-blue-600 hover:bg-blue-700' : | |
| randomType === 'design' ? 'bg-purple-600 hover:bg-purple-700' : | |
| 'bg-green-600 hover:bg-green-700' | |
| } rounded-lg text-sm"> | |
| <i class="fas fa-eye mr-1"></i> Prévisualiser | |
| </button> | |
| <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm"> | |
| <i class="fas fa-download mr-1"></i> Télécharger | |
| </button> | |
| </div> | |
| `; | |
| // Add to top of results | |
| resultsContainer.insertBefore(newResult, resultsContainer.firstChild); | |
| // Show notification | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed bottom-4 right-4 bg-green-700 text-white px-6 py-3 rounded-lg shadow-xl flex items-center animate-fade-in'; | |
| notification.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Génération terminée!`; | |
| document.body.appendChild(notification); | |
| // Remove notification after 3 seconds | |
| setTimeout(() => { | |
| notification.classList.add('animate-fade-out'); | |
| setTimeout(() => notification.remove(), 500); | |
| }, 3000); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/beep-site-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |