Merge remote-tracking branch 'upstream/main' into feature/add-reserva…

…tion-nav

Css-files/ContactUpdate.css

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap");
 
 *,
 *:after,
@@ -564,9 +565,10 @@ textarea {
   width: max-content;
   padding: 3px;
   box-sizing: border-box;
-  border-radius: 4px;
+  /* border-radius: 4px; */
   outline: none;
   border: #212123 1px;
+  font-family: "Nunito", sans-serif;
 }
 
 #butt {
@@ -576,6 +578,7 @@ textarea {
   border: 1px solid white;
   border-radius: 4px;
   cursor: pointer;
+  font-family: "Nunito", sans-serif;
 }
 
 #butt:hover {
@@ -771,4 +774,5 @@ textarea {
   .foot-panel2 ul {
     margin-top: 20px;
   }
+}
 }

Css-files/cart.css

@@ -152,4 +152,50 @@ textarea {
         align-items:flex-start;
         gap: 5px;
     }
-}
+}
+.congomessagebox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 10vh;
+    margin: 0;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    background-color: #f0f8ff;
+    color: rgb(22, 22, 18);
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    /* background-color: rgba(0, 0, 0, 0.4); */
+    background-image: url('../Images/congo-box-background.jpg');
+    /* https://i.ytimg.com/vi/6N_nf1dx5aY/maxresdefault.jpg */
+background-repeat: no-repeat;
+background-size: 100% 100%;}
+/* }Confetti Background GIF by Justin - Find & Share on GIPHY.gif */
+.modal-content {
+    background-color: #fefefe;
+    /* background-color: rgba(255, 255, 255, 0.8); */
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 50%;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    opacity: 0.7;
+}
+/* h1 {
+    color: #4CAF50;
+} */
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}

Css-files/content.css

@@ -145,6 +145,29 @@ body {
   padding-bottom: 10px;
 }
 
+.search-bar{
+width:150px;
+margin:12px;
+}
+.search-input{
+  background-color:transparent;
+  margin-top:5px;
+  color:white;
+  border-style:none;
+}
+.search-input:active{
+  border-style:none;
+  outline:none;
+}
+.search-button{
+  outline:none;
+  background-color:transparent;
+  border-style: none;
+}
+.searchImg{
+  width:23px;
+  height:23px;
+}
 /* .mainhead p {
   font-size: 1.2rem;
   color: brown;

Css-files/style.css

@@ -3,8 +3,40 @@
     padding: 0px;
 }
 
+
+:root {
+    --primary-bg-color: #33333e; 
+    --primary-text-color: #333335;
+    --secondary-bg-color: #f2f2f2; 
+    --accent-color: #9e5c48; 
+    --navbar-bg-color: #f2f2f2; 
+    --navbar-hover-color: #e5e5e5;
+    --card-bg-color: #ffffff; 
+    --card-hover-color: #f5f5f5;
+    --footer-bg-color: #f2f2f2; 
+    --footer-hover-color: #e5e5e5;
+}
+
+
+
+.dark-theme{
+
+    --primary-bg-color: #212123; 
+    --primary-text-color: #ffffff;
+    --secondary-bg-color: #333335; 
+    --accent-color: #9e5c48; 
+    --navbar-bg-color: #333335; 
+    --navbar-hover-color: #474749;
+    --card-bg-color: #2c2c2e; 
+    --card-hover-color: #373739;
+    --footer-bg-color: #28282a; 
+    --footer-hover-color: #333335;
+
+}
+
+
 body {
-    background-color: black;
+    background-color: var(--primary-bg-color);
 }
 
 .navbar {

Html-files/ContactUpdate.html

@@ -222,14 +222,18 @@ <h3>Contact Us</h3>
         <!-- <div class="d-flex m-2">
               <input class="form-control" placeholder="Enter Name Here" type="text">
             </div> -->
-        <div class="d-flex m-2">
+        <!-- <div class="d-flex m-2">
           <input class="form-control" placeholder="Email Address Here" type="email">
         </div>
         <div class="d-flex m-2">
           <input class="form-control" placeholder="Enter Message Here" type="text">
         </div>
         <br>
-        <button class="main-btn m-2" type="submit">Submit</button>
+        <button class="main-btn m-2" type="submit">Submit</button> -->
+
+        <input type="email" id="email" name="email" placeholder="Your Email" required>
+        <textarea id="message" name="message" placeholder="Your Message" required></textarea>
+        <button id="butt" type="submit">Send Message</button>
       </form>
     </div>
 

Html-files/cart.html

@@ -83,10 +83,26 @@ <h1>C A R T</h1>
             <label for="couponCodes" id="haveCoupon">Have a Coupon?</label>
             <div class="enterCouponCode">
                 <input type="text" name="inputCode" id="inputCode" placeholder="Enter Coupon Code">
-                <button id="applyCouponButton">Apply</button>
+                <button id="applyCouponButton" onclick="applyFirstTimeDiscount()">Apply</button>
             </div>
 
-            <button type="submit" onclick="applyFirstTimeDiscount()" class="butt">Order Now</button>
+            <p class="congomessagebox">
+                <button type="submit" class="butt"  id="orderNowButton" >Order Now</button>
+                <!-- id="orderNowButton" class="butt"-->
+                <div id="myModal" class="modal">
+                    <div class="modal-content">
+                        <span class="close">&times;</span>
+
+                        <!-- <h1>Congratulations!</h1> -->
+                        <center><img src="../Images/party-popper.jpg" width="70" height="100"><img src="../Images/congratulation-text.jpg" width="290" height="120"> <img src="../Images/party-popper.jpg" width="70" height="100"></center>
+
+                        <center><p>Thankyou for choosing our foodie!!</p></center>
+                        <center><img src="../Images/order-placedsign.jpg" width="120" height="80"></center>
+                        <center><p>You have made your first order.</p></center>
+                        <center> <b> Follow us on:</b></center>
+                        <center><img src="../Images/social-media-symbols.png" height="30"></center>      </div>
+                </div>
+                </p>
 
         </div>
 

Html-files/cart.js

@@ -113,13 +113,16 @@ function createCartItemElement(item) {
 
 function handleEmptyCart(total) {
     const emptyCartContainer = document.querySelector('.empty-cart');
-    if (total != 0.0) {
+    if (total!=0) {
         emptyCartContainer.innerHTML = ``;
+        return(false);// Cart is not empty
     } else {
         emptyCartContainer.innerHTML = `
             <h4>Empty Menu!</h4>
             <p>Looks like you haven't made your choice yet... Check what we have got for you and get it swished.</p>
             <a href="./menu.html"><button class="butt">Explore Menu</button></a>`;
+        alert("To place Order,Kindly add items to the cart");
+        return(true); // Cart is empty
     }
 }
 
@@ -144,7 +147,7 @@ const applyFirstTimeDiscount = () => {
     document.querySelector(".coupen-inner").innerHTML = `Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`;
 }
 
-window.onload = applyFirstTimeDiscount;
+// window.onload = applyFirstTimeDiscount;
 
 // Input for apply coupon code
 document.getElementById('applyCouponButton').addEventListener('click', function () {
@@ -154,3 +157,31 @@ document.getElementById('applyCouponButton').addEventListener('click', function
         return;
     }
 });
+
+const modal = document.getElementById("myModal");
+const closeButton = document.querySelector(".close");
+const orderNowButton = document.getElementById("orderNowButton");
+
+orderNowButton.addEventListener("click", () => {
+    const total = updateTotal(); // Calculate the total
+    const isEmptyCart =  handleEmptyCart(total);
+
+    if (isEmptyCart) {
+
+        return; // Exit early if the cart is empty
+    }
+
+    // Only show modal if cart is not empty
+    else {modal.style.display = "block";}
+});
+
+closeButton.addEventListener("click", () => {
+    modal.style.display = "none";
+});
+
+window.onclick = (event) => {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+};
+