Spaces:

docto41
/

web-master-pro

Running

App Files Files Community

docto41 commited on May 6, 2025

Commit

de71c2d

verified ·

1 Parent(s): 992e0d0

Add 2 files

Browse files

Files changed (2) hide show

index.html +98 -8
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -36,6 +36,26 @@
         button, a.button {
             cursor: pointer;
         }
     </style>
 </head>
 <body class="bg-gray-50 font-sans antialiased">
@@ -68,20 +88,27 @@
             <div class="max-w-2xl mx-auto bg-white rounded-xl p-1 search-box">
                 <div class="flex">
-                    <input type="text" placeholder="Recherchez votre nom de domaine..." class="flex-1 px-6 py-4 rounded-l-xl focus:outline-none text-gray-800">
-                    <select class="w-32 px-4 py-4 border-l border-gray-200 bg-gray-50 rounded-r-xl focus:outline-none">
                         <option>.com</option>
                         <option>.net</option>
                         <option>.org</option>
                         <option>.io</option>
                         <option>.tech</option>
                     </select>
-                    <button onclick="searchDomain()" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-4 rounded-r-xl font-bold transition-all duration-300">
                         <i class="fas fa-search mr-2"></i> Rechercher
                     </button>
                 </div>
             </div>
             <div class="mt-12 flex flex-wrap justify-center gap-4">
                 <div class="flex items-center bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full">
                     <i class="fas fa-check-circle text-green-300 mr-2"></i>
@@ -370,19 +397,82 @@
             freeBadge.classList.add('pulse-animation');
         });
         // Button functions
         function searchDomain() {
-            const domainInput = document.querySelector('input[type="text"]');
-            const domainExtension = document.querySelector('select').value;
             const domain = domainInput.value.trim() + domainExtension;
             if(domainInput.value.trim() === '') {
-                alert('Veuillez entrer un nom de domaine');
                 return;
             }
-            alert('Recherche du domaine: ' + domain);
-            // Ici vous pourriez ajouter une requête AJAX pour vérifier la disponibilité
         }
         function refreshDomainInfo() {

         button, a.button {
             cursor: pointer;
         }
+        .searching {
+            position: relative;
+        }
+        .searching::after {
+            content: "";
+            position: absolute;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            display: none;
+        }
+        @keyframes spin {
+            to { transform: translateY(-50%) rotate(360deg); }
+        }
     </style>
 </head>
 <body class="bg-gray-50 font-sans antialiased">
             <div class="max-w-2xl mx-auto bg-white rounded-xl p-1 search-box">
                 <div class="flex">
+                    <input type="text" id="domainInput" placeholder="Recherchez votre nom de domaine..." class="flex-1 px-6 py-4 rounded-l-xl focus:outline-none text-gray-800" oninput="triggerSearch()">
+                    <select id="domainExtension" class="w-32 px-4 py-4 border-l border-gray-200 bg-gray-50 focus:outline-none" onchange="triggerSearch()">
                         <option>.com</option>
                         <option>.net</option>
                         <option>.org</option>
                         <option>.io</option>
                         <option>.tech</option>
                     </select>
+                    <button id="searchButton" onclick="searchDomain()" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-4 rounded-r-xl font-bold transition-all duration-300 searching">
                         <i class="fas fa-search mr-2"></i> Rechercher
                     </button>
                 </div>
             </div>
+            <div id="searchResults" class="mt-4 bg-white rounded-lg shadow-lg hidden max-w-2xl mx-auto p-6">
+                <h3 class="text-lg font-bold mb-4">Résultats de recherche</h3>
+                <div id="resultsList" class="space-y-3">
+                    <!-- Les résultats seront affichés ici -->
+                </div>
+            </div>
             <div class="mt-12 flex flex-wrap justify-center gap-4">
                 <div class="flex items-center bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full">
                     <i class="fas fa-check-circle text-green-300 mr-2"></i>
             freeBadge.classList.add('pulse-animation');
         });
+        // Search timer variable
+        let searchTimer;
+        // Trigger search automatically after user stops typing
+        function triggerSearch() {
+            clearTimeout(searchTimer);
+            const domainInput = document.getElementById('domainInput');
+            if(domainInput.value.trim() === '') {
+                document.getElementById('searchResults').classList.add('hidden');
+                return;
+            }
+            // Show loading indicator
+            const searchButton = document.getElementById('searchButton');
+            searchButton.classList.add('searching');
+            searchButton.querySelector('i').classList.add('hidden');
+            // Wait 500ms after last input to trigger search
+            searchTimer = setTimeout(() => {
+                searchDomain();
+            }, 500);
+        }
         // Button functions
         function searchDomain() {
+            const domainInput = document.getElementById('domainInput');
+            const domainExtension = document.getElementById('domainExtension').value;
             const domain = domainInput.value.trim() + domainExtension;
+            const resultsList = document.getElementById('resultsList');
+            const searchResults = document.getElementById('searchResults');
             if(domainInput.value.trim() === '') {
+                searchResults.classList.add('hidden');
                 return;
             }
+            // Simulate API call with timeout
+            setTimeout(() => {
+                // Hide loading indicator
+                const searchButton = document.getElementById('searchButton');
+                searchButton.classList.remove('searching');
+                searchButton.querySelector('i').classList.remove('hidden');
+                // Clear previous results
+                resultsList.innerHTML = '';
+                // Generate random results (in a real app, this would come from an API)
+                const extensions = ['.com', '.net', '.org', '.io', '.tech'];
+                const statuses = ['Disponible', 'Indisponible'];
+                extensions.forEach(ext => {
+                    const status = Math.random() > 0.5 ? statuses[0] : statuses[1];
+                    const price = status === 'Disponible' ? (Math.random() * 20 + 5).toFixed(2) : 'N/A';
+                    const resultItem = document.createElement('div');
+                    resultItem.className = 'flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg';
+                    resultItem.innerHTML = `
+                        <div class="flex items-center">
+                            <span class="font-medium">${domainInput.value.trim()}${ext}</span>
+                            <span class="ml-2 text-xs px-2 py-1 rounded ${status === 'Disponible' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">${status}</span>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="text-gray-600 mr-3">${status === 'Disponible' ? `€${price}/an` : ''}</span>
+                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm ${status === 'Indisponible' ? 'opacity-50 cursor-not-allowed' : ''}" ${status === 'Indisponible' ? 'disabled' : ''}>
+                                ${status === 'Disponible' ? 'Ajouter' : 'Indisponible'}
+                            </button>
+                        </div>
+                    `;
+                    resultsList.appendChild(resultItem);
+                });
+                // Show results
+                searchResults.classList.remove('hidden');
+            }, 1000);
         }
         function refreshDomainInfo() {

prompts.txt CHANGED Viewed

@@ -13,4 +13,5 @@ ajouter tableau de bord avec les information de paiement paypal, stripe, avec bo
 modifier la page d'accueil avec des bon degader et des bel image
 Domain Information Registrar Information Registrant Contact
 Enregistrez votre domaine gratuitement Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes::  Domain Information Registrar Information Registrant Contact
-corriger toutes les erreurs des bouton non cliquable qui ne fonction pas

 modifier la page d'accueil avec des bon degader et des bel image
 Domain Information Registrar Information Registrant Contact
 Enregistrez votre domaine gratuitement Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes::  Domain Information Registrar Information Registrant Contact
+corriger toutes les erreurs des bouton non cliquable qui ne fonction pas
+je veux recherche en automatique