Spaces:

Swathi6
/

Biryanihub

Sleeping

App Files Files Community

Swathi6 commited on Apr 1

Commit

075312b

verified ·

1 Parent(s): 5f983ee

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +60 -119

templates/menu.html CHANGED Viewed

@@ -61,29 +61,31 @@
     border-color: #ffffff;
     box-shadow: none;
 }
-.view-cart-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 999;
-}
-.view-cart-button {
-    background-color: #0FAA39; /* Updated View Cart button background color */
-    color: #fff;
-    padding: 10px 20px;
-    border-radius: 30px;
-    font-size: 1rem;
-    font-weight: bold;
-    text-decoration: none;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.view-cart-button:hover {
-    background-color: #109835; /* Slightly darker shade for hover effect */
-    text-decoration: none;
-}
 .avatar-dropdown-container {
     position: relative;
 }
@@ -180,29 +182,32 @@ h1.text-center {
     z-index: 1000; /* Make sure it's still above other content */
 }
 .search-bar-container {
-    padding: 10px;
-    position: absolute;
-    left: 20px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    width: 300px; /* Adjust width as needed */
-}
-.search-bar-container input {
-    width: 85%;
-    padding: 8px 10px 8px 30px; /* Add padding for the icon */
-    font-size: 16px;
-    border-radius: 10px;
-    border: none;
-}
-.search-icon {
-    position: absolute;
-    left: 15px; /* Position the icon inside the input box */
-    font-size: 20px;
-    color: #888; /* Icon color */
-}
 /* Style for customization sections */
 .addon-section {
     background-color: #fff; /* Light gray background */
@@ -394,6 +399,14 @@ form-check-input addon-option{
 </style>
 </head>
 <body>
  <div class="fixed-top-bar">
     <!-- Avatar and Dropdown -->
@@ -408,12 +421,7 @@ form-check-input addon-option{
         </div>
     </div>
-    <!-- Search Bar Section -->
-    <div class="search-bar-container">
-        <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
-        <i class="bi bi-search search-icon"></i> <!-- Search icon inside the input -->
-    </div>
-</div>
 <!-- Category Filter with Custom Radio Buttons -->
 <form method="get" action="/menu" class="text-center mb-4">
@@ -480,73 +488,7 @@ form-check-input addon-option{
 {% endif %}
     </div>
-  <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hover Effect for Chicken Biryani Video</title>
-    <style>
-        /* Container for the video */
-        .menu-item {
-            width: 320px;
-            height: 180px;
-            position: relative;
-            overflow: hidden;
-            border-radius: 15px;  /* Rounded corners */
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-            cursor: pointer;
-        }
-        /* The video element */
-        .menu-item video {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: opacity 0.5s ease-in-out;
-        }
-        /* Description overlay */
-        .menu-item .description {
-            position: absolute;
-            bottom: 20px;
-            left: 20px;
-            background: rgba(0, 0, 0, 0.6);
-            color: white;
-            padding: 10px;
-            font-size: 16px;
-            font-weight: bold;
-            border-radius: 5px;
-            opacity: 0;
-            transition: opacity 0.3s ease-in-out;
-        }
-        /* When hovering over the menu item, the video plays and the description becomes visible */
-        .menu-item:hover video {
-            opacity: 1;
-        }
-        .menu-item:hover .description {
-            opacity: 1;
-        }
-        /* Optional: Hover effect when the user hovers over the menu */
-        .menu-item:hover {
-            transform: scale(1.05);
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
-        }
-    </style>
-</head>
-<body>
-<div class="menu-item">
-    <!-- Chicken Biryani Video -->
-    <video id="biryani-video" muted preload="auto" loop>
-        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
-        Your browser does not support the video tag.
-    </video>
-    <!-- Description that will appear on hover -->
-    <div class="description">Chicken Biryani - Delicious & Flavorful</div>
-</div>
     <!-- View Cart Button -->
     <div class="view-cart-container">
         <a href="/cart" class="view-cart-button">
@@ -612,7 +554,6 @@ form-check-input addon-option{
         modalSectionEl.setAttribute('data-category', selectedCategory);
          // Set the default quantity to 1
              document.getElementById('quantityInput').value = 1;
         // Fetch customization options based on the section
         fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)

     border-color: #ffffff;
     box-shadow: none;
 }
+ .view-cart-container {
+        text-align: center;
+        margin-top: 20px;
+    }
+    .view-cart-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #007BFF; /* Blue color */
+        color: white;
+        padding: 10px 20px;
+        border-radius: 50px; /* Rounded corners */
+        font-size: 16px;
+        font-weight: bold;
+        text-decoration: none;
+        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Shadow effect */
+        transition: background-color 0.3s ease;
+    }
+    .view-cart-button:hover {
+        background-color: #0056b3; /* Darker blue on hover */
+    }
+    .cart-icon {
+        margin-right: 10px; /* Space between icon and text */
+        font-size: 20px; /* Icon size */
+    }
 .avatar-dropdown-container {
     position: relative;
 }
     z-index: 1000; /* Make sure it's still above other content */
 }
 .search-bar-container {
+        padding: 10px;
+        position: absolute;
+        left: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        width: 300px; /* Adjust width as needed */
+        background-color: white; /* Background color for the input container */
+        border-radius: 25px; /* Rounded corners for the input box */
+        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Slight shadow effect */
+    }
+    .search-bar-container input {
+        width: 100%; /* Ensure input takes up full width of container */
+        padding: 8px 10px 8px 30px; /* Padding for text and icon */
+        font-size: 16px;
+        border-radius: 25px; /* Rounded corners */
+        border: 1px solid #ddd; /* Light border color */
+        outline: none; /* Remove outline */
+    }
+    .search-icon {
+        position: absolute;
+        left: 15px; /* Position the icon inside the input box */
+        font-size: 18px;
+        color: #888; /* Icon color */
+    }
 /* Style for customization sections */
 .addon-section {
     background-color: #fff; /* Light gray background */
 </style>
 </head>
 <body>
+<!-- Search Bar Section -->
+<div class="search-bar-container">
+    <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
+    <span class="search-icon"><i class="bi bi-search"></i></span> <!-- Search icon inside the input -->
+</div>
+<!-- Bootstrap Icons CDN -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
  <div class="fixed-top-bar">
     <!-- Avatar and Dropdown -->
         </div>
     </div>
 <!-- Category Filter with Custom Radio Buttons -->
 <form method="get" action="/menu" class="text-center mb-4">
 {% endif %}
     </div>
     <!-- View Cart Button -->
     <div class="view-cart-container">
         <a href="/cart" class="view-cart-button">
         modalSectionEl.setAttribute('data-category', selectedCategory);
          // Set the default quantity to 1
              document.getElementById('quantityInput').value = 1;
         // Fetch customization options based on the section
         fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)