0% found this document useful (0 votes)

2 views86 pages

Multi-Restaurant Platform Overview

Uploaded by

Harsh Goyal

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

2 views86 pages

Multi-Restaurant Platform Overview

Uploaded by

Harsh Goyal

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>FoodHub - Multi-Restaurant Platform</title>

<style>

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

min-height: 100vh;

color: #333;

overflow-x: hidden;

.container {

max-width: 1400px;

margin: 0 auto;

padding: 20px;

}
.page {

display: none;

animation: fadeIn 0.6s ease-in-out;

.[Link] {

display: block;

@keyframes fadeIn {

from { opacity: 0; transform: translateY(30px); }

to { opacity: 1; transform: translateY(0); }

/* Restaurant Selection Page */

.restaurant-selection {

min-height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 40px 0;

.main-header {
text-align: center;

margin-bottom: 60px;

.main-title {

font-size: 4.5em;

color: white;

text-shadow: 3px 3px 8px rgba(0,0,0,0.4);

margin-bottom: 20px;

background: linear-gradient(45deg, #ff6b35, #f7931e, #ff6b35);

background-size: 200% auto;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

animation: gradient 3s ease infinite;

@keyframes gradient {

0%, 100% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

.main-subtitle {

font-size: 1.6em;

color: rgba(255,255,255,0.9);

text-shadow: 1px 1px 3px rgba(0,0,0,0.3);

}

.restaurant-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));

gap: 50px;

margin-top: 40px;

.restaurant-card {

background: rgba(255, 255, 255, 0.95);

border-radius: 30px;

padding: 40px;

text-align: center;

cursor: pointer;

transition: all 0.4s ease;

box-shadow: 0 25px 50px rgba(0,0,0,0.15);

backdrop-filter: blur(20px);

position: relative;

overflow: hidden;

.restaurant-card::before {

content: '';

position: absolute;

top: -2px;
left: -2px;

right: -2px;

bottom: -2px;

background: linear-gradient(45deg, #ff6b35, #f7931e, #667eea, #764ba2);

border-radius: 30px;

z-index: -1;

opacity: 0;

transition: opacity 0.3s ease;

.restaurant-card:hover::before {

opacity: 0.3;

.restaurant-card:hover {

transform: translateY(-8px) scale(1.02);

box-shadow: 0 35px 70px rgba(0,0,0,0.2);

.restaurant-image {

width: 140px;

height: 140px;

border-radius: 50%;

margin: 0 auto 30px;

background-size: cover;

background-position: center;
border: 6px solid #fff;

box-shadow: 0 15px 30px rgba(0,0,0,0.2);

position: relative;

.restaurant-image::after {

content: '';

position: absolute;

top: -6px;

left: -6px;

right: -6px;

bottom: -6px;

border-radius: 50%;

background: linear-gradient(45deg, #ff6b35, #f7931e);

z-index: -1;

opacity: 0;

transition: opacity 0.3s;

.restaurant-card:hover .restaurant-image::after {

opacity: 0.7;

.punjabi-junction .restaurant-image {

background-image: url('data:image/svg+xml,<svg xmlns="[Link]

viewBox="0 0 200 200"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%"
y2="100%"><stop offset="0%" style="stop-color:%23ff6b35;stop-opacity:1" /><stop
offset="100%" style="stop-color:%23f7931e;stop-opacity:1" /></linearGradient></defs><circle
cx="100" cy="100" r="90" fill="url(%23grad1)"/><text x="100" y="120" font-family="Arial, sans-
serif" font-size="80" fill="white" text-anchor="middle">🍛</text></svg>');

.green-garden .restaurant-image {

background-image: url('data:image/svg+xml,<svg xmlns="[Link]

viewBox="0 0 200 200"><defs><linearGradient id="grad2" x1="0%" y1="0%" x2="100%"
y2="100%"><stop offset="0%" style="stop-color:%2328a745;stop-opacity:1" /><stop
offset="100%" style="stop-color:%2320c997;stop-opacity:1" /></linearGradient></defs><circle
cx="100" cy="100" r="90" fill="url(%23grad2)"/><text x="100" y="120" font-family="Arial, sans-
serif" font-size="80" fill="white" text-anchor="middle">🥗</text></svg>');

.restaurant-card h2 {

font-size: 2.5em;

margin-bottom: 20px;

color: #333;

font-weight: 700;

.punjabi-junction h2 { color: #ff6b35; }

.green-garden h2 { color: #28a745; }

.restaurant-card p {

color: #666;

font-size: 1.2em;

line-height: 1.7;
margin-bottom: 25px;

.restaurant-features {

display: flex;

justify-content: space-around;

margin: 25px 0;

.feature {

text-align: center;

padding: 15px;

.feature-icon {

font-size: 2em;

margin-bottom: 8px;

.feature-text {

font-size: 0.9em;

color: #666;

font-weight: 600;

.restaurant-speciality {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);

padding: 20px;

border-radius: 20px;

margin-top: 25px;

color: #555;

border-left: 5px solid;

.punjabi-junction .restaurant-speciality { border-left-color: #ff6b35; }

.green-garden .restaurant-speciality { border-left-color: #28a745; }

.rating {

display: flex;

justify-content: center;

align-items: center;

margin: 20px 0;

font-size: 1.1em;

font-weight: 600;

.stars {

color: #ffc107;

margin-right: 8px;

/* Login Pages */
.login-container {

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

position: relative;

padding: 40px;

.login-box {

background: rgba(255, 255, 255, 0.95);

padding: 60px;

border-radius: 30px;

box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);

width: 500px;

text-align: center;

backdrop-filter: blur(20px);

position: relative;

overflow: hidden;

.login-box::before {

content: '';

position: absolute;

top: 0;

left: -100%;
width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);

transition: left 0.8s;

.login-box:hover::before {

left: 100%;

.login-content {

position: relative;

z-index: 1;

.restaurant-logo {

width: 100px;

height: 100px;

margin: 0 auto 30px;

border-radius: 50%;

background-size: cover;

box-shadow: 0 15px 30px rgba(0,0,0,0.2);

.input-group {

margin-bottom: 30px;
text-align: left;

position: relative;

.input-group input {

width: 100%;

padding: 18px 25px;

border: 3px solid #e0e0e0;

border-radius: 30px;

font-size: 16px;

transition: all 0.4s;

background: rgba(255,255,255,0.9);

.input-group input:focus {

outline: none;

border-color: #5cb85c;

box-shadow: 0 0 25px rgba(92,184,92,0.3);

transform: scale(1.02);

.login-btn {

width: 100%;

padding: 20px;

background: linear-gradient(135deg, #28a745, #20c997);

color: white;
border: none;

border-radius: 30px;

font-size: 18px;

cursor: pointer;

transition: all 0.4s;

position: relative;

overflow: hidden;

font-weight: 600;

.login-btn::before {

content: '';

position: absolute;

top: 50%;

left: 50%;

width: 0;

height: 0;

background: rgba(255,255,255,0.2);

border-radius: 50%;

transition: all 0.4s;

transform: translate(-50%, -50%);

.login-btn:hover::before {

width: 300px;

height: 300px;
}

.login-btn:hover {

transform: translateY(-3px);

box-shadow: 0 15px 35px rgba(0,0,0,0.3);

/* Menu Pages */

.menu-container {

background: rgba(255, 255, 255, 0.95);

border-radius: 30px;

overflow: hidden;

box-shadow: 0 30px 60px rgba(0,0,0,0.2);

backdrop-filter: blur(20px);

.restaurant-header {

padding: 50px;

text-align: center;

position: relative;

overflow: hidden;

.punjabi-header {

background: linear-gradient(135deg, #ff6b35, #f7931e);

}
.green-header {

background: linear-gradient(135deg, #28a745, #20c997);

.restaurant-header h1 {

font-size: 4em;

color: white;

margin-bottom: 15px;

text-shadow: 2px 2px 6px rgba(0,0,0,0.4);

position: relative;

z-index: 1;

.restaurant-header p {

font-size: 1.4em;

color: rgba(255,255,255,0.9);

position: relative;

z-index: 1;

.menu-nav {

display: flex;

justify-content: center;

background: linear-gradient(135deg, #f8f9fa, #e9ecef);

padding: 30px;
gap: 20px;

flex-wrap: wrap;

box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);

.menu-nav-btn {

padding: 15px 30px;

background: white;

border: 3px solid #e0e0e0;

border-radius: 30px;

cursor: pointer;

transition: all 0.4s;

font-weight: 600;

font-size: 1.1em;

box-shadow: 0 5px 15px rgba(0,0,0,0.1);

.[Link],

.menu-nav-btn:hover {

background: linear-gradient(135deg, #28a745, #20c997);

color: white;

border-color: #28a745;

transform: translateY(-3px);

box-shadow: 0 10px 25px rgba(40,167,69,0.3);

}
.menu-section {

display: none;

padding: 50px;

.[Link] {

display: block;

.menu-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));

gap: 40px;

.menu-item {

background: white;

border-radius: 25px;

padding: 30px;

box-shadow: 0 15px 35px rgba(0,0,0,0.1);

transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

position: relative;

overflow: hidden;

border: 1px solid rgba(0,0,0,0.05);

}
.menu-item::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(40,167,69,0.1), transparent);

transition: left 0.6s;

.menu-item:hover::before {

left: 100%;

.menu-item:hover {

transform: translateY(-8px) scale(1.02);

box-shadow: 0 25px 50px rgba(0,0,0,0.2);

.item-image {

width: 90px;

height: 90px;

border-radius: 50%;

float: right;

background-size: cover;
background-position: center;

border: 4px solid #f0f0f0;

box-shadow: 0 8px 20px rgba(0,0,0,0.1);

.item-info h4 {

font-size: 1.5em;

margin-bottom: 12px;

color: #333;

font-weight: 700;

.item-description {

color: #666;

line-height: 1.6;

margin-bottom: 20px;

font-size: 1.05em;

.item-price {

font-size: 1.4em;

font-weight: bold;

color: #28a745;

margin-bottom: 20px;

}
.item-meta {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

font-size: 0.9em;

.item-category {

background: #e9ecef;

padding: 5px 12px;

border-radius: 15px;

color: #666;

font-weight: 600;

.item-rating {

color: #ffc107;

font-weight: 600;

.add-btn {

background: linear-gradient(135deg, #28a745, #20c997);

color: white;

border: none;

padding: 12px 25px;

border-radius: 25px;

cursor: pointer;

font-weight: bold;

transition: all 0.4s;

position: relative;

overflow: hidden;

font-size: 1.05em;

.add-btn::before {

content: '';

position: absolute;

top: 50%;

left: 50%;

width: 0;

height: 0;

background: rgba(255,255,255,0.3);

border-radius: 50%;

transition: all 0.4s;

transform: translate(-50%, -50%);

.add-btn:hover::before {

width: 120px;

height: 120px;

}
.add-btn:hover {

transform: scale(1.08);

box-shadow: 0 8px 20px rgba(40,167,69,0.4);

/* Cart - Fixed positioning and styling */

.cart {

position: fixed;

bottom: 20px;

right: 20px;

background: linear-gradient(135deg, #ff6b35, #f7931e);

color: white;

padding: 15px 25px;

border-radius: 50px;

cursor: pointer;

font-weight: bold;

box-shadow: 0 10px 30px rgba(255,107,53,0.4);

transition: all 0.3s ease;

z-index: 1000;

font-size: 1.1em;

display: none;

border: none;

.cart:hover {
transform: scale(1.05) translateY(-3px);

box-shadow: 0 15px 40px rgba(255,107,53,0.5);

.cart:active {

transform: scale(0.95) translateY(-1px);

.[Link] {

display: block;

animation: slideInUp 0.5s ease-out;

/* Payment Page */

.payment-container {

padding: 60px;

max-width: 800px;

margin: 0 auto;

.order-summary {

background: linear-gradient(135deg, #f8f9fa, #e9ecef);

padding: 40px;

border-radius: 25px;

margin-bottom: 50px;

box-shadow: 0 15px 35px rgba(0,0,0,0.1);

}
.qr-container {

text-align: center;

padding: 50px;

background: white;

border-radius: 25px;

box-shadow: 0 20px 45px rgba(0,0,0,0.15);

.qr-code {

width: 280px;

height: 280px;

margin: 30px auto;

background: #ffffff;

display: flex;

align-items: center;

justify-content: center;

border-radius: 25px;

border: 5px solid #28a745;

box-shadow: 0 15px 35px rgba(0,0,0,0.15);

.upi-info {

background: linear-gradient(135deg, #f8f9fa, #e9ecef);

padding: 25px;

border-radius: 20px;
margin: 30px 0;

border: 3px solid #dee2e6;

.nav-btn {

background: linear-gradient(135deg, #28a745, #20c997);

color: white;

border: none;

padding: 18px 35px;

border-radius: 30px;

cursor: pointer;

margin: 15px;

font-size: 16px;

font-weight: bold;

transition: all 0.4s;

.nav-btn:hover {

transform: translateY(-3px);

box-shadow: 0 12px 25px rgba(0,0,0,0.25);

.back-btn {

background: linear-gradient(135deg, #6c757d, #5a6268);

}
/* Responsive */

@media (max-width: 768px) {

.restaurant-grid {

grid-template-columns: 1fr;

gap: 30px;

.menu-grid {

grid-template-columns: 1fr;

.main-title {

font-size: 3em;

.restaurant-header h1 {

font-size: 2.5em;

.menu-nav {

flex-direction: column;

align-items: center;

.cart {

bottom: 15px;

right: 15px;

padding: 12px 20px;

font-size: 1em;

.payment-container {
padding: 30px 20px;

/* Additional Animations */

.menu-item {

animation: slideInUp 0.6s ease-out;

@keyframes slideInUp {

from {

opacity: 0;

transform: translateY(30px);

to {

opacity: 1;

transform: translateY(0);

.pulse {

animation: pulse 2s infinite;

@keyframes pulse {

0% { transform: scale(1); }
50% { transform: scale(1.05); }

100% { transform: scale(1); }

</style>

</head>

<body>

<div id="selectionPage" class="page active">

<h1 class="main-title">FoodHub</h1>

<p class="main-subtitle">Premium Multi-Restaurant Food Ordering Platform</p>

</div>

<div class="restaurant-card punjabi-junction" onclick="selectRestaurant('punjabi')">

<h2>Punjabi Junction</h2>

<span>4.8 (2.5k reviews)</span>

</div>

<p>Experience authentic Punjabi flavors with our traditional recipes passed down
through generations. Rich, aromatic dishes that bring the warmth of Punjab to your plate.</p>

<div class="feature-text">Fast Delivery</div>

</div>

<div class="feature-text">Award Winning</div>

</div>

<div class="feature-text">Trending</div>

</div>

<strong>Signature Dishes:</strong> Paneer Butter Masala, Rajma Chawal, Chole

Bhature, Punjabi Lassi

</div>

<div class="restaurant-card green-garden" onclick="selectRestaurant('green')">

<h2>Green Garden</h2>

<span>4.6 (1.8k reviews)</span>

</div>

<p>Fresh, healthy, and delicious pure vegetarian cuisine crafted with organic
ingredients. From comfort food to gourmet dishes - your wellness journey starts here.</p>
<div class="restaurant-features">

<div class="feature-text">100% Veg</div>

</div>

<div class="feature-text">Healthy</div>

</div>

<div class="feature-text">Organic</div>

</div>

<strong>Signature Dishes:</strong> Mediterranean Salad, Quinoa Bowl, Veggie

Burger, Green Smoothies

</div>

<div id="punjabi-login" class="page">

<div class="restaurant-logo" style="background-image: url('data:image/svg+xml,<svg

xmlns="[Link] viewBox="0 0 200 200"><circle
cx="100" cy="100" r="90"
fill="%23ff6b35"/><text x="100" y="120" font-
family="Arial" font-size="80" fill="white" text-
anchor="middle">🍛</text></svg>');"></div>

<h2 style="color: #ff6b35; font-size: 2.5em; margin-bottom: 30px;">Punjabi

Junction</h2>

<input type="text" placeholder="Enter your username" required>

</div>

<input type="password" placeholder="Enter your password" required>

</div>

<button type="submit" class="login-btn">Enter Restaurant</button>

</form>

<p style="margin-top: 25px; font-size: 0.95em; color: #888;">

Use any credentials to continue to menu

</p>

<button class="nav-btn back-btn" onclick="backToSelection()" style="margin-top:

25px;">Back to Restaurants</button>

</div>

</div>
</div>

<div id="green-login" class="page">

<div class="login-container green-header">

<div class="restaurant-logo" style="background-image: url('data:image/svg+xml,<svg

xmlns="[Link] viewBox="0 0 200 200"><circle
cx="100" cy="100" r="90"
fill="%2328a745"/><text x="100" y="120" font-
family="Arial" font-size="80" fill="white" text-
anchor="middle">🥗</text></svg>');"></div>

<h2 style="color: #28a745; font-size: 2.5em; margin-bottom: 30px;">Green

Garden</h2>

<input type="text" placeholder="Enter your username" required>

</div>

<input type="password" placeholder="Enter your password" required>

</div>

<button type="submit" class="login-btn">Enter Restaurant</button>

</form>

<p style="margin-top: 25px; font-size: 0.95em; color: #888;">

Use any credentials to continue to menu

</p>

<button class="nav-btn back-btn" onclick="backToSelection()" style="margin-top:

25px;">Back to Restaurants</button>
</div>

</div>

<div id="punjabi-menu" class="page">

<div class="restaurant-header punjabi-header">

<h1> Punjabi Junction</h1>

<p>Authentic Punjabi Cuisine Since 1985</p>

</div>

<div class="menu-nav-btn active" onclick="showMenuSection('punjabi',

'starters')">🥗 Starters</div>

<div class="menu-nav-btn" onclick="showMenuSection('punjabi', 'mains')">🍛 Main

Course</div>

<div class="menu-nav-btn" onclick="showMenuSection('punjabi', 'breads')">🫓

Breads</div>

<div class="menu-nav-btn" onclick="showMenuSection('punjabi', 'rice')">🍚 Rice &

Biryani</div>

<div class="menu-nav-btn" onclick="showMenuSection('punjabi', 'beverages')">🥤

Beverages</div>

<div class="menu-nav-btn" onclick="showMenuSection('punjabi', 'desserts')">🍮

Desserts</div>

</div>

<div id="punjabi-starters" class="menu-section active">

<div class="menu-item" data-name="Paneer Tikka" data-price="320">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

xmlns="[Link] viewBox="0 0 100 100"><circle
cx="50" cy="50" r="45" fill="%23ff6b35"/><text
x="50" y="55" font-family="Arial" font-
size="30" fill="white" text-
anchor="middle">🧀</text></svg>');"></div>

<h4>Paneer Tikka</h4>

<span class="item-category">Starter</span>

<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Marinated cottage cheese cubes grilled to

perfection with bell peppers, onions and aromatic spices</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Stuffed Mushrooms" data-price="280">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Stuffed Mushrooms</h4>

<span class="item-category">Starter</span>

<span class="item-rating">★ 4.5</span>

</div>

<p class="item-description">Button mushrooms stuffed with spiced paneer,

herbs and baked to golden perfection</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Veg Seekh Kebab" data-price="250">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

xmlns="[Link] viewBox="0 0 100 100"><circle
cx="50" cy="50" r="45" fill="%23ff6b35"/><text
x="50" y="55" font-family="Arial" font-
size="25" fill="white" text-
anchor="middle">🥢</text></svg>');"></div>

<h4>Veg Seekh Kebab</h4>

<span class="item-category">Starter</span>

<span class="item-rating">★ 4.6</span>

</div>
<p class="item-description">Spiced mixed vegetable kebabs grilled on skewers
with aromatic herbs and spices</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Crispy Corn" data-price="220">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Crispy Corn</h4>

<span class="item-category">Starter</span>

<span class="item-rating">★ 4.7</span>

</div>

<p class="item-description">Golden fried corn kernels tossed with spices,

herbs and tangy sauces</p>

<button class="add-btn">Add to Cart</button>

</div>

</div>

<div id="punjabi-mains" class="menu-section">

<div class="menu-item" data-name="Paneer Butter Masala" data-price="380">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Paneer Butter Masala</h4>

<span class="item-category">Main Course</span>

<span class="item-rating">★ 4.9</span>

</div>

<p class="item-description">Creamy tomato gravy with soft paneer cubes,

butter and aromatic spices - our signature dish</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Dal Makhani" data-price="320">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Dal Makhani</h4>

<span class="item-category">Main Course</span>

<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Slow-cooked black lentils in rich cream, butter

and traditional spices - a Punjab classic</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Chole Bhature" data-price="280">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Chole Bhature</h4>

<span class="item-category">Main Course</span>

<span class="item-rating">★ 4.7</span>

</div>
<p class="item-description">Spicy chickpea curry with fluffy deep-fried bread,
pickles and salad</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Kadai Paneer" data-price="350">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Kadai Paneer</h4>

<span class="item-category">Main Course</span>

<span class="item-rating">★ 4.6</span>

</div>

<p class="item-description">Paneer cooked with bell peppers in thick tomato

gravy with kadai masala</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Rajma Masala" data-price="300">

<h4>Rajma Masala</h4>

<span class="item-category">Main Course</span>

<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Red kidney beans in rich onion-tomato gravy

with aromatic spices</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Palak Paneer" data-price="340">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Palak Paneer</h4>

<span class="item-category">Main Course</span>

</div>

<p class="item-description">Fresh spinach curry with cottage cheese cubes

and aromatic spices</p>

<button class="add-btn">Add to Cart</button>

</div>

<div id="punjabi-breads" class="menu-section">

<div class="menu-item" data-name="Butter Naan" data-price="80">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Butter Naan</h4>

<span class="item-category">Bread</span>

<span class="item-rating">★ 4.7</span>

</div>
<p class="item-description">Fresh tandoor naan brushed with butter and
sprinkled with coriander</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Garlic Naan" data-price="90">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Garlic Naan</h4>

<span class="item-category">Bread</span>

<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Naan topped with fresh minced garlic, butter and

coriander leaves</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Amritsari Kulcha" data-price="100">

<h4>Amritsari Kulcha</h4>

<span class="item-category">Bread</span>

<span class="item-rating">★ 4.9</span>

</div>

<p class="item-description">Traditional stuffed bread with spiced potato and

onion filling</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Tandoori Roti" data-price="40">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Tandoori Roti</h4>

<span class="item-category">Bread</span>
<span class="item-rating">★ 4.6</span>

</div>

<p class="item-description">Traditional whole wheat bread cooked in

tandoor</p>

<button class="add-btn">Add to Cart</button>

</div>

<div id="punjabi-rice" class="menu-section">

<div class="menu-item" data-name="Veg Biryani" data-price="350">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Vegetable Biryani</h4>

<span class="item-rating">★ 4.8</span>

</div>
<p class="item-description">Aromatic basmati rice with mixed vegetables,
saffron and traditional spices</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Paneer Biryani" data-price="420">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Paneer Biryani</h4>

<span class="item-rating">★ 4.7</span>

</div>

<p class="item-description">Premium paneer biryani with basmati rice,

saffron and dry fruits</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Jeera Rice" data-price="180">

<h4>Jeera Rice</h4>

<span class="item-rating">★ 4.5</span>

</div>

<p class="item-description">Cumin flavored basmati rice with ghee and whole

spices</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Pulao" data-price="220">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Veg Pulao</h4>

</div>

<p class="item-description">Fragrant basmati rice cooked with mixed

vegetables and aromatic spices</p>

<button class="add-btn">Add to Cart</button>

</div>

<div id="punjabi-beverages" class="menu-section">

<div class="menu-item" data-name="Punjabi Lassi" data-price="120">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Punjabi Lassi</h4>

<span class="item-category">Beverage</span>

<span class="item-rating">★ 4.9</span>

</div>
<p class="item-description">Traditional thick yogurt drink with cream, sugar
and cardamom</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Masala Chai" data-price="50">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Masala Chai</h4>

<span class="item-category">Beverage</span>

<span class="item-rating">★ 4.7</span>

</div>

<p class="item-description">Traditional Indian tea brewed with aromatic

spices and fresh milk</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Fresh Lime Water" data-price="60">

<h4>Fresh Lime Water</h4>

<span class="item-category">Beverage</span>

<span class="item-rating">★ 4.5</span>

</div>

<p class="item-description">Refreshing lime water with mint, salt and a touch

of black salt</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Mango Lassi" data-price="140">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Mango Lassi</h4>

<span class="item-category">Beverage</span>
<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Creamy mango yogurt drink with fresh mango

pulp and cardamom</p>

<button class="add-btn">Add to Cart</button>

</div>

<div id="punjabi-desserts" class="menu-section">

<div class="menu-item" data-name="Gulab Jamun" data-price="120">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Gulab Jamun</h4>

<span class="item-category">Dessert</span>

<span class="item-rating">★ 4.8</span>

</div>
<p class="item-description">Soft milk dumplings soaked in rose-flavored sugar
syrup</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Kulfi" data-price="100">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Kulfi</h4>

<span class="item-category">Dessert</span>

<span class="item-rating">★ 4.7</span>

</div>

<p class="item-description">Traditional Indian ice cream with cardamom,

pistachios and almonds</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Ras Malai" data-price="150">

<h4>Ras Malai</h4>

<span class="item-category">Dessert</span>

<span class="item-rating">★ 4.9</span>

</div>

<p class="item-description">Soft cottage cheese dumplings in sweetened,

thickened milk</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Kheer" data-price="130">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Rice Kheer</h4>

<span class="item-category">Dessert</span>
<span class="item-rating">★ 4.6</span>

</div>

<p class="item-description">Traditional rice pudding with milk, sugar,

cardamom and dry fruits</p>

<button class="add-btn">Add to Cart</button>

</div>

<button class="nav-btn back-btn" onclick="backToSelection()" style="margin:

30px;">Back to Restaurants</button>

</div>

<div id="green-menu" class="page">

<div class="restaurant-header green-header">

<h1>🌿 Green Garden</h1>

<p>Fresh & Healthy Organic Cuisine</p>

</div>

<div class="menu-nav">
<div class="menu-nav-btn active" onclick="showMenuSection('green', 'salads')">🥗
Fresh Salads</div>

<div class="menu-nav-btn" onclick="showMenuSection('green', 'bowls')">🍲 Healthy

Bowls</div>

<div class="menu-nav-btn" onclick="showMenuSection('green', 'wraps')">🌯 Wraps &

Rolls</div>

<div class="menu-nav-btn" onclick="showMenuSection('green', 'smoothies')">🥤

Smoothies</div>

<div class="menu-nav-btn" onclick="showMenuSection('green', 'snacks')">🥜 Healthy

Snacks</div>

<div class="menu-nav-btn" onclick="showMenuSection('green', 'desserts')">🍯

Healthy Desserts</div>

</div>

<div id="green-salads" class="menu-section active">

<div class="menu-item" data-name="Mediterranean Salad" data-price="320">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

xmlns="[Link] viewBox="0 0 100 100"><circle
cx="50" cy="50" r="45"
fill="%2328a745"/><text x="50" y="55" font-
family="Arial" font-size="30" fill="white" text-
anchor="middle">🥗</text></svg>');"></div>

<h4>Mediterranean Salad</h4>

<span class="item-category">Salad</span>

<span class="item-rating">★ 4.8</span>

</div>
<p class="item-description">Fresh lettuce, cherry tomatoes, cucumbers,
olives, feta cheese with olive oil dressing</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Caesar Salad" data-price="280">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Caesar Salad</h4>

<span class="item-category">Salad</span>

<span class="item-rating">★ 4.7</span>

</div>

<p class="item-description">Crisp romaine lettuce, parmesan cheese,

croutons with classic Caesar dressing</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Quinoa Power Salad" data-price="350">

<h4>Quinoa Power Salad</h4>

<span class="item-category">Superfood</span>

<span class="item-rating">★ 4.9</span>

</div>

<p class="item-description">Organic quinoa, mixed greens, avocado, nuts,

seeds with lemon herb dressing</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Garden Fresh Salad" data-price="250">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Garden Fresh Salad</h4>

<span class="item-category">Salad</span>
<span class="item-rating">★ 4.6</span>

</div>

<p class="item-description">Mixed seasonal vegetables, sprouts, cherry

tomatoes with yogurt dressing</p>

<button class="add-btn">Add to Cart</button>

</div>

<div id="green-bowls" class="menu-section">

<div class="menu-item" data-name="Buddha Bowl" data-price="380">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Buddha Bowl</h4>

<span class="item-category">Power Bowl</span>

<span class="item-rating">★ 4.9</span>

</div>
<p class="item-description">Quinoa, roasted vegetables, avocado, chickpeas,
seeds with tahini dressing</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Protein Power Bowl" data-price="420">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Protein Power Bowl</h4>

<span class="item-category">Protein</span>

<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Black beans, tofu, edamame, brown rice, nuts

with protein-rich dressing</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Detox Bowl" data-price="350">

<h4>Detox Bowl</h4>

<span class="item-category">Cleanse</span>

<span class="item-rating">★ 4.7</span>

</div>

<p class="item-description">Kale, spinach, cucumber, celery, green apple,

lemon with detox dressing</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Mediterranean Bowl" data-price="360">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Mediterranean Bowl</h4>

<span class="item-category">Healthy Bowl</span>

</div>

<p class="item-description">Hummus, tabbouleh, roasted vegetables, olives,

pita with Mediterranean herbs</p>

<button class="add-btn">Add to Cart</button>

</div>

<div id="green-wraps" class="menu-section">

<div class="menu-item" data-name="Veggie Wrap" data-price="220">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Classic Veggie Wrap</h4>

<span class="item-rating">★ 4.6</span>

</div>
<p class="item-description">Fresh vegetables, hummus, sprouts in whole
wheat tortilla</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Avocado Wrap" data-price="280">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Avocado Wrap</h4>

<span class="item-category">Superfood</span>

<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Creamy avocado, lettuce, tomatoes, cucumber

with lime dressing</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Falafel Wrap" data-price="320">

<h4>Falafel Wrap</h4>

<span class="item-category">Protein</span>

<span class="item-rating">★ 4.7</span>

</div>

<p class="item-description">Homemade falafel, fresh vegetables, tahini sauce

in pita bread</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Quinoa Wrap" data-price="300">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Quinoa Wrap</h4>

<span class="item-category">Superfood</span>
<span class="item-rating">★ 4.5</span>

</div>

<p class="item-description">Quinoa salad, roasted vegetables, greens in

spinach tortilla</p>

<button class="add-btn">Add to Cart</button>

</div>

<div id="green-smoothies" class="menu-section">

<div class="menu-item" data-name="Green Detox Smoothie" data-price="180">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Green Detox Smoothie</h4>

<span class="item-category">Smoothie</span>

<span class="item-rating">★ 4.7</span>

</div>
<p class="item-description">Spinach, kale, apple, cucumber, ginger,
lemon</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Berry Blast Smoothie" data-price="200">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Berry Blast Smoothie</h4>

<span class="item-category">Antioxidant</span>

<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Mixed berries, banana, yogurt, honey, chia

seeds</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Protein Power Smoothie" data-price="220">

<h4>Protein Power Smoothie</h4>

<span class="item-category">Protein</span>

<span class="item-rating">★ 4.6</span>

</div>

<p class="item-description">Banana, almond butter, protein powder, almond

milk, dates</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Tropical Green Smoothie" data-price="190">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Tropical Green Smoothie</h4>

<span class="item-category">Tropical</span>
<span class="item-rating">★ 4.9</span>

</div>

<p class="item-description">Mango, pineapple, spinach, coconut water,

mint</p>

<button class="add-btn">Add to Cart</button>

</div>

<div id="green-snacks" class="menu-section">

<div class="menu-item" data-name="Hummus & Veggie Sticks" data-price="150">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Hummus & Veggie Sticks</h4>

<span class="item-category">Snack</span>

<span class="item-rating">★ 4.5</span>

</div>
<p class="item-description">Fresh hummus with carrot, cucumber, bell
pepper sticks</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Mixed Nuts & Seeds" data-price="180">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Mixed Nuts & Seeds</h4>

<span class="item-category">Healthy Snack</span>

<span class="item-rating">★ 4.7</span>

</div>

<p class="item-description">Almonds, walnuts, pumpkin seeds, sunflower

seeds</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Avocado Toast" data-price="240">

<h4>Avocado Toast</h4>

<span class="item-category">Toast</span>

<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Mashed avocado on multigrain bread with lime

and seeds</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Energy Balls" data-price="120">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Energy Balls</h4>

<span class="item-category">Energy</span>
<span class="item-rating">★ 4.6</span>

</div>

<p class="item-description">Dates, nuts, coconut, chia seeds rolled into

energy-packed balls</p>

<button class="add-btn">Add to Cart</button>

</div>

<div id="green-desserts" class="menu-section">

<div class="menu-item" data-name="Chia Pudding" data-price="160">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Chia Pudding</h4>

<span class="item-category">Healthy Dessert</span>

<span class="item-rating">★ 4.7</span>

</div>
<p class="item-description">Chia seeds, coconut milk, maple syrup, fresh
berries</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Raw Chocolate Mousse" data-price="200">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Raw Chocolate Mousse</h4>

<span class="item-category">Raw Dessert</span>

<span class="item-rating">★ 4.8</span>

</div>

<p class="item-description">Avocado, raw cacao, dates, coconut cream - guilt-

free indulgence</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Coconut Bliss Balls" data-price="140">

<h4>Coconut Bliss Balls</h4>

<span class="item-category">Sweet Treat</span>

<span class="item-rating">★ 4.6</span>

</div>

<p class="item-description">Coconut, cashews, vanilla, dates rolled in coconut

flakes</p>

<button class="add-btn">Add to Cart</button>

</div>

<div class="menu-item" data-name="Fruit Parfait" data-price="180">

<div class="item-image" style="background-image: url('data:image/svg+xml,<svg

<h4>Fresh Fruit Parfait</h4>

<span class="item-category">Fresh Dessert</span>

</div>

<p class="item-description">Greek yogurt, fresh fruits, granola, honey

drizzle</p>

<button class="add-btn">Add to Cart</button>

</div>

<button class="nav-btn back-btn" onclick="backToSelection()" style="margin:

30px;">Back to Restaurants</button>

</div>

<div id="payment-page" class="page">

<h1 style="text-align: center; margin-bottom: 40px; color: #333; font-size:

2.5em;">Order Summary & Payment</h1>

<h3 style="margin-bottom: 25px; color: #333; font-size: 1.8em;">Your Order</h3>

<div style="border-top: 3px solid #dee2e6; padding-top: 20px; margin-top: 20px;">

<div style="display: flex; justify-content: space-between; align-items: center;

font-size: 1.3em; font-weight: bold; color: #333;">

<span>Total Amount:</span>

<span id="total-amount" style="color: #28a745;">₹0</span>

</div>

<h3 style="margin-bottom: 25px; color: #333; font-size: 1.8em;">Scan QR Code to

Pay</h3>

</div>

<h4 style="margin-bottom: 15px; color: #333;">UPI Payment Details</h4>

<p><strong>UPI ID:</strong> 7986983804@superyes</p>

<p><strong>Amount:</strong> <span id="payment-amount">₹0</span></p>

<p><strong>Order ID:</strong> <span id="order-id"></span></p>

</div>

<p style="color: #666; font-size: 0.95em; margin-top: 20px;">

Scan the QR code with any UPI app (PhonePe, Google Pay, Paytm, etc.) to
complete payment

</p>
<div style="text-align: center; margin-top: 30px;">

<button onclick="confirmPayment()" class="nav-btn" style="background: linear-

gradient(135deg, #28a745, #20c997); font-size: 1.2em; padding: 15px 40px;">

Confirm Payment

</button>

</div>

<div style="text-align: center; margin-top: 30px;">

<button onclick="goToMenu()" class="nav-btn back-btn">Back to Menu</button>

</div>

<div id="success-page" class="page">

<div style="text-align: center; padding: 80px 40px;">

<div style="font-size: 5em; margin-bottom: 30px;">✅</div>

<h1 style="color: #28a745; font-size: 3em; margin-bottom: 30px;">Order Confirmed!

</h1>

<p style="font-size: 1.3em; color: #666; margin-bottom: 40px;">

Thank you for your order! Your delicious food is being prepared and will be
delivered soon.
</p>

<div style="background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 40px;

border-radius: 25px; margin-bottom: 40px;">

<h3 style="color: #333; margin-bottom: 20px;">Order Details</h3>

<p><strong>Order ID:</strong> <span id="success-order-id"></span></p>

<p><strong>Estimated Delivery:</strong> 30-45 minutes</p>

<p><strong>Total Amount:</strong> <span id="success-total" style="color:

#28a745; font-weight: bold;"></span></p>

</div>

<button onclick="backToSelection()" class="nav-btn" style="font-size: 1.2em;

padding: 15px 40px;">

Order Again

</button>

</div>

<button class="cart" id="cart" type="button">

Cart (<span id="cart-count">0</span>) - ₹<span id="cart-total">0</span>

</button>

// Global variables
let currentRestaurant = '';

let cart = [];

let cartTotal = 0;

// Restaurant selection

function selectRestaurant(restaurant) {

currentRestaurant = restaurant;

showPage(restaurant + '-login');

// Page navigation

function showPage(pageId) {

[Link]('.page').forEach(page => {

[Link]('active');

});

[Link](pageId).[Link]('active');

function backToSelection() {

currentRestaurant = '';

cart = [];

cartTotal = 0;

updateCartDisplay();

showPage('selectionPage');

}
// Form submissions

[Link]('punjabi-form').addEventListener('submit', function(e) {

[Link]();

showPage('punjabi-menu');

});

[Link]('green-form').addEventListener('submit', function(e) {

[Link]();

showPage('green-menu');

});

// Menu navigation

function showMenuSection(restaurant, section) {

// Hide all menu sections for this restaurant

[Link](`#${restaurant}-menu .menu-section`).forEach(section => {

[Link]('active');

});

// Show selected section

[Link](`${restaurant}-${section}`).[Link]('active');

// Update navigation buttons

[Link](`#${restaurant}-menu .menu-nav-btn`).forEach(btn => {

[Link]('active');

});

[Link]('active');
}

// Cart management - Fixed function

function addToCart(name, price) {

const existingItem = [Link](item => [Link] === name);

if (existingItem) {

[Link] += 1;

} else {

[Link]({

name: name,

price: parseInt(price),

quantity: 1,

restaurant: currentRestaurant

});

updateCartTotal();

updateCartDisplay();

// Visual feedback

const button = [Link];

const originalText = [Link];

const originalBg = [Link];

[Link] = 'Added!';
[Link] = '#28a745';

setTimeout(() => {

[Link] = originalText;

[Link] = originalBg || 'linear-gradient(135deg, #28a745, #20c997)';

}, 1000);

function updateCartTotal() {

cartTotal = [Link]((total, item) => total + ([Link] * [Link]), 0);

// Fixed cart display function

function updateCartDisplay() {

const cartCount = [Link]((total, item) => total + [Link], 0);

[Link]('cart-count').textContent = cartCount;

[Link]('cart-total').textContent = cartTotal;

// Show/hide cart with proper classes

const cartElement = [Link]('cart');

if (cartCount > 0) {

[Link]('show');

[Link]('pulse');

} else {

[Link]('show');

[Link]('pulse');
}

// Add event listeners to all Add to Cart buttons

[Link]('click', function(e) {

if ([Link]('add-btn')) {

[Link]();

const menuItem = [Link]('.menu-item');

const name = [Link];

const price = [Link];

addToCart(name, price);

});

// Payment page

function goToPayment() {

if ([Link] === 0) {

alert('Your cart is empty! Please add some items first.');

return;

displayOrderSummary();

generateQRCode();

showPage('payment-page');

}
function goToMenu() {

showPage(currentRestaurant + '-menu');

function displayOrderSummary() {

const orderItemsContainer = [Link]('order-items');

[Link] = '';

[Link](item => {

const itemElement = [Link]('div');

[Link] = 'display: flex; justify-content: space-between; align-items:

center; padding: 15px 0; border-bottom: 1px solid #eee;';

[Link] = `

<div>

<h4 style="margin: 0; color: #333;">${[Link]}</h4>

<p style="margin: 5px 0; color: #666; font-size: 0.9em;">Quantity: $

{[Link]}</p>

</div>

<div style="text-align: right;">

<span style="font-weight: bold; color: #28a745; font-size: 1.1em;">₹${[Link] *

[Link]}</span>

</div>

[Link](itemElement);

});
[Link]('total-amount').textContent = `₹${cartTotal}`;

[Link]('payment-amount').textContent = `₹${cartTotal}`;

// Generate order ID

const orderId = 'FH' + [Link]().toString().slice(-6);

[Link]('order-id').textContent = orderId;

function generateQRCode() {

const canvas = [Link]('qr-canvas');

const ctx = [Link]('2d');

const orderId = [Link]('order-id').textContent;

const upiString = `upi://pay?pa=7986983804@superyes&am=$

{cartTotal}&cu=INR&tn=FoodHub Order ${orderId}`;

// Set canvas size

[Link] = 250;

// Create QR code

const qr = qrcode(0, 'M');

[Link](upiString);

[Link]();

// Clear canvas
[Link](0, 0, [Link], [Link]);

[Link] = '#FFFFFF';

[Link](0, 0, [Link], [Link]);

// Draw QR code

const moduleCount = [Link]();

const cellSize = [Link] / moduleCount;

[Link] = '#000000';

for (let row = 0; row < moduleCount; row++) {

for (let col = 0; col < moduleCount; col++) {

if ([Link](row, col)) {

[Link](col * cellSize, row * cellSize, cellSize, cellSize);

function confirmPayment() {

const orderId = [Link]('order-id').textContent;

[Link]('success-order-id').textContent = orderId;

[Link]('success-total').textContent = `₹${cartTotal}`;

// Clear cart

cart = [];

cartTotal = 0;
updateCartDisplay();

showPage('success-page');

// Auto redirect after 5 seconds

setTimeout(() => {

backToSelection();

}, 5000);

// Initialize

[Link]('DOMContentLoaded', function() {

updateCartDisplay();

// Cart click event

const cartButton = [Link]('cart');

if (cartButton) {

[Link]('click', function(e) {

[Link]();

goToPayment();

});

// Restaurant card animations

const restaurantCards = [Link]('.restaurant-card');

[Link]((card, index) => {

[Link] = `${index * 0.2}s`;

});

// Smooth scrolling

[Link] = 'smooth';

// Keyboard shortcuts

[Link]('keydown', function(e) {

if ([Link] === 'Escape') {

const currentPage = [Link]('.[Link]');

if (currentPage && [Link] !== 'selectionPage') {

if ([Link]('menu')) {

backToSelection();

} else if ([Link] === 'payment-page') {

goToMenu();

});

// Responsive handling

function handleResize() {

if ([Link] <= 768) {

[Link]('.menu-nav').forEach(nav => {

[Link] = 'column';
});

} else {

[Link]('.menu-nav').forEach(nav => {

[Link] = 'row';

});

[Link]('resize', handleResize);

handleResize();

</script>

</body>

</html>

Grand Palace Hotel Luxury Stay
No ratings yet
Grand Palace Hotel Luxury Stay
15 pages
Restaurant Website HTML Template
No ratings yet
Restaurant Website HTML Template
6 pages
Hidup Sehat: Gaya Hidup & Makanan
No ratings yet
Hidup Sehat: Gaya Hidup & Makanan
32 pages
CSS Styling for Modern Web Design
No ratings yet
CSS Styling for Modern Web Design
14 pages
Percsploit Terms and Privacy Policy
No ratings yet
Percsploit Terms and Privacy Policy
9 pages
HealthTrack Pro: Nutrition & Health Guide
No ratings yet
HealthTrack Pro: Nutrition & Health Guide
25 pages
Zimeez IOS King Menu Interface
No ratings yet
Zimeez IOS King Menu Interface
5 pages
Tier 0 Floor Cleaning App Guide
No ratings yet
Tier 0 Floor Cleaning App Guide
7 pages
SMK Dr. Soetomo Surabaya Overview
No ratings yet
SMK Dr. Soetomo Surabaya Overview
34 pages
Ragam Budaya Indonesia: Eksplorasi Budaya
No ratings yet
Ragam Budaya Indonesia: Eksplorasi Budaya
35 pages
Cheat Menu for Game Enhancements
No ratings yet
Cheat Menu for Game Enhancements
16 pages
Aimbot Panel Beta Interface
No ratings yet
Aimbot Panel Beta Interface
26 pages
Ficha
No ratings yet
Ficha
59 pages
Tier 0 Floor Cleaning Application
No ratings yet
Tier 0 Floor Cleaning Application
6 pages
VITcafe Mobile App Development Project
No ratings yet
VITcafe Mobile App Development Project
23 pages
موقع كرة القدم التفاعلي
No ratings yet
موقع كرة القدم التفاعلي
11 pages
SWD 4130018
No ratings yet
SWD 4130018
13 pages
SkyUpload Header and Menu Design
No ratings yet
SkyUpload Header and Menu Design
4 pages
Scriptable Login and Menu Script
No ratings yet
Scriptable Login and Menu Script
4 pages
喂小猫
No ratings yet
喂小猫
20 pages
Delicious Food Place Website Design
0% (1)
Delicious Food Place Website Design
5 pages
Restaurant Menu with Interactive Sections
No ratings yet
Restaurant Menu with Interactive Sections
3 pages
Master Cheats Login and Features
No ratings yet
Master Cheats Login and Features
9 pages
DR4XO VIP Mod Menu Interface
No ratings yet
DR4XO VIP Mod Menu Interface
3 pages
Stylish Header and Menu Design
No ratings yet
Stylish Header and Menu Design
4 pages
Menu de Auxílios para LuxeCheats
No ratings yet
Menu de Auxílios para LuxeCheats
3 pages
Aplikasi KASIR untuk Teh Segar
No ratings yet
Aplikasi KASIR untuk Teh Segar
3 pages
HTML
No ratings yet
HTML
12 pages
Indian Food Recipes Web App Overview
No ratings yet
Indian Food Recipes Web App Overview
16 pages
Goa Trip Personalization Tool
No ratings yet
Goa Trip Personalization Tool
13 pages
Doctype HTML
No ratings yet
Doctype HTML
70 pages
RGXtreme Mods Login Interface
No ratings yet
RGXtreme Mods Login Interface
6 pages
Corbett Tiger Reserve Overview
No ratings yet
Corbett Tiger Reserve Overview
48 pages
Login para Sistema de Gestão SPA
No ratings yet
Login para Sistema de Gestão SPA
43 pages
Regional Indian Food Delivery Platform
No ratings yet
Regional Indian Food Delivery Platform
14 pages
Virtual World Game Server Guide
No ratings yet
Virtual World Game Server Guide
18 pages
Sample Front-End Web Page Design
No ratings yet
Sample Front-End Web Page Design
50 pages
MunnizX Free Fire Settings Panel
No ratings yet
MunnizX Free Fire Settings Panel
6 pages
E-Receipt Document Overview
No ratings yet
E-Receipt Document Overview
34 pages
Busitema University Library System
No ratings yet
Busitema University Library System
86 pages
My Food Blog: Recipes & Workshops
No ratings yet
My Food Blog: Recipes & Workshops
10 pages
Sistema de Serviços Online Interativo
No ratings yet
Sistema de Serviços Online Interativo
16 pages
Unsplash Photo 1521791136064
No ratings yet
Unsplash Photo 1521791136064
24 pages
6-Cup Coffee Subscription Service
No ratings yet
6-Cup Coffee Subscription Service
21 pages
Sistema de Serviços Online
No ratings yet
Sistema de Serviços Online
24 pages
Smart Notes Summarizer Overview
No ratings yet
Smart Notes Summarizer Overview
53 pages
@K1NGCHEAT Mod Menu Interface
No ratings yet
@K1NGCHEAT Mod Menu Interface
5 pages
Sistema de Serviços Online Interativo
No ratings yet
Sistema de Serviços Online Interativo
24 pages
RGXtreme Mods Login and Settings
No ratings yet
RGXtreme Mods Login and Settings
6 pages
Menú Interactivo con Efectos CSS
No ratings yet
Menú Interactivo con Efectos CSS
4 pages
Protfolio Bhairab
No ratings yet
Protfolio Bhairab
44 pages
Doctype HTML
No ratings yet
Doctype HTML
67 pages
FeastMeet: Young Foodie App
No ratings yet
FeastMeet: Young Foodie App
31 pages
Ocean Explorer 98 Web Design Guide
No ratings yet
Ocean Explorer 98 Web Design Guide
15 pages
Eloquente Catering Services Header
No ratings yet
Eloquente Catering Services Header
39 pages
Interactive Web Experience UI Code
No ratings yet
Interactive Web Experience UI Code
20 pages
Full Vermelho?
No ratings yet
Full Vermelho?
5 pages
Add Close Button to Tab in PyQt
No ratings yet
Add Close Button to Tab in PyQt
17 pages
Патруль України: Інтерактивна Карта
No ratings yet
Патруль України: Інтерактивна Карта
55 pages
Almarai Breakfast Lite Cream 100g
No ratings yet
Almarai Breakfast Lite Cream 100g
1 page
Daily Routines and School Vocabulary
No ratings yet
Daily Routines and School Vocabulary
2 pages
IDBI Bank Transaction Statement
No ratings yet
IDBI Bank Transaction Statement
2 pages
International Marketing Plan for Gourmet Pasta
No ratings yet
International Marketing Plan for Gourmet Pasta
111 pages
Short Dictations for Kids' Handwriting
No ratings yet
Short Dictations for Kids' Handwriting
4 pages
White Chocolate Cupcakes Recipe
0% (1)
White Chocolate Cupcakes Recipe
1 page
The Professional Chef - The Culinary Institue of America - Parte593
No ratings yet
The Professional Chef - The Culinary Institue of America - Parte593
2 pages
Weekly Inventory Report for Jams
No ratings yet
Weekly Inventory Report for Jams
10 pages
Essential Equipment for Commercial Kitchens
No ratings yet
Essential Equipment for Commercial Kitchens
3 pages
Nanda Devi Raj Yatra: A Divine Journey
No ratings yet
Nanda Devi Raj Yatra: A Divine Journey
24 pages
Affordable Vegetable Snacks for Students
No ratings yet
Affordable Vegetable Snacks for Students
48 pages
Candy Boys and Chocolate Facto
No ratings yet
Candy Boys and Chocolate Facto
27 pages
Carrot Puto Ampalaya Flan Innovation
No ratings yet
Carrot Puto Ampalaya Flan Innovation
12 pages
Kabayan Store Product Update August 2022
No ratings yet
Kabayan Store Product Update August 2022
177 pages
Harvest Moon DS Cute Cheat Guide
No ratings yet
Harvest Moon DS Cute Cheat Guide
14 pages
Rich Bread and Cinnamon Roll Recipe
No ratings yet
Rich Bread and Cinnamon Roll Recipe
3 pages
Understanding Vegetable Classifications
No ratings yet
Understanding Vegetable Classifications
34 pages
English Future Tenses Exercises
No ratings yet
English Future Tenses Exercises
17 pages
English Quiz for 2nd Grade Students
No ratings yet
English Quiz for 2nd Grade Students
4 pages
BBC Easy Cook 2017 101
100% (2)
BBC Easy Cook 2017 101
92 pages
Print Template
No ratings yet
Print Template
21 pages
Present Simple Grammar Quiz
No ratings yet
Present Simple Grammar Quiz
15 pages
Karnavati Khasa Menu Overview
No ratings yet
Karnavati Khasa Menu Overview
4 pages
TU Dublin Culinary Arts Programs Overview
No ratings yet
TU Dublin Culinary Arts Programs Overview
2 pages
Egg Cooking Techniques for Breakfast
No ratings yet
Egg Cooking Techniques for Breakfast
13 pages
Itinerary For France (06032025)
No ratings yet
Itinerary For France (06032025)
4 pages
BECE 2024 Career Technology Exam Guide
100% (6)
BECE 2024 Career Technology Exam Guide
5 pages
Food Vocabulary Worksheet
No ratings yet
Food Vocabulary Worksheet
1 page
Bugs Team 1 Tests Klucz Odpowiedzi
No ratings yet
Bugs Team 1 Tests Klucz Odpowiedzi
2 pages
Crackers
100% (3)
Crackers
116 pages