Merge branch 'main' into main

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/services1.css

@@ -0,0 +1,93 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+.container{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 100px 50px;
+    padding: 100px 50px;
+}
+/* background cards size and rounding */
+.container .card
+{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 350px;
+    height: 300px;
+    background: #fff;
+    border-radius: 20px;
+    box-shadow: 0 35px 80px rgba(0,0,0,0.15);
+    transition: 0.5s;
+}
+.container .card:hover
+{
+    height: 350px;
+}
+.container .card .imgbx
+{
+    position: absolute;
+    top: 20px;
+    width: 300px;
+    height: 220px;
+    background: #333;
+    border-radius: 12px;
+    transition: 0.5s;
+    overflow: hidden;
+}
+.container .card:hover .imgbx
+{
+    top: -100px;
+    scale: 0.75;
+    box-shadow: 0 15px 45px rgba(0,0,0,0.15);
+}
+.container .card .imgbx img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.container .card .content
+{
+    position: absolute;
+    top: 252px;
+    width: 100%;
+    padding: 0 30px;
+    height: 35px;
+    overflow: hidden;
+    text-align: center;
+    transition: 0.5s;
+}
+.container .card:hover .content
+{
+    top: 150px;
+    height: 250px;
+}
+.container .card .content h2{
+    font-size: 1.33em;
+    font-weight: 700;
+    color: var(--clr);
+}
+.container .card .content p{
+    color: #233;
+}
+.container .card .content a{
+    position: relative;
+    top: 15px;
+    display: inline-block;
+    padding: 12px 25px;
+    background: var(--clr);
+    color: #fff;
+    font-weight: 500;
+    text-decoration: 8px;
+    border-radius: 8px;
+}

Html-files/login.html

@@ -5,7 +5,9 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="scriptlogin.js" defer type="module"></script>
+  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth-compat.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-database-compat.js"></script>
   <link rel="stylesheet" href="../Css-files/login1.css">
   <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
@@ -27,11 +29,11 @@ <h1>Login Here<br>Delicious food is waiting for You</h1>
         <h1>LOGIN</h1>
         <br>
         <div class="textfield">
-          <label for="usuario">Email</label>
+          <label for="email">Email</label>
           <input type="email" name="email" id="email" placeholder="Enter Email">
         </div>
         <div class="textfield">
-          <label for="usuario">Username</label>
+          <label for="username">Username</label>
           <input type="text" name="Username" id="username" placeholder="Username">
         </div>
         <div class="textfield">
@@ -45,7 +47,7 @@ <h1>LOGIN</h1>
         <h3>
           <center>OR</center>
         </h3>
-        <button id="google-login">Login with google</button>
+        <button id="google-login">Login with Google</button>
       </div>
     </div>
   </div>
@@ -57,44 +59,94 @@ <h3>
       easing: 'ease',
       once: false,
     });
-  </script>
-</body>
 
-<script>
-  const passwordinput = document.getElementById("password");
-  const hidelogo = document.getElementById("login-hide");
-  hidelogo.addEventListener("click", function () {
-    const passwordfield = this.querySelector("i");
-    if (passwordinput.getAttribute("type") == "text") {
-      passwordinput.setAttribute("type", "password");
-      passwordfield.classList.replace("bxs-show", "bxs-hide");
-    } else {
-      passwordinput.setAttribute("type", "text");
-      passwordfield.classList.replace("bxs-hide", "bxs-show");
-    }
-  });
+    // Firebase configuration
+    const firebaseConfig = {
+        //Add your Config File
+    };
 
-  const closeBtn = document.querySelector('.close-btn');
-  closeBtn.addEventListener('click', function () {
-    window.location.href = '../index.html';
-  });
+    // Initialize Firebase
+    firebase.initializeApp(firebaseConfig);
+    const database = firebase.database();
+    const auth = firebase.auth();
 
-  function validateLogin() {
-    const email = document.getElementById("email").value;
-    const username = document.getElementById("username").value;
-    const password = document.getElementById("password").value;
+    // Password visibility toggle
+    const passwordInput = document.getElementById("password");
+    const hideLogo = document.getElementById("login-hide");
+    hideLogo.addEventListener("click", function () {
+      const passwordField = this.querySelector("i");
+      if (passwordInput.getAttribute("type") == "text") {
+        passwordInput.setAttribute("type", "password");
+        passwordField.classList.replace("bxs-show", "bxs-hide");
+      } else {
+        passwordInput.setAttribute("type", "text");
+        passwordField.classList.replace("bxs-hide", "bxs-show");
+      }
+    });
+
+    // Close button redirect
+    const closeBtn = document.querySelector('.close-btn');
+    closeBtn.addEventListener('click', function () {
+      window.location.href = '../index.html';
+    });
 
-    if (email === "") {
-      alert("Please Enter Email");
-    } else if (username === "") {
-      alert("Please Enter Username");
-    } else if (password === "") {
-      alert("Please Enter Password");
-    } else {
-      // add login logic
-      alert("Form submitted successfully!");
+    // Login validation
+    function validateLogin() {
+      const email = document.getElementById("email").value;
+      const username = document.getElementById("username").value;
+      const password = document.getElementById("password").value;
+
+      if (email === "") {
+        alert("Please Enter Email");
+      } else if (username === "") {
+        alert("Please Enter Username");
+      } else if (password === "") {
+        alert("Please Enter Password");
+      } else {
+        auth.signInWithEmailAndPassword(email, password)
+          .then((userCredential) => {
+            const user = userCredential.user;
+            database.ref('users/' + user.uid).set({
+              username: username,
+              email: email
+            }).then(() => {
+              alert("Login successful");
+              window.location.href = '../index.html';
+            }).catch((error) => {
+              alert("Data could not be saved: " + error.message);
+            });
+          })
+          .catch((error) => {
+            alert("Login failed: " + error.message);
+          });
+      }
     }
-  }
-</script>
+     // Google Sign-In
+     document.getElementById('google-login').addEventListener('click', () => {
+      const provider = new firebase.auth.GoogleAuthProvider();
+      auth.signInWithPopup(provider)
+        .then((result) => {
+          const user = result.user;
+
+          // Save user info to Realtime Database if new user
+          if (result.additionalUserInfo.isNewUser) {
+            return database.ref('users/' + user.uid).set({
+              name: user.displayName,
+              email: user.email,
+              username: user.email.split('@')[0]
+            });
+          }
+        })
+        .then(() => {
+          alert('Logged in with Google!');
+          window.location.href = '../index.html'; // Redirect to homepage or dashboard
+        })
+        .catch((error) => {
+          console.error('Error logging in with Google:', error);
+          alert(error.message);
+        });
+    });
+  </script>
+</body>
 
-</html>
+</html>

Html-files/menu.html

@@ -51,6 +51,10 @@
                         </li>
                     </ul>
                 </div>
+                <div class="search-bar">
+                    <input class="search-input" type="text" placeholder="Search your food item.." name="search">
+                </div>
+                <button class="search-button" type="submit"><img class="searchImg" src="./assets/search.png"></button>
             </div>
         </nav>
         <!-- </header> -->