Spaces:
Sleeping
Sleeping
File size: 4,634 Bytes
4b2adab |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<!DOCTYPE html>
<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>
|