&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Receipt Processor - Auth&lt;/title&gt;
  &lt;style&gt;
    :root {
      --primary: #1DBC60;
      --primary-dark: #17A955;
      --secondary: #607D8B;
      --light-gray: #f5f5f5;
      --medium-gray: #C5C7C4;
      --dark-gray: #757575;
      --white: #ffffff;
      --text-dark: #212121;
      --text-light: #757575;
      --page-bg: #C5C7C4;
      --error: #F44336;
      --warning: #FF9800;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }

    body {
      background-color: var(--page-bg);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }

    .auth-container {
      background-color: var(--white);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 500px;
      overflow: hidden;
    }

    .auth-header {
      background-color: var(--primary);
      color: var(--white);
      padding: 24px;
      text-align: center;
    }

    .auth-header h1 {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .auth-header p {
      font-size: 0.9rem;
      opacity: 0.9;
    }

    .auth-content {
      padding: 24px;
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .form-group label {
      color: var(--text-dark);
      font-size: 0.9rem;
      font-weight: 500;
    }

    .form-control {
      padding: 12px 16px;
      border: 1px solid var(--medium-gray);
      border-radius: 6px;
      font-size: 1rem;
      transition: border-color 0.3s;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--primary);
    }

    .form-control.error {
      border-color: var(--error);
    }

    .error-message {
      color: var(--error);
      font-size: 0.8rem;
      display: none;
    }

    .btn {
      background-color: var(--primary);
      color: var(--white);
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s;
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn:hover {
      background-color: var(--primary-dark);
    }

    .btn.secondary {
      background-color: var(--medium-gray);
      color: var(--text-dark);
    }

    .btn.secondary:hover {
      background-color: var(--dark-gray);
      color: var(--white);
    }

    .auth-footer {
      text-align: center;
      margin-top: 24px;
      color: var(--text-light);
      font-size: 0.9rem;
    }

    .auth-footer a {
      color: var(--primary);
      text-decoration: none;
      font-weight: 500;
    }

    .auth-footer a:hover {
      text-decoration: underline;
    }

    .form-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
    }

    .remember-me {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .remember-me input {
      width: 16px;
      height: 16px;
    }

    .forgot-password {
      color: var(--primary);
      text-decoration: none;
      font-size: 0.9rem;
    }

    .forgot-password:hover {
      text-decoration: underline;
    }

    .spinner {
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Tabs for login/signup */
    .auth-tabs {
      display: flex;
      border-bottom: 1px solid var(--light-gray);
    }

    .auth-tab {
      flex: 1;
      text-align: center;
      padding: 16px;
      cursor: pointer;
      color: var(--text-light);
      font-weight: 500;
      transition: all 0.3s;
    }

    .auth-tab.active {
      color: var(--primary);
      border-bottom: 2px solid var(--primary);
    }

    /* Social login buttons */
    .social-login {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 24px;
    }

    .social-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid var(--medium-gray);
      background-color: var(--white);
      color: var(--text-dark);
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
    }

    .social-btn:hover {
      background-color: var(--light-gray);
    }

    .social-btn.google {
      color: #DB4437;
    }

    .social-btn.facebook {
      color: #4267B2;
    }

    .divider {
      display: flex;
      align-items: center;
      margin: 24px 0;
      color: var(--text-light);
      font-size: 0.8rem;
    }

    .divider::before, .divider::after {
      content: "";
      flex: 1;
      border-bottom: 1px solid var(--medium-gray);
    }

    .divider::before {
      margin-right: 16px;
    }

    .divider::after {
      margin-left: 16px;
    }

    @media (max-width: 480px) {
      .auth-container {
        border-radius: 0;
      }
      
      .form-actions {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
      }
      
      .forgot-password {
        margin-left: 24px;
      }
    }
  &lt;/style&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
  <div>
    <div>
      <h1>Receipt Processor</h1>
      <p>Track your expenses with ease</p>
    </div>
    
    <div>
      <div>Login</div>
      <div>Sign Up</div>
    </div>
    
    <div>
      
      &lt;form id="loginForm" class="auth-form"&gt;
        <div>
          &lt;label for="loginEmail"&gt;Email&lt;/label&gt;
          &lt;input type="email" id="loginEmail" class="form-control" placeholder="Enter your email" required&gt;
          <span>Please enter a valid email</span>
        </div>
        
        <div>
          &lt;label for="loginPassword"&gt;Password&lt;/label&gt;
          &lt;input type="password" id="loginPassword" class="form-control" placeholder="Enter your password" required&gt;
          <span>Password must be at least 6 characters</span>
        </div>
        
        <div>
          <div>
            &lt;input type="checkbox" id="rememberMe"&gt;
            &lt;label for="rememberMe"&gt;Remember me&lt;/label&gt;
          </div>
          <a href="#">Forgot password?</a>
        </div>
        
        &lt;button type="submit" class="btn" id="loginBtn"&gt;
          <i></i> Login
        &lt;/button&gt;
        
        <div>OR</div>
        
        <div>
          &lt;button type="button" class="social-btn google"&gt;
            <i></i> Continue with Google
          &lt;/button&gt;
          &lt;button type="button" class="social-btn facebook"&gt;
            <i></i> Continue with Facebook
          &lt;/button&gt;
        </div>
        
        <div>
          Don't have an account? <a href="#">Sign up</a>
        </div>
      &lt;/form&gt;
      
      
      &lt;form id="signupForm" class="auth-form" style="display: none;"&gt;
        <div>
          &lt;label for="signupName"&gt;Full Name&lt;/label&gt;
          &lt;input type="text" id="signupName" class="form-control" placeholder="Enter your full name" required&gt;
          <span>Please enter your name</span>
        </div>
        
        <div>
          &lt;label for="signupEmail"&gt;Email&lt;/label&gt;
          &lt;input type="email" id="signupEmail" class="form-control" placeholder="Enter your email" required&gt;
          <span>Please enter a valid email</span>
        </div>
        
        <div>
          &lt;label for="signupPassword"&gt;Password&lt;/label&gt;
          &lt;input type="password" id="signupPassword" class="form-control" placeholder="Create a password" required&gt;
          <span>Password must be at least 8 characters</span>
        </div>
        
        <div>
          &lt;label for="signupConfirmPassword"&gt;Confirm Password&lt;/label&gt;
          &lt;input type="password" id="signupConfirmPassword" class="form-control" placeholder="Confirm your password" required&gt;
          <span>Passwords don't match</span>
        </div>
        
        &lt;button type="submit" class="btn" id="signupBtn"&gt;
          <i></i> Sign Up
        &lt;/button&gt;
        
        <div>
          Already have an account? <a href="#">Login</a>
        </div>
      &lt;/form&gt;
    </div>
  </div>

  &lt;script&gt;
    // DOM Elements
    const loginTab = document.getElementById('loginTab');
    const signupTab = document.getElementById('signupTab');
    const loginForm = document.getElementById('loginForm');
    const signupForm = document.getElementById('signupForm');
    const showSignup = document.getElementById('showSignup');
    const showLogin = document.getElementById('showLogin');
    const loginBtn = document.getElementById('loginBtn');
    const signupBtn = document.getElementById('signupBtn');

    // Form validation functions
    function validateEmail(email) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(email);
    }

    function validatePassword(password) {
      return password.length &gt;= 6;
    }

    function validateName(name) {
      return name.trim().length &gt; 0;
    }

    function showError(element, message) {
      const errorElement = document.getElementById(element.id + 'Error');
      element.classList.add('error');
      errorElement.textContent = message;
      errorElement.style.display = 'block';
    }

    function hideError(element) {
      const errorElement = document.getElementById(element.id + 'Error');
      element.classList.remove('error');
      errorElement.style.display = 'none';
    }

    // Tab switching
    function showLoginForm() {
      loginTab.classList.add('active');
      signupTab.classList.remove('active');
      loginForm.style.display = 'flex';
      signupForm.style.display = 'none';
    }

    function showSignupForm() {
      loginTab.classList.remove('active');
      signupTab.classList.add('active');
      loginForm.style.display = 'none';
      signupForm.style.display = 'flex';
    }

    // Event Listeners
    loginTab.addEventListener('click', showLoginForm);
    signupTab.addEventListener('click', showSignupForm);
    showSignup.addEventListener('click', (e) =&gt; {
      e.preventDefault();
      showSignupForm();
    });
    showLogin.addEventListener('click', (e) =&gt; {
      e.preventDefault();
      showLoginForm();
    });

    // Login Form Validation
    loginForm.addEventListener('submit', async (e) =&gt; {
      e.preventDefault();
      
      const email = document.getElementById('loginEmail');
      const password = document.getElementById('loginPassword');
      let isValid = true;

      // Validate email
      if (!validateEmail(email.value)) {
        showError(email, 'Please enter a valid email');
        isValid = false;
      } else {
        hideError(email);
      }

      // Validate password
      if (!validatePassword(password.value)) {
        showError(password, 'Password must be at least 6 characters');
        isValid = false;
      } else {
        hideError(password);
      }

      if (isValid) {
        try {
          loginBtn.disabled = true;
          loginBtn.innerHTML = '<i></i> Logging in...';
          
          // Simulate API call
          await new Promise(resolve =&gt; setTimeout(resolve, 1500));
          
          // On successful login, redirect to dashboard
          window.location.href = 'dashboard.html';
        } catch (error) {
          showError(password, 'Invalid email or password');
          loginBtn.disabled = false;
          loginBtn.innerHTML = '<i></i> Login';
        }
      }
    });

    // Signup Form Validation
    signupForm.addEventListener('submit', async (e) =&gt; {
      e.preventDefault();
      
      const name = document.getElementById('signupName');
      const email = document.getElementById('signupEmail');
      const password = document.getElementById('signupPassword');
      const confirmPassword = document.getElementById('signupConfirmPassword');
      let isValid = true;

      // Validate name
      if (!validateName(name.value)) {
        showError(name, 'Please enter your name');
        isValid = false;
      } else {
        hideError(name);
      }

      // Validate email
      if (!validateEmail(email.value)) {
        showError(email, 'Please enter a valid email');
        isValid = false;
      } else {
        hideError(email);
      }

      // Validate password
      if (!validatePassword(password.value)) {
        showError(password, 'Password must be at least 8 characters');
        isValid = false;
      } else {
        hideError(password);
      }

      // Validate password match
      if (password.value !== confirmPassword.value) {
        showError(confirmPassword, 'Passwords don\'t match');
        isValid = false;
      } else {
        hideError(confirmPassword);
      }

      if (isValid) {
        try {
          signupBtn.disabled = true;
          signupBtn.innerHTML = '<i></i> Creating account...';
          
          // Simulate API call
          await new Promise(resolve =&gt; setTimeout(resolve, 1500));
          
          // On successful signup, redirect to dashboard
          window.location.href = 'dashboard.html';
        } catch (error) {
          showError(email, 'This email is already registered');
          signupBtn.disabled = false;
          signupBtn.innerHTML = '<i></i> Sign Up';
        }
      }
    });

    // Input validation on blur
    document.getElementById('loginEmail').addEventListener('blur', function() {
      if (!validateEmail(this.value)) {
        showError(this, 'Please enter a valid email');
      } else {
        hideError(this);
      }
    });

    document.getElementById('loginPassword').addEventListener('blur', function() {
      if (!validatePassword(this.value)) {
        showError(this, 'Password must be at least 6 characters');
      } else {
        hideError(this);
      }
    });

    document.getElementById('signupName').addEventListener('blur', function() {
      if (!validateName(this.value)) {
        showError(this, 'Please enter your name');
      } else {
        hideError(this);
      }
    });

    document.getElementById('signupEmail').addEventListener('blur', function() {
      if (!validateEmail(this.value)) {
        showError(this, 'Please enter a valid email');
      } else {
        hideError(this);
      }
    });

    document.getElementById('signupPassword').addEventListener('blur', function() {
      if (!validatePassword(this.value)) {
        showError(this, 'Password must be at least 8 characters');
      } else {
        hideError(this);
      }
    });

    document.getElementById('signupConfirmPassword').addEventListener('blur', function() {
      const password = document.getElementById('signupPassword').value;
      if (this.value !== password) {
        showError(this, 'Passwords don\'t match');
      } else {
        hideError(this);
      }
    });

    // Social login handlers
    document.querySelector('.social-btn.google').addEventListener('click', () =&gt; {
      alert('Google login would be implemented here');
    });

    document.querySelector('.social-btn.facebook').addEventListener('click', () =&gt; {
      alert('Facebook login would be implemented here');
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;