Hugging Face's logo

Spaces:
docto41
/
autodomain
Running

App Files Community
autodomain / index.html
docto41's picture
docto41
Add 2 files
1fd6e42 verified
raw
history blame contribute delete
59.9 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AutoDomain Pro - Enregistrement Automatique 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>
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1e40af 100%);
}
.domain-card {
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.domain-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
.progress-bar {
height: 6px;
transition: width 0.5s ease;
background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.feature-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
margin: 0 auto 1.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.tech-card {
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.tech-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
backdrop-filter: blur(5px);
}
.hero-image {
background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
background-blend-mode: overlay;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
.price-card {
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.price-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
.search-box {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.search-box input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Header -->
<header class="gradient-bg text-white sticky top-0 z-50">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<img src="https://cdn-icons-png.flaticon.com/512/681/681618.png" alt="Logo" class="h-10 w-10">
<div>
<h1 class="text-2xl font-bold">AutoDomain Pro</h1>
<p class="text-sm opacity-80">Enregistrement instantané 24/7</p>
</div>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="hover:text-yellow-200 transition">Fonctionnalités</a>
<a href="#how-it-works" class="hover:text-yellow-200 transition">Technologie</a>
<a href="#pricing" class="hover:text-yellow-200 transition">Tarifs</a>
<a href="#testimonials" class="hover:text-yellow-200 transition">Témoignages</a>
</nav>
<div class="flex items-center space-x-4">
<button id="loginBtn" class="px-4 py-2 rounded-full bg-white text-blue-600 font-semibold hover:bg-gray-100 transition">Connexion</button>
<button class="md:hidden" id="mobileMenuBtn">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="gradient-bg hero-image text-white py-24">
<div class="container mx-auto px-4 text-center">
<div class="max-w-4xl mx-auto">
<h2 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Enregistrement de Domaines Automatisé</h2>
<p class="text-xl md:text-2xl mb-10 opacity-90">
Obtenez votre domaine, SSL, DNS et référencement en <span class="font-bold text-yellow-300">quelques secondes</span> avec notre système 24/7
</p>
<div class="max-w-2xl mx-auto search-box rounded-xl p-2 flex">
<input type="text" id="domainSearch" placeholder="Recherchez votre domaine..." class="flex-grow px-6 py-4 rounded-l-xl bg-transparent text-white focus:outline-none">
<button id="searchBtn" class="bg-yellow-400 text-blue-900 px-8 py-4 rounded-r-xl hover:bg-yellow-300 transition font-bold">
<i class="fas fa-search mr-2"></i>Rechercher
</button>
</div>
<div class="mt-8 flex flex-wrap justify-center gap-4">
<div class="flex items-center bg-white bg-opacity-10 px-4 py-2 rounded-full">
<i class="fas fa-check-circle text-yellow-300 mr-2"></i>
<span>Propagation DNS instantanée</span>
</div>
<div class="flex items-center bg-white bg-opacity-10 px-4 py-2 rounded-full">
<i class="fas fa-check-circle text-yellow-300 mr-2"></i>
<span>SSL automatique</span>
</div>
<div class="flex items-center bg-white bg-opacity-10 px-4 py-2 rounded-full">
<i class="fas fa-check-circle text-yellow-300 mr-2"></i>
<span>Référencement immédiat</span>
</div>
</div>
</div>
</div>
</section>
<!-- Domain Registration Process -->
<section class="py-16 bg-white" id="registration-process">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Processus d'Enregistrement Automatisé</h2>
<div class="flex justify-center mb-12">
<img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Processus d'enregistrement" class="rounded-xl shadow-lg w-full max-w-4xl">
</div>
<div id="processContainer" class="hidden">
<div class="max-w-4xl mx-auto bg-gray-50 rounded-xl p-6 mb-8">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">Enregistrement de <span id="currentDomain" class="text-blue-600">example.com</span></h3>
<span id="processTimer" class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">0s</span>
</div>
<div class="mb-4 bg-gray-200 rounded-full h-2">
<div id="processProgress" class="progress-bar rounded-full" style="width: 0%"></div>
</div>
<div id="processSteps" class="grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Steps will be added by JavaScript -->
</div>
</div>
<div id="processLogs" class="max-w-4xl mx-auto bg-gray-900 text-gray-100 rounded-xl p-6 font-mono text-sm h-64 overflow-y-auto">
<!-- Logs will be added by JavaScript -->
</div>
<div class="max-w-4xl mx-auto mt-6 flex justify-center">
<button id="completeRegistration" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 hidden">
<i class="fas fa-check-circle mr-2"></i>Finaliser l'enregistrement
</button>
</div>
</div>
<div id="domainResults" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 hidden">
<!-- Domain cards will be added here by JavaScript -->
</div>
<div id="domainFeatures" class="mt-16">
<h3 class="text-2xl font-semibold text-center mb-8">Extensions populaires</h3>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.com</span>
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.net</span>
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.org</span>
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.io</span>
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.fr</span>
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.ai</span>
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.app</span>
<span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.xyz</span>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-gray-50" id="features">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Fonctionnalités Avancées</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="domain-card p-8 rounded-xl">
<div class="feature-icon bg-blue-100 text-blue-600">
<img src="https://cdn-icons-png.flaticon.com/512/1006/1006771.png" alt="Enregistrement instantané" class="w-10 h-10">
</div>
<h3 class="text-xl font-semibold mb-3 text-center">Enregistrement Instantané</h3>
<p class="text-gray-600 text-center">
Votre domaine est enregistré directement auprès des registrars en temps réel, avec une propagation mondiale en quelques secondes.
</p>
</div>
<div class="domain-card p-8 rounded-xl">
<div class="feature-icon bg-green-100 text-green-600">
<img src="https://cdn-icons-png.flaticon.com/512/2933/2933245.png" alt="SSL Automatique" class="w-10 h-10">
</div>
<h3 class="text-xl font-semibold mb-3 text-center">SSL Automatique</h3>
<p class="text-gray-600 text-center">
Certificat SSL délivré et installé automatiquement avec renouvellement auto. Compatible avec tous les navigateurs.
</p>
</div>
<div class="domain-card p-8 rounded-xl">
<div class="feature-icon bg-purple-100 text-purple-600">
<img src="https://cdn-icons-png.flaticon.com/512/2885/2885257.png" alt="DNS Haute Performance" class="w-10 h-10">
</div>
<h3 class="text-xl font-semibold mb-3 text-center">DNS Haute Performance</h3>
<p class="text-gray-600 text-center">
Réseau Anycast mondial avec des temps de réponse inférieurs à 10ms. 100% uptime garanti.
</p>
</div>
<div class="domain-card p-8 rounded-xl">
<div class="feature-icon bg-yellow-100 text-yellow-600">
<img src="https://cdn-icons-png.flaticon.com/512/4150/4150900.png" alt="Référencement Automatique" class="w-10 h-10">
</div>
<h3 class="text-xl font-semibold mb-3 text-center">Référencement Automatique</h3>
<p class="text-gray-600 text-center">
Soumission automatique à Google Search Console et Analytics. Indexation accélérée.
</p>
</div>
<div class="domain-card p-8 rounded-xl">
<div class="feature-icon bg-red-100 text-red-600">
<img src="https://cdn-icons-png.flaticon.com/512/4260/4260882.png" alt="Monitoring 24/7" class="w-10 h-10">
</div>
<h3 class="text-xl font-semibold mb-3 text-center">Monitoring 24/7</h3>
<p class="text-gray-600 text-center">
Surveillance permanente de votre domaine avec alertes instantanées en cas de problème.
</p>
</div>
<div class="domain-card p-8 rounded-xl">
<div class="feature-icon bg-indigo-100 text-indigo-600">
<img src="https://cdn-icons-png.flaticon.com/512/4299/4299427.png" alt="API Automatisée" class="w-10 h-10">
</div>
<h3 class="text-xl font-semibold mb-3 text-center">API Automatisée</h3>
<p class="text-gray-600 text-center">
Intégration facile avec notre API RESTful pour automatiser vos processus métier.
</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-16 bg-white" id="how-it-works">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Notre Technologie Exclusive</h2>
<div class="max-w-4xl mx-auto">
<div class="mb-12">
<div class="flex flex-col md:flex-row items-center gap-8 mb-8">
<div class="w-full md:w-1/2">
<img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Infrastructure DNS" class="rounded-xl shadow-lg w-full">
</div>
<div class="w-full md:w-1/2">
<h3 class="text-xl font-semibold mb-4 text-blue-600">1. Infrastructure DNS Globale</h3>
<p class="text-gray-700 mb-4">
Notre réseau Anycast distribué sur 5 continents garantit des temps de réponse records :
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="tech-card p-4 rounded-lg">
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<h4 class="font-medium">Amsterdam</h4>
</div>
<p class="text-sm text-gray-600 mt-1">Temps moyen: 3ms</p>
</div>
<div class="tech-card p-4 rounded-lg">
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<h4 class="font-medium">New York</h4>
</div>
<p class="text-sm text-gray-600 mt-1">Temps moyen: 5ms</p>
</div>
<div class="tech-card p-4 rounded-lg">
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<h4 class="font-medium">Singapour</h4>
</div>
<p class="text-sm text-gray-600 mt-1">Temps moyen: 7ms</p>
</div>
</div>
</div>
</div>
</div>
<div class="mb-12">
<div class="flex flex-col md:flex-row items-center gap-8 mb-8">
<div class="w-full md:w-1/2 order-2 md:order-1">
<h3 class="text-xl font-semibold mb-4 text-blue-600">2. Propagation Instantanée</h3>
<p class="text-gray-700 mb-4">
Grâce à nos partenariats avec les principaux registrars et fournisseurs DNS, votre domaine est disponible immédiatement :
</p>
<div class="tech-card p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-4">1</div>
<div>
<h4 class="font-medium">Enregistrement chez le registrar</h4>
<p class="text-sm text-gray-600">Temps réel via API directe</p>
</div>
</div>
<div class="flex items-center mb-4">
<div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-4">2</div>
<div>
<h4 class="font-medium">Mise à jour des serveurs racine</h4>
<p class="text-sm text-gray-600">Propagation en 30 secondes</p>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-4">3</div>
<div>
<h4 class="font-medium">Disponibilité mondiale</h4>
<p class="text-sm text-gray-600">Moins de 60 secondes</p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 order-1 md:order-2">
<img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Propagation instantanée" class="rounded-xl shadow-lg w-full">
</div>
</div>
</div>
<div>
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="w-full md:w-1/2">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Référencement Automatisé" class="rounded-xl shadow-lg w-full">
</div>
<div class="w-full md:w-1/2">
<h3 class="text-xl font-semibold mb-4 text-blue-600">3. Référencement Automatisé</h3>
<p class="text-gray-700 mb-4">
Notre système soumet automatiquement votre site aux moteurs de recherche :
</p>
<div class="tech-card p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<i class="fab fa-google text-blue-600"></i>
</div>
<div>
<h4 class="font-medium">Google Search Console</h4>
<p class="text-sm text-gray-600">Indexation accélérée</p>
</div>
</div>
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<i class="fab fa-google text-blue-600"></i>
</div>
<div>
<h4 class="font-medium">Google Analytics</h4>
<p class="text-sm text-gray-600">Tracking immédiat</p>
</div>
</div>
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-search text-blue-600"></i>
</div>
<div>
<h4 class="font-medium">Sitemap XML</h4>
<p class="text-sm text-gray-600">Génération automatique</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="py-16 bg-gray-50" id="pricing">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Nos Offres</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="price-card rounded-xl overflow-hidden">
<div class="bg-gray-100 py-8 px-8">
<h3 class="text-xl font-semibold text-center">Starter</h3>
<div class="text-center mt-4">
<span class="text-4xl font-bold">€9.99</span>
<span class="text-gray-600">/mois</span>
</div>
</div>
<div class="p-8">
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>1 domaine inclus</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>SSL automatique</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>DNS Basic</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-red-400 mr-2"></i>
<span>Référencement avancé</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-red-400 mr-2"></i>
<span>Monitoring 24/7</span>
</li>
</ul>
<button class="w-full mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
Commencer
</button>
</div>
</div>
<div class="price-card rounded-xl overflow-hidden transform scale-105 border-2 border-blue-500">
<div class="bg-blue-500 text-white py-8 px-8">
<h3 class="text-xl font-semibold text-center">Pro</h3>
<div class="text-center mt-4">
<span class="text-4xl font-bold">€24.99</span>
<span class="opacity-80">/mois</span>
</div>
</div>
<div class="p-8">
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>5 domaines inclus</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>SSL automatique</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>DNS Premium</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Référencement avancé</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Monitoring 24/7</span>
</li>
</ul>
<button class="w-full mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
Choisir cette offre
</button>
</div>
</div>
<div class="price-card rounded-xl overflow-hidden">
<div class="bg-gray-100 py-8 px-8">
<h3 class="text-xl font-semibold text-center">Enterprise</h3>
<div class="text-center mt-4">
<span class="text-4xl font-bold">€99.99</span>
<span class="text-gray-600">/mois</span>
</div>
</div>
<div class="p-8">
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Domaines illimités</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>SSL EV (Extended Validation)</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>DNS Enterprise</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Référencement premium</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Support prioritaire 24/7</span>
</li>
</ul>
<button class="w-full mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
Contactez-nous
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 bg-white" id="testimonials">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Ils nous font confiance</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Jean Dupont" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">Jean Dupont</h4>
<p class="text-sm text-gray-600">CEO, StartupTech</p>
</div>
</div>
<p class="text-gray-700">
"J'ai enregistré mon domaine à 3h du matin et il était disponible partout dans le monde en moins d'une minute. Impressionnant !"
</p>
<div class="mt-4 text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Marie Simon" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">Marie Simon</h4>
<p class="text-sm text-gray-600">Directrice Marketing</p>
</div>
</div>
<p class="text-gray-700">
"Le référencement automatique sur Google a fonctionné à merveille. Notre site était indexé en 24h seulement."
</p>
<div class="mt-4 text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Thomas Petit" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold">Thomas Petit</h4>
<p class="text-sm text-gray-600">CTO, DevAgency</p>
</div>
</div>
<p class="text-gray-700">
"L'API est parfaitement documentée et nous permet d'automatiser tous nos enregistrements de domaine. Un gain de temps énorme."
</p>
<div class="mt-4 text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 gradient-bg text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à enregistrer votre domaine en quelques secondes ?</h2>
<p class="text-xl mb-10 max-w-2xl mx-auto opacity-90">
Essayez notre service gratuitement pendant 7 jours. Aucune carte de crédit requise.
</p>
<button class="px-8 py-4 bg-yellow-400 text-blue-900 rounded-xl hover:bg-yellow-300 transition font-bold text-lg">
<i class="fas fa-bolt mr-2"></i>Commencer maintenant
</button>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<img src="https://cdn-icons-png.flaticon.com/512/681/681618.png" alt="Logo" class="h-10 w-10 mr-3">
<h3 class="text-white text-lg font-semibold">AutoDomain Pro</h3>
</div>
<p class="mb-4">
La solution la plus rapide pour enregistrer et gérer vos domaines avec tous les services associés.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<div>
<h3 class="text-white text-lg font-semibold mb-4">Services</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Enregistrement de domaine</a></li>
<li><a href="#" class="hover:text-white transition">Certificats SSL</a></li>
<li><a href="#" class="hover:text-white transition">Hébergement DNS</a></li>
<li><a href="#" class="hover:text-white transition">Référencement SEO</a></li>
<li><a href="#" class="hover:text-white transition">Monitoring</a></li>
</ul>
</div>
<div>
<h3 class="text-white text-lg font-semibold mb-4">Support</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Centre d'aide</a></li>
<li><a href="#" class="hover:text-white transition">Documentation</a></li>
<li><a href="#" class="hover:text-white transition">API Developer</a></li>
<li><a href="#" class="hover:text-white transition">Statut du service</a></li>
<li><a href="#" class="hover:text-white transition">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-white text-lg font-semibold mb-4">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Conditions générales</a></li>
<li><a href="#" class="hover:text-white transition">Politique de confidentialité</a></li>
<li><a href="#" class="hover:text-white transition">Politique de cookies</a></li>
<li><a href="#" class="hover:text-white transition">Mentions légales</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center">
<p>&copy; 2023 AutoDomain Pro. Tous droits réservés.</p>
</div>
</div>
</footer>
<!-- Registration Process Modal -->
<div id="registrationModal" class="modal">
<div class="modal-content">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold">Enregistrement en cours</h3>
<button id="closeRegistrationModal" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
</div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<h4 id="modalDomainName" class="font-semibold">example.com</h4>
<span id="modalTimer" class="text-sm text-gray-600">0 secondes</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="modalProgress" class="progress-bar h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
<div id="modalSteps" class="mb-6">
<!-- Steps will be added by JavaScript -->
</div>
<div id="modalLogs" class="bg-gray-100 p-4 rounded-lg font-mono text-sm h-64 overflow-y-auto mb-6">
<!-- Logs will be added by JavaScript -->
</div>
<div class="flex justify-end">
<button id="cancelRegistration" class="px-4 py-2 border border-gray-300 rounded-lg mr-2 hover:bg-gray-100">
Annuler
</button>
<button id="continueRegistration" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
Continuer
</button>
</div>
</div>
</div>
<!-- Login Modal -->
<div id="loginModal" class="modal">
<div class="modal-content">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold">Connexion</h3>
<button id="closeLoginModal" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
</div>
<form id="loginForm">
<div class="mb-4">
<label for="loginEmail" class="block text-gray-700 mb-2">Email</label>
<input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div class="mb-6">
<label for="loginPassword" class="block text-gray-700 mb-2">Mot de passe</label>
<input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-medium">
Se connecter
</button>
<p class="text-center mt-4 text-sm text-gray-600">
Pas encore de compte? <a href="#" id="showRegisterLink" class="text-blue-600 hover:underline">S'inscrire</a>
</p>
</form>
<form id="registerForm" class="hidden">
<div class="mb-4">
<label for="registerEmail" class="block text-gray-700 mb-2">Email</label>
<input type="email" id="registerEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div class="mb-4">
<label for="registerPassword" class="block text-gray-700 mb-2">Mot de passe</label>
<input type="password" id="registerPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div class="mb-6">
<label for="registerConfirmPassword" class="block text-gray-700 mb-2">Confirmer le mot de passe</label>
<input type="password" id="registerConfirmPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-medium">
S'inscrire
</button>
<p class="text-center mt-4 text-sm text-gray-600">
Déjà un compte? <a href="#" id="showLoginLink" class="text-blue-600 hover:underline">Se connecter</a>
</p>
</form>
</div>
</div>
<script>
// DOM Elements
const loginBtn = document.getElementById('loginBtn');
const loginModal = document.getElementById('loginModal');
const closeLoginModal = document.getElementById('closeLoginModal');
const loginForm = document.getElementById('loginForm');
const registerForm = document.getElementById('registerForm');
const showRegisterLink = document.getElementById('showRegisterLink');
const showLoginLink = document.getElementById('showLoginLink');
const searchBtn = document.getElementById('searchBtn');
const domainSearch = document.getElementById('domainSearch');
const domainResults = document.getElementById('domainResults');
const processContainer = document.getElementById('processContainer');
const currentDomain = document.getElementById('currentDomain');
const processTimer = document.getElementById('processTimer');
const processProgress = document.getElementById('processProgress');
const processSteps = document.getElementById('processSteps');
const processLogs = document.getElementById('processLogs');
const completeRegistration = document.getElementById('completeRegistration');
const registrationModal = document.getElementById('registrationModal');
const closeRegistrationModal = document.getElementById('closeRegistrationModal');
const modalDomainName = document.getElementById('modalDomainName');
const modalTimer = document.getElementById('modalTimer');
const modalProgress = document.getElementById('modalProgress');
const modalSteps = document.getElementById('modalSteps');
const modalLogs = document.getElementById('modalLogs');
const cancelRegistration = document.getElementById('cancelRegistration');
const continueRegistration = document.getElementById('continueRegistration');
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
// Sample domain data
const domains = [
{ name: 'example', tld: '.com', price: 12.99, available: true },
{ name: 'test', tld: '.net', price: 10.99, available: true },
{ name: 'awesome', tld: '.org', price: 9.99, available: true },
{ name: 'business', tld: '.io', price: 25.99, available: false },
{ name: 'france', tld: '.fr', price: 15.99, available: true },
{ name: 'shop', tld: '.shop', price: 20.99, available: true },
{ name: 'tech', tld: '.ai', price: 49.99, available: true },
{ name: 'app', tld: '.app', price: 18.99, available: false },
{ name: 'creative', tld: '.xyz', price: 8.99, available: true }
];
// Registration process steps
const registrationSteps = [
{ name: 'Vérification disponibilité', duration: 1, description: 'Vérification auprès des registrars mondiaux' },
{ name: 'Enregistrement du domaine', duration: 3, description: 'Enregistrement en temps réel via API' },
{ name: 'Configuration DNS', duration: 2, description: 'Mise en place des serveurs Anycast' },
{ name: 'Déploiement SSL', duration: 2, description: 'Certificat Let\'s Encrypt automatique' },
{ name: 'Propagation mondiale', duration: 5, description: 'Mise à jour des serveurs racine DNS' },
{ name: 'Soumission SEO', duration: 2, description: 'Google Search Console & Analytics' },
{ name: 'Finalisation', duration: 1, description: 'Vérification complète du domaine' }
];
// State
let selectedDomain = null;
let timerInterval = null;
let secondsElapsed = 0;
let currentStep = 0;
let isProcessRunning = false;
// Event Listeners
loginBtn.addEventListener('click', () => loginModal.style.display = 'block');
closeLoginModal.addEventListener('click', () => loginModal.style.display = 'none');
showRegisterLink.addEventListener('click', (e) => {
e.preventDefault();
loginForm.classList.add('hidden');
registerForm.classList.remove('hidden');
});
showLoginLink.addEventListener('click', (e) => {
e.preventDefault();
registerForm.classList.add('hidden');
loginForm.classList.remove('hidden');
});
searchBtn.addEventListener('click', searchDomains);
completeRegistration.addEventListener('click', completeDomainRegistration);
closeRegistrationModal.addEventListener('click', () => registrationModal.style.display = 'none');
cancelRegistration.addEventListener('click', cancelDomainRegistration);
continueRegistration.addEventListener('click', continueDomainRegistration);
mobileMenuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
// Form submissions
loginForm.addEventListener('submit', handleLogin);
registerForm.addEventListener('submit', handleRegister);
// Search domains
function searchDomains() {
const query = domainSearch.value.trim().toLowerCase();
if (!query) {
alert('Veuillez entrer un terme de recherche');
return;
}
// Filter domains (in a real app, this would be a server call)
const results = domains.filter(domain =>
domain.name.includes(query) || domain.tld.includes(query)
);
// Display results
domainResults.innerHTML = '';
if (results.length === 0) {
domainResults.innerHTML = '<p class="text-gray-500 text-center col-span-3">Aucun domaine trouvé</p>';
} else {
results.forEach(domain => {
const domainEl = document.createElement('div');
domainEl.className = 'domain-card rounded-xl overflow-hidden shadow-md hover:shadow-lg transition';
domainEl.innerHTML = `
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold text-gray-800">${domain.name}<span class="text-blue-600">${domain.tld}</span></h3>
<span class="px-3 py-1 rounded-full text-sm ${domain.available ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
${domain.available ? 'Disponible' : 'Indisponible'}
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-600">€${domain.price.toFixed(2)}</span>
<button class="register-domain px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition ${!domain.available ? 'opacity-50 cursor-not-allowed' : ''}"
data-name="${domain.name}"
data-tld="${domain.tld}"
data-price="${domain.price}"
${!domain.available ? 'disabled' : ''}>
${!domain.available ? 'Indisponible' : 'Enregistrer'}
</button>
</div>
</div>
`;
domainResults.appendChild(domainEl);
});
// Add event listeners to register buttons
document.querySelectorAll('.register-domain').forEach(btn => {
btn.addEventListener('click', (e) => {
if (btn.disabled) return;
const domainName = btn.getAttribute('data-name');
const domainTld = btn.getAttribute('data-tld');
const domainPrice = parseFloat(btn.getAttribute('data-price'));
startDomainRegistration(domainName, domainTld, domainPrice);
});
});
}
domainResults.classList.remove('hidden');
}
// Start domain registration
function startDomainRegistration(name, tld, price) {
selectedDomain = { name, tld, price };
currentDomain.textContent = `${name}${tld}`;
modalDomainName.textContent = `${name}${tld}`;
// Reset process
secondsElapsed = 0;
currentStep = 0;
processSteps.innerHTML = '';
processLogs.innerHTML = '';
modalSteps.innerHTML = '';
modalLogs.innerHTML = '';
// Show process container
processContainer.classList.remove('hidden');
// Start timer
startTimer();
// Start process steps
startNextStep();
// Show modal
registrationModal.style.display = 'block';
}
// Start timer
function startTimer() {
clearInterval(timerInterval);
secondsElapsed = 0;
updateTimer();
timerInterval = setInterval(updateTimer, 1000);
}
// Update timer
function updateTimer() {
secondsElapsed++;
processTimer.textContent = `${secondsElapsed}s`;
modalTimer.textContent = `${secondsElapsed} secondes`;
}
// Start next step
function startNextStep() {
if (currentStep >= registrationSteps.length) {
completeProcess();
return;
}
const step = registrationSteps[currentStep];
// Update progress
const progress = ((currentStep) / registrationSteps.length) * 100;
processProgress.style.width = `${progress}%`;
modalProgress.style.width = `${progress}%`;
// Add step to UI
const stepEl = document.createElement('div');
stepEl.className = 'bg-gray-50 p-4 rounded-lg';
stepEl.innerHTML = `
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4">
${currentStep + 1}
</div>
<div>
<h4 class="font-medium">${step.name}</h4>
<p class="text-sm text-gray-600">${step.description}</p>
</div>
</div>
`;
processSteps.appendChild(stepEl);
const modalStepEl = stepEl.cloneNode(true);
modalSteps.appendChild(modalStepEl);
// Add log entry
addLogEntry(`Début: ${step.name}`, 'info');
// Simulate step processing
setTimeout(() => {
addLogEntry(`${step.name} terminé avec succès`, 'success');
currentStep++;
startNextStep();
}, step.duration * 1000);
}
// Add log entry
function addLogEntry(message, type) {
const now = new Date();
const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
const logEntry = document.createElement('div');
logEntry.className = 'log-entry';
logEntry.innerHTML = `
<span class="log-time">${timeString}</span>
<span class="${type === 'success' ? 'text-green-600' : type === 'warning' ? 'text-yellow-600' : type === 'error' ? 'text-red-600' : 'text-gray-600'}">${message}</span>
`;
processLogs.appendChild(logEntry);
processLogs.scrollTop = processLogs.scrollHeight;
const modalLogEntry = logEntry.cloneNode(true);
modalLogs.appendChild(modalLogEntry);
modalLogs.scrollTop = modalLogs.scrollHeight;
}
// Complete process
function completeProcess() {
clearInterval(timerInterval);
isProcessRunning = false;
// Update progress to 100%
processProgress.style.width = '100%';
modalProgress.style.width = '100%';
// Show complete button
completeRegistration.classList.remove('hidden');
// Add final log entry
addLogEntry('Enregistrement du domaine terminé avec succès!', 'success');
addLogEntry(`Le domaine ${selectedDomain.name}${selectedDomain.tld} est maintenant disponible mondialement`, 'info');
// In a real app, you would redirect to domain management or show success message
}
// Complete domain registration
function completeDomainRegistration() {
registrationModal.style.display = 'none';
alert(`Félicitations! Le domaine ${selectedDomain.name}${selectedDomain.tld} a été enregistré avec succès.`);
// Reset process
processContainer.classList.add('hidden');
completeRegistration.classList.add('hidden');
}
// Cancel domain registration
function cancelDomainRegistration() {
clearInterval(timerInterval);
registrationModal.style.display = 'none';
processContainer.classList.add('hidden');
completeRegistration.classList.add('hidden');
alert('Enregistrement du domaine annulé.');
}
// Continue domain registration
function continueDomainRegistration() {
registrationModal.style.display = 'none';
}
// Handle login
function handleLogin(e) {
e.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
// Simple validation (in a real app, this would be a server call)
if (email && password) {
alert('Connexion réussie!');
loginModal.style.display = 'none';
loginForm.reset();
} else {
alert('Veuillez entrer un email et un mot de passe valides');
}
}
// Handle register
function handleRegister(e) {
e.preventDefault();
const email = document.getElementById('registerEmail').value;
const password = document.getElementById('registerPassword').value;
const confirmPassword = document.getElementById('registerConfirmPassword').value;
if (password !== confirmPassword) {
alert('Les mots de passe ne correspondent pas');
return;
}
if (email && password) {
alert('Inscription réussie! Vous pouvez maintenant vous connecter.');
registerForm.classList.add('hidden');
loginForm.classList.remove('hidden');
registerForm.reset();
}
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
mobileMenu.classList.add('hidden');
}
});
});
</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/autodomain" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>