<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="Sign in to Aestia 3D — Access your account, track 3D print orders, and manage your custom manufacturing dashboard.">
  <title>Sign In — Aestia 3D</title>

  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">

  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <link rel="stylesheet" href="login.css">
    <link rel="stylesheet" href="/global-theme.css">
  <link rel="icon" type="image/png" href="/Final2.png">
</head>
<body>

  
  

  
  <div class="grain" aria-hidden="true"></div>

  
  <div class="split-layout">

    
    <div class="brand-panel" aria-hidden="true">

      
      <div class="tech-grid" aria-hidden="true"></div>
      <div class="scan-lines"  aria-hidden="true"></div>

      
      <div class="floating-objects" aria-hidden="true">
        <div class="obj obj-cube"><i class="fas fa-cube"></i></div>
        <div class="obj obj-layer"><i class="fas fa-layer-group"></i></div>
        <div class="obj obj-bolt"><i class="fas fa-bolt"></i></div>
        <div class="obj obj-gear"><i class="fas fa-gear"></i></div>
        <div class="obj obj-diamond"><i class="fas fa-gem"></i></div>
      </div>

      <div class="brand-content">
        <a href="/product-list.html" class="brand-logo">
          <span class="aes">Aes</span><span class="tia">tia</span><span class="three">3D</span>
        </a>
        <p class="brand-sub">Premium Custom Manufacturing</p>
        <div class="brand-divider"></div>

        <h1 class="brand-headline">
          Welcome<br>
          <em>Back.</em>
        </h1>

        <p class="brand-desc">
          Your manufacturing dashboard awaits. Resume your orders, track production status, and explore new custom prints.
        </p>


      </div>

      
      <div class="orb orb-1" aria-hidden="true"></div>
      <div class="orb orb-2" aria-hidden="true"></div>
    </div>

    
    <div class="form-panel" role="main">
      <div class="form-wrapper">

        
        <a href="/product-list.html" class="mobile-logo">
          <span class="aes">Aes</span><span class="tia">tia</span><span class="three">3D</span>
        </a>

        <div class="form-header">
          <div class="form-eyebrow">Secure Access</div>
          <h2 class="form-title">Sign In</h2>
          <p class="form-subtitle">Access your Aestia 3D manufacturing portal.</p>
        </div>

        
        <button id="google-signin-button" class="google-btn" aria-label="Sign in with Google">
          <svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3"><path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"/><path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"/><path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"/><path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"/></svg>
          Continue with Google
        </button>

        <div class="or-divider">
          <span></span>
          <p>or sign in with email</p>
          <span></span>
        </div>

        
        <div class="email-providers-row">
          <span><i class="fab fa-google"></i> Gmail</span>
          <span><i class="fab fa-yahoo"></i> Yahoo</span>
          <span><i class="fab fa-microsoft"></i> Outlook</span>
        </div>

        
        <form id="login-form" aria-label="Login form" novalidate>

          <div class="field">
            <label for="email">Email Address</label>
            <div class="input-wrap">
              <i class="fas fa-envelope input-icon"></i>
              <input type="email" id="email" name="email" placeholder="you@gmail.com"
                     required autocomplete="email" aria-label="Email">
            </div>
          </div>

          <div class="field">
            <label for="password">Password</label>
            <div class="input-wrap">
              <i class="fas fa-lock input-icon"></i>
              <input type="password" id="password" name="password" placeholder="Your password"
                     required autocomplete="current-password" aria-label="Password">
              <button type="button" class="toggle-password" data-target="password" aria-label="Toggle password">
                <i class="fas fa-eye"></i>
              </button>
            </div>
          </div>

          
          <div class="forgot-row">
            <a href="forgot" class="forgot-link">Forgot your password?</a>
          </div>

          <button type="submit" id="login-btn" class="submit-btn" aria-label="Sign In">
            <span class="btn-text"><i class="fas fa-arrow-right-to-bracket"></i> Sign In</span>
            <span class="btn-spinner hidden"><i class="fas fa-circle-notch fa-spin"></i></span>
          </button>
        </form>

        <p class="register-link">New to Aestia 3D? <a href="register">Create Account</a></p>

      </div>
    </div>
  </div>

  <script src="login.js"></script>
</body>
</html>
    <script>
      console.clear();
    </script>