| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Infrastructure Web Automatisée 1-Click</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
| | } |
| | .card-hover:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| | } |
| | .tab-content { |
| | display: none; |
| | } |
| | .tab-content.active { |
| | display: block; |
| | animation: fadeIn 0.5s; |
| | } |
| | @keyframes fadeIn { |
| | from { opacity: 0; } |
| | to { opacity: 1; } |
| | } |
| | .blink { |
| | animation: blink 1s step-end infinite; |
| | } |
| | @keyframes blink { |
| | 50% { opacity: 0; } |
| | } |
| | .payment-method { |
| | transition: all 0.3s ease; |
| | } |
| | .payment-method:hover { |
| | transform: scale(1.03); |
| | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
| | } |
| | .info-card { |
| | transition: all 0.3s ease; |
| | border-left: 4px solid; |
| | } |
| | .info-card:hover { |
| | transform: translateY(-3px); |
| | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
| | } |
| | .domain-status-badge { |
| | font-size: 0.75rem; |
| | padding: 0.25rem 0.5rem; |
| | border-radius: 9999px; |
| | } |
| | .copy-btn { |
| | cursor: pointer; |
| | transition: all 0.2s; |
| | } |
| | .copy-btn:hover { |
| | opacity: 0.8; |
| | } |
| | .copy-btn.copied { |
| | background-color: #10B981 !important; |
| | } |
| | .admin-badge { |
| | position: absolute; |
| | top: 10px; |
| | right: 10px; |
| | background: linear-gradient(45deg, #FF8E53, #FE6B8B); |
| | color: white; |
| | padding: 2px 8px; |
| | border-radius: 9999px; |
| | font-size: 0.7rem; |
| | font-weight: bold; |
| | } |
| | </style> |
| | </head> |
| | <body class="font-sans bg-gray-50"> |
| | <div class="min-h-screen"> |
| | |
| | <header class="gradient-bg text-white shadow-lg"> |
| | <div class="container mx-auto px-4 py-6"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="flex items-center mb-4 md:mb-0"> |
| | <i class="fas fa-bolt text-3xl mr-3"></i> |
| | <h1 class="text-2xl font-bold">Infrastructure Web 1-Click</h1> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <button id="cartIcon" class="relative text-white hover:text-gray-200 transition"> |
| | <i class="fas fa-shopping-cart text-xl"></i> |
| | <span id="cartCount" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span> |
| | </button> |
| | <button id="loginBtn" class="bg-white text-purple-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition"> |
| | <i class="fas fa-sign-in-alt mr-2"></i> Connexion Admin |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <div id="adminDashboard" class="hidden"> |
| | <nav class="bg-gray-800 text-white p-4"> |
| | <div class="container mx-auto flex justify-between items-center"> |
| | <div class="flex items-center space-x-4"> |
| | <i class="fas fa-tachometer-alt"></i> |
| | <span class="font-bold">Tableau de bord Admin</span> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <span id="adminEmail" class="text-sm"></span> |
| | <button id="logoutBtn" class="bg-red-500 hover:bg-red-600 px-3 py-1 rounded text-sm"> |
| | <i class="fas fa-sign-out-alt mr-1"></i> Déconnexion |
| | </button> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | <div class="container mx-auto px-4 py-8"> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
| | <div class="bg-white rounded-xl shadow-md p-6 relative"> |
| | <div class="admin-badge">GRATUIT</div> |
| | <h3 class="text-lg font-semibold mb-4"> |
| | <i class="fas fa-globe text-blue-500 mr-2"></i> |
| | Enregistrement Domaine |
| | </h3> |
| | <p class="text-gray-600 text-sm mb-4">Obtenez un domaine gratuitement avec propagation instantanée</p> |
| | <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm"> |
| | <i class="fas fa-plus mr-1"></i> Nouveau domaine |
| | </button> |
| | </div> |
| | <div class="bg-white rounded-xl shadow-md p-6"> |
| | <h3 class="text-lg font-semibold mb-4"> |
| | <i class="fas fa-lock text-purple-500 mr-2"></i> |
| | Certificat SSL |
| | </h3> |
| | <p class="text-gray-600 text-sm mb-4">Déployez un SSL automatique en 1 clic</p> |
| | <button class="w-full bg-purple-500 hover:bg-purple-600 text-white py-2 rounded-lg text-sm"> |
| | <i class="fas fa-plus mr-1"></i> Ajouter SSL |
| | </button> |
| | </div> |
| | <div class="bg-white rounded-xl shadow-md p-6"> |
| | <h3 class="text-lg font-semibold mb-4"> |
| | <i class="fas fa-server text-green-500 mr-2"></i> |
| | DNS Premium |
| | </h3> |
| | <p class="text-gray-600 text-sm mb-4">Configurez des serveurs DNS ultra-rapides</p> |
| | <button class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg text-sm"> |
| | <i class="fas fa-plus mr-1"></i> Configurer DNS |
| | </button> |
| | </div> |
| | <div class="bg-white rounded-xl shadow-md p-6"> |
| | <h3 class="text-lg font-semibold mb-4"> |
| | <i class="fas fa-google text-red-500 mr-2"></i> |
| | Intégration Google |
| | </h3> |
| | <p class="text-gray-600 text-sm mb-4">Automatisez le référencement Google</p> |
| | <button class="w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm"> |
| | <i class="fas fa-plus mr-1"></i> Connecter Google |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="mb-8"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-2xl font-bold text-gray-800">Informations du Domaine</h2> |
| | <div class="flex space-x-3"> |
| | <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm"> |
| | <i class="fas fa-sync-alt mr-1"></i> Actualiser |
| | </button> |
| | <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded text-sm"> |
| | <i class="fas fa-edit mr-1"></i> Modifier |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
| | |
| | <div class="info-card bg-white border-l-blue-500 rounded-lg shadow-sm p-6"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <h3 class="text-lg font-semibold text-gray-800"> |
| | <i class="fas fa-info-circle text-blue-500 mr-2"></i> |
| | Informations du Domaine |
| | </h3> |
| | <span class="domain-status-badge bg-green-100 text-green-800">Actif</span> |
| | </div> |
| | <div class="space-y-3"> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Nom de domaine</p> |
| | <div class="flex justify-between items-center"> |
| | <p class="font-medium">doctorblog.fr</p> |
| | <button class="copy-btn bg-gray-100 hover:bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs" onclick="copyToClipboard('doctorblog.fr')"> |
| | <i class="fas fa-copy mr-1"></i> Copier |
| | </button> |
| | </div> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Date de création</p> |
| | <p class="font-medium">15/06/2020</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Date d'expiration</p> |
| | <p class="font-medium">15/06/2024</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Serveurs DNS</p> |
| | <div class="space-y-1"> |
| | <p class="font-mono text-sm">ns1.digitalocean.com</p> |
| | <p class="font-mono text-sm">ns2.digitalocean.com</p> |
| | <p class="font-mono text-sm">ns3.digitalocean.com</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="info-card bg-white border-l-purple-500 rounded-lg shadow-sm p-6"> |
| | <h3 class="text-lg font-semibold text-gray-800 mb-4"> |
| | <i class="fas fa-building text-purple-500 mr-2"></i> |
| | Informations du Registrar |
| | </h3> |
| | <div class="space-y-3"> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Registrar</p> |
| | <p class="font-medium">OVH SAS</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">WHOIS Server</p> |
| | <p class="font-mono text-sm">whois.ovh.com</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">URL du Registrar</p> |
| | <a href="https://www.ovh.com" class="font-medium text-blue-500 hover:underline">www.ovh.com</a> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Contact technique</p> |
| | <p class="font-medium">tech@ovh.com</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Contact administratif</p> |
| | <p class="font-medium">admin@ovh.com</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="info-card bg-white border-l-green-500 rounded-lg shadow-sm p-6"> |
| | <h3 class="text-lg font-semibold text-gray-800 mb-4"> |
| | <i class="fas fa-user-tie text-green-500 mr-2"></i> |
| | Contact du Titulaire |
| | </h3> |
| | <div class="space-y-3"> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Nom</p> |
| | <p class="font-medium">Vincent Gérard</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Organisation</p> |
| | <p class="font-medium">DoctorBlog SAS</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Adresse</p> |
| | <p class="font-medium">123 Rue des Entrepreneurs</p> |
| | <p class="font-medium">75001 Paris, France</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500 mb-1">Téléphone</p> |
| | <p class="font-medium">+33.612345678</p> |
| | </div> |
| | <div> |
| | |
| | </html> |
