-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
262 lines (240 loc) · 14.9 KB
/
Copy pathindex.html
File metadata and controls
262 lines (240 loc) · 14.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PasTeallas - Online Food Ordering</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation Header -->
<header class="navbar">
<div class="navbar-container">
<div class="navbar-logo">
<a href="home.html" class="logo-link">
<h2>PasTeallas</h2>
<span class="tagline">Fresh Food, Fast Delivery</span>
</a>
</div>
<div class="navbar-search">
<input type="text" placeholder="Search dishes..." class="search-input">
<button class="search-btn">Search</button>
</div>
<div class="navbar-right">
<button id="view-cart-btn-header" class="cart-icon">🛒 Cart</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="welcome" class="hero">
<div class="hero-overlay">
<h1>PasTeallas</h1>
<p>Authentic Flavors, Delivered Fresh to Your Door</p>
<button class="cta-btn">Order Now</button>
</div>
</section>
<!-- Menu Section -->
<section id="menu" class="menu-section">
<div class="menu-header">
<h1>Our Menu</h1>
<p class="menu-subtitle">Choose from our delicious selection</p>
<button class="sidebar-toggle-btn" id="sidebar-toggle-btn">☰ Filters</button>
</div>
<div class="menu-container">
<!-- Sidebar with Category Filters -->
<aside class="menu-sidebar" id="menu-sidebar">
<div class="sidebar-header">
<h3>Categories</h3>
<button class="sidebar-close-btn" id="sidebar-close-btn">✕</button>
</div>
<div class="category-filters">
<button class="filter-btn active" data-filter="all">All Items</button>
<button class="filter-btn" data-filter="rice">Rice Meals</button>
<button class="filter-btn" data-filter="burgers">Burgers</button>
<button class="filter-btn" data-filter="sausages">Hungarian Sausages</button>
<button class="filter-btn" data-filter="snacks">Snacks</button>
<button class="filter-btn" data-filter="pasta">Pasta</button>
<button class="filter-btn" data-filter="wings">Chicken Wings</button>
<button class="filter-btn" data-filter="combo">Combo Meals</button>
<button class="filter-btn" data-filter="drinks">Drinks</button>
</div>
</aside>
<!-- Main Content Area -->
<main class="menu-content">
<!-- Rice Meals -->
<div class="category-section" data-category="rice">
<h3 class="category-title">Rice Meals</h3>
<div class="menu-grid">
<div class="menu-card"><p>2 pcs Wings w/ Rice – ₱89</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>3 pcs Wings w/ Rice – ₱109</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>4 pcs Wings w/ Rice – ₱129</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Chicken Nuggets w/ Rice – ₱89</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Sausage Rice – ₱89</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Shanghai w/ Rice – ₱55</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Siomai Rice (8 pcs) – ₱65</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Flavored Fried Siomai – ₱79</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Pork Katsu – ₱99</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Chicken Katsu – ₱99</p><button class="btn add-btn">Add to Cart</button></div>
</div>
</div>
<!-- Burgers -->
<div class="category-section" data-category="burgers">
<h3 class="category-title">Burgers</h3>
<div class="menu-grid">
<div class="menu-card"><img src="IMAGE/quarter_pound.jpg" alt="Quarter Pounder"><p>Quarter Pounder – ₱100</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/cheezy_qpb.jpg" alt="Cheezy QPB"><p>Cheezy QPB – ₱120</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/bacon_qpb.jpg" alt="Bacon QPB"><p>Bacon QPB – ₱140</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/double_decker.jpg" alt="Double Decker"><p>Double Decker – ₱170</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/chicken_burger.jpg" alt="Chicken Burger"><p>Chicken Burger – ₱100</p><button class="btn add-btn">Add to Cart</button></div>
</div>
</div>
<!-- Sausages -->
<div class="category-section" data-category="sausages">
<h3 class="category-title">Hungarian Sausages</h3>
<div class="menu-grid">
<div class="menu-card"><p>Classic Hungarian – ₱89</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Cheezy Hungarian – ₱89</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Spicy Cheese – ₱89</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Original Spicy – ₱89</p><button class="btn add-btn">Add to Cart</button></div>
</div>
</div>
<!-- Snacks -->
<div class="category-section" data-category="snacks">
<h3 class="category-title">Snacks</h3>
<div class="menu-grid">
<div class="menu-card"><img src="IMAGE/fries.jpg" alt="French Fries"><p>French Fries – ₱65</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/cheese_sticks.jpg" alt="Cheese Sticks"><p>Cheese Sticks – ₱65</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/steamed_siomai.jpg" alt="Steamed Siomai"><p>Steamed Siomai – ₱45</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/lumpiang_shanghai.jpg" alt="Lumpiang Shanghai"><p>Lumpiang Shanghai – ₱70</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/chicken_nuggets.jpg" alt="Chicken Nuggets Ala Carte"><p>Chicken Nuggets Ala Carte – ₱99</p><button class="btn add-btn">Add to Cart</button></div>
</div>
</div>
<!-- Pasta -->
<div class="category-section" data-category="pasta">
<h3 class="category-title">Pasta</h3>
<div class="menu-grid">
<div class="menu-card"><img src="IMAGE/italian_spag.jpg" alt="Italian Spaghetti"><p>Italian Spaghetti – ₱79</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/creamy_carbonara.jpg" alt="Creamy Carbonara"><p>Creamy Carbonara – ₱79</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/chicken_pesto.jpg" alt="Chicken Pesto"><p>Chicken Pesto – ₱79</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/spicy_tuna.jpg" alt="Spicy Tuna Pasta"><p>Spicy Tuna Pasta – ₱79</p><button class="btn add-btn">Add to Cart</button></div>
</div>
</div>
<!-- Wings -->
<div class="category-section" data-category="wings">
<h3 class="category-title">Chicken Wings</h3>
<div class="menu-grid">
<div class="menu-card"><img src="" alt=""><p>6 pcs (2 flavors) – ₱189</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="" alt=""><p>8 pcs (2 flavors) – ₱229</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="" alt=""><p>10 pcs (2 flavors) – ₱269</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="" alt=""><p>12 pcs (3 flavors) – ₱299</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="" alt=""><p>15 pcs (3 flavors) – ₱349</p><button class="btn add-btn">Add to Cart</button></div>
</div>
</div>
<!-- Combo Meals -->
<div class="category-section" data-category="combo">
<h3 class="category-title">Combo Meals</h3>
<div class="menu-grid">
<div class="menu-card"><img src="IMAGE/pasta_drinks.jpg" alt="Pasta + Drink"><p>Pasta + Drink – ₱129</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/burger_drinks.jpg" alt="Burger + Drink"><p>Burger + Drink – ₱149</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/hungarian_drink.jpg" alt="Hungarian Sausage + Drink"><p>Hungarian Sausage + Drink – ₱139</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/wings_meal.jpg" alt="Wings Meal"><p>Wings Meal – ₱159</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/busog_meals.jpg" alt="Busog Meal"><p>Busog Meal – ₱179</p><button class="btn add-btn">Add to Cart</button></div>
</div>
</div>
<!-- Drinks -->
<div class="category-section" data-category="drinks">
<h3 class="category-title">Drinks</h3>
<h3>Coffee Series</h3>
<div class="menu-grid">
<div class="menu-card"><img src="IMAGE/mocha.jpg" alt="Creamy Mocha"><p>Creamy Mocha – ₱75</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/cappucino.jpg" alt="Cafe Cappuccino"><p>Cappuccino – ₱75</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/machiato.jpg" alt="Cafe Macchiato"><p>Cafe Macchiato – ₱75</p><button class="btn add-btn">Add to Cart</button></div>
</div>
<h3>Flavored Milktea</h4>
<div class="menu-grid">
<div class="menu-card"><img src="IMAGE/classic.jpg" alt="Classic Milktea"><p>Classic Milktea – ₱75</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/wintermelon.jpg" alt="Wintermelon"><p>Wintermelon – ₱75</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/matcha.jpg" alt="Matcha"><p>Matcha – ₱85</p><button class="btn add-btn">Add to Cart</button></div>
</div>
<h3>Mogu Koolers</h4>
<div class="menu-grid">
<div class="menu-card"><img src="IMAGE/classic_lemonade.jpg" alt="Classic Lemonade"><p>Classic Lemonade – ₱55</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/mango_lemonade.jpg" alt="Mango Lemonade"><p>Mango Lemonade – ₱55</p><button class="btn add-btn">Add to Cart</button></div>
</div>
<h3>Yakult Series</h4>
<div class="menu-grid">
<div class="menu-card"><p>Lemon Yakult – ₱75</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Orange Yakult – ₱75</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><p>Classic Yakult Milktea – ₱75</p><button class="btn add-btn">Add to Cart</button></div>
</div>
<h3>Frappe</h4>
<div class="menu-grid">
<div class="menu-card"><img src="IMAGE/mocha.jpg" alt="Mocha"><p>Mocha – ₱120</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/java_chip.jpg" alt="Java Chip"><p>Java Chip – ₱120</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/caramel_macchiato.jpg" alt="Caramel Macchiato"><p>Caramel Macchiato – ₱120</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/strawberry_creme.jpg" alt="Strawberry Creme"><p>Strawberry Creme – ₱120</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/matcha_creme.jpg" alt="Matcha Creme"><p>Matcha Creme – ₱120</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/ube_creme.jpg" alt="Ube Creme"><p>Ube Creme – ₱120</p><button class="btn add-btn">Add to Cart</button></div>
</div>
<h3>Cheesecake Drinks</h4>
<div class="menu-grid">
<div class="menu-card"><img src="IMAGE/classic_cheesecake.jpg" alt="Classic Cheesecake"><p>Classic Cheesecake – ₱130</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/oreo_cheesecake.jpg" alt="Oreo Cheesecake"><p>Oreo Cheesecake – ₱130</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/blueberry_graham_cheesecake.jpg" alt="Blueberry Graham Cheesecake"><p>Blueberry Graham Cheesecake – ₱130</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/mango_graham_cheesecake.jpg" alt="Mango Graham Cheesecake"><p>Mango Graham Cheesecake – ₱130</p><button class="btn add-btn">Add to Cart</button></div>
<div class="menu-card"><img src="IMAGE/strawberry_cheesecake.jpg" alt="Strawberry Cheesecake"><p>Strawberry Cheesecake – ₱130</p><button class="btn add-btn">Add to Cart</button></div>
</div>
</div>
</section>
<!-- Floating Cart Button -->
<button id="view-cart-btn">
<span>🛒 View Cart</span>
<span class="cart-count" style="display: none;"></span>
</button>
<!-- Cart Section -->
<section id="checkout" class="checkout-section">
<div class="checkout-header">
<h2>Your Cart</h2>
<button class="close-checkout-btn" onclick="toggleCartSection()">✕</button>
</div>
<div class="cart-items"></div>
<div class="checkout-total">
<strong>Total: ₱0</strong>
</div>
<div class="checkout-buttons">
<button class="btn" onclick="proceedToCheckout()">Proceed to Checkout</button>
<button class="btn clear" onclick="clearCart()">Clear Cart</button>
<button class="btn secondary" onclick="toggleCartSection()">Continue Shopping</button>
</div>
</section>
</main>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>PasTeallas</h3>
<p>Delicious food made fresh for you.</p>
</div>
<div class="footer-section">
<h3>Contact</h3>
<p>📱 +63 123 456 7890</p>
<p>📧 info@pasteallas.com</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#menu">Menu</a></li>
<li><a href="#checkout">Order</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 PasTeallas. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>