Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bureau d'Enregistrement Gratuit</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, #4f46e5, #7c3aed); | |
| } | |
| .domain-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); | |
| } | |
| .website-preview { | |
| border: 1px solid #e5e7eb; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background-color: #e5e7eb; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-value { | |
| height: 100%; | |
| background: linear-gradient(90deg, #4f46e5, #7c3aed); | |
| border-radius: 3px; | |
| transition: width 0.3s ease; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .animate-spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| .dns-record-row:hover { | |
| background-color: #f9fafb; | |
| } | |
| .cart-item:hover { | |
| background-color: #f8f9fa; | |
| } | |
| .subscription-card { | |
| transition: all 0.3s ease; | |
| } | |
| .subscription-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .selected-subscription { | |
| border: 2px solid #4f46e5; | |
| background-color: #f5f3ff; | |
| } | |
| .admin-badge { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| background-color: #10B981; | |
| color: white; | |
| border-radius: 9999px; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-globe text-3xl"></i> | |
| <h1 class="text-2xl font-bold">FreeDomain Registry</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full"> | |
| <i class="fas fa-bolt mr-1"></i> Services 100% Gratuits | |
| </span> | |
| <button id="cart-btn" class="relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span> | |
| </button> | |
| <button id="login-btn" class="px-3 py-1 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30"> | |
| <i class="fas fa-user mr-1"></i> Connexion | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-16 mb-16 text-center"> | |
| <h2 class="text-4xl font-bold mb-4">Enregistrez votre domaine gratuitement</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes</p> | |
| <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden"> | |
| <div class="flex"> | |
| <input type="text" id="domain-input" placeholder="VotreNomDeDomaine" | |
| class="flex-1 px-6 py-4 text-gray-800 focus:outline-none text-lg"> | |
| <button id="check-domain-btn" class="px-8 py-4 bg-purple-600 text-white font-bold hover:bg-purple-700"> | |
| <i class="fas fa-search mr-2"></i> Vérifier | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex flex-wrap justify-center gap-2"> | |
| <span class="text-sm text-white text-opacity-80">Extensions populaires:</span> | |
| <button class="tld-btn text-sm px-3 py-1 bg-white bg-opacity-10 rounded-full hover:bg-opacity-20" data-tld=".free">.free</button> | |
| <button class="tld-btn text-sm px-3 py-1 bg-white bg-opacity-10 rounded-full hover:bg-opacity-20" data-tld=".web">.web</button> | |
| <button class="tld-btn text-sm px-3 py-1 bg-white bg-opacity-10 rounded-full hover:bg-opacity-20" data-tld=".site">.site</button> | |
| <button class="tld-btn text-sm px-3 py-1 bg-white bg-opacity-10 rounded-full hover:bg-opacity-20" data-tld=".online">.online</button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Subscription Modal --> | |
| <div id="subscription-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"> | |
| <div class="flex justify-between items-center p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800">Choisissez votre abonnement</h3> | |
| <button id="close-subscription-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-6">Pour utiliser nos services gratuitement, vous devez choisir un abonnement. L'abonnement de base est gratuit, mais vous pouvez également opter pour nos offres premium.</p> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="subscription-card border border-gray-200 rounded-lg p-6 cursor-pointer" data-plan="free"> | |
| <div class="text-center mb-4"> | |
| <h4 class="text-xl font-bold text-gray-800">Gratuit</h4> | |
| <p class="text-3xl font-bold text-purple-600">€0<span class="text-sm font-normal text-gray-500">/mois</span></p> | |
| </div> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> 1 domaine gratuit</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> 1GB de stockage</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> 10GB de bande passante</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> SSL inclus</li> | |
| <li><i class="fas fa-times text-red-500 mr-2"></i> Support prioritaire</li> | |
| <li><i class="fas fa-times text-red-500 mr-2"></i> Emails professionnels</li> | |
| </ul> | |
| <button class="w-full mt-4 px-4 py-2 bg-gray-200 text-gray-800 rounded-lg font-medium"> | |
| Sélectionné | |
| </button> | |
| </div> | |
| <div class="subscription-card border border-gray-200 rounded-lg p-6 cursor-pointer" data-plan="pro"> | |
| <div class="text-center mb-4"> | |
| <h4 class="text-xl font-bold text-gray-800">Pro</h4> | |
| <p class="text-3xl font-bold text-purple-600">€9.99<span class="text-sm font-normal text-gray-500">/mois</span></p> | |
| </div> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> 5 domaines</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> 10GB de stockage</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> 100GB de bande passante</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> SSL inclus</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> Support prioritaire</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> 5 emails professionnels</li> | |
| </ul> | |
| <button class="w-full mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium"> | |
| Choisir | |
| </button> | |
| </div> | |
| <div class="subscription-card border border-gray-200 rounded-lg p-6 cursor-pointer" data-plan="business"> | |
| <div class="text-center mb-4"> | |
| <h4 class="text-xl font-bold text-gray-800">Business</h4> | |
| <p class="text-3xl font-bold text-purple-600">€19.99<span class="text-sm font-normal text-gray-500">/mois</span></p> | |
| </div> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> Domaines illimités</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> Stockage illimité</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> Bande passante illimitée</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> SSL inclus</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> Support 24/7</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i> Emails professionnels illimités</li> | |
| </ul> | |
| <button class="w-full mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium"> | |
| Choisir | |
| </button> | |
| </div> | |
| </div> | |
| <div id="payment-section" class="hidden"> | |
| <h4 class="text-lg font-bold text-gray-800 mb-4">Méthode de paiement</h4> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <input id="paypal-method" type="radio" name="payment-method" value="paypal" class="mr-2" checked> | |
| <label for="paypal-method" class="font-medium">PayPal</label> | |
| </div> | |
| <div id="paypal-button-container" class="mt-2"></div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <input id="stripe-method" type="radio" name="payment-method" value="stripe" class="mr-2"> | |
| <label for="stripe-method" class="font-medium">Carte de crédit (Stripe)</label> | |
| </div> | |
| <div id="stripe-payment-element" class="mt-2"> | |
| <!-- Stripe Elements will be inserted here --> | |
| </div> | |
| <button id="stripe-submit-btn" class="w-full mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium hidden"> | |
| Payer avec Stripe | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h5 class="font-medium text-gray-700 mb-2">Récapitulatif de commande</h5> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-600">Abonnement:</span> | |
| <span id="order-plan" class="font-medium">Gratuit</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-600">Période:</span> | |
| <span id="order-period" class="font-medium">1 mois</span> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-200 pt-2 mt-2"> | |
| <span class="text-gray-600">Total:</span> | |
| <span id="order-total" class="font-bold text-lg">€0.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Login Modal --> | |
| <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-md"> | |
| <div class="flex justify-between items-center p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800">Connexion</h3> | |
| <button id="close-login-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form id="login-form" class="space-y-4"> | |
| <div> | |
| <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label> | |
| <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input id="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> | |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700">Se souvenir de moi</label> | |
| </div> | |
| <a href="#" class="text-sm text-purple-600 hover:text-purple-800">Mot de passe oublié?</a> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium"> | |
| Se connecter | |
| </button> | |
| </div> | |
| <div class="text-center text-sm text-gray-600"> | |
| Pas encore de compte? <a href="#" id="show-register-btn" class="text-purple-600 hover:text-purple-800">S'inscrire</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Register Modal --> | |
| <div id="register-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-md"> | |
| <div class="flex justify-between items-center p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800">Créer un compte</h3> | |
| <button id="close-register-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form id="register-form" class="space-y-4"> | |
| <div> | |
| <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label> | |
| <input type="text" id="register-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="register-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label> | |
| <input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirmer le mot de passe</label> | |
| <input type="password" id="register-confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="accept-terms" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" required> | |
| <label for="accept-terms" class="ml-2 block text-sm text-gray-700"> | |
| J'accepte les <a href="#" class="text-purple-600 hover:text-purple-800">conditions générales</a> | |
| </label> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium"> | |
| S'inscrire | |
| </button> | |
| </div> | |
| <div class="text-center text-sm text-gray-600"> | |
| Déjà un compte? <a href="#" id="show-login-btn" class="text-purple-600 hover:text-purple-800">Se connecter</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cart Sidebar --> | |
| <div id="cart-sidebar" class="fixed inset-y-0 right-0 w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50"> | |
| <div class="flex flex-col h-full"> | |
| <div class="flex justify-between items-center p-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-bold text-gray-800">Votre panier</h3> | |
| <button id="close-cart-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="cart-items" class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <!-- Cart items will be inserted here --> | |
| <div class="text-center text-gray-500 py-8"> | |
| <i class="fas fa-shopping-cart text-4xl mb-2"></i> | |
| <p>Votre panier est vide</p> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Sous-total:</span> | |
| <span id="cart-subtotal" class="font-medium">€0.00</span> | |
| </div> | |
| <div class="flex justify-between mb-4"> | |
| <span class="text-gray-600">Taxes:</span> | |
| <span id="cart-tax" class="font-medium">€0.00</span> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-200 pt-2 mb-4"> | |
| <span class="text-gray-600 font-bold">Total:</span> | |
| <span id="cart-total" class="font-bold text-lg">€0.00</span> | |
| </div> | |
| <button id="checkout-btn" class="w-full px-4 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium disabled:opacity-50" disabled> | |
| Passer la commande | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Domain Results Section --> | |
| <section id="domain-results" class="container mx-auto px-4 py-16 hidden"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800">Résultats pour <span id="searched-domain" class="text-purple-600"></span></h3> | |
| </div> | |
| <div id="domain-options" class="p-6"> | |
| <!-- Domain options will be inserted here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Registration Form --> | |
| <section id="registration-form" class="container mx-auto px-4 py-16 hidden"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800">Configuration de votre domaine</h3> | |
| <p class="text-sm text-gray-600">Remplissez ce formulaire pour activer votre domaine gratuit</p> | |
| </div> | |
| <form id="domain-registration-form" class="p-6 grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="domain-name" class="block text-sm font-medium text-gray-700 mb-1">Nom de domaine complet</label> | |
| <input type="text" id="domain-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg" readonly> | |
| </div> | |
| <div> | |
| <label for="domain-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="domain-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="domain-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label> | |
| <input type="password" id="domain-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label for="domain-template" class="block text-sm font-medium text-gray-700 mb-1">Modèle de site</label> | |
| <select id="domain-template" class="w-full px-4 py-2 border border-gray-300 rounded-lg"> | |
| <option value="portfolio">Portfolio</option> | |
| <option value="blog">Blog</option> | |
| <option value="business">Site d'entreprise</option> | |
| <option value="ecommerce">Boutique en ligne</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="terms-check" type="checkbox" class="focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 rounded" required> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="terms-check" class="font-medium text-gray-700">J'accepte les <a href="#" class="text-purple-600 hover:text-purple-800">conditions générales</a></label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2 pt-4"> | |
| <button type="submit" class="w-full px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg"> | |
| <i class="fas fa-rocket mr-2"></i> Activer mon domaine gratuitement | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Deployment Progress --> | |
| <section id="deployment-progress" class="container mx-auto px-4 py-16 hidden"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800">Déploiement en cours</h3> | |
| <p class="text-sm text-gray-600">Votre domaine et tous les services associés sont en cours d'activation</p> | |
| </div> | |
| <div class="p-6 space-y-6"> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Enregistrement du domaine</span> | |
| <span id="domain-status" class="text-sm text-gray-500">En cours...</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="domain-progress" class="progress-value" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Configuration des serveurs DNS</span> | |
| <span id="dns-status" class="text-sm text-gray-500">En attente...</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="dns-progress" class="progress-value" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Génération du certificat SSL</span> | |
| <span id="ssl-status" class="text-sm text-gray-500">En attente...</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="ssl-progress" class="progress-value" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Déploiement du site web</span> | |
| <span id="site-status" class="text-sm text-gray-500">En attente...</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="site-progress" class="progress-value" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div id="deployment-complete" class="hidden text-center py-8"> | |
| <div class="inline-block bg-green-100 text-green-800 p-4 rounded-full mb-4"> | |
| <i class="fas fa-check-circle text-3xl"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Déploiement terminé avec succès!</h4> | |
| <p class="text-gray-600 mb-6">Votre site est maintenant en ligne avec tous les services activés.</p> | |
| <a id="view-site-btn" href="#" target="_blank" class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg inline-block"> | |
| <i class="fas fa-external-link-alt mr-2"></i> Voir mon site | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Website Preview --> | |
| <section id="website-preview" class="container mx-auto px-4 py-16 hidden"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800">Votre site est en ligne!</h3> | |
| <p class="text-sm text-gray-600">Voici un aperçu de votre site web déployé instantanément</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="website-preview rounded-lg overflow-hidden mx-auto max-w-4xl"> | |
| <div class="bg-gray-100 p-2 flex items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="flex-1 text-center"> | |
| <span id="preview-url" class="text-sm font-medium text-gray-700">https://</span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 h-96 overflow-auto"> | |
| <div id="template-preview"> | |
| <!-- Template content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 grid md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-bold text-gray-800 mb-2">Informations du domaine</h4> | |
| <ul class="space-y-1 text-sm text-gray-600"> | |
| <li><strong>Nom:</strong> <span id="info-domain"></span></li> | |
| <li><strong>Enregistré le:</strong> <span id="info-date"></span></li> | |
| <li><strong>Expire le:</strong> <span id="info-expiry"></span></li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-bold text-gray-800 mb-2">Services activés</h4> | |
| <ul class="space-y-1 text-sm text-gray-600"> | |
| <li><i class="fas fa-check-circle text-green-500 mr-1"></i> Hébergement web</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-1"></i> Certificat SSL</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-1"></i> Serveurs DNS</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-1"></i> Email professionnel</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-bold text-gray-800 mb-2">Accès administrateur</h4> | |
| <ul class="space-y-1 text-sm text-gray-600"> | |
| <li><strong>URL:</strong> <a href="#" id="admin-url" class="text-purple-600 hover:text-purple-800">votredomaine.free/admin</a></li> | |
| <li><strong>Email:</strong> <span id="info-email"></span></li> | |
| </ul> | |
| <button id="control-panel-btn" class="mt-3 w-full px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded"> | |
| <i class="fas fa-cog mr-1"></i> Panel de contrôle | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Control Panel Modal --> | |
| <div id="control-panel-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden"> | |
| <div class="flex justify-between items-center p-4 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800">Panel de contrôle - <span id="panel-domain-name"></span></h3> | |
| <button id="close-panel-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-y-auto h-[80vh]"> | |
| <div class="grid md:grid-cols-4 gap-1 bg-gray-100 p-1"> | |
| <button class="panel-tab-btn px-4 py-2 bg-white text-purple-600 font-medium" data-tab="dns"> | |
| <i class="fas fa-server mr-2"></i> DNS | |
| </button> | |
| <button class="panel-tab-btn px-4 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200" data-tab="website"> | |
| <i class="fas fa-globe mr-2"></i> Site Web | |
| </button> | |
| <button class="panel-tab-btn px-4 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200" data-tab="email"> | |
| <i class="fas fa-envelope mr-2"></i> Emails | |
| </button> | |
| <button class="panel-tab-btn px-4 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200" data-tab="settings"> | |
| <i class="fas fa-cog mr-2"></i> Paramètres | |
| </button> | |
| </div> | |
| <!-- DNS Tab Content --> | |
| <div id="dns-tab" class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h4 class="text-lg font-bold text-gray-800">Gestion des enregistrements DNS</h4> | |
| <button id="add-dns-record-btn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un enregistrement | |
| </button> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4 mb-6"> | |
| <h5 class="font-medium text-gray-700 mb-2">Serveurs DNS</h5> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div class="bg-white p-3 rounded border border-gray-200"> | |
| <p class="text-sm text-gray-500">Serveur DNS principal</p> | |
| <p class="font-mono text-purple-600">ns1.freedomain.registry</p> | |
| </div> | |
| <div class="bg-white p-3 rounded border border-gray-200"> | |
| <p class="text-sm text-gray-500">Serveur DNS secondaire</p> | |
| <p class="font-mono text-purple-600">ns2.freedomain.registry</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valeur</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">TTL</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="dns-records-table" class="bg-white divide-y divide-gray-200"> | |
| <!-- DNS records will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Add DNS Record Modal --> | |
| <div id="add-dns-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-md"> | |
| <div class="p-6"> | |
| <h4 class="text-lg font-bold text-gray-800 mb-4">Ajouter un enregistrement DNS</h4> | |
| <form id="add-dns-form" class="space-y-4"> | |
| <div> | |
| <label for="record-type" class="block text-sm font-medium text-gray-700 mb-1">Type</label> | |
| <select id="record-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg"> | |
| <option value="A">A (Adresse IPv4)</option> | |
| <option value="AAAA">AAAA (Adresse IPv6)</option> | |
| <option value="CNAME">CNAME (Alias)</option> | |
| <option value="MX">MX (Mail Exchange)</option> | |
| <option value="TXT">TXT (Texte)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="record-name" class="block text-sm font-medium text-gray-700 mb-1">Nom</label> | |
| <input type="text" id="record-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Ex: www ou @ pour le domaine principal"> | |
| </div> | |
| <div> | |
| <label for="record-value" class="block text-sm font-medium text-gray-700 mb-1">Valeur</label> | |
| <input type="text" id="record-value" class="w-full px-4 py-2 border border-gray-300 rounded-lg | |
| </html> |