MenuPage01

Sleeping

App Files Files Community

dschandra commited on Mar 8

Commit

a5d5b7c

verified ·

1 Parent(s): e0629ed

Update templates/Menu.html

Browse files

Files changed (1) hide show

templates/Menu.html +25 -102

templates/Menu.html CHANGED Viewed

@@ -3,101 +3,51 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dynamic Menu</title>
     <style>
         body {
             font-family: Arial, sans-serif;
-            margin: 0;
             background: #f8f9fa;
-            text-align: center;
-        }
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: #ff6b00;
-            padding: 15px;
-            color: white;
-        }
-        .search-bar {
-            flex-grow: 1;
-            margin: 0 10px;
-        }
-        .search-bar input {
-            width: 70%;
-            padding: 8px;
-            border-radius: 5px;
-            border: none;
-        }
-        .avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            position: relative;
-        }
-        .avatar-menu {
-            display: none;
-            position: absolute;
-            top: 50px;
-            right: 0;
-            background: white;
-            color: black;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            border-radius: 5px;
-            width: 150px;
-            text-align: left;
-        }
-        .avatar-menu a {
-            display: block;
-            padding: 10px;
-            text-decoration: none;
-            color: black;
-        }
-        .avatar-menu a:hover {
-            background: #f0f0f0;
-        }
-        .avatar:hover .avatar-menu {
-            display: block;
         }
         .container {
-            max-width: 800px;
-            margin: auto;
             background: white;
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            margin-top: 20px;
         }
         .menu-item {
             display: flex;
-            flex-direction: column;
             align-items: center;
-            border-bottom: 1px solid #ddd;
             padding: 15px;
         }
         .menu-item img {
-            width: 100px;
-            height: 100px;
             border-radius: 10px;
-            margin-top: 10px;
         }
         .menu-details {
-            padding: 10px;
-            text-align: center;
         }
         .menu-details h3 {
             margin: 0;
             font-size: 18px;
         }
         .menu-details p {
             margin: 5px 0;
             color: #666;
         }
         .add-btn {
             background: #28a745;
             color: white;
@@ -106,48 +56,21 @@
             cursor: pointer;
             border-radius: 5px;
             font-weight: bold;
-            transition: background 0.3s;
-        }
-        .add-btn:hover {
-            background: #218838;
-        }
-        .cart-btn {
-            background: #28a745;
-            color: white;
-            border: none;
-            padding: 10px;
-            cursor: pointer;
-            border-radius: 5px;
-            font-weight: bold;
-            margin-top: 20px;
-            width: auto;
             display: block;
         }
-        .cart-btn:hover {
-            background: #218838;
         }
     </style>
 </head>
 <body>
-    <div class="header">
-        <div class="search-bar">
-            <input type="text" id="search" placeholder="Search food items..." onkeyup="searchMenu()">
-        </div>
-        <div class="avatar">👤
-            <div class="avatar-menu">
-                <a href="#">Profile</a>
-                <a href="#">Rewards</a>
-                <a href="#">My Orders</a>
-                <a href="#" onclick="logout()">Logout</a>
-            </div>
-        </div>
-    </div>
-    <div class="container">
-        <h2>Food Menu</h2>
-        <div id="menu"></div>
-        <button class="cart-btn">View Cart</button>
-    </div>
     <script>
     async function loadMenu() {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Food Menu</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             background: #f8f9fa;
+            margin: 0;
+            padding: 0;
         }
         .container {
+            max-width: 900px;
+            margin: 20px auto;
             background: white;
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
         .menu-item {
             display: flex;
+            justify-content: space-between;
             align-items: center;
             padding: 15px;
+            border-bottom: 1px solid #ddd;
         }
         .menu-item img {
+            width: 120px;
+            height: 120px;
             border-radius: 10px;
+            object-fit: cover;
         }
         .menu-details {
+            flex-grow: 1;
+            padding: 0 15px;
         }
         .menu-details h3 {
             margin: 0;
             font-size: 18px;
+            font-weight: bold;
         }
         .menu-details p {
             margin: 5px 0;
             color: #666;
         }
+        .add-container {
+            position: relative;
+        }
         .add-btn {
             background: #28a745;
             color: white;
             cursor: pointer;
             border-radius: 5px;
             font-weight: bold;
             display: block;
         }
+        .customizable {
+            font-size: 12px;
+            color: gray;
+            text-align: center;
         }
     </style>
 </head>
 <body>
+<div class="container">
+    <h2>Food Menu</h2>
+    <div id="menu"></div>
+</div>
     <script>
     async function loadMenu() {