<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zaida G | Sign In</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root{--bg:#0e0c0d;--card:#161214;--card2:#1c181a;--card3:#221e20;--border:rgba(255,255,255,0.06);--borderh:rgba(219,133,160,0.3);--rose:#db85a0;--rosed:#b86a83;--roseg:rgba(219,133,160,0.12);--blush:#f0b8ca;--text:#f0e8ec;--muted:#9a8490;--muted2:#5c4f56;--green:#6dbf8a;--redc:#c46a6a}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;overflow:hidden}
/* BACKGROUND GLOW */
.bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0}
.glow1{position:absolute;top:-20%;left:-10%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(219,133,160,0.06) 0%,transparent 65%)}
.glow2{position:absolute;bottom:-20%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(219,133,160,0.04) 0%,transparent 65%)}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%)}
/* MAIN WRAP */
.wrap{position:relative;z-index:1;width:100%;max-width:420px;padding:24px}
/* LOGO */
.logo-wrap{text-align:center;margin-bottom:40px;animation:fadeDown .6s ease both}
.logo{font-family:'Bebas Neue',sans-serif;font-size:42px;letter-spacing:.08em;color:var(--text)}
.logo span{color:var(--rose)}
.logo-sub{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted2);margin-top:4px}
/* ROLE SELECTOR */
.role-select{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px;animation:fadeUp .5s ease .1s both}
.role-btn{padding:14px 16px;border-radius:10px;border:1px solid var(--border);background:var(--card);cursor:pointer;transition:all .2s;text-align:center;font-family:'DM Sans',sans-serif}
.role-btn:hover{border-color:var(--borderh);background:var(--card2)}
.role-btn.active{border-color:var(--rose);background:var(--roseg)}
.role-icon{font-size:24px;margin-bottom:6px}
.role-title{font-size:13px;font-weight:600;color:var(--text)}
.role-desc{font-size:11px;color:var(--muted);margin-top:2px}
/* CARD */
.login-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:36px;animation:fadeUp .5s ease .15s both}
.card-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:.04em;color:var(--text);margin-bottom:6px}
.card-sub{font-size:13px;color:var(--muted);margin-bottom:28px;line-height:1.5}
/* TABS */
.tabs{display:flex;background:var(--card2);border-radius:8px;padding:4px;margin-bottom:24px}
.tab{flex:1;padding:9px;border:none;border-radius:6px;background:transparent;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s}
.tab.active{background:var(--rose);color:#1a0c11;font-weight:600}
/* FORM */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);margin-bottom:7px}
.form-input{width:100%;padding:12px 16px;background:var(--card2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color .2s}
.form-input::placeholder{color:var(--muted2)}
.form-input:focus{border-color:var(--rosed)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.forgot{display:block;text-align:right;color:var(--rose);font-size:12px;text-decoration:none;margin-bottom:20px;cursor:pointer}
.forgot:hover{color:var(--blush)}
/* SUBMIT */
.submit{width:100%;background:var(--rose);border:none;border-radius:8px;padding:14px;color:#1a0c11;font-size:14px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;letter-spacing:.04em;transition:all .2s;margin-top:4px;position:relative;overflow:hidden}
.submit:hover{background:var(--blush)}
.submit:active{transform:scale(.99)}
.submit.loading{pointer-events:none;opacity:.8}
.submit-text{transition:opacity .2s}
.submit-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.spinner{width:18px;height:18px;border:2px solid rgba(26,12,17,.3);border-top-color:#1a0c11;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* DIVIDER */
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted2);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
/* GOOGLE */
.google-btn{width:100%;background:var(--card2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:12px;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color .2s;display:flex;align-items:center;justify-content:center;gap:10px}
.google-btn:hover{border-color:var(--borderh)}
/* ERROR */
.error-msg{background:rgba(196,106,106,.12);border:1px solid rgba(196,106,106,.3);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--redc);margin-bottom:16px;display:none;animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* SUCCESS */
.success-screen{display:none;text-align:center;padding:20px 0}
.success-icon{font-size:48px;margin-bottom:16px;animation:pop .4s ease}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.success-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:.04em;color:var(--text);margin-bottom:8px}
.success-sub{font-size:13px;color:var(--muted)}
.progress-bar{height:3px;background:var(--card3);border-radius:2px;margin-top:24px;overflow:hidden}
.progress-fill{height:100%;background:var(--rose);border-radius:2px;width:0%;transition:width 1.5s ease}
/* BACK LINK */
.back-link{text-align:center;margin-top:20px;font-size:13px;color:var(--muted);animation:fadeUp .5s ease .3s both}
.back-link a{color:var(--rose);text-decoration:none;font-weight:500}
.back-link a:hover{color:var(--blush)}
/* DEMO HINT */
.demo-hint{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-top:16px;font-size:12px;color:var(--muted);animation:fadeUp .5s ease .35s both}
.demo-hint strong{color:var(--rose);display:block;margin-bottom:6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.demo-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border)}
.demo-row:last-child{border-bottom:none}
/* ANIMATIONS */
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
</style>
</head>
<body>
<div class="bg-glow">
<div class="glow1"></div>
<div class="glow2"></div>
<div class="grid-lines"></div>
</div>
<div class="wrap">
<!-- LOGO -->
<div class="logo-wrap">
<div class="logo">Zaida<span>G</span></div>
<div class="logo-sub">Client & Trainer Portal</div>
</div>
<!-- ROLE SELECTOR -->
<div class="role-select">
<div class="role-btn active" id="role-client" onclick="setRole('client')">
<div class="role-icon">💪</div>
<div class="role-title">I'm a Client</div>
<div class="role-desc">Access my program</div>
</div>
<div class="role-btn" id="role-trainer" onclick="setRole('trainer')">
<div class="role-icon">🌸</div>
<div class="role-title">I'm Zaida</div>
<div class="role-desc">Trainer dashboard</div>
</div>
</div>
<!-- LOGIN CARD -->
<div class="login-card">
<div id="main-form">
<div class="card-title" id="card-title">Welcome Back</div>
<div class="card-sub" id="card-sub">Sign in to access your training dashboard.</div>
<!-- TABS -->
<div class="tabs" id="tab-row">
<button class="tab active" onclick="setTab(this,'login')">Log In</button>
<button class="tab" onclick="setTab(this,'signup')">Sign Up</button>
</div>
<!-- ERROR -->
<div class="error-msg" id="error-msg">Incorrect email or password. Please try again.</div>
<!-- LOGIN FIELDS -->
<div id="login-fields">
<div class="form-group">
<label class="form-label">Email</label>
<input class="form-input" id="login-email" type="email" placeholder="your@email.com">
</div>
<div class="form-group">
<label class="form-label">Password</label>
<input class="form-input" id="login-password" type="password" placeholder="••••••••" onkeydown="if(event.key==='Enter')doLogin()">
</div>
<a class="forgot" href="#">Forgot password?</a>
<button class="submit" id="login-btn" onclick="doLogin()">
<span class="submit-text">Sign In →</span>
<div class="submit-spinner"><div class="spinner"></div></div>
</button>
<div class="divider">or</div>
<button class="google-btn">
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="#EA4335" d="M5.26 9.77A7.2 7.2 0 0 1 12 4.8c1.73 0 3.3.63 4.53 1.66l3.37-3.37A12 12 0 0 0 12 0C7.31 0 3.25 2.7 1.28 6.67l3.98 3.1z"/><path fill="#34A853" d="M16.04 18.01A7.17 7.17 0 0 1 12 19.2a7.2 7.2 0 0 1-6.73-4.56L1.25 17.7A12 12 0 0 0 12 24c3.23 0 6.16-1.17 8.4-3.1l-4.36-2.89z"/><path fill="#4A90D9" d="M20.4 20.9A12 12 0 0 0 24 12c0-.8-.1-1.6-.24-2.4H12v4.8h6.72a5.9 5.9 0 0 1-2.32 3.62l4 2.88z"/><path fill="#FBBC05" d="M5.27 14.64A7.25 7.25 0 0 1 4.8 12c0-.92.16-1.8.44-2.63L1.26 6.27A12 12 0 0 0 0 12c0 1.93.46 3.75 1.26 5.37l4-2.73z"/></svg>
Continue with Google
</button>
</div>
<!-- SIGNUP FIELDS -->
<div id="signup-fields" style="display:none">
<div class="form-row">
<div class="form-group">
<label class="form-label">First Name</label>
<input class="form-input" type="text" placeholder="Maria">
</div>
<div class="form-group">
<label class="form-label">Last Name</label>
<input class="form-input" type="text" placeholder="Garcia">
</div>
</div>
<div class="form-group">
<label class="form-label">Email</label>
<input class="form-input" type="email" placeholder="your@email.com">
</div>
<div class="form-group">
<label class="form-label">Password</label>
<input class="form-input" type="password" placeholder="Create a password">
</div>
<div class="form-group">
<label class="form-label">Confirm Password</label>
<input class="form-input" type="password" placeholder="Repeat password">
</div>
<button class="submit" onclick="doSignup()">
<span class="submit-text">Create Account →</span>
<div class="submit-spinner"><div class="spinner"></div></div>
</button>
<div class="divider">or</div>
<button class="google-btn">
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="#EA4335" d="M5.26 9.77A7.2 7.2 0 0 1 12 4.8c1.73 0 3.3.63 4.53 1.66l3.37-3.37A12 12 0 0 0 12 0C7.31 0 3.25 2.7 1.28 6.67l3.98 3.1z"/><path fill="#34A853" d="M16.04 18.01A7.17 7.17 0 0 1 12 19.2a7.2 7.2 0 0 1-6.73-4.56L1.25 17.7A12 12 0 0 0 12 24c3.23 0 6.16-1.17 8.4-3.1l-4.36-2.89z"/><path fill="#4A90D9" d="M20.4 20.9A12 12 0 0 0 24 12c0-.8-.1-1.6-.24-2.4H12v4.8h6.72a5.9 5.9 0 0 1-2.32 3.62l4 2.88z"/><path fill="#FBBC05" d="M5.27 14.64A7.25 7.25 0 0 1 4.8 12c0-.92.16-1.8.44-2.63L1.26 6.27A12 12 0 0 0 0 12c0 1.93.46 3.75 1.26 5.37l4-2.73z"/></svg>
Sign Up with Google
</button>
</div>
</div>
<!-- SUCCESS SCREEN -->
<div class="success-screen" id="success-screen">
<div class="success-icon">✅</div>
<div class="success-title" id="success-title">Welcome Back!</div>
<div class="success-sub" id="success-sub">Redirecting to your dashboard...</div>
<div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
</div>
</div>
<div class="back-link">
<a href="/">← Back to zaidag.com</a>
</div>
</div>
<script>
let currentRole = 'client';
let currentTab = 'login';
function setRole(role) {
currentRole = role;
document.getElementById('role-client').classList.toggle('active', role === 'client');
document.getElementById('role-trainer').classList.toggle('active', role === 'trainer');
const tabRow = document.getElementById('tab-row');
if (role === 'trainer') {
document.getElementById('card-title').textContent = 'Trainer Access';
document.getElementById('card-sub').textContent = 'Sign in to manage your clients and sessions.';
tabRow.style.display = 'none';
setTab(null, 'login');
} else {
document.getElementById('card-title').textContent = 'Welcome Back';
document.getElementById('card-sub').textContent = 'Sign in to access your training dashboard.';
tabRow.style.display = 'flex';
}
clearError();
}
function setTab(btn, tab) {
currentTab = tab;
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
if (btn) btn.classList.add('active');
document.getElementById('login-fields').style.display = tab === 'login' ? 'block' : 'none';
document.getElementById('signup-fields').style.display = tab === 'signup' ? 'block' : 'none';
clearError();
}
function showError(msg) {
const el = document.getElementById('error-msg');
el.textContent = msg;
el.style.display = 'block';
el.style.animation = 'none';
requestAnimationFrame(() => { el.style.animation = 'shake .4s ease'; });
}
function clearError() {
document.getElementById('error-msg').style.display = 'none';
}
function setLoading(btn, loading) {
btn.classList.toggle('loading', loading);
btn.querySelector('.submit-text').style.opacity = loading ? '0' : '1';
btn.querySelector('.submit-spinner').style.opacity = loading ? '1' : '0';
}
function showSuccess(name, role) {
document.getElementById('main-form').style.display = 'none';
document.getElementById('success-screen').style.display = 'block';
document.getElementById('success-title').textContent =
role === 'trainer' ? 'Hey Zaida! 🌸' : 'Welcome back, ' + name + '!';
document.getElementById('success-sub').textContent =
role === 'trainer' ? 'Loading your trainer dashboard...' : 'Redirecting to your training hub...';
setTimeout(() => { document.getElementById('progress-fill').style.width = '100%'; }, 100);
}
async function doLogin() {
clearError();
const email = document.getElementById('login-email').value.trim().toLowerCase();
const pass = document.getElementById('login-password').value;
const btn = document.getElementById('login-btn');
if (!email || !pass) { showError('Please enter your email and password.'); return; }
setLoading(btn, true);
try {
const res = await fetch('/zg-auth.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password: pass, role: currentRole })
});
const data = await res.json();
if (!data.success) {
setLoading(btn, false);
showError(data.message || 'Login failed. Please try again.');
return;
}
// Store session info
sessionStorage.setItem('zg_user', JSON.stringify({
name: data.user.name,
email: data.user.email,
role: data.user.role
}));
showSuccess(data.user.name, data.user.role);
setTimeout(() => { window.location.href = data.redirect; }, 1800);
} catch (err) {
setLoading(btn, false);
showError('Connection error. Please try again.');
}
}
async function doSignup() {
const btn = document.querySelector('#signup-fields .submit');
setLoading(btn, true);
// Signup creates a pending account — Zaida approves from WP Admin
setTimeout(() => {
document.getElementById('main-form').style.display = 'none';
document.getElementById('success-screen').style.display = 'block';
document.getElementById('success-title').textContent = 'Request Sent!';
document.getElementById('success-sub').textContent = 'Zaida will review your signup and send your login details within 24 hours.';
setTimeout(() => { document.getElementById('progress-fill').style.width = '100%'; }, 100);
}, 1000);
}
// Check if already logged in
const saved = sessionStorage.getItem('zg_user');
if (saved) {
const u = JSON.parse(saved);
window.location.href = u.role === 'trainer' ? '/trainer' : '/dashboard';
}
</script>
</body>
</html>