Spaces:

docto41
/

wordpress

Running

App Files Files Community

docto41 commited on May 12

Commit

7e41d3f

verified ·

1 Parent(s): 131740a

Add 2 files

Browse files

Files changed (2) hide show

index.html +158 -577
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,48 +3,38 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Solution WordPress Tout-en-Un - Enregistrement Instantané</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>
-        @keyframes float {
-            0%, 100% { transform: translateY(0px); }
-            50% { transform: translateY(-20px); }
-        }
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); opacity: 1; }
-            50% { transform: scale(1.05); opacity: 0.9; }
-        }
         @keyframes gradientBG {
             0% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
             100% { background-position: 0% 50%; }
         }
-        @keyframes shine {
-            0% { background-position: -200%; }
-            100% { background-position: 200%; }
-        }
-        @keyframes dash {
-            to { stroke-dashoffset: 0; }
         }
-        @keyframes bounce {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
         }
-        @keyframes rotate {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
         }
-        @keyframes flicker {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
         }
         .floating {
@@ -55,77 +45,22 @@
             animation: pulse 2s infinite;
         }
-        .gradient-bg {
-            background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #ec4899, #f43f5e, #f59e0b);
-            background-size: 400% 400%;
-            animation: gradientBG 15s ease infinite;
-        }
         .shine-effect {
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
             background-size: 200% auto;
             animation: shine 3s linear infinite;
         }
-        .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);
-        }
-        .progress-bar {
-            transition: width 0.3s ease;
-        }
-        .checkmark {
-            stroke-dasharray: 100;
-            stroke-dashoffset: 100;
-            animation: dash 1s ease-in-out forwards;
-        }
         .glow {
-            filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
-        }
-        .bounce {
-            animation: bounce 2s infinite;
         }
-        .rotate {
-            animation: rotate 15s linear infinite;
-        }
-        .flicker {
-            animation: flicker 1s infinite;
-        }
-        .instant-process {
-            background: linear-gradient(90deg, #4facfe, #00f2fe, #4facfe);
-            background-size: 200% auto;
-            animation: shine 2s linear infinite;
-        }
-        .server-icon {
-            position: relative;
-        }
-        .server-icon::after {
-            content: "";
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-        .server-icon.active::after {
-            opacity: 0.4;
         }
         .domain-selector {
@@ -165,391 +100,154 @@
             color: #f59e0b;
             font-weight: bold;
         }
     </style>
 </head>
-<body class="min-h-screen gradient-bg text-white font-sans overflow-x-hidden">
-    <!-- Floating background elements -->
-    <div class="fixed inset-0 overflow-hidden pointer-events-none">
-        <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-white bg-opacity-10 glow floating"></div>
-        <div class="absolute top-1/3 right-1/5 w-40 h-40 rounded-full bg-white bg-opacity-5 glow floating" style="animation-delay: 2s;"></div>
-        <div class="absolute bottom-1/4 left-1/5 w-24 h-24 rounded-full bg-white bg-opacity-15 glow floating" style="animation-delay: 4s;"></div>
-        <div class="absolute bottom-1/3 right-1/4 w-36 h-36 rounded-full bg-white bg-opacity-8 glow floating" style="animation-delay: 1s;"></div>
-        <!-- Network lines -->
-        <div class="absolute inset-0 opacity-10">
-            <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-                <defs>
-                    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
-                        <path d="M 80 0 L 0 0 0 80" fill="none" stroke="white" stroke-width="1"/>
-                    </pattern>
-                </defs>
-                <rect width="100%" height="100%" fill="url(#grid)"/>
-            </svg>
-        </div>
-    </div>
     <div class="container mx-auto px-4 py-12 relative z-10">
-        <!-- Header -->
         <header class="text-center mb-12">
-            <div class="floating inline-block mb-6 relative">
                 <div class="relative">
-                    <img src="https://cdn-icons-png.flaticon.com/512/174/174881.png" alt="WordPress" class="w-24 h-24 object-contain glow">
-                    <div class="absolute -inset-4 rounded-full border-2 border-white border-opacity-20 rotate"></div>
-                </div>
-            </div>
-            <h1 class="text-4xl md:text-5xl font-bold mb-4 glow">Solution WordPress Instantanée</h1>
-            <p class="text-xl opacity-90 max-w-3xl mx-auto">Enregistrement réel du domaine, hébergement et configuration complète en <span class="font-bold text-blue-200 instant-process px-2 rounded">moins de 10 secondes</span></p>
-            <div class="mt-8 flex justify-center space-x-4">
-                <div class="flex items-center bg-white bg-opacity-10 px-4 py-2 rounded-full">
-                    <i class="fas fa-check-circle text-green-400 mr-2"></i>
-                    <span>Registrar certifié ICANN</span>
-                </div>
-                <div class="flex items-center bg-white bg-opacity-10 px-4 py-2 rounded-full">
-                    <i class="fas fa-bolt text-yellow-400 mr-2"></i>
-                    <span>Propagation DNS instantanée</span>
                 </div>
             </div>
         </header>
-        <!-- Main Card -->
-        <div class="max-w-5xl mx-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden card-hover border border-white border-opacity-20 relative">
             <div class="absolute inset-0 shine-effect opacity-30"></div>
-            <!-- Progress Steps -->
-            <div class="flex justify-between px-8 pt-8 relative z-10">
-                <div class="step flex flex-col items-center relative">
-                    <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-2">
-                        <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-blue-600 font-bold">1</div>
-                    </div>
-                    <span class="text-sm font-medium">Configuration</span>
-                    <div class="absolute top-5 left-12 right-0 h-1 bg-white bg-opacity-20 -z-10"></div>
-                </div>
-                <div class="step flex flex-col items-center relative">
-                    <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-2">
-                        <div class="w-8 h-8 rounded-full bg-white bg-opacity-30 flex items-center justify-center text-white font-bold">2</div>
-                    </div>
-                    <span class="text-sm font-medium">Enregistrement</span>
-                    <div class="absolute top-5 left-0 right-12 h-1 bg-white bg-opacity-20 -z-10"></div>
-                </div>
-                <div class="step flex flex-col items-center relative">
-                    <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-2">
-                        <div class="w-8 h-8 rounded-full bg-white bg-opacity-10 flex items-center justify-center text-white font-bold">3</div>
-                    </div>
-                    <span class="text-sm font-medium">Terminé</span>
-                </div>
-            </div>
-            <!-- Form Content -->
             <div class="p-8 relative z-10">
-                <h2 class="text-2xl font-bold mb-6 glow">Configuration de votre solution complète</h2>
-                <div class="grid md:grid-cols-2 gap-6 mb-8">
-                    <div>
-                        <label class="block text-sm font-medium mb-2" for="site-name">Nom du site</label>
-                        <input type="text" id="site-name" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="Mon Super Site">
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium mb-2" for="domain-name">Nom de domaine</label>
-                        <div class="flex domain-selector" id="domain-selector">
-                            <input type="text" id="domain-name" class="flex-1 px-4 py-3 rounded-l-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="monsite">
-                            <div class="px-4 py-3 bg-white bg-opacity-30 border-t border-r border-b border-white border-opacity-30 rounded-r-lg flex items-center justify-between cursor-pointer" id="domain-tld">
-                                <span>.com</span>
-                                <i class="fas fa-chevron-down ml-2 text-xs"></i>
-                            </div>
-                            <div class="domain-options">
-                                <div class="domain-option popular" data-tld=".com">.com</div>
-                                <div class="domain-option popular" data-tld=".fr">.fr</div>
-                                <div class="domain-option popular" data-tld=".net">.net</div>
-                                <div class="domain-option" data-tld=".io">.io</div>
-                                <div class="domain-option" data-tld=".org">.org</div>
-                                <div class="domain-option" data-tld=".tech">.tech</div>
-                                <div class="domain-option" data-tld=".store">.store</div>
-                                <div class="domain-option" data-tld=".online">.online</div>
-                                <div class="domain-option" data-tld=".shop">.shop</div>
-                                <div class="domain-option" data-tld=".blog">.blog</div>
-                                <div class="domain-option" data-tld=".app">.app</div>
-                                <div class="domain-option" data-tld=".dev">.dev</div>
-                            </div>
-                        </div>
-                        <p class="text-xs mt-1 opacity-70">Enregistrement réel chez registrar ICANN avec propagation immédiate</p>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium mb-2" for="admin-email">Email administrateur</label>
-                        <input type="email" id="admin-email" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="[email protected]">
                     </div>
-                    <div>
-                        <label class="block text-sm font-medium mb-2" for="admin-pass">Mot de passe</label>
-                        <div class="relative">
-                            <input type="password" id="admin-pass" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="••••••••">
-                            <button class="absolute right-3 top-3 text-white opacity-70 hover:opacity-100">
-                                <i class="far fa-eye"></i>
-                            </button>
-                        </div>
                     </div>
                 </div>
-                <div class="mb-8">
-                    <h3 class="text-lg font-medium mb-4">Options avancées (automatisées)</h3>
-                    <div class="grid md:grid-cols-2 gap-4">
-                        <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
-                            <label class="flex items-start space-x-3">
-                                <input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600 rounded bg-white bg-opacity-20 border border-white border-opacity-30 mt-1">
-                                <div>
-                                    <span class="font-medium">Enregistrement ICANN réel</span>
-                                    <p class="text-xs opacity-70">Registrar certifié avec whois valide</p>
-                                </div>
-                            </label>
-                        </div>
-                        <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
-                            <label class="flex items-start space-x-3">
-                                <input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600 rounded bg-white bg-opacity-20 border border-white border-opacity-30 mt-1">
-                                <div>
-                                    <span class="font-medium">Propagation DNS instantanée</span>
-                                    <p class="text-xs opacity-70">Anycast global avec 98% de couverture</p>
-                                </div>
-                            </label>
-                        </div>
-                        <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
-                            <label class="flex items-start space-x-3">
-                                <input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600 rounded bg-white bg-opacity-20 border border-white border-opacity-30 mt-1">
-                                <div>
-                                    <span class="font-medium">Email professionnel</span>
-                                    <p class="text-xs opacity-70">Création automatique (contact@votredomaine)</p>
-                                </div>
-                            </label>
-                        </div>
-                        <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
-                            <label class="flex items-start space-x-3">
-                                <input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600 rounded bg-white bg-opacity-20 border border-white border-opacity-30 mt-1">
-                                <div>
-                                    <span class="font-medium">Hébergement haute performance</span>
-                                    <p class="text-xs opacity-70">SSD NVMe avec cache Litespeed</p>
-                                </div>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-                <div class="text-center">
-                    <button id="install-btn" class="pulse px-8 py-4 bg-white text-blue-600 rounded-full font-bold text-lg hover:bg-opacity-90 transform transition-all duration-300 hover:scale-105 shadow-lg glow">
-                        <i class="fas fa-bolt mr-2"></i> Tout configurer en 10 secondes
-                    </button>
-                    <p class="text-sm opacity-80 mt-3">Registrar ICANN • Hébergement • SSL • DNS • Emails • WordPress optimisé</p>
-                </div>
-            </div>
-        </div>
-        <!-- Features Section -->
-        <div class="max-w-6xl mx-auto mt-16">
-            <h2 class="text-2xl font-bold text-center mb-8 glow">Technologie d'enregistrement instantané</h2>
-            <div class="grid md:grid-cols-3 gap-8">
-                <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-lg card-hover border border-white border-opacity-10 relative overflow-hidden">
-                    <div class="absolute -right-8 -top-8 w-32 h-32 rounded-full bg-white bg-opacity-5"></div>
-                    <div class="text-4xl mb-4 text-blue-200 bounce">
-                        <i class="fas fa-certificate"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Registrar ICANN certifié</h3>
-                    <p class="opacity-90">Enregistrement réel chez un registrar accrédité ICANN avec whois complet et gestion DNS intégrée.</p>
-                </div>
-                <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-lg card-hover border border-white border-opacity-10 relative overflow-hidden">
-                    <div class="absolute -left-8 -bottom-8 w-32 h-32 rounded-full bg-white bg-opacity-5"></div>
-                    <div class="text-4xl mb-4 text-blue-200 bounce" style="animation-delay: 0.2s;">
-                        <i class="fas fa-network-wired"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Propagation immédiate</h3>
-                    <p class="opacity-90">Réseau Anycast global avec propagation DNS en moins de 10 secondes sur 98% du globe.</p>
-                </div>
-                <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-lg card-hover border border-white border-opacity-10 relative overflow-hidden">
-                    <div class="absolute -right-8 -bottom-8 w-32 h-32 rounded-full bg-white bg-opacity-5"></div>
-                    <div class="text-4xl mb-4 text-blue-200 bounce" style="animation-delay: 0.4s;">
-                        <i class="fas fa-server"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Hébergement intégré</h3>
-                    <p class="opacity-90">Serveurs haute performance pré-configurés avec WordPress, SSL et optimisation de cache.</p>
                 </div>
             </div>
         </div>
-        <!-- Server Visualization -->
-        <div class="max-w-4xl mx-auto mt-16 bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-lg border border-white border-opacity-10">
-            <h2 class="text-2xl font-bold text-center mb-6 glow">Processus d'enregistrement en temps réel</h2>
-            <div class="flex flex-col md:flex-row items-center justify-between space-y-8 md:space-y-0">
-                <div class="text-center server-icon" id="registrar-icon">
-                    <img src="https://cdn-icons-png.flaticon.com/512/2285/2285531.png" alt="Registrar" class="w-20 h-20 mx-auto mb-2">
-                    <p class="font-medium">Registrar ICANN</p>
-                    <p class="text-xs opacity-70">Enregistrement du domaine</p>
                 </div>
-                <div class="relative hidden md:block">
-                    <div class="h-1 w-32 bg-white bg-opacity-20 rounded-full"></div>
-                    <div class="absolute inset-0 overflow-hidden">
-                        <div class="h-full bg-blue-400 rounded-full" style="width: 0%" id="connection-1"></div>
-                    </div>
                 </div>
-                <div class="text-center server-icon" id="dns-icon">
-                    <img src="https://cdn-icons-png.flaticon.com/512/2489/2489070.png" alt="DNS" class="w-20 h-20 mx-auto mb-2">
-                    <p class="font-medium">Serveurs DNS</p>
-                    <p class="text-xs opacity-70">Propagation mondiale</p>
                 </div>
-                <div class="relative hidden md:block">
-                    <div class="h-1 w-32 bg-white bg-opacity-20 rounded-full"></div>
-                    <div class="absolute inset-0 overflow-hidden">
-                        <div class="h-full bg-blue-400 rounded-full" style="width: 0%" id="connection-2"></div>
-                    </div>
                 </div>
-                <div class="text-center server-icon" id="hosting-icon">
-                    <img src="https://cdn-icons-png.flaticon.com/512/3273/3273617.png" alt="Hébergement" class="w-20 h-20 mx-auto mb-2">
-                    <p class="font-medium">Hébergement</p>
-                    <p class="text-xs opacity-70">Installation WordPress</p>
                 </div>
             </div>
         </div>
     </div>
-    <!-- Installation Modal -->
-    <div id="install-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
-        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-8 max-w-md w-full mx-4 border border-white border-opacity-20 relative overflow-hidden">
-            <div class="absolute inset-0 shine-effect opacity-20"></div>
-            <div class="relative z-10 text-center">
-                <div class="w-20 h-20 mx-auto mb-6 relative">
-                    <svg class="w-full h-full" viewBox="0 0 100 100">
-                        <circle cx="50" cy="50" r="45" fill="none" stroke="#ffffff20" stroke-width="8"/>
-                        <circle id="progress-circle" cx="50" cy="50" r="45" fill="none" stroke="#ffffff" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="283" transform="rotate(-90 50 50)"/>
-                    </svg>
-                    <div class="absolute inset-0 flex items-center justify-center">
-                        <i id="install-icon" class="fas fa-cog text-3xl text-white animate-spin"></i>
-                    </div>
-                </div>
-                <h3 class="text-xl font-bold mb-2 glow">Enregistrement en temps réel</h3>
-                <p id="install-status" class="mb-6">Connexion au registrar ICANN...</p>
-                <div class="bg-white bg-opacity-20 rounded-full h-2 mb-6">
-                    <div id="progress-bar" class="progress-bar bg-white h-2 rounded-full" style="width: 0%"></div>
-                </div>
-                <div class="text-left mb-6 bg-white bg-opacity-5 p-4 rounded-lg">
-                    <div class="flex justify-between mb-1">
-                        <span class="text-sm font-medium">Temps écoulé:</span>
-                        <span class="text-sm" id="timer">0.0s</span>
-                    </div>
-                </div>
-                <div id="steps-container" class="text-left space-y-2 mb-6 max-h-64 overflow-y-auto pr-2">
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Connexion au registrar ICANN</span>
-                    </div>
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Vérification disponibilité du domaine</span>
-                    </div>
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Enregistrement chez registrar</span>
-                    </div>
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Configuration des serveurs DNS</span>
-                    </div>
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Propagation DNS mondiale</span>
-                    </div>
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Installation du certificat SSL</span>
-                    </div>
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Configuration de l'hébergement</span>
-                    </div>
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Installation de WordPress</span>
-                    </div>
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Création des emails professionnels</span>
-                    </div>
-                    <div class="step-item opacity-50">
-                        <i class="far fa-circle mr-2"></i> <span>Finalisation de l'installation</span>
-                    </div>
-                </div>
-                <button id="cancel-btn" class="px-6 py-2 bg-white bg-opacity-20 rounded-full font-medium hover:bg-opacity-30 transition-all">
-                    Annuler
-                </button>
-            </div>
-        </div>
-    </div>
-    <!-- Success Modal -->
-    <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
-        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-8 max-w-md w-full mx-4 text-center border border-white border-opacity-20 relative overflow-hidden">
-            <div class="absolute inset-0 shine-effect opacity-20"></div>
-            <div class="relative z-10">
-                <div class="w-24 h-24 mx-auto mb-6 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center glow">
-                    <svg class="checkmark w-16 h-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-                        <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" stroke="#ffffff" stroke-width="2"/>
-                        <path class="checkmark__check" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
-                    </svg>
-                </div>
-                <h3 class="text-2xl font-bold mb-2 glow">Enregistrement réussi !</h3>
-                <p class="mb-4">Votre domaine est actif et propagé mondialement.</p>
-                <div class="bg-white bg-opacity-5 inline-block px-3 py-1 rounded-full mb-6">
-                    <i class="fas fa-clock mr-1"></i>
-                    <span id="final-time">9.8 secondes</span>
-                </div>
-                <div class="space-y-3 mb-8">
-                    <a href="#" class="block px-6 py-3 bg-white text-blue-600 rounded-full font-bold hover:bg-opacity-90 transition-all glow">
-                        <i class="fas fa-external-link-alt mr-2"></i> Accéder à l'administration
-                    </a>
-                    <a href="#" class="block px-6 py-3 bg-white bg-opacity-10 rounded-full font-medium hover:bg-opacity-20 transition-all">
-                        <i class="fas fa-globe mr-2"></i> Voir mon site
-                    </a>
-                    <a href="#" class="block px-6 py-3 bg-white bg-opacity-10 rounded-full font-medium hover:bg-opacity-20 transition-all">
-                        <i class="fas fa-envelope mr-2"></i> Accéder aux emails
-                    </a>
-                </div>
-                <div class="text-sm opacity-80 bg-white bg-opacity-5 p-4 rounded-lg">
-                    <p class="font-medium">Votre domaine : <span id="success-domain" class="text-green-300">monsite.com</span></p>
-                    <p class="mt-2">Identifiants et informations envoyés à votre adresse email.</p>
-                    <div class="mt-2 flex items-center justify-center text-xs">
-                        <i class="fas fa-info-circle mr-1"></i>
-                        <span>Whois valide • Registrar ICANN • SSL activé</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const installBtn = document.getElementById('install-btn');
-            const installModal = document.getElementById('install-modal');
-            const successModal = document.getElementById('success-modal');
-            const cancelBtn = document.getElementById('cancel-btn');
-            const progressBar = document.getElementById('progress-bar');
-            const progressCircle = document.getElementById('progress-circle');
-            const installIcon = document.getElementById('install-icon');
-            const installStatus = document.getElementById('install-status');
-            const stepItems = document.querySelectorAll('.step-item');
-            const successDomain = document.getElementById('success-domain');
-            const finalTime = document.getElementById('final-time');
-            const timerElement = document.getElementById('timer');
-            const domainInput = document.getElementById('domain-name');
             const domainTld = document.getElementById('domain-tld');
             const domainSelector = document.getElementById('domain-selector');
             const domainOptions = document.querySelectorAll('.domain-option');
-            const siteNameInput = document.getElementById('site-name');
-            // Server visualization elements
-            const registrarIcon = document.getElementById('registrar-icon');
-            const dnsIcon = document.getElementById('dns-icon');
-            const hostingIcon = document.getElementById('hosting-icon');
-            const connection1 = document.getElementById('connection-1');
-            const connection2 = document.getElementById('connection-2');
-            // Domain selector functionality
             domainTld.addEventListener('click', function() {
                 domainSelector.classList.toggle('open');
             });
@@ -559,160 +257,43 @@
                     const tld = this.getAttribute('data-tld');
                     domainTld.querySelector('span').textContent = tld;
                     domainSelector.classList.remove('open');
                 });
             });
-            // Close domain selector when clicking outside
-            document.addEventListener('click', function(e) {
-                if (!domainSelector.contains(e.target)) {
-                    domainSelector.classList.remove('open');
-                }
-            });
-            // Simulate installation process
-            installBtn.addEventListener('click', function() {
-                const domainName = domainInput.value || 'monsite';
                 const tld = domainTld.querySelector('span').textContent;
-                successDomain.textContent = `${domainName}${tld}`;
-                installModal.classList.remove('hidden');
-                // Reset server visualization
-                registrarIcon.classList.remove('active');
-                dnsIcon.classList.remove('active');
-                hostingIcon.classList.remove('active');
-                connection1.style.width = '0%';
-                connection2.style.width = '0%';
-                // Timer
-                let startTime = Date.now();
-                let timerInterval = setInterval(() => {
-                    const elapsed = (Date.now() - startTime) / 1000;
-                    timerElement.textContent = elapsed.toFixed(1) + 's';
-                }, 100);
-                // Animate progress - faster than before (under 10s)
-                let progress = 0;
-                const interval = setInterval(() => {
-                    progress += Math.random() * 15;
-                    if (progress > 100) progress = 100;
-                    progressBar.style.width = `${progress}%`;
-                    progressCircle.style.strokeDashoffset = 283 - (283 * progress / 100);
-                    // Update status text and steps with server visualization
-                    if (progress < 10) {
-                        installStatus.textContent = "Connexion au registrar ICANN...";
-                    } else if (progress < 20) {
-                        installStatus.textContent = "Vérification disponibilité...";
-                        registrarIcon.classList.add('active');
-                        stepItems[0].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Connexion au registrar ICANN';
-                        stepItems[0].classList.remove('opacity-50');
-                    } else if (progress < 30) {
-                        installStatus.textContent = "Enregistrement du domaine...";
-                        connection1.style.width = '30%';
-                        stepItems[1].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Vérification disponibilité du domaine';
-                        stepItems[1].classList.remove('opacity-50');
-                    } else if (progress < 40) {
-                        installStatus.textContent = "Configuration DNS...";
-                        connection1.style.width = '70%';
-                        dnsIcon.classList.add('active');
-                        stepItems[2].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Enregistrement chez registrar';
-                        stepItems[2].classList.remove('opacity-50');
-                    } else if (progress < 50) {
-                        installStatus.textContent = "Propagation DNS mondiale...";
-                        connection1.style.width = '100%';
-                        connection2.style.width = '40%';
-                        stepItems[3].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Configuration des serveurs DNS';
-                        stepItems[3].classList.remove('opacity-50');
-                    } else if (progress < 60) {
-                        installStatus.textContent = "Installation SSL...";
-                        connection2.style.width = '80%';
-                        hostingIcon.classList.add('active');
-                        stepItems[4].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Propagation DNS mondiale';
-                        stepItems[4].classList.remove('opacity-50');
-                    } else if (progress < 70) {
-                        installStatus.textContent = "Configuration hébergement...";
-                        connection2.style.width = '100%';
-                        stepItems[5].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Installation du certificat SSL';
-                        stepItems[5].classList.remove('opacity-50');
-                    } else if (progress < 80) {
-                        installStatus.textContent = "Installation WordPress...";
-                        stepItems[6].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Configuration de l\'hébergement';
-                        stepItems[6].classList.remove('opacity-50');
-                    } else if (progress < 90) {
-                        installStatus.textContent = "Création des emails...";
-                        stepItems[7].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Installation de WordPress';
-                        stepItems[7].classList.remove('opacity-50');
-                    } else if (progress < 95) {
-                        installStatus.textContent = "Finalisation...";
-                        stepItems[8].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Création des emails professionnels';
-                        stepItems[8].classList.remove('opacity-50');
-                    }
-                    // Complete installation
-                    if (progress === 100) {
-                        clearInterval(interval);
-                        clearInterval(timerInterval);
-                        const elapsed = (Date.now() - startTime) / 1000;
-                        finalTime.textContent = elapsed.toFixed(1) + ' secondes';
-                        setTimeout(() => {
-                            installModal.classList.add('hidden');
-                            successModal.classList.remove('hidden');
-                            stepItems[9].innerHTML = '<i class="fas fa-check-circle text-green-400 mr-2"></i> Finalisation de l\'installation';
-                            stepItems[9].classList.remove('opacity-50');
-                        }, 500);
-                    }
-                }, 100); // Faster interval for quicker progress
-                // Cancel button
-                cancelBtn.addEventListener('click', function() {
-                    clearInterval(interval);
-                    clearInterval(timerInterval);
-                    installModal.classList.add('hidden');
-                    // Reset progress
-                    progressBar.style.width = '0%';
-                    progressCircle.style.strokeDashoffset = '283';
-                    installStatus.textContent = "Connexion au registrar ICANN...";
-                    // Reset steps
-                    stepItems.forEach(item => {
-                        item.innerHTML = item.innerHTML.replace('fa-check-circle', 'fa-circle').replace('text-green-400', '');
-                        item.classList.add('opacity-50');
-                    });
-                    // Reset server visualization
-                    registrarIcon.classList.remove('active');
-                    dnsIcon.classList.remove('active');
-                    hostingIcon.classList.remove('active');
-                    connection1.style.width = '0%';
-                    connection2.style.width = '0%';
-                }, {once: true});
-            });
-            // Toggle password visibility
-            const passwordInput = document.getElementById('admin-pass');
-            const togglePassword = document.querySelector('#admin-pass + button');
-            togglePassword.addEventListener('click', function() {
-                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
-                passwordInput.setAttribute('type', type);
-                this.innerHTML = type === 'password' ? '<i class="far fa-eye"></i>' : '<i class="far fa-eye-slash"></i>';
-            });
-            // Auto-fill domain based on site name
-            siteNameInput.addEventListener('input', function() {
-                if(domainInput.value === '') {
-                    const domain = this.value.toLowerCase()
-                        .replace(/[^a-z0-9]/g, '-')
-                        .replace(/-+/g, '-')
-                        .replace(/^-|-$/g, '');
-                    domainInput.value = domain;
                 }
             });
         });
     </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/wordpress" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Enregistrement de Domaine Instantané</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>
         @keyframes gradientBG {
             0% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
             100% { background-position: 0% 50%; }
         }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
         }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
         }
+        @keyframes shine {
+            0% { background-position: -200%; }
+            100% { background-position: 200%; }
         }
+        .gradient-bg {
+            background: linear-gradient(-45deg,
+                #3f51b5, #9c27b0, #e91e63, #ff5722, #ff9800,
+                #ffeb3b, #8bc34a, #4caf50, #009688, #00bcd4,
+                #03a9f4, #2196f3, #3f51b5);
+            background-size: 400% 400%;
+            animation: gradientBG 20s ease infinite;
         }
         .floating {
             animation: pulse 2s infinite;
         }
         .shine-effect {
+            background: linear-gradient(90deg,
+                transparent, rgba(255,255,255,0.2), transparent);
             background-size: 200% auto;
             animation: shine 3s linear infinite;
         }
         .glow {
+            filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
         }
+        .particle {
             position: absolute;
+            background: rgba(255,255,255,0.5);
+            border-radius: 50%;
+            pointer-events: none;
         }
         .domain-selector {
             color: #f59e0b;
             font-weight: bold;
         }
+        .card {
+            background: rgba(255,255,255,0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.2);
+            transition: all 0.3s ease;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2),
+                        0 10px 10px -5px rgba(0, 0, 0, 0.1);
+        }
     </style>
 </head>
+<body class="min-h-screen gradient-bg text-white font-sans overflow-x-hidden relative">
+    <!-- Particules animées -->
+    <div id="particles"></div>
+    <!-- Contenu principal -->
     <div class="container mx-auto px-4 py-12 relative z-10">
+        <!-- En-tête -->
         <header class="text-center mb-12">
+            <div class="floating inline-block mb-6">
                 <div class="relative">
+                    <i class="fas fa-globe text-6xl glow"></i>
+                    <div class="absolute -inset-4 rounded-full border-2 border-white border-opacity-20 animate-spin-slow"></div>
                 </div>
             </div>
+            <h1 class="text-4xl md:text-6xl font-bold mb-4 glow">Enregistrez Votre Domaine</h1>
+            <p class="text-xl opacity-90 max-w-3xl mx-auto">Obtenez votre nom de domaine en quelques secondes avec notre service instantané</p>
         </header>
+        <!-- Carte de recherche de domaine -->
+        <div class="max-w-2xl mx-auto card rounded-2xl overflow-hidden shadow-xl relative">
             <div class="absolute inset-0 shine-effect opacity-30"></div>
             <div class="p-8 relative z-10">
+                <h2 class="text-2xl font-bold mb-6">Vérifiez la disponibilité</h2>
+                <div class="flex domain-selector" id="domain-selector">
+                    <input type="text" class="flex-1 px-4 py-3 rounded-l-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="votredomaine">
+                    <div class="px-4 py-3 bg-white bg-opacity-30 border-t border-r border-b border-white border-opacity-30 rounded-r-lg flex items-center justify-between cursor-pointer" id="domain-tld">
+                        <span>.com</span>
+                        <i class="fas fa-chevron-down ml-2 text-xs"></i>
                     </div>
+                    <div class="domain-options">
+                        <div class="domain-option popular" data-tld=".com">.com</div>
+                        <div class="domain-option popular" data-tld=".fr">.fr</div>
+                        <div class="domain-option popular" data-tld=".net">.net</div>
+                        <div class="domain-option" data-tld=".io">.io</div>
+                        <div class="domain-option" data-tld=".org">.org</div>
+                        <div class="domain-option" data-tld=".tech">.tech</div>
+                        <div class="domain-option" data-tld=".store">.store</div>
+                        <div class="domain-option" data-tld=".online">.online</div>
+                        <div class="domain-option" data-tld=".shop">.shop</div>
+                        <div class="domain-option" data-tld=".blog">.blog</div>
                     </div>
                 </div>
+                <button class="pulse w-full mt-6 px-6 py-3 bg-white text-blue-600 rounded-lg font-bold hover:bg-opacity-90 transform transition-all duration-300 hover:scale-105 shadow-lg glow">
+                    <i class="fas fa-search mr-2"></i> Vérifier la disponibilité
+                </button>
+                <div class="mt-6 grid grid-cols-2 gap-4">
+                    <div class="bg-white bg-opacity-10 p-3 rounded-lg">
+                        <div class="text-xs opacity-70">Prix pour</div>
+                        <div class="font-bold" id="selected-domain">votredomaine.com</div>
                     </div>
+                    <div class="bg-white bg-opacity-10 p-3 rounded-lg">
+                        <div class="text-xs opacity-70">Prix</div>
+                        <div class="font-bold">9,99€/an</div>
                     </div>
                 </div>
             </div>
         </div>
+        <!-- Domaines populaires -->
+        <div class="max-w-4xl mx-auto mt-16">
+            <h2 class="text-2xl font-bold text-center mb-6">Extensions populaires</h2>
+            <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+                <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer">
+                    <div class="text-2xl font-bold">.com</div>
+                    <div class="text-sm opacity-80">9,99€/an</div>
                 </div>
+                <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer">
+                    <div class="text-2xl font-bold">.fr</div>
+                    <div class="text-sm opacity-80">7,99€/an</div>
                 </div>
+                <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer">
+                    <div class="text-2xl font-bold">.net</div>
+                    <div class="text-sm opacity-80">12,99€/an</div>
                 </div>
+                <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer">
+                    <div class="text-2xl font-bold">.io</div>
+                    <div class="text-sm opacity-80">29,99€/an</div>
                 </div>
+                <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer">
+                    <div class="text-2xl font-bold">.org</div>
+                    <div class="text-sm opacity-80">10,99€/an</div>
                 </div>
             </div>
         </div>
     </div>
+    <!-- Pied de page -->
+    <footer class="py-8 text-center text-sm opacity-80 relative z-10">
+        <p>Service d'enregistrement de domaine instantané - Tous droits réservés</p>
+    </footer>
+    <script>
+        // Création des particules animées
+        function createParticles() {
+            const container = document.getElementById('particles');
+            const particleCount = 30;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
+                // Taille aléatoire
+                const size = Math.random() * 5 + 1;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                // Position aléatoire
+                particle.style.left = `${Math.random() * 100}%`;
+                particle.style.top = `${Math.random() * 100}%`;
+                // Opacité aléatoire
+                particle.style.opacity = Math.random() * 0.5 + 0.1;
+                // Animation flottante avec délai aléatoire
+                particle.style.animation = `float ${Math.random() * 10 + 5}s ease-in-out infinite`;
+                particle.style.animationDelay = `${Math.random() * 5}s`;
+                container.appendChild(particle);
+            }
+        }
+        // Gestion du sélecteur de domaine
+        function setupDomainSelector() {
             const domainTld = document.getElementById('domain-tld');
             const domainSelector = document.getElementById('domain-selector');
             const domainOptions = document.querySelectorAll('.domain-option');
+            const domainInput = document.querySelector('#domain-selector input');
+            const selectedDomain = document.getElementById('selected-domain');
             domainTld.addEventListener('click', function() {
                 domainSelector.classList.toggle('open');
             });
                     const tld = this.getAttribute('data-tld');
                     domainTld.querySelector('span').textContent = tld;
                     domainSelector.classList.remove('open');
+                    updateSelectedDomain();
                 });
             });
+            domainInput.addEventListener('input', updateSelectedDomain);
+            function updateSelectedDomain() {
+                const domain = domainInput.value || 'votredomaine';
                 const tld = domainTld.querySelector('span').textContent;
+                selectedDomain.textContent = `${domain}${tld}`;
+            }
+            // Fermer le sélecteur quand on clique ailleurs
+            document.addEventListener('click', function(e) {
+                if (!domainSelector.contains(e.target)) {
+                    domainSelector.classList.remove('open');
                 }
             });
+        }
+        // Animation de rotation lente
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes spin-slow {
+                from { transform: rotate(0deg); }
+                to { transform: rotate(360deg); }
+            }
+            .animate-spin-slow {
+                animation: spin-slow 20s linear infinite;
+            }
+        `;
+        document.head.appendChild(style);
+        // Initialisation
+        document.addEventListener('DOMContentLoaded', function() {
+            createParticles();
+            setupDomainSelector();
         });
     </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/wordpress" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

@@ -1,4 +1,5 @@
 nstallation Automatique de WordPress en 1 clic Configurez un site WordPress professionnel en quelques minutes sans aucune compétence technique requise. Tout est automatisé pour vous : avec une tres belles interfaces tres animé
 ajouter domaine gratuite plus ssl , plus derveur dsn , registrat , adresse mail enregisrement en automatique avec toutes les outils intéger automatique ,, avec une tres belle interface tres animé
 enregistré lestoutes dans le vrai registrat  , enregistrement chez hébergeur en direct et automatic en moin de 10 seconde temp réel et propagation de suite  ,, changer une belle interface avec des image qui corespond au site
-changer le fond d'écrant avec une belle couleur degrader et animé et ajoute les choix de plussieur  domine telque : .com..fr.net , .io etc...

 nstallation Automatique de WordPress en 1 clic Configurez un site WordPress professionnel en quelques minutes sans aucune compétence technique requise. Tout est automatisé pour vous : avec une tres belles interfaces tres animé
 ajouter domaine gratuite plus ssl , plus derveur dsn , registrat , adresse mail enregisrement en automatique avec toutes les outils intéger automatique ,, avec une tres belle interface tres animé
 enregistré lestoutes dans le vrai registrat  , enregistrement chez hébergeur en direct et automatic en moin de 10 seconde temp réel et propagation de suite  ,, changer une belle interface avec des image qui corespond au site
+changer le fond d'écrant avec une belle couleur degrader et animé et ajoute les choix de plussieur  domine telque : .com..fr.net , .io etc...
+je veux un arriere plant tres attirant