Hugging Face's logo

Spaces:
dschandra
/
MenuPage
Sleeping

App Files Community
dschandra commited on
Commit
971e00f
·
verified ·
1 Parent(s): c9afd96

Create templates/Menu.html

Browse files
Files changed (1) hide show
  1. templates/Menu.html +187 -0
templates/Menu.html ADDED
@@ -0,0 +1,187 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dynamic Menu</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ background: #f8f9fa;
12
+ text-align: center;
13
+ }
14
+ .header {
15
+ display: flex;
16
+ justify-content: space-between;
17
+ align-items: center;
18
+ background: #ff6b00;
19
+ padding: 15px;
20
+ color: white;
21
+ }
22
+ .search-bar {
23
+ flex-grow: 1;
24
+ margin: 0 10px;
25
+ }
26
+ .search-bar input {
27
+ width: 70%;
28
+ padding: 8px;
29
+ border-radius: 5px;
30
+ border: none;
31
+ }
32
+ .avatar {
33
+ width: 40px;
34
+ height: 40px;
35
+ border-radius: 50%;
36
+ background: white;
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ cursor: pointer;
41
+ position: relative;
42
+ }
43
+ .avatar-menu {
44
+ display: none;
45
+ position: absolute;
46
+ top: 50px;
47
+ right: 0;
48
+ background: white;
49
+ color: black;
50
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
51
+ border-radius: 5px;
52
+ width: 150px;
53
+ text-align: left;
54
+ }
55
+ .avatar-menu a {
56
+ display: block;
57
+ padding: 10px;
58
+ text-decoration: none;
59
+ color: black;
60
+ }
61
+ .avatar-menu a:hover {
62
+ background: #f0f0f0;
63
+ }
64
+ .avatar:hover .avatar-menu {
65
+ display: block;
66
+ }
67
+ .container {
68
+ max-width: 800px;
69
+ margin: auto;
70
+ background: white;
71
+ padding: 20px;
72
+ border-radius: 10px;
73
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
74
+ margin-top: 20px;
75
+ }
76
+ .menu-item {
77
+ display: flex;
78
+ flex-direction: column;
79
+ align-items: center;
80
+ border-bottom: 1px solid #ddd;
81
+ padding: 15px;
82
+ }
83
+ .menu-item img {
84
+ width: 100px;
85
+ height: 100px;
86
+ border-radius: 10px;
87
+ margin-top: 10px;
88
+ }
89
+ .menu-details {
90
+ padding: 10px;
91
+ text-align: center;
92
+ }
93
+ .menu-details h3 {
94
+ margin: 0;
95
+ font-size: 18px;
96
+ }
97
+ .menu-details p {
98
+ margin: 5px 0;
99
+ color: #666;
100
+ }
101
+ .add-btn {
102
+ background: #28a745;
103
+ color: white;
104
+ border: none;
105
+ padding: 10px 20px;
106
+ cursor: pointer;
107
+ border-radius: 5px;
108
+ font-weight: bold;
109
+ transition: background 0.3s;
110
+ }
111
+ .add-btn:hover {
112
+ background: #218838;
113
+ }
114
+ .cart-btn {
115
+ background: #28a745;
116
+ color: white;
117
+ border: none;
118
+ padding: 10px;
119
+ cursor: pointer;
120
+ border-radius: 5px;
121
+ font-weight: bold;
122
+ margin-top: 20px;
123
+ width: auto;
124
+ display: block;
125
+ }
126
+ .cart-btn:hover {
127
+ background: #218838;
128
+ }
129
+ </style>
130
+ </head>
131
+ <body>
132
+ <div class="header">
133
+ <div class="search-bar">
134
+ <input type="text" id="search" placeholder="Search food items..." onkeyup="searchMenu()">
135
+ </div>
136
+ <div class="avatar">👤
137
+ <div class="avatar-menu">
138
+ <a href="#">Profile</a>
139
+ <a href="#">Rewards</a>
140
+ <a href="#">My Orders</a>
141
+ <a href="#" onclick="logout()">Logout</a>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="container">
147
+ <h2>Food Menu</h2>
148
+ <div id="menu"></div>
149
+ <button class="cart-btn">View Cart</button>
150
+ </div>
151
+
152
+ <script>
153
+ const menuItems = [
154
+ { name: "Margherita Pizza", price: "₹299", image: "pizza.jpg", description: "Classic Margherita with fresh basil and mozzarella." },
155
+ { name: "Veg Burger", price: "₹149", image: "burger.jpg", description: "Crispy veggie patty with fresh lettuce and tomato." },
156
+ { name: "Pasta Alfredo", price: "₹249", image: "pasta.jpg", description: "Creamy Alfredo sauce with penne pasta." },
157
+ { name: "French Fries", price: "₹99", image: "fries.jpg", description: "Crispy golden French fries with ketchup." },
158
+ { name: "Cold Coffee", price: "₹129", image: "coffee.jpg", description: "Chilled coffee with creamy froth." }
159
+ ];
160
+
161
+ function loadMenu() {
162
+ const menuContainer = document.getElementById("menu");
163
+ menuContainer.innerHTML = "";
164
+ menuItems.forEach(item => {
165
+ const menuItem = document.createElement("div");
166
+ menuItem.classList.add("menu-item");
167
+ menuItem.innerHTML = `
168
+ <button class="add-btn">ADD</button>
169
+ <div class="menu-details">
170
+ <h3>${item.name}</h3>
171
+ <p>${item.price}</p>
172
+ <p>${item.description}</p>
173
+ </div>
174
+ <img src="${item.image}" alt="${item.name}">
175
+ `;
176
+ menuContainer.appendChild(menuItem);
177
+ });
178
+ }
179
+
180
+ function logout() {
181
+ alert("Logged out successfully!");
182
+ }
183
+
184
+ document.addEventListener("DOMContentLoaded", loadMenu);
185
+ </script>
186
+ </body>
187
+ </html>