Update templates/menu.html

templates/menu.html

@@ -157,7 +157,7 @@
             width: 40px;
             height: 40px;
             border-radius: 50%;
-            background-color: #007bff;
+            background: linear-gradient(45deg, #FF8C00, #000000, #0000FF); /* Orange, black, blue gradient */
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -170,19 +170,19 @@
             position: absolute;
             right: 0;
             top: 100%;
-            background-color: #fff8f0;
-            border-radius: 5px;
-            width: 220px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            background: linear-gradient(45deg, #FF8C00, #000000, #32CD32); /* Orange, black, green gradient */
+            border: 1px solid #FFD700; /* Gold border for premium look */
+            border-radius: 8px;
+            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
             display: none;
-            border: 1px solid #ffd8b1;
         }
         .dropdown-menu .dropdown-item {
             padding: 12px 16px;
             text-decoration: none;
-            color: #333;
-            border-bottom: 1px solid #ffd8b1;
-            display: block;
+            color: #FFFFFF; /* White text for contrast */
+            border-bottom: 1px solid rgba(255, 215, 0, 0.3); /* Subtle gold separator */
+            display: flex;
+            align-items: center;
             font-size: 15px;
             transition: background-color 0.2s ease;
         }
@@ -190,8 +190,26 @@
             border-bottom: none;
         }
         .dropdown-menu .dropdown-item:hover {
-            background-color: #ffe4c4;
-            color: #333;
+            background-color: rgba(255, 215, 0, 0.2); /* Gold highlight on hover */
+            color: #FFFFFF;
+        }
+        .dropdown-menu .dropdown-item::before {
+            font-family: 'bootstrap-icons';
+            margin-right: 10px;
+            font-size: 16px;
+            color: #FFD700; /* Gold icons */
+        }
+        .dropdown-menu .dropdown-item:nth-child(1)::before {
+            content: '\F4DA'; /* User icon for View Profile */
+        }
+        .dropdown-menu .dropdown-item:nth-child(2)::before {
+            content: '\F2EA'; /* Clock icon for Order History */
+        }
+        .dropdown-menu .dropdown-item:nth-child(3)::before {
+            content: '\F4E6'; /* Summary icon for MY Summary */
+        }
+        .dropdown-menu .dropdown-item:nth-child(4)::before {
+            content: '\F52B'; /* Logout icon */
         }
         .fixed-top-bar {
             position: relative;
@@ -261,7 +279,7 @@
         }
         .addon-section h6 {
             margin: 0;
-            padding: 12pxkais 15px;
+            padding: 12px 15px;
             font-size: 1.1rem;
             font-weight: 600;
             color: #fff;
@@ -369,7 +387,7 @@
             animation: fadeInModal 0.3s ease-out;
         }
         #softDrinkModal .modal-content {
-            border-radius: 12òngs: 12px;
+            border-radius: 12px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
             background-color: #fff;
             overflow: hidden;
@@ -874,12 +892,12 @@
         .bottom-action-bar .btn-order-history {
             background: linear-gradient(45deg, #FF8C00, #32CD32);
             border-color: transparent;
-            color: #000000; /* Black text color */
+            color: #000000;
         }
         .bottom-action-bar .btn-order-history:hover {
             background: linear-gradient(45deg, #FF4500, #228B22);
             border-color: transparent;
-            color: #000000; /* Black text color on hover */
+            color: #000000;
         }
         .bottom-action-bar .btn-view-cart {
             background-color: #0FAA39;
@@ -1194,61 +1212,6 @@
                 padding: 8px 15px;
                 font-size: 0.9rem;
             }
-            /* Order History Button Styling */
-            .bottom-action-bar .btn-order-history {
-                background: linear-gradient(45deg, #FF8C00, #32CD32);
-                border-color: transparent;
-                color: #000000; /* Black text color */
-            }
-            .bottom-action-bar .btn-order-history:hover {
-                background: linear-gradient(45deg, #FF4500, #228B22);
-                border-color: transparent;
-                color: #000000; /* Black text color on hover */
-            }
-            /* Avatar Dropdown Styling */
-            .dropdown-menu {
-                background: linear-gradient(45deg, #FF8C00, #000000, #32CD32); /* Orange, black, green gradient */
-                border: 1px solid #FFD700; /* Gold border for premium look */
-                border-radius: 8px;
-                box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
-            }
-            /* Dropdown Item Styling */
-            .dropdown-menu .dropdown-item {
-                padding: 12px 16px;
-                text-decoration: none;
-                color: #FFFFFF; /* White text for contrast */
-                border-bottom: 1px solid rgba(255, 215, 0, 0.3); /* Subtle gold separator */
-                display: flex;
-                align-items: center;
-                font-size: 15px;
-                transition: background-color 0.2s ease;
-            }
-            .dropdown-menu .dropdown-item:last-child {
-                border-bottom: none;
-            }
-            .dropdown-menu .dropdown-item:hover {
-                background-color: rgba(255, 215, 0, 0.2); /* Gold highlight on hover */
-                color: #FFFFFF;
-            }
-            /* Icon Styling for Dropdown Items */
-            .dropdown-menu .dropdown-item::before {
-                font-family: 'bootstrap-icons';
-                margin-right: 10px;
-                font-size: 16px;
-                color: #FFD700; /* Gold icons */
-            }
-            .dropdown-menu .dropdown-item:nth-child(1)::before {
-                content: '\F4DA'; /* User icon for View Profile */
-            }
-            .dropdown-menu .dropdown-item:nth-child(2)::before {
-                content: '\F2EA'; /* Clock icon for Order History */
-            }
-            .dropdown-menu .dropdown-item:nth-child(3)::before {
-                content: '\F4E6'; /* Summary icon for MY Summary */
-            }
-            .dropdown-menu .dropdown-item:nth-child(4)::before {
-                content: '\F52B'; /* Logout icon */
-            }
         }
     </style>
 </head>
@@ -1959,7 +1922,7 @@
                         }
                     });
                     card.addEventListener('touchstart', () => {
-                        isTouching = true;
+                                                isTouching = true;
                         video.classList.add('active');
                         image.classList.add('hidden');
                         video.play().catch(err => {