Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mystery Box Details | MysteryBox</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- 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> | |
| <!-- Product Detail --> | |
| <main class="max-w-7xl mx-auto px-6 py-12"> | |
| <!-- Product Detail Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-10 bg-white shadow-md rounded-lg p-8 w-full"> | |
| <!-- Left: Gift Image --> | |
| <div class="flex items-center justify-center"> | |
| <img src="https://em-content.zobj.net/source/microsoft-teams/337/wrapped-gift_1f381.png" | |
| alt="{{ box.title }}" | |
| class="w-80 h-80 object-contain"> | |
| </div> | |
| <!-- Right: Text Details --> | |
| <div class="flex flex-col justify-center"> | |
| <h2 class="text-3xl font-bold text-gray-800">{{ box.title }}</h2> | |
| <p class="text-gray-600 mt-4 text-lg">{{ box.description }}</p> | |
| <p class="mt-6 text-2xl font-semibold text-purple-700">Price: ₹{{ box.price }}</p> | |
| {% if box.stock_quantity > 0 %} | |
| <p class="mt-2 text-green-600">In Stock: {{ box.stock_quantity }}</p> | |
| {% else %} | |
| <p class="mt-2 text-red-600">Out of Stock</p> | |
| {% endif %} | |
| <!-- Buttons --> | |
| <div class="mt-8 flex space-x-4"> | |
| <a href="{% url 'cart:cart_add' box.pk %}" | |
| class="flex-1 py-3 px-6 bg-purple-700 hover:bg-purple-800 text-white rounded-lg text-center block"> | |
| Add to Cart 🛒 | |
| </a> | |
| <button class="flex-1 py-3 px-6 bg-yellow-500 hover:bg-yellow-600 text-black rounded-lg"> | |
| Buy Now ⚡ | |
| </button> | |
| </div> | |
| <!-- Linked Products inside MysteryBox --> | |
| {% if box.products.exists %} | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-bold mb-2">Items inside (possible contents):</h3> | |
| <ul class="list-disc list-inside text-gray-600"> | |
| {% for product in box.products.all %} | |
| <li>{{ product.name }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </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> | |