BiryaniHubflask370dup

Sleeping

App Files Files Community

Subbu1304 commited on Mar 13

Commit

a3a931a

verified ·

1 Parent(s): 5487fa6

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +109 -4

templates/menu.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <title>Menu</title>
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
         /* avthar */
       .avatar-dropdown-container {
     position: relative;
@@ -239,9 +239,114 @@
             margin-left: 10px;
         }
-    </style>
 </head>
-<body>
     <div class="fixed-top-bar">
         <!-- Removed Reward Points and Referral Code -->
@@ -602,5 +707,5 @@
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-</body>
 </html>

     <title>Menu</title>
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- <style>
         /* avthar */
       .avatar-dropdown-container {
     position: relative;
             margin-left: 10px;
         }
+    </style> -->
+  <style>
+    /* Menu item images and card styling */
+.menu-card {
+    max-width: 100%;
+    border-radius: 15px;
+    overflow: hidden;
+    background-color: #fff;
+    margin: auto;
+}
+.menu-image {
+    height: 200px;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 15px 15px 0 0;
+}
+.card-body {
+    padding: 15px;
+}
+/* Responsive grid for 3 columns */
+@media (min-width: 768px) {
+    .menu-card {
+        max-width: 100%;
+    }
+    .col-md-4 {
+        flex: 0 0 33.3333%; /* Make each card take up 1/3 of the row */
+        max-width: 33.3333%;
+    }
+}
+/* Adjusting the appearance of the category and section headers */
+h3 {
+    margin-top: 20px;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+  </style>
 </head>
+  <div class="container mt-4">
+    <h1 class="text-center">Menu</h1>
+    <!-- Category Filter -->
+    <form method="get" action="/menu" class="text-center mb-4">
+        <label for="category" class="form-label fw-bold">Filter by Category:</label>
+        <select id="category" name="category" class="form-select" onchange="this.form.submit()">
+            {% for category in categories %}
+                <option value="{{ category }}" {% if selected_category == category %}selected{% endif %}>
+                    {{ category }}
+                </option>
+            {% endfor %}
+            <option value="Customized Dish" {% if selected_category == "Customized Dish" %}selected{% endif %}>
+                Customized Dish
+            </option>
+        </select>
+    </form>
+    {% if selected_category == "Customized Dish" %}
+        <!-- Customized Dish Form -->
+        <div id="custom-dish-form" class="mt-4">
+            <h3>Create Your Custom Dish</h3>
+            <form method="POST" action="/generate_custom_dish">
+                <div class="mb-3">
+                    <label for="custom-dish-name" class="form-label">Dish Name</label>
+                    <input type="text" class="form-control" id="custom-dish-name" name="name" required>
+                </div>
+                <div class="mb-3">
+                    <label for="custom-dish-description" class="form-label">Dish Description</label>
+                    <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </form>
+        </div>
+    {% else %}
+        <!-- Menu Items in 3 Columns -->
+        <div class="container mt-4">
+            <h1 class="text-center">Menu</h1>
+            <div class="row">
+                {% for section, items in ordered_menu.items() %}
+                    <h3 class="col-12">{{ section }}</h3>
+                    <div class="row">
+                        {% for item in items %}
+                            <div class="col-md-4 mb-4">
+                                <div class="card menu-card">
+                                    <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                                    <div class="card-body">
+                                        <h5 class="card-title">{{ item.Name }}</h5>
+                                        <p class="card-text">${{ item.Price__c }}</p>
+                                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
+                                            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
+                                            Add +
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    {% endif %}
+</div>
+<!-- <body>
     <div class="fixed-top-bar">
         <!-- Removed Reward Points and Referral Code -->
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+</body> -->
 </html>