Spaces:
Runtime error
Runtime error
Update templates/menu.html
Browse files- templates/menu.html +32 -53
templates/menu.html
CHANGED
|
@@ -10,7 +10,7 @@
|
|
| 10 |
<style>
|
| 11 |
body {
|
| 12 |
font-family: Arial, sans-serif;
|
| 13 |
-
background-color: #fdf4e3;
|
| 14 |
margin: 0;
|
| 15 |
padding: 0;
|
| 16 |
display: flex;
|
|
@@ -27,6 +27,7 @@
|
|
| 27 |
margin: auto;
|
| 28 |
display: flex;
|
| 29 |
flex-direction: column;
|
|
|
|
| 30 |
}
|
| 31 |
.menu-image {
|
| 32 |
height: 200px;
|
|
@@ -55,9 +56,18 @@
|
|
| 55 |
font-size: 13px;
|
| 56 |
font-weight: bold;
|
| 57 |
border-radius: 5px;
|
| 58 |
-
width: 100px;
|
| 59 |
background-color: #0FAA39;
|
| 60 |
border-color: #0FAA39;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 61 |
}
|
| 62 |
.btn-primary:hover, .btn-customize:hover {
|
| 63 |
background-color: #0FAA39;
|
|
@@ -86,61 +96,11 @@
|
|
| 86 |
background-color: #109835;
|
| 87 |
text-decoration: none;
|
| 88 |
}
|
| 89 |
-
.avatar-dropdown-container {
|
| 90 |
-
position: relative;
|
| 91 |
-
}
|
| 92 |
-
.avatar-icon {
|
| 93 |
-
width: 40px;
|
| 94 |
-
height: 40px;
|
| 95 |
-
border-radius: 50%;
|
| 96 |
-
background-color: #5bbfc1;
|
| 97 |
-
cursor: pointer;
|
| 98 |
-
display: flex;
|
| 99 |
-
align-items: center;
|
| 100 |
-
justify-content: center;
|
| 101 |
-
color: white;
|
| 102 |
-
font-size: 20px;
|
| 103 |
-
font-weight: bold;
|
| 104 |
-
}
|
| 105 |
-
.dropdown-menu {
|
| 106 |
-
position: absolute;
|
| 107 |
-
right: 0;
|
| 108 |
-
top: 100%;
|
| 109 |
-
background-color: #fff;
|
| 110 |
-
border-radius: 5px;
|
| 111 |
-
width: 200px;
|
| 112 |
-
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
| 113 |
-
display: none;
|
| 114 |
-
}
|
| 115 |
-
.avatar-dropdown-container:hover .dropdown-menu {
|
| 116 |
-
display: block;
|
| 117 |
-
}
|
| 118 |
-
.avatar-dropdown-container {
|
| 119 |
-
position: absolute;
|
| 120 |
-
right: 20px;
|
| 121 |
-
top: 50%;
|
| 122 |
-
transform: translateY(-50%);
|
| 123 |
-
display: flex;
|
| 124 |
-
align-items: right;
|
| 125 |
-
justify-content: center;
|
| 126 |
-
}
|
| 127 |
-
.dropdown-menu .dropdown-item {
|
| 128 |
-
padding: 10px 15px;
|
| 129 |
-
text-decoration: none;
|
| 130 |
-
color: #333;
|
| 131 |
-
border-bottom: 1px solid #ddd;
|
| 132 |
-
display: block;
|
| 133 |
-
}
|
| 134 |
-
.dropdown-menu .dropdown-item:last-child {
|
| 135 |
-
border-bottom: none;
|
| 136 |
-
}
|
| 137 |
-
.dropdown-menu .dropdown-item:hover {
|
| 138 |
-
background-color: #f1f1f1;
|
| 139 |
-
}
|
| 140 |
</style>
|
| 141 |
</head>
|
| 142 |
<body>
|
| 143 |
|
|
|
|
| 144 |
<div class="fixed-top-bar">
|
| 145 |
<div class="avatar-dropdown-container">
|
| 146 |
<div class="avatar-icon">
|
|
@@ -159,6 +119,7 @@
|
|
| 159 |
</div>
|
| 160 |
</div>
|
| 161 |
|
|
|
|
| 162 |
<form method="get" action="/menu" class="text-center mb-4">
|
| 163 |
<label class="form-label fw-bold">Select a Category:</label>
|
| 164 |
<div class="form-check form-check-inline">
|
|
@@ -175,6 +136,7 @@
|
|
| 175 |
</div>
|
| 176 |
</form>
|
| 177 |
|
|
|
|
| 178 |
<div class="container mt-4">
|
| 179 |
<h1 class="text-center">Menu</h1>
|
| 180 |
|
|
@@ -208,6 +170,7 @@
|
|
| 208 |
onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
|
| 209 |
Add
|
| 210 |
</button>
|
|
|
|
| 211 |
<button class="btn btn-customize" onclick="customizeItem('{{ item.Name }}', '{{ item.Price__c }}')">
|
| 212 |
<i class="bi bi-pencil-square"></i> Customize
|
| 213 |
</button>
|
|
@@ -220,6 +183,7 @@
|
|
| 220 |
{% endif %}
|
| 221 |
</div>
|
| 222 |
|
|
|
|
| 223 |
<div class="view-cart-container">
|
| 224 |
<a href="/cart" class="view-cart-button">
|
| 225 |
View Cart
|
|
@@ -262,9 +226,24 @@
|
|
| 262 |
</div>
|
| 263 |
|
| 264 |
<script>
|
|
|
|
| 265 |
function customizeItem(itemName, itemPrice) {
|
| 266 |
alert(`Customizing your ${itemName} for $${itemPrice}`);
|
| 267 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 268 |
</script>
|
| 269 |
|
| 270 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
| 10 |
<style>
|
| 11 |
body {
|
| 12 |
font-family: Arial, sans-serif;
|
| 13 |
+
background-color: #fdf4e3;
|
| 14 |
margin: 0;
|
| 15 |
padding: 0;
|
| 16 |
display: flex;
|
|
|
|
| 27 |
margin: auto;
|
| 28 |
display: flex;
|
| 29 |
flex-direction: column;
|
| 30 |
+
position: relative;
|
| 31 |
}
|
| 32 |
.menu-image {
|
| 33 |
height: 200px;
|
|
|
|
| 56 |
font-size: 13px;
|
| 57 |
font-weight: bold;
|
| 58 |
border-radius: 5px;
|
|
|
|
| 59 |
background-color: #0FAA39;
|
| 60 |
border-color: #0FAA39;
|
| 61 |
+
position: absolute;
|
| 62 |
+
right: 10px; /* Align the Customize button to the right */
|
| 63 |
+
bottom: 10px; /* Place it at the bottom right corner of the image */
|
| 64 |
+
display: inline-flex;
|
| 65 |
+
justify-content: center;
|
| 66 |
+
align-items: center;
|
| 67 |
+
padding: 5px 15px;
|
| 68 |
+
}
|
| 69 |
+
.btn-customize i {
|
| 70 |
+
margin-left: 5px;
|
| 71 |
}
|
| 72 |
.btn-primary:hover, .btn-customize:hover {
|
| 73 |
background-color: #0FAA39;
|
|
|
|
| 96 |
background-color: #109835;
|
| 97 |
text-decoration: none;
|
| 98 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 99 |
</style>
|
| 100 |
</head>
|
| 101 |
<body>
|
| 102 |
|
| 103 |
+
<!-- Fixed Top Bar -->
|
| 104 |
<div class="fixed-top-bar">
|
| 105 |
<div class="avatar-dropdown-container">
|
| 106 |
<div class="avatar-icon">
|
|
|
|
| 119 |
</div>
|
| 120 |
</div>
|
| 121 |
|
| 122 |
+
<!-- Category Filter -->
|
| 123 |
<form method="get" action="/menu" class="text-center mb-4">
|
| 124 |
<label class="form-label fw-bold">Select a Category:</label>
|
| 125 |
<div class="form-check form-check-inline">
|
|
|
|
| 136 |
</div>
|
| 137 |
</form>
|
| 138 |
|
| 139 |
+
<!-- Menu Section -->
|
| 140 |
<div class="container mt-4">
|
| 141 |
<h1 class="text-center">Menu</h1>
|
| 142 |
|
|
|
|
| 170 |
onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
|
| 171 |
Add
|
| 172 |
</button>
|
| 173 |
+
<!-- Customize Button -->
|
| 174 |
<button class="btn btn-customize" onclick="customizeItem('{{ item.Name }}', '{{ item.Price__c }}')">
|
| 175 |
<i class="bi bi-pencil-square"></i> Customize
|
| 176 |
</button>
|
|
|
|
| 183 |
{% endif %}
|
| 184 |
</div>
|
| 185 |
|
| 186 |
+
<!-- View Cart Button -->
|
| 187 |
<div class="view-cart-container">
|
| 188 |
<a href="/cart" class="view-cart-button">
|
| 189 |
View Cart
|
|
|
|
| 226 |
</div>
|
| 227 |
|
| 228 |
<script>
|
| 229 |
+
// Customize Item Action
|
| 230 |
function customizeItem(itemName, itemPrice) {
|
| 231 |
alert(`Customizing your ${itemName} for $${itemPrice}`);
|
| 232 |
}
|
| 233 |
+
|
| 234 |
+
// Handle Search Filtering (optional)
|
| 235 |
+
function filterMenu() {
|
| 236 |
+
let input = document.getElementById('searchBar').value.toLowerCase();
|
| 237 |
+
let items = document.querySelectorAll('.menu-card');
|
| 238 |
+
items.forEach(item => {
|
| 239 |
+
let itemName = item.querySelector('.card-title').innerText.toLowerCase();
|
| 240 |
+
if (itemName.includes(input)) {
|
| 241 |
+
item.style.display = 'block';
|
| 242 |
+
} else {
|
| 243 |
+
item.style.display = 'none';
|
| 244 |
+
}
|
| 245 |
+
});
|
| 246 |
+
}
|
| 247 |
</script>
|
| 248 |
|
| 249 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|