Spaces:
Sleeping
Sleeping
Update templates/menu.html
Browse files- templates/menu.html +45 -8
templates/menu.html
CHANGED
|
@@ -172,6 +172,45 @@
|
|
| 172 |
.addon-section .form-check {
|
| 173 |
margin-left: 10px;
|
| 174 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 175 |
</style>
|
| 176 |
</head>
|
| 177 |
<body>
|
|
@@ -209,24 +248,22 @@
|
|
| 209 |
<div class="container mt-4">
|
| 210 |
<h1 class="text-center">Menu</h1>
|
| 211 |
|
| 212 |
-
|
| 213 |
-
|
| 214 |
-
<!-- Category Filter with Radio Buttons -->
|
| 215 |
<form method="get" action="/menu" class="text-center mb-4">
|
| 216 |
<label class="form-label fw-bold">Filter by Category:</label>
|
| 217 |
-
<div class="form-check">
|
| 218 |
{% for category in categories %}
|
| 219 |
-
<input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="
|
| 220 |
{% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
|
| 221 |
<label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
|
| 222 |
{% endfor %}
|
| 223 |
-
<input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="
|
| 224 |
{% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
|
| 225 |
<label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
|
| 226 |
</div>
|
| 227 |
</form>
|
| 228 |
-
|
| 229 |
-
|
| 230 |
<!-- Display text boxes for Customized Dish -->
|
| 231 |
{% if selected_category == "Customized Dish" %}
|
| 232 |
<div id="custom-dish-form" class="mt-4">
|
|
|
|
| 172 |
.addon-section .form-check {
|
| 173 |
margin-left: 10px;
|
| 174 |
}
|
| 175 |
+
/* Custom Radio Button Styles */
|
| 176 |
+
.custom-radio {
|
| 177 |
+
appearance: none;
|
| 178 |
+
-webkit-appearance: none;
|
| 179 |
+
-moz-appearance: none;
|
| 180 |
+
width: 18px;
|
| 181 |
+
height: 18px;
|
| 182 |
+
border: 2px solid #333;
|
| 183 |
+
border-radius: 50%;
|
| 184 |
+
margin-right: 10px;
|
| 185 |
+
outline: none;
|
| 186 |
+
cursor: pointer;
|
| 187 |
+
position: relative;
|
| 188 |
+
}
|
| 189 |
+
|
| 190 |
+
.custom-radio:checked {
|
| 191 |
+
background-color: #007bff;
|
| 192 |
+
border-color: #007bff;
|
| 193 |
+
}
|
| 194 |
+
|
| 195 |
+
.custom-radio:checked::after {
|
| 196 |
+
content: '';
|
| 197 |
+
position: absolute;
|
| 198 |
+
top: 4px;
|
| 199 |
+
left: 4px;
|
| 200 |
+
width: 8px;
|
| 201 |
+
height: 8px;
|
| 202 |
+
background-color: #fff;
|
| 203 |
+
border-radius: 50%;
|
| 204 |
+
}
|
| 205 |
+
|
| 206 |
+
.custom-radio:hover {
|
| 207 |
+
border-color: #007bff;
|
| 208 |
+
}
|
| 209 |
+
|
| 210 |
+
/* Optional: Style the labels */
|
| 211 |
+
.form-check-label {
|
| 212 |
+
font-size: 16px;
|
| 213 |
+
}
|
| 214 |
</style>
|
| 215 |
</head>
|
| 216 |
<body>
|
|
|
|
| 248 |
<div class="container mt-4">
|
| 249 |
<h1 class="text-center">Menu</h1>
|
| 250 |
|
| 251 |
+
|
| 252 |
+
<!-- Category Filter with Custom Radio Buttons -->
|
|
|
|
| 253 |
<form method="get" action="/menu" class="text-center mb-4">
|
| 254 |
<label class="form-label fw-bold">Filter by Category:</label>
|
| 255 |
+
<div class="form-check form-check-inline">
|
| 256 |
{% for category in categories %}
|
| 257 |
+
<input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="custom-radio"
|
| 258 |
{% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
|
| 259 |
<label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
|
| 260 |
{% endfor %}
|
| 261 |
+
<input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
|
| 262 |
{% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
|
| 263 |
<label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
|
| 264 |
</div>
|
| 265 |
</form>
|
| 266 |
+
|
|
|
|
| 267 |
<!-- Display text boxes for Customized Dish -->
|
| 268 |
{% if selected_category == "Customized Dish" %}
|
| 269 |
<div id="custom-dish-form" class="mt-4">
|