-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
372 lines (354 loc) · 19.8 KB
/
Copy pathindex.html
File metadata and controls
372 lines (354 loc) · 19.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aura | Premium Fine Dining</title>
<meta name="description" content="Experience unparalleled culinary excellence at Aura. Reserve your table today for a journey of taste and ambiance.">
<meta name="keywords" content="Indian restaurant, fine dining, Aura, authentic Indian food, luxury dining">
<meta name="author" content="Ray Rishu & Aura Team">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍽️</text></svg>">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://rayrishu19-wq.github.io/indian-restaurants-web/">
<meta property="og:title" content="Aura | Fine Dining Experience">
<meta property="og:description" content="Experience unparalleled culinary excellence at Aura. Authentic Indian heritage meets modern luxury.">
<meta property="og:image" content="assets/hero-bg.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://rayrishu19-wq.github.io/indian-restaurants-web/">
<meta property="twitter:title" content="Aura | Fine Dining Experience">
<meta property="twitter:description" content="Experience unparalleled culinary excellence at Aura. Authentic Indian heritage meets modern luxury.">
<meta property="twitter:image" content="assets/hero-bg.jpg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<div class="logo">AURA</div>
<ul id="nav-links" class="nav-links">
<li><a href="#hero" aria-current="page">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#beverages">Beverages</a></li>
<li><a href="#reservation">Reservations</a></li>
<li><a href="#menu" class="nav-cta">Order Online</a></li>
</ul>
<div class="lang-switch-container">
<button id="langToggleBtn" class="lang-btn" data-lang="en" aria-label="Switch to Hindi">हिन्दी</button>
</div>
<div class="hamburger" role="button" aria-label="Toggle navigation menu" tabindex="0" aria-expanded="false" aria-controls="nav-links">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<!-- Announcement Banner -->
<div class="announcement-banner">
🎉 Special Offer: Enjoy 20% off all reservations booked this week!
</div>
<main>
<!-- Hero Section -->
<section id="hero">
<div class="hero-content">
<h1 class="hero-title">Culinary Artistry <br> <span class="highlight">Perfected</span></h1>
<p class="hero-subtitle">Embark on a refined journey of taste, where every dish is a masterpiece of authentic Indian heritage.</p>
<div class="hero-btns">
<a href="#reservation" class="cta-btn">Book a Table</a>
<a href="#menu" class="cta-btn secondary">View Menu</a>
</div>
</div>
</section>
<!-- Heritage Section -->
<section id="heritage">
<div class="container heritage-container">
<div class="heritage-text">
<h2 class="section-title left">Our Culinary Heritage</h2>
<p>Since 1984, Aura has been the torchbearer of authentic Indian culinary traditions. What started as a small family kitchen in the heart of Delhi has blossomed into a sanctuary for food connoisseurs.</p>
<p>Our spices are hand-picked from the spice markets of Khari Baoli, and our techniques remain rooted in the royal kitchens of ancient India. At Aura, we don't just serve food; we serve stories on a plate.</p>
</div>
<div class="heritage-image">
<div class="image-wrapper">
<div class="premium-badge">Since 1984</div>
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section id="menu">
<div class="container">
<h2 class="section-title">Signature Selections</h2>
<!-- Menu Category Filters -->
<div class="menu-filters" role="tablist" aria-label="Menu categories">
<button class="filter-btn active" role="tab" aria-selected="true" data-filter="all">All Selections</button>
<button class="filter-btn" role="tab" aria-selected="false" data-filter="mains">Main Course</button>
<button class="filter-btn" role="tab" aria-selected="false" data-filter="desserts">Exquisite Desserts</button>
<button class="filter-btn" role="tab" aria-selected="false" data-filter="beverages">Signature Beverages</button>
</div>
<div class="menu-grid">
<!-- Mains -->
<div class="menu-card" data-category="mains">
<div class="menu-header">
<h3>Murgh Makhani (Butter Chicken)</h3>
<span class="price">Rs. 450</span>
</div>
<p class="menu-desc">Tender chicken slow-cooked in a rich, buttery tomato gravy with fenugreek and cream.</p>
</div>
<div class="menu-card" data-category="mains">
<div class="menu-header">
<h3>Lamb Rogan Josh</h3>
<span class="price">Rs. 550</span>
</div>
<p class="menu-desc">Kashmiri delicacy of slow-braised lamb shank in an aromatic sauce of fennel, ginger, and saffron.</p>
</div>
<div class="menu-card" data-category="mains">
<div class="menu-header">
<h3>Paneer Tikka Masala</h3>
<span class="price">Rs. 350</span>
</div>
<p class="menu-desc">Charcoal-smoked cottage cheese in a spiced onion-tomato reduction with fresh cilantro.</p>
</div>
<div class="menu-card" data-category="mains">
<div class="menu-header">
<h3>Malabar Prawn Curry</h3>
<span class="price">Rs. 650</span>
</div>
<p class="menu-desc">Plump jumbo prawns simmered in a coastal coconut broth with tamarind, mustard seeds, and curry leaves.</p>
</div>
<div class="menu-card" data-category="mains">
<div class="menu-header">
<h3>Hyderabadi Dum Biryani</h3>
<span class="price">Rs. 420</span>
</div>
<p class="menu-desc">Fragrant basmati rice slow-cooked with marinated meat, saffron, mint, and caramelized onions.</p>
</div>
<div class="menu-card" data-category="mains">
<div class="menu-header">
<h3>Tandoori Lamb Chops</h3>
<span class="price">Rs. 750</span>
</div>
<p class="menu-desc">New Zealand lamb chops marinated overnight in strained yogurt and secret royal spices, clay oven-roasted.</p>
</div>
<div class="menu-card" data-category="mains">
<div class="menu-header">
<h3>Dal Makhani</h3>
<span class="price">Rs. 280</span>
</div>
<p class="menu-desc">Black lentils and kidney beans simmered overnight on a wood fire, finished with churned butter.</p>
</div>
<!-- Desserts -->
<div class="menu-card" data-category="desserts">
<div class="menu-header">
<h3>Shahi Tukda</h3>
<span class="price">Rs. 180</span>
</div>
<p class="menu-desc">Rich bread pudding with cardamom-infused milk, topped with nuts and edible silver foil.</p>
</div>
<div class="menu-card" data-category="desserts">
<div class="menu-header">
<h3>Saffron Srikhand & Jamun</h3>
<span class="price">Rs. 220</span>
</div>
<p class="menu-desc">Warm golden gulab jamun served resting on chilled, saffron-infused strained yogurt.</p>
</div>
<div class="menu-card" data-category="desserts">
<div class="menu-header">
<h3>Jalebi with Rabri</h3>
<span class="price">Rs. 150</span>
</div>
<p class="menu-desc">Crisp, golden pretzels soaked in saffron syrup, served with rich condensed milk.</p>
</div>
<div class="menu-card special" data-category="desserts">
<div class="menu-header">
<h3>Daily Special: Masala Chai Panna Cotta</h3>
<span class="price">Rs. 210</span>
</div>
<p class="menu-desc">A perfect fusion dessert of creamy panna cotta infused with authentic Indian chai spices.</p>
</div>
<div class="menu-card" data-category="desserts">
<div class="menu-header">
<h3>Elaneer Payasam</h3>
<span class="price">Rs. 240</span>
</div>
<p class="menu-desc">Chilled, creamy South Indian pudding made from tender coconut pulp, coconut milk, and condensed milk.</p>
</div>
<div class="menu-card" data-category="desserts">
<div class="menu-header">
<h3>Kesar Pista Kulfi</h3>
<span class="price">Rs. 160</span>
</div>
<p class="menu-desc">Traditional rich, dense Indian ice cream slow-churned and flavored with saffron, cardamom, and pistachios.</p>
</div>
<div class="menu-card special" data-category="desserts">
<div class="menu-header">
<h3>Gulab Jamun Cheesecake</h3>
<span class="price">Rs. 280</span>
</div>
<p class="menu-desc">A velvety cardamom cream cheese layer embedded with soft, saffron-soaked gulab jamuns on a biscuit crust.</p>
</div>
<!-- Beverages -->
<div class="menu-card" data-category="beverages">
<div class="menu-header">
<h3>Mango Lassi</h3>
<span class="price">Rs. 150</span>
</div>
<p class="menu-desc">A refreshing blend of sweet mangoes, yogurt, and a touch of cardamom.</p>
</div>
<div class="menu-card" data-category="beverages">
<div class="menu-header">
<h3>Masala Chai</h3>
<span class="price">Rs. 80</span>
</div>
<p class="menu-desc">Brewed black tea with a mixture of aromatic Indian spices and herbs.</p>
</div>
<div class="menu-card" data-category="beverages">
<div class="menu-header">
<h3>Rose Sherbet</h3>
<span class="price">Rs. 120</span>
</div>
<p class="menu-desc">A fragrant, sweet drink made from rose petals, served chilled.</p>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<h2 class="section-title">Guest Experiences</h2>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="rating">★★★★★</div>
<p class="testimonial-text">"The Butter Chicken was life-changing. The ambiance at Aura is unmatched in the city. A truly premium experience."</p>
<p class="guest-name">— Vikram Sethi</p>
</div>
<div class="testimonial-card">
<div class="rating">★★★★★</div>
<p class="testimonial-text">"Authentic flavors that took me back to Delhi. The service was impeccable. Highly recommended for special occasions."</p>
<p class="guest-name">— Anjali Rao</p>
</div>
<div class="testimonial-card">
<div class="rating">★★★★★</div>
<p class="testimonial-text">"The Saffron Srikhand is a masterpiece. Beautifully presented and perfectly balanced. Five stars all the way!"</p>
<p class="guest-name">— Rohan Mehra</p>
</div>
</div>
<!-- Share Your Experience Form -->
<div class="review-form-container">
<h3 class="review-form-title">Share Your Experience</h3>
<form id="testimonialForm" class="review-form">
<div class="form-group row">
<div class="col">
<label for="reviewName">Name <span class="required">*</span></label>
<input type="text" id="reviewName" required placeholder="e.g. Vikram Sethi" aria-label="Enter your name">
</div>
<div class="col">
<label>Rating <span class="required">*</span></label>
<div class="star-rating" role="radiogroup" aria-label="Choose rating">
<span class="star" data-value="5" role="radio" aria-checked="false" tabindex="0">★</span>
<span class="star" data-value="4" role="radio" aria-checked="false" tabindex="0">★</span>
<span class="star" data-value="3" role="radio" aria-checked="false" tabindex="0">★</span>
<span class="star" data-value="2" role="radio" aria-checked="false" tabindex="0">★</span>
<span class="star" data-value="1" role="radio" aria-checked="false" tabindex="0">★</span>
</div>
</div>
</div>
<div class="form-group">
<label for="reviewText">Your Review <span class="required">*</span></label>
<textarea id="reviewText" required rows="3" placeholder="Describe your dining experience at Aura..." aria-label="Enter your review text"></textarea>
</div>
<button type="submit" class="submit-btn" id="submitReviewBtn">Submit Testimonial</button>
</form>
</div>
</div>
</section>
<!-- Reservation Section -->
<section id="reservation">
<div class="container reservation-container">
<div class="reservation-info">
<h2>Join Us for an Evening</h2>
<p>Secure your exclusive dining experience. Spaces are limited.</p>
<!-- My Bookings Card -->
<div class="my-bookings-container" id="myBookingsContainer">
<h3>Your Reservations</h3>
<div class="booking-search-bar">
<input type="text" id="bookingSearchInput" placeholder="Search by name..." aria-label="Search your reservations">
</div>
<div class="bookings-list" id="bookingsList" role="region" aria-live="polite">
<p class="no-bookings">No active bookings yet.</p>
</div>
</div>
</div>
<form id="reservationForm" class="reservation-form">
<div class="form-group">
<label for="name">Full Name <span class="required">*</span></label>
<input type="text" id="name" name="name" required placeholder="John Doe" aria-label="Enter your full name">
</div>
<div class="form-group row">
<div class="col">
<label for="date">Date</label>
<input type="date" id="date" name="date" required aria-label="Select reservation date">
</div>
<div class="col">
<label for="guests">Guests</label>
<select id="guests" name="guests" aria-label="Number of guests">
<option value="1">1 Person</option>
<option value="2" selected>2 People</option>
<option value="3">3 People</option>
<option value="4">4 People</option>
<option value="5+">5+ People</option>
</select>
</div>
</div>
<button type="submit" class="submit-btn" id="submitBtn">Confirm Reservation</button>
</form>
</div>
</section>
</main>
<!-- Newsletter Section -->
<section id="newsletter">
<div class="container newsletter-container">
<div class="newsletter-content">
<h2>Stay in the Loop</h2>
<p>Subscribe to receive exclusive offers, seasonal menu updates, and invitations to our special events.</p>
<form class="newsletter-form">
<input type="email" placeholder="Your Email Address" required aria-label="Email for newsletter">
<button type="submit" class="newsletter-btn">Subscribe</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container footer-grid">
<div class="footer-col brand">
<div class="footer-logo">AURA</div>
<p>Authentic Indian heritage meets modern luxury. An unparalleled culinary journey.</p>
<div class="social-links">
<a href="#" aria-label="Instagram">Instagram</a>
<a href="#" aria-label="Facebook">Facebook</a>
<a href="#" aria-label="Twitter">Twitter</a>
</div>
</div>
<div class="footer-col hours">
<h3>Opening Hours</h3>
<p>Mon - Thu: 12:00 PM - 10:00 PM</p>
<p>Fri - Sat: 12:00 PM - 11:30 PM</p>
<p>Sunday: 11:00 AM - 10:00 PM</p>
</div>
<div class="footer-col contact">
<h3>Visit Us</h3>
<p>123 Culinary Lane, Epicurean City</p>
<p>Email: <a href="mailto:reservations@aura.com">reservations@aura.com</a></p>
<p>Phone: <a href="tel:+919876543210">+91 98765 43210</a></p>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="currentYear">2026</span> Aura Fine Dining. All rights reserved.</p>
</div>
</footer>
<button id="backToTop" aria-label="Back to Top">↑</button>
<script src="script.js" defer></script>
</body>
</html>