Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Your Cart - ShopFusion Glow</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .glass-card { | |
| backdrop-filter: blur(16px) saturate(180%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%); | |
| background-color: rgba(255, 255, 255, 0.15); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.125); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); | |
| } | |
| .cart-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| transition: background-color 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg text-gray-800"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="flex justify-between items-center mb-8"> | |
| <a href="/products.html" class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> | |
| <i data-feather="arrow-left" class="text-white"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-white">Your Cart</h1> | |
| </a> | |
| <div class="flex items-center space-x-4"> | |
| <a href="/wishlist.html" class="text-white"> | |
| <i data-feather="heart"></i> | |
| </a> | |
| <div class="relative"> | |
| <i data-feather="shopping-cart" class="text-white"></i> | |
| <span class="absolute -top-2 -right-2 bg-white text-blue-600 text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">3</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="glass-card p-4 rounded-xl mb-6"> | |
| <div class="space-y-4"> | |
| <!-- Cart Item 1 --> | |
| <div class="cart-item glass-card p-3 rounded-lg flex items-center space-x-3 transition"> | |
| <div class="w-16 h-16 bg-white/20 rounded-lg"></div> | |
| <div class="flex-grow"> | |
| <h3 class="text-white font-medium">Premium Headphones</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-white/80">$199.99</span> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center"> | |
| <i data-feather="minus" class="w-4 h-4"></i> | |
| </button> | |
| <span class="text-white">1</span> | |
| <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-white/50 hover:text-white transition"> | |
| <i data-feather="trash-2" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Cart Item 2 --> | |
| <div class="cart-item glass-card p-3 rounded-lg flex items-center space-x-3 transition"> | |
| <div class="w-16 h-16 bg-white/20 rounded-lg"></div> | |
| <div class="flex-grow"> | |
| <h3 class="text-white font-medium">Smart Watch</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-white/80">$249.99</span> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center"> | |
| <i data-feather="minus" class="w-4 h-4"></i> | |
| </button> | |
| <span class="text-white">1</span> | |
| <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-white/50 hover:text-white transition"> | |
| <i data-feather="trash-2" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Cart Item 3 --> | |
| <div class="cart-item glass-card p-3 rounded-lg flex items-center space-x-3 transition"> | |
| <div class="w-16 h-16 bg-white/20 rounded-lg"></div> | |
| <div class="flex-grow"> | |
| <h3 class="text-white font-medium">Wireless Earbuds</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-white/80">$129.99</span> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center"> | |
| <i data-feather="minus" class="w-4 h-4"></i> | |
| </button> | |
| <span class="text-white">1</span> | |
| <button class="text-white w-6 h-6 rounded-full bg-white/20 flex items-center justify-center"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-white/50 hover:text-white transition"> | |
| <i data-feather="trash-2" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-white/20"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-white/80">Subtotal</span> | |
| <span class="text-white font-medium">$579.97</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-white/80">Shipping</span> | |
| <span class="text-white font-medium">Free</span> | |
| </div> | |
| <div class="flex justify-between mb-4"> | |
| <span class="text-white/80">Tax</span> | |
| <span class="text-white font-medium">$46.40</span> | |
| </div> | |
| <div class="flex justify-between text-lg font-bold mb-6"> | |
| <span class="text-white">Total</span> | |
| <span class="text-white">$626.37</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="/products.html" class="flex-1 glass-card py-3 text-white rounded-full font-bold text-center hover:bg-white/10 transition"> | |
| Continue Shopping | |
| </a> | |
| <a href="/checkout.html" class="flex-1 bg-white text-blue-600 py-3 rounded-full font-bold text-center hover:bg-gray-100 transition"> | |
| Checkout | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card p-4 rounded-xl"> | |
| <h3 class="text-white font-bold mb-3">Recommended for You</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-white/10 rounded-lg p-3"> | |
| <div class="h-24 bg-white/20 rounded-lg mb-2"></div> | |
| <h4 class="text-white text-sm font-medium">Phone Case</h4> | |
| <span class="text-white/80 text-xs">$29.99</span> | |
| </div> | |
| <div class="bg-white/10 rounded-lg p-3"> | |
| <div class="h-24 bg-white/20 rounded-lg mb-2"></div> | |
| <h4 class="text-white text-sm font-medium">Wireless Charger</h4> | |
| <span class="text-white/80 text-xs">$49.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |