-
Notifications
You must be signed in to change notification settings - Fork 165
Expand file tree
/
Copy pathfaq.html
More file actions
506 lines (454 loc) · 22 KB
/
faq.html
File metadata and controls
506 lines (454 loc) · 22 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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FAQ - ChaatBazaar</title>
<meta name="description" content="Frequently asked questions about ChaatBazaar – ordering, delivery, payments, cancellation, and more." />
<!-- Same fonts & icons as rest of site -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="icon" href="img/logo.png" type="image/png" />
<style>
/* ── FAQ Hero (mirrors .hero gradient, same palette) ── */
.faq-hero {
background: linear-gradient(120deg, #ffab91, #ff5722);
color: #fff;
text-align: center;
padding: 5rem 1rem 4rem;
}
.faq-hero h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
margin-bottom: 0.8rem;
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.faq-hero p {
font-size: 1.1rem;
font-weight: 600;
opacity: 0.92;
margin: 0;
}
/* ── Page wrapper ── */
.faq-page {
max-width: 820px;
margin: 0 auto;
padding: 4rem 1rem 5rem;
}
/* ── Category tabs (same pill style as .filter-btn) ── */
.faq-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: center;
margin-bottom: 3rem;
}
.faq-tab {
background: #fff3e0;
border: 2px solid #ff5722;
color: #ff5722;
padding: 0.6rem 1.8rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
font-family: 'Poppins', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
}
.faq-tab.active,
.faq-tab:hover {
background: #ff5722;
color: #fff;
box-shadow: 0 6px 20px rgba(255,87,34,0.4);
}
/* ── Category heading ── */
.faq-category { margin-bottom: 2.5rem; }
.faq-category-title {
font-size: 1rem;
font-weight: 700;
color: #bf360c;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 1rem;
padding-bottom: 0.6rem;
border-bottom: 2px solid #ffe0cc;
}
/* ── Accordion item (matches .card shadow/radius language) ── */
.faq-item {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
margin-bottom: 0.9rem;
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.faq-item:hover {
box-shadow: 0 12px 35px rgba(255,87,34,0.12);
transform: translateY(-2px);
}
/* ── Question button ── */
.faq-question {
width: 100%;
background: none;
border: none;
padding: 1.2rem 1.5rem;
text-align: left;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 600;
color: #3e2723;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
transition: background 0.2s ease;
}
.faq-question:hover { background: #fff8f5; }
.faq-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ffe0cc;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #ff5722;
font-weight: 700;
transition: transform 0.35s ease, background 0.25s ease, color 0.25s ease;
}
.faq-item.open .faq-icon {
transform: rotate(45deg);
background: #ff5722;
color: #fff;
}
/* ── Answer panel ── */
.faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 1.5rem;
transition: max-height 0.4s ease, padding 0.25s ease;
font-size: 0.97rem;
color: #5d4037;
line-height: 1.75;
}
.faq-item.open .faq-answer {
max-height: 500px;
padding: 0 1.5rem 1.3rem;
}
/* ── CTA box (matches .team-member card feel) ── */
.faq-cta {
margin-top: 3.5rem;
background: #fff3e0;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
padding: 3rem 2rem;
text-align: center;
}
.faq-cta h2 {
font-size: 1.6rem;
font-weight: 700;
color: #bf360c;
margin-bottom: 0.6rem;
}
.faq-cta p {
color: #5d4037;
margin-bottom: 1.5rem;
font-size: 1rem;
}
.faq-cta a {
display: inline-block;
background: #ff5722;
color: #fff;
padding: 0.9rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 8px 25px rgba(255,87,34,0.55);
transition: background 0.3s ease, transform 0.2s ease;
}
.faq-cta a:hover {
background: #e64a19;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(230,74,25,0.7);
}
/* ── Responsive ── */
@media (max-width: 600px) {
.faq-tabs { gap: 0.5rem; }
.faq-tab { padding: 0.5rem 1.2rem; font-size: 0.88rem; }
.faq-question { font-size: 0.93rem; padding: 1rem 1.1rem; }
.faq-answer { padding: 0 1.1rem; }
.faq-item.open .faq-answer { padding: 0 1.1rem 1rem; }
}
</style>
</head>
<body>
<!-- ═══════════ HEADER (exact copy from orders.html) ═══════════ -->
<header>
<div class="header-inner container" role="banner">
<a href="index.html" class="logo" aria-label="ChaatBazaar Home"><img src="img/logo.png" alt="ChaatBazaar Logo" class="navbar-logo-img" />ChaatBazaar</a>
<nav role="navigation" aria-label="Primary Navigation">
<a href="index.html" class="nav-link">Home</a>
<div class="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
<a href="menu.html" class="dropdown-toggle nav-link">Menu</a>
<div class="dropdown-menu" role="menu" aria-label="Menu Categories">
<a href="menu.html?filter=All#filters" role="menuitem" tabindex="-1" class="menu-filter" data-filter="All">All</a>
<a href="menu.html?filter=Snacks#filters" role="menuitem" tabindex="-1" class="menu-filter" data-filter="Snacks">Snacks</a>
<a href="menu.html?filter=Chaat#filters" role="menuitem" tabindex="-1" class="menu-filter" data-filter="Chaat">Chaat</a>
<a href="menu.html?filter=Beverages#filters" role="menuitem" tabindex="-1" class="menu-filter" data-filter="Beverages">Beverages</a>
</div>
</div>
<a href="about.html" class="nav-link">About</a>
<a href="orders.html">Orders</a>
<a href="faq.html" class="nav-link active">FAQ</a>
<a href="cart.html" class="nav-link cart-btn-modern" id="cart-open-btn" aria-label="Cart">
<span class="cart-icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="cart-svg-icon"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
<span id="cart-count" class="cart-badge">0</span>
</span>
<span class="cart-text">Cart</span>
</a>
<div class="search-bar" role="search">
<input type="search" placeholder="Search menu..." aria-label="Search menu" id="search-input" autocomplete="off" />
<button aria-label="Search" id="search-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="search-svg"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</button>
<div class="search-suggestions" id="search-suggestions" style="display:none;"></div>
</div>
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle Theme">
<span class="theme-toggle-track">
<span class="theme-toggle-icon sun-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
</span>
<span class="theme-toggle-icon moon-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</span>
<span class="theme-toggle-thumb"></span>
</span>
</button>
</nav>
</div>
</header>
<!-- ═══════════ HERO ═══════════ -->
<section class="faq-hero" role="region" aria-label="FAQ Hero">
<h1>Frequently Asked Questions 🤔</h1>
<p>Everything you need to know about ordering, delivery, payments & more.</p>
</section>
<!-- ═══════════ FAQ CONTENT ═══════════ -->
<main class="faq-page">
<!-- Category filter tabs -->
<div class="faq-tabs" role="toolbar" aria-label="Filter FAQ categories">
<button class="faq-tab active" data-filter="all">All</button>
<button class="faq-tab" data-filter="ordering">🛒 Ordering</button>
<button class="faq-tab" data-filter="delivery">🚴 Delivery</button>
<button class="faq-tab" data-filter="payments">💳 Payments</button>
<button class="faq-tab" data-filter="cancellation">❌ Cancellation</button>
<button class="faq-tab" data-filter="food">🍽️ Food & Menu</button>
</div>
<!-- ── ORDERING ── -->
<div class="faq-category" data-cat="ordering">
<h2 class="faq-category-title">🛒 Ordering</h2>
<div class="faq-item">
<button class="faq-question">How do I place an order?<span class="faq-icon">+</span></button>
<div class="faq-answer">Browse our menu, click <strong>Add</strong> on any item you love, then hit <strong>Checkout</strong> from the cart. Fill in your delivery details and confirm — hot street food is on its way!</div>
</div>
<div class="faq-item">
<button class="faq-question">Can I customize my order (e.g., extra spicy)?<span class="faq-icon">+</span></button>
<div class="faq-answer">Yes! Add a note in the <strong>Special Instructions</strong> field at checkout. Our chefs will do their best to accommodate your preferences.</div>
</div>
<div class="faq-item">
<button class="faq-question">Is there a minimum order amount?<span class="faq-icon">+</span></button>
<div class="faq-answer">Yes, the minimum order amount is <strong>₹50</strong>. This helps us ensure quality delivery service every time.</div>
</div>
<div class="faq-item">
<button class="faq-question">Can I schedule an order in advance?<span class="faq-icon">+</span></button>
<div class="faq-answer">Currently we only accept real-time orders. Scheduled ordering is coming soon — subscribe to our newsletter for updates!</div>
</div>
<div class="faq-item">
<button class="faq-question">Can I add more items after placing an order?<span class="faq-icon">+</span></button>
<div class="faq-answer">Once an order is placed and the kitchen starts preparing it, changes are not possible. You can always place a new order for additional items.</div>
</div>
</div>
<!-- ── DELIVERY ── -->
<div class="faq-category" data-cat="delivery">
<h2 class="faq-category-title">🚴 Delivery</h2>
<div class="faq-item">
<button class="faq-question">What is the delivery radius?<span class="faq-icon">+</span></button>
<div class="faq-answer">We deliver within a <strong>5 km radius</strong> of our kitchen. Enter your pincode at checkout to check if your area is covered.</div>
</div>
<div class="faq-item">
<button class="faq-question">How long does delivery take?<span class="faq-icon">+</span></button>
<div class="faq-answer">Most orders arrive in <strong>20–35 minutes</strong>. This may vary based on distance, traffic, and order volume during peak hours.</div>
</div>
<div class="faq-item">
<button class="faq-question">Is there a delivery fee?<span class="faq-icon">+</span></button>
<div class="faq-answer">Delivery is <strong>FREE</strong> for orders above ₹150. A small fee of <strong>₹20</strong> applies for orders below ₹150.</div>
</div>
<div class="faq-item">
<button class="faq-question">Can I track my order?<span class="faq-icon">+</span></button>
<div class="faq-answer">Yes! Once confirmed, visit the <a href="orders.html" style="color:#ff5722;font-weight:600;">Orders page</a> for live status: <em>Placed → Preparing → Out for Delivery → Delivered</em>.</div>
</div>
<div class="faq-item">
<button class="faq-question">What if my order is delayed?<span class="faq-icon">+</span></button>
<div class="faq-answer">If your order exceeds the estimated time by more than 15 minutes, please contact us via the Contact form. We'll update you immediately and may offer a discount on your next order.</div>
</div>
</div>
<!-- ── PAYMENTS ── -->
<div class="faq-category" data-cat="payments">
<h2 class="faq-category-title">💳 Payments</h2>
<div class="faq-item">
<button class="faq-question">What payment methods are accepted?<span class="faq-icon">+</span></button>
<div class="faq-answer">We accept <strong>UPI</strong> (GPay, PhonePe, Paytm), credit/debit cards, net banking, and <strong>Cash on Delivery (COD)</strong>. More options are coming soon!</div>
</div>
<div class="faq-item">
<button class="faq-question">Is online payment secure?<span class="faq-icon">+</span></button>
<div class="faq-answer">Absolutely. All transactions are SSL-encrypted and processed through trusted payment gateways. We never store your card details.</div>
</div>
<div class="faq-item">
<button class="faq-question">Do you offer discount coupons?<span class="faq-icon">+</span></button>
<div class="faq-answer">Yes! Use code <strong>FIRST20</strong> for 20% off your first order, or <strong>CHAAT10</strong> for 10% off any order above ₹100. Subscribe to our newsletter for more exclusive deals.</div>
</div>
<div class="faq-item">
<button class="faq-question">Will I get a receipt or invoice?<span class="faq-icon">+</span></button>
<div class="faq-answer">A digital receipt is emailed after every successful order. You can also find your full order history on the <a href="orders.html" style="color:#ff5722;font-weight:600;">Orders page</a>.</div>
</div>
</div>
<!-- ── CANCELLATION ── -->
<div class="faq-category" data-cat="cancellation">
<h2 class="faq-category-title">❌ Cancellation & Refunds</h2>
<div class="faq-item">
<button class="faq-question">Can I cancel my order?<span class="faq-icon">+</span></button>
<div class="faq-answer">You can cancel within <strong>2 minutes</strong> of placing the order. Once the kitchen begins preparing your food, cancellations are not possible.</div>
</div>
<div class="faq-item">
<button class="faq-question">How do I get a refund?<span class="faq-icon">+</span></button>
<div class="faq-answer">Refunds for eligible cancellations or wrong/missing items are processed within <strong>3–5 business days</strong> to your original payment method.</div>
</div>
<div class="faq-item">
<button class="faq-question">What if I received the wrong item?<span class="faq-icon">+</span></button>
<div class="faq-answer">We're sorry! Contact us within <strong>30 minutes</strong> of delivery with a photo. We'll either redeliver the correct item or issue a full refund.</div>
</div>
</div>
<!-- ── FOOD & MENU ── -->
<div class="faq-category" data-cat="food">
<h2 class="faq-category-title">🍽️ Food & Menu</h2>
<div class="faq-item">
<button class="faq-question">Are your dishes freshly prepared?<span class="faq-icon">+</span></button>
<div class="faq-answer">Yes! Every item is prepared fresh <strong>after your order is placed</strong>. We never use pre-packaged or frozen food.</div>
</div>
<div class="faq-item">
<button class="faq-question">Do you have vegan or gluten-free options?<span class="faq-icon">+</span></button>
<div class="faq-answer">Yes! Look for the <strong>🌱 Vegan</strong> and <strong>🌾 Gluten-Free</strong> badges on menu cards, or use the dietary filter on the <a href="menu.html" style="color:#ff5722;font-weight:600;">Menu page</a>.</div>
</div>
<div class="faq-item">
<button class="faq-question">How spicy is the food?<span class="faq-icon">+</span></button>
<div class="faq-answer">Each item shows a spice indicator (🌶️ Low / 🌶️🌶️ Medium / 🌶️🌶️🌶️ High). Use the Spice Level filter on the Menu page to find dishes matching your preference.</div>
</div>
<div class="faq-item">
<button class="faq-question">Do you update the menu seasonally?<span class="faq-icon">+</span></button>
<div class="faq-answer">Yes! We refresh our specials regularly based on seasonal ingredients and festive occasions. Check the <strong>Today's Specials</strong> section on the homepage for the latest additions.</div>
</div>
</div>
<!-- ── Still have questions CTA ── -->
<div class="faq-cta" role="complementary" aria-label="Contact us">
<h2>Still have questions?</h2>
<p>Our team is happy to help — reach out to us anytime!</p>
<a href="index.html#about">Contact Us</a>
</div>
</main>
<!-- ═══════════ FOOTER (exact match) ═══════════ -->
<footer>
<div class="footer-container">
<div class="footer-column brand-col">
<div class="footer-brand"><img src="img/logo.png" alt="ChaatBazaar Logo" class="footer-logo-img" />ChaatBazaar</div>
<p class="footer-desc">Your ultimate destination for authentic and mouth-watering Indian street food - from crispy golgappas to hot samosas. Hassle-free delivery right to your doorstep.</p>
</div>
<div class="footer-column">
<h3>ChaatBazar</h3>
<ul class="footer-links">
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="orders.html">Orders</a></li>
<li><a href="favorites.html">Favorites</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
<div class="footer-column">
<h3>For Partners</h3>
<ul class="footer-links">
<li><a href="#">Partners With Us</a></li>
<li><a href="#">Apps For You</a></li>
<li><a href="#">Franchise Consulting</a></li>
<li><a href="#">Advertise With Us</a></li>
<li><a href="#">Sell On ChaatBazar</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Learn More</h3>
<ul class="footer-links">
<li><a href="#">Privacy & Security</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Help & Support</a></li>
<li><a href="#">Report a Fraud</a></li>
</ul>
</div>
<div class="footer-column">
<div class="footer-social-wrapper">
<h3>Connect Us</h3>
<div class="footer-social-icons">
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="https://youtube.com" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
<a href="https://whatsapp.com" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
<h3>Contact Us</h3>
<ul class="footer-contact-info">
<li><strong>Email:</strong> support@chaatbazar.com</li>
<li><strong>Phone:</strong> +91 98765 43210</li>
<li><strong>Headquarter:</strong> Bhavnagar, Gujarat, 364001</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 ChaatBazar. All rights reserved.</p>
</div>
</footer>
<script src="js/cart-manager.js"></script>
<script src="js/recently-viewed.js"></script>
<script src="js/delivery-tracker.js"></script>
<script src="js/geolocation.js"></script>
<script src="js/sanitization.js"></script>
<script src="js/main.js"></script>
<script src="js/auth.js"></script>
<script>
// ── Accordion ──
document.querySelectorAll('.faq-question').forEach(btn => {
btn.addEventListener('click', () => {
const item = btn.closest('.faq-item');
const isOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
if (!isOpen) item.classList.add('open');
});
});
// ── Category tab filter ──
document.querySelectorAll('.faq-tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.faq-tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
const filter = tab.dataset.filter;
document.querySelectorAll('.faq-category').forEach(cat => {
cat.style.display = (filter === 'all' || cat.dataset.cat === filter) ? 'block' : 'none';
});
// Close open items when switching category
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
});
});
</script>
</body>
</html>