Add 2 files

index.html

@@ -6,6 +6,7 @@
     <title>DOMAIBOT PRO - Enregistrement Automatisé 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">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <script>
         tailwind.config = {
             theme: {
@@ -33,17 +34,49 @@
                     fontFamily: {
                         sans: ['Inter', 'sans-serif'],
                     },
+                    animation: {
+                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'bounce-slow': 'bounce 2s infinite',
+                        'spin-slow': 'spin 6s linear infinite',
+                        'float': 'float 6s ease-in-out infinite',
+                        'wave': 'wave 1.5s linear infinite',
+                        'fade-in': 'fadeIn 0.5s ease-in',
+                        'slide-up': 'slideUp 0.5s ease-out',
+                        'glow': 'glow 2s ease-in-out infinite alternate',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0px)' },
+                            '50%': { transform: 'translateY(-15px)' },
+                        },
+                        wave: {
+                            '0%': { transform: 'rotate(0deg)' },
+                            '10%': { transform: 'rotate(14deg)' },
+                            '20%': { transform: 'rotate(-8deg)' },
+                            '30%': { transform: 'rotate(14deg)' },
+                            '40%': { transform: 'rotate(-4deg)' },
+                            '50%': { transform: 'rotate(10deg)' },
+                            '60%': { transform: 'rotate(0deg)' },
+                            '100%': { transform: 'rotate(0deg)' },
+                        },
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        },
+                        slideUp: {
+                            '0%': { transform: 'translateY(20px)', opacity: '0' },
+                            '100%': { transform: 'translateY(0)', opacity: '1' },
+                        },
+                        glow: {
+                            '0%': { boxShadow: '0 0 5px rgba(14, 165, 233, 0.5)' },
+                            '100%': { boxShadow: '0 0 20px rgba(14, 165, 233, 0.8)' },
+                        }
+                    }
                 }
             }
         }
     </script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-        
-        body {
-            font-family: 'Inter', sans-serif;
-        }
-        
         .gradient-bg {
             background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
         }
@@ -61,93 +94,122 @@
         }
         
         .domain-card:hover {
-            transform: translateY(-8px);
+            transform: translateY(-8px) scale(1.02);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
         
-        .glow-effect {
-            box-shadow: 0 0 15px rgba(14, 165, 233, 0.3);
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1.5rem;
+        }
+        
+        .hover-scale {
+            transition: transform 0.3s ease;
         }
         
-        .glow-effect:hover {
-            box-shadow: 0 0 25px rgba(14, 165, 233, 0.5);
+        .hover-scale:hover {
+            transform: scale(1.05);
         }
         
-        .ai-pulse {
-            animation: pulse 2s infinite;
+        .pulse-once {
+            animation: pulse 0.5s ease;
         }
         
         @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
         }
         
-        .floating {
-            animation: floating 6s ease-in-out infinite;
+        .ripple {
+            position: relative;
+            overflow: hidden;
         }
         
-        @keyframes floating {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-15px); }
-            100% { transform: translateY(0px); }
+        .ripple:after {
+            content: "";
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
+            background-repeat: no-repeat;
+            background-position: 50%;
+            transform: scale(10, 10);
+            opacity: 0;
+            transition: transform .5s, opacity 1s;
         }
         
-        .glass-effect {
-            background: rgba(255, 255, 255, 0.08);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+        .ripple:active:after {
+            transform: scale(0, 0);
+            opacity: .3;
+            transition: 0s;
         }
         
-        .dashboard-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 1.5rem;
+        .rotate-3d:hover {
+            transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
+            transition: transform 0.5s ease;
+        }
+        
+        .text-wave {
+            display: inline-block;
+            animation: wave 2s ease infinite;
         }
     </style>
 </head>
-<body class="bg-gray-50 text-gray-800">
+<body class="bg-gray-50 text-gray-800 font-sans">
     <!-- Admin Access Only Banner -->
-    <div class="bg-yellow-500 text-white text-center py-2 px-4 font-medium">
+    <div class="bg-yellow-500 text-white text-center py-2 px-4 font-medium animate-pulse">
         <i class="fas fa-lock mr-2"></i> ACCÈS ADMINISTRATEUR UNIQUEMENT - Mode Super Admin Activé
     </div>
 
     <!-- Header -->
-    <header class="gradient-bg text-white sticky top-0 z-50">
+    <header class="gradient-bg text-white sticky top-0 z-50 shadow-lg">
         <div class="container mx-auto px-4 py-4">
             <div class="flex justify-between items-center">
-                <div class="flex items-center space-x-3">
-                    <div class="bg-white p-2 rounded-lg">
+                <div class="flex items-center space-x-3 hover-scale">
+                    <div class="bg-white p-2 rounded-lg animate-spin-slow">
                         <i class="fas fa-robot text-primary-600 text-2xl"></i>
                     </div>
-                    <h1 class="text-2xl font-bold">DOMAIBOT PRO</h1>
+                    <h1 class="text-2xl font-bold">DOMAIBOT <span class="gradient-text">PRO</span></h1>
                 </div>
                 <nav class="hidden md:flex space-x-8">
-                    <a href="#" class="hover:text-primary-200 transition flex items-center space-x-1">
-                        <i class="fas fa-tachometer-alt text-sm"></i>
-                        <span>Tableau de bord</span>
+                    <a href="#" class="hover:text-primary-200 transition flex items-center space-x-1 group">
+                        <i class="fas fa-tachometer-alt text-sm group-hover:animate-bounce"></i>
+                        <span class="group-hover:font-medium">Tableau de bord</span>
                     </a>
-                    <a href="#" class="hover:text-primary-200 transition flex items-center space-x-1">
-                        <i class="fas fa-globe text-sm"></i>
-                        <span>Domaines</span>
+                    <a href="#" class="hover:text-primary-200 transition flex items-center space-x-1 group">
+                        <i class="fas fa-globe text-sm group-hover:animate-bounce"></i>
+                        <span class="group-hover:font-medium">Domaines</span>
                     </a>
-                    <a href="#" class="hover:text-primary-200 transition flex items-center space-x-1">
-                        <i class="fas fa-server text-sm"></i>
-                        <span>DNS</span>
+                    <a href="#" class="hover:text-primary-200 transition flex items-center space-x-1 group">
+                        <i class="fas fa-server text-sm group-hover:animate-bounce"></i>
+                        <span class="group-hover:font-medium">DNS</span>
                     </a>
-                    <a href="#" class="hover:text-primary-200 transition flex items-center space-x-1">
-                        <i class="fas fa-chart-line text-sm"></i>
-                        <span>Analytics</span>
+                    <a href="#" class="hover:text-primary-200 transition flex items-center space-x-1 group">
+                        <i class="fas fa-chart-line text-sm group-hover:animate-bounce"></i>
+                        <span class="group-hover:font-medium">Analytics</span>
                     </a>
                 </nav>
                 <div class="flex items-center space-x-4">
-                    <div class="hidden md:flex items-center space-x-3 bg-white bg-opacity-20 px-4 py-2 rounded-lg">
-                        <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center overflow-hidden">
+                    <div class="hidden md:flex items-center space-x-3 bg-white bg-opacity-20 px-4 py-2 rounded-lg hover-scale">
+                        <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center overflow-hidden animate-float">
                             <i class="fas fa-user text-primary-600"></i>
                         </div>
                         <span class="font-medium">Admin</span>
                     </div>
-                    <button class="md:hidden text-2xl">
+                    <button class="md:hidden text-2xl hover:text-primary-200 transition">
                         <i class="fas fa-bars"></i>
                     </button>
                 </div>
@@ -156,77 +218,77 @@
     </header>
 
     <!-- Admin Dashboard -->
-    <div class="container mx-auto px-4 py-8">
+    <div class="container mx-auto px-4 py-8 animate-fade-in">
         <!-- Quick Stats -->
         <div class="dashboard-grid mb-8">
             <!-- Total Domains -->
-            <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-primary-500">
+            <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-primary-500 domain-card hover:animate-pulse">
                 <div class="flex justify-between items-start">
                     <div>
                         <p class="text-gray-500">Domaines enregistrés</p>
-                        <h3 class="text-3xl font-bold mt-2">1,248</h3>
+                        <h3 class="text-3xl font-bold mt-2 animate-pulse-slow">1,248</h3>
                     </div>
-                    <div class="bg-primary-100 p-3 rounded-lg">
+                    <div class="bg-primary-100 p-3 rounded-lg animate-bounce-slow">
                         <i class="fas fa-globe text-primary-600 text-xl"></i>
                     </div>
                 </div>
                 <div class="mt-4 pt-4 border-t border-gray-200 flex items-center">
                     <span class="text-green-500 text-sm font-medium flex items-center">
-                        <i class="fas fa-arrow-up mr-1"></i> 12% ce mois
+                        <i class="fas fa-arrow-up mr-1 animate-pulse"></i> 12% ce mois
                     </span>
                 </div>
             </div>
             
             <!-- SSL Certificates -->
-            <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-green-500">
+            <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-green-500 domain-card">
                 <div class="flex justify-between items-start">
                     <div>
                         <p class="text-gray-500">Certificats SSL</p>
                         <h3 class="text-3xl font-bold mt-2">1,042</h3>
                     </div>
-                    <div class="bg-green-100 p-3 rounded-lg">
+                    <div class="bg-green-100 p-3 rounded-lg animate-spin-slow">
                         <i class="fas fa-lock text-green-600 text-xl"></i>
                     </div>
                 </div>
                 <div class="mt-4 pt-4 border-t border-gray-200 flex items-center">
                     <span class="text-green-500 text-sm font-medium flex items-center">
-                        <i class="fas fa-check-circle mr-1"></i> 100% Actifs
+                        <i class="fas fa-check-circle mr-1 animate-pulse"></i> 100% Actifs
                     </span>
                 </div>
             </div>
             
             <!-- DNS Performance -->
-            <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500">
+            <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 domain-card">
                 <div class="flex justify-between items-start">
                     <div>
                         <p class="text-gray-500">Performance DNS</p>
-                        <h3 class="text-3xl font-bold mt-2">4ms</h3>
+                        <h3 class="text-3xl font-bold mt-2 animate-pulse">4ms</h3>
                     </div>
-                    <div class="bg-blue-100 p-3 rounded-lg">
+                    <div class="bg-blue-100 p-3 rounded-lg animate-pulse-slow">
                         <i class="fas fa-bolt text-blue-600 text-xl"></i>
                     </div>
                 </div>
                 <div class="mt-4 pt-4 border-t border-gray-200 flex items-center">
-                    <span classtext-green-500 text-sm font-medium flex items-center">
-                        <i class="fas fa-tachometer-alt mr-1"></i> Record mondial
+                    <span class="text-green-500 text-sm font-medium flex items-center">
+                        <i class="fas fa-tachometer-alt mr-1 animate-spin"></i> Record mondial
                     </span>
                 </div>
             </div>
             
             <!-- Revenue -->
-            <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-purple-500">
+            <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-purple-500 domain-card">
                 <div class="flex justify-between items-start">
                     <div>
                         <p class="text-gray-500">Revenu ce mois</p>
                         <h3 class="text-3xl font-bold mt-2">€24,850</h3>
                     </div>
-                    <div class="bg-purple-100 p-3 rounded-lg">
+                    <div class="bg-purple-100 p-3 rounded-lg animate-float">
                         <i class="fas fa-euro-sign text-purple-600 text-xl"></i>
                     </div>
                 </div>
                 <div class="mt-4 pt-4 border-t border-gray-200 flex items-center">
                     <span class="text-green-500 text-sm font-medium flex items-center">
-                        <i class="fas fa-arrow-up mr-1"></i> 18% vs dernier mois
+                        <i class="fas fa-arrow-up mr-1 animate-bounce"></i> 18% vs dernier mois
                     </span>
                 </div>
             </div>
@@ -237,12 +299,12 @@
             <!-- Left Column -->
             <div class="lg:w-2/3">
                 <!-- Domain Registration Panel -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
-                    <div class="gradient-bg text-white px-6 py-4 flex justify-between items-center">
+                <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 animate-slide-up">
+                    <div class="gradient-bg text-white px-6 py-4 flex justify-between items-center animate-pulse-slow">
                         <h2 class="text-xl font-bold">
-                            <i class="fas fa-bolt mr-2"></i> Enregistrement Instantané de Domaine
+                            <i class="fas fa-bolt mr-2 animate-glow"></i> Enregistrement Instantané de Domaine
                         </h2>
-                        <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-xs">
+                        <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-xs animate-pulse">
                             <i class="fas fa-infinity mr-1"></i> Automatisé 24/7
                         </span>
                     </div>
@@ -250,40 +312,41 @@
                         <div class="mb-6">
                             <div class="relative max-w-2xl mx-auto">
                                 <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
-                                    <i class="fas fa-globe text-gray-400"></i>
+                                    <i class="fas fa-globe text-gray-400 animate-spin-slow"></i>
                                 </div>
-                                <input type="text" placeholder="Entrez votre nom de domaine (ex: votredomaine.com)" class="w-full pl-12 pr-32 py-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-primary-500 shadow-lg">
-                                <button class="absolute right-2 top-2 bg-primary-600 text-white px-6 py-2 rounded-full hover:bg-primary-700 transition flex items-center">
+                                <input type="text" placeholder="Entrez votre nom de domaine (ex: votredomaine.com)" 
+                                       class="w-full pl-12 pr-32 py-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-primary-500 shadow-lg hover:shadow-xl transition">
+                                <button class="absolute right-2 top-2 bg-primary-600 text-white px-6 py-2 rounded-full hover:bg-primary-700 transition flex items-center ripple animate-glow">
                                     <i class="fas fa-magic mr-2"></i> Enregistrer
                                 </button>
                             </div>
                             <div class="mt-4 text-center text-sm text-gray-600">
-                                <i class="fas fa-info-circle mr-1"></i> Enregistrement instantané avec propagation DNS mondiale en 0.3s
+                                <i class="fas fa-info-circle mr-1 animate-pulse"></i> Enregistrement instantané avec propagation DNS mondiale en 0.3s
                             </div>
                         </div>
                         
                         <div class="grid md:grid-cols-3 gap-4">
-                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 hover-scale rotate-3d">
                                 <div class="flex items-center mb-2">
-                                    <div class="bg-green-100 p-2 rounded-full mr-3">
+                                    <div class="bg-green-100 p-2 rounded-full mr-3 animate-pulse-slow">
                                         <i class="fas fa-check text-green-600"></i>
                                     </div>
                                     <h4 class="font-medium">SSL Gratuit</h4>
                                 </div>
                                 <p class="text-sm text-gray-600">Certificat SSL délivré automatiquement avec Let's Encrypt</p>
                             </div>
-                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 hover-scale rotate-3d">
                                 <div class="flex items-center mb-2">
-                                    <div class="bg-blue-100 p-2 rounded-full mr-3">
+                                    <div class="bg-blue-100 p-2 rounded-full mr-3 animate-spin-slow">
                                         <i class="fas fa-bolt text-blue-600"></i>
                                     </div>
                                     <h4 class="font-medium">DNS Ultra-Rapide</h4>
                                 </div>
                                 <p class="text-sm text-gray-600">Réseau Anycast global avec résolution en 4ms</p>
                             </div>
-                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 hover-scale rotate-3d">
                                 <div class="flex items-center mb-2">
-                                    <div class="bg-purple-100 p-2 rounded-full mr-3">
+                                    <div class="bg-purple-100 p-2 rounded-full mr-3 animate-float">
                                         <i class="fas fa-robot text-purple-600"></i>
                                     </div>
                                     <h4 class="font-medium">SEO Automatisé</h4>
@@ -295,72 +358,72 @@
                 </div>
                 
                 <!-- Recent Domains -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="bg-white rounded-xl shadow-md overflow-hidden animate-slide-up">
                     <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
                         <h2 class="text-xl font-bold">
-                            <i class="fas fa-clock mr-2"></i> Derniers Domaines Enregistrés
+                            <i class="fas fa-clock mr-2 animate-spin-slow"></i> Derniers Domaines Enregistrés
                         </h2>
-                        <a href="#" class="text-primary-600 text-sm font-medium">Voir tout</a>
+                        <a href="#" class="text-primary-600 text-sm font-medium hover:underline">Voir tout</a>
                     </div>
                     <div class="divide-y divide-gray-200">
                         <!-- Domain 1 -->
-                        <div class="p-4 hover:bg-gray-50 transition flex items-center justify-between">
+                        <div class="p-4 hover:bg-gray-50 transition flex items-center justify-between group">
                             <div class="flex items-center space-x-4">
-                                <div class="bg-primary-100 p-3 rounded-lg">
+                                <div class="bg-primary-100 p-3 rounded-lg group-hover:animate-pulse">
                                     <i class="fas fa-globe text-primary-600"></i>
                                 </div>
                                 <div>
-                                    <h4 class="font-medium">techinnov.io</h4>
+                                    <h4 class="font-medium group-hover:text-primary-600">techinnov.io</h4>
                                     <p class="text-sm text-gray-600">Enregistré il y a 2 minutes</p>
                                 </div>
                             </div>
                             <div class="flex items-center space-x-4">
-                                <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">
+                                <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium animate-pulse-slow">
                                     <i class="fas fa-check mr-1"></i> Actif
                                 </span>
-                                <button class="text-primary-600 hover:text-primary-800">
+                                <button class="text-primary-600 hover:text-primary-800 hover:animate-spin">
                                     <i class="fas fa-ellipsis-v"></i>
                                 </button>
                             </div>
                         </div>
                         
                         <!-- Domain 2 -->
-                        <div class="p-4 hover:bg-gray-50 transition flex items-center justify-between">
+                        <div class="p-4 hover:bg-gray-50 transition flex items-center justify-between group">
                             <div class="flex items-center space-x-4">
-                                <div class="bg-primary-100 p-3 rounded-lg">
+                                <div class="bg-primary-100 p-3 rounded-lg group-hover:animate-pulse">
                                     <i class="fas fa-globe text-primary-600"></i>
                                 </div>
                                 <div>
-                                    <h4 class="font-medium">digitalfuture.ai</h4>
+                                    <h4 class="font-medium group-hover:text-primary-600">digitalfuture.ai</h4>
                                     <p class="text-sm text-gray-600">Enregistré il y a 15 minutes</p>
                                 </div>
                             </div>
                             <div class="flex items-center space-x-4">
-                                <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs font-medium">
+                                <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs font-medium animate-pulse">
                                     <i class="fas fa-sync-alt mr-1"></i> Propagation
                                 </span>
-                                <button class="text-primary-600 hover:text-primary-800">
+                                <button class="text-primary-600 hover:text-primary-800 hover:animate-spin">
                                     <i class="fas fa-ellipsis-v"></i>
                                 </button>
                             </div>
                         </div>
                         
                         <!-- Domain 3 -->
-                        <div class="p-4 hover:bg-gray-50 transition flex items-center justify-between">
+                        <div class="p-4 hover:bg-gray-50 transition flex items-center justify-between group">
                             <div class="flex items-center space-x-4">
-                                <div class="bg-primary-100 p-3 rounded-lg">
+                                <div class="bg-primary-100 p-3 rounded-lg group-hover:animate-pulse">
                                     <i class="fas fa-globe text-primary-600"></i>
                                 </div>
                                 <div>
-                                    <h4 class="font-medium">smartapp.dev</h4>
+                                    <h4 class="font-medium group-hover:text-primary-600">smartapp.dev</h4>
                                     <p class="text-sm text-gray-600">Enregistré il y a 1 heure</p>
                                 </div>
                             </div>
                             <div class="flex items-center space-x-4">
-                                <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">
+                                <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium animate-pulse-slow">
                                     <i class="fas fa-lock mr-1"></i> SSL Actif
                                 </span>
-                                <button class="text-primary-600 hover:text-primary-800">
+                                <button class="text-primary-600 hover:text-primary-800 hover:animate-spin">
                                     <i class="fas fa-ellipsis-v"></i>
                                 </button>
                             </div>
@@ -372,33 +435,33 @@
             <!-- Right Column -->
             <div class="lg:w-1/3">
                 <!-- Admin Access Panel -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
-                    <div class="gradient-bg text-white px-6 py-4">
+                <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 animate-slide-up">
+                    <div class="gradient-bg text-white px-6 py-4 animate-pulse-slow">
                         <h2 class="text-xl font-bold">
-                            <i class="fas fa-user-shield mr-2"></i> Accès Administrateur
+                            <i class="fas fa-user-shield mr-2 animate-bounce"></i> Accès Administrateur
                         </h2>
                     </div>
                     <div class="p-6">
                         <div class="mb-6">
                             <h4 class="font-medium mb-3">Comptes Admin Actifs</h4>
                             <div class="space-y-3">
-                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover-scale">
                                     <div class="flex items-center space-x-3">
-                                        <div class="bg-primary-100 p-2 rounded-full">
+                                        <div class="bg-primary-100 p-2 rounded-full animate-spin-slow">
                                             <i class="fas fa-user text-primary-600"></i>
                                         </div>
                                         <span>vgp.bavol@gmail.com</span>
                                     </div>
-                                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Actif</span>
+                                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs animate-pulse">Actif</span>
                                 </div>
-                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover-scale">
                                     <div class="flex items-center space-x-3">
-                                        <div class="bg-primary-100 p-2 rounded-full">
+                                        <div class="bg-primary-100 p-2 rounded-full animate-spin-slow">
                                             <i class="fas fa-user text-primary-600"></i>
                                         </div>
                                         <span>doctorblog.fr@gmail.com</span>
                                     </div>
-                                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Actif</span>
+                                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs animate-pulse">Actif</span>
                                 </div>
                             </div>
                         </div>
@@ -406,43 +469,43 @@
                         <div class="mb-6">
                             <h4 class="font-medium mb-3">Options d'Accès</h4>
                             <div class="space-y-2">
-                                <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-left flex items-center justify-between transition">
+                                <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-left flex items-center justify-between transition hover-scale ripple">
                                     <span>Forcer la vérification 2FA</span>
-                                    <i class="fas fa-chevron-right text-gray-400"></i>
+                                    <i class="fas fa-chevron-right text-gray-400 group-hover:translate-x-1 transition"></i>
                                 </button>
-                                <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-left flex items-center justify-between transition">
+                                <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-left flex items-center justify-between transition hover-scale ripple">
                                     <span>Journal des accès</span>
-                                    <i class="fas fa-chevron-right text-gray-400"></i>
+                                    <i class="fas fa-chevron-right text-gray-400 group-hover:translate-x-1 transition"></i>
                                 </button>
-                                <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-left flex items-center justify-between transition">
+                                <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-left flex items-center justify-between transition hover-scale ripple">
                                     <span>Paramètres de sécurité</span>
-                                    <i class="fas fa-chevron-right text-gray-400"></i>
+                                    <i class="fas fa-chevron-right text-gray-400 group-hover:translate-x-1 transition"></i>
                                 </button>
                             </div>
                         </div>
                         
-                        <button class="w-full bg-red-100 hover:bg-red-200 text-red-800 py-3 rounded-lg font-medium flex items-center justify-center transition">
+                        <button class="w-full bg-red-100 hover:bg-red-200 text-red-800 py-3 rounded-lg font-medium flex items-center justify-center transition hover-scale ripple animate-pulse-slow">
                             <i class="fas fa-sign-out-alt mr-2"></i> Déconnexion de tous les appareils
                         </button>
                     </div>
                 </div>
                 
                 <!-- Payment & Cart -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="bg-white rounded-xl shadow-md overflow-hidden animate-slide-up">
                     <div class="border-b border-gray-200 px-6 py-4">
                         <h2 class="text-xl font-bold">
-                            <i class="fas fa-shopping-cart mr-2"></i> Paiements & Panier
+                            <i class="fas fa-shopping-cart mr-2 animate-wave"></i> Paiements & Panier
                         </h2>
                     </div>
                     <div class="p-6">
                         <div class="mb-6">
                             <h4 class="font-medium mb-3">Méthodes de Paiement</h4>
                             <div class="grid grid-cols-2 gap-3">
-                                <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-3 rounded-lg font-medium flex items-center justify-center transition">
-                                    <i class="fab fa-cc-stripe mr-2 text-lg"></i> Stripe
+                                <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-3 rounded-lg font-medium flex items-center justify-center transition hover-scale ripple">
+                                    <i class="fab fa-cc-stripe mr-2 text-lg animate-bounce-slow"></i> Stripe
                                 </button>
-                                <button class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-3 rounded-lg font-medium flex items-center justify-center transition">
-                                    <i class="fab fa-cc-paypal mr-2 text-lg"></i> PayPal
+                                <button class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-3 rounded-lg font-medium flex items-center justify-center transition hover-scale ripple">
+                                    <i class="fab fa-cc-paypal mr-2 text-lg animate-wave"></i> PayPal
                                 </button>
                             </div>
                         </div>
@@ -450,26 +513,26 @@
                         <div class="mb-6">
                             <h4 class="font-medium mb-3">Panier Actuel</h4>
                             <div class="bg-gray-50 p-4 rounded-lg">
-                                <div class="flex justify-between items-center mb-2">
+                                <div class="flex justify-between items-center mb-2 hover:text-primary-600 transition">
                                     <span class="text-gray-600">techinnov.io (1 an)</span>
                                     <span class="font-medium">€12.99</span>
                                 </div>
-                                <div class="flex justify-between items-center mb-2">
+                                <div class="flex justify-between items-center mb-2 hover:text-primary-600 transition">
                                     <span class="text-gray-600">SSL Premium</span>
                                     <span class="font-medium">€0.00</span>
                                 </div>
-                                <div class="flex justify-between items-center mb-2">
+                                <div class="flex justify-between items-center mb-2 hover:text-primary-600 transition">
                                     <span class="text-gray-600">DNS Ultra-Rapide</span>
                                     <span class="font-medium">€0.00</span>
                                 </div>
                                 <div class="pt-3 mt-3 border-t border-gray-200 flex justify-between items-center">
                                     <span class="font-medium">Total</span>
-                                    <span class="text-xl font-bold">€12.99</span>
+                                    <span class="text-xl font-bold animate-pulse">€12.99</span>
                                 </div>
                             </div>
                         </div>
                         
-                        <button class="w-full bg-primary-600 hover:bg-primary-700 text-white py-3 rounded-lg font-medium flex items-center justify-center transition">
+                        <button class="w-full bg-primary-600 hover:bg-primary-700 text-white py-3 rounded-lg font-medium flex items-center justify-center transition hover-scale ripple animate-glow">
                             <i class="fas fa-credit-card mr-2"></i> Procéder au paiement
                         </button>
                     </div>
@@ -483,21 +546,21 @@
         <div class="container mx-auto px-4">
             <div class="grid md:grid-cols-4 gap-8">
                 <div class="md:col-span-2">
-                    <div class="flex items-center space-x-3 mb-4">
-                        <div class="bg-white p-2 rounded-lg">
+                    <div class="flex items-center space-x-3 mb-4 hover-scale">
+                        <div class="bg-white p-2 rounded-lg animate-spin-slow">
                             <i class="fas fa-robot text-primary-600 text-2xl"></i>
                         </div>
-                        <h3 class="text-xl font-bold">DOMAIBOT PRO</h3>
+                        <h3 class="text-xl font-bold">DOMAIBOT <span class="gradient-text">PRO</span></h3>
                     </div>
                     <p class="text-gray-400 mb-6">Système automatisé d'enregistrement de domaine avec propagation DNS mondiale instantanée, SSL gratuit et optimisation SEO automatique.</p>
                     <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white transition text-xl">
+                        <a href="#" class="text-gray-400 hover:text-white transition text-xl hover:animate-bounce">
                             <i class="fab fa-twitter"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition text-xl">
+                        <a href="#" class="text-gray-400 hover:text-white transition text-xl hover:animate-bounce">
                             <i class="fab fa-linkedin"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition text-xl">
+                        <a href="#" class="text-gray-400 hover:text-white transition text-xl hover:animate-bounce">
                             <i class="fab fa-github"></i>
                         </a>
                     </div>
@@ -506,17 +569,17 @@
                 <div>
                     <h4 class="font-bold text-lg mb-4">Services</h4>
                     <ul class="space-y-3">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">
-                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500"></i> Enregistrement de domaine
+                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group">
+                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500 group-hover:animate-bounce"></i> Enregistrement de domaine
                         </a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">
-                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500"></i> Certificats SSL
+                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group">
+                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500 group-hover:animate-bounce"></i> Certificats SSL
                         </a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">
-                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500"></i> Hébergement DNS
+                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group">
+                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500 group-hover:animate-bounce"></i> Hébergement DNS
                         </a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">
-                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500"></i> Optimisation SEO
+                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group">
+                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500 group-hover:animate-bounce"></i> Optimisation SEO
                         </a></li>
                     </ul>
                 </div>
@@ -524,17 +587,17 @@
                 <div>
                     <h4 class="font-bold text-lg mb-4">Support</h4>
                     <ul class="space-y-3">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">
-                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500"></i> Centre d'aide
+                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group">
+                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500 group-hover:animate-bounce"></i> Centre d'aide
                         </a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">
-                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500"></i> Documentation API
+                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group">
+                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500 group-hover:animate-bounce"></i> Documentation API
                         </a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">
-                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500"></i> Statut des services
+                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group">
+                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500 group-hover:animate-bounce"></i> Statut des services
                         </a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">
-                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500"></i> Contact
+                        <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group">
+                            <i class="fas fa-chevron-right text-xs mr-2 text-primary-500 group-hover:animate-bounce"></i> Contact
                         </a></li>
                     </ul>
                 </div>
@@ -545,9 +608,9 @@
                     © 2023 DOMAIBOT PRO. Tous droits réservés.
                 </p>
                 <div class="flex space-x-6">
-                    <a href="#" class="text-gray-500 hover:text-white transition text-sm">Confidentialité</a>
-                    <a href="#" class="text-gray-500 hover:text-white transition text-sm">Conditions</a>
-                    <a href="#" class="text-gray-500 hover:text-white transition text-sm">RGPD</a>
+                    <a href="#" class="text-gray-500 hover:text-white transition text-sm hover:underline">Confidentialité</a>
+                    <a href="#" class="text-gray-500 hover:text-white transition text-sm hover:underline">Conditions</a>
+                    <a href="#" class="text-gray-500 hover:text-white transition text-sm hover:underline">RGPD</a>
                 </div>
             </div>
         </div>
@@ -580,12 +643,20 @@
             
             registerButton.addEventListener('click', function() {
                 if(domainInput.value.trim() !== '') {
-                    alert("Domaine enregistré avec succès ! Propagation DNS mondiale en cours...\n\nSSL délivré automatiquement\nDNS Anycast configuré\nSearch Console & Analytics connectés");
-                    domainInput.value = '';
+                    // Add pulse animation
+                    this.classList.add('animate-pulse-once');
                     
-                    // Simulate adding to cart
-                    const cartTotal = document.querySelector('.text-xl.font-bold');
-                    cartTotal.textContent = '€0.00';
+                    setTimeout(() => {
+                        alert("Domaine enregistré avec succès ! Propagation DNS mondiale en cours...\n\nSSL délivré automatiquement\nDNS Anycast configuré\nSearch Console & Analytics connectés");
+                        domainInput.value = '';
+                        
+                        // Simulate adding to cart
+                        const cartTotal = document.querySelector('.text-xl.font-bold');
+                        cartTotal.textContent = '€0.00';
+                        
+                        // Remove pulse animation
+                        this.classList.remove('animate-pulse-once');
+                    }, 500);
                 }
             });
             
@@ -594,17 +665,72 @@
             const paypalButton = document.querySelector('.fa-cc-paypal').parentNode;
             
             stripeButton.addEventListener('click', function() {
-                alert("Redirection vers Stripe pour le paiement sécurisé...");
+                this.classList.add('animate-pulse-once');
+                setTimeout(() => {
+                    alert("Redirection vers Stripe pour le paiement sécurisé...");
+                    this.classList.remove('animate-pulse-once');
+                }, 500);
             });
             
             paypalButton.addEventListener('click', function() {
-                alert("Redirection vers PayPal pour le paiement sécurisé...");
+                this.classList.add('animate-pulse-once');
+                setTimeout(() => {
+                    alert("Redirection vers PayPal pour le paiement sécurisé...");
+                    this.classList.remove('animate-pulse-once');
+                }, 500);
+            });
+            
+            // Ripple effect for buttons
+            const buttons = document.querySelectorAll('.ripple');
+            buttons.forEach(button => {
+                button.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const rect = this.getBoundingClientRect();
+                    const x = e.clientX - rect.left;
+                    const y = e.clientY - rect.top;
+                    
+                    const ripple = this.querySelector('.ripple-effect') || document.createElement('span');
+                    ripple.classList.add('ripple-effect');
+                    ripple.style.left = `${x}px`;
+                    ripple.style.top = `${y}px`;
+                    
+                    this.appendChild(ripple);
+                    
+                    setTimeout(() => {
+                        ripple.remove();
+                    }, 1000);
+                });
             });
             
             // Check admin access
-            console.log("Accès admin confirmé pour:");
-            console.log("vgp.bavol@gmail.com : Admin270574@");
-            console.log("doctorblog.fr@gmail.com : Admin270574@");
+            console.log("%cAccès admin confirmé pour:", "color: #0ea5e9; font-weight: bold; font-size: 14px");
+            console.log("%cvgp.bavol@gmail.com : Admin270574@", "color: #10b981;");
+            console.log("%cdoctorblog.fr@gmail.com : Admin270574@", "color: #10b981;");
+            
+            // Animate elements on scroll
+            const animateOnScroll = () => {
+                const elements = document.querySelectorAll('.animate-slide-up');
+                
+                elements.forEach(element => {
+                    const elementPosition = element.getBoundingClientRect().top;
+                    const screenPosition = window.innerHeight / 1.3;
+                    
+                    if(elementPosition < screenPosition) {
+                        element.style.opacity = '1';
+                        element.style.transform = 'translateY(0)';
+                    }
+                });
+            };
+            
+            // Set initial state for slide-up elements
+            document.querySelectorAll('.animate-slide-up').forEach(el => {
+                el.style.opacity = '0';
+                el.style.transform = 'translateY(20px)';
+                el.style.transition = 'all 0.5s ease-out';
+            });
+            
+            window.addEventListener('scroll', animateOnScroll);
+            animateOnScroll(); // Run once on load
         });
     </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/domaibot-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -1,3 +1,4 @@
 ENREGISTREMENT DE DOMAINE ROBOTISÉ Système automatisé de gestion de domaine avec intelligence artificielle
 je veux une belle interface
-enregistrement domaine, ssl , serveur dns, etc.. en automatique , avec enregistrement au registraire directement dans la seconde qui suit sur toutes les navigateur du monde , serveur dns les plus puissant et plus rapide du monde a la seconde pres , avec référencement google searche console et google analytique directement robotisé le tout sur systeme sofistiqué 24/24 et 7jour sur 7jour le tout automatisé   ,   Enregistrez votre domaine gratuitement Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes::  Domain Information Registrar Information Registrant Contact .avec une tres belle interface:: je veux acces gratuite pour moi seulement administrateur :   vgp.bavol@gmail.com : Admin270574@   et doctorblog.fr@gmail.com : Admin270574@  ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat
+enregistrement domaine, ssl , serveur dns, etc.. en automatique , avec enregistrement au registraire directement dans la seconde qui suit sur toutes les navigateur du monde , serveur dns les plus puissant et plus rapide du monde a la seconde pres , avec référencement google searche console et google analytique directement robotisé le tout sur systeme sofistiqué 24/24 et 7jour sur 7jour le tout automatisé   ,   Enregistrez votre domaine gratuitement Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes::  Domain Information Registrar Information Registrant Contact .avec une tres belle interface:: je veux acces gratuite pour moi seulement administrateur :   vgp.bavol@gmail.com : Admin270574@   et doctorblog.fr@gmail.com : Admin270574@  ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat
+je la veux plus animé cet interface