Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Panier – E-shop Terrain</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-gray-200 text-slate-900 antialiased overscroll-y-none"> | |
| <!-- Container mobile --> | |
| <div id="app" class="mx-auto max-w-md bg-white h-[100dvh] flex flex-col shadow-2xl relative overflow-hidden"> | |
| <!-- Header --> | |
| <header class="shrink-0 px-4 py-3 border-b border-gray-100 bg-white/95 backdrop-blur flex items-center justify-between z-10"> | |
| <button class="p-2 -ml-2 rounded-lg active:bg-gray-100 touch-manipulation" aria-label="Retour"> | |
| <i data-lucide="arrow-left" class="w-6 h-6 text-slate-700"></i> | |
| </button> | |
| <h1 class="text-lg font-semibold tracking-tight">Panier</h1> | |
| <span id="header-count" class="text-sm font-medium text-slate-500 bg-gray-100 px-2.5 py-1 rounded-full">10 articles</span> | |
| </header> | |
| <!-- Liste produits --> | |
| <main id="product-list" class="flex-1 overflow-y-auto overscroll-contain pb-32"> | |
| <!-- Rendu JS --> | |
| </main> | |
| <!-- Footer sticky --> | |
| <footer class="shrink-0 absolute bottom-0 inset-x-0 bg-white border-t border-gray-100 p-4 pb-6 shadow-[0_-4px_20px_rgba(0,0,0,0.05)] z-20"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm text-slate-500">Total articles</span> | |
| <span id="total-qty" class="text-lg font-bold text-slate-900">0</span> | |
| </div> | |
| <button class="w-full h-14 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-semibold rounded-xl text-base shadow-lg shadow-blue-600/20 transition-colors touch-manipulation"> | |
| Valider le panier | |
| </button> | |
| </footer> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |