Hugging Face's logo

Spaces:
docto41
/
ultra-dns
Running

App Files Community
ultra-dns / index.html
docto41's picture
docto41
Add 3 files
586a06a verified
raw
history blame contribute delete
56.5 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UltraDNS Pro - Gestion Automatisée de Domaines & 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>
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.glow-text { text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); }
.dashboard-card { transition: all 0.3s ease; }
.dashboard-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); }
.status-indicator { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.progress-bar { transition: width 0.5s ease-in-out; }
.robot-arm { position: relative; }
.robot-arm::before { content: "🤖"; position: absolute; font-size: 24px; animation: moveArm 2s infinite alternate; }
@keyframes moveArm {
0% { transform: rotate(0deg); left: 0; }
100% { transform: rotate(20deg); left: 20px; }
}
.domain-option:hover {
transform: scale(1.02);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.tld-badge {
transition: all 0.2s ease;
}
.tld-badge:hover {
transform: translateY(-2px);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<div class="min-h-screen">
<!-- Header -->
<header class="bg-gray-800 border-b border-gray-700">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-robot text-blue-400 text-2xl"></i>
<h1 class="text-xl font-bold glow-text">UltraDNS<span class="text-blue-400">Pro</span></h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<i class="fas fa-globe text-blue-400"></i>
<span class="absolute -top-2 -right-2 bg-red-500 text-xs rounded-full h-5 w-5 flex items-center justify-center">12</span>
</div>
<div class="relative">
<i class="fas fa-bell text-blue-400"></i>
<span class="absolute -top-2 -right-2 bg-red-500 text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
</div>
<div class="flex items-center space-x-2">
<div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center">AD</div>
<span>Admin</span>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container mx-auto px-4 py-6 flex">
<!-- Sidebar -->
<aside class="w-64 bg-gray-800 rounded-lg mr-6 p-4 hidden md:block">
<nav>
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center space-x-2 p-2 rounded bg-gray-700 text-blue-400">
<i class="fas fa-tachometer-alt"></i>
<span>Tableau de bord</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
<i class="fas fa-globe"></i>
<span>Domaines</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
<i class="fas fa-lock"></i>
<span>Certificats SSL</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
<i class="fas fa-network-wired"></i>
<span>Gestion DNS</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
<i class="fas fa-chart-line"></i>
<span>Analytiques SEO</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
<i class="fas fa-cogs"></i>
<span>Paramètres</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
<i class="fas fa-server"></i>
<span>Serveurs</span>
</a>
</li>
</ul>
</nav>
<div class="mt-8 p-4 bg-gray-700 rounded-lg">
<h3 class="text-sm font-semibold text-blue-400 mb-2">STATUT DU SYSTÈME</h3>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span>Moteur d'automatisation</span>
<span class="status-indicator bg-green-500"></span>
</div>
<div class="flex justify-between items-center">
<span>Propagation DNS</span>
<span class="status-indicator bg-green-500"></span>
</div>
<div class="flex justify-between items-center">
<span>Crawlers SEO</span>
<span class="status-indicator bg-green-500"></span>
</div>
<div class="flex justify-between items-center">
<span>Synchronisation</span>
<span class="status-indicator bg-green-500"></span>
</div>
</div>
</div>
</aside>
<!-- Main Dashboard -->
<main class="flex-1">
<!-- Stats Overview -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="dashboard-card bg-gray-800 rounded-lg p-6 border-l-4 border-blue-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-400 text-sm">Domaines gérés</p>
<h3 class="text-2xl font-bold">1,248</h3>
</div>
<i class="fas fa-globe text-blue-400 text-xl"></i>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Actifs</span>
<span>1,210</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 97%"></div>
</div>
</div>
</div>
<div class="dashboard-card bg-gray-800 rounded-lg p-6 border-l-4 border-green-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-400 text-sm">Certificats SSL</p>
<h3 class="text-2xl font-bold">1,156</h3>
</div>
<i class="fas fa-lock text-green-400 text-xl"></i>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Valides</span>
<span>1,156</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
</div>
</div>
</div>
<div class="dashboard-card bg-gray-800 rounded-lg p-6 border-l-4 border-purple-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-400 text-sm">Propagation DNS</p>
<h3 class="text-2xl font-bold">0.12s</h3>
</div>
<i class="fas fa-bolt text-purple-400 text-xl"></i>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Couverture</span>
<span>100%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 100%"></div>
</div>
</div>
</div>
<div class="dashboard-card bg-gray-800 rounded-lg p-6 border-l-4 border-yellow-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-400 text-sm">Classement SEO</p>
<h3 class="text-2xl font-bold">98.7%</h3>
</div>
<i class="fas fa-trophy text-yellow-400 text-xl"></i>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Top 10</span>
<span>89.2%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 98.7%"></div>
</div>
</div>
</div>
</div>
<!-- Générateur de Noms de Domaine -->
<div class="bg-gray-800 rounded-lg p-6 mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">Générateur de Noms de Domaine</h2>
<div class="flex items-center space-x-2 text-blue-400">
<i class="fas fa-magic"></i>
<span class="text-sm">IA Créative</span>
</div>
</div>
<div class="mb-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-gray-400 text-sm mb-2">Mots-clés</label>
<input type="text" id="keywords" placeholder="Ex: tech,web,cloud" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-400 text-sm mb-2">Secteur</label>
<select id="industry" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Tous</option>
<option value="tech">Technologie</option>
<option value="commerce">E-commerce</option>
<option value="sante">Santé</option>
<option value="finance">Finance</option>
<option value="education">Éducation</option>
</select>
</div>
<div>
<label class="block text-gray-400 text-sm mb-2">Extensions</label>
<div class="flex flex-wrap gap-2">
<span class="tld-badge bg-blue-600 text-white px-3 py-1 rounded-full text-xs cursor-pointer" data-tld=".com">.com</span>
<span class="tld-badge bg-gray-600 text-white px-3 py-1 rounded-full text-xs cursor-pointer" data-tld=".net">.net</span>
<span class="tld-badge bg-gray-600 text-white px-3 py-1 rounded-full text-xs cursor-pointer" data-tld=".io">.io</span>
<span class="tld-badge bg-gray-600 text-white px-3 py-1 rounded-full text-xs cursor-pointer" data-tld=".ai">.ai</span>
<span class="tld-badge bg-gray-600 text-white px-3 py-1 rounded-full text-xs cursor-pointer" data-tld=".app">.app</span>
</div>
</div>
</div>
<div class="mt-4 flex justify-center">
<button id="generateBtn" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-2 px-6 rounded-lg flex items-center space-x-2 transition-all shadow-lg">
<i class="fas fa-bolt"></i>
<span>Générer des Noms</span>
</button>
</div>
</div>
<div id="domainResults" class="hidden">
<h3 class="text-lg font-semibold mb-4 text-blue-400">Suggestions de Domaines</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="domainSuggestions">
<!-- Les suggestions de domaines seront ajoutées ici -->
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-gray-800 rounded-lg p-6 mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">Actions Rapides</h2>
<div class="flex items-center space-x-2 text-blue-400">
<i class="fas fa-robot"></i>
<span class="text-sm">Système IA Actif</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition-all">
<i class="fas fa-plus"></i>
<span>Nouveau Domaine</span>
</button>
<button class="bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition-all">
<i class="fas fa-lock"></i>
<span>Certificat SSL</span>
</button>
<button class="bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition-all">
<i class="fas fa-rocket"></i>
<span>Boost SEO</span>
</button>
</div>
</div>
<!-- Domain Registration Panel -->
<div class="bg-gray-800 rounded-lg p-6 mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">Enregistrement Instantané de Domaine</h2>
<div class="flex items-center space-x-1 text-green-400">
<span class="status-indicator bg-green-500"></span>
<span class="text-sm">DNS Global Prêt</span>
</div>
</div>
<div class="mb-6">
<div class="relative">
<input type="text" placeholder="Entrez un nom de domaine (exemple.com)" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-3 px-4 pr-32 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-all">
Vérifier Disponibilité
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Domain Information -->
<div class="bg-gray-700 rounded-lg p-4">
<h3 class="font-semibold text-blue-400 mb-3 flex items-center">
<i class="fas fa-info-circle mr-2"></i> Informations Domaine
</h3>
<div class="space-y-3">
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Domaine:</span>
<span class="font-mono">exemple.com</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Statut:</span>
<span class="text-green-400">Disponible</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">TLD:</span>
<span>.com</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Prix:</span>
<span class="text-yellow-400">$9.99/an</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Renouvellement Auto:</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
</div>
</div>
<!-- Registrar Information -->
<div class="bg-gray-700 rounded-lg p-4">
<h3 class="font-semibold text-blue-400 mb-3 flex items-center">
<i class="fas fa-building mr-2"></i> Informations Enregistreur
</h3>
<div class="space-y-3">
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Enregistreur:</span>
<span>UltraDNS Pro</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">ID IANA:</span>
<span class="font-mono">12345</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Serveur WHOIS:</span>
<span class="font-mono">whois.ultradnspro.com</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">DNSSEC:</span>
<span class="text-green-400">Activé</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Protection Vie Privée:</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
</div>
</div>
</div>
<div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Registrant Contact -->
<div class="bg-gray-700 rounded-lg p-4">
<h3 class="font-semibold text-blue-400 mb-3 flex items-center">
<i class="fas fa-user mr-2"></i> Contact Enregistrant
</h3>
<div class="space-y-3">
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Nom:</span>
<span>Jean Dupont</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Organisation:</span>
<span>Tech Corp Inc.</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Email:</span>
<span class="font-mono">jean@techcorp.com</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Téléphone:</span>
<span>+33.612345678</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Pays:</span>
<span>France</span>
</div>
</div>
</div>
<!-- DNS Configuration -->
<div class="bg-gray-700 rounded-lg p-4">
<h3 class="font-semibold text-blue-400 mb-3 flex items-center">
<i class="fas fa-network-wired mr-2"></i> Configuration DNS
</h3>
<div class="space-y-3">
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Serveur DNS 1:</span>
<span class="font-mono">ns1.ultradnspro.com</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Serveur DNS 2:</span>
<span class="font-mono">ns2.ultradnspro.com</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Serveur DNS 3:</span>
<span class="font-mono">ns3.ultradnspro.com</span>
</div>
<div class="flex justify-between border-b border-gray-600 pb-2">
<span class="text-gray-400">Serveur DNS 4:</span>
<span class="font-mono">ns4.ultradnspro.com</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Propagation Globale:</span>
<span class="text-green-400">Instantanée</span>
</div>
</div>
</div>
</div>
<div class="mt-6">
<div class="bg-gray-700 rounded-lg p-4">
<h3 class="font-semibold text-blue-400 mb-3 flex items-center">
<i class="fas fa-rocket mr-2"></i> Intégration SEO Premium
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="flex items-center space-x-3 p-3 bg-gray-800 rounded-lg">
<div class="bg-blue-600 p-2 rounded-full">
<i class="fas fa-google text-white"></i>
</div>
<div>
<p class="text-sm text-gray-400">Google Search</p>
<p class="font-semibold">Console Prête</p>
</div>
</div>
<div class="flex items-center space-x-3 p-3 bg-gray-800 rounded-lg">
<div class="bg-blue-500 p-2 rounded-full">
<i class="fas fa-chart-bar text-white"></i>
</div>
<div>
<p class="text-sm text-gray-400">Google</p>
<p class="font-semibold">Analytics Prêt</p>
</div>
</div>
<div class="flex items-center space-x-3 p-3 bg-gray-800 rounded-lg">
<div class="bg-purple-600 p-2 rounded-full">
<i class="fas fa-robot text-white"></i>
</div>
<div>
<p class="text-sm text-gray-400">Optimisation IA</p>
<p class="font-semibold">SEO</p>
</div>
</div>
</div>
<div class="mt-4">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-400">Niveau d'Optimisation SEO</span>
<span class="text-sm font-semibold text-green-400">98%</span>
</div>
<div class="w-full bg-gray-600 rounded-full h-2.5">
<div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2.5 rounded-full" style="width: 98%"></div>
</div>
</div>
</div>
</div>
<div class="mt-6 flex justify-end">
<button class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-8 rounded-lg flex items-center space-x-2 transition-all shadow-lg">
<i class="fas fa-bolt"></i>
<span>Enregistrement & Déploiement Instantané</span>
</button>
</div>
</div>
<!-- Global Propagation Status -->
<div class="bg-gray-800 rounded-lg p-6 mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">Statut de Propagation DNS Global</h2>
<div class="flex items-center space-x-1 text-green-400">
<i class="fas fa-sync-alt animate-spin"></i>
<span class="text-sm">Monitoring en Temps Réel</span>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left text-gray-400">
<thead class="text-xs text-gray-300 uppercase bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3">Localisation</th>
<th scope="col" class="px-6 py-3">Serveur</th>
<th scope="col" class="px-6 py-3">Statut</th>
<th scope="col" class="px-6 py-3">Temps Réponse</th>
<th scope="col" class="px-6 py-3">Propagation</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700 bg-gray-800">
<td class="px-6 py-4 flex items-center">
<i class="fas fa-flag-usa mr-2 text-blue-400"></i>
Amérique du Nord
</td>
<td class="px-6 py-4 font-mono">ns1.nyc.ultradns.com</td>
<td class="px-6 py-4">
<span class="flex items-center">
<span class="status-indicator bg-green-500 mr-2"></span>
Actif
</span>
</td>
<td class="px-6 py-4">0.08s</td>
<td class="px-6 py-4 text-green-400">Complète</td>
</tr>
<tr class="border-b border-gray-700 bg-gray-800">
<td class="px-6 py-4 flex items-center">
<i class="fas fa-flag-eu mr-2 text-blue-400"></i>
Europe
</td>
<td class="px-6 py-4 font-mono">ns1.lon.ultradns.com</td>
<td class="px-6 py-4">
<span class="flex items-center">
<span class="status-indicator bg-green-500 mr-2"></span>
Actif
</span>
</td>
<td class="px-6 py-4">0.11s</td>
<td class="px-6 py-4 text-green-400">Complète</td>
</tr>
<tr class="border-b border-gray-700 bg-gray-800">
<td class="px-6 py-4 flex items-center">
<i class="fas fa-flag-asia mr-2 text-blue-400"></i>
Asie
</td>
<td class="px-6 py-4 font-mono">ns1.tok.ultradns.com</td>
<td class="px-6 py-4">
<span class="flex items-center">
<span class="status-indicator bg-green-500 mr-2"></span>
Actif
</span>
</td>
<td class="px-6 py-4">0.15s</td>
<td class="px-6 py-4 text-green-400">Complète</td>
</tr>
<tr class="border-b border-gray-700 bg-gray-800">
<td class="px-6 py-4 flex items-center">
<i class="fas fa-flag-au mr-2 text-blue-400"></i>
Australie
</td>
<td class="px-6 py-4 font-mono">ns1.syd.ultradns.com</td>
<td class="px-6 py-4">
<span class="flex items-center">
<span class="status-indicator bg-green-500 mr-2"></span>
Actif
</span>
</td>
<td class="px-6 py-4">0.18s</td>
<td class="px-6 py-4 text-green-400">Complète</td>
</tr>
<tr class="bg-gray-800">
<td class="px-6 py-4 flex items-center">
<i class="fas fa-flag-sa mr-2 text-blue-400"></i>
Amérique du Sud
</td>
<td class="px-6 py-4 font-mono">ns1.sao.ultradns.com</td>
<td class="px-6 py-4">
<span class="flex items-center">
<span class="status-indicator bg-green-500 mr-2"></span>
Actif
</span>
</td>
<td class="px-6 py-4">0.21s</td>
<td class="px-6 py-4 text-green-400">Complète</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Automated SEO Process -->
<div class="bg-gray-800 rounded-lg p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">Processus SEO Automatisé</h2>
<div class="flex items-center space-x-2 text-purple-400">
<i class="fas fa-magic"></i>
<span class="text-sm">Optimisation IA</span>
</div>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center text-white mr-4">
<i class="fas fa-search"></i>
</div>
<div class="flex-1 pt-1">
<h4 class="text-lg font-medium">Recherche de Mots-clés</h4>
<p class="text-gray-400">Analyse de mots-clés par IA pour une visibilité maximale</p>
<div class="mt-2">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Optimisation</span>
<span>97%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 97%"></div>
</div>
</div>
</div>
<div class="ml-4 flex items-center">
<span class="text-green-400 text-sm">Terminé</span>
<i class="fas fa-check-circle ml-2 text-green-400"></i>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-4">
<i class="fas fa-file-alt"></i>
</div>
<div class="flex-1 pt-1">
<h4 class="text-lg font-medium">Optimisation de Contenu</h4>
<p class="text-gray-400">Structuration automatique pour les meilleures pratiques SEO</p>
<div class="mt-2">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Optimisation</span>
<span>95%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 95%"></div>
</div>
</div>
</div>
<div class="ml-4 flex items-center">
<span class="text-green-400 text-sm">Terminé</span>
<i class="fas fa-check-circle ml-2 text-green-400"></i>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-600 flex items-center justify-center text-white mr-4">
<i class="fas fa-link"></i>
</div>
<div class="flex-1 pt-1">
<h4 class="text-lg font-medium">Stratégie de Backlinks</h4>
<p class="text-gray-400">Acquisition automatique de backlinks haute autorité</p>
<div class="mt-2">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Optimisation</span>
<span>92%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
</div>
</div>
</div>
<div class="ml-4 flex items-center">
<span class="text-green-400 text-sm">Terminé</span>
<i class="fas fa-check-circle ml-2 text-green-400"></i>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center text-white mr-4">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="flex-1 pt-1">
<h4 class="text-lg font-medium">Optimisation Mobile</h4>
<p class="text-gray-400">Scoring automatique de réactivité mobile</p>
<div class="mt-2">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Optimisation</span>
<span>99%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 99%"></div>
</div>
</div>
</div>
<div class="ml-4 flex items-center">
<span class="text-green-400 text-sm">Terminé</span>
<i class="fas fa-check-circle ml-2 text-green-400"></i>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-500 flex items-center justify-center text-white mr-4">
<i class="fas fa-tachometer-alt"></i>
</div>
<div class="flex-1 pt-1">
<h4 class="text-lg font-medium">Boost de Performance</h4>
<p class="text-gray-400">Optimisation automatique de vitesse de page</p>
<div class="mt-2">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Optimisation</span>
<span>98%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 98%"></div>
</div>
</div>
</div>
<div class="ml-4 flex items-center">
<span class="text-green-400 text-sm">Terminé</span>
<i class="fas fa-check-circle ml-2 text-green-400"></i>
</div>
</div>
</div>
<div class="mt-6 bg-gray-700 rounded-lg p-4">
<div class="flex items-center justify-between">
<div>
<h4 class="font-semibold text-lg">Score SEO Total</h4>
<p class="text-gray-400">Votre domaine est optimisé selon les standards les plus élevés</p>
</div>
<div class="text-4xl font-bold text-green-400">98.2</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Performance SEO</span>
<span>Top 1% des sites web</span>
</div>
<div class="w-full bg-gray-600 rounded-full h-3">
<div class="bg-gradient-to-r from-green-400 to-blue-500 h-3 rounded-full" style="width: 98.2%"></div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
// Générateur de noms de domaine
const domainGenerator = {
prefixes: ['tech', 'web', 'cloud', 'net', 'smart', 'global', 'digital', 'meta', 'hyper', 'quantum'],
suffixes: ['hub', 'ly', 'fy', 'io', 'ify', 'zen', 'nova', 'vibe', 'sync', 'core'],
words: {
tech: ['code', 'data', 'byte', 'bit', 'app', 'dev', 'ai', 'api', 'bot', 'grid'],
commerce: ['shop', 'buy', 'cart', 'deal', 'store', 'market', 'sale', 'pay', 'trade', 'vendor'],
sante: ['med', 'care', 'life', 'well', 'clinic', 'doc', 'pharma', 'health', 'vital', 'cure'],
finance: ['bank', 'cash', 'coin', 'trade', 'invest', 'capital', 'wealth', 'fund', 'asset', 'money'],
education: ['learn', 'skill', 'study', 'academy', 'course', 'class', 'edu', 'brain', 'wise', 'know']
},
generate: function(keywords, industry, tlds) {
const inputWords = keywords ? keywords.split(',').map(w => w.trim().toLowerCase()) : [];
const industryWords = industry && this.words[industry] ? this.words[industry] : [];
const allWords = [...inputWords, ...industryWords, ...this.prefixes, ...this.suffixes];
if (allWords.length === 0) {
allWords.push(...Object.values(this.words).flat());
}
const generated = [];
const tldList = tlds && tlds.length > 0 ? tlds : ['.com', '.net', '.io'];
// Mélanger les mots
const shuffled = [...allWords].sort(() => 0.5 - Math.random());
// Générer des combinaisons
for (let i = 0; i < 15 && shuffled.length > 1; i++) {
const first = shuffled[i % shuffled.length];
const second = shuffled[(i + 1) % shuffled.length];
for (const tld of tldList) {
// Différentes combinaisons
const combinations = [
`${first}${second}${tld}`,
`${first}-${second}${tld}`,
`${first}${second.slice(0, 3)}${tld}`,
`${first.slice(0, 3)}${second}${tld}`,
`${first}${tld}`,
`${second}${tld}`
];
for (const domain of combinations) {
if (!generated.includes(domain) && domain.length >= 5 && domain.length <= 20) {
generated.push(domain);
if (generated.length >= 12) break;
}
}
if (generated.length >= 12) break;
}
if (generated.length >= 12) break;
}
return generated.slice(0, 12);
}
};
// Gestion des extensions TLD
document.querySelectorAll('.tld-badge').forEach(badge => {
badge.addEventListener('click', function() {
this.classList.toggle('bg-gray-600');
this.classList.toggle('bg-blue-600');
});
});
// Gestion du bouton de génération
document.getElementById('generateBtn').addEventListener('click', function() {
const keywords = document.getElementById('keywords').value;
const industry = document.getElementById('industry').value;
const selectedTlds = Array.from(document.querySelectorAll('.tld-badge.bg-blue-600'))
.map(el => el.dataset.tld);
// Afficher l'animation de chargement
const btn = this;
const originalHtml = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Génération en cours...';
btn.disabled = true;
// Simuler un délai de traitement
setTimeout(() => {
// Générer les noms de domaine
const domains = domainGenerator.generate(keywords, industry, selectedTlds);
// Afficher les résultats
const container = document.getElementById('domainSuggestions');
container.innerHTML = '';
domains.forEach(domain => {
const domainName = domain.split('.')[0];
const tld = '.' + domain.split('.')[1];
const domainEl = document.createElement('div');
domainEl.className = 'domain-option bg-gray-700 rounded-lg p-4 transition-all cursor-pointer hover:border-blue-500 border border-gray-600';
domainEl.innerHTML = `
<div class="flex justify-between items-start mb-2">
<span class="font-bold text-lg">${domainName}<span class="text-blue-400">${tld}</span></span>
<span class="text-green-400 text-sm">Disponible</span>
</div>
<div class="flex justify-between items-center">
<span class="text-yellow-400">$9.99/an</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white text-xs py-1 px-3 rounded transition-all">
Enregistrer
</button>
</div>
`;
container.appendChild(domainEl);
});
// Afficher la section des résultats
document.getElementById('domainResults').classList.remove('hidden');
// Restaurer le bouton
btn.innerHTML = originalHtml;
btn.disabled = false;
// Faire défiler jusqu'aux résultats
document.getElementById('domainResults').scrollIntoView({ behavior: 'smooth' });
}, 1500);
});
// Simulate real-time updates
setInterval(() => {
// Update propagation times randomly to simulate real monitoring
const propagationTimes = document.querySelectorAll('tbody tr td:nth-child(4)');
propagationTimes.forEach(td => {
const current = parseFloat(td.textContent.replace('s', ''));
const variation = (Math.random() * 0.05) - 0.025; // Small random variation
const newTime = Math.max(0.05, Math.min(0.25, current + variation));
td.textContent = newTime.toFixed(2) + 's';
});
// Animate the robot arm
const robotArm = document.querySelector('.robot-arm');
if (robotArm) {
robotArm.style.transform = `rotate(${(Math.random() * 20) - 10}deg)`;
}
// Update some random stats
const randomStats = document.querySelectorAll('.text-2xl.font-bold');
if (randomStats.length > 0) {
const stat = randomStats[Math.floor(Math.random() * randomStats.length)];
const current = parseInt(stat.textContent.replace(/,/g, ''));
const variation = Math.floor(Math.random() * 5) - 2; // Small random variation
const newValue = Math.max(0, current + variation);
stat.textContent = newValue.toLocaleString();
}
}, 2000);
// Simulate registration process
document.querySelector('button.bg-gradient-to-r')?.addEventListener('click', function() {
const button = this;
const originalText = button.innerHTML;
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Traitement en cours...';
button.classList.add('opacity-75');
setTimeout(() => {
button.innerHTML = '<i class="fas fa-check-circle"></i> Enregistrement Terminé!';
button.classList.remove('opacity-75');
// Show success notification
const notification = document.createElement('div');
notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg flex items-center';
notification.innerHTML = `
<i class="fas fa-check-circle mr-2"></i>
<span>Domaine enregistré et déployé globalement en 0.12 secondes!</span>
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
button.innerHTML = originalText;
}, 5000);
}, 1500);
});
</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/ultra-dns" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>