Update templates/menu.html

templates/menu.html

@@ -236,6 +236,33 @@
             left: 4px;
             color: white;
         }
+        .addon-section .form-check-input[type="radio"] {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #343a40;
+            border-radius: 50%;
+            background-color: #f0f0f0;
+            position: relative;
+            margin-right: 10px;
+        }
+        .addon-section .form-check-input[type="radio"]:checked {
+            background-color: #006400;
+            border-color: #006400;
+        }
+        .addon-section .form-check-input[type="radio"]:checked::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 10px;
+            height: 10px;
+            background-color: white;
+            border-radius: 50%;
+        }
         .addon-section .form-check-label {
             font-size: 16px;
             margin-left: 5px;
@@ -578,7 +605,7 @@
                                     const optionId = `addon-spice-level-${option}`;
                                     const optionHTML = `
                                         <div class="form-check">
-                                            <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
+                                            <input type="radio" class="form-check-input" name="spice-level" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
                                             <label class="form-check-label" for="${optionId}">
                                                 ${option}
                                             </label>
@@ -752,12 +779,11 @@
                     name: option.getAttribute('data-name') || 'Default Type',
                     price: 0
                 }));
-                const spiceLevelOptions = Array.from(
-                    document.querySelectorAll('#spice-level-options input[type="checkbox"]:checked')
-                ).map(option => ({
-                    name: option.getAttribute('data-name') || 'Default Spice Level',
+                const spiceLevelOption = document.querySelector('#spice-level-options input[type="radio"][name="spice-level"]:checked');
+                const spiceLevelOptions = spiceLevelOption ? [{
+                    name: spiceLevelOption.getAttribute('data-name') || 'Default Spice Level',
                     price: 0
-                }));
+                }] : [];
                 selectedAddOns = [...selectedAddOns, ...prepStyleOptions, ...typeOptions, ...spiceLevelOptions];
             }