|
|
<!DOCTYPE html> |
|
|
<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); |
|
|
} |
|
|
|
|
|
|
|
|
.cart-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.cart-item:hover { |
|
|
background: rgba(255,255,255,0.15); |
|
|
} |
|
|
|
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.tab-button.active { |
|
|
border-bottom: 2px solid white; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); } |
|
|
to { transform: translateX(0); } |
|
|
} |
|
|
|
|
|
.cart-slide-in { |
|
|
animation: slideIn 0.3s forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.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-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-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 { |
|
|
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 { |
|
|
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-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 { |
|
|
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"> |
|
|
|
|
|
<div id="particles"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="main-content" class="hidden"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-12 relative z-10"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="domains" class="tab-content active"> |
|
|
<h3 class="text-xl font-bold mb-4">Mes domaines enregistrés</h3> |
|
|
<div id="registered-domains"> |
|
|
|
|
|
</div> |
|
|
<p id="no-domains-message" class="text-gray-400">Vous n'avez pas de domaines enregistrés.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
let cart = []; |
|
|
let registeredDomains = []; |
|
|
let currentUser = null; |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 5 + 1; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
|
|
|
|
|
|
particle.style.left = `${Math.random() * 100}%`; |
|
|
particle.style.top = `${Math.random() * 100}%`; |
|
|
|
|
|
|
|
|
particle.style.opacity = Math.random() * 0.5 + 0.1; |
|
|
|
|
|
|
|
|
particle.style.animation = `float ${Math.random() * 10 + 5}s ease-in-out infinite`; |
|
|
particle.style.animationDelay = `${Math.random() * 5}s`; |
|
|
|
|
|
container.appendChild(particle); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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}`; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (!domainSelector.contains(e.target)) { |
|
|
domainSelector.classList.remove('open'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
checkAvailabilityBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Vérification...'; |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
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'); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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}`; |
|
|
|
|
|
|
|
|
let price = 9.99; |
|
|
popularDomains.forEach(domainCard => { |
|
|
if (domainCard.getAttribute('data-domain') === tld) { |
|
|
price = parseFloat(domainCard.getAttribute('data-price')); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const cartItem = { |
|
|
domain: fullDomain, |
|
|
tld: tld, |
|
|
price: price, |
|
|
duration: 1, |
|
|
autoRenew: true |
|
|
}; |
|
|
|
|
|
cart.push(cartItem); |
|
|
updateCart(); |
|
|
|
|
|
|
|
|
document.getElementById('side-cart').classList.add('translate-x-0'); |
|
|
document.getElementById('side-cart').classList.remove('translate-x-full'); |
|
|
|
|
|
|
|
|
alert(`${fullDomain} a été ajouté à votre panier!`); |
|
|
}); |
|
|
|
|
|
|
|
|
popularDomains.forEach(domainCard => { |
|
|
domainCard.addEventListener('click', function() { |
|
|
const tld = this.getAttribute('data-domain'); |
|
|
document.getElementById('domain-tld').querySelector('span').textContent = tld; |
|
|
|
|
|
|
|
|
const domainInput = document.querySelector('#domain-selector input'); |
|
|
domainInput.focus(); |
|
|
|
|
|
|
|
|
updateSelectedDomain(); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateCart() { |
|
|
const cartItemsContainer = document.getElementById('cart-items'); |
|
|
const cartCount = document.getElementById('cart-count'); |
|
|
const cartSubtotal = document.getElementById('cart-subtotal'); |
|
|
|
|
|
|
|
|
cartItemsContainer.innerHTML = ''; |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
cartCount.textContent = cart.length; |
|
|
|
|
|
const subtotal = cart.reduce((sum, item) => sum + item.price, 0); |
|
|
cartSubtotal.textContent = subtotal.toFixed(2) + '€'; |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
tabButtons.forEach(btn => btn.classList.remove('active')); |
|
|
tabContents.forEach(content => content.classList.remove('active')); |
|
|
|
|
|
|
|
|
this.classList.add('active'); |
|
|
document.getElementById(tabId).classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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}`); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
const subtotal = cart.reduce((sum, item) => sum + item.price, 0); |
|
|
|
|
|
|
|
|
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() { |
|
|
|
|
|
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> |
