login

login.css

@@ -0,0 +1,28 @@
+/* ============================================================
+   SpeakFlow AI – login.css  (extends signup.css)
+   ============================================================ */
+
+.form-label{justify-content:space-between;}
+.forgot-link{background:none;border:none;color:var(--blue-light);font-size:0.8rem;font-weight:600;cursor:pointer;padding:0;margin-left:auto;}
+.forgot-link:hover{text-decoration:underline;}
+
+/* ── Remember Me ─────────────────────────────────────────── */
+.remember-row{display:flex;align-items:center;margin-bottom:4px;}
+.check-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.9rem;color:var(--text-muted);user-select:none;}
+.check-label input{display:none;}
+.check-custom{width:18px;height:18px;border:1.5px solid var(--border);border-radius:5px;display:flex;align-items:center;justify-content:center;transition:all var(--transition);background:rgba(30,41,59,.8);flex-shrink:0;}
+.check-label input:checked + .check-custom{background:var(--blue);border-color:var(--blue);}
+.check-label input:checked + .check-custom::after{content:'✓';color:#fff;font-size:.75rem;font-weight:700;}
+
+/* ── Admin hint ──────────────────────────────────────────── */
+.admin-hint{margin-top:16px;padding:12px 16px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.25);border-radius:10px;font-size:.83rem;color:var(--text-muted);display:flex;align-items:center;gap:8px;}
+.admin-hint i{color:#A78BFA;}
+.admin-hint strong{color:#A78BFA;}
+
+/* ── Forgot Modal ────────────────────────────────────────── */
+.modal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;}
+.modal-box{background:rgba(15,23,42,.92);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:20px;padding:28px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);}
+.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
+.modal-header h3{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:9px;}
+.sf-modal-close{background:rgba(255,255,255,.07);border:none;color:var(--text-muted);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;}
+.sf-modal-close:hover{background:rgba(255,255,255,.12);}

login.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Login – SpeakFlow AI</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="signup.css" />
+  <link rel="stylesheet" href="login.css" />
+</head>
+<body>
+
+  <!-- Animated Background -->
+  <div class="auth-bg">
+    <div class="auth-orb orb-1"></div>
+    <div class="auth-orb orb-2"></div>
+    <div class="auth-orb orb-3"></div>
+    <div class="auth-particles" id="authParticles"></div>
+  </div>
+
+  <!-- Card -->
+  <div class="auth-wrapper">
+    <div class="auth-card glass-card">
+
+      <!-- Logo -->
+      <div class="auth-logo">
+        <div class="auth-logo-icon"><i class="fas fa-wave-square"></i></div>
+        <div>
+          <span class="auth-logo-text">SpeakFlow <span class="logo-ai">AI</span></span>
+          <p class="auth-logo-sub">AI-Powered Speech Analysis</p>
+        </div>
+      </div>
+
+      <h1 class="auth-title">Welcome Back</h1>
+      <p class="auth-subtitle">Sign in to your account to continue analyzing speech.</p>
+
+      <form id="loginForm" novalidate autocomplete="off">
+
+        <!-- Email -->
+        <div class="form-group" id="fg-email">
+          <label class="form-label"><i class="fas fa-envelope"></i> Email Address</label>
+          <div class="input-wrap">
+            <input type="email" id="loginEmail" class="form-input" placeholder="you@example.com" autocomplete="email" />
+          </div>
+          <span class="form-error" id="emailErr"></span>
+        </div>
+
+        <!-- Password -->
+        <div class="form-group" id="fg-pass">
+          <label class="form-label">
+            <i class="fas fa-lock"></i> Password
+            <button type="button" class="forgot-link" id="forgotBtn">Forgot Password?</button>
+          </label>
+          <div class="input-wrap">
+            <input type="password" id="loginPass" class="form-input" placeholder="Your password" autocomplete="current-password" />
+            <button type="button" class="toggle-pass" id="togglePass" tabindex="-1">
+              <i class="fas fa-eye"></i>
+            </button>
+          </div>
+          <span class="form-error" id="passErr"></span>
+        </div>
+
+        <!-- Remember Me -->
+        <div class="remember-row">
+          <label class="check-label">
+            <input type="checkbox" id="rememberMe" />
+            <span class="check-custom"></span>
+            Remember me
+          </label>
+        </div>
+
+        <p class="form-error text-center" id="globalErr"></p>
+
+        <button type="submit" class="btn-auth" id="loginBtn">
+          <span id="loginBtnText"><i class="fas fa-sign-in-alt"></i> Login</span>
+          <span id="loginBtnLoader" style="display:none;"><i class="fas fa-spinner fa-spin"></i> Signing in...</span>
+        </button>
+      </form>
+
+      <!-- Admin hint -->
+      <div class="admin-hint">
+        <i class="fas fa-shield-alt"></i>
+        Admin? Use <strong>admin@speakflow.ai</strong> to access the dashboard.
+      </div>
+
+      <div class="auth-divider"><span>New to SpeakFlow AI?</span></div>
+      <a href="signup.html" class="btn-auth-outline">
+        <i class="fas fa-user-plus"></i> Create New Account
+      </a>
+
+    </div>
+  </div>
+
+  <!-- Forgot Password Modal -->
+  <div id="forgotModal" class="modal-overlay" style="display:none;">
+    <div class="modal-box glass-card">
+      <div class="modal-header">
+        <h3><i class="fas fa-key"></i> Reset Password</h3>
+        <button id="forgotClose" class="sf-modal-close"><i class="fas fa-times"></i></button>
+      </div>
+      <p style="color:var(--text-muted);font-size:.9rem;margin-bottom:16px;">Enter your email and we'll simulate a password reset (demo only).</p>
+      <input type="email" id="forgotEmail" class="form-input" placeholder="your@email.com" />
+      <button class="btn-auth" style="margin-top:16px;" id="forgotSubmit">
+        <i class="fas fa-paper-plane"></i> Send Reset Link
+      </button>
+      <p id="forgotMsg" style="margin-top:10px;font-size:.85rem;display:none;"></p>
+    </div>
+  </div>
+
+  <script src="login.js"></script>
+</body>
+</html>

login.js

@@ -0,0 +1,170 @@
+/* ============================================================
+   SpeakFlow AI – login.js
+   ============================================================ */
+'use strict';
+
+// Admin credentials
+const ADMIN_EMAIL = 'admin@speakflow.ai';
+const ADMIN_PASS  = 'admin123';
+
+// Redirect if already logged in
+(function(){
+  const s = JSON.parse(localStorage.getItem('sf_session')||'null');
+  if(s && s.loggedIn){
+    if(s.isAdmin) window.location.href='admin.html';
+    else window.location.href='index.html';
+  }
+})();
+
+/* ── Particles ─────────────────────────────────────────────── */
+(function(){
+  const c=document.getElementById('authParticles');
+  for(let i=0;i<20;i++){
+    const p=document.createElement('div');p.className='particle';
+    const sz=Math.random()*5+2;
+    Object.assign(p.style,{width:sz+'px',height:sz+'px',left:Math.random()*100+'%',bottom:'-10px',animationDuration:(Math.random()*20+15)+'s',animationDelay:(Math.random()*10)+'s',opacity:Math.random()*.4+.1});
+    c.appendChild(p);
+  }
+})();
+
+/* ── Remember Me pre-fill ──────────────────────────────────── */
+const remembered = localStorage.getItem('sf_remember');
+if(remembered){
+  document.getElementById('loginEmail').value = remembered;
+  document.getElementById('rememberMe').checked = true;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  const togglePass = document.getElementById('togglePass');
+  const loginForm = document.getElementById('loginForm');
+  const forgotBtn = document.getElementById('forgotBtn');
+  const forgotClose = document.getElementById('forgotClose');
+  const forgotModal = document.getElementById('forgotModal');
+  const forgotSubmit = document.getElementById('forgotSubmit');
+
+  // Show/Hide Password
+  if (togglePass) {
+    togglePass.addEventListener('click', () => {
+      const inp = document.getElementById('loginPass');
+      const icon = document.querySelector('#togglePass i');
+      const show = inp.type === 'password';
+      inp.type = show ? 'text' : 'password';
+      icon.className = show ? 'fas fa-eye-slash' : 'fas fa-eye';
+    });
+  }
+
+  // Login Form
+  if (loginForm) {
+    loginForm.addEventListener('submit', function (e) {
+      e.preventDefault();
+
+      const email = document.getElementById('loginEmail').value.trim().toLowerCase();
+      const pass = document.getElementById('loginPass').value;
+      const remember = document.getElementById('rememberMe').checked;
+      const globalErr = document.getElementById('globalErr');
+      const btnText = document.getElementById('loginBtnText');
+      const btnLoader = document.getElementById('loginBtnLoader');
+
+      if (globalErr) globalErr.textContent = '';
+
+      let valid = true;
+
+      if (!email) {
+        document.getElementById('emailErr').textContent = 'Email is required.';
+        valid = false;
+      } else {
+        document.getElementById('emailErr').textContent = '';
+      }
+
+      if (!pass) {
+        document.getElementById('passErr').textContent = 'Password is required.';
+        valid = false;
+      } else {
+        document.getElementById('passErr').textContent = '';
+      }
+
+      if (!valid) return;
+
+      if (btnText) btnText.style.display = 'none';
+      if (btnLoader) btnLoader.style.display = 'flex';
+
+      setTimeout(() => {
+
+        // Admin check
+        if (email === ADMIN_EMAIL && pass === ADMIN_PASS) {
+          if (remember) localStorage.setItem('sf_remember', email);
+          else localStorage.removeItem('sf_remember');
+
+          localStorage.setItem('sf_session', JSON.stringify({
+            loggedIn: true,
+            name: 'Admin',
+            email,
+            isAdmin: true
+          }));
+
+          window.location.href = 'admin.html';
+          return;
+        }
+
+        // User check
+        const users = JSON.parse(localStorage.getItem('sf_users') || '[]');
+        const user = users.find(u => u.email === email && u.password === pass);
+
+        if (btnText) btnText.style.display = 'flex';
+        if (btnLoader) btnLoader.style.display = 'none';
+
+        if (!user) {
+          if (globalErr) globalErr.textContent = '❌ Incorrect email or password.';
+          return;
+        }
+
+        if (remember) localStorage.setItem('sf_remember', email);
+        else localStorage.removeItem('sf_remember');
+
+        localStorage.setItem('sf_session', JSON.stringify({
+          loggedIn: true,
+          name: user.name,
+          email: user.email,
+          id: user.id,
+          isAdmin: false
+        }));
+
+        window.location.href = 'index.html';
+
+      }, 800);
+    });
+  }
+
+  // Forgot modal
+  if (forgotBtn && forgotModal) {
+    forgotBtn.addEventListener('click', () => {
+      forgotModal.style.display = 'flex';
+    });
+
+    forgotClose?.addEventListener('click', () => {
+      forgotModal.style.display = 'none';
+    });
+
+    forgotModal.addEventListener('click', function (e) {
+      if (e.target === this) this.style.display = 'none';
+    });
+
+    forgotSubmit?.addEventListener('click', () => {
+      const email = document.getElementById('forgotEmail').value.trim().toLowerCase();
+      const msg = document.getElementById('forgotMsg');
+
+      if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        msg.textContent = '❌ Enter a valid email.';
+        msg.style.color = 'var(--red)';
+        msg.style.display = 'block';
+        return;
+      }
+
+      msg.textContent = '✅ (Demo) Reset link sent to ' + email;
+      msg.style.color = 'var(--green)';
+      msg.style.display = 'block';
+    });
+  }
+
+});