diff --git a/Html-files/login.html b/Html-files/login.html index 1862691d..12b2be33 100644 --- a/Html-files/login.html +++ b/Html-files/login.html @@ -16,6 +16,9 @@ crossorigin="anonymous" referrerpolicy="no-referrer" /> + + + @@ -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; + } + } + @@ -82,6 +149,11 @@ +
@@ -491,6 +563,79 @@

Follow Us

"allowedOrigins": [] }); + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/Html-files/main.js b/Html-files/main.js new file mode 100644 index 00000000..29f71f16 --- /dev/null +++ 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 + } +}); \ No newline at end of file diff --git a/Html-files/signup.html b/Html-files/signup.html index 6d7d2736..445937b6 100644 --- a/Html-files/signup.html +++ b/Html-files/signup.html @@ -8,6 +8,7 @@ Sign up + @@ -34,10 +35,145 @@ 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; + } + } + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ @@ -32,6 +34,8 @@ + +