|
|
<!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> |
