Hugging Face's logo

Spaces:
dschandra
/
MenuPage01
Sleeping

App Files Community
dschandra commited on
Commit
a5d5b7c
·
verified ·
1 Parent(s): e0629ed

Update templates/Menu.html

Browse files
Files changed (1) hide show
  1. templates/Menu.html +25 -102
templates/Menu.html CHANGED
@@ -3,101 +3,51 @@
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;
@@ -106,48 +56,21 @@
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
  async function loadMenu() {
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Food Menu</title>
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
 
10
  background: #f8f9fa;
11
+ margin: 0;
12
+ padding: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  }
14
  .container {
15
+ max-width: 900px;
16
+ margin: 20px auto;
17
  background: white;
18
  padding: 20px;
19
  border-radius: 10px;
20
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 
21
  }
22
  .menu-item {
23
  display: flex;
24
+ justify-content: space-between;
25
  align-items: center;
 
26
  padding: 15px;
27
+ border-bottom: 1px solid #ddd;
28
  }
29
  .menu-item img {
30
+ width: 120px;
31
+ height: 120px;
32
  border-radius: 10px;
33
+ object-fit: cover;
34
  }
35
  .menu-details {
36
+ flex-grow: 1;
37
+ padding: 0 15px;
38
  }
39
  .menu-details h3 {
40
  margin: 0;
41
  font-size: 18px;
42
+ font-weight: bold;
43
  }
44
  .menu-details p {
45
  margin: 5px 0;
46
  color: #666;
47
  }
48
+ .add-container {
49
+ position: relative;
50
+ }
51
  .add-btn {
52
  background: #28a745;
53
  color: white;
 
56
  cursor: pointer;
57
  border-radius: 5px;
58
  font-weight: bold;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  display: block;
60
  }
61
+ .customizable {
62
+ font-size: 12px;
63
+ color: gray;
64
+ text-align: center;
65
  }
66
  </style>
67
  </head>
68
  <body>
69
+
70
+ <div class="container">
71
+ <h2>Food Menu</h2>
72
+ <div id="menu"></div>
73
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
 
75
  <script>
76
  async function loadMenu() {