features added

khushi-joshi-05 · Aug 9, 2024 · 1410f48 · 1410f48
1 parent 925b5d6
commit 1410f48
Show file tree

Hide file tree

Showing 5 changed files with 371 additions and 4 deletions.
diff --git a/Html-files/login.html b/Html-files/login.html
@@ -16,6 +16,9 @@
 		crossorigin="anonymous" referrerpolicy="no-referrer" />
 	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
 		integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+		<script src="main.js" defer type="module"></script>
+
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
 		integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 	<link rel="stylesheet" href="../Css-files/content.css">
@@ -34,6 +37,70 @@
             background-color: #e21f1f;
             z-index: 9999;
         }
+
+		.center-links .nav-item .dropdown-menu {
+  background-color:#212123;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.center-links .nav-item .dropdown-menu {
+  background-color: #ffffff;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.dropdown-item:hover {
+  background-color: #58a9ff;
+  color: #fff;
+  transform: scale(1.1);
+}
+
+.dropdown-item {
+  padding: 4px 8px;
+  color: white;
+  font-size: 15px;
+  background-color: #137cbd;
+  transition: background-color 0.3s, transform 0.3s;
+
+} 
+
+
+.circle {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      pointer-events: none;
+      background: radial-gradient(circle, rgba(255, 0, 0, 0.466), rgba(255, 52, 52, 0.5));
+      transition: transform 0.1s, left 0.1s, top 0.1s;
+      box-shadow: 0 0 20px #faff64,
+        0 0 60px #f52323,
+        0 0 100px #ff0000;
+        animation: colors 1s infinite;
+  transform: translate(-50%, -50%);
+    }
+
+    .circle-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+    }
+
+    @media (max-width: 724px) {
+      .circle-container{
+        display: none;
+      }
+    }
+
 	</style>
 </head>
 
@@ -82,6 +149,11 @@
 					<li class="nav-item">
 						<a class="nav-link" href="../Html-files/offers.html"><i class="fa-solid fa-tag"></i> Offers</a>
 					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="RateUs.html">
+							<i class="fa-solid fa-star"></i> Rate Us
+						</a>
+					</li>
 				</ul>
 			</div>
 			<div class="order-0 ml-auto p-2">
@@ -491,6 +563,79 @@ <h4>Follow Us</h4>
 			 "allowedOrigins": []
 		 });
 	 </script>
+
+
+<div class="circle-container">
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+	<div class="circle"></div>
+  </div>
+  <script>
+	document.addEventListener("DOMContentLoaded", function () {
+	  const coords = { x: 0, y: 0 };
+	  const circles = document.querySelectorAll(".circle");
+
+	  circles.forEach(function (circle) {
+		circle.x = 0;
+		circle.y = 0;
+	  });
+
+	  window.addEventListener("mousemove", function (e) {
+		coords.x = e.pageX;
+		coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+	  });
+
+	  function animateCircles() {
+		let x = coords.x;
+		let y = coords.y;
+
+		circles.forEach(function (circle, index) {
+		  circle.style.left = `${x - 12}px`;
+		  circle.style.top = `${y - 12}px`;
+		  circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+		  const nextCircle = circles[index + 1] || circles[0];
+		  circle.x = x;
+		  circle.y = y;
+
+		  x += (nextCircle.x - x) * 0.25;
+		  y += (nextCircle.y - y) * 0.25;
+		});
+
+		requestAnimationFrame(animateCircles);
+	  }
+
+	  animateCircles();
+	});
+  </script>
+
 
 </body>
 

diff --git a/Html-files/main.js b/Html-files/main.js
@@ -0,0 +1,68 @@
+
+  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.5/firebase-app.js";
+  import { getAuth, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.12.5/firebase-auth.js";
+
+
+  // Your web app's Firebase configuration
+  const firebaseConfig = {
+    apiKey: "AIzaSyDZQ_XMe7e7AHPMsQfL-vEQGDHcPL7COyY",
+    authDomain: "foodweb-11e21.firebaseapp.com",
+    projectId: "foodweb-11e21",
+    storageBucket: "foodweb-11e21.appspot.com",
+    messagingSenderId: "172576488418",
+    appId: "1:172576488418:web:5d5d9ce22870c866a617bb"
+  };
+
+  // Initialize Firebase
+  const app = initializeApp(firebaseConfig);
+  const auth = getAuth(app);
+  auth.languageCode = 'en';
+  const provider = new GoogleAuthProvider();
+
+  const googleLogin = document.getElementById("google-login");
+googleLogin.addEventListener("click", function(){
+    signInWithPopup(auth, provider)
+    .then((result) => {
+        const credential = GoogleAuthProvider.credentialFromResult(result);
+        const user = result.user;
+        console.log(user);
+        window.location.href = "../index.html";
+    }).catch((error) => {
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        console.error(errorCode, errorMessage);
+    });
+});
+
+onAuthStateChanged(auth, (user) => {
+  const loginLink = document.querySelector('.nav-link[href="Html-files/login.html"]');
+  const signUpLink = document.querySelector('.nav-link[href="Html-files/signup.html"]');
+
+  if (user) {
+    // User is logged in
+    if (loginLink) loginLink.style.display = 'none'; // Hiding the Login link
+    if (signUpLink) signUpLink.style.display = 'none'; // Hiding the Sign-Up link
+
+    // Create and insert logout link
+    const logoutLink = document.createElement('a');
+    logoutLink.textContent = 'Logout';
+    logoutLink.href = '#';
+    logoutLink.className = 'nav-link';
+    logoutLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      signOut(auth).then(() => {
+        window.location.href = "../index.html"; 
+      });
+    });
+
+    const navList = document.querySelector('.navbar-nav');
+    if (navList && loginLink) {
+      navList.insertBefore(logoutLink, loginLink); 
+    }
+
+  } else {
+    // User is not logged in
+    if (loginLink) loginLink.style.display = './login.html'; // Show Login link
+    if (signUpLink) signUpLink.style.display = './sign-up.html'; // Show Sign-Up link
+  }
+});