-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
186 lines (172 loc) · 7.71 KB
/
Copy pathindex.html
File metadata and controls
186 lines (172 loc) · 7.71 KB
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Shop-X | Home</title>
<link rel="icon" href="assets/images/favicon.png">
<script src="https://cdn.tailwindcss.com"></script>
<style>
html { scroll-behavior: smooth; }
#mobileMenu {
transition: transform .25s ease, opacity .25s ease, max-height .25s ease;
overflow: hidden;
}
.menu-hidden {
transform: translateY(-10px);
opacity: 0;
pointer-events: none;
max-height: 0;
}
</style>
</head>
<body class="text-gray-800 bg-slate-50">
<!-- Header / Navbar -->
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur shadow">
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
<a href="index.html" class="flex items-center gap-2">
<img src="assets/images/logo.svg" alt="ShopX" class="h-8 w-8">
<span class="font-extrabold text-xl">Shop-X</span>
</a>
<nav class="hidden md:flex items-center gap-6 font-medium">
<a href="index.html" class="hover:text-blue-600">Home</a>
<a href="shop.html" class="hover:text-blue-600">Shop</a>
<a href="#about" class="hover:text-blue-600">About</a>
<a href="#contact" class="hover:text-blue-600">Contact</a>
<a href="cart.html" class="relative hover:text-blue-600">
Cart
<span id="cartCount" class="absolute -right-4 -top-3 bg-black text-white text-xs w-5 h-5 rounded-full grid place-items-center">0</span>
</a>
</nav>
<button id="menuBtn" class="md:hidden text-2xl" aria-label="Open Menu">☰</button>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="md:hidden menu-hidden border-t bg-white">
<a class="block px-4 py-3 hover:bg-slate-100" href="index.html">Home</a>
<a class="block px-4 py-3 hover:bg-slate-100" href="shop.html">Shop</a>
<a class="block px-4 py-3 hover:bg-slate-100" href="#about">About</a>
<a class="block px-4 py-3 hover:bg-slate-100" href="#contact">Contact</a>
<a class="block px-4 py-3 hover:bg-slate-100" href="cart.html">Cart</a>
</div>
</header>
<!-- Hero -->
<section class="bg-gradient-to-br from-blue-50 to-indigo-50">
<div class="max-w-6xl mx-auto px-4 py-16 grid md:grid-cols-2 gap-10 items-center">
<div>
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight">
Flat <span class="text-blue-600">30% Off</span> on Electronics
</h1>
<p class="mt-4 text-gray-600">
Grab the latest gadgets, wearables, and accessories at unbeatable prices ...
</p>
<div class="mt-6">
<a href="shop.html" class="inline-block bg-black text-white px-6 py-3 rounded hover:bg-blue-600 transition">
Shop Now
</a>
</div>
</div>
<div class="relative">
<img src="assets/images/hero.webp" alt="Promo" class="rounded-lg shadow-lg">
<span class="absolute -top-3 -right-3 bg-blue-600 text-white text-sm px-3 py-1 rounded-full shadow">
Limited Time
</span>
</div>
</div>
</section>
<!-- Featured -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2 class="text-2xl font-bold mb-6">Featured Products</h2>
<div id="featured" class="grid sm:grid-cols-2 md:grid-cols-3 gap-6"></div>
</section>
<!-- About -->
<section id="about" class="bg-white">
<div class="max-w-6xl mx-auto px-4 py-16 grid md:grid-cols-2 gap-10 items-center">
<div>
<h3 class="text-2xl font-bold">About ShopX</h3>
<p class="mt-3 text-gray-600">
We’re on a mission to make quality products accessible with a delightful shopping
experience — fast, secure, and mobile‑first ...
</p>
<ul class="mt-4 space-y-2 text-gray-700">
<li>-> Curated catalog across Electronics, Clothing, Accessories</li>
<li>-> Transparent pricing & hassle‑free checkout</li>
<li>-> Responsive design that works on any device</li>
</ul>
</div>
<img src="assets/images/about.jpg" alt="About ShopX" class="rounded-lg shadow">
</div>
</section>
<!-- Contact -->
<section id="contact" class="bg-slate-50">
<div class="max-w-6xl mx-auto px-4 py-16 grid md:grid-cols-2 gap-10">
<div>
<h3 class="text-2xl font-bold">Contact Us</h3>
<p class="mt-3 text-gray-600">Questions or feedback ? We’d love to hear from you ...</p>
<div class="mt-6 space-y-2">
<p><strong>Email:</strong> contact@shopx.com</p>
<p><strong>Phone:</strong> +92 315‑0991499</p>
<p><strong>Address:</strong> Centauras Mall, Islamabad</p>
</div>
</div>
<form class="bg-white p-6 rounded-lg shadow space-y-3">
<input class="w-full border rounded px-3 py-2" placeholder="Your Name" required>
<input type="email" class="w-full border rounded px-3 py-2" placeholder="Your Email" required>
<textarea class="w-full border rounded px-3 py-2" rows="4" placeholder="Your Message" required></textarea>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-blue-600 transition">Send</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="bg-white border-t">
<div class="max-w-6xl mx-auto px-4 py-10 grid md:grid-cols-3 gap-8 text-sm">
<div>
<div class="font-bold text-lg">ShopX</div>
<p class="mt-2 text-gray-600">Modern, responsive, and user‑friendly shopping ...</p>
</div>
<div>
<div class="font-semibold">Quick Links</div>
<ul class="mt-2 space-y-1">
<li><a class="hover:text-blue-600" href="shop.html">Shop</a></li>
<li><a class="hover:text-blue-600" href="cart.html">Cart</a></li>
<li><a class="hover:text-blue-600" href="checkout.html">Checkout</a></li>
</ul>
</div>
<div>
<div class="font-semibold">Contact</div>
<ul class="mt-2 space-y-1">
<li>contact@shopx.com</li>
<li>+92 315‑0991499</li>
<li>Centauras Mall, Islamabad</li>
</ul>
</div>
</div>
<div class="text-center text-gray-500 text-xs py-4 border-t">© 2025 Shop-X by nayar</div>
</footer>
<!-- Scripts -->
<script>
// mobile menu
const btn = document.getElementById('menuBtn');
const mm = document.getElementById('mobileMenu');
btn?.addEventListener('click', () => mm?.classList.toggle('menu-hidden'));
mm?.querySelectorAll('a').forEach(a => a.addEventListener('click', ()=>mm.classList.add('menu-hidden')));
</script>
<script type="module">
import './assets/js/products.js';
import { refreshCartBadge } from './assets/js/ui.js';
// Render featured
const list = document.getElementById('featured');
const items = window.PRODUCTS.filter(p=>p.featured).slice(0,3);
list.innerHTML = items.map(p => `
<a href="product.html?id=${p.id}" class="border rounded-lg p-4 block bg-white hover:shadow transition">
<img src="${p.images[0]}" alt="${p.title}" class="w-full h-44 object-cover rounded">
<div class="mt-3 font-semibold">${p.title}</div>
<div class="text-blue-600 font-bold">$${p.price.toFixed(2)}</div>
<div class="mt-2 text-yellow-500">${'★'.repeat(Math.round(p.rating))}<span class="text-gray-300">${'★'.repeat(5-Math.round(p.rating))}</span></div>
<span class="inline-block mt-3 bg-black text-white px-3 py-2 rounded">View</span>
</a>
`).join('');
refreshCartBadge();
</script>
<script type="module" src="./assets/js/ui.js"></script>
</body>
</html>