Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Infrastructure Web Automatisée - 1CLICK</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> | |
| :root { | |
| --primary: #4f46e5; | |
| --secondary: #7c3aed; | |
| --accent: #ec4899; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| } | |
| .text-gradient { | |
| background: linear-gradient(90deg, var(--primary), var(--accent)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .progress-bar { | |
| animation: progress 2s ease-in-out forwards; | |
| } | |
| @keyframes progress { | |
| from { width: 0%; } | |
| to { width: 100%; } | |
| } | |
| .domain-search { | |
| box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(79, 70, 229, 0.6); | |
| } | |
| .button-active { | |
| transform: scale(0.98); | |
| filter: brightness(90%); | |
| } | |
| .button-loading { | |
| position: relative; | |
| color: transparent ; | |
| } | |
| .button-loading:after { | |
| content: ""; | |
| position: absolute; | |
| width: 16px; | |
| height: 16px; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| margin: auto; | |
| border: 3px solid transparent; | |
| border-top-color: #ffffff; | |
| border-radius: 50%; | |
| animation: button-loading-spinner 1s ease infinite; | |
| } | |
| @keyframes button-loading-spinner { | |
| from { transform: rotate(0turn); } | |
| to { transform: rotate(1turn); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-bolt text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">1CLICK <span class="text-indigo-600">PRO</span></span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-link active"> | |
| <i class="fas fa-home mr-2"></i> Accueil | |
| </a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-link"> | |
| <i class="fas fa-globe mr-2"></i> Domaines | |
| </a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-link"> | |
| <i class="fas fa-server mr-2"></i> Hébergement | |
| </a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-link"> | |
| <i class="fas fa-user-shield mr-2"></i> SSL | |
| </a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <div class="relative ml-3"> | |
| <div class="flex space-x-4"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 login-btn"> | |
| <i class="fas fa-sign-in-alt mr-2"></i> Connexion | |
| </button> | |
| <button class="bg-white border border-indigo-600 text-indigo-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 register-btn"> | |
| <i class="fas fa-user-plus mr-2"></i> Inscription | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mobile-menu-btn"> | |
| <span class="sr-only">Ouvrir le menu principal</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden sm:hidden mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-link-mobile active">Accueil</a> | |
| <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-link-mobile">Domaines</a> | |
| <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-link-mobile">Hébergement</a> | |
| <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-link-mobile">SSL</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-200"> | |
| <div class="space-y-1 px-2"> | |
| <button class="block w-full px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 rounded-md login-btn-mobile"> | |
| <i class="fas fa-sign-in-alt mr-2"></i> Connexion | |
| </button> | |
| <button class="block w-full px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 rounded-md register-btn-mobile"> | |
| <i class="fas fa-user-plus mr-2"></i> Inscription | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| Infrastructure Web Automatisée <br>en <span class="text-yellow-300">1 CLICK</span> | |
| </h1> | |
| <p class="mt-6 text-xl max-w-3xl mx-auto"> | |
| Enregistrement instantané de domaine, déploiement SSL, DNS ultra-rapide et intégration Google - le tout automatisé 24h/7j avec propagation mondiale en secondes. | |
| </p> | |
| <!-- Domain Search --> | |
| <div class="mt-10 max-w-2xl mx-auto"> | |
| <div class="domain-search bg-white rounded-lg overflow-hidden p-1"> | |
| <div class="flex"> | |
| <input type="text" class="flex-1 px-4 py-3 border-0 text-gray-900 focus:ring-0 focus:outline-none" placeholder="Recherchez votre nom de domaine..." id="domain-search-input"> | |
| <button class="bg-indigo-600 text-white px-6 py-3 font-medium hover:bg-indigo-700 domain-check-btn"> | |
| <i class="fas fa-search mr-2"></i> Vérifier | |
| </button> | |
| </div> | |
| </div> | |
| <p class="mt-3 text-sm text-indigo-200"> | |
| Essayez: doctorblog.fr, monbusiness.com, monnom.xyz | |
| </p> | |
| </div> | |
| <div class="mt-16 relative"> | |
| <div class="absolute inset-0 flex items-center" aria-hidden="true"> | |
| <div class="w-full border-t border-white border-opacity-30"></div> | |
| </div> | |
| <div class="relative flex justify-center"> | |
| <span class="px-4 bg-indigo-600 text-sm font-medium text-white"> | |
| Propagation DNS en 3.7 secondes (moyenne mondiale) | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Tout ce dont vous avez besoin en <span class="text-gradient">un seul endroit</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Notre plateforme tout-en-un vous permet de gérer votre présence en ligne en quelques clics. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Feature 1 --> | |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mx-auto"> | |
| <i class="fas fa-globe text-xl"></i> | |
| </div> | |
| <div class="mt-5 text-center"> | |
| <h3 class="text-lg font-medium text-gray-900">Domaines</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Enregistrement instantané avec plus de 500 extensions disponibles | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-indigo-600 bg-indigo-100"> | |
| <i class="fas fa-bolt mr-1"></i> 3.7s propagation | |
| </span> | |
| </div> | |
| <button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 feature-btn"> | |
| En savoir plus | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-600 mx-auto"> | |
| <i class="fas fa-lock text-xl"></i> | |
| </div> | |
| <div class="mt-5 text-center"> | |
| <h3 class="text-lg font-medium text-gray-900">SSL Automatique</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Certificats SSL déployés automatiquement avec renouvellement sans intervention | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-green-600 bg-green-100"> | |
| <i class="fas fa-check mr-1"></i> 100% sécurisé | |
| </span> | |
| </div> | |
| <button class="mt-4 px-4 py-2 bg-green-600 text-white rounded-md text-sm font-medium hover:bg-green-700 feature-btn"> | |
| En savoir plus | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mx-auto"> | |
| <i class="fas fa-tachometer-alt text-xl"></i> | |
| </div> | |
| <div class="mt-5 text-center"> | |
| <h3 class="text-lg font-medium text-gray-900">DNS Ultra-Rapide</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Infrastructure Anycast globale pour des résolutions DNS en millisecondes | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-purple-600 bg-purple-100"> | |
| <i class="fas fa-rocket mr-1"></i> 99.99% uptime | |
| </span> | |
| </div> | |
| <button class="mt-4 px-4 py-2 bg-purple-600 text-white rounded-md text-sm font-medium hover:bg-purple-700 feature-btn"> | |
| En savoir plus | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-100 text-pink-600 mx-auto"> | |
| <i class="fab fa-google text-xl"></i> | |
| </div> | |
| <div class="mt-5 text-center"> | |
| <h3 class="text-lg font-medium text-gray-900">Intégration Google</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Configuration automatique avec Search Console, Analytics et Workspace | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-pink-600 bg-pink-100"> | |
| <i class="fas fa-robot mr-1"></i> Automatisé | |
| </span> | |
| </div> | |
| <button class="mt-4 px-4 py-2 bg-pink-600 text-white rounded-md text-sm font-medium hover:bg-pink-700 feature-btn"> | |
| En savoir plus | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Domain Registration Process --> | |
| <div class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Enregistrez votre domaine <span class="text-gradient">gratuitement</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes. | |
| </p> | |
| </div> | |
| <!-- Process Steps --> | |
| <div class="mt-16"> | |
| <div class="relative"> | |
| <!-- Progress Bar --> | |
| <div class="hidden sm:block"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 flex items-center" aria-hidden="true"> | |
| <div class="h-1 w-full bg-gray-200 rounded-full"></div> | |
| </div> | |
| <div class="relative flex justify-between"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-600"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-600"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-600"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-600"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Steps Content --> | |
| <div class="mt-8 sm:mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-4"> | |
| <!-- Step 1 --> | |
| <div class="card-hover bg-white p-6 rounded-lg shadow-sm border border-gray-100 text-center"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-100 text-indigo-600 mx-auto"> | |
| <span class="text-lg font-bold">1</span> | |
| </div> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Recherche</h3> | |
| <p class="mt-2 text-sm text-gray-500"> | |
| Trouvez le domaine parfait parmi 500+ extensions | |
| </p> | |
| <div class="mt-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| Instantané | |
| </span> | |
| </div> | |
| <button class="mt-4 px-3 py-1 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 step-btn"> | |
| Commencer | |
| </button> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="card-hover bg-white p-6 rounded-lg shadow-sm border border-gray-100 text-center"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-100 text-indigo-600 mx-auto"> | |
| <span class="text-lg font-bold">2</span> | |
| </div> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Enregistrement</h3> | |
| <p class="mt-2 text-sm text-gray-500"> | |
| Réservation sécurisée avec WHOIS protection | |
| </p> | |
| <div class="mt-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| Automatisé | |
| </span> | |
| </div> | |
| <button class="mt-4 px-3 py-1 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 step-btn"> | |
| S'enregistrer | |
| </button> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="card-hover bg-white p-6 rounded-lg shadow-sm border border-gray-100 text-center"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-100 text-indigo-600 mx-auto"> | |
| <span class="text-lg font-bold">3</span> | |
| </div> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Configuration</h3> | |
| <p class="mt-2 text-sm text-gray-500"> | |
| DNS, SSL et intégrations configurés automatiquement | |
| </p> | |
| <div class="mt-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| 3.7s | |
| </span> | |
| </div> | |
| <button class="mt-4 px-3 py-1 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 step-btn"> | |
| Configurer | |
| </button> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="card-hover bg-white p-6 rounded-lg shadow-sm border border-gray-100 text-center"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-100 text-indigo-600 mx-auto"> | |
| <span class="text-lg font-bold">4</span> | |
| </div> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Hébergement</h3> | |
| <p class="mt-2 text-sm text-gray-500"> | |
| Site en ligne avec hébergement haute performance | |
| </p> | |
| <div class="mt-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| Gratuit 1 an | |
| </span> | |
| </div> | |
| <button class="mt-4 px-3 py-1 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 step-btn"> | |
| Démarrer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <button class="pulse-animation px-8 py-4 bg-indigo-600 text-white rounded-lg text-lg font-bold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 free-trial-btn"> | |
| <i class="fas fa-play-circle mr-2"></i> Essai gratuit 14 jours | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Admin Dashboard Section --> | |
| <div class="py-16 bg-white" id="admin-dashboard"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| <span class="text-gradient">Tableau de Bord</span> Administrateur | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Accès exclusif pour la gestion complète de votre infrastructure. | |
| </p> | |
| </div> | |
| <!-- Admin Login --> | |
| <div class="mt-12 max-w-md mx-auto bg-gray-50 rounded-xl shadow-md overflow-hidden"> | |
| <div class="gradient-bg px-6 py-4"> | |
| <h3 class="text-lg font-medium text-white">Connexion Administrateur</h3> | |
| </div> | |
| <div class="p-6"> | |
| <form id="admin-login-form"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email Admin</label> | |
| <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" value="vgp.bavol@gmail.com" readonly> | |
| </div> | |
| <div class="mt-4"> | |
| <label for="password" class="block text-sm font-medium text-gray-700">Mot de passe</label> | |
| <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" value="Admin270574@"> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 admin-login-btn"> | |
| <i class="fas fa-sign-in-alt mr-2"></i> Se connecter | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Dashboard Preview --> | |
| <div class="mt-16 bg-gray-900 rounded-xl overflow-hidden shadow-xl hidden" id="dashboard-preview"> | |
| <!-- Dashboard Header --> | |
| <div class="bg-gray-800 px-6 py-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield-alt text-indigo-500 mr-3"></i> | |
| <span class="text-white font-medium">Tableau de Bord Admin</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| <i class="fas fa-circle text-green-500 mr-1"></i> Connecté | |
| </span> | |
| <button class="text-gray-400 hover:text-white notification-btn"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 notification-dot hidden"></span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Dashboard Content --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 p-6"> | |
| <!-- Stats Card 1 --> | |
| <div class="bg-gray-800 rounded-lg p-4 shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-globe text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-400">Domaines Actifs</h3> | |
| <p class="text-2xl font-semibold text-white">12</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-1 w-full bg-gray-700 rounded-full"> | |
| <div class="h-1 bg-indigo-500 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <p class="mt-1 text-xs text-gray-400">75% de votre quota</p> | |
| </div> | |
| <button class="mt-3 w-full px-2 py-1 bg-gray-700 text-indigo-400 text-xs font-medium rounded hover:bg-gray-600 dashboard-btn"> | |
| <i class="fas fa-plus mr-1"></i> Ajouter | |
| </button> | |
| </div> | |
| <!-- Stats Card 2 --> | |
| <div class="bg-gray-800 rounded-lg p-4 shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-lock text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-400">Certificats SSL</h3> | |
| <p class="text-2xl font-semibold text-white">8</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-1 w-full bg-gray-700 rounded-full"> | |
| <div class="h-1 bg-green-500 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <p class="mt-1 text-xs text-gray-400">Tous actifs</p> | |
| </div> | |
| <button class="mt-3 w-full px-2 py-1 bg-gray-700 text-green-400 text-xs font-medium rounded hover:bg-gray-600 dashboard-btn"> | |
| <i class="fas fa-sync-alt mr-1"></i> Renouveler | |
| </button> | |
| </div> | |
| <!-- Stats Card 3 --> | |
| <div class="bg-gray-800 rounded-lg p-4 shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-tachometer-alt text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-400">Performance DNS</h3> | |
| <p class="text-2xl font-semibold text-white">3.2s</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-1 w-full bg-gray-700 rounded-full"> | |
| <div class="h-1 bg-purple-500 rounded-full" style="width: 90%"></div> | |
| </div> | |
| <p class="mt-1 text-xs text-gray-400">Moyenne mondiale</p> | |
| </div> | |
| <button class="mt-3 w-full px-2 py-1 bg-gray-700 text-purple-400 text-xs font-medium rounded hover:bg-gray-600 dashboard-btn"> | |
| <i class="fas fa-chart-line mr-1"></i> Statistiques | |
| </button> | |
| </div> | |
| <!-- Stats Card 4 --> | |
| <div class="bg-gray-800 rounded-lg p-4 shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-pink-500 rounded-md p-3"> | |
| <i class="fab fa-google text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-400">Intégrations</h3> | |
| <p class="text-2xl font-semibold text-white">5</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-1 w-full bg-gray-700 rounded-full"> | |
| <div class="h-1 bg-pink-500 rounded-full" style="width: 50%"></div> | |
| </div> | |
| <p class="mt-1 text-xs text-gray-400">2 configurations requises</p> | |
| </div> | |
| <button class="mt-3 w-full px-2 py-1 bg-gray-700 text-pink-400 text-xs font-medium rounded hover:bg-gray-600 dashboard-btn"> | |
| <i class="fas fa-cog mr-1"></i> Configurer | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Domain Management --> | |
| <div class="px-6 pb-6"> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-white">Gestion des Domaines</h3> | |
| <button class="px-3 py-1 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 add-domain-btn"> | |
| <i class="fas fa-plus mr-1"></i> Ajouter | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-700"> | |
| <thead class="bg-gray-800"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Domaine</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Expiration</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">SSL</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">DNS</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-gray-800 divide-y divide-gray-700"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">doctorblog.fr</div> | |
| <div class="text-sm text-gray-400">vgp.bavol@gmail.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| 2024-06-15 | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400"> | |
| <span class="text-green-500">●</span> Actif (3.2s) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-indigo-400 hover:text-indigo-300 mr-3 domain-config-btn"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button class="text-red-400 hover:text-red-300 domain-delete-btn"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">monbusiness.com</div> | |
| <div class="text-sm text-gray-400">doctorblog.fr@gmail.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| 2023-12-01 | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400"> | |
| <span class="text-green-500">●</span> Actif (2.8s) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-indigo-400 hover:text-indigo-300 mr-3 domain-config-btn"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button class="text-red-400 hover:text-red-300 domain-delete-btn"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Section --> | |
| <div class="px-6 pb-6"> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-700"> | |
| <h3 class="text-lg font-medium text-white">Paiements & Facturation</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Payment Methods --> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <h4 class="text-md font-medium text-white mb-4">Méthodes de Paiement</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-gray-600 rounded-lg payment-method active" data-method="paypal"> | |
| <div class="flex items-center"> | |
| <div class="bg-white p-2 rounded-md"> | |
| <i class="fab fa-cc-paypal text-blue-500 text-xl"></i> | |
| </div> | |
| <span class="ml-3 text-white">PayPal</span> | |
| </div> | |
| <button class="text-green-400 hover:text-green-300 payment-select-btn"> | |
| <i class="fas fa-check-circle"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-600 rounded-lg payment-method" data-method="stripe"> | |
| <div class="flex items-center"> | |
| <div class="bg-white p-2 rounded-md"> | |
| <i class="fab fa-cc-stripe text-purple-500 text-xl"></i> | |
| </div> | |
| <span class="ml-3 text-white">Stripe</span> | |
| </div> | |
| <button class="text-green-400 hover:text-green-300 payment-select-btn"> | |
| <i class="fas fa-check-circle"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-600 rounded-lg payment-method" data-method="card"> | |
| <div class="flex items-center"> | |
| <div class="bg-white p-2 rounded-md"> | |
| <i class="fas fa-credit-card text-gray-500 text-xl"></i> | |
| </div> | |
| <span class="ml-3 text-white">Carte Bancaire</span> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-300 payment-select-btn"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cart --> | |
| <div class="bg-gray-700 rounded-lg p-4 md:col-span-2"> | |
| <h4 class="text-md font-medium text-white mb-4">Panier d'Achat</h4> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center p-3 bg-gray-600 rounded-lg"> | |
| <div> | |
| <p class="text-white">Enregistrement de domaine (doctorblog.fr)</p> | |
| <p class="text-sm text-gray-400">1 an - Renouvellement automatique</p> | |
| </div> | |
| <span class="text-white font-medium">9.99€</span> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-gray-600 rounded-lg"> | |
| <div> | |
| <p class="text-white">Certificat SSL Premium</p> | |
| <p class="text-sm text-gray-400">Valide 1 an - Installation automatique</p> | |
| </div> | |
| <span class="text-white font-medium">0.00€</span> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-gray-600 rounded-lg"> | |
| <div> | |
| <p class="text-white">Hébergement PRO (1 an)</p> | |
| <p class="text-sm text-gray-400">50GB stockage - Bande passante illimitée</p> | |
| </div> | |
| <span class="text-white font-medium">59.99€</span> | |
| </div> | |
| <div class="border-t border-gray-600 pt-4 mt-4"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Total HT</span> | |
| <span class="text-white">69.98€</span> | |
| </div> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-gray-400">TVA (20%)</span> | |
| <span class="text-white">13.99€</span> | |
| </div> | |
| <div class="flex justify-between mt-4 font-bold"> | |
| <span class="text-white">Total TTC</span> | |
| <span class="text-white text-xl">83.97€</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-2 gap-4"> | |
| <button class="flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 paypal-btn"> | |
| <i class="fab fa-cc-paypal mr-2"></i> PayPal | |
| </button> | |
| <button class="flex items-center justify-center px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 stripe-btn"> | |
| <i class="fab fa-cc-stripe mr-2"></i> Stripe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-indigo-700"> | |
| <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Prêt à lancer votre présence en ligne ?</span> | |
| <span class="block">Commencez gratuitement dès aujourd'hui.</span> | |
| </h2> | |
| <p class="mt-4 text-lg leading-6 text-indigo-200"> | |
| Essayez notre plateforme pendant 14 jours sans engagement. Aucune carte de crédit requise. | |
| </p> | |
| <button class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto cta-btn"> | |
| <i class="fas fa-play-circle mr-2"></i> Essai gratuit | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> | |
| Produit | |
| </h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Domaines | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Hébergement | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Certificats SSL | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| DNS Premium | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> | |
| Ressources | |
| </h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Documentation | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Tutoriels | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Statut des services | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Support | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> | |
| Entreprise | |
| </h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| À propos | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Carrières | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Presse | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Contact | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase"> | |
| Légal | |
| </h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Confidentialité | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Conditions | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| Cookies | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-300 hover:text-white footer-link"> | |
| RGPD | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-300 social-link"> | |
| <span class="sr-only">Facebook</span> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300 social-link"> | |
| <span class="sr-only">Twitter</span> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300 social-link"> | |
| <span class="sr-only">Instagram</span> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300 social-link"> | |
| <span class="sr-only">LinkedIn</span> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 md:mt-0 text-base text-gray-400"> | |
| © 2023 1CLICK PRO. Tous droits réservés. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Elements --> | |
| <div class="fixed bottom-6 right-6 z-50"> | |
| <button class="pulse-animation p-4 bg-indigo-600 text-white rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 chat-btn"> | |
| <i class="fas fa-comment-dots text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="fixed top-1/4 left-10 z-40 floating hidden md:block"> | |
| <div class="bg-white p-4 rounded-lg shadow-xl w-64 notification-box"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-100 p-2 rounded-full"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Domaine enregistré!</p> | |
| <p class="text-xs text-gray-500">doctorblog.fr activé</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fixed top-1/3 right-10 z-40 floating hidden md:block"> | |
| <div class="bg-indigo-600 p-4 rounded-lg shadow-xl w-64"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white p-2 rounded-full text-indigo-600"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-white">DNS propagé en 3.2s</p> | |
| <p class="text-xs text-indigo-200">Moyenne mondiale</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Widget --> | |
| <div class="fixed bottom-24 right-6 z-50 hidden" id="chat-widget"> | |
| <div class="bg-white rounded-lg shadow-xl w-80 overflow-hidden"> | |
| <div class="bg-indigo-600 px-4 py-3 flex justify-between items-center"> | |
| <h3 class="text-white font-medium">Support en direct</h3> | |
| <button class="text-white hover:text-indigo-200 chat-close-btn"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto chat-messages"> | |
| <div class="mb-4"> | |
| <div class="bg-gray-100 rounded-lg p-3 max-w-xs"> | |
| <p class="text-sm">Bonjour! Comment pouvons-nous vous aider aujourd'hui?</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Support, il y a 1 minute</p> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 border-t border-gray-200"> | |
| <div class="flex"> | |
| <input type="text" class="flex-1 border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="Tapez votre message..."> | |
| <button class="bg-indigo-600 text-white px-3 py-2 rounded-r-md hover:bg-indigo-700 chat-send-btn"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| mobileMenuBtn.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Navigation links | |
| const navLinks = document.querySelectorAll('.nav-link, .nav-link-mobile'); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| navLinks.forEach(l => l.classList.remove('active', 'border-indigo-500', 'text-gray-900', 'bg-indigo-50')); | |
| this.classList.add('active', 'border-indigo-500', 'text-gray-900', 'bg-indigo-50'); | |
| // Scroll to section | |
| const target = this.getAttribute('href'); | |
| if (target && target !== '#') { | |
| document.querySelector(target).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // All buttons with click effects | |
| const buttons = document.querySelectorAll('button:not([disabled]), .btn, .feature-btn, .step-btn, .free-trial-btn, .login-btn, .register-btn, .admin-login-btn, .dashboard-btn, .domain-config-btn, .domain-delete-btn, .add-domain-btn, .payment-select-btn, .paypal-btn, .stripe-btn, .cta-btn, .chat-btn, .chat-close-btn, .chat-send-btn, .notification-btn'); | |
| buttons.forEach(button => { | |
| // Add active state on click | |
| button.addEventListener('mousedown', function() { | |
| this.classList.add('button-active'); | |
| }); | |
| button.addEventListener('mouseup', function() { | |
| this.classList.remove('button-active'); | |
| }); | |
| button.addEventListener('mouseleave', function() { | |
| this.classList.remove('button-active'); | |
| }); | |
| // Add loading state for important buttons | |
| if (button.classList.contains('admin-login-btn') || | |
| button.classList.contains('paypal-btn') || | |
| button.classList.contains('stripe-btn') || | |
| button.classList.contains('cta-btn') || | |
| button.classList.contains('domain-check-btn')) { | |
| button.addEventListener('click', function(e) { | |
| if (this.classList.contains('button-loading')) return; | |
| e.preventDefault(); | |
| const originalContent = this.innerHTML; | |
| this.classList.add('button-loading'); | |
| // Simulate async action | |
| setTimeout(() => { | |
| this.classList.remove('button-loading'); | |
| this.innerHTML = originalContent; | |
| // Special actions for specific buttons | |
| if (this.classList.contains('admin-login-btn')) { | |
| document.getElementById('dashboard-preview').classList.remove('hidden'); | |
| document.getElementById('dashboard-preview').classList.add('fade-in'); | |
| window.scrollTo({ | |
| top: document.getElementById('admin-dashboard').offsetTop, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| if (this.classList.contains('domain-check-btn')) { | |
| const input = document.getElementById('domain-search-input'); | |
| if (input.value.trim() !== '') { | |
| const notification = document.querySelector('.notification-box'); | |
| notification.querySelector('p.text-gray-900').textContent = 'Domaine disponible!'; | |
| notification.querySelector('p.text-gray-500').textContent = input.value + ' peut être enregistré'; | |
| notification.classList.remove('hidden'); | |
| setTimeout(() => { | |
| notification.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| } | |
| if (this.classList.contains('paypal-btn') || this.classList.contains('stripe-btn')) { | |
| document.querySelector('.notification-dot').classList.remove('hidden'); | |
| const notification = document.querySelector('.notification-box'); | |
| notification.querySelector('p.text-gray-900').textContent = 'Paiement accepté!'; | |
| notification.querySelector('p.text-gray-500').textContent = 'Votre commande est complète'; | |
| notification.classList.remove('hidden'); | |
| setTimeout(() => { | |
| notification.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| }, 1500); | |
| }); | |
| } | |
| }); | |
| // Payment method selection | |
| const paymentMethods = document.querySelectorAll('.payment-method'); | |
| paymentMethods.forEach(method => { | |
| method.addEventListener('click', function() { | |
| paymentMethods.forEach(m => m.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Chat widget | |
| const chatBtn = document.querySelector('.chat-btn'); | |
| const chatWidget = document.getElementById('chat-widget'); | |
| const chatCloseBtn = document.querySelector('.chat-close-btn'); | |
| chatBtn.addEventListener('click', function() { | |
| chatWidget.classList.toggle('hidden'); | |
| chatWidget.classList.add('fade-in'); | |
| }); | |
| chatCloseBtn.addEventListener('click', function() { | |
| chatWidget.classList.add('hidden'); | |
| }); | |
| // Send chat message | |
| const chatSendBtn = document.querySelector('.chat-send-btn'); | |
| const chatInput = document.querySelector('.chat-messages + div input'); | |
| chatSendBtn.addEventListener('click', function() { | |
| if (chatInput.value.trim() !== '') { | |
| const messagesContainer = document.querySelector('.chat-messages'); | |
| const newMessage = document.createElement('div'); | |
| newMessage.className = 'mb-4 text-right'; | |
| newMessage.innerHTML = ` | |
| <div class="bg-indigo-100 rounded-lg p-3 inline-block"> | |
| <p class="text-sm">${chatInput.value}</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Vous, à l'instant</p> | |
| `; | |
| messagesContainer.appendChild(newMessage); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| chatInput.value = ''; | |
| // Simulate reply | |
| setTimeout(() => { | |
| const replyMessage = document.createElement('div'); | |
| replyMessage.className = 'mb-4'; | |
| replyMessage.innerHTML = ` | |
| <div class="bg-gray-100 rounded-lg p-3 max-w-xs"> | |
| <p class="text-sm">Merci pour votre message! Un agent vous répondra sous peu.</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Support, à l'instant</p> | |
| `; | |
| messagesContainer.appendChild(replyMessage); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| }, 1000); | |
| } | |
| }); | |
| // Enter key in chat | |
| chatInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| chatSendBtn.click(); | |
| } | |
| }); | |
| // Notification dot | |
| const notificationBtn = document.querySelector('.notification-btn'); | |
| const notificationDot = document.querySelector('.notification-dot'); | |
| notificationBtn.addEventListener('click', function() { | |
| notificationDot.classList.add('hidden'); | |
| }); | |
| // Feature buttons | |
| const featureButtons = document.querySelectorAll('.feature-btn'); | |
| featureButtons.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const featureCard = this.closest('.feature-card'); | |
| featureCard.querySelector('p.text-base').textContent = 'Chargement des détails...'; | |
| this.classList.add('button-loading'); | |
| setTimeout(() => { | |
| this.classList.remove('button-loading'); | |
| featureCard.querySelector('p.text-base').textContent = 'Détails chargés avec succès!'; | |
| this.textContent = 'Voir détails'; | |
| }, 1000); | |
| }); | |
| }); | |
| // Domain check button | |
| const domainCheckBtn = document.querySelector('.domain-check-btn'); | |
| domainCheckBtn.addEventListener('click', function() { | |
| const input = document.getElementById('domain-search-input'); | |
| if (input.value.trim() === '') { | |
| input.focus(); | |
| return; | |
| } | |
| this.classList.add('button-loading'); | |
| setTimeout(() => { | |
| this.classList.remove('button-loading'); | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Disponible!'; | |
| this.classList.remove('bg-indigo-600'); | |
| this.classList.add('bg-green-600'); | |
| setTimeout(() => { | |
| this.innerHTML = '<i class="fas fa-search mr-2"></i> Vérifier'; | |
| this.classList.remove('bg-green-600'); | |
| this.classList.add('bg-indigo-600'); | |
| }, 3000); | |
| }, 1500); | |
| }); | |
| // Free trial button | |
| const freeTrialBtn = document.querySelector('.free-trial-btn'); | |
| freeTrialBtn.addEventListener('click', function() { | |
| this.classList.add('button-loading'); | |
| setTimeout(() => { | |
| this.classList.remove('button-loading'); | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Essai démarré!'; | |
| const notification = document.querySelector('.notification-box'); | |
| notification.querySelector('p.text-gray-900').textContent = 'Essai gratuit activé!'; | |
| notification.querySelector('p.text-gray-500').textContent = '14 jours d\'essai commencés'; | |
| notification.classList.remove('hidden'); | |
| setTimeout(() => { | |
| notification.classList.add('hidden'); | |
| }, 3000); | |
| }, 1500); | |
| }); | |
| // CTA button | |
| const ctaBtn = document.querySelector('.cta-btn'); | |
| ctaBtn.addEventListener('click', function() { | |
| this.classList.add('button-loading'); | |
| setTimeout(() => { | |
| this.classList.remove('button-loading'); | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Essai démarré!'; | |
| // Scroll to top | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }, 1500); | |
| }); | |
| // Add domain button | |
| const addDomainBtn = document.querySelector('.add-domain-btn'); | |
| if (addDomainBtn) { | |
| addDomainBtn.addEventListener('click', function() { | |
| this.classList.add('button-loading'); | |
| setTimeout(() => { | |
| this.classList.remove('button-loading'); | |
| // Add new domain to table | |
| const tableBody = document.querySelector('tbody'); | |
| const newRow = document.createElement('tr'); | |
| newRow.className = 'fade-in'; | |
| newRow.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">nouveaudomaine.fr</div> | |
| <div class="text-sm text-gray-400">vgp.bavol@gmail.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| ${new Date().getFullYear() + 1}-${(new Date().getMonth() + 1).toString().padStart(2, '0')}-${new Date().getDate().toString().padStart(2, '0')} | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400"> | |
| <span class="text-green-500">●</span> Actif (3.1s) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-indigo-400 hover:text-indigo-300 mr-3 domain-config-btn"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button class="text-red-400 hover:text-red-300 domain-delete-btn"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| `; | |
| tableBody.prepend(newRow); | |
| // Update domains count | |
| const domainsCount = document.querySelector('.bg-gray-800.rounded-lg.shadow .text-2xl'); | |
| if (domainsCount) { | |
| domainsCount.textContent = parseInt(domainsCount.textContent) + 1; | |
| } | |
| // Show notification | |
| const notification = document.querySelector('.notification-box'); | |
| notification.querySelector('p.text-gray-900').textContent = 'Domaine ajouté!'; | |
| notification.querySelector('p.text-gray-500').textContent = 'nouveaudomaine.fr activé'; | |
| notification.classList.remove('hidden'); | |
| setTimeout(() => { | |
| notification.classList.add('hidden'); | |
| }, 3000); | |
| }, 1000); | |
| }); | |
| } | |
| // Domain delete buttons | |
| const domainDeleteBtns = document.querySelectorAll('.domain-delete-btn'); | |
| domainDeleteBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const row = this.closest('tr'); | |
| row.classList.add('opacity-50'); | |
| setTimeout(() => { | |
| row.remove(); | |
| // Update domains count | |
| const domainsCount = document.querySelector('.bg-gray-800.rounded-lg.shadow .text-2xl'); | |
| if (domainsCount) { | |
| domainsCount.textContent = parseInt(domainsCount.textContent) - 1; | |
| } | |
| // Show notification | |
| const notification = document.querySelector('.notification-box'); | |
| notification.querySelector('p.text-gray-900').textContent = 'Domaine supprimé!'; | |
| notification.querySelector('p.text-gray-500').textContent = 'Opération réussie'; | |
| notification.classList.remove('hidden'); | |
| setTimeout(() => { | |
| notification.classList.add('hidden'); | |
| }, 3000); | |
| }, 500); | |
| }); | |
| }); | |
| // Domain config buttons | |
| const domainConfigBtns = document.querySelectorAll('.domain-config-btn'); | |
| domainConfigBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const domainName = this.closest('tr').querySelector('.text-sm.font-medium').textContent; | |
| // Show notification | |
| const notification = document.querySelector('.notification-box'); | |
| notification.querySelector('p.text-gray-900').textContent = 'Configuration ouverte'; | |
| notification.querySelector('p.text-gray-500').textContent = `Pour ${domainName}`; | |
| notification.classList.remove('hidden'); | |
| setTimeout(() => { | |
| notification.classList.add('hidden'); | |
| }, 3000); | |
| }); | |
| }); | |
| // Social links | |
| const socialLinks = document.querySelectorAll('.social-link'); | |
| socialLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Show notification | |
| const notification = document.querySelector('.notification-box'); | |
| notification.querySelector('p.text-gray-900').textContent = 'Réseau social ouvert'; | |
| notification.querySelector('p.text-gray-500').textContent = 'Ouverture dans un nouvel onglet'; | |
| notification.classList.remove('hidden'); | |
| setTimeout(() => { | |
| notification.classList.add('hidden'); | |
| }, 3000); | |
| }); | |
| }); | |
| // Footer links | |
| const footerLinks = document.querySelectorAll('.footer-link'); | |
| footerLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Show notification | |
| const notification = document.querySelector('.notification-box'); | |
| notification.querySelector('p.text-gray-900').textContent = 'Navigation'; | |
| notification.querySelector('p.text-gray-500').textContent = this.textContent.trim() + ' sélectionné'; | |
| notification.classList.remove('hidden'); | |
| setTimeout(() => { | |
| notification.classList.add('hidden'); | |
| }, 3000); | |
| }); | |
| }); | |
| }); | |
| </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/ultradns-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |