sign up

signup.css

@@ -0,0 +1,80 @@
+/* ============================================================
+   SpeakFlow AI – signup.css  (shared base with login.css)
+   ============================================================ */
+:root {
+  --blue:#2563EB;--blue-light:#3B82F6;--blue-dark:#1D4ED8;
+  --teal:#14B8A6;--purple:#7C3AED;--green:#10B981;--red:#EF4444;
+  --bg:#0F172A;--surface:rgba(30,41,59,0.85);--surface-2:#1E293B;
+  --border:rgba(148,163,184,0.2);
+  --text:#F1F5F9;--text-muted:#94A3B8;--text-light:#64748B;
+  --radius:16px;--radius-lg:24px;
+  --shadow-lg:0 24px 64px rgba(0,0,0,0.5);
+  --font-display:'Space Grotesk',sans-serif;
+  --font-body:'Inter',sans-serif;
+  --transition:.25s ease;
+}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+html{scroll-behavior:smooth;}
+body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden;}
+
+/* ── Animated Background ─────────────────────────────────── */
+.auth-bg{position:fixed;inset:0;z-index:0;overflow:hidden;}
+.auth-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:orbFloat 8s ease-in-out infinite;}
+.orb-1{width:600px;height:600px;background:radial-gradient(circle,#2563EB,transparent);top:-200px;left:-200px;animation-delay:0s;}
+.orb-2{width:500px;height:500px;background:radial-gradient(circle,#7C3AED,transparent);bottom:-150px;right:-150px;animation-delay:3s;}
+.orb-3{width:400px;height:400px;background:radial-gradient(circle,#14B8A6,transparent);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:6s;}
+@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.05);}}
+.auth-particles{position:absolute;inset:0;}
+
+/* ── Auth Wrapper ────────────────────────────────────────── */
+.auth-wrapper{position:relative;z-index:10;width:100%;max-width:500px;padding:20px;}
+.auth-card{background:rgba(15,23,42,0.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-lg);}
+
+/* ── Logo ────────────────────────────────────────────────── */
+.auth-logo{display:flex;align-items:center;gap:14px;margin-bottom:28px;}
+.auth-logo-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--blue),var(--teal));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;flex-shrink:0;}
+.auth-logo-text{font-family:var(--font-display);font-size:1.3rem;font-weight:700;display:block;}
+.logo-ai{background:linear-gradient(135deg,var(--blue-light),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
+.auth-logo-sub{font-size:0.78rem;color:var(--text-muted);margin-top:2px;}
+.auth-title{font-family:var(--font-display);font-size:1.7rem;font-weight:700;margin-bottom:6px;}
+.auth-subtitle{color:var(--text-muted);font-size:0.9rem;margin-bottom:28px;line-height:1.5;}
+
+/* ── Form ────────────────────────────────────────────────── */
+.form-group{margin-bottom:18px;}
+.form-label{display:flex;align-items:center;gap:7px;font-size:0.85rem;font-weight:600;color:var(--text-muted);margin-bottom:8px;}
+.input-wrap{position:relative;}
+.form-input{width:100%;padding:13px 16px;background:rgba(30,41,59,0.8);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:0.95rem;font-family:var(--font-body);outline:none;transition:border var(--transition),box-shadow var(--transition);}
+.form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,0.15);}
+.form-input.input-error{border-color:var(--red);}
+.form-input.input-ok{border-color:var(--green);}
+.toggle-pass{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:4px;}
+.toggle-pass:hover{color:var(--blue);}
+.form-error{display:block;font-size:0.8rem;color:var(--red);margin-top:5px;min-height:16px;}
+.form-success{display:block;font-size:0.85rem;color:var(--green);margin-top:5px;}
+.text-center{text-align:center;}
+.form-group.has-error .form-input{border-color:var(--red);}
+.form-group.has-ok .form-input{border-color:var(--green);}
+
+/* ── Strength Meter ──────────────────────────────────────── */
+.strength-meter{margin-top:8px;display:flex;align-items:center;gap:10px;}
+.strength-bar{flex:1;height:5px;background:rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;}
+.strength-fill{height:100%;width:0%;border-radius:10px;transition:width .4s,background .4s;}
+.strength-label{font-size:0.78rem;font-weight:600;color:var(--text-muted);white-space:nowrap;}
+
+/* ── Buttons ─────────────────────────────────────────────── */
+.btn-auth{width:100%;padding:14px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:20px;transition:all var(--transition);box-shadow:0 4px 20px rgba(37,99,235,0.35);}
+.btn-auth:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,99,235,0.45);}
+.btn-auth:active{transform:translateY(0);}
+.btn-auth-outline{width:100%;padding:13px;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:12px;font-size:0.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;transition:all var(--transition);text-decoration:none;}
+.btn-auth-outline:hover{border-color:var(--blue);color:var(--blue);background:rgba(37,99,235,0.07);}
+
+/* ── Divider ─────────────────────────────────────────────── */
+.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 0;color:var(--text-light);font-size:0.82rem;}
+.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
+
+/* ── Particles ───────────────────────────────────────────── */
+.particle{position:absolute;background:rgba(99,179,237,.5);border-radius:50%;animation:floatUp linear infinite;pointer-events:none;}
+@keyframes floatUp{0%{transform:translateY(0) rotate(0deg);opacity:.6;}100%{transform:translateY(-100vh) rotate(360deg);opacity:0;}}
+
+/* ── Responsive ──────────────────────────────────────────── */
+@media(max-width:520px){.auth-card{padding:28px 20px;}.auth-wrapper{padding:12px;}}

signup.html

@@ -0,0 +1,107 @@
+<!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>Sign Up – 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" />
+</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">Create Account</h1>
+      <p class="auth-subtitle">Join SpeakFlow AI and start analyzing speech patterns today.</p>
+
+      <form id="signupForm" novalidate autocomplete="off">
+
+        <!-- Full Name -->
+        <div class="form-group" id="fg-name">
+          <label class="form-label"><i class="fas fa-user"></i> Full Name</label>
+          <div class="input-wrap">
+            <input type="text" id="signupName" class="form-input" placeholder="Your full name" autocomplete="name" />
+          </div>
+          <span class="form-error" id="nameErr"></span>
+        </div>
+
+        <!-- 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="signupEmail" 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</label>
+          <div class="input-wrap">
+            <input type="password" id="signupPass" class="form-input" placeholder="Create a strong password" autocomplete="new-password" />
+            <button type="button" class="toggle-pass" id="togglePass1" tabindex="-1">
+              <i class="fas fa-eye"></i>
+            </button>
+          </div>
+          <!-- Strength Meter -->
+          <div class="strength-meter" id="strengthMeter">
+            <div class="strength-bar">
+              <div class="strength-fill" id="strengthFill"></div>
+            </div>
+            <span class="strength-label" id="strengthLabel">Enter password</span>
+          </div>
+          <span class="form-error" id="passErr"></span>
+        </div>
+
+        <!-- Confirm Password -->
+        <div class="form-group" id="fg-confirm">
+          <label class="form-label"><i class="fas fa-shield-alt"></i> Confirm Password</label>
+          <div class="input-wrap">
+            <input type="password" id="signupConfirm" class="form-input" placeholder="Re-enter your password" autocomplete="new-password" />
+            <button type="button" class="toggle-pass" id="togglePass2" tabindex="-1">
+              <i class="fas fa-eye"></i>
+            </button>
+          </div>
+          <span class="form-error" id="confirmErr"></span>
+        </div>
+
+        <p class="form-error text-center" id="globalErr"></p>
+        <p class="form-success text-center" id="globalSuccess" style="display:none;"></p>
+
+        <button type="submit" class="btn-auth" id="signupBtn">
+          <span id="signupBtnText"><i class="fas fa-user-plus"></i> Create Account</span>
+          <span id="signupBtnLoader" style="display:none;"><i class="fas fa-spinner fa-spin"></i> Creating...</span>
+        </button>
+      </form>
+
+      <div class="auth-divider"><span>Already have an account?</span></div>
+      <a href="login.html" class="btn-auth-outline">
+        <i class="fas fa-sign-in-alt"></i> Go to Login
+      </a>
+
+    </div>
+  </div>
+
+  <script src="signup.js"></script>
+</body>
+</html>

signup.js

@@ -0,0 +1,167 @@
+/* ============================================================
+   SpeakFlow AI – signup.js
+   ============================================================ */
+'use strict';
+
+// Redirect if already logged in
+(function(){
+  const s = JSON.parse(localStorage.getItem('sf_session')||'null');
+  if(s && s.loggedIn) 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);
+  }
+})();
+
+/* ── DOM refs ──────────────────────────────────────────────── */
+const form       = document.getElementById('signupForm');
+const nameInp    = document.getElementById('signupName');
+const emailInp   = document.getElementById('signupEmail');
+const passInp    = document.getElementById('signupPass');
+const confirmInp = document.getElementById('signupConfirm');
+const nameErr    = document.getElementById('nameErr');
+const emailErr   = document.getElementById('emailErr');
+const passErr    = document.getElementById('passErr');
+const confirmErr = document.getElementById('confirmErr');
+const globalErr  = document.getElementById('globalErr');
+const globalOk   = document.getElementById('globalSuccess');
+const btnText    = document.getElementById('signupBtnText');
+const btnLoader  = document.getElementById('signupBtnLoader');
+const strengthFill  = document.getElementById('strengthFill');
+const strengthLabel = document.getElementById('strengthLabel');
+
+/* ── Show/Hide Password ────────────────────────────────────── */
+function toggleVis(inputEl, btn){
+  btn.addEventListener('click',()=>{
+    const show = inputEl.type==='password';
+    inputEl.type = show?'text':'password';
+    btn.querySelector('i').className = show?'fas fa-eye-slash':'fas fa-eye';
+  });
+}
+toggleVis(passInp, document.getElementById('togglePass1'));
+toggleVis(confirmInp, document.getElementById('togglePass2'));
+
+/* ── Password Strength ─────────────────────────────────────── */
+passInp.addEventListener('input',()=>{
+  const v = passInp.value;
+  let score = 0;
+  if(v.length>=8) score++;
+  if(/[A-Z]/.test(v)) score++;
+  if(/[0-9]/.test(v)) score++;
+  if(/[^A-Za-z0-9]/.test(v)) score++;
+  const levels = [
+    {pct:0,   color:'transparent', label:'Enter password'},
+    {pct:25,  color:'#EF4444',     label:'Weak'},
+    {pct:50,  color:'#F59E0B',     label:'Fair'},
+    {pct:75,  color:'#3B82F6',     label:'Good'},
+    {pct:100, color:'#10B981',     label:'Strong'},
+  ];
+  const l = v.length===0 ? levels[0] : levels[Math.max(1,score)];
+  strengthFill.style.width  = l.pct+'%';
+  strengthFill.style.background = l.color;
+  strengthLabel.textContent = l.label;
+  strengthLabel.style.color = l.color;
+});
+
+/* ── Validation helpers ────────────────────────────────────── */
+function setErr(el,fgId,msg){
+  el.textContent=msg;
+  const fg=document.getElementById(fgId);
+  fg.classList.add('has-error');fg.classList.remove('has-ok');
+}
+function setOk(el,fgId){
+  el.textContent='';
+  const fg=document.getElementById(fgId);
+  fg.classList.remove('has-error');fg.classList.add('has-ok');
+}
+function clearState(el,fgId){
+  el.textContent='';
+  const fg=document.getElementById(fgId);
+  fg.classList.remove('has-error','has-ok');
+}
+
+function validateEmail(e){return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);}
+
+/* ── Submit ────────────────────────────────────────────────── */
+form.addEventListener('submit',function(e){
+  e.preventDefault();
+  globalErr.textContent=''; globalOk.style.display='none';
+  let valid=true;
+
+  const name    = nameInp.value.trim();
+  const email   = emailInp.value.trim().toLowerCase();
+  const pass    = passInp.value;
+  const confirm = confirmInp.value;
+
+  // Name
+  if(!name){setErr(nameErr,'fg-name','Full name is required.');valid=false;}
+  else if(name.length<2){setErr(nameErr,'fg-name','Name must be at least 2 characters.');valid=false;}
+  else setOk(nameErr,'fg-name');
+
+  // Email
+  if(!email){setErr(emailErr,'fg-email','Email is required.');valid=false;}
+  else if(!validateEmail(email)){setErr(emailErr,'fg-email','Enter a valid email address.');valid=false;}
+  else setOk(emailErr,'fg-email');
+
+  // Password
+  if(!pass){setErr(passErr,'fg-pass','Password is required.');valid=false;}
+  else if(pass.length<6){setErr(passErr,'fg-pass','Password must be at least 6 characters.');valid=false;}
+  else setOk(passErr,'fg-pass');
+
+  // Confirm
+  if(!confirm){setErr(confirmErr,'fg-confirm','Please confirm your password.');valid=false;}
+  else if(confirm!==pass){setErr(confirmErr,'fg-confirm','Passwords do not match.');valid=false;}
+  else setOk(confirmErr,'fg-confirm');
+
+  if(!valid) return;
+
+  // Prevent admin email
+  if(email==='admin@speakflow.ai'){globalErr.textContent='❌ This email is reserved.';return;}
+
+  // Check duplicate
+  const users = JSON.parse(localStorage.getItem('sf_users')||'[]');
+  if(users.find(u=>u.email===email)){globalErr.textContent='❌ An account with this email already exists.';return;}
+
+  // Show loader
+  btnText.style.display='none'; btnLoader.style.display='flex';
+
+  setTimeout(()=>{
+    const newUser = {
+      id: 'usr_'+Date.now(),
+      name, email, password:pass,
+      createdAt: new Date().toISOString()
+    };
+    users.push(newUser);
+    localStorage.setItem('sf_users',JSON.stringify(users));
+
+    // Auto-login after signup
+    const session = {loggedIn:true, name, email, id:newUser.id};
+    localStorage.setItem('sf_session',JSON.stringify(session));
+
+    globalOk.textContent='✅ Account created! Redirecting...';
+    globalOk.style.display='block';
+    btnText.style.display='flex'; btnLoader.style.display='none';
+
+    setTimeout(()=>{ window.location.href='index.html'; },1000);
+  },900);
+});
+
+/* ── Live validation on blur ───────────────────────────────── */
+nameInp.addEventListener('blur',()=>{ if(!nameInp.value.trim()) setErr(nameErr,'fg-name','Full name is required.'); });
+emailInp.addEventListener('blur',()=>{
+  const v=emailInp.value.trim();
+  if(!v) setErr(emailErr,'fg-email','Email is required.');
+  else if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) setErr(emailErr,'fg-email','Enter a valid email address.');
+});
+passInp.addEventListener('blur',()=>{ if(!passInp.value) setErr(passErr,'fg-pass','Password is required.'); });
+confirmInp.addEventListener('blur',()=>{
+  if(confirmInp.value && confirmInp.value!==passInp.value) setErr(confirmErr,'fg-confirm','Passwords do not match.');
+  else if(!confirmInp.value) setErr(confirmErr,'fg-confirm','Please confirm your password.');
+});