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>