Hugging Face's logo

Spaces:
Subbu1304
/
BiryaniHubMenu03subbu
Sleeping

App Files Community
Subbu1304 commited on
Commit
9db9aae
·
verified ·
1 Parent(s): d22d613

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +110 -2
templates/menu.html CHANGED
@@ -41,6 +41,70 @@
41
  margin-top:1px;
42
  }
43
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
 
45
 
46
 
@@ -424,7 +488,9 @@ form-check-input addon-option{
424
  align-items: center;
425
  gap: 10px;
426
  }
427
- .modal-footer {
 
 
428
  display: flex;
429
  align-items: center;
430
  justify-content: space-between; /* Space between quantity and Add to Cart button */
@@ -471,7 +537,7 @@ form-check-input addon-option{
471
  width: 40px; /* Adjust input size for smaller screens */
472
  height: 35px;
473
  }
474
- }
475
  </style>
476
  </head>
477
  <body>
@@ -620,6 +686,47 @@ form-check-input addon-option{
620
  </div>
621
 
622
  <!-- Modal for Item Details -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
623
  <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
624
  <div class="modal-dialog modal-dialog-centered">
625
  <div class="modal-content">
@@ -662,6 +769,7 @@ form-check-input addon-option{
662
  </div>
663
  </div>
664
 
 
665
  <!-- JavaScript -->
666
  <script>
667
  // Show item details and fetch customization options
 
41
  margin-top:1px;
42
  }
43
 
44
+ /* model */
45
+ .modal-footer {
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: space-between; /* Space between quantity controls and Add to Cart button */
49
+ padding: 10px;
50
+ }
51
+
52
+ .modal-footer .d-flex {
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 10px; /* Space between quantity buttons */
56
+ }
57
+
58
+ .modal-footer .btn {
59
+ height: 40px; /* Set consistent button height */
60
+ padding: 0 15px; /* Adjust padding to fit inside the buttons */
61
+ }
62
+
63
+ .modal-footer .form-control {
64
+ width: 50px; /* Fixed width for quantity input */
65
+ height: 40px; /* Match the height of buttons */
66
+ text-align: center; /* Center the value inside the input */
67
+ }
68
+
69
+ .modal-footer .btn-primary {
70
+ background-color: #0FAA39; /* Green background for Add to Cart button */
71
+ border-color: #0FAA39; /* Border color to match button background */
72
+ font-weight: bold; /* Bold text */
73
+ padding: 10px 20px; /* Adjust padding to make the button look better */
74
+ height: 40px; /* Match the height with quantity buttons */
75
+ display: flex;
76
+ justify-content: center;
77
+ align-items: center;
78
+ width: auto; /* Auto width to adjust to button text */
79
+ border-radius: 5px; /* Rounded corners for the button */
80
+ }
81
+
82
+ .modal-footer .btn-outline-secondary {
83
+ height: 40px; /* Ensure quantity buttons are the same size */
84
+ width: 40px; /* Make sure the buttons are square */
85
+ border-radius: 5px; /* Rounded corners for the buttons */
86
+ }
87
+
88
+ @media (max-width: 576px) {
89
+ /* Responsive adjustments for smaller screens */
90
+ .modal-dialog {
91
+ max-width: 98%; /* Adjust modal width for smaller screens */
92
+ }
93
+
94
+ .modal-footer .btn {
95
+ height: 35px; /* Smaller buttons for small screens */
96
+ padding: 0 12px; /* Adjust padding to make the button look proportional */
97
+ }
98
+
99
+ .modal-footer .form-control {
100
+ width: 40px; /* Adjust input size for smaller screens */
101
+ height: 35px;
102
+ }
103
+
104
+ .modal-footer .d-flex {
105
+ gap: 8px; /* Reduce space between quantity buttons on smaller screens */
106
+ }
107
+ }
108
 
109
 
110
 
 
488
  align-items: center;
489
  gap: 10px;
490
  }
491
+
492
+ /* modal################## */
493
+ /* .modal-footer {
494
  display: flex;
495
  align-items: center;
496
  justify-content: space-between; /* Space between quantity and Add to Cart button */
 
537
  width: 40px; /* Adjust input size for smaller screens */
538
  height: 35px;
539
  }
540
+ } */
541
  </style>
542
  </head>
543
  <body>
 
686
  </div>
687
 
688
  <!-- Modal for Item Details -->
689
+ <!-- <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
690
+ <div class="modal-dialog modal-dialog-centered">
691
+ <div class="modal-content">
692
+ <div class="modal-header">
693
+ <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
694
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
695
+ </div>
696
+ <div class="modal-body">
697
+ <!-- Item Image -->
698
+ <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
699
+ <!-- Item Name -->
700
+ <h5 id="modal-name" class="fw-bold text-center"></h5>
701
+ <!-- Item Price -->
702
+ <p id="modal-price" class="text-muted text-center"></p>
703
+ <!-- Item Description -->
704
+ <p id="modal-description" class="text-secondary"></p>
705
+ <!-- Add-ons -->
706
+ <div id="modal-addons" class="modal-addons mt-4">
707
+ <h6>Customization Options</h6>
708
+ <div id="addons-list" class="addons-container">Loading customization options...</div>
709
+ </div>
710
+ <div class="mt-4">
711
+ <h6>Custom Request</h6>
712
+ <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
713
+ </div>
714
+ <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
715
+ </div>
716
+ <!-- Quantity Controls and Add to Cart Button -->
717
+ <div class="modal-footer d-flex align-items-center justify-content-between">
718
+ <!-- Quantity Controls -->
719
+ <div class="d-flex align-items-center gap-2">
720
+ <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
721
+ <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
722
+ <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
723
+ </div>
724
+ <!-- Add to Cart Button -->
725
+ <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ </div> -->
730
  <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
731
  <div class="modal-dialog modal-dialog-centered">
732
  <div class="modal-content">
 
769
  </div>
770
  </div>
771
 
772
+
773
  <!-- JavaScript -->
774
  <script>
775
  // Show item details and fetch customization options