Spaces:
Runtime error
Runtime error
Update templates/menu.html
Browse files- templates/menu.html +55 -1
templates/menu.html
CHANGED
|
@@ -555,6 +555,38 @@ form-check-input addon-option{
|
|
| 555 |
padding: 2px 8px;
|
| 556 |
font-size: 12px;
|
| 557 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 558 |
</style>
|
| 559 |
</head>
|
| 560 |
<body>
|
|
@@ -581,7 +613,7 @@ form-check-input addon-option{
|
|
| 581 |
</div>
|
| 582 |
|
| 583 |
<!-- Category Filter with Custom Radio Buttons -->
|
| 584 |
-
<form method="get" action="/menu" class="text-center mb-4">
|
| 585 |
<label class="form-label fw-bold">Select a Category:</label>
|
| 586 |
<div class="form-check form-check-inline">
|
| 587 |
{% for category in categories %}
|
|
@@ -596,7 +628,29 @@ form-check-input addon-option{
|
|
| 596 |
{% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
|
| 597 |
<label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
|
| 598 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 599 |
</form>
|
|
|
|
| 600 |
|
| 601 |
<!-- Show menu items only when Customized Dish is not selected -->
|
| 602 |
<div class="container mt-4">
|
|
|
|
| 555 |
padding: 2px 8px;
|
| 556 |
font-size: 12px;
|
| 557 |
}
|
| 558 |
+
|
| 559 |
+
|
| 560 |
+
|
| 561 |
+
|
| 562 |
+
|
| 563 |
+
|
| 564 |
+
|
| 565 |
+
|
| 566 |
+
/* Style for buttons */
|
| 567 |
+
.category-btn {
|
| 568 |
+
padding: 10px 20px;
|
| 569 |
+
margin: 5px;
|
| 570 |
+
border: 2px solid #ccc;
|
| 571 |
+
border-radius: 25px;
|
| 572 |
+
background-color: white;
|
| 573 |
+
font-size: 16px;
|
| 574 |
+
cursor: pointer;
|
| 575 |
+
transition: background-color 0.3s, color 0.3s;
|
| 576 |
+
}
|
| 577 |
+
|
| 578 |
+
.category-btn:hover {
|
| 579 |
+
background-color: #ff7043;
|
| 580 |
+
color: white;
|
| 581 |
+
}
|
| 582 |
+
|
| 583 |
+
/* Highlight selected button */
|
| 584 |
+
.active-btn {
|
| 585 |
+
background-color: #ff7043;
|
| 586 |
+
color: white;
|
| 587 |
+
border: 2px solid #ff7043;
|
| 588 |
+
}
|
| 589 |
+
|
| 590 |
</style>
|
| 591 |
</head>
|
| 592 |
<body>
|
|
|
|
| 613 |
</div>
|
| 614 |
|
| 615 |
<!-- Category Filter with Custom Radio Buttons -->
|
| 616 |
+
<!-- <form method="get" action="/menu" class="text-center mb-4">
|
| 617 |
<label class="form-label fw-bold">Select a Category:</label>
|
| 618 |
<div class="form-check form-check-inline">
|
| 619 |
{% for category in categories %}
|
|
|
|
| 628 |
{% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
|
| 629 |
<label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
|
| 630 |
</div>
|
| 631 |
+
</form> -->
|
| 632 |
+
<form method="get" action="/menu" class="text-center mb-4">
|
| 633 |
+
<label class="form-label fw-bold">Select a Category:</label>
|
| 634 |
+
|
| 635 |
+
<div class="form-check form-check-inline">
|
| 636 |
+
{% for category in categories %}
|
| 637 |
+
<!-- Replace the radio input with a button -->
|
| 638 |
+
<button type="submit" name="category" value="{{ category }}" class="category-btn
|
| 639 |
+
{% if selected_category == category %}active-btn{% endif %}">
|
| 640 |
+
{{ category }}
|
| 641 |
+
</button>
|
| 642 |
+
{% endfor %}
|
| 643 |
+
</div>
|
| 644 |
+
|
| 645 |
+
<!-- Separate Customized Dish button in a new div to align it properly -->
|
| 646 |
+
<div class="form-check">
|
| 647 |
+
<button type="submit" name="category" value="Customized Dish" class="category-btn
|
| 648 |
+
{% if selected_category == "Customized Dish" %}active-btn{% endif %}">
|
| 649 |
+
Customized Dish
|
| 650 |
+
</button>
|
| 651 |
+
</div>
|
| 652 |
</form>
|
| 653 |
+
|
| 654 |
|
| 655 |
<!-- Show menu items only when Customized Dish is not selected -->
|
| 656 |
<div class="container mt-4">
|