Spaces:
Runtime error
Runtime error
Update templates/menu.html
Browse files- templates/menu.html +40 -7
templates/menu.html
CHANGED
|
@@ -563,7 +563,7 @@ form-check-input addon-option{
|
|
| 563 |
|
| 564 |
|
| 565 |
|
| 566 |
-
/* Style for buttons */
|
| 567 |
.category-btn {
|
| 568 |
padding: 10px 20px;
|
| 569 |
margin: 5px;
|
|
@@ -585,8 +585,40 @@ form-check-input addon-option{
|
|
| 585 |
background-color: #ff7043;
|
| 586 |
color: white;
|
| 587 |
border: 2px solid #ff7043;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 588 |
}
|
| 589 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 590 |
</style>
|
| 591 |
</head>
|
| 592 |
<body>
|
|
@@ -631,10 +663,10 @@ form-check-input addon-option{
|
|
| 631 |
<label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
|
| 632 |
</div> -->
|
| 633 |
<!-- </form> -->
|
| 634 |
-
|
| 635 |
-
<label class="form-label fw-bold">Select a Category:</label>
|
| 636 |
|
| 637 |
-
<div class="form-check form-check-inline">
|
| 638 |
{% for category in categories %}
|
| 639 |
<!-- Replace the radio input with a button -->
|
| 640 |
<button type="submit" name="category" value="{{ category }}" class="category-btn
|
|
@@ -645,19 +677,20 @@ form-check-input addon-option{
|
|
| 645 |
</div>
|
| 646 |
|
| 647 |
<!-- Separate Customized Dish button in a new div to align it properly -->
|
| 648 |
-
<div class="form-check">
|
| 649 |
<button type="submit" name="category" value="Customized Dish" class="category-btn
|
| 650 |
{% if selected_category == "Customized Dish" %}active-btn{% endif %}">
|
| 651 |
Customized Dish
|
| 652 |
</button>
|
| 653 |
</div>
|
| 654 |
-
</form>
|
|
|
|
| 655 |
|
| 656 |
|
| 657 |
|
| 658 |
<!-- Show menu items only when Customized Dish is not selected -->
|
| 659 |
<div class="container mt-4">
|
| 660 |
-
<h1 class="text-center">Menu</h1>
|
| 661 |
|
| 662 |
<!-- Display text boxes for Customized Dish -->
|
| 663 |
{% if selected_category == "Customized Dish" %}
|
|
|
|
| 563 |
|
| 564 |
|
| 565 |
|
| 566 |
+
/* /* Style for buttons */
|
| 567 |
.category-btn {
|
| 568 |
padding: 10px 20px;
|
| 569 |
margin: 5px;
|
|
|
|
| 585 |
background-color: #ff7043;
|
| 586 |
color: white;
|
| 587 |
border: 2px solid #ff7043;
|
| 588 |
+
} */
|
| 589 |
+
/* Ensures all buttons stay in the same row */
|
| 590 |
+
.category-container {
|
| 591 |
+
display: flex;
|
| 592 |
+
justify-content: center;
|
| 593 |
+
flex-wrap: wrap; /* This allows the buttons to wrap to the next line if necessary */
|
| 594 |
+
gap: 10px; /* Space between buttons */
|
| 595 |
+
}
|
| 596 |
+
|
| 597 |
+
/* Style for the buttons */
|
| 598 |
+
.category-btn {
|
| 599 |
+
padding: 10px 20px;
|
| 600 |
+
margin: 5px;
|
| 601 |
+
border: 2px solid #ccc;
|
| 602 |
+
border-radius: 25px;
|
| 603 |
+
background-color: white;
|
| 604 |
+
font-size: 16px;
|
| 605 |
+
cursor: pointer;
|
| 606 |
+
transition: background-color 0.3s, color 0.3s;
|
| 607 |
+
}
|
| 608 |
+
|
| 609 |
+
.category-btn:hover {
|
| 610 |
+
background-color: #ff7043;
|
| 611 |
+
color: white;
|
| 612 |
}
|
| 613 |
|
| 614 |
+
/* Highlight selected button */
|
| 615 |
+
.active-btn {
|
| 616 |
+
background-color: #ff7043;
|
| 617 |
+
color: white;
|
| 618 |
+
border: 2px solid #ff7043;
|
| 619 |
+
}
|
| 620 |
+
|
| 621 |
+
|
| 622 |
</style>
|
| 623 |
</head>
|
| 624 |
<body>
|
|
|
|
| 663 |
<label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
|
| 664 |
</div> -->
|
| 665 |
<!-- </form> -->
|
| 666 |
+
<form method="get" action="/menu" class="text-center mb-4">
|
| 667 |
+
<!-- <label class="form-label fw-bold">Select a Category:</label> -->
|
| 668 |
|
| 669 |
+
<div class="form-check form-check-inline category-container">
|
| 670 |
{% for category in categories %}
|
| 671 |
<!-- Replace the radio input with a button -->
|
| 672 |
<button type="submit" name="category" value="{{ category }}" class="category-btn
|
|
|
|
| 677 |
</div>
|
| 678 |
|
| 679 |
<!-- Separate Customized Dish button in a new div to align it properly -->
|
| 680 |
+
<div class="form-check category-container">
|
| 681 |
<button type="submit" name="category" value="Customized Dish" class="category-btn
|
| 682 |
{% if selected_category == "Customized Dish" %}active-btn{% endif %}">
|
| 683 |
Customized Dish
|
| 684 |
</button>
|
| 685 |
</div>
|
| 686 |
+
</form>
|
| 687 |
+
|
| 688 |
|
| 689 |
|
| 690 |
|
| 691 |
<!-- Show menu items only when Customized Dish is not selected -->
|
| 692 |
<div class="container mt-4">
|
| 693 |
+
<!-- <h1 class="text-center">Menu</h1> -->
|
| 694 |
|
| 695 |
<!-- Display text boxes for Customized Dish -->
|
| 696 |
{% if selected_category == "Customized Dish" %}
|