Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>All Mystery Boxes | MysteryBox</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Page Header --> | |
| <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> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-6 py-10"> | |
| <!-- Grid of Boxes --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8"> | |
| {% for box in boxes %} | |
| <a href="{% url 'boxes:box_detail' box.pk %}" | |
| class="block bg-white shadow-md rounded-lg hover:scale-105 transition"> | |
| <!-- Gift Box Image --> | |
| <img src="{{ box.image.url }}" | |
| alt="{{ box.title }}" | |
| class="w-full h-40 object-contain bg-gray-50 p-6"> | |
| <div class="p-4 text-center"> | |
| <h2 class="text-lg font-bold">{{ box.title }}</h2> | |
| <p class="text-gray-500 text-sm">₹{{ box.price }}</p> | |
| <span class="mt-4 inline-block px-4 py-1 bg-purple-700 text-white rounded"> | |
| View Details | |
| </span> | |
| </div> | |
| </a> | |
| {% empty %} | |
| <p class="col-span-4 text-center text-gray-500"> | |
| No Mystery Boxes found 😢 | |
| </p> | |
| {% endfor %} | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-purple-700 text-white py-8"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center md:text-left"> | |
| <!-- Logo & Tagline --> | |
| <div> | |
| <h2 class="text-lg font-bold">🎁 MysteryBox</h2> | |
| <p class="text-sm mt-2">Affordable. Fun. Eco-Friendly.</p> | |
| </div> | |
| <!-- Navigation Links --> | |
| <div> | |
| <h3 class="font-semibold mb-3">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/about" class="hover:underline">About Us</a></li> | |
| <li><a href="/contact" class="hover:underline">Contact</a></li> | |
| <li><a href="/faq" class="hover:underline">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <!-- Social Media --> | |
| <div> | |
| <h3 class="font-semibold mb-3">Follow Us</h3> | |
| <div class="flex justify-center md:justify-start space-x-4 text-2xl"> | |
| <a href="https://instagram.com" target="_blank" class="hover:text-pink-400"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="https://facebook.com" target="_blank" class="hover:text-blue-400"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Divider --> | |
| <div class="border-t border-purple-500 mt-6 pt-4 text-center text-sm"> | |
| <p>© 2024 MysteryBox. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |