Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tableau de bord | HyperSpeed Web</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover: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); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(74, 108, 247, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(74, 108, 247, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(74, 108, 247, 0); } | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .stripe-button { | |
| background: #635bff; | |
| background-image: linear-gradient(to right, #635bff, #5a53e8); | |
| } | |
| .paypal-button { | |
| background: #0070ba; | |
| background-image: linear-gradient(to right, #0070ba, #005ea6); | |
| } | |
| .cart-item { | |
| transition: all 0.2s ease; | |
| } | |
| .cart-item:hover { | |
| background-color: #f8f9fa; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-bolt text-blue-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">HyperSpeed Web</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#dashboard" class="text-blue-600 px-3 py-2 text-sm font-medium">Tableau de bord</a> | |
| <a href="#domains" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Mes domaines</a> | |
| <a href="#hosting" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Hébergement</a> | |
| <a href="#billing" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Facturation</a> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <div class="relative"> | |
| <button id="cart-button" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium relative"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span id="cart-count" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-50"> | |
| <div class="px-4 py-3 border-b"> | |
| <h3 class="text-sm font-medium text-gray-900">Votre panier</h3> | |
| </div> | |
| <div id="cart-items" class="max-h-60 overflow-y-auto"> | |
| <!-- Cart items will be added here --> | |
| <div class="px-4 py-3 text-center text-gray-500"> | |
| Votre panier est vide | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 border-t"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-600">Total:</span> | |
| <span id="cart-total" class="text-sm font-medium">0.00€</span> | |
| </div> | |
| <button id="checkout-button" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded text-sm"> | |
| Passer à la caisse | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button id="user-menu-button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <span class="sr-only">Ouvrir le menu utilisateur</span> | |
| <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div> | |
| </button> | |
| </div> | |
| <div id="user-menu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Votre 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 class="-mr-2 flex items-center md:hidden"> | |
| <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> | |
| <span class="sr-only">Menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#dashboard" class="block px-3 py-2 text-base font-medium text-blue-600 hover:bg-gray-50">Tableau de bord</a> | |
| <a href="#domains" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Mes domaines</a> | |
| <a href="#hosting" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Hébergement</a> | |
| <a href="#billing" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Facturation</a> | |
| <div class="pt-4 border-t"> | |
| <div class="flex items-center px-5"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium text-gray-800">John Doe</div> | |
| <div class="text-sm font-medium text-gray-500">john@example.com</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 space-y-1"> | |
| <a href="#" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Votre profil</a> | |
| <a href="#" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Paramètres</a> | |
| <a href="#" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Déconnexion</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Dashboard Content --> | |
| <div class="flex"> | |
| <!-- Sidebar (hidden on mobile) --> | |
| <div class="hidden md:block md:w-64 bg-white shadow-sm h-screen sticky top-16"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-6"> | |
| <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium text-gray-900">John Doe</div> | |
| <div class="text-xs text-gray-500">Client depuis 2023</div> | |
| </div> | |
| </div> | |
| <nav class="space-y-1"> | |
| <a href="#dashboard" class="bg-blue-50 text-blue-600 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i class="fas fa-tachometer-alt text-blue-500 mr-3"></i> | |
| Tableau de bord | |
| </a> | |
| <a href="#domains" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i class="fas fa-globe text-gray-400 group-hover:text-gray-500 mr-3"></i> | |
| Mes domaines | |
| </a> | |
| <a href="#hosting" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i class="fas fa-server text-gray-400 group-hover:text-gray-500 mr-3"></i> | |
| Hébergement | |
| </a> | |
| <a href="#billing" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i class="fas fa-credit-card text-gray-400 group-hover:text-gray-500 mr-3"></i> | |
| Facturation | |
| </a> | |
| <a href="#support" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i class="fas fa-headset text-gray-400 group-hover:text-gray-500 mr-3"></i> | |
| Support | |
| </a> | |
| </nav> | |
| <div class="mt-8"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Compte</h3> | |
| <nav class="mt-2 space-y-1"> | |
| <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i class="fas fa-user text-gray-400 group-hover:text-gray-500 mr-3"></i> | |
| Profil | |
| </a> | |
| <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md"> | |
| <i class="fas fa-cog text-gray-400 group-hover:text-gray-500 mr-3"></i> | |
| Paramètres | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1"> | |
| <!-- Dashboard Header --> | |
| <div id="dashboard" class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="flex-1 min-w-0"> | |
| <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"> | |
| Tableau de bord | |
| </h1> | |
| </div> | |
| <div class="mt-4 flex md:mt-0 md:ml-4"> | |
| <button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-plus mr-2"></i> Nouveau service | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Active Domains --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-globe text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate"> | |
| Domaines actifs | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900"> | |
| 5 | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hosting Usage --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-server text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate"> | |
| Espace utilisé | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900"> | |
| 3.2 GB | |
| </div> | |
| <div class="ml-2 text-sm font-medium text-gray-500"> | |
| sur 10 GB | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Next Invoice --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> | |
| <i class="fas fa-file-invoice-dollar text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate"> | |
| Prochaine facture | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900"> | |
| 15.99€ | |
| </div> | |
| <div class="ml-2 text-sm font-medium text-gray-500"> | |
| 15 juin | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Support Tickets --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-headset text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate"> | |
| Tickets ouverts | |
| </dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900"> | |
| 1 | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Methods Section --> | |
| <div class="mt-8"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Méthodes de paiement | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Gérer vos méthodes de paiement pour les renouvellements automatiques | |
| </p> | |
| </div> | |
| <div class="bg-white px-4 py-5 sm:p-6"> | |
| <div class="space-y-6"> | |
| <!-- Stripe Card --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Stripe_Logo%2C_revised_2016.svg/2560px-Stripe_Logo%2C_revised_2016.svg.png" alt="Stripe" class="h-8"> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Carte Visa •••• 4242</div> | |
| <div class="text-sm text-gray-500">Expire le 04/2025</div> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Modifier | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PayPal --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" alt="PayPal" class="h-8"> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">john.doe@example.com</div> | |
| <div class="text-sm text-gray-500">Compte PayPal</div> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Modifier | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Payment Method --> | |
| <div class="border-t border-gray-200 pt-6"> | |
| <h4 class="text-lg font-medium text-gray-900 mb-4">Ajouter une méthode de paiement</h4> | |
| <div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> | |
| <!-- Stripe Button --> | |
| <button id="stripe-button" type="button" class="stripe-button inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-md text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fab fa-cc-stripe mr-2"></i> Ajouter une carte | |
| </button> | |
| <!-- PayPal Button --> | |
| <button id="paypal-button" type="button" class="paypal-button inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-md text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fab fa-paypal mr-2"></i> Lier PayPal | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Invoices --> | |
| <div class="mt-8"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Factures récentes | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Historique de vos 5 dernières factures | |
| </p> | |
| </div> | |
| <div class="bg-white px-4 py-5 sm:p-6"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| N° Facture | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Date | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Montant | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Statut | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Action | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> | |
| #HSW-2023-0012 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15 mai 2023 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15.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"> | |
| Payée | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> | |
| #HSW-2023-0011 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15 avril 2023 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15.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"> | |
| Payée | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> | |
| #HSW-2023-0010 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15 mars 2023 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15.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"> | |
| Payée | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> | |
| #HSW-2023-0009 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15 février 2023 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15.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"> | |
| Payée | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> | |
| #HSW-2023-0008 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15 janvier 2023 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15.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"> | |
| Payée | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shopping Cart Modal --> | |
| <div id="cart-modal" class="hidden fixed inset-0 overflow-y-auto z-50"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> | |
| Votre panier | |
| </h3> | |
| <div id="modal-cart-items" class="divide-y divide-gray-200"> | |
| <!-- Cart items will be added here --> | |
| <div class="py-4 text-center text-gray-500"> | |
| Votre panier est vide | |
| </div> | |
| </div> | |
| <div class="mt-6 border-t border-gray-200 pt-4"> | |
| <div class="flex justify-between mb-4"> | |
| <span class="text-base font-medium text-gray-900">Total:</span> | |
| <span id="modal-cart-total" class="text-base font-medium">0.00€</span> | |
| </div> | |
| <div class="grid grid-cols-1 gap-4"> | |
| <button id="modal-stripe-button" type="button" class="stripe-button inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-md text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fab fa-cc-stripe mr-2"></i> Payer avec Stripe | |
| </button> | |
| <button id="modal-paypal-button" type="button" class="paypal-button inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-md text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fab fa-paypal mr-2"></i> Payer avec PayPal | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" onclick="closeCartModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Continuer mes achats | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.toggle('hidden'); | |
| }); | |
| // User menu toggle | |
| document.getElementById('user-menu-button').addEventListener('click', function() { | |
| document.getElementById('user-menu').classList.toggle('hidden'); | |
| }); | |
| // Cart dropdown toggle | |
| document.getElementById('cart-button').addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| document.getElementById('cart-dropdown').classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function() { | |
| document.getElementById('cart-dropdown').classList.add('hidden'); | |
| }); | |
| // Sample cart data | |
| let cartItems = [ | |
| { id: 1, name: 'Domaine .com', price: 9.99, quantity: 1 }, | |
| { id: 2, name: 'Hébergement Premium', price: 15.99, quantity: 1 } | |
| ]; | |
| // Update cart display | |
| function updateCartDisplay() { | |
| const cartCount = document.getElementById('cart-count'); | |
| const cartItemsContainer = document.getElementById('cart-items'); | |
| const cartTotal = document.getElementById('cart-total'); | |
| const modalCartItems = document.getElementById('modal-cart-items'); | |
| const modalCartTotal = document.getElementById('modal-cart-total'); | |
| // Update cart count | |
| cartCount.textContent = cartItems.reduce((total, item) => total + item.quantity, 0); | |
| // Update cart dropdown | |
| if (cartItems.length === 0) { | |
| cartItemsContainer.innerHTML = '<div class="px-4 py-3 text-center text-gray-500">Votre panier est vide</div>'; | |
| cartTotal.textContent = '0.00€'; | |
| } else { | |
| cartItemsContainer.innerHTML = cartItems.map(item => ` | |
| <div class="cart-item px-4 py-3 flex justify-between items-center border-b"> | |
| <div> | |
| <div class="text-sm font-medium">${item.name}</div> | |
| <div class="text-sm text-gray-500">${item.quantity} x ${item.price.toFixed(2)}€</div> | |
| </div> | |
| <div class="text-sm font-medium">${(item.quantity * item.price).toFixed(2)}€</div> | |
| </div> | |
| `).join(''); | |
| const total = cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0); | |
| cartTotal.textContent = `${total.toFixed(2)}€`; | |
| } | |
| // Update modal cart | |
| if (cartItems.length === 0) { | |
| modalCartItems.innerHTML = '<div class="py-4 text-center text-gray-500">Votre panier est vide</div>'; | |
| modalCartTotal.textContent = '0.00€'; | |
| } else { | |
| modalCartItems.innerHTML = cartItems.map(item => ` | |
| <div class="cart-item py-4 flex justify-between items-center"> | |
| <div> | |
| <div class="text-sm font-medium">${item.name}</div> | |
| <div class="flex items-center mt-1"> | |
| <button onclick="updateQuantity(${item.id}, -1)" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-minus-circle"></i> | |
| </button> | |
| <span class="mx-2">${item.quantity}</span> | |
| <button onclick="updateQuantity(${item.id}, 1)" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="text-sm font-medium mr-4">${(item.quantity * item.price).toFixed(2)}€</div> | |
| <button onclick="removeFromCart(${item.id})" class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `).join(''); | |
| const total = cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0); | |
| modalCartTotal.textContent = `${total.toFixed(2)}€`; | |
| } | |
| } | |
| // Update item quantity | |
| function updateQuantity(id, change) { | |
| const item = cartItems.find(item => item.id === id); | |
| if (item) { | |
| item.quantity += change; | |
| if (item.quantity <= 0) { | |
| cartItems = cartItems.filter(item => item.id !== id); | |
| } | |
| updateCartDisplay(); | |
| } | |
| } | |
| // Remove item from cart | |
| function removeFromCart(id) { | |
| cartItems = cartItems.filter(item => item.id !== id); | |
| updateCartDisplay(); | |
| } | |
| // Checkout button | |
| document.getElementById('checkout-button').addEventListener('click', function() { | |
| document.getElementById('cart-dropdown').classList.add('hidden'); | |
| document.getElementById('cart-modal').classList.remove('hidden'); | |
| document.body.classList.add('overflow-hidden'); | |
| }); | |
| // Close cart modal | |
| function closeCartModal() { | |
| document.getElementById('cart-modal').classList.add('hidden'); | |
| document.body.classList.remove('overflow-hidden'); | |
| } | |
| // Stripe button handler | |
| document.getElementById('stripe-button').addEventListener('click', function() { | |
| alert('Intégration Stripe: Redirection vers le formulaire de paiement'); | |
| }); | |
| document.getElementById('modal-stripe-button').addEventListener('click', function() { | |
| alert('Intégration Stripe: Redirection vers le formulaire de paiement'); | |
| }); | |
| // PayPal button handler | |
| document.getElementById('paypal-button').addEventListener('click', function() { | |
| alert('Intégration PayPal: Redirection vers PayPal'); | |
| }); | |
| document.getElementById('modal-paypal-button').addEventListener('click', function() { | |
| alert('Intégration PayPal: Redirection vers PayPal'); | |
| }); | |
| // Initialize cart display | |
| updateCartDisplay(); | |
| </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-speed-domains" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |