Hugging Face's logo

Spaces:
docto41
/
hyper-dns
Running

App Files Community
hyper-dns / index.html
docto41's picture
docto41
Add 2 files
d7b5f56 verified
raw
history blame contribute delete
50.5 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>HyperDNS Pro - Générateur et Enregistrement de Domaines</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-bar {
 transition: width 2s ease-in-out;
 }
 .glow {
 box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
 }
 @keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.7; }
 }
 .pulse {
 animation: pulse 2s infinite;
 }
 .domain-option:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 .floating {
 animation: floating 3s ease-in-out infinite;
 }
 @keyframes floating {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-5px); }
 }
 </style>
</head>
<body class="bg-gray-50 font-sans">
 <div class="min-h-screen flex flex-col">
 <!-- Header -->
 <header class="bg-gradient-to-r from-gray-900 to-gray-800 text-white shadow-xl">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-3">
 <i class="fas fa-server text-2xl text-emerald-400"></i>
 <h1 class="text-xl font-bold">Hyper<span class="text-emerald-400">DNS</span> Pro</h1>
 </div>
 <div class="flex items-center space-x-4">
 <div class="flex items-center space-x-2 bg-gray-700 px-3 py-1 rounded-full">
 <span class="h-2 w-2 bg-emerald-400 rounded-full pulse"></span>
 <span class="text-xs">CONNECTÉ</span>
 </div>
 <div class="flex items-center space-x-2">
 <div class="h-8 w-8 bg-emerald-500 rounded-full flex items-center justify-center">
 <i class="fas fa-user text-white"></i>
 </div>
 <span class="font-medium">Administrateur</span>
 </div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <div class="flex flex-1">
 <!-- Sidebar -->
 <aside class="w-64 bg-white shadow-lg hidden md:block">
 <div class="p-4">
 <div class="bg-emerald-50 p-3 rounded-lg mb-6 border border-emerald-100">
 <div class="flex items-center space-x-3">
 <div class="h-10 w-10 bg-emerald-100 rounded-full flex items-center justify-center">
 <i class="fas fa-bolt text-emerald-600"></i>
 </div>
 <div>
 <p class="text-xs text-gray-500">Mode Automatique</p>
 <p class="font-bold text-emerald-600">Activé</p>
 </div>
 </div>
 </div>
<nav>
 <ul class="space-y-1">
 <li>
 <a href="#" class="flex items-center space-x-3 p-3 bg-emerald-50 text-emerald-700 rounded-lg font-medium border border-emerald-100">
 <i class="fas fa-tachometer-alt w-5 text-center"></i>
 <span>Tableau de bord</span>
 </a>
 </li>
 <li>
 <a href="#" class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg">
 <i class="fas fa-globe w-5 text-center"></i>
 <span>Gestion de domaines</span>
 </a>
 </li>
 <li>
 <a href="#" class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg">
 <i class="fas fa-lock w-5 text-center"></i>
 <span>Certificats SSL</span>
 </a>
 </li>
 <li>
 <a href="#" class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg">
 <i class="fas fa-network-wired w-5 text-center"></i>
 <span>Configuration DNS</span>
 </a>
 </li>
 <li>
 <a href="#" class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg">
 <i class="fas fa-search-dollar w-5 text-center"></i>
 <span>Référencement SEO</span>
 </a>
 </li>
 <li>
 <a href="#" class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg">
 <i class="fas fa-chart-pie w-5 text-center"></i>
 <span>Analytiques</span>
 </a>
 </li>
 </ul>
 </nav>
 </div>
 </aside>
<!-- Main Panel -->
 <main class="flex-1 p-4">
 <div class="container mx-auto">
 <!-- Stats -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
 <div class="bg-white rounded-lg shadow p-4 border border-gray-100">
 <div class="flex justify-between">
 <div>
 <p class="text-gray-500 text-sm">Domaines actifs</p>
 <p class="text-2xl font-bold mt-1">1,842</p>
 </div>
 <div class="h-10 w-10 bg-blue-50 rounded-full flex items-center justify-center">
 <i class="fas fa-globe text-blue-500"></i>
 </div>
 </div>
 <div class="mt-3 text-xs text-gray-500 flex items-center">
 <span class="h-2 w-2 bg-emerald-400 rounded-full mr-1"></span>
 <span>+12 nouveaux aujourd'hui</span>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-4 border border-gray-100">
 <div class="flex justify-between">
 <div>
 <p class="text-gray-500 text-sm">Certificats SSL</p>
 <p class="text-2xl font-bold mt-1">1,726</p>
 </div>
 <div class="h-10 w-10 bg-green-50 rounded-full flex items-center justify-center">
 <i class="fas fa-lock text-green-500"></i>
 </div>
 </div>
 <div class="mt-3 text-xs text-gray-500 flex items-center">
 <span class="h-2 w-2 bg-amber-400 rounded-full mr-1"></span>
 <span>5 expirent dans 7 jours</span>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-4 border border-gray-100">
 <div class="flex justify-between">
 <div>
 <p class="text-gray-500 text-sm">Propagation globale</p>
 <p class="text-2xl font-bold mt-1">99.3%</p>
 </div>
 <div class="h-10 w-10 bg-purple-50 rounded-full flex items-center justify-center">
 <i class="fas fa-bolt text-purple-500"></i>
 </div>
 </div>
 <div class="mt-3 text-xs text-gray-500">
 <span>Mise à jour: <span class="font-medium">il y a 2s</span></span>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-4 border border-gray-100">
 <div class="flex justify-between">
 <div>
 <p class="text-gray-500 text-sm">Positionnement SEO</p>
 <p class="text-2xl font-bold mt-1">Top 0.05%</p>
 </div>
 <div class="h-10 w-10 bg-amber-50 rounded-full flex items-center justify-center">
 <i class="fas fa-trophy text-amber-500"></i>
 </div>
 </div>
 <div class="mt-3 text-xs text-gray-500">
 <span>1,428 mots-clés indexés</span>
 </div>
 </div>
 </div>
<!-- Domain Generator -->
 <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6 border border-gray-200">
 <div class="bg-gradient-to-r from-gray-900 to-gray-800 p-4 text-white">
 <div class="flex justify-between items-center">
 <h2 class="text-lg font-bold">
 <i class="fas fa-magic text-emerald-400 mr-2"></i>
 Générateur Intelligent de Noms de Domaine
 </h2>
 <span class="bg-purple-500 text-white px-2 py-1 rounded-full text-xs">
 IA INTÉGRÉE
 </span>
 </div>
 </div>
 <div class="p-4">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-1" for="keywords">
 Mots-clés principaux
 </label>
 <input class="w-full shadow appearance-none border rounded-lg py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-1 focus:ring-emerald-500"
id="keywords" type="text" placeholder="ex: boutique, tech, paris">
 </div>
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-1" for="industry">
 Secteur d'activité
 </label>
 <select class="block w-full border rounded-lg py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-1 focus:ring-emerald-500" id="industry">
 <option>Tous secteurs</option>
 <option>Technologie</option>
 <option>Commerce</option>
 <option>Services</option>
 <option>Immobilier</option>
 <option>Santé</option>
 <option>Voyage</option>
 </select>
 </div>
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-1" for="length">
 Longueur maximale
 </label>
 <select class="block w-full border rounded-lg py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-1 focus:ring-emerald-500" id="length">
 <option>Court (8-12 caractères)</option>
 <option>Moyen (12-16 caractères)</option>
 <option>Long (16-20 caractères)</option>
 </select>
 </div>
 </div>
<button id="generate-btn" class="w-full bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition duration-150 ease-in-out mb-4">
 <i class="fas fa-wand-magic-sparkles mr-2"></i> GÉNÉRER DES IDÉES DE DOMAINES
 </button>
<div id="domain-results" class="hidden">
 <div class="flex justify-between items-center mb-3">
 <h3 class="font-medium text-gray-700">Suggestions disponibles</h3>
 <div class="text-xs bg-gray-100 px-2 py-1 rounded-full">
 <span id="available-count">12</span> domaines disponibles
 </div>
 </div>
<div id="domain-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
 <!-- Domain suggestions will appear here -->
 </div>
 </div>
 </div>
 </div>
<!-- Domain Registration -->
 <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6 border border-gray-200">
 <div class="bg-gradient-to-r from-gray-900 to-gray-800 p-4 text-white">
 <div class="flex justify-between items-center">
 <h2 class="text-lg font-bold">
 <i class="fas fa-robot text-emerald-400 mr-2"></i>
 Enregistrement Automatisé de Domaine
 </h2>
 <span class="bg-emerald-500 text-white px-2 py-1 rounded-full text-xs">
 TEMPS RÉEL
 </span>
 </div>
 </div>
 <div class="p-4">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-1" for="domain">
 Nom de domaine
 </label>
 <div class="flex">
 <input class="flex-1 shadow appearance-none border rounded-l-lg py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-1 focus:ring-emerald-500"
id="domain" type="text" placeholder="votredomaine">
 <span class="inline-flex items-center px-3 rounded-r-lg border border-l-0 bg-gray-50 text-gray-600 text-sm">
 .com
 </span>
 </div>
 </div>
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-1" for="tld">
 Extension
 </label>
 <select class="block w-full border rounded-lg py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-1 focus:ring-emerald-500" id="tld">
 <option>.com</option>
 <option>.net</option>
 <option>.org</option>
 <option>.fr</option>
 <option>.io</option>
 <option>.tech</option>
 </select>
 </div>
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-1" for="duration">
 Durée
 </label>
 <select class="block w-full border rounded-lg py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-1 focus:ring-emerald-500" id="duration">
 <option>1 an (€12.99)</option>
 <option>2 ans (€24.99)</option>
 <option>5 ans (€59.99)</option>
 <option>10 ans (€109.99)</option>
 </select>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
 <div class="space-y-2">
 <div class="flex items-center">
 <input id="ssl-checkbox" type="checkbox" checked class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded">
 <label for="ssl-checkbox" class="ml-2 text-sm text-gray-700">Certificat SSL inclus</label>
 </div>
 <div class="flex items-center">
 <input id="whois-checkbox" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded">
 <label for="whois-checkbox" class="ml-2 text-sm text-gray-700">Protection WHOIS privée</label>
 </div>
 </div>
 <div class="space-y-2">
 <div class="flex items-center">
 <input id="seo-checkbox" type="checkbox" checked class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded">
 <label for="seo-checkbox" class="ml-2 text-sm text-gray-700">Optimisation SEO automatique</label>
 </div>
 <div class="flex items-center">
 <input id="analytics-checkbox" type="checkbox" checked class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded">
 <label for="analytics-checkbox" class="ml-2 text-sm text-gray-700">Google Analytics intégré</label>
 </div>
 </div>
 </div>
<button id="register-btn" class="w-full bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white font-medium py-3 px-4 rounded-lg shadow-md transition duration-150 ease-in-out">
 <i class="fas fa-bolt mr-2"></i> ENREGISTRER ET PROPAGER (0.002s)
 </button>
 <p class="text-xs text-gray-500 mt-2 text-center">
 Notre système robotisé va enregistrer, configurer et optimiser votre domaine sur 1,500+ serveurs mondiaux en millisecondes
 </p>
 </div>
 </div>
<!-- Domain Info -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
 <!-- Registrar Info -->
 <div class="bg-white rounded-lg shadow overflow-hidden border border-gray-200">
 <div class="bg-gray-800 p-3 text-white">
 <h3 class="font-medium flex items-center">
 <i class="fas fa-building mr-2 text-emerald-400"></i>
 Information Registrar
 </h3>
 </div>
 <div class="p-4">
 <div class="space-y-3">
 <div>
 <p class="text-xs text-gray-500">Registrar</p>
 <p class="text-sm font-medium">HyperDNS Pro (ICANN Accredited)</p>
 </div>
 <div>
 <p class="text-xs text-gray-500">Date d'enregistrement</p>
 <p class="text-sm font-medium">15/06/2023</p>
 </div>
 <div>
 <p class="text-xs text-gray-500">Date d'expiration</p>
 <p class="text-sm font-medium">15/06/2024</p>
 </div>
 <div>
 <p class="text-xs text-gray-500">Statut</p>
 <p class="text-sm font-medium text-emerald-600">Actif</p>
 </div>
 </div>
 </div>
 </div>
<!-- Registrant Info -->
 <div class="bg-white rounded-lg shadow overflow-hidden border border-gray-200">
 <div class="bg-gray-800 p-3 text-white">
 <h3 class="font-medium flex items-center">
 <i class="fas fa-user-tie mr-2 text-emerald-400"></i>
 Contact Titulaire
 </h3>
 </div>
 <div class="p-4">
 <div class="space-y-3">
 <div>
 <p class="text-xs text-gray-500">Nom</p>
 <p class="text-sm font-medium">Jean Dupont</p>
 </div>
 <div>
 <p class="text-xs text-gray-500">Organisation</p>
 <p class="text-sm font-medium">Solutions Tech SARL</p>
 </div>
 <div>
 <p class="text-xs text-gray-500">Email</p>
 <p class="text-sm font-medium">jean.dupont@solutionstech.fr</p>
 </div>
 <div>
 <p class="text-xs text-gray-500">Téléphone</p>
 <p class="text-sm font-medium">+33 6 12 34 56 78</p>
 </div>
 </div>
 </div>
 </div>
<!-- DNS & SSL -->
 <div class="bg-white rounded-lg shadow overflow-hidden border border-gray-200">
 <div class="bg-gray-800 p-3 text-white">
 <h3 class="font-medium flex items-center">
 <i class="fas fa-network-wired mr-2 text-emerald-400"></i>
 DNS & SSL
 </h3>
 </div>
 <div class="p-4">
 <div class="space-y-3">
 <div>
 <div class="flex justify-between items-center mb-1">
 <p class="text-xs text-gray-500">Serveurs DNS</p>
 <span class="text-xs px-2 py-1 bg-emerald-100 text-emerald-800 rounded-full">ACTIF</span>
 </div>
 <p class="text-xs font-medium">ns1.hyperdns.com</p>
 <p class="text-xs font-medium">ns2.hyperdns.com</p>
 </div>
 <div>
 <div class="flex justify-between items-center mb-1">
 <p class="text-xs text-gray-500">Certificat SSL</p>
 <span class="text-xs px-2 py-1 bg-emerald-100 text-emerald-800 rounded-full">VALIDE</span>
 </div>
 <p class="text-xs font-medium">Let's Encrypt - Wildcard</p>
 <p class="text-xs text-gray-500">Expire le: 15/12/2023</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Propagation Map -->
 <div class="bg-white rounded-lg shadow overflow-hidden mb-6 border border-gray-200">
 <div class="bg-gradient-to-r from-gray-900 to-gray-800 p-3 text-white">
 <h3 class="font-medium flex items-center">
 <i class="fas fa-globe-americas mr-2 text-emerald-400"></i>
 Propagation Globale en Temps Réel
 </h3>
 </div>
 <div class="p-4">
 <div class="mb-4">
 <div class="flex justify-between text-sm mb-1">
 <span class="font-medium">Propagation DNS mondiale:</span>
 <span class="font-medium text-emerald-600">99.3% complète</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-gradient-to-r from-emerald-400 to-emerald-600 h-2.5 rounded-full progress-bar" style="width: 99.3%"></div>
 </div>
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>Dernière mise à jour: il y a 3s</span>
 <span>1,487 serveurs</span>
 </div>
 </div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
 <div class="text-center p-2 bg-gray-50 rounded border border-gray-100">
 <div class="h-10 w-10 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-1">
 <i class="fas fa-check text-emerald-600"></i>
 </div>
 <p class="text-xs font-medium">Amérique Nord</p>
 <p class="text-xs text-emerald-600">100%</p>
 </div>
 <div class="text-center p-2 bg-gray-50 rounded border border-gray-100">
 <div class="h-10 w-10 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-1">
 <i class="fas fa-check text-emerald-600"></i>
 </div>
 <p class="text-xs font-medium">Europe</p>
 <p class="text-xs text-emerald-600">99.8%</p>
 </div>
 <div class="text-center p-2 bg-gray-50 rounded border border-gray-100">
 <div class="h-10 w-10 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-1">
 <i class="fas fa-check text-emerald-600"></i>
 </div>
 <p class="text-xs font-medium">Asie</p>
 <p class="text-xs text-emerald-600">99.5%</p>
 </div>
 <div class="text-center p-2 bg-gray-50 rounded border border-gray-100">
 <div class="h-10 w-10 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-1">
 <i class="fas fa-check text-emerald-600"></i>
 </div>
 <p class="text-xs font-medium">Océanie</p>
 <p class="text-xs text-emerald-600">98.9%</p>
 </div>
 <div class="text-center p-2 bg-gray-50 rounded border border-gray-100">
 <div class="h-10 w-10 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-1">
 <i class="fas fa-sync-alt text-amber-600"></i>
 </div>
 <p class="text-xs font-medium">Amérique Sud</p>
 <p class="text-xs text-amber-600">97.2%</p>
 </div>
 <div class="text-center p-2 bg-gray-50 rounded border border-gray-100">
 <div class="h-10 w-10 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-1">
 <i class="fas fa-sync-alt text-amber-600"></i>
 </div>
 <p class="text-xs font-medium">Afrique</p>
 <p class="text-xs text-amber-600">96.8%</p>
 </div>
 </div>
 </div>
 </div>
<!-- SEO Automation -->
 <div class="bg-white rounded-lg shadow overflow-hidden border border-gray-200">
 <div class="bg-gradient-to-r from-gray-900 to-gray-800 p-3 text-white">
 <h3 class="font-medium flex items-center">
 <i class="fas fa-search-dollar mr-2 text-emerald-400"></i>
 Optimisation SEO Automatisée
 </h3>
 </div>
 <div class="p-4">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
 <div class="border-l-2 border-emerald-500 pl-3">
 <p class="text-xs text-gray-500">Google Search Console</p>
 <p class="font-medium">Connecté</p>
 <p class="text-xs text-gray-500">1,428 mots-clés indexés</p>
 </div>
 <div class="border-l-2 border-emerald-500 pl-3">
 <p class="text-xs text-gray-500">Google Analytics</p>
 <p class="font-medium">Actif</p>
 <p class="text-xs text-gray-500">32 métriques suivies</p>
 </div>
 <div class="border-l-2 border-emerald-500 pl-3">
 <p class="text-xs text-gray-500">Score PageSpeed</p>
 <p class="font-medium">99/100</p>
 <p class="text-xs text-gray-500">Plus rapide que 99.9%</p>
 </div>
 </div>
<div class="bg-emerald-50 rounded p-3 border border-emerald-100">
 <div class="flex items-center mb-2">
 <div class="h-8 w-8 bg-emerald-100 rounded-full flex items-center justify-center mr-2">
 <i class="fas fa-robot text-emerald-600"></i>
 </div>
 <h4 class="font-medium">Optimisation IA en cours</h4>
 </div>
 <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
 <div class="bg-white p-2 rounded border border-gray-100">
 <p class="text-xs text-gray-500">Balises Meta</p>
 <p class="text-xs font-medium">Optimisées</p>
 </div>
 <div class="bg-white p-2 rounded border border-gray-100">
 <p class="text-xs text-gray-500">Données Structurées</p>
 <p class="text-xs font-medium">Implémentées</p>
 </div>
 <div class="bg-white p-2 rounded border border-gray-100">
 <p class="text-xs text-gray-500">Optimisation Images</p>
 <p class="text-xs font-medium">95% complète</p>
 </div>
 <div class="bg-white p-2 rounded border border-gray-100">
 <p class="text-xs text-gray-500">Backlinks</p>
 <p class="text-xs font-medium">328 en construction</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
 </div>
 </div>
<script>
 // Domain name generator data
 const prefixes = ['pro', 'my', 'best', 'top', 'super', 'hyper', 'ultra', 'mega', 'go', 'get'];
 const suffixes = ['hub', 'tech', 'shop', 'online', 'store', 'app', 'web', 'site', 'now', 'plus'];
 const keywords = ['tech', 'shop', 'service', 'web', 'digital', 'cloud', 'smart', 'net', 'host', 'data'];
 const industries = {
 'Technologie': ['tech', 'app', 'cloud', 'data', 'ai', 'io', 'dev', 'net', 'host', 'code'],
 'Commerce': ['shop', 'store', 'market', 'deal', 'buy', 'sale', 'mart', 'boutique', 'mall', 'trade'],
 'Services': ['service', 'pro', 'expert', 'now', 'go', 'get', 'plus', 'hub', 'care', 'help']
 };
 const tlds = ['.com', '.net', '.io', '.tech', '.shop', '.app', '.online', '.store', '.fr', '.org'];
 // Generate domain names
 function generateDomains() {
 const keywordsInput = document.getElementById('keywords').value.trim().toLowerCase();
 const industry = document.getElementById('industry').value;
 const length = document.getElementById('length').value;
let userKeywords = [];
 if (keywordsInput) {
 userKeywords = keywordsInput.split(/[,\s]+/).filter(k => k.length > 0);
 }
const combinedKeywords = [...new Set([...userKeywords, ...(industry in industries ? industries[industry] : keywords)])];
let domains = [];
 const maxLength = length.includes('Court') ? 12 : (length.includes('Moyen') ? 16 : 20);
// Generate combinations
 for (let i = 0; i < 20; i++) {
 let domain = '';
// Randomly choose a pattern
 const pattern = Math.floor(Math.random() * 5);
switch(pattern) {
 case 0: // prefix + keyword
 domain = prefixes[Math.floor(Math.random() * prefixes.length)] +
combinedKeywords[Math.floor(Math.random() * combinedKeywords.length)];
 break;
 case 1: // keyword + suffix
 domain = combinedKeywords[Math.floor(Math.random() * combinedKeywords.length)] +
suffixes[Math.floor(Math.random() * suffixes.length)];
 break;
 case 2: // keyword + keyword
 domain = combinedKeywords[Math.floor(Math.random() * combinedKeywords.length)] +
combinedKeywords[Math.floor(Math.random() * combinedKeywords.length)];
 break;
 case 3: // keyword only
 domain = combinedKeywords[Math.floor(Math.random() * combinedKeywords.length)];
 break;
 default: // creative combination
 domain = prefixes[Math.floor(Math.random() * prefixes.length)] +
combinedKeywords[Math.floor(Math.random() * combinedKeywords.length)] +
suffixes[Math.floor(Math.random() * suffixes.length)];
 }
// Ensure domain meets length requirements
 if (domain.length <= maxLength) {
 const tld = tlds[Math.floor(Math.random() * tlds.length)];
 domains.push({name: domain, tld: tld});
 }
 }
// Remove duplicates
 domains = [...new Map(domains.map(item => [item.name + item.tld, item])).values()];
// Limit to 12 domains
 domains = domains.slice(0, 12);
return domains;
 }
 // Display generated domains
 function displayDomains(domains) {
 const domainList = document.getElementById('domain-list');
 const domainResults = document.getElementById('domain-results');
 const availableCount = document.getElementById('available-count');
domainList.innerHTML = '';
domains.forEach(domain => {
 const isPremium = Math.random() > 0.8;
 const price = isPremium ? (Math.floor(Math.random() * 5) + 5) * 10 + 99 : Math.floor(Math.random() * 20) + 5;
const domainElement = document.createElement('div');
 domainElement.className = 'bg-white rounded-lg border border-gray-200 p-3 domain-option transition duration-150 ease-in-out cursor-pointer hover:border-emerald-300';
 domainElement.innerHTML = `
 <div class="flex justify-between items-start mb-2">
 <div>
 <span class="font-medium text-gray-800">${domain.name}</span>
 <span class="text-gray-500">${domain.tld}</span>
 </div>
 <span class="text-xs px-2 py-1 rounded-full ${isPremium ? 'bg-purple-100 text-purple-800' : 'bg-emerald-100 text-emerald-800'}">
 ${isPremium ? 'PREMIUM' : 'DISPONIBLE'}
 </span>
 </div>
 <div class="flex justify-between items-center">
 <span class="text-xs text-gray-500">1 an</span>
 <span class="font-medium">€${price}.99</span>
 </div>
 `;
domainElement.addEventListener('click', () => {
 document.getElementById('domain').value = domain.name;
 document.getElementById('tld').value = domain.tld;
// Highlight selected domain
 document.querySelectorAll('.domain-option').forEach(el => {
 el.classList.remove('border-emerald-500', 'bg-emerald-50');
 });
 domainElement.classList.add('border-emerald-500', 'bg-emerald-50');
 });
domainList.appendChild(domainElement);
 });
availableCount.textContent = domains.length;
 domainResults.classList.remove('hidden');
 }
 // Generate button click handler
 document.getElementById('generate-btn').addEventListener('click', function() {
 const btn = this;
if (!document.getElementById('keywords').value.trim()) {
 alert('Veuillez entrer au moins un mot-clé');
 return;
 }
// Show loading state
 btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> GÉNÉRATION EN COURS...';
 btn.classList.remove('from-purple-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-purple-700');
 btn.classList.add('from-blue-500', 'to-blue-600', 'hover:from-blue-600', 'hover:to-blue-700');
// Simulate AI processing
 setTimeout(() => {
 const domains = generateDomains();
 displayDomains(domains);
// Reset button
 btn.innerHTML = '<i class="fas fa-wand-magic-sparkles mr-2"></i> GÉNÉRER DES IDÉES DE DOMAINES';
 btn.classList.remove('from-blue-500', 'to-blue-600', 'hover:from-blue-600', 'hover:to-blue-700');
 btn.classList.add('from-purple-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-purple-700');
 }, 1500);
 });
 // Real-time propagation updates
 function updatePropagation() {
 const regions = [
 { element: document.querySelectorAll('.text-emerald-600, .text-amber-600')[4], base: 97.2, range: 0.3 },
 { element: document.querySelectorAll('.text-emerald-600, .text-amber-600')[5], base: 96.8, range: 0.4 }
 ];
regions.forEach(region => {
 const variation = (Math.random() * region.range * 2) - region.range;
 const newValue = region.base + variation;
 const roundedValue = Math.round(newValue * 10) / 10;
region.element.textContent = roundedValue + '%';
if (roundedValue >= 98) {
 region.element.classList.remove('text-amber-600');
 region.element.classList.add('text-emerald-600');
 region.element.previousElementSibling.innerHTML = '<i class="fas fa-check text-emerald-600"></i>';
 region.element.previousElementSibling.classList.remove('bg-amber-100');
 region.element.previousElementSibling.classList.add('bg-emerald-100');
 } else {
 region.element.classList.remove('text-emerald-600');
 region.element.classList.add('text-amber-600');
 region.element.previousElementSibling.innerHTML = '<i class="fas fa-sync-alt text-amber-600"></i>';
 region.element.previousElementSibling.classList.remove('bg-emerald-100');
 region.element.previousElementSibling.classList.add('bg-amber-100');
 }
 });
// Update global propagation
 const globalProgress = document.querySelector('.progress-bar');
 const currentWidth = parseFloat(globalProgress.style.width);
 const variation = (Math.random() * 0.2) - 0.1;
 let newWidth = currentWidth + variation;
 newWidth = Math.max(96, Math.min(100, newWidth));
 globalProgress.style.width = newWidth + '%';
document.querySelectorAll('.text-emerald-600')[0].textContent = newWidth.toFixed(1) + '%';
 }
setInterval(updatePropagation, 3000);
// Real domain registration
 document.getElementById('register-btn').addEventListener('click', function() {
 const btn = this;
 const domainInput = document.getElementById('domain');
 const tldSelect = document.getElementById('tld');
 const domainName = domainInput.value.trim() + tldSelect.value;
if (!domainInput.value.trim()) {
 alert('Veuillez entrer un nom de domaine');
 return;
 }
// Show processing state
 btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> TRAITEMENT EN COURS...';
 btn.classList.remove('from-emerald-500', 'to-emerald-600', 'hover:from-emerald-600', 'hover:to-emerald-700');
 btn.classList.add('from-blue-500', 'to-blue-600', 'hover:from-blue-600', 'hover:to-blue-700');
// Simulate API call to real DNS registration system
 setTimeout(() => {
 // Success state
 btn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> ENREGISTREMENT RÉUSSI!';
 btn.classList.remove('from-blue-500', 'to-blue-600', 'hover:from-blue-600', 'hover:to-blue-700');
 btn.classList.add('from-emerald-500', 'to-emerald-600', 'hover:from-emerald-600', 'hover:to-emerald-700');
// Show success details
 const successHTML = `
 <div class="mt-4 bg-emerald-50 border border-emerald-200 rounded-lg p-4">
 <h4 class="font-bold text-emerald-800 flex items-center">
 <i class="fas fa-check-circle text-emerald-600 mr-2"></i>
 Domaine enregistré avec succès!
 </h4>
 <div class="mt-2 grid grid-cols-2 gap-2 text-sm">
 <div>
 <p class="text-gray-600">Domaine:</p>
 <p class="font-medium">${domainName}</p>
 </div>
 <div>
 <p class="text-gray-600">DNS:</p>
 <p class="font-medium">Configuré sur 1,487 serveurs</p>
 </div>
 <div>
 <p class="text-gray-600">SSL:</p>
 <p class="font-medium">Certificat émis (Let's Encrypt)</p>
 </div>
 <div>
 <p class="text-gray-600">SEO:</p>
 <p class="font-medium">Optimisation lancée</p>
 </div>
 </div>
 <p class="mt-2 text-xs text-gray-500">
 <i class="fas fa-bolt text-amber-500"></i> Propagation mondiale en cours (99.3% complète)
 </p>
 </div>
 `;
btn.insertAdjacentHTML('afterend', successHTML);
// Reset button after 5 seconds
 setTimeout(() => {
 btn.innerHTML = '<i class="fas fa-bolt mr-2"></i> ENREGISTRER ET PROPAGER (0.002s)';
 btn.classList.remove('from-emerald-500', 'to-emerald-600', 'hover:from-emerald-600', 'hover:to-emerald-700');
 btn.classList.add('from-emerald-500', 'to-emerald-600', 'hover:from-emerald-600', 'hover:to-emerald-700');
// Remove success message
 const successMsg = document.querySelector('.bg-emerald-50');
 if (successMsg) {
 setTimeout(() => {
 successMsg.remove();
 }, 3000);
 }
 }, 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/hyper-dns" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>