Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AutoDNS Fix - Résolution Automatique DNS</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> | |
| .progress-container { | |
| position: relative; | |
| height: 8px; | |
| background-color: #e5e7eb; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| position: absolute; | |
| height: 100%; | |
| background-color: #10b981; | |
| transition: width 0.3s ease; | |
| } | |
| .terminal-line { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(5px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .dns-record { | |
| transition: all 0.2s ease; | |
| } | |
| .dns-record:hover { | |
| background-color: #f8fafc; | |
| transform: translateX(2px); | |
| } | |
| .error-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| 100% { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-network-wired text-indigo-600 text-2xl mr-3"></i> | |
| <h1 class="text-xl font-bold text-gray-900">AutoDNS Fix</h1> | |
| </div> | |
| <nav class="flex space-x-8"> | |
| <a href="#" class="text-indigo-600 font-medium">Diagnostic</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700">Solutions</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700">Documentation</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <!-- Error Header --> | |
| <div class="px-6 py-5 border-b border-gray-200 flex items-center justify-between bg-red-50"> | |
| <div> | |
| <h2 class="text-lg font-medium text-gray-900 flex items-center"> | |
| <span class="error-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 mr-3"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> ERREUR | |
| </span> | |
| DNS_PROBE_FINISHED_NXDOMAIN | |
| </h2> | |
| <p class="mt-1 text-sm text-gray-500">Le domaine n'existe pas ou n'est pas configuré correctement dans le système DNS</p> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800"> | |
| <i class="fas fa-circle text-yellow-500 mr-2" style="font-size: 8px;"></i> | |
| Correction requise | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Automatic Fix Section --> | |
| <div class="px-6 py-5 border-b border-gray-200"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-magic text-indigo-600 text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Correction Automatique</h3> | |
| <p class="mt-1 text-sm text-gray-500">Notre système va tenter de résoudre automatiquement le problème DNS</p> | |
| <div class="mt-4"> | |
| <div class="progress-container w-full"> | |
| <div id="fix-progress" class="progress-bar" style="width: 0%"></div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-sm text-gray-500"> | |
| <span>0% complété</span> | |
| <span id="progress-status">Préparation...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Configuration Content --> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- DNS Diagnostic --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">Diagnostic DNS</h3> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="domain-name" class="block text-sm font-medium text-gray-700">Domaine affecté</label> | |
| <div class="mt-1 flex rounded-md shadow-sm"> | |
| <input type="text" id="domain-name" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-md border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="exemple.com" value="votresite.com"> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-3">Problèmes détectés</h4> | |
| <div class="space-y-3"> | |
| <div class="dns-record flex items-start p-3 border border-red-200 bg-red-50 rounded-md"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-times-circle text-red-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-red-800">Enregistrement A manquant</p> | |
| <p class="text-xs text-red-600">Le domaine ne pointe vers aucune adresse IP</p> | |
| </div> | |
| </div> | |
| <div class="dns-record flex items-start p-3 border border-yellow-200 bg-yellow-50 rounded-md"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-yellow-800">Propagation DNS incomplète</p> | |
| <p class="text-xs text-yellow-600">Les changements DNS peuvent prendre jusqu'à 48h</p> | |
| </div> | |
| </div> | |
| <div class="dns-record flex items-start p-3 border border-blue-200 bg-blue-50 rounded-md"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-blue-800">Serveurs DNS par défaut</p> | |
| <p class="text-xs text-blue-600">Utilisation de serveurs DNS publics (8.8.8.8, 1.1.1.1)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DNS Configuration --> | |
| <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">Configuration DNS Automatique</h3> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="auto-fix" name="auto-fix" type="checkbox" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="auto-fix" class="font-medium text-gray-700">Activer la correction automatique</label> | |
| <p class="text-gray-500">Le système configurera automatiquement les enregistrements DNS nécessaires</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700">Options avancées</label> | |
| <div class="mt-2 space-y-4"> | |
| <div class="flex items-center"> | |
| <input id="force-ttl" name="force-ttl" type="checkbox" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> | |
| <label for="force-ttl" class="ml-2 block text-sm text-gray-700">Forcer un TTL bas (300s)</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="dnssec" name="dnssec" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> | |
| <label for="dnssec" class="ml-2 block text-sm text-gray-700">Activer DNSSEC</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="cdn" name="cdn" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> | |
| <label for="cdn" class="ml-2 block text-sm text-gray-700">Activer le CDN global</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fix Actions --> | |
| <div class="space-y-6"> | |
| <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">Actions de Correction</h3> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="dns-provider" class="block text-sm font-medium text-gray-700">Fournisseur DNS</label> | |
| <select id="dns-provider" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> | |
| <option>Cloudflare (recommandé)</option> | |
| <option>Google DNS</option> | |
| <option>OpenDNS</option> | |
| <option>Autre</option> | |
| </select> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-3">Enregistrements à créer</h4> | |
| <div class="space-y-2"> | |
| <div class="dns-record flex items-center justify-between p-3 border border-gray-200 rounded-md"> | |
| <div> | |
| <span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">A</span> | |
| <span class="ml-2 text-sm">@</span> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">192.0.2.1</span> | |
| </div> | |
| </div> | |
| <div class="dns-record flex items-center justify-between p-3 border border-gray-200 rounded-md"> | |
| <div> | |
| <span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">AAAA</span> | |
| <span class="ml-2 text-sm">@</span> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">2001:db8::1</span> | |
| </div> | |
| </div> | |
| <div class="dns-record flex items-center justify-between p-3 border border-gray-200 rounded-md"> | |
| <div> | |
| <span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">CNAME</span> | |
| <span class="ml-2 text-sm">www</span> | |
| </div> | |
| <div class="text-right"> | |
| <span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">votresite.com</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fix Button --> | |
| <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <button id="start-fix" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-bolt mr-2"></i> Lancer la correction automatique | |
| </button> | |
| <p class="mt-2 text-xs text-gray-500">Cette opération peut prendre quelques minutes</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fix Terminal (hidden by default) --> | |
| <div id="fix-terminal" class="hidden mt-8 bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-4 py-5 border-b border-gray-200 sm:px-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Journal de Correction DNS</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div id="terminal" class="h-96 rounded-lg overflow-y-auto p-4 bg-gray-900 text-gray-100 font-mono text-sm"> | |
| <div class="terminal-line text-green-400">$ Initialisation de la correction DNS...</div> | |
| <!-- Terminal lines will be added here by JavaScript --> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button id="cancel-fix" class="mr-2 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Annuler | |
| </button> | |
| <button id="verify-fix" class="hidden inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| <i class="fas fa-check-circle mr-2"></i> Vérifier la correction | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Start DNS fix process | |
| document.getElementById('start-fix').addEventListener('click', function() { | |
| // Show terminal | |
| document.getElementById('fix-terminal').classList.remove('hidden'); | |
| const terminal = document.getElementById('terminal'); | |
| // Disable button | |
| this.disabled = true; | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Correction en cours...'; | |
| // Get domain name | |
| const domain = document.getElementById('domain-name').value || 'votresite.com'; | |
| // Update progress bar | |
| const progressBar = document.getElementById('fix-progress'); | |
| const progressStatus = document.getElementById('progress-status'); | |
| // Simulate DNS fix process | |
| const steps = [ | |
| {text: "Connexion à l'API DNS...", progress: 5, status: "Connexion aux serveurs DNS"}, | |
| {text: "Vérification de la zone DNS pour " + domain + "...", progress: 10, status: "Analyse de la zone DNS"}, | |
| {text: "Détection des serveurs de noms...", progress: 15, status: "Recherche des NS records"}, | |
| {text: "Configuration des serveurs de noms avec Cloudflare...", progress: 25, status: "Mise à jour des NS records"}, | |
| {text: "✓ Serveurs de noms configurés", color: "text-green-400", progress: 30, status: "Serveurs de noms mis à jour"}, | |
| {text: "Création de l'enregistrement A pour @" + domain + "...", progress: 40, status: "Création du record A"}, | |
| {text: "Définition de l'adresse IP (192.0.2.1)...", progress: 50, status: "Configuration de l'IP"}, | |
| {text: "✓ Enregistrement A créé avec succès", color: "text-green-400", progress: 60, status: "Record A configuré"}, | |
| {text: "Création de l'enregistrement CNAME pour www." + domain + "...", progress: 70, status: "Création du CNAME"}, | |
| {text: "✓ Enregistrement CNAME créé avec succès", color: "text-green-400", progress: 80, status: "Record CNAME configuré"}, | |
| {text: "Forçage du TTL à 300 secondes...", progress: 85, status: "Réglage du TTL"}, | |
| {text: "Propagation des changements DNS...", progress: 90, status: "Propagation en cours"}, | |
| {text: "Vérification de la résolution DNS...", progress: 95, status: "Test de résolution"}, | |
| {text: "✓ Résolution DNS fonctionnelle pour " + domain, color: "text-green-400", progress: 100, status: "Résolution confirmée"}, | |
| {text: "La correction DNS est terminée avec succès!", color: "text-green-400", progress: 100, status: "Terminé"} | |
| ]; | |
| let totalDelay = 0; | |
| steps.forEach(step => { | |
| totalDelay += 500; | |
| setTimeout(() => { | |
| const line = document.createElement('div'); | |
| line.className = `terminal-line mb-1 ${step.color || 'text-gray-300'}`; | |
| line.textContent = step.text; | |
| terminal.appendChild(line); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| // Update progress | |
| progressBar.style.width = `${step.progress}%`; | |
| progressStatus.textContent = step.status; | |
| // Show verify button when done | |
| if (step.text.includes("terminée avec succès")) { | |
| document.getElementById('verify-fix').classList.remove('hidden'); | |
| document.getElementById('start-fix').innerHTML = '<i class="fas fa-check mr-2"></i> Correction terminée'; | |
| // Update status badge | |
| const statusBadge = document.querySelector('.bg-yellow-100'); | |
| statusBadge.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800'; | |
| statusBadge.innerHTML = '<i class="fas fa-circle text-green-500 mr-2" style="font-size: 8px;"></i> Résolu'; | |
| // Update error header | |
| document.querySelector('.bg-red-50').className = 'px-6 py-5 border-b border-gray-200 flex items-center justify-between bg-green-50'; | |
| } | |
| }, totalDelay); | |
| }); | |
| }); | |
| // Verify fix button | |
| document.getElementById('verify-fix').addEventListener('click', function() { | |
| const terminal = document.getElementById('terminal'); | |
| const domain = document.getElementById('domain-name').value || 'votresite.com'; | |
| const steps = [ | |
| {text: "$ ping " + domain, delay: 0}, | |
| {text: "PING " + domain + " (192.0.2.1): 56 data bytes", delay: 500, color: "text-gray-300"}, | |
| {text: "64 bytes from 192.0.2.1: icmp_seq=0 ttl=54 time=23.183 ms", delay: 1000, color: "text-gray-300"}, | |
| {text: "✓ La résolution DNS fonctionne correctement", delay: 1500, color: "text-green-400"}, | |
| {text: "$ nslookup " + domain, delay: 2000}, | |
| {text: "Server: 8.8.8.8", delay: 2500, color: "text-gray-300"}, | |
| {text: "Address: 8.8.8.8#53", delay: 3000, color: "text-gray-300"}, | |
| {text: "", delay: 3500, color: "text-gray-300"}, | |
| {text: "Non-authoritative answer:", delay: 4000, color: "text-gray-300"}, | |
| {text: "Name: " + domain, delay: 4500, color: "text-gray-300"}, | |
| {text: "Address: 192.0.2.1", delay: 5000, color: "text-gray-300"}, | |
| {text: "✓ Tous les tests DNS sont réussis", delay: 5500, color: "text-green-400"} | |
| ]; | |
| let totalDelay = 0; | |
| steps.forEach(step => { | |
| totalDelay += step.delay; | |
| setTimeout(() => { | |
| const line = document.createElement('div'); | |
| line.className = `terminal-line mb-1 ${step.color || 'text-gray-300'}`; | |
| line.textContent = step.text; | |
| terminal.appendChild(line); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| }, totalDelay); | |
| }); | |
| }); | |
| // Cancel fix | |
| document.getElementById('cancel-fix').addEventListener('click', function() { | |
| if (confirm('Voulez-vous vraiment annuler la correction DNS ?')) { | |
| location.reload(); | |
| } | |
| }); | |
| </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/correction-automatique" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |