Download index.html from docto41/wordpress: direct link, hf CLI and curl.
- Browser
- Download file 62.6 kB
-
https://huggingface.co/spaces/docto41/wordpress/resolve/main/index.html
- Command line
-
hf download hf://spaces/docto41/wordpress/index.html
-
curl -L -o index.html https://huggingface.co/spaces/docto41/wordpress/resolve/main/index.html
62.6 kB
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Enregistrement de Domaine Instantané</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes gradientBG { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| @keyframes shine { | |
| 0% { background-position: -200%; } | |
| 100% { background-position: 200%; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(-45deg, | |
| #3f51b5, #9c27b0, #e91e63, #ff5722, #ff9800, | |
| #ffeb3b, #8bc34a, #4caf50, #009688, #00bcd4, | |
| #03a9f4, #2196f3, #3f51b5); | |
| background-size: 400% 400%; | |
| animation: gradientBG 20s ease infinite; | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| .shine-effect { | |
| background: linear-gradient(90deg, | |
| transparent, rgba(255,255,255,0.2), transparent); | |
| background-size: 200% auto; | |
| animation: shine 3s linear infinite; | |
| } | |
| .glow { | |
| filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(255,255,255,0.5); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| .domain-selector { | |
| position: relative; | |
| } | |
| .domain-options { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: rgba(255,255,255,0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 0 0 0.5rem 0.5rem; | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| z-index: 20; | |
| } | |
| .domain-selector.open .domain-options { | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .domain-option { | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .domain-option:hover { | |
| background: rgba(255,255,255,0.2); | |
| } | |
| .domain-option.popular { | |
| color: #f59e0b; | |
| font-weight: bold; | |
| } | |
| .card { | |
| background: rgba(255,255,255,0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), | |
| 0 10px 10px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Styles pour le panier */ | |
| .cart-item { | |
| transition: all 0.3s ease; | |
| } | |
| .cart-item:hover { | |
| background: rgba(255,255,255,0.15); | |
| } | |
| /* Styles pour les onglets */ | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .tab-button.active { | |
| border-bottom: 2px solid white; | |
| font-weight: bold; | |
| } | |
| /* Animation pour le panier */ | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); } | |
| to { transform: translateX(0); } | |
| } | |
| .cart-slide-in { | |
| animation: slideIn 0.3s forwards; | |
| } | |
| /* Progress bar */ | |
| .progress-container { | |
| width: 100%; | |
| height: 8px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, #4ade80, #3b82f6); | |
| border-radius: 4px; | |
| transition: width 0.3s ease; | |
| } | |
| /* Status badges */ | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .status-active { | |
| background-color: rgba(74, 222, 128, 0.1); | |
| color: #4ade80; | |
| } | |
| .status-pending { | |
| background-color: rgba(251, 191, 36, 0.1); | |
| color: #fbbf24; | |
| } | |
| .status-secure { | |
| background-color: rgba(16, 185, 129, 0.1); | |
| color: #10b981; | |
| } | |
| /* Resource usage card */ | |
| .resource-card { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .resource-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| } | |
| /* Speed test card */ | |
| .speed-test-card { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(124, 58, 237, 0.1)); | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| } | |
| /* Security card */ | |
| .security-card { | |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1)); | |
| border: 1px solid rgba(16, 185, 129, 0.2); | |
| } | |
| /* Payment methods */ | |
| .payment-method { | |
| transition: all 0.3s ease; | |
| } | |
| .payment-method:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Subscription modal */ | |
| .subscription-modal { | |
| transition: all 0.3s ease; | |
| } | |
| .subscription-modal.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .subscription-modal.visible { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg text-white font-sans overflow-x-hidden relative"> | |
| <!-- Particules animées --> | |
| <div id="particles"></div> | |
| <!-- Modal d'abonnement obligatoire --> | |
| <div id="subscription-modal" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center p-4 subscription-modal visible"> | |
| <div class="bg-gray-800 rounded-xl max-w-md w-full p-8"> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-user-plus text-5xl text-blue-500 mb-4"></i> | |
| <h2 class="text-2xl font-bold">Inscription Requise</h2> | |
| <p class="text-gray-400 mt-2">Créez un compte gratuit pour accéder à nos services</p> | |
| </div> | |
| <form id="signup-form" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" required class="w-full px-4 py-2 bg-gray-700 rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Mot de passe</label> | |
| <input type="password" required class="w-full px-4 py-2 bg-gray-700 rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="terms" required class="mr-2"> | |
| <label for="terms" class="text-sm">J'accepte les <a href="#" class="text-blue-400 hover:underline">conditions d'utilisation</a></label> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-blue-600 rounded-lg font-bold hover:bg-blue-700 transition"> | |
| S'inscrire gratuitement | |
| </button> | |
| </form> | |
| <div class="mt-6 text-center text-sm text-gray-400"> | |
| Déjà inscrit? <a href="#" id="login-link" class="text-blue-400 hover:underline">Se connecter</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contenu principal (caché jusqu'à l'inscription) --> | |
| <div id="main-content" class="hidden"> | |
| <!-- Panier latéral --> | |
| <div id="side-cart" class="fixed top-0 right-0 h-full w-80 bg-gray-800 shadow-xl z-40 transform translate-x-full transition-transform duration-300"> | |
| <div class="p-4 h-full flex flex-col"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Votre panier</h3> | |
| <button id="close-cart" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="cart-items" class="flex-1 overflow-y-auto"> | |
| <!-- Les éléments du panier seront ajoutés ici dynamiquement --> | |
| </div> | |
| <div class="border-t border-gray-700 pt-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Sous-total</span> | |
| <span class="font-bold" id="cart-subtotal">0,00€</span> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2" checked id="auto-renewal"> | |
| <span class="text-sm">Renouvellement automatique</span> | |
| </label> | |
| </div> | |
| <button id="checkout-paypal" class="w-full py-3 bg-blue-500 rounded-lg mb-2 flex items-center justify-center hover:bg-blue-600"> | |
| <i class="fab fa-paypal mr-2"></i> Payer avec PayPal | |
| </button> | |
| <button id="checkout-stripe" class="w-full py-3 bg-purple-500 rounded-lg flex items-center justify-center hover:bg-purple-600"> | |
| <i class="fab fa-cc-stripe mr-2"></i> Payer avec Stripe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contenu principal --> | |
| <div class="container mx-auto px-4 py-12 relative z-10"> | |
| <!-- En-tête --> | |
| <header class="text-center mb-12"> | |
| <div class="floating inline-block mb-6"> | |
| <div class="relative"> | |
| <i class="fas fa-globe text-6xl glow"></i> | |
| <div class="absolute -inset-4 rounded-full border-2 border-white border-opacity-20 animate-spin-slow"></div> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 glow">Enregistrez Votre Domaine</h1> | |
| <p class="text-xl opacity-90 max-w-3xl mx-auto">Obtenez votre nom de domaine en quelques secondes avec notre service instantané</p> | |
| </header> | |
| <!-- Carte de recherche de domaine --> | |
| <div class="max-w-2xl mx-auto card rounded-2xl overflow-hidden shadow-xl relative"> | |
| <div class="absolute inset-0 shine-effect opacity-30"></div> | |
| <div class="p-8 relative z-10"> | |
| <h2 class="text-2xl font-bold mb-6">Vérifiez la disponibilité</h2> | |
| <div class="flex domain-selector" id="domain-selector"> | |
| <input type="text" class="flex-1 px-4 py-3 rounded-l-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="votredomaine"> | |
| <div class="px-4 py-3 bg-white bg-opacity-30 border-t border-r border-b border-white border-opacity-30 rounded-r-lg flex items-center justify-between cursor-pointer" id="domain-tld"> | |
| <span>.com</span> | |
| <i class="fas fa-chevron-down ml-2 text-xs"></i> | |
| </div> | |
| <div class="domain-options"> | |
| <div class="domain-option popular" data-tld=".com">.com</div> | |
| <div class="domain-option popular" data-tld=".fr">.fr</div> | |
| <div class="domain-option popular" data-tld=".net">.net</div> | |
| <div class="domain-option" data-tld=".io">.io</div> | |
| <div class="domain-option" data-tld=".org">.org</div> | |
| <div class="domain-option" data-tld=".tech">.tech</div> | |
| <div class="domain-option" data-tld=".store">.store</div> | |
| <div class="domain-option" data-tld=".online">.online</div> | |
| <div class="domain-option" data-tld=".shop">.shop</div> | |
| <div class="domain-option" data-tld=".blog">.blog</div> | |
| </div> | |
| </div> | |
| <button id="check-availability" class="pulse w-full mt-6 px-6 py-3 bg-white text-blue-600 rounded-lg font-bold hover:bg-opacity-90 transform transition-all duration-300 hover:scale-105 shadow-lg glow"> | |
| <i class="fas fa-search mr-2"></i> Vérifier la disponibilité | |
| </button> | |
| <div class="mt-6 grid grid-cols-2 gap-4"> | |
| <div class="bg-white bg-opacity-10 p-3 rounded-lg"> | |
| <div class="text-xs opacity-70">Prix pour</div> | |
| <div class="font-bold" id="selected-domain">votredomaine.com</div> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-3 rounded-lg"> | |
| <div class="text-xs opacity-70">Prix</div> | |
| <div class="font-bold">9,99€/an</div> | |
| </div> | |
| </div> | |
| <!-- Section panier (cachée par défaut) --> | |
| <div id="domain-available" class="hidden mt-6"> | |
| <div class="bg-green-500 bg-opacity-20 p-4 rounded-lg mb-4 flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Ce domaine est disponible!</span> | |
| </div> | |
| <button id="add-to-cart" class="w-full py-3 bg-blue-600 rounded-lg font-bold hover:bg-blue-700 transition flex items-center justify-center"> | |
| <i class="fas fa-cart-plus mr-2"></i> Ajouter au panier | |
| </button> | |
| </div> | |
| <!-- Section domaine non disponible --> | |
| <div id="domain-not-available" class="hidden mt-6"> | |
| <div class="bg-red-500 bg-opacity-20 p-4 rounded-lg mb-4 flex items-center"> | |
| <i class="fas fa-times-circle text-red-400 mr-2"></i> | |
| <span>Ce domaine n'est pas disponible</span> | |
| </div> | |
| <button id="suggest-alternatives" class="w-full py-3 bg-purple-600 rounded-lg font-bold hover:bg-purple-700 transition"> | |
| Voir des alternatives | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Domaines populaires --> | |
| <div class="max-w-4xl mx-auto mt-16"> | |
| <h2 class="text-2xl font-bold text-center mb-6">Extensions populaires</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-4"> | |
| <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer" data-domain=".com" data-price="9.99"> | |
| <div class="text-2xl font-bold">.com</div> | |
| <div class="text-sm opacity-80">9,99€/an</div> | |
| </div> | |
| <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer" data-domain=".fr" data-price="7.99"> | |
| <div class="text-2xl font-bold">.fr</div> | |
| <div class="text-sm opacity-80">7,99€/an</div> | |
| </div> | |
| <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer" data-domain=".net" data-price="12.99"> | |
| <div class="text-2xl font-bold">.net</div> | |
| <div class="text-sm opacity-80">12,99€/an</div> | |
| </div> | |
| <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer" data-domain=".io" data-price="29.99"> | |
| <div class="text-2xl font-bold">.io</div> | |
| <div class="text-sm opacity-80">29,99€/an</div> | |
| </div> | |
| <div class="card p-4 text-center rounded-lg hover:bg-white hover:bg-opacity-20 cursor-pointer" data-domain=".org" data-price="10.99"> | |
| <div class="text-2xl font-bold">.org</div> | |
| <div class="text-sm opacity-80">10,99€/an</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tableau de bord (modal) --> | |
| <div id="dashboard-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-gray-800 rounded-xl max-w-6xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Tableau de bord</h2> | |
| <button id="close-dashboard" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Onglets --> | |
| <div class="flex border-b border-gray-700 mb-6"> | |
| <button class="tab-button active px-4 py-2" data-tab="domains">Mes domaines</button> | |
| <button class="tab-button px-4 py-2" data-tab="hosting">Hébergement</button> | |
| <button class="tab-button px-4 py-2" data-tab="payments">Paiements</button> | |
| <button class="tab-button px-4 py-2" data-tab="account">Mon compte</button> | |
| </div> | |
| <!-- Contenu des onglets --> | |
| <div id="domains" class="tab-content active"> | |
| <h3 class="text-xl font-bold mb-4">Mes domaines enregistrés</h3> | |
| <div id="registered-domains"> | |
| <!-- Les domaines enregistrés seront ajoutés ici dynamiquement --> | |
| </div> | |
| <p id="no-domains-message" class="text-gray-400">Vous n'avez pas de domaines enregistrés.</p> | |
| </div> | |
| <!-- Onglet Hébergement --> | |
| <div id="hosting" class="tab-content"> | |
| <h3 class="text-xl font-bold mb-4">Statut de l'hébergement</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- Carte Statut du domaine --> | |
| <div class="card resource-card p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-globe text-white"></i> | |
| </div> | |
| <h4 class="font-bold text-lg">Statut du domaine</h4> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Nom de domaine</span> | |
| <span class="font-medium">votredomaine.com</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Enregistré chez</span> | |
| <span class="font-medium">Autre hébergeur</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Statut</span> | |
| <span class="status-badge status-active"> | |
| <i class="fas fa-check-circle mr-1"></i> Actif | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Carte Services --> | |
| <div class="card resource-card p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-server text-white"></i> | |
| </div> | |
| <h4 class="font-bold text-lg">Services</h4> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Hébergement</span> | |
| <span class="status-badge status-active"> | |
| <i class="fas fa-check-circle mr-1"></i> Actif | |
| </span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Email</span> | |
| <span class="status-badge status-pending"> | |
| <i class="fas fa-clock mr-1"></i> En attente de configuration | |
| </span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Sauvegardes</span> | |
| <span class="font-medium">Hebdomadaire</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Carte Performances --> | |
| <div class="card speed-test-card p-6 rounded-lg mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-tachometer-alt text-white"></i> | |
| </div> | |
| <h4 class="font-bold text-lg">Performances</h4> | |
| </div> | |
| <button class="text-sm text-blue-400 hover:text-blue-300 flex items-center"> | |
| <i class="fas fa-sync-alt mr-1"></i> Faire un test de vitesse | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg"> | |
| <div class="text-gray-400 mb-1">Google PageSpeed</div> | |
| <div class="text-3xl font-bold text-green-400">100</div> | |
| <div class="text-sm text-gray-400">Appareil de bureau</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg"> | |
| <div class="text-gray-400 mb-1">Dernière analyse</div> | |
| <div class="text-xl font-bold">2025-03-26</div> | |
| <div class="text-sm text-gray-400">Performance optimale</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg"> | |
| <div class="text-gray-400 mb-1">Temps de réponse</div> | |
| <div class="text-xl font-bold">0.8s</div> | |
| <div class="text-sm text-gray-400">Très rapide</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Carte Sécurité --> | |
| <div class="card security-card p-6 rounded-lg mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-shield-alt text-white"></i> | |
| </div> | |
| <h4 class="font-bold text-lg">Sécurité</h4> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-gray-400">Statut SSL</span> | |
| <span class="status-badge status-secure"> | |
| <i class="fas fa-lock mr-1"></i> Le site web est sécurisé | |
| </span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-400">Analyse malware</span> | |
| <span class="text-green-400">Aucun logiciel malveillant trouvé</span> | |
| </div> | |
| <button class="mt-3 text-sm text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-search mr-1"></i> Voir les détails | |
| </button> | |
| </div> | |
| <div> | |
| <div class="text-gray-400 mb-2">Utilisation des ressources</div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>68% du total des ressources utilisées</span> | |
| <span class="text-sm font-bold">68%</span> | |
| </div> | |
| <div class="progress-container"> | |
| <div class="progress-bar" style="width: 68%"></div> | |
| </div> | |
| <button class="mt-2 text-sm text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-chart-bar mr-1"></i> Voir les détails | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Outils de gestion --> | |
| <h4 class="font-bold text-lg mb-4">Outils de gestion</h4> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="card p-4 rounded-lg text-center hover:bg-gray-700 cursor-pointer"> | |
| <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-folder text-white text-xl"></i> | |
| </div> | |
| <div class="font-medium">Gestionnaire de fichiers</div> | |
| </div> | |
| <div class="card p-4 rounded-lg text-center hover:bg-gray-700 cursor-pointer"> | |
| <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-database text-white text-xl"></i> | |
| </div> | |
| <div class="font-medium">Bases de données</div> | |
| </div> | |
| <div class="card p-4 rounded-lg text-center hover:bg-gray-700 cursor-pointer"> | |
| <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fab fa-wordpress text-white text-xl"></i> | |
| </div> | |
| <div class="font-medium">Aperçu de WordPress</div> | |
| </div> | |
| <div class="card p-4 rounded-lg text-center hover:bg-gray-700 cursor-pointer"> | |
| <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-cogs text-white text-xl"></i> | |
| </div> | |
| <div class="font-medium">Configuration automatique</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Onglet Paiements --> | |
| <div id="payments" class="tab-content"> | |
| <h3 class="text-xl font-bold mb-4">Historique des paiements</h3> | |
| <div class="mb-6"> | |
| <h4 class="font-bold mb-2">Méthodes de paiement</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div class="card payment-method bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fab fa-paypal text-2xl mr-3 text-blue-400"></i> | |
| <span class="font-bold">PayPal</span> | |
| </div> | |
| <p class="text-sm text-gray-400">paypal@exemple.com</p> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 rounded text-sm hover:bg-blue-700"> | |
| <i class="fas fa-edit mr-1"></i> Modifier | |
| </button> | |
| <button class="px-3 py-1 bg-red-600 rounded text-sm hover:bg-red-700"> | |
| <i class="fas fa-trash-alt mr-1"></i> Supprimer | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card payment-method bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fab fa-cc-stripe text-2xl mr-3 text-purple-400"></i> | |
| <span class="font-bold">Carte bancaire</span> | |
| </div> | |
| <p class="text-sm text-gray-400">**** **** **** 4242</p> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 rounded text-sm hover:bg-blue-700"> | |
| <i class="fas fa-edit mr-1"></i> Modifier | |
| </button> | |
| <button class="px-3 py-1 bg-red-600 rounded text-sm hover:bg-red-700"> | |
| <i class="fas fa-trash-alt mr-1"></i> Supprimer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="add-payment-method" class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter une méthode de paiement | |
| </button> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Transactions récentes</h4> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden"> | |
| <div class="grid grid-cols-5 p-3 bg-gray-800 font-bold text-sm"> | |
| <div>Date</div> | |
| <div>Description</div> | |
| <div>Montant</div> | |
| <div>Méthode</div> | |
| <div>Statut</div> | |
| </div> | |
| <div class="grid grid-cols-5 p-3 border-b border-gray-600 text-sm"> | |
| <div>15/06/2023</div> | |
| <div>Renouvellement domaine</div> | |
| <div>9,99€</div> | |
| <div>PayPal</div> | |
| <div class="text-green-400">Complété</div> | |
| </div> | |
| <div class="grid grid-cols-5 p-3 border-b border-gray-600 text-sm"> | |
| <div>10/06/2023</div> | |
| <div>Hébergement premium</div> | |
| <div>19,99€</div> | |
| <div>Carte bancaire</div> | |
| <div class="text-green-400">Complété</div> | |
| </div> | |
| <div class="grid grid-cols-5 p-3 text-sm"> | |
| <div>05/06/2023</div> | |
| <div>Enregistrement domaine</div> | |
| <div>12,99€</div> | |
| <div>PayPal</div> | |
| <div class="text-green-400">Complété</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Onglet Compte --> | |
| <div id="account" class="tab-content"> | |
| <h3 class="text-xl font-bold mb-4">Informations du compte</h3> | |
| <div class="card bg-gray-700 rounded-lg p-4 mb-6"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-bold mb-2">Email</label> | |
| <input type="email" value="utilisateur@exemple.com" class="w-full px-3 py-2 bg-gray-800 rounded border border-gray-600"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-bold mb-2">Mot de passe</label> | |
| <input type="password" placeholder="********" class="w-full px-3 py-2 bg-gray-800 rounded border border-gray-600"> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-500 rounded-lg hover:bg-blue-600">Mettre à jour</button> | |
| </div> | |
| <div class="card bg-gray-700 rounded-lg p-4"> | |
| <h4 class="font-bold mb-3">Abonnement</h4> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-bold">Gratuit</div> | |
| <div class="text-sm text-gray-400">Accès aux fonctionnalités de base</div> | |
| </div> | |
| <button class="px-4 py-2 bg-purple-500 rounded-lg hover:bg-purple-600">Passer à Premium</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal d'ajout de méthode de paiement --> | |
| <div id="payment-method-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-gray-800 rounded-xl max-w-md w-full p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Ajouter une méthode de paiement</h3> | |
| <button id="close-payment-method-modal" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex space-x-2 mb-4"> | |
| <button class="payment-method-tab active px-4 py-2 bg-gray-700 rounded" data-method="paypal"> | |
| <i class="fab fa-paypal mr-2"></i> PayPal | |
| </button> | |
| <button class="payment-method-tab px-4 py-2 bg-gray-700 rounded" data-method="stripe"> | |
| <i class="fab fa-cc-stripe mr-2"></i> Carte bancaire | |
| </button> | |
| </div> | |
| <div id="paypal-method" class="payment-method-content"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-1">Email PayPal</label> | |
| <input type="email" class="w-full px-4 py-2 bg-gray-700 rounded border border-gray-600"> | |
| </div> | |
| <button class="w-full py-2 bg-blue-500 rounded hover:bg-blue-600"> | |
| <i class="fab fa-paypal mr-2"></i> Connecter PayPal | |
| </button> | |
| </div> | |
| <div id="stripe-method" class="payment-method-content hidden"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-1">Numéro de carte</label> | |
| <input type="text" placeholder="4242 4242 4242 4242" class="w-full px-4 py-2 bg-gray-700 rounded border border-gray-600"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Date d'expiration</label> | |
| <input type="text" placeholder="MM/AA" class="w-full px-4 py-2 bg-gray-700 rounded border border-gray-600"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">CVV</label> | |
| <input type="text" placeholder="123" class="w-full px-4 py-2 bg-gray-700 rounded border border-gray-600"> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-purple-500 rounded hover:bg-purple-600"> | |
| <i class="fab fa-cc-stripe mr-2"></i> Ajouter la carte | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pied de page --> | |
| <footer class="py-8 text-center text-sm opacity-80 relative z-10"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <button id="open-dashboard" class="hover:text-white transition"> | |
| <i class="fas fa-tachometer-alt mr-1"></i> Tableau de bord | |
| </button> | |
| <button id="open-cart" class="hover:text-white transition"> | |
| <i class="fas fa-shopping-cart mr-1"></i> Panier (<span id="cart-count">0</span>) | |
| </button> | |
| </div> | |
| <p>Service d'enregistrement de domaine instantané - Tous droits réservés</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Variables globales | |
| let cart = []; | |
| let registeredDomains = []; | |
| let currentUser = null; | |
| // Création des particules animées | |
| function createParticles() { | |
| const container = document.getElementById('particles'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| // Taille aléatoire | |
| const size = Math.random() * 5 + 1; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Position aléatoire | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // Opacité aléatoire | |
| particle.style.opacity = Math.random() * 0.5 + 0.1; | |
| // Animation flottante avec délai aléatoire | |
| particle.style.animation = `float ${Math.random() * 10 + 5}s ease-in-out infinite`; | |
| particle.style.animationDelay = `${Math.random() * 5}s`; | |
| container.appendChild(particle); | |
| } | |
| } | |
| // Gestion du sélecteur de domaine | |
| function setupDomainSelector() { | |
| const domainTld = document.getElementById('domain-tld'); | |
| const domainSelector = document.getElementById('domain-selector'); | |
| const domainOptions = document.querySelectorAll('.domain-option'); | |
| const domainInput = document.querySelector('#domain-selector input'); | |
| const selectedDomain = document.getElementById('selected-domain'); | |
| domainTld.addEventListener('click', function() { | |
| domainSelector.classList.toggle('open'); | |
| }); | |
| domainOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| const tld = this.getAttribute('data-tld'); | |
| domainTld.querySelector('span').textContent = tld; | |
| domainSelector.classList.remove('open'); | |
| updateSelectedDomain(); | |
| }); | |
| }); | |
| domainInput.addEventListener('input', updateSelectedDomain); | |
| function updateSelectedDomain() { | |
| const domain = domainInput.value || 'votredomaine'; | |
| const tld = domainTld.querySelector('span').textContent; | |
| selectedDomain.textContent = `${domain}${tld}`; | |
| } | |
| // Fermer le sélecteur quand on clique ailleurs | |
| document.addEventListener('click', function(e) { | |
| if (!domainSelector.contains(e.target)) { | |
| domainSelector.classList.remove('open'); | |
| } | |
| }); | |
| } | |
| // Gestion de la vérification de disponibilité | |
| function setupDomainCheck() { | |
| const checkAvailabilityBtn = document.getElementById('check-availability'); | |
| const domainAvailableSection = document.getElementById('domain-available'); | |
| const domainNotAvailableSection = document.getElementById('domain-not-available'); | |
| const domainInput = document.querySelector('#domain-selector input'); | |
| const domainTld = document.getElementById('domain-tld'); | |
| checkAvailabilityBtn.addEventListener('click', function() { | |
| const domainName = domainInput.value.trim(); | |
| const tld = domainTld.querySelector('span').textContent; | |
| if (!domainName) { | |
| alert('Veuillez entrer un nom de domaine'); | |
| return; | |
| } | |
| // Simulation de vérification de disponibilité | |
| checkAvailabilityBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Vérification...'; | |
| setTimeout(() => { | |
| // Simuler une réponse aléatoire (80% de chance que le domaine soit disponible) | |
| const isAvailable = Math.random() > 0.2; | |
| if (isAvailable) { | |
| domainAvailableSection.classList.remove('hidden'); | |
| domainNotAvailableSection.classList.add('hidden'); | |
| checkAvailabilityBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Disponible'; | |
| checkAvailabilityBtn.classList.remove('bg-white', 'text-blue-600'); | |
| checkAvailabilityBtn.classList.add('bg-green-500', 'text-white'); | |
| } else { | |
| domainNotAvailableSection.classList.remove('hidden'); | |
| domainAvailableSection.classList.add('hidden'); | |
| checkAvailabilityBtn.innerHTML = '<i class="fas fa-times-circle mr-2"></i> Indisponible'; | |
| checkAvailabilityBtn.classList.remove('bg-white', 'text-blue-600'); | |
| checkAvailabilityBtn.classList.add('bg-red-500', 'text-white'); | |
| } | |
| // Réinitialiser après 5 secondes | |
| setTimeout(() => { | |
| checkAvailabilityBtn.innerHTML = '<i class="fas fa-search mr-2"></i> Vérifier la disponibilité'; | |
| checkAvailabilityBtn.classList.remove('bg-green-500', 'bg-red-500', 'text-white'); | |
| checkAvailabilityBtn.classList.add('bg-white', 'text-blue-600'); | |
| }, 5000); | |
| }, 1500); | |
| }); | |
| } | |
| // Gestion de l'ajout au panier | |
| function setupAddToCart() { | |
| const addToCartBtn = document.getElementById('add-to-cart'); | |
| const domainInput = document.querySelector('#domain-selector input'); | |
| const domainTld = document.getElementById('domain-tld'); | |
| const popularDomains = document.querySelectorAll('.card[data-domain]'); | |
| addToCartBtn.addEventListener('click', function() { | |
| const domainName = domainInput.value.trim(); | |
| const tld = domainTld.querySelector('span').textContent; | |
| const fullDomain = `${domainName}${tld}`; | |
| // Trouver le prix correspondant au TLD | |
| let price = 9.99; // Prix par défaut | |
| popularDomains.forEach(domainCard => { | |
| if (domainCard.getAttribute('data-domain') === tld) { | |
| price = parseFloat(domainCard.getAttribute('data-price')); | |
| } | |
| }); | |
| // Ajouter au panier | |
| const cartItem = { | |
| domain: fullDomain, | |
| tld: tld, | |
| price: price, | |
| duration: 1, // 1 an par défaut | |
| autoRenew: true | |
| }; | |
| cart.push(cartItem); | |
| updateCart(); | |
| // Afficher le panier | |
| document.getElementById('side-cart').classList.add('translate-x-0'); | |
| document.getElementById('side-cart').classList.remove('translate-x-full'); | |
| // Afficher une notification | |
| alert(`${fullDomain} a été ajouté à votre panier!`); | |
| }); | |
| // Gestion des clics sur les domaines populaires | |
| popularDomains.forEach(domainCard => { | |
| domainCard.addEventListener('click', function() { | |
| const tld = this.getAttribute('data-domain'); | |
| document.getElementById('domain-tld').querySelector('span').textContent = tld; | |
| // Mettre à jour le champ de saisie du domaine | |
| const domainInput = document.querySelector('#domain-selector input'); | |
| domainInput.focus(); | |
| // Mettre à jour l'affichage du domaine sélectionné | |
| updateSelectedDomain(); | |
| }); | |
| }); | |
| } | |
| // Mise à jour du panier | |
| function updateCart() { | |
| const cartItemsContainer = document.getElementById('cart-items'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const cartSubtotal = document.getElementById('cart-subtotal'); | |
| // Vider le conteneur | |
| cartItemsContainer.innerHTML = ''; | |
| // Ajouter chaque élément du panier | |
| cart.forEach((item, index) => { | |
| const cartItemElement = document.createElement('div'); | |
| cartItemElement.className = 'cart-item p-3 rounded bg-gray-700 mb-3 flex justify-between items-center'; | |
| cartItemElement.innerHTML = ` | |
| <div> | |
| <div class="font-medium">${item.domain}</div> | |
| <div class="text-sm text-gray-400">${item.duration} an - ${item.autoRenew ? 'Renouvellement automatique' : 'Sans renouvellement'}</div> | |
| </div> | |
| <div class="font-bold">${item.price.toFixed(2)}€</div> | |
| `; | |
| cartItemsContainer.appendChild(cartItemElement); | |
| }); | |
| // Mettre à jour le compteur et le sous-total | |
| cartCount.textContent = cart.length; | |
| const subtotal = cart.reduce((sum, item) => sum + item.price, 0); | |
| cartSubtotal.textContent = subtotal.toFixed(2) + '€'; | |
| } | |
| // Gestion du tableau de bord | |
| function setupDashboard() { | |
| const dashboardModal = document.getElementById('dashboard-modal'); | |
| const openDashboardBtn = document.getElementById('open-dashboard'); | |
| const closeDashboardBtn = document.getElementById('close-dashboard'); | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| openDashboardBtn.addEventListener('click', function() { | |
| dashboardModal.classList.remove('hidden'); | |
| updateRegisteredDomains(); | |
| }); | |
| closeDashboardBtn.addEventListener('click', function() { | |
| dashboardModal.classList.add('hidden'); | |
| }); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const tabId = this.getAttribute('data-tab'); | |
| // Retirer la classe active de tous les boutons et contenus | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| tabContents.forEach(content => content.classList.remove('active')); | |
| // Ajouter la classe active au bouton et contenu cliqué | |
| this.classList.add('active'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| } | |
| // Mise à jour des domaines enregistrés | |
| function updateRegisteredDomains() { | |
| const registeredDomainsContainer = document.getElementById('registered-domains'); | |
| const noDomainsMessage = document.getElementById('no-domains-message'); | |
| registeredDomainsContainer.innerHTML = ''; | |
| if (registeredDomains.length === 0) { | |
| noDomainsMessage.classList.remove('hidden'); | |
| } else { | |
| noDomainsMessage.classList.add('hidden'); | |
| registeredDomains.forEach(domain => { | |
| const domainElement = document.createElement('div'); | |
| domainElement.className = 'bg-gray-700 rounded-lg p-4 mb-4'; | |
| domainElement.innerHTML = ` | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-bold">${domain.domain}</div> | |
| <div class="text-sm text-gray-400">Expire le: ${domain.expiryDate}</div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-500 rounded hover:bg-blue-600 renew-btn" data-domain="${domain.domain}"> | |
| Renouveler | |
| </button> | |
| <button class="px-3 py-1 bg-gray-600 rounded hover:bg-gray-500 manage-btn" data-domain="${domain.domain}"> | |
| Gérer | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| registeredDomainsContainer.appendChild(domainElement); | |
| }); | |
| // Ajouter les écouteurs d'événements pour les boutons | |
| document.querySelectorAll('.renew-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const domain = this.getAttribute('data-domain'); | |
| alert(`Renouvellement du domaine ${domain}`); | |
| }); | |
| }); | |
| document.querySelectorAll('.manage-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const domain = this.getAttribute('data-domain'); | |
| alert(`Gestion du domaine ${domain}`); | |
| }); | |
| }); | |
| } | |
| } | |
| // Gestion du panier | |
| function setupCart() { | |
| const sideCart = document.getElementById('side-cart'); | |
| const openCartBtn = document.getElementById('open-cart'); | |
| const closeCartBtn = document.getElementById('close-cart'); | |
| openCartBtn.addEventListener('click', function() { | |
| sideCart.classList.add('translate-x-0'); | |
| sideCart.classList.remove('translate-x-full'); | |
| }); | |
| closeCartBtn.addEventListener('click', function() { | |
| sideCart.classList.remove('translate-x-0'); | |
| sideCart.classList.add('translate-x-full'); | |
| }); | |
| // Boutons de paiement | |
| const checkoutPaypalBtn = document.getElementById('checkout-paypal'); | |
| const checkoutStripeBtn = document.getElementById('checkout-stripe'); | |
| checkoutPaypalBtn.addEventListener('click', function() { | |
| if (cart.length === 0) { | |
| alert('Votre panier est vide'); | |
| return; | |
| } | |
| // Simuler le processus de paiement PayPal | |
| const subtotal = cart.reduce((sum, item) => sum + item.price, 0); | |
| // Ouvrir une nouvelle fenêtre simulée PayPal | |
| const paypalWindow = window.open('', 'PayPal', 'width=600,height=700'); | |
| paypalWindow.document.write(` | |
| <html> | |
| <head> | |
| <title>PayPal - Paiement</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="max-w-md mx-auto bg-white p-6 mt-10 rounded shadow"> | |
| <div class="text-center mb-6"> | |
| <img src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_111x69.jpg" class="h-16 mx-auto mb-4"> | |
| <h2 class="text-xl font-bold">Confirmation de paiement</h2> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="font-bold mb-2">Détails de la commande:</div> | |
| <div class="bg-gray-100 p-3 rounded"> | |
| ${cart.map(item => ` | |
| <div class="flex justify-between mb-1"> | |
| <span>${item.domain}</span> | |
| <span>${item.price.toFixed(2)}€</span> | |
| </div> | |
| `).join('')} | |
| <div class="border-t border-gray-300 mt-2 pt-2 font-bold"> | |
| <div class="flex justify-between"> | |
| <span>Total:</span> | |
| <span>${subtotal.toFixed(2)}€</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="font-bold mb-2">Payer avec:</div> | |
| <div class="bg-blue-50 p-3 rounded flex items-center"> | |
| <img src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_37x23.jpg" class="h-6 mr-2"> | |
| <span>paypal@exemple.com</span> | |
| </div> | |
| </div> | |
| <button id="confirm-payment" class="w-full py-3 bg-blue-500 text-white rounded font-bold hover:bg-blue-600"> | |
| Payer maintenant | |
| </button> | |
| <div class="mt-4 text-center text-sm text-gray-500"> | |
| En cliquant sur "Payer maintenant", vous acceptez les conditions d'utilisation de PayPal. | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('confirm-payment').addEventListener('click', function() { | |
| // Simuler un paiement réussi | |
| window.opener.postMessage({paymentSuccess: true, method: 'paypal', amount: ${subtotal}}, '*'); | |
| window.close(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/wordpress" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |