| <!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> |
