Download index.html from docto41/hyper-dns: direct link, hf CLI and curl.
- Browser
- Download file 50.5 kB
-
https://huggingface.co/spaces/docto41/hyper-dns/resolve/main/index.html
- Command line
-
hf download hf://spaces/docto41/hyper-dns/index.html
-
curl -L -o index.html https://huggingface.co/spaces/docto41/hyper-dns/resolve/main/index.html
50.5 kB
| <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> |