Hugging Face's logo

Spaces:
docto41
/
hyper-dns-pro
Running

App Files Community
hyper-dns-pro / index.html
docto41's picture
docto41
Add 2 files
7ceda5d verified
raw
history blame contribute delete
78.7 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HyperDNS Pro - Infrastructure Web Automatisée</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb, #a777e3);
}
.hero-gradient {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
.feature-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);
}
.automation-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.progress-bar {
transition: width 0.6s ease;
}
.cart-item {
transition: all 0.3s ease;
}
.cart-item:hover {
background-color: #f8fafc;
}
.payment-method {
border: 2px solid transparent;
transition: all 0.3s ease;
}
.payment-method:hover {
border-color: #3b82f6;
}
.payment-method.selected {
border-color: #3b82f6;
background-color: #eff6ff;
}
.dashboard-nav {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.domain-info-card {
transition: all 0.3s ease;
}
.domain-info-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Admin Login (hidden by default) -->
<div id="admin-login" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-8 w-full max-w-md">
<div class="text-center mb-6">
<i class="fas fa-lock text-4xl text-blue-500 mb-4"></i>
<h3 class="text-2xl font-bold">Accès Administrateur</h3>
</div>
<form id="login-form" class="space-y-4">
<div>
<label class="block text-gray-700 mb-2">Email Admin</label>
<input type="email" id="admin-email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="admin@example.com" required>
</div>
<div>
<label class="block text-gray-700 mb-2">Mot de passe</label>
<input type="password" id="admin-password" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="••••••••" required>
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-200">
<i class="fas fa-sign-in-alt mr-2"></i> Se connecter
</button>
</form>
<div id="login-error" class="hidden mt-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">
<i class="fas fa-exclamation-circle mr-2"></i> Identifiants incorrects
</div>
</div>
</div>
<!-- Dashboard (hidden by default) -->
<div id="dashboard" class="hidden">
<!-- Dashboard Header -->
<header class="bg-white dashboard-nav">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-bolt text-2xl text-blue-500 mr-3"></i>
<h1 class="text-xl font-bold">HyperDNS Pro</h1>
</div>
<div class="flex items-center space-x-4">
<button id="cart-button" class="relative p-2 text-gray-600 hover:text-blue-500">
<i class="fas fa-shopping-cart text-xl"></i>
<span id="cart-count" class="absolute -top-1 -right-1 bg-blue-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</button>
<div class="relative">
<button id="user-menu-button" class="flex items-center space-x-2 focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-8 h-8 rounded-full">
<span class="hidden md:inline">John Doe</span>
</button>
<div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profil</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Paramètres</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Déconnexion</a>
</div>
</div>
</div>
</div>
</header>
<!-- Dashboard Content -->
<div class="container mx-auto px-6 py-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Main Content -->
<div class="lg:w-3/4">
<!-- Welcome Banner -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white mb-8">
<h2 class="text-2xl font-bold mb-2">Bonjour, John Doe</h2>
<p class="mb-4">Gérez votre infrastructure web automatisée en toute simplicité</p>
<div class="flex flex-wrap gap-2">
<span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">3 domaines actifs</span>
<span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">SSL automatique</span>
<span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">DNS ultra-rapide</span>
</div>
</div>
<!-- Domain Information Section -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
<h2 class="text-xl font-bold mb-6">Informations du domaine</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<!-- Registrar Information -->
<div class="domain-info-card bg-gray-50 rounded-lg p-5 border border-gray-200">
<div class="flex items-center mb-4">
<i class="fas fa-building text-blue-500 text-xl mr-3"></i>
<h3 class="font-bold text-lg">Registrar Information</h3>
</div>
<div class="space-y-3">
<div>
<p class="text-sm text-gray-500">Registrar Name</p>
<p class="font-medium">HyperDNS Registrar</p>
</div>
<div>
<p class="text-sm text-gray-500">IANA ID</p>
<p class="font-medium">12345</p>
</div>
<div>
<p class="text-sm text-gray-500">WHOIS Server</p>
<p class="font-medium">whois.hyperdns.com</p>
</div>
<div>
<p class="text-sm text-gray-500">Registration Date</p>
<p class="font-medium">2023-01-15</p>
</div>
<div>
<p class="text-sm text-gray-500">Expiration Date</p>
<p class="font-medium">2024-01-15</p>
</div>
</div>
</div>
<!-- Registrant Contact -->
<div class="domain-info-card bg-gray-50 rounded-lg p-5 border border-gray-200">
<div class="flex items-center mb-4">
<i class="fas fa-user-circle text-blue-500 text-xl mr-3"></i>
<h3 class="font-bold text-lg">Registrant Contact</h3>
</div>
<div class="space-y-3">
<div>
<p class="text-sm text-gray-500">Name</p>
<p class="font-medium">John Doe</p>
</div>
<div>
<p class="text-sm text-gray-500">Organization</p>
<p class="font-medium">Example Inc.</p>
</div>
<div>
<p class="text-sm text-gray-500">Email</p>
<p class="font-medium">john.doe@example.com</p>
</div>
<div>
<p class="text-sm text-gray-500">Phone</p>
<p class="font-medium">+1.5551234567</p>
</div>
<div>
<p class="text-sm text-gray-500">Address</p>
<p class="font-medium">123 Main St, San Francisco, CA 94107, US</p>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<button onclick="showDeployModal()" class="bg-white border border-gray-200 rounded-xl p-4 text-center hover:bg-gray-50 transition duration-200">
<i class="fas fa-plus-circle text-3xl text-blue-500 mb-2"></i>
<h3 class="font-bold">Ajouter un domaine</h3>
</button>
<button class="bg-white border border-gray-200 rounded-xl p-4 text-center hover:bg-gray-50 transition duration-200">
<i class="fas fa-cog text-3xl text-purple-500 mb-2"></i>
<h3 class="font-bold">Configurer DNS</h3>
</button>
<button class="bg-white border border-gray-200 rounded-xl p-4 text-center hover:bg-gray-50 transition duration-200">
<i class="fas fa-shield-alt text-3xl text-green-500 mb-2"></i>
<h3 class="font-bold">Renouveler SSL</h3>
</button>
</div>
<!-- Active Domains -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold">Vos domaines actifs</h2>
<button class="text-blue-500 hover:text-blue-700">
<i class="fas fa-sync-alt mr-1"></i> Actualiser
</button>
</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">Domaine</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expiration</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-globe text-blue-500 mr-3"></i>
<span class="font-medium">example.com</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2024</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
<button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-globe text-blue-500 mr-3"></i>
<span class="font-medium">mon-site.fr</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">22/09/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
<button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-globe text-blue-500 mr-3"></i>
<span class="font-medium">test.io</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En attente</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30/11/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
<button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Payment History -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h2 class="text-xl font-bold mb-6">Historique des paiements</h2>
<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">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Méthode</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">Renouvellement domaine example.com</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i class="fab fa-cc-paypal text-blue-500 mr-1"></i> PayPal
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$14.99</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Complété</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/05/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">Enregistrement mon-site.fr</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i class="fab fa-cc-stripe text-purple-500 mr-1"></i> Stripe
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$9.99</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Complété</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">22/04/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">Pack Premium SSL</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i class="fab fa-cc-paypal text-blue-500 mr-1"></i> PayPal
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$29.99</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Complété</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="lg:w-1/4">
<!-- Payment Methods -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
<h2 class="text-xl font-bold mb-4">Méthodes de paiement</h2>
<div class="space-y-3 mb-6">
<div class="payment-method bg-white border border-gray-200 rounded-lg p-4 cursor-pointer selected">
<div class="flex items-center">
<div class="mr-3">
<i class="fab fa-cc-stripe text-3xl text-purple-500"></i>
</div>
<div>
<h3 class="font-medium">Stripe</h3>
<p class="text-sm text-gray-500">Carte se terminant par 4242</p>
</div>
</div>
</div>
<div class="payment-method bg-white border border-gray-200 rounded-lg p-4 cursor-pointer">
<div class="flex items-center">
<div class="mr-3">
<i class="fab fa-cc-paypal text-3xl text-blue-500"></i>
</div>
<div>
<h3 class="font-medium">PayPal</h3>
<p class="text-sm text-gray-500">john.doe@example.com</p>
</div>
</div>
</div>
</div>
<button class="w-full bg-gray-100 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-200 transition duration-200">
<i class="fas fa-plus mr-2"></i> Ajouter une méthode
</button>
</div>
<!-- Quick Stats -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-8">
<h2 class="text-xl font-bold mb-4">Statistiques rapides</h2>
<div class="space-y-4">
<div>
<p class="text-sm text-gray-500">Prochain paiement</p>
<p class="font-medium">$14.99 - 15/09/2023</p>
</div>
<div>
<p class="text-sm text-gray-500">Solde actuel</p>
<p class="font-medium text-green-500">$45.67</p>
</div>
<div>
<p class="text-sm text-gray-500">Dépenses ce mois-ci</p>
<p class="font-medium">$24.98</p>
</div>
</div>
</div>
<!-- Support -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white">
<h2 class="text-xl font-bold mb-2">Besoin d'aide?</h2>
<p class="mb-4">Notre équipe est disponible 24/7 pour répondre à vos questions</p>
<button class="w-full bg-white text-blue-600 py-2 px-4 rounded-lg hover:bg-gray-100 transition duration-200">
<i class="fas fa-headset mr-2"></i> Contacter le support
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Shopping 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">
<!-- Cart Header -->
<div class="flex justify-between items-center border-b p-4">
<h3 class="text-lg font-bold">
<i class="fas fa-shopping-cart mr-2"></i> Votre panier
</h3>
<button id="close-cart" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<!-- Cart Items -->
<div class="flex-1 overflow-y-auto p-4">
<div id="cart-items" class="space-y-4">
<!-- Empty Cart Message -->
<div id="empty-cart-message" class="text-center py-10">
<i class="fas fa-shopping-cart text-4xl text-gray-300 mb-4"></i>
<p class="text-gray-500">Votre panier est vide</p>
</div>
<!-- Cart Item Template (hidden) -->
<div id="cart-item-template" class="cart-item hidden bg-gray-50 rounded-lg p-4">
<div class="flex justify-between">
<div class="flex-1">
<h4 class="font-medium">Enregistrement de domaine</h4>
<p class="text-sm text-gray-500">example.com</p>
</div>
<div class="text-right">
<p class="font-medium">$9.99</p>
<button class="remove-item text-xs text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt mr-1"></i> Supprimer
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Cart Footer -->
<div class="border-t p-4">
<div class="flex justify-between mb-4">
<span>Total:</span>
<span id="cart-total" class="font-bold">$0.00</span>
</div>
<!-- Payment Buttons -->
<div class="space-y-3">
<button id="pay-with-stripe" class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition duration-200 flex items-center justify-center">
<i class="fab fa-cc-stripe text-xl mr-2"></i> Payer avec Stripe
</button>
<button id="pay-with-paypal" class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200 flex items-center justify-center">
<i class="fab fa-cc-paypal text-xl mr-2"></i> Payer avec PayPal
</button>
</div>
<p class="text-xs text-gray-500 mt-3 text-center">
<i class="fas fa-lock mr-1"></i> Paiement sécurisé SSL 256-bit
</p>
</div>
</div>
</div>
<!-- Main Interface -->
<div id="main-interface" class="min-h-screen">
<!-- Hero Section -->
<header class="hero-gradient text-white">
<div class="container mx-auto px-6 py-24 text-center">
<div class="flex justify-center mb-6">
<div class="bg-white bg-opacity-20 rounded-full p-2 automation-pulse">
<i class="fas fa-bolt text-3xl text-white"></i>
</div>
</div>
<h1 class="text-4xl md:text-6xl font-bold mb-6">Infrastructure Web Automatisée</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
Enregistrement instantané de domaine, déploiement SSL, DNS ultra-rapide et intégration Google -
le tout automatisé 24h/24 et 7j/7
</p>
<div class="flex flex-col md:flex-row justify-center gap-4">
<button onclick="showDeployModal()" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-200">
<i class="fas fa-rocket mr-2"></i> Déployer en 1 clic
</button>
<button onclick="showDashboard()" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-blue-600 transition duration-200">
<i class="fas fa-tachometer-alt mr-2"></i> Tableau de bord
</button>
</div>
</div>
</header>
<!-- Features Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">Propagation mondiale en secondes</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Feature 1 -->
<div class="feature-card bg-white p-8 rounded-xl border border-gray-200 transition duration-300">
<div class="text-blue-500 text-4xl mb-4">
<i class="fas fa-globe"></i>
</div>
<h3 class="text-xl font-bold mb-3">Enregistrement de domaine</h3>
<p class="text-gray-600">
Enregistrement instantané avec plus de 500 extensions disponibles et gestion centralisée.
</p>
<div class="mt-6">
<div class="flex items-center text-sm text-gray-500">
<span class="mr-2">Propagation:</span>
<span class="font-medium text-green-500">Instantanée</span>
</div>
</div>
</div>
<!-- Feature 2 -->
<div class="feature-card bg-white p-8 rounded-xl border border-gray-200 transition duration-300">
<div class="text-green-500 text-4xl mb-4">
<i class="fas fa-lock"></i>
</div>
<h3 class="text-xl font-bold mb-3">SSL Automatique</h3>
<p class="text-gray-600">
Certificats SSL déployés automatiquement avec renouvellement auto et sécurité maximale.
</p>
<div class="mt-6">
<div class="flex items-center text-sm text-gray-500">
<span class="mr-2">Activation:</span>
<span class="font-medium text-green-500">En 15 secondes</span>
</div>
</div>
</div>
<!-- Feature 3 -->
<div class="feature-card bg-white p-8 rounded-xl border border-gray-200 transition duration-300">
<div class="text-purple-500 text-4xl mb-4">
<i class="fas fa-tachometer-alt"></i>
</div>
<h3 class="text-xl font-bold mb-3">DNS Ultra-Rapide</h3>
<p class="text-gray-600">
Infrastructure Anycast globale avec résolution DNS en moins de 10ms partout dans le monde.
</p>
<div class="mt-6">
<div class="flex items-center text-sm text-gray-500">
<span class="mr-2">Latence:</span>
<span class="font-medium text-green-500">8ms moyenne</span>
</div>
</div>
</div>
<!-- Feature 4 -->
<div class="feature-card bg-white p-8 rounded-xl border border-gray-200 transition duration-300">
<div class="text-red-500 text-4xl mb-4">
<i class="fab fa-google"></i>
</div>
<h3 class="text-xl font-bold mb-3">Intégration Google</h3>
<p class="text-gray-600">
Configuration automatique avec Google Search Console, Analytics et Tag Manager.
</p>
<div class="mt-6">
<div class="flex items-center text-sm text-gray-500">
<span class="mr-2">Connexion:</span>
<span class="font-medium text-green-500">Immédiate</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Automation Process -->
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-6">Processus Automatisé 24/7</h2>
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-16">
Notre système prend en charge toutes les étapes sans intervention humaine
</p>
<div class="relative">
<!-- Timeline -->
<div class="hidden lg:block absolute left-1/2 top-0 h-full w-1 bg-blue-500 transform -translate-x-1/2"></div>
<!-- Steps -->
<div class="space-y-16 lg:space-y-0 lg:grid lg:grid-cols-4 lg:gap-8">
<!-- Step 1 -->
<div class="relative lg:text-center">
<div class="lg:absolute lg:left-1/2 lg:-top-16 lg:-ml-6 w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white text-xl">
1
</div>
<div class="bg-white p-6 rounded-xl shadow-sm">
<div class="text-blue-500 text-3xl mb-3">
<i class="fas fa-search"></i>
</div>
<h3 class="font-bold mb-2">Recherche de domaine</h3>
<p class="text-gray-600 text-sm">
Vérification instantanée de la disponibilité sur tous les registres mondiaux.
</p>
</div>
</div>
<!-- Step 2 -->
<div class="relative lg:text-center">
<div class="lg:absolute lg:left-1/2 lg:-top-16 lg:-ml-6 w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white text-xl">
2
</div>
<div class="bg-white p-6 rounded-xl shadow-sm">
<div class="text-green-500 text-3xl mb-3">
<i class="fas fa-file-contract"></i>
</div>
<h3 class="font-bold mb-2">Enregistrement</h3>
<p class="text-gray-600 text-sm">
Acquisition automatique avec configuration WHOIS et protection de la vie privée.
</p>
</div>
</div>
<!-- Step 3 -->
<div class="relative lg:text-center">
<div class="lg:absolute lg:left-1/2 lg:-top-16 lg:-ml-6 w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white text-xl">
3
</div>
<div class="bg-white p-6 rounded-xl shadow-sm">
<div class="text-purple-500 text-3xl mb-3">
<i class="fas fa-server"></i>
</div>
<h3 class="font-bold mb-2">Configuration DNS</h3>
<p class="text-gray-600 text-sm">
Déploiement sur notre réseau Anycast avec propagation mondiale en secondes.
</p>
</div>
</div>
<!-- Step 4 -->
<div class="relative lg:text-center">
<div class="lg:absolute lg:left-1/2 lg:-top-16 lg:-ml-6 w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white text-xl">
4
</div>
<div class="bg-white p-6 rounded-xl shadow-sm">
<div class="text-red-500 text-3xl mb-3">
<i class="fas fa-check-circle"></i>
</div>
<h3 class="font-bold mb-2">Intégration complète</h3>
<p class="text-gray-600 text-sm">
Connexion automatique à Google, SSL activé et monitoring 24/7.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Global Network -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Réseau Global Ultra-Performant</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Plus de 200 centres de données répartis dans le monde entier pour une latence minimale
</p>
</div>
<div class="bg-gray-100 rounded-xl p-8">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
<img src="https://cdn.pixabay.com/photo/2017/05/09/13/33/laptop-2298286_1280.png" alt="Global Network" class="rounded-lg shadow-md">
</div>
<div class="lg:w-1/2">
<div class="space-y-6">
<div>
<h3 class="font-bold text-lg mb-2">Performances inégalées</h3>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 98%"></div>
</div>
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>Uptime: 99.98%</span>
<span>Latence: 8ms</span>
</div>
</div>
<div>
<h3 class="font-bold text-lg mb-2">Couverture mondiale</h3>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Amérique du Nord</span>
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Europe</span>
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Asie</span>
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Océanie</span>
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Amérique du Sud</span>
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Afrique</span>
</div>
</div>
<div>
<h3 class="font-bold text-lg mb-2">Sécurité renforcée</h3>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Protection DDoS intégrée</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Chiffrement TLS 1.3</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Analyse des menaces en temps réel</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-6">Nos Tarifs Transparents</h2>
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-16">
Des prix simples sans frais cachés, avec une facturation claire
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Basic Plan -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="px-6 py-4 bg-gray-50">
<h3 class="text-xl font-bold text-center">Basique</h3>
<div class="text-center my-4">
<span class="text-4xl font-bold">$9.99</span>
<span class="text-gray-500">/mois</span>
</div>
</div>
<div class="px-6 py-4">
<ul class="space-y-3 mb-6">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>1 domaine inclus</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>SSL Let's Encrypt</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>DNS Basic</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-red-400 mr-2"></i>
<span>Intégration Google</span>
</li>
</ul>
<button onclick="addToCart('Basique', 9.99)" class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200">
<i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
</button>
</div>
</div>
<!-- Pro Plan -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transform scale-105">
<div class="px-6 py-4 bg-blue-500 text-white">
<h3 class="text-xl font-bold text-center">Professionnel</h3>
<div class="text-center my-4">
<span class="text-4xl font-bold">$19.99</span>
<span class="text-blue-100">/mois</span>
</div>
</div>
<div class="px-6 py-4">
<ul class="space-y-3 mb-6">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>3 domaines inclus</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>SSL Premium</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span DNS Ultra-Rapide</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Intégration Google</span>
</li>
</ul>
<button onclick="addToCart('Professionnel', 19.99)" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-200">
<i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
</button>
</div>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="px-6 py-4 bg-gray-50">
<h3 class="text-xl font-bold text-center">Entreprise</h3>
<div class="text-center my-4">
<span class="text-4xl font-bold">$49.99</span>
<span class="text-gray-500">/mois</span>
</div>
</div>
<div class="px-6 py-4">
<ul class="space-y-3 mb-6">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Domaines illimités</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>SSL EV (Extended Validation)</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>DNS Premium + Anycast</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Intégration Google avancée</span>
</li>
</ul>
<button onclick="addToCart('Entreprise', 49.99)" class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200">
<i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
</button>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à automatiser votre infrastructure web?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto">
Essayez notre solution 1-click gratuitement pendant 14 jours sans engagement
</p>
<div class="flex flex-col md:flex-row justify-center gap-4">
<button onclick="showDeployModal()" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-200">
<i class="fas fa-play mr-2"></i> Démarrer maintenant
</button>
<button class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-blue-600 transition duration-200">
<i class="fas fa-question-circle mr-2"></i> Voir la démo
</button>
</div>
</div>
</section>
</div>
<!-- Deploy Modal -->
<div id="deploy-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-8 w-full max-w-2xl">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold">Déploiement Automatisé</h3>
<button onclick="hideDeployModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-6">
<!-- Step 1: Domain -->
<div class="border-b pb-6">
<h4 class="font-bold text-lg mb-4 flex items-center">
<span class="w-8 h-8 bg-blue-500 rounded-full text-white flex items-center justify-center mr-3">1</span>
Enregistrement de domaine
</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-gray-700 text-sm mb-2">Nom de domaine</label>
<input type="text" id="domain-name" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="votredomaine">
</div>
<div>
<label class="block text-gray-700 text-sm mb-2">Extension</label>
<select id="domain-extension" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
<option>.com</option>
<option>.fr</option>
<option>.net</option>
<option>.io</option>
<option>.org</option>
</select>
</div>
<div>
<label class="block text-gray-700 text-sm mb-2">Disponibilité</label>
<button onclick="checkDomain()" class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200">
<i class="fas fa-search mr-2"></i> Vérifier
</button>
</div>
</div>
<div id="domain-result" class="hidden mt-4 p-3 rounded-lg text-sm"></div>
</div>
<!-- Step 2: Configuration -->
<div class="border-b pb-6">
<h4 class="font-bold text-lg mb-4 flex items-center">
<span class="w-8 h-8 bg-blue-500 rounded-full text-white flex items-center justify-center mr-3">2</span>
Configuration Automatique
</h4>
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="auto-ssl" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500" checked>
<label for="auto-ssl" class="ml-2 text-gray-700">Activer SSL Automatique (Let's Encrypt)</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="auto-dns" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500" checked>
<label for="auto-dns" class="ml-2 text-gray-700">Configurer DNS Ultra-Rapide</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="auto-google" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
<label for="auto-google" class="ml-2 text-gray-700">Intégration Google (Analytics, Search Console)</label>
</div>
</div>
</div>
<!-- Step 3: Deploy -->
<div>
<h4 class="font-bold text-lg mb-4 flex items-center">
<span class="w-8 h-8 bg-blue-500 rounded-full text-white flex items-center justify-center mr-3">3</span>
Déploiement
</h4>
<p class="text-gray-600 mb-4">
Confirmez le déploiement automatisé de votre infrastructure web complète.
</p>
<div class="flex justify-end space-x-3">
<button onclick="hideDeployModal()" class="bg-gray-200 text-gray-800 py-2 px-6 rounded-lg hover:bg-gray-300 transition duration-200">
Annuler
</button>
<button onclick="deployInfrastructure()" class="bg-blue-600 text-white py-2 px-6 rounded-lg hover:bg-blue-700 transition duration-200">
<i class="fas fa-bolt mr-2"></i> Déployer maintenant
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Deployment Progress Modal -->
<div id="progress-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-8 w-full max-w-2xl">
<div class="text-center mb-6">
<i class="fas fa-cogs text-4xl text-blue-500 mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Déploiement en cours</h3>
<p class="text-gray-600">Votre infrastructure web est en cours de configuration automatique</p>
</div>
<div class="space-y-4 mb-6">
<div class="flex items-center justify between">
<span class="font-medium">Enregistrement du domaine</span>
<span id="domain-status" class="text-gray-500">En attente...</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="domain-progress" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<div class="flex items-center justify-between">
<span class="font-medium">Configuration DNS</span>
<span id="dns-status" class="text-gray-500">En attente...</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="dns-progress" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<div class="flex items-center justify-between">
<span class="font-medium">Installation SSL</span>
<span id="ssl-status" class="text-gray-500">En attente...</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="ssl-progress" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<div class="flex items-center justify-between">
<span class="font-medium">Intégration Google</span>
<span id="google-status" class="text-gray-500">En attente...</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="google-progress" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
<div id="deploy-result" class="hidden">
<div class="p-4 bg-green-50 text-green-700 rounded-lg mb-4">
<i class="fas fa-check-circle mr-2"></i> Déploiement terminé avec succès!
</div>
<div class="bg-gray-100 p-4 rounded-lg mb-4">
<h4 class="font-bold mb-2">Récapitulatif</h4>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-globe text-blue-500 mr-2"></i>
<span id="deployed-domain" class="font-medium"></span>
</li>
<li class="flex items-center">
<i class="fas fa-clock text-blue-500 mr-2"></i>
<span>Temps total: <span id="deploy-time" class="font-medium"></span> secondes</span>
</li>
<li class="flex items-center">
<i class="fas fa-shield-alt text-blue-500 mr-2"></i>
<span>SSL: Activé et sécurisé</span>
</li>
</ul>
</div>
<button onclick="finishDeployment()" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-200">
<i class="fas fa-check mr-2"></i> Terminer
</button>
</div>
</div>
</div>
<script>
// Admin credentials
const adminCredentials = {
"vgp.bavol@gmail.com": "Admin270574@",
"doctorblog.fr@gmail.com": "Admin270574@"
};
// Shopping cart
let cart = [];
let cartTotal = 0;
// Show admin login
function showAdminLogin() {
document.getElementById('admin-login').classList.remove('hidden');
}
// Hide admin login
function hideAdminLogin() {
document.getElementById('admin-login').classList.add('hidden');
}
// Show dashboard
function showDashboard() {
document.getElementById('main-interface').classList.add('hidden');
document.getElementById('dashboard').classList.remove('hidden');
}
// Show main interface
function showMainInterface() {
document.getElementById('dashboard').classList.add('hidden');
document.getElementById('main-interface').classList.remove('hidden');
}
// Handle login form submission
document.getElementById('login-form').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('admin-email').value;
const password = document.getElementById('admin-password').value;
if (adminCredentials[email] && adminCredentials[email] === password) {
// Successful login - show dashboard
hideAdminLogin();
showDashboard();
} else {
// Show error
document.getElementById('login-error').classList.remove('hidden');
setTimeout(() => {
document.getElementById('login-error').classList.add('hidden');
}, 3000);
}
});
// Show deploy modal
function showDeployModal() {
document.getElementById('deploy-modal').classList.remove('hidden');
}
// Hide deploy modal
function hideDeployModal() {
document.getElementById('deploy-modal').classList.add('hidden');
}
// Check domain availability
function checkDomain() {
const name = document.getElementById('domain-name').value;
const extension = document.getElementById('domain-extension').value;
const domain = name + extension;
if (!name) {
document.getElementById('domain-result').innerHTML = `
<div class="bg-red-50 text-red-700 p-3 rounded-lg">
<i class="fas fa-exclamation-circle mr-2"></i> Veuillez entrer un nom de domaine
</div>
`;
document.getElementById('domain-result').classList.remove('hidden');
return;
}
// Simulate API call
setTimeout(() => {
// Random result for demo (75% available)
const isAvailable = Math.random() > 0.25;
if (isAvailable) {
document.getElementById('domain-result').innerHTML = `
<div class="bg-green-50 text-green-700 p-3 rounded-lg">
<i class="fas fa-check-circle mr-2"></i> <span class="font-bold">${domain}</span> est disponible!
</div>
`;
} else {
document.getElementById('domain-result').innerHTML = `
<div class="bg-red-50 text-red-700 p-3 rounded-lg">
<i class="fas fa-times-circle mr-2"></i> <span class="font-bold">${domain}</span> est déjà pris
</div>
`;
}
document.getElementById('domain-result').classList.remove('hidden');
}, 800);
}
// Deploy infrastructure
function deployInfrastructure() {
const name = document.getElementById('domain-name').value;
const extension = document.getElementById('domain-extension').value;
if (!name) {
alert('Veuillez d\'abord vérifier un nom de domaine');
return;
}
hideDeployModal();
document.getElementById('progress-modal').classList.remove('hidden');
// Simulate deployment process
simulateDeployment();
}
// Simulate deployment progress
function simulateDeployment() {
const domainProgress = document.getElementById('domain-progress');
const dnsProgress = document.getElementById('dns-progress');
const sslProgress = document.getElementById('ssl-progress');
const googleProgress = document.getElementById('google-progress');
const domainStatus = document.getElementById('domain-status');
const dnsStatus = document.getElementById('dns-status');
const sslStatus = document.getElementById('ssl-status');
const googleStatus = document.getElementById('google-status');
// Reset all
domainProgress.style.width = '0%';
dnsProgress.style.width = '0%';
sslProgress.style.width = '0%';
googleProgress.style.width = '0%';
domainStatus.textContent = 'En attente...';
dnsStatus.textContent = 'En attente...';
sslStatus.textContent = 'En attente...';
googleStatus.textContent = 'En attente...';
// Start domain registration
setTimeout(() => {
domainStatus.textContent = 'En cours...';
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
domainProgress.style.width = `${Math.min(progress, 100)}%`;
if (progress >= 100) {
clearInterval(interval);
domainStatus.textContent = 'Terminé';
domainStatus.className = 'text-green-500';
// Start DNS configuration
setTimeout(() => {
dnsStatus.textContent = 'En cours...';
let dnsProgressValue = 0;
const dnsInterval = setInterval(() => {
dnsProgressValue += Math.random() * 15;
dnsProgress.style.width = `${Math.min(dnsProgressValue, 100)}%`;
if (dnsProgressValue >= 100) {
clearInterval(dnsInterval);
dnsStatus.textContent = 'Terminé';
dnsStatus.className = 'text-green-500';
// Start SSL installation
setTimeout(() => {
sslStatus.textContent = 'En cours...';
let sslProgressValue = 0;
const sslInterval = setInterval(() => {
sslProgressValue += Math.random() * 20;
sslProgress.style.width = `${Math.min(sslProgressValue, 100)}%`;
if (sslProgressValue >= 100) {
clearInterval(sslInterval);
sslStatus.textContent = 'Terminé';
sslStatus.className = 'text-green-500';
// Start Google integration if selected
if (document.getElementById('auto-google').checked) {
setTimeout(() => {
googleStatus.textContent = 'En cours...';
let googleProgressValue = 0;
const googleInterval = setInterval(() => {
googleProgressValue += Math.random() * 25;
googleProgress.style.width = `${Math.min(googleProgressValue, 100)}%`;
if (googleProgressValue >= 100) {
clearInterval(googleInterval);
googleStatus.textContent = 'Terminé';
googleStatus.className = 'text-green-500';
showDeployResult();
}
}, 200);
}, 500);
} else {
googleStatus.textContent = 'Non configuré';
googleStatus.className = 'text-gray-500';
showDeployResult();
}
}
}, 200);
}, 500);
}
}, 200);
}, 500);
}
}, 200);
}, 500);
}
// Show deployment result
function showDeployResult() {
const name = document.getElementById('domain-name').value;
const extension = document.getElementById('domain-extension').value;
const domain = name + extension;
document.getElementById('deployed-domain').textContent = domain;
document.getElementById('deploy-time').textContent = (Math.random() * 5 + 8).toFixed(2);
document.getElementById('deploy-result').classList.remove('hidden');
}
// Finish deployment
function finishDeployment() {
document.getElementById('progress-modal').classList.add('hidden');
alert('Votre infrastructure web est maintenant opérationnelle!');
}
// Add item to cart
function addToCart(name, price) {
// Check if item already in cart
const existingItem = cart.find(item => item.name === name);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
name: name,
price: price,
quantity: 1
});
}
updateCart();
openCart();
}
// Remove item from cart
function removeFromCart(index) {
cart.splice(index, 1);
updateCart();
}
// Update cart UI
function updateCart() {
const cartItemsContainer = document.getElementById('cart-items');
const emptyCartMessage = document.getElementById('empty-cart-message');
const cartCount = document.getElementById('cart-count');
const cartTotalElement = document.getElementById('cart-total');
// Clear existing items
cartItemsContainer.innerHTML = '';
if (cart.length === 0) {
emptyCartMessage.classList.remove('hidden');
cartCount.textContent = '0';
cartTotalElement.textContent = '$0.00';
return;
}
emptyCartMessage.classList.add('hidden');
// Calculate total
let total = 0;
let itemCount = 0;
// Add items to cart
cart.forEach((item, index) => {
const itemTemplate = document.getElementById('cart-item-template').cloneNode(true);
itemTemplate.classList.remove('hidden');
itemTemplate.querySelector('h4').textContent = item.name;
itemTemplate.querySelector('p').textContent = `Quantité: ${item.quantity}`;
itemTemplate.querySelector('.font-medium').textContent = `$${(item.price * item.quantity).toFixed(2)}`;
itemTemplate.querySelector('.remove-item').addEventListener('click', () => {
removeFromCart(index);
});
cartItemsContainer.appendChild(itemTemplate);
total += item.price * item.quantity;
itemCount += item.quantity;
});
// Update totals
cartCount.textContent = itemCount;
cartTotalElement.textContent = `$${total.toFixed(2)}`;
}
// Open cart sidebar
function openCart() {
document.getElementById('cart-sidebar').classList.remove('translate-x-full');
}
// Close cart sidebar
function closeCart() {
document.getElementById('cart-sidebar').classList.add('translate-x-full');
}
// Initialize event listeners
document.addEventListener('DOMContentLoaded', function() {
// User menu toggle
document.getElementById('user-menu-button').addEventListener('click', function() {
document.getElementById('user-menu').classList.toggle('hidden');
});
// Close user menu when clicking outside
document.addEventListener('click', function(event) {
if (!event.target.closest('#user-menu-button')) {
document.getElementById('user-menu').classList.add('hidden');
}
});
// Cart button
document.getElementById('cart-button').addEventListener('click', openCart);
// Close cart button
document.getElementById('close-cart').addEventListener('click', closeCart);
// Payment method selection
document.querySelectorAll('.payment-method').forEach(method => {
method.addEventListener('click', function() {
document.querySelectorAll('.payment-method').forEach(m => {
m.classList.remove('selected');
});
this.classList.add('selected');
});
});
// Pay with Stripe
document.getElementById('pay-with-stripe').addEventListener('click', function() {
if (cart.length === 0) {
alert('Votre panier est vide');
return;
}
alert('Redirection vers Stripe pour le paiement');
// In a real app, you would redirect to Stripe checkout
});
// Pay with PayPal
document.getElementById('pay-with-paypal').addEventListener('click', function() {
if (cart.length === 0) {
alert('Votre panier est vide');
return;
}
alert('Redirection vers PayPal pour le paiement');
// In a real app, you would redirect to PayPal checkout
});
// Initialize empty cart
updateCart();
});
</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/hyper-dns-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>