Spaces:
Sleeping
Sleeping
| {% load static %} | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>My Cart</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Navbar --> | |
| <header class="bg-purple-700 text-white"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center py-4 px-6"> | |
| <!-- Logo --> | |
| <a href="/" class="text-xl font-bold tracking-wide"> | |
| 🎁 MysteryBox | |
| </a> | |
| <!-- Navigation Links (Desktop) --> | |
| <nav class="hidden md:flex space-x-6 text-sm font-medium"> | |
| <a href="/" class="hover:text-yellow-300">Home</a> | |
| <a href="/boxes" class="hover:text-yellow-300">All Boxes</a> | |
| <a href="/boxes/?category=gadgets" class="hover:text-yellow-300">Gadgets</a> | |
| <a href="/boxes/?category=clothes" class="hover:text-yellow-300">Clothes</a> | |
| <a href="/boxes/?category=accessories" class="hover:text-yellow-300">Accessories</a> | |
| <a href="/rewards/" class="hover:text-yellow-300">Rewards</a> | |
| </nav> | |
| <!-- Right Icons --> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Search --> | |
| <!-- Cart --> | |
| <a href="/cart/" class="relative"> | |
| <span class="text-xl">🛒</span> | |
| <span class="absolute -top-2 -right-2 bg-yellow-400 text-black text-xs font-bold px-1 rounded">3</span> | |
| </a> | |
| <!-- Account --> | |
| <a href="/Accounts/" class="hover:text-yellow-300"> | |
| {% if request.user.is_authenticated %} | |
| <span>👤 Hello,{{ request.user.first_name|slice:"0:8" }}</span> | |
| {% else %} | |
| 👤 Account | |
| {% endif %} | |
| </a> | |
| {% if request.user.is_authenticated %} | |
| <a href="Accounts/logout" class="hover:text-yellow-300"> | |
| 👤 Logout | |
| </a> | |
| {% else %} | |
| <a href="Accounts/login" class="hover:text-yellow-300"> | |
| 👤 Login | |
| </a> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </header> | |
| <div class="max-w-5xl mx-auto bg-white shadow-md rounded-lg p-6 mt-10"> | |
| <h1 class="text-3xl font-bold mb-6">🛒 Shopping Cart</h1> | |
| {% if cart.items.all %} | |
| <!-- Table of cart items --> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full border-collapse border border-gray-200 shadow-sm rounded-lg"> | |
| <thead> | |
| <tr class="bg-gray-100 text-left"> | |
| <th class="px-4 py-3">Box</th> | |
| <th class="px-4 py-3">Price</th> | |
| <th class="px-4 py-3">Qty</th> | |
| <th class="px-4 py-3">Subtotal</th> | |
| <th class="px-4 py-3"></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for item in cart.items.all %} | |
| <tr class="border-t hover:bg-gray-50"> | |
| <td class="px-4 py-3 font-medium">{{ item.box.title }}</td> | |
| <td class="px-4 py-3">₹{{ item.box.price }}</td> | |
| <td class="px-4 py-3">{{ item.quantity }}</td> | |
| <td class="px-4 py-3">₹{{ item.subtotal }}</td> | |
| <td class="px-4 py-3"> | |
| <a href="{% url 'cart:cart_remove' item.id %}" | |
| class="text-red-600 hover:text-red-800 font-bold">Remove</a> | |
| </td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Cart Total --> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <p class="text-xl font-bold">Total: ₹{{ cart.total_amount }}</p> | |
| <a href="{% url 'cart:checkout' %}" | |
| class="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-3 rounded-lg transition"> | |
| Proceed to Checkout ✅ | |
| </a> | |
| </div> | |
| {% else %} | |
| <p class="text-gray-600 text-lg">Your cart is empty 🎁</p> | |
| {% endif %} | |
| <!-- Back to shop --> | |
| <div class="mt-6"> | |
| <a href="{% url 'boxes:all_boxes' %}" | |
| class="text-purple-600 hover:text-purple-800"> | |
| ← Continue Shopping | |
| </a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |