| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MegaAI - Domaine Gratuit + Générateur de Sites Web IA</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
| } |
| .ai-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| .ai-card: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); |
| } |
| .dashboard-nav { |
| height: calc(100vh - 4rem); |
| } |
| .preview-frame { |
| border: 1px solid #e5e7eb; |
| border-radius: 0.5rem; |
| height: 500px; |
| background: white; |
| } |
| .loading-spinner { |
| animation: spin 1s linear infinite; |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| .domain-checker-input { |
| border-top-right-radius: 0; |
| border-bottom-right-radius: 0; |
| } |
| .domain-checker-btn { |
| border-top-left-radius: 0; |
| border-bottom-left-radius: 0; |
| } |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| .fade-in { |
| animation: fadeIn 0.5s ease-in; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| button:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
| .free-domain-badge { |
| position: absolute; |
| top: -10px; |
| right: -10px; |
| background: #10b981; |
| color: white; |
| padding: 3px 8px; |
| border-radius: 9999px; |
| font-size: 12px; |
| font-weight: bold; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <nav class="gradient-bg text-white shadow-lg sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-robot text-3xl"></i> |
| <span class="text-2xl font-bold">MegaAI</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a> |
| <a href="#free-domain" class="hover:text-gray-200 transition">Domaine Gratuit</a> |
| <a href="#templates" class="hover:text-gray-200 transition">Modèles</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="#" id="loginBtn" class="hover:text-gray-200 transition">Connexion</a> |
| <a href="#" id="signupBtn" class="bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition pulse">Inscription Gratuite</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="gradient-bg text-white py-20"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-5xl md:text-6xl font-bold mb-6">Domaine Gratuit + Site Web IA</h1> |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Obtenez un domaine GRATUIT pour 1 an et notre IA construira votre site web professionnel en quelques minutes.</p> |
| <div class="flex flex-col md:flex-row justify-center max-w-2xl mx-auto"> |
| <input type="text" id="websiteDescription" placeholder="Décrivez le site web que vous souhaitez créer..." class="px-6 py-4 rounded-l-full w-full text-gray-800 focus:outline-none"> |
| <button id="generateBtn" class="bg-purple-800 hover:bg-purple-900 text-white px-8 py-4 rounded-r-full font-bold transition mt-2 md:mt-0 md:ml-2 flex items-center justify-center"> |
| <i class="fas fa-magic mr-2"></i> |
| Générer Maintenant |
| </button> |
| </div> |
| <div class="mt-8 flex justify-center space-x-4"> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle mr-2"></i> |
| <span>Domaine Gratuit</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle mr-2"></i> |
| <span>SSL Gratuit</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle mr-2"></i> |
| <span>Hébergement 1 mois offert</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="free-domain" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Obtenez Votre Domaine Gratuit</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Choisissez parmi ces extensions de domaine gratuites pour votre premier site web.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto"> |
| |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm border border-gray-200 relative"> |
| <div class="free-domain-badge">GRATUIT</div> |
| <div class="text-center"> |
| <div class="text-4xl font-bold mb-2">.SITE.GRATIS</div> |
| <div class="text-xl font-bold text-green-600 mb-4">0€/an</div> |
| <p class="text-gray-600 mb-4">Parfait pour les sites personnels et les portfolios</p> |
| <button class="select-free-domain w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition" data-domain=".site.gratis"> |
| Sélectionner |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm border border-gray-200 relative"> |
| <div class="free-domain-badge">GRATUIT</div> |
| <div class="text-center"> |
| <div class="text-4xl font-bold mb-2">.WEB.GRATUIT</div> |
| <div class="text-xl font-bold text-green-600 mb-4">0€/an</div> |
| <p class="text-gray-600 mb-4">Idéal pour les blogs et les petits business</p> |
| <button class="select-free-domain w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition" data-domain=".web.gratuit"> |
| Sélectionner |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm border border-gray-200 relative"> |
| <div class="free-domain-badge">GRATUIT</div> |
| <div class="text-center"> |
| <div class="text-4xl font-bold mb-2">.FREE.SITE</div> |
| <div class="text-xl font-bold text-green-600 mb-4">0€/an</div> |
| <p class="text-gray-600 mb-4">Excellent pour les projets temporaires et tests</p> |
| <button class="select-free-domain w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition" data-domain=".free.site"> |
| Sélectionner |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12 bg-purple-50 p-6 rounded-xl max-w-4xl mx-auto"> |
| <h3 class="text-xl font-bold mb-4 text-center">Comment obtenir votre domaine gratuit?</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-white p-4 rounded-lg text-center"> |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"> |
| <span class="text-purple-600 font-bold">1</span> |
| </div> |
| <p>Créez un compte gratuit</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg text-center"> |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"> |
| <span class="text-purple-600 font-bold">2</span> |
| </div> |
| <p>Choisissez votre domaine gratuit</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg text-center"> |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"> |
| <span class="text-purple-600 font-bold">3</span> |
| </div> |
| <p>Générez votre site avec l'IA</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="templates" class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Créez Votre Site Web en Quelques Minutes</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Regardez comment notre IA transforme votre description en un site web entièrement fonctionnel.</p> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <div class="lg:w-1/3 bg-white p-6 rounded-xl shadow-md"> |
| <h3 class="text-xl font-bold mb-4">Décrivez Votre Site Web</h3> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2">Type de Site Web</label> |
| <select id="websiteType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <option>Site Web d'Entreprise</option> |
| <option>Boutique en Ligne</option> |
| <option>Portfolio</option> |
| <option>Blog</option> |
| <option>Page de Destination</option> |
| <option>Autre</option> |
| </select> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2">Préférence de Style</label> |
| <div class="flex flex-wrap gap-2" id="styleButtons"> |
| <button class="px-3 py-1 bg-gray-200 rounded-full text-sm hover:bg-gray-300 style-btn">Moderne</button> |
| <button class="px-3 py-1 bg-gray-200 rounded-full text-sm hover:bg-gray-300 style-btn">Minimal</button> |
| <button class="px-3 py-1 bg-gray-200 rounded-full text-sm hover:bg-gray-300 style-btn">Audacieux</button> |
| <button class="px-3 py-1 bg-gray-200 rounded-full text-sm hover:bg-gray-300 style-btn">Élégant</button> |
| <button class="px-3 py-1 bg-gray-200 rounded-full text-sm hover:bg-gray-300 style-btn">Créatif</button> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2">Schéma de Couleurs</label> |
| <div class="flex gap-2" id="colorButtons"> |
| <div class="w-8 h-8 rounded-full bg-purple-600 cursor-pointer border-2 border-white shadow color-btn" data-color="purple"></div> |
| <div class="w-8 h-8 rounded-full bg-blue-600 cursor-pointer color-btn" data-color="blue"></div> |
| <div class="w-8 h-8 rounded-full bg-green-600 cursor-pointer color-btn" data-color="green"></div> |
| <div class="w-8 h-8 rounded-full bg-red-600 cursor-pointer color-btn" data-color="red"></div> |
| <div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer color-btn" data-color="yellow"></div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2">Décrivez Vos Besoins</label> |
| <textarea id="needsDescription" class="w-full px-4 py-2 border border-gray-300 rounded-lg h-32 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="J'ai besoin d'un site web moderne pour mon agence de marketing digital. Il devrait avoir une page de services, une section portfolio, une page à propos et un formulaire de contact. Nos couleurs de marque sont le violet et le blanc..."></textarea> |
| </div> |
| |
| <button id="generateWebsiteBtn" class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-700 transition flex items-center justify-center"> |
| <i class="fas fa-magic mr-2"></i> |
| Générer le Site Web |
| </button> |
| </div> |
| |
| |
| <div class="lg:w-2/3"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold">Aperçu Généré par IA</h3> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 bg-gray-200 rounded-lg text-sm device-btn active" data-device="desktop">Bureau</button> |
| <button class="px-3 py-1 bg-gray-200 rounded-lg text-sm device-btn" data-device="tablet">Tablette</button> |
| <button class="px-3 py-1 bg-gray-200 rounded-lg text-sm device-btn" data-device="mobile">Mobile</button> |
| </div> |
| </div> |
| |
| <div class="preview-frame relative overflow-hidden" id="previewFrame"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="text-center"> |
| <i class="fas fa-image text-gray-300 text-5xl mb-4"></i> |
| <p class="text-gray-600">Votre aperçu apparaîtra ici</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-4 flex justify-between"> |
| <button id="regenerateBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100" disabled> |
| <i class="fas fa-redo mr-2"></i> Régénérer |
| </button> |
| <div class="space-x-2"> |
| <button id="customizeBtn" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300" disabled> |
| <i class="fas fa-edit mr-2"></i> Personnaliser |
| </button> |
| <button id="publishBtn" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700" disabled> |
| <i class="fas fa-rocket mr-2"></i> Publier |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gradient-bg text-white py-16"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à Commencer avec Votre Domaine Gratuit?</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Créez un compte maintenant et obtenez immédiatement votre domaine gratuit pour 1 an.</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button id="freeTrialBtn" class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition">Obtenir Mon Domaine Gratuit</button> |
| <button id="liveDemoBtn" class="border-2 border-white px-8 py-4 rounded-full font-bold hover:bg-white hover:text-purple-600 transition">Voir Démo Live</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-robot text-2xl text-purple-400"></i> |
| <span class="text-xl font-bold">MegaAI</span> |
| </div> |
| <p class="text-gray-400">Le générateur de sites web IA avec domaine gratuit et solution d'hébergement complète.</p> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4">Produit</h4> |
| <ul class="space-y-2"> |
| <li><a href="#features" class="text-gray-400 hover:text-white">Fonctionnalités</a></li> |
| <li><a href="#free-domain" class="text-gray-400 hover:text-white">Domaine Gratuit</a></li> |
| <li><a href="#templates" class="text-gray-400 hover:text-white">Modèles</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4">Support</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4">Entreprise</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 MegaAI. Tous droits réservés.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg p-8 max-w-md w-full"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold">Connexion</h3> |
| <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <form> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Email</label> |
| <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2">Mot de passe</label> |
| <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| </div> |
| <button type="submit" class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-700 transition"> |
| Se connecter |
| </button> |
| </form> |
| <div class="mt-4 text-center"> |
| <a href="#" class="text-purple-600 hover:text-purple-800">Mot de passe oublié?</a> |
| </div> |
| <div class="mt-6 pt-4 border-t border-gray-200 text-center"> |
| <p class="text-gray-600">Pas encore de compte? <a href="#" id="switchToSignup" class="text-purple-600 hover:text-purple-800 font-medium">S'inscrire</a></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="signupModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg p-8 max-w-md w-full"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold">Inscription</h3> |
| <button id="closeSignupModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <form> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Nom complet</label> |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Email</label> |
| <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2">Mot de passe</label> |
| <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| </div> |
| <button type="submit" class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-700 transition"> |
| S'inscrire gratuitement |
| </button> |
| </form> |
| <div class="mt-6 pt-4 border-t border-gray-200 text-center"> |
| <p class="text-gray-600">Déjà un compte? <a href="#" id="switchToLogin" class="text-purple-600 hover:text-purple-800 font-medium">Se connecter</a></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg p-8 max-w-md w-full text-center"> |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-check text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-2">Félicitations!</h3> |
| <p class="text-gray-600 mb-6">Votre domaine gratuit a été enregistré et votre site web est maintenant en ligne.</p> |
| <button id="closeSuccessModal" class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition"> |
| Continuer |
| </button> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const loginBtn = document.getElementById('loginBtn'); |
| const signupBtn = document.getElementById('signupBtn'); |
| const loginModal = document.getElementById('loginModal'); |
| const signupModal = document.getElementById('signupModal'); |
| const successModal = document.getElementById('successModal'); |
| const closeLoginModal = document.getElementById('closeLoginModal'); |
| const closeSignupModal = document.getElementById('closeSignupModal'); |
| const closeSuccessModal = document.getElementById('closeSuccessModal'); |
| const switchToSignup = document.getElementById('switchToSignup'); |
| const switchToLogin = document.getElementById('switchToLogin'); |
| |
| |
| loginBtn.addEventListener('click', function(e) { |
| e.preventDefault(); |
| loginModal.classList.remove('hidden'); |
| }); |
| |
| |
| signupBtn.addEventListener('click', function(e) { |
| e.preventDefault(); |
| signupModal.classList.remove('hidden'); |
| }); |
| |
| |
| closeLoginModal.addEventListener('click', function() { |
| loginModal.classList.add('hidden'); |
| }); |
| |
| closeSignupModal.addEventListener('click', function() { |
| signupModal.classList.add('hidden'); |
| }); |
| |
| closeSuccessModal.addEventListener('click', function() { |
| successModal.classList.add('hidden'); |
| }); |
| |
| |
| switchToSignup.addEventListener('click', function(e) { |
| e.preventDefault(); |
| loginModal.classList.add('hidden'); |
| signupModal.classList.remove('hidden'); |
| }); |
| |
| switchToLogin.addEventListener('click', function(e) { |
| e.preventDefault(); |
| signupModal.classList.add('hidden'); |
| loginModal.classList.remove('hidden'); |
| }); |
| |
| |
| const freeDomainButtons = document.querySelectorAll('.select-free-domain'); |
| freeDomainButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| const domainExtension = this.getAttribute('data-domain'); |
| const domainName = prompt(`Entrez le nom de votre domaine (avant ${domainExtension}):`, 'mon-site'); |
| |
| if (domainName) { |
| const fullDomain = domainName + domainExtension; |
| alert(`Félicitations! Vous avez réservé le domaine ${fullDomain} gratuitement pour 1 an.`); |
| successModal.classList.remove('hidden'); |
| } |
| }); |
| }); |
| |
| |
| const generateWebsiteBtn = document.getElementById('generateWebsiteBtn'); |
| const previewFrame = document.getElementById('previewFrame'); |
| const regenerateBtn = document.getElementById('regenerateBtn'); |
| const customizeBtn = document.getElementById('customizeBtn'); |
| const publishBtn = document.getElementById('publishBtn'); |
| |
| generateWebsiteBtn.addEventListener('click', function() { |
| const description = document.getElementById('needsDescription').value; |
| if (description.trim() !== '') { |
| |
| previewFrame.innerHTML = ` |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="text-center"> |
| <div class="loading-spinner inline-block w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full mb-4"></div> |
| <p class="text-gray-600">100 000 IA travaillent sur votre site web</p> |
| <p class="text-sm text-gray-500 mt-2">Temps estimé: 47 secondes</p> |
| </div> |
| </div> |
| `; |
| |
| |
| generateWebsiteBtn.disabled = true; |
| generateWebsiteBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700'); |
| generateWebsiteBtn.classList.add('bg-gray-400', 'cursor-not-allowed'); |
| |
| |
| setTimeout(() => { |
| previewFrame.innerHTML = ` |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="text-center p-4"> |
| <i class="fas fa-check-circle text-green-500 text-5xl mb-4"></i> |
| <h3 class="text-xl font-bold mb-2">Site Web Généré!</h3> |
| <p class="text-gray-600 mb-4">Votre site web est prêt à être personnalisé et publié.</p> |
| <button class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700"> |
| Voir le Site |
| </button> |
| </div> |
| </div> |
| `; |
| |
| |
| regenerateBtn.disabled = false; |
| customizeBtn.disabled = false; |
| publishBtn.disabled = false; |
| generateWebsiteBtn.disabled = false; |
| generateWebsiteBtn.classList.add('bg-purple-600', 'hover:bg-purple-700'); |
| generateWebsiteBtn.classList.remove('bg-gray-400', 'cursor-not-allowed'); |
| }, 3000); |
| } else { |
| alert('Veuillez décrire votre site web avant de générer.'); |
| } |
| }); |
| |
| |
| publishBtn.addEventListener('click', function() { |
| successModal.classList.remove('hidden'); |
| }); |
| |
| |
| const freeTrialBtn = document.getElementById('freeTrialBtn'); |
| const liveDemoBtn = document.getElementById('liveDemoBtn'); |
| |
| freeTrialBtn.addEventListener('click', function() { |
| signupModal.classList.remove('hidden'); |
| }); |
| |
| liveDemoBtn.addEventListener('click', function() { |
| alert('Démo live en cours de chargement...'); |
| }); |
| |
| |
| const styleButtons = document.querySelectorAll('.style-btn'); |
| styleButtons.forEach(btn => { |
| btn.addEventListener('click', function() { |
| styleButtons.forEach(b => b.classList.remove('bg-purple-600', 'text-white')); |
| this.classList.add('bg-purple-600', 'text-white'); |
| }); |
| }); |
| |
| |
| const colorButtons = document.querySelectorAll('.color-btn'); |
| colorButtons.forEach(btn => { |
| btn.addEventListener('click', function() { |
| colorButtons.forEach(b => b.classList.remove('border-2', 'border-white', 'shadow')); |
| this.classList.add('border-2', 'border-white', 'shadow'); |
| }); |
| }); |
| |
| |
| const deviceButtons = document.querySelectorAll('.device-btn'); |
| deviceButtons.forEach(btn => { |
| btn.addEventListener('click', function() { |
| deviceButtons.forEach(b => b.classList.remove('bg-purple-600', 'text-white')); |
| this.classList.add('bg-purple-600', 'text-white'); |
| |
| |
| const device = this.getAttribute('data-device'); |
| const preview = document.getElementById('previewFrame'); |
| |
| if (device === 'desktop') { |
| preview.style.width = '100%'; |
| } else if (device === 'tablet') { |
| preview.style.width = '768px'; |
| } else if (device === 'mobile') { |
| preview.style.width = '375px'; |
| } |
| }); |
| }); |
| |
| |
| const aiCards = document.querySelectorAll('.ai-card'); |
| aiCards.forEach((card, index) => { |
| card.style.transitionDelay = `${index * 0.1}s`; |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const targetId = this.getAttribute('href'); |
| if (targetId !== '#') { |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| } |
| } |
| }); |
| }); |
| }); |
| </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/mega-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
