Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ProGen - Déploiement Automatique</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .deploy-progress { | |
| height: 6px; | |
| transition: width 0.3s ease; | |
| } | |
| .deploy-log { | |
| font-family: 'Courier New', monospace; | |
| font-size: 13px; | |
| height: 250px; | |
| overflow-y: auto; | |
| background-color: #1e1e1e; | |
| color: #d4d4d4; | |
| padding: 10px; | |
| border-radius: 4px; | |
| } | |
| .log-success { color: #4CAF50; } | |
| .log-warning { color: #FFC107; } | |
| .log-error { color: #F44336; } | |
| .log-info { color: #2196F3; } | |
| .log-dns { color: #9C27B0; } | |
| .log-ssl { color: #FF9800; } | |
| .log-server { color: #00BCD4; } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased"> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-rocket text-2xl"></i> | |
| <h1 class="text-xl font-bold">ProGen AutoDeploy</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-white bg-opacity-20 px-4 py-2 rounded-lg hover:bg-opacity-30 transition"> | |
| <i class="fas fa-user mr-2"></i>Mon compte | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-6 py-8"> | |
| <!-- Deployment Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h2 class="text-2xl font-bold text-gray-800">Configuration de déploiement automatique</h2> | |
| <p class="text-gray-600 mt-2">Configurez votre déploiement complet avec DNS, SSL et serveur en quelques clics</p> | |
| </div> | |
| <!-- Configuration Steps --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6"> | |
| <!-- Domain Configuration --> | |
| <div class="border border-gray-200 rounded-lg p-5 hover:border-purple-500 transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 text-purple-600 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg">Nom de domaine</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Votre domaine</label> | |
| <div class="flex"> | |
| <input type="text" id="domain-name" class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="mon-site"> | |
| <select id="domain-extension" class="border-t border-r border-b border-gray-300 rounded-r-lg px-4 py-2 bg-gray-50 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option>.com</option> | |
| <option>.fr</option> | |
| <option>.net</option> | |
| <option>.io</option> | |
| <option>.org</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="register-domain" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500 mr-2" checked> | |
| <span class="text-sm text-gray-700">Enregistrer un nouveau domaine</span> | |
| </label> | |
| </div> | |
| <div id="existing-domain-group" class="hidden"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">DNS existant</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option>Cloudflare</option> | |
| <option>OVH</option> | |
| <option>GoDaddy</option> | |
| <option>Google Domains</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SSL Configuration --> | |
| <div class="border border-gray-200 rounded-lg p-5 hover:border-purple-500 transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-orange-100 text-orange-600 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg">Certificat SSL</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Type de certificat</label> | |
| <select id="ssl-type" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="letsencrypt">Let's Encrypt (Gratuit)</option> | |
| <option value="wildcard">Wildcard SSL</option> | |
| <option value="ev">EV SSL (Extended Validation)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500 mr-2" checked> | |
| <span class="text-sm text-gray-700">Renouvellement automatique</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500 mr-2"> | |
| <span class="text-sm text-gray-700">Forcer HTTPS (HSTS)</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Server Configuration --> | |
| <div class="border border-gray-200 rounded-lg p-5 hover:border-purple-500 transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg">Configuration serveur</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Fournisseur</label> | |
| <select id="server-provider" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="vercel">Vercel (Recommandé)</option> | |
| <option value="aws">AWS</option> | |
| <option value="digitalocean">DigitalOcean</option> | |
| <option value="ovh">OVH</option> | |
| <option value="custom">Serveur personnalisé</option> | |
| </select> | |
| </div> | |
| <div id="server-size-group"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Taille du serveur</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> | |
| <option>Micro (1 vCPU, 1GB RAM) - Gratuit</option> | |
| <option>Small (1 vCPU, 2GB RAM) - $5/mois</option> | |
| <option>Medium (2 vCPU, 4GB RAM) - $15/mois</option> | |
| <option>Large (4 vCPU, 8GB RAM) - $30/mois</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500 mr-2" checked> | |
| <span class="text-sm text-gray-700">Sauvegardes automatiques</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deployment Action --> | |
| <div class="bg-gray-50 px-6 py-4 flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Estimation des coûts</h4> | |
| <p class="text-sm text-gray-600" id="cost-estimation">Domaine: $12/an • SSL: Gratuit • Serveur: Gratuit</p> | |
| </div> | |
| <button id="start-deployment-btn" class="gradient-bg text-white font-semibold py-3 px-8 rounded-lg hover:opacity-90 transition flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> Lancer le déploiement automatique | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Deployment Panel (Hidden by default) --> | |
| <div class="hidden bg-white rounded-xl shadow-lg p-6 mb-8" id="deployment-panel"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800">Déploiement en cours</h3> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full" id="current-deploy-step">Initialisation</span> | |
| <div class="h-4 w-4 rounded-full bg-green-500 animate-pulse" id="deploy-status-indicator"></div> | |
| </div> | |
| </div> | |
| <!-- Progress bar --> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Progression globale</span> | |
| <span id="progress-percent">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="deploy-progress bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Deployment timeline --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="border border-gray-200 rounded-lg p-3 text-center" id="step-domain"> | |
| <div class="h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-globe text-gray-400"></i> | |
| </div> | |
| <p class="text-sm font-medium text-gray-500">Configuration DNS</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 text-center" id="step-ssl"> | |
| <div class="h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-lock text-gray-400"></i> | |
| </div> | |
| <p class="text-sm font-medium text-gray-500">Certificat SSL</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 text-center" id="step-server"> | |
| <div class="h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-server text-gray-400"></i> | |
| </div> | |
| <p class="text-sm font-medium text-gray-500">Serveur</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 text-center" id="step-deploy"> | |
| <div class="h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-rocket text-gray-400"></i> | |
| </div> | |
| <p class="text-sm font-medium text-gray-500">Déploiement</p> | |
| </div> | |
| </div> | |
| <!-- Deployment logs --> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h4 class="text-sm font-medium text-gray-700">Journal de déploiement</h4> | |
| <button class="text-xs text-purple-600 hover:text-purple-700" id="copy-logs-btn"> | |
| <i class="fas fa-copy mr-1"></i> Copier | |
| </button> | |
| </div> | |
| <div class="deploy-log" id="deploy-log"> | |
| <div class="log-info">Prêt à lancer le déploiement automatique...</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="bg-gray-100 text-gray-700 font-medium py-2 px-6 rounded-lg hover:bg-gray-200 transition" id="cancel-deploy-btn"> | |
| <i class="fas fa-times mr-2"></i> Annuler | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Deployment Results (Hidden by default) --> | |
| <div class="hidden bg-white rounded-xl shadow-lg p-6 mb-8" id="deployment-results"> | |
| <div class="text-center py-8"> | |
| <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4"> | |
| <i class="fas fa-check text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Déploiement réussi!</h3> | |
| <p class="text-gray-600 mb-6">Votre site est maintenant en ligne avec une configuration complète.</p> | |
| <div class="max-w-md mx-auto bg-gray-50 rounded-lg p-6 text-left"> | |
| <div class="flex items-center mb-4 pb-4 border-b border-gray-200"> | |
| <div class="bg-purple-100 text-purple-600 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Nom de domaine</h4> | |
| <p class="text-sm text-gray-600" id="final-domain">mon-site.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4 pb-4 border-b border-gray-200"> | |
| <div class="bg-orange-100 text-orange-600 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Certificat SSL</h4> | |
| <p class="text-sm text-gray-600" id="final-ssl">Let's Encrypt - Valide jusqu'au 01/01/2024</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Serveur</h4> | |
| <p class="text-sm text-gray-600" id="final-server">Vercel - Micro (1 vCPU, 1GB RAM)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" target="_blank" class="gradient-bg text-white font-medium py-2 px-6 rounded-lg hover:opacity-90 transition inline-flex items-center justify-center" id="visit-site-btn"> | |
| <i class="fas fa-external-link-alt mr-2"></i> Visiter le site | |
| </a> | |
| <a href="#" class="bg-white border border-gray-300 text-gray-700 font-medium py-2 px-6 rounded-lg hover:bg-gray-50 transition inline-flex items-center justify-center"> | |
| <i class="fas fa-cog mr-2"></i> Gérer la configuration | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // DOM elements | |
| const registerDomainCheckbox = document.getElementById('register-domain'); | |
| const existingDomainGroup = document.getElementById('existing-domain-group'); | |
| const startDeploymentBtn = document.getElementById('start-deployment-btn'); | |
| const deploymentPanel = document.getElementById('deployment-panel'); | |
| const deploymentResults = document.getElementById('deployment-results'); | |
| const deployLog = document.getElementById('deploy-log'); | |
| const progressBar = document.querySelector('.deploy-progress'); | |
| const progressPercent = document.getElementById('progress-percent'); | |
| const currentDeployStep = document.getElementById('current-deploy-step'); | |
| const deployStatusIndicator = document.getElementById('deploy-status-indicator'); | |
| const finalDomain = document.getElementById('final-domain'); | |
| const finalSsl = document.getElementById('final-ssl'); | |
| const finalServer = document.getElementById('final-server'); | |
| const visitSiteBtn = document.getElementById('visit-site-btn'); | |
| const costEstimation = document.getElementById('cost-estimation'); | |
| const sslType = document.getElementById('ssl-type'); | |
| const serverProvider = document.getElementById('server-provider'); | |
| const domainName = document.getElementById('domain-name'); | |
| const domainExtension = document.getElementById('domain-extension'); | |
| // Toggle domain configuration based on checkbox | |
| registerDomainCheckbox.addEventListener('change', function() { | |
| existingDomainGroup.classList.toggle('hidden', this.checked); | |
| updateCostEstimation(); | |
| }); | |
| // Update cost estimation when options change | |
| [sslType, serverProvider, domainName, domainExtension].forEach(element => { | |
| element.addEventListener('change', updateCostEstimation); | |
| }); | |
| function updateCostEstimation() { | |
| const domainCost = registerDomainCheckbox.checked ? "$12/an" : "Gratuit (existant)"; | |
| let sslCost = "Gratuit"; | |
| if (sslType.value === 'wildcard') sslCost = "$50/an"; | |
| if (sslType.value === 'ev') sslCost = "$150/an"; | |
| let serverCost = "Gratuit"; | |
| if (serverProvider.value === 'aws') serverCost = "$5/mois"; | |
| if (serverProvider.value === 'digitalocean') serverCost = "$10/mois"; | |
| if (serverProvider.value === 'ovh') serverCost = "$15/mois"; | |
| costEstimation.textContent = `Domaine: ${domainCost} • SSL: ${sslCost} • Serveur: ${serverCost}`; | |
| } | |
| // Initialize cost estimation | |
| updateCostEstimation(); | |
| // Start deployment process | |
| startDeploymentBtn.addEventListener('click', function() { | |
| // Show deployment panel | |
| deploymentPanel.classList.remove('hidden'); | |
| startDeploymentBtn.disabled = true; | |
| // Scroll to deployment panel | |
| deploymentPanel.scrollIntoView({ behavior: 'smooth' }); | |
| // Reset progress | |
| progressBar.style.width = '0%'; | |
| progressPercent.textContent = '0%'; | |
| deployLog.innerHTML = '<div class="log-info">Initialisation du déploiement automatique...</div>'; | |
| // Get configuration values | |
| const fullDomain = domainName.value + domainExtension.value; | |
| const sslConfig = sslType.options[sslType.selectedIndex].text; | |
| const serverConfig = serverProvider.options[serverProvider.selectedIndex].text; | |
| // Deployment steps simulation | |
| const steps = [ | |
| // DNS Configuration | |
| { progress: 10, log: 'Vérification de la disponibilité du domaine...', type: 'dns', step: 'domain' }, | |
| { progress: 15, log: 'Enregistrement du domaine ' + fullDomain + '...', type: 'dns', step: 'domain' }, | |
| { progress: 20, log: 'Configuration des serveurs DNS...', type: 'dns', step: 'domain' }, | |
| { progress: 25, log: 'Propagation des enregistrements DNS...', type: 'dns', step: 'domain' }, | |
| // SSL Configuration | |
| { progress: 30, log: 'Génération des clés de chiffrement...', type: 'ssl', step: 'ssl' }, | |
| { progress: 35, log: 'Validation de la propriété du domaine...', type: 'ssl', step: 'ssl' }, | |
| { progress: 40, log: 'Émission du certificat ' + sslConfig + '...', type: 'ssl', step: 'ssl' }, | |
| { progress: 45, log: 'Installation du certificat SSL...', type: 'ssl', step: 'ssl' }, | |
| { progress: 50, log: 'Configuration du renouvellement automatique...', type: 'ssl', step: 'ssl' }, | |
| // Server Configuration | |
| { progress: 55, log: 'Provisionnement du serveur ' + serverConfig + '...', type: 'server', step: 'server' }, | |
| { progress: 60, log: 'Installation de l\'environnement d\'exécution...', type: 'server', step: 'server' }, | |
| { progress: 65, log: 'Configuration du pare-feu et de la sécurité...', type: 'server', step: 'server' }, | |
| { progress: 70, log: 'Optimisation des performances...', type: 'server', step: 'server' }, | |
| { progress: 75, log: 'Configuration des sauvegardes automatiques...', type: 'server', step: 'server' }, | |
| // Deployment | |
| { progress: 80, log: 'Transfert des fichiers du projet...', type: 'info', step: 'deploy' }, | |
| { progress: 85, log: 'Installation des dépendances...', type: 'info', step: 'deploy' }, | |
| { progress: 90, log: 'Construction de l\'application...', type: 'info', step: 'deploy' }, | |
| { progress: 95, log: 'Finalisation du déploiement...', type: 'info', step: 'deploy' }, | |
| { progress: 100, log: 'Déploiement terminé avec succès!', type: 'success', step: 'deploy' } | |
| ]; | |
| let currentStep = 0; | |
| const deploymentInterval = setInterval(() => { | |
| if (currentStep < steps.length) { | |
| const step = steps[currentStep]; | |
| // Update progress | |
| progressBar.style.width = step.progress + '%'; | |
| progressPercent.textContent = step.progress + '%'; | |
| // Update current step | |
| currentDeployStep.textContent = step.step === 'domain' ? 'DNS' | |
| : step.step === 'ssl' ? 'SSL' | |
| : step.step === 'server' ? 'Serveur' | |
| : 'Déploiement'; | |
| // Highlight active step | |
| document.querySelectorAll('[id^="step-"]').forEach(el => { | |
| el.classList.remove('border-purple-500', 'bg-purple-50'); | |
| el.querySelector('i').classList.remove('text-purple-600'); | |
| el.querySelector('p').classList.remove('text-purple-800'); | |
| }); | |
| const activeStep = document.getElementById('step-' + step.step); | |
| activeStep.classList.add('border-purple-500', 'bg-purple-50'); | |
| activeStep.querySelector('i').classList.add('text-purple-600'); | |
| activeStep.querySelector('p').classList.add('text-purple-800'); | |
| // Add log entry | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-' + step.type; | |
| logEntry.textContent = step.log; | |
| deployLog.appendChild(logEntry); | |
| deployLog.scrollTop = deployLog.scrollHeight; | |
| currentStep++; | |
| } else { | |
| clearInterval(deploymentInterval); | |
| // Show success results after a delay | |
| setTimeout(() => { | |
| deploymentPanel.classList.add('hidden'); | |
| deploymentResults.classList.remove('hidden'); | |
| // Set final configuration | |
| finalDomain.textContent = fullDomain; | |
| finalSsl.textContent = sslConfig + ' - Valide jusqu\'au ' + getFutureDate(3); | |
| finalServer.textContent = serverConfig; | |
| // Set visit site button | |
| visitSiteBtn.href = 'https://' + fullDomain; | |
| // Scroll to results | |
| deploymentResults.scrollIntoView({ behavior: 'smooth' }); | |
| }, 1000); | |
| } | |
| }, 800); | |
| // Cancel deployment button | |
| document.getElementById('cancel-deploy-btn').addEventListener('click', function() { | |
| clearInterval(deploymentInterval); | |
| deploymentPanel.classList.add('hidden'); | |
| startDeploymentBtn.disabled = false; | |
| // Add cancellation log | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = 'log-warning'; | |
| logEntry.textContent = 'Déploiement annulé par l\'utilisateur'; | |
| deployLog.appendChild(logEntry); | |
| deployLog.scrollTop = deployLog.scrollHeight; | |
| }, { once: true }); | |
| // Copy logs button | |
| document.getElementById('copy-logs-btn').addEventListener('click', function() { | |
| const logsText = Array.from(deployLog.children) | |
| .map(el => el.textContent) | |
| .join('\n'); | |
| navigator.clipboard.writeText(logsText).then(() => { | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i class="fas fa-check mr-1"></i> Copié!'; | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| }); | |
| }); | |
| // Helper function to get future date | |
| function getFutureDate(months) { | |
| const date = new Date(); | |
| date.setMonth(date.getMonth() + months); | |
| return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }); | |
| } | |
| </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/pogen-autodeploy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |