<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login and Sign-Up Form</title>
  <style>
   @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: url("https://singhanias.in/cdn/shop/collections/Satin_banarasi_deb47ed6-cbe5-4b78-bf4f-f173a4f0396e.jpg?v=1705664609"), #000;
  background-position: center;
  background-size: cover;
}

.wrapper {
  width: 420px;
  padding: 40px;
  text-align: center;
  border: 0px solid #561C24;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

form {
  display: flex;
  flex-direction: column;
}

h2 {
  font-size: 2.2rem;
  margin-bottom: 30px;
  color: #561C24;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.input-field {
  position: relative;
  border-bottom: 2px solid #561C24;
  margin: 20px 0;
}

.input-field label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: rgba(86, 28, 36, 0.8); /* Using #561C24 */
  font-size: 16px;
  pointer-events: none;
  transition: 0.25s ease;
}

.input-field input {
  width: 100%;
  height: 45px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #561C24;
  padding: 0 5px;
}

.input-field input:focus~label,
.input-field input:valid~label {
  font-size: 0.85rem;
  top: 10px;
  transform: translateY(-120%);
  color: #561C24;
}

.input-field::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background: #D4AF37;
  bottom: -2px;
  left: 0;
  transition: 0.3s ease;
}

.input-field input:focus ~ ::after,
.input-field input:valid ~ ::after {
  width: 100%;
}

.forget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 35px 0;
  color: #561C24;
}

#remember {
  accent-color: #561C24;
}

.forget label {
  display: flex;
  align-items: center;
}

.forget label p {
  margin-left: 8px;
  font-size: 0.9rem;
}

.wrapper a {
  color:#561C24;
  text-decoration: none;
  transition: 0.3s ease;
}

.wrapper a:hover {
  color: #D4AF37;
}

button {
  background: #561C24;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 14px 20px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.3s ease;
  width: 100%;
}

button:hover {
  background: transparent;
  border: 2px solid #561C24;
  color: #561C24;
}

.google-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #561c24;
  padding: 14px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  backdrop-filter: blur(5px);
}

.google-btn:hover {
  background: #561C24;
  color: azure;
}

.google-btn img {
  width: 22px;
  margin-right: 12px;
}

.register {
  text-align: center;
  margin-top: 30px;
  color: #561C24;
  font-size: 0.95rem;
}

.signup-form {
  display: none;
}

.signup-form.active {
  display: block;
}

.error-message {
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.1);
  padding: 12px;
  border: 1px solid rgba(255, 77, 77, 0.3);
  margin-top: 15px;
  font-size: 14px;
  display: none;
  backdrop-filter: blur(5px);
}

/* Responsive Design */
@media (max-width: 480px) {
  .wrapper {
    width: 100%;
    margin: 20px;
    padding: 30px 20px;
  }
}

  </style>
 </head>
 <body>
  <div class="wrapper">
   <!-- Login Form -->
   <form id="loginForm">
    <h2>Login</h2>
    <div class="input-field">
     <input type="text" id="loginEmail" required>
     <label>Enter your email</label>
    </div>
    <div class="input-field">
     <input type="password" id="loginPassword" required>
     <label>Enter your password</label>
    </div>
    <div class="forget">
     <label for="remember">
      <input type="checkbox" id="remember">
      <p>Remember me</p>
     </label>
     <a href="#">Forgot password?</a>
    </div>
    <button type="submit">Log In</button>
    <button type="button" id="googleLogin" class="google-btn">
     <img src="icons/icons8-google.svg" alt="Google Logo">Login with Google </button>
    <div class="register">
     <p>Don't have an account? <a href="#" id="registerLink">Register</a>
     </p>
    </div>
    <div class="error-message" id="loginError"></div>
   </form>
   <!-- Sign Up Form -->
   <form id="signupForm" class="signup-form">
    <h2>Sign Up</h2>
    <div class="input-field">
     <input type="email" id="signupEmail" required>
     <label>Enter your email</label>
    </div>
    <div class="input-field">
     <input type="password" id="signupPassword" required>
     <label>Create a password</label>
    </div>
    <div class="input-field">
     <input type="password" id="confirmPassword" required>
     <label>Confirm your password</label>
    </div>
    <button type="submit">Sign Up</button>
    <button type="button" id="googleSignup" class="google-btn">
     <img src="icons/icons8-google.svg" alt="Google Logo">Sign Up with Google </button>
    <div class="register">
     <p>Already have an account? <a href="#" id="loginLink">Login</a>
     </p>
    </div>
    <div class="error-message" id="signupError"></div>
   </form>
  </div>
  <!-- Firebase SDK -->
  <script type="module">
   import {
    initializeApp
   } from "https://www.gstatic.com/firebasejs/9.11.0/firebase-app.js";
   import {
    getAuth,
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
    signInWithPopup,
    GoogleAuthProvider
   } from "https://www.gstatic.com/firebasejs/9.11.0/firebase-auth.js";
   import {
    getDatabase,
    ref,
    set
   } from "https://www.gstatic.com/firebasejs/9.11.0/firebase-database.js";
   // Firebase configuration
   const firebaseConfig = {
    apiKey: "AIzaSyBa2JROkkVR6GWboFZJT2G5NMycYa9zRJ8",
    authDomain: "thugilcreations.firebaseapp.com",
    projectId: "thugilcreations",
    storageBucket: "thugilcreations.firebasestorage.app",
    messagingSenderId: "621636941555",
    appId: "1:621636941555:web:9648e3188471af8a2fe986"
   };
   // Initialize Firebase
   const app = initializeApp(firebaseConfig);
   const auth = getAuth(app);
   const db = getDatabase(app);
   // Function to collect device info
   function getDeviceInfo() {
    return {
     userAgent: navigator.userAgent,
     platform: navigator.platform,
     language: navigator.language,
     screenWidth: window.innerWidth,
     screenHeight: window.innerHeight,
    };
   }
   // Form Switching Logic
   const registerLink = document.getElementById('registerLink');
   const loginLink = document.getElementById('loginLink');
   const loginForm = document.getElementById('loginForm');
   const signupForm = document.getElementById('signupForm');
   registerLink.addEventListener('click', () => {
    loginForm.style.display = 'none';
    signupForm.style.display = 'block';
   });
   loginLink.addEventListener('click', () => {
    signupForm.style.display = 'none';
    loginForm.style.display = 'block';
   });
   // Google Authentication Button (Login)
   const googleLogin = document.getElementById('googleLogin');
   const googleSignup = document.getElementById('googleSignup');
   const provider = new GoogleAuthProvider();
   googleLogin.addEventListener('click', async () => {
    try {
     const result = await signInWithPopup(auth, provider);
     const user = result.user;
     console.log("User logged in:", user);
     // Save user UID and expiration time (5 hours)
     const expirationTime = new Date().getTime() + (5 * 60 * 60 * 1000); // 5 hours from now
     localStorage.setItem('userUID', user.uid);
     localStorage.setItem('expirationTime', expirationTime);
     // Retrieve redirect URL or default to '/dashboard'
     const redirectUrl = localStorage.getItem('redirectTo') || '/dashboard';
     // Clear the redirect URL after using it
     localStorage.removeItem('redirectTo');
     // Redirect to the stored URL or default to /dashboard
     window.location.href = redirectUrl;
    } catch (error) {
     console.error("Error during Google login:", error);
    }
   });
   // Google Authentication Button (Sign Up)
   googleSignup.addEventListener('click', async () => {
    try {
     const result = await signInWithPopup(auth, provider);
     const user = result.user;
     console.log("User signed up:", user);
     // Save user UID and expiration time (5 hours)
     const expirationTime = new Date().getTime() + (5 * 60 * 60 * 1000); // 5 hours from now
     localStorage.setItem('userUID', user.uid);
     localStorage.setItem('expirationTime', expirationTime);
     // Redirect to the stored URL or default to /dashboard
     const redirectUrl = localStorage.getItem('redirectTo') || '/dashboard';
     window.location.href = redirectUrl;
    } catch (error) {
     console.error("Error during Google sign up:", error);
    }
   });
   // Login form submission
   const loginFormElement = document.getElementById('loginForm');
   const loginError = document.getElementById('loginError');
   loginFormElement.addEventListener('submit', async (e) => {
    e.preventDefault();
    const email = document.getElementById('loginEmail').value;
    const password = document.getElementById('loginPassword').value;
    const deviceInfo = getDeviceInfo();
    try {
     const userCredential = await signInWithEmailAndPassword(auth, email, password);
     console.log('User logged in');
     // Save user UID and expiration time (5 hours)
     const expirationTime = new Date().getTime() + (5 * 60 * 60 * 1000); // 5 hours from now
     localStorage.setItem('userUID', userCredential.user.uid);
     localStorage.setItem('expirationTime', expirationTime);
     // Redirect to the stored URL or default to /dashboard
     const redirectUrl = localStorage.getItem('redirectTo') || '/dashboard';
     window.location.href = redirectUrl;
    } catch (error) {
     loginError.textContent = "Invalid email or password.";
     loginError.style.display = "block";
    }
   });
   // Sign Up form submission
   const signupFormElement = document.getElementById('signupForm');
   const signupError = document.getElementById('signupError');
   signupFormElement.addEventListener('submit', async (e) => {
    e.preventDefault();
    const email = document.getElementById('signupEmail').value;
    const password = document.getElementById('signupPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    const deviceInfo = getDeviceInfo();
    if (password !== confirmPassword) {
     signupError.textContent = "Passwords do not match.";
     signupError.style.display = "block";
     return;
    }
    try {
     const userCredential = await createUserWithEmailAndPassword(auth, email, password);
     console.log('User signed up:', userCredential.user);
     // Add user to Firebase Realtime Database
     await set(ref(db, 'users/' + userCredential.user.uid), {
      email: userCredential.user.email,
      deviceInfo: deviceInfo,
     });
     // Save user UID and expiration time (5 hours)
     const expirationTime = new Date().getTime() + (5 * 60 * 60 * 1000); // 5 hours from now
     localStorage.setItem('userUID', userCredential.user.uid);
     localStorage.setItem('expirationTime', expirationTime);
     // Redirect to the stored URL or default to /dashboard
     const redirectUrl = localStorage.getItem('redirectTo') || '/dashboard';
     window.location.href = redirectUrl;
    } catch (error) {
     signupError.textContent = "Error during sign up.";
     signupError.style.display = "block";
    }
   });
   // Before redirecting to login or signup page, save the current page URL
   window.addEventListener('beforeunload', () => {
    if (!localStorage.getItem('userUID')) {
     localStorage.setItem('redirectTo', window.location.href); // Save the current page URL
    }
   });
  </script>
  <script>
   // Disable zooming with JavaScript
   document.addEventListener('wheel', function(e) {
    if (e.ctrlKey || e.metaKey) {
     e.preventDefault();
    }
   }, {
    passive: false
   });
   // Disable pinch to zoom on touch devices
   document.addEventListener('touchstart', function(e) {
    if (e.touches.length > 1) {
     e.preventDefault();
    }
   }, {
    passive: false
   });
  </script>
 </body>
</html>