Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| from auth_token import login, initiate_signup, complete_signup | |
| import streamlit.components.v1 as components | |
| import os | |
| st.set_page_config(page_title="FitPlan Pro", page_icon="⚡", layout="wide") | |
| # ── Already logged in → go to profile ──────────────────────────────────────── | |
| if st.session_state.get("logged_in"): | |
| st.switch_page("pages/1_Profile.py") | |
| # ── State init ──────────────────────────────────────────────────────────────── | |
| for k, v in [("page_mode","landing"),("signup_step","form"),("pending_signup",{})]: | |
| if k not in st.session_state: | |
| st.session_state[k] = v | |
| # ── Hide Streamlit chrome ───────────────────────────────────────────────────── | |
| st.markdown(""" | |
| <style> | |
| #MainMenu,footer,header,[data-testid="stToolbar"],[data-testid="stDecoration"], | |
| [data-testid="stSidebarNav"],section[data-testid="stSidebar"]{display:none!important;} | |
| html,body,.stApp,[data-testid="stAppViewContainer"]{ | |
| background:#0d0d1a!important;margin:0!important;padding:0!important; | |
| height:100%!important;overflow:hidden!important;} | |
| [data-testid="stAppViewContainer"]>section{padding:0!important;margin:0!important;} | |
| [data-testid="stAppViewContainer"]>section>div.block-container{ | |
| padding:0!important;max-width:100%!important;margin:0!important;height:100vh!important;} | |
| iframe{border:none!important;display:block!important;width:100vw!important; | |
| height:100vh!important;position:fixed!important;top:0!important;left:0!important;z-index:9999!important;} | |
| </style> | |
| """, unsafe_allow_html=True) | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| # ACTION HANDLERS | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| params = st.query_params | |
| action = params.get("action", "") | |
| # ── LOGIN ───────────────────────────────────────────────────────────────────── | |
| if action == "login": | |
| u = params.get("u", ""); p = params.get("p", "") | |
| if u and p: | |
| ok, token, real_username, msg = login(u, p) | |
| if ok: | |
| st.session_state.logged_in = True | |
| st.session_state.username = real_username | |
| st.session_state.auth_token = token | |
| st.query_params.clear() | |
| st.switch_page("pages/1_Profile.py") | |
| else: | |
| st.session_state.login_error = msg | |
| st.session_state.page_mode = "login" | |
| st.query_params.clear(); st.rerun() | |
| # ── SEND OTP ────────────────────────────────────────────────────────────────── | |
| if action == "send_otp": | |
| su = params.get("u",""); se = params.get("e","") | |
| sp = params.get("p",""); sp2 = params.get("p2","") | |
| if sp != sp2: | |
| st.session_state.signup_error = "Passwords don't match." | |
| elif "@" not in se or "." not in se: | |
| st.session_state.signup_error = "Enter a valid email address." | |
| elif len(sp) < 6: | |
| st.session_state.signup_error = "Password must be at least 6 characters." | |
| elif not su.strip(): | |
| st.session_state.signup_error = "Username is required." | |
| else: | |
| with st.spinner(""): | |
| ok, msg = initiate_signup(su.strip(), se.strip().lower(), sp) | |
| if ok: | |
| if msg == "__NO_OTP__": | |
| st.session_state.signup_success = "✓ Account created! Please sign in." | |
| st.session_state.page_mode = "login" | |
| st.session_state.signup_step = "form" | |
| st.session_state.pending_signup = {} | |
| else: | |
| st.session_state.pending_signup = {"username": su.strip(), "email": se.strip().lower(), "password": sp} | |
| st.session_state.signup_step = "otp" | |
| st.session_state.signup_error = "" | |
| st.session_state.page_mode = "signup" | |
| else: | |
| st.session_state.signup_error = msg | |
| st.session_state.page_mode = "signup" | |
| st.query_params.clear(); st.rerun() | |
| # ── VERIFY OTP ──────────────────────────────────────────────────────────────── | |
| if action == "verify_otp": | |
| otp_val = params.get("otp", "") | |
| su = params.get("u", "").strip() | |
| se = params.get("e", "").strip() | |
| sp = params.get("p", "").strip() | |
| if not su: | |
| pd = st.session_state.get("pending_signup", {}) | |
| su = pd.get("username",""); se = pd.get("email",""); sp = pd.get("password","") | |
| ok, token, msg = complete_signup(su, se, sp, otp_val) | |
| if ok: | |
| st.session_state.signup_success = "✓ Account created! Please sign in." | |
| st.session_state.signup_step = "form" | |
| st.session_state.page_mode = "login" | |
| st.session_state.pending_signup = {} | |
| else: | |
| st.session_state.otp_error = msg | |
| st.session_state.signup_step = "otp" | |
| st.session_state.page_mode = "signup" | |
| st.query_params.clear(); st.rerun() | |
| # ── NAV ─────────────────────────────────────────────────────────────────────── | |
| if action == "go_signup": | |
| st.session_state.page_mode = "signup"; st.session_state.signup_step = "form" | |
| st.query_params.clear(); st.rerun() | |
| if action == "go_login": | |
| st.session_state.page_mode = "login" | |
| st.query_params.clear(); st.rerun() | |
| if action == "go_back": | |
| st.session_state.signup_step = "form" | |
| st.session_state.pending_signup = {} | |
| st.session_state.page_mode = "signup" | |
| st.query_params.clear(); st.rerun() | |
| if action == "go_home": | |
| st.session_state.page_mode = "landing" | |
| st.query_params.clear(); st.rerun() | |
| # ── Pop flash messages ──────────────────────────────────────────────────────── | |
| login_error = st.session_state.pop("login_error", "") | |
| signup_error = st.session_state.pop("signup_error", "") | |
| otp_error = st.session_state.pop("otp_error", "") | |
| signup_success = st.session_state.pop("signup_success", "") | |
| mode = st.session_state.page_mode | |
| signup_step = st.session_state.signup_step | |
| pending = st.session_state.pending_signup | |
| pending_email = pending.get("email", "") | |
| pending_u = pending.get("username", "") | |
| pending_e = pending.get("email", "") | |
| pending_p = pending.get("password", "") | |
| is_signup = mode == "signup" | |
| show_landing = (mode == "landing") | |
| def err(msg): return f"<div class='msg err'><span>⚠</span>{msg}</div>" if msg else "" | |
| def good(msg): return f"<div class='msg ok'><span>✓</span>{msg}</div>" if msg else "" | |
| _brevo_ok = bool(os.environ.get("BREVO_API_KEY","")) and bool(os.environ.get("EMAIL_SENDER","")) | |
| _supabase_ok = bool(os.environ.get("SUPABASE_URL","")) and bool(os.environ.get("SUPABASE_KEY","")) | |
| def cfg_banner(): | |
| lines = [] | |
| if not _supabase_ok: lines.append("⚠ SUPABASE_URL/SUPABASE_KEY not set — accounts reset on restart") | |
| if not _brevo_ok: lines.append("⚠ BREVO_API_KEY/EMAIL_SENDER not set — direct signup used") | |
| if not lines: return "" | |
| return ("<div style='background:rgba(232,124,3,.13);border-left:3px solid #e87c03;" | |
| "color:#e87c03;font-size:.7rem;padding:8px 12px;border-radius:4px;" | |
| "margin-bottom:14px;line-height:1.9'>" + "<br>".join(lines) + "</div>") | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| # SVG TILE ICONS | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| SVG_ICONS = { | |
| "barbell": '<rect x="4" y="28" width="56" height="8" rx="4" fill="currentColor"/><rect x="2" y="21" width="9" height="22" rx="3" fill="currentColor"/><rect x="53" y="21" width="9" height="22" rx="3" fill="currentColor"/><rect x="0" y="25" width="5" height="14" rx="2" fill="currentColor" opacity=".55"/><rect x="59" y="25" width="5" height="14" rx="2" fill="currentColor" opacity=".55"/>', | |
| "dumbbell": '<rect x="16" y="28" width="32" height="8" rx="4" fill="currentColor"/><rect x="7" y="20" width="11" height="24" rx="3" fill="currentColor"/><rect x="46" y="20" width="11" height="24" rx="3" fill="currentColor"/><rect x="3" y="25" width="7" height="14" rx="2" fill="currentColor" opacity=".55"/><rect x="54" y="25" width="7" height="14" rx="2" fill="currentColor" opacity=".55"/>', | |
| "runner": '<circle cx="40" cy="9" r="6" fill="currentColor"/><path d="M38 16 L28 30 L16 43" stroke="currentColor" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M28 30 L40 41 L46 56" stroke="currentColor" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M20 19 L42 24 L54 15" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"/>', | |
| "pullup": '<rect x="4" y="4" width="56" height="7" rx="3.5" fill="currentColor"/><line x1="20" y1="11" x2="20" y2="26" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><line x1="44" y1="11" x2="44" y2="26" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><circle cx="32" cy="33" r="7" fill="currentColor"/><path d="M19 27 Q32 20 45 27" stroke="currentColor" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M25 40 L21 56 M39 40 L43 56" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>', | |
| "bicycle": '<circle cx="15" cy="45" r="13" stroke="currentColor" stroke-width="3.5" fill="none"/><circle cx="49" cy="45" r="13" stroke="currentColor" stroke-width="3.5" fill="none"/><path d="M15 45 L32 20 L49 45" stroke="currentColor" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="15" cy="45" r="3.5" fill="currentColor"/><circle cx="49" cy="45" r="3.5" fill="currentColor"/>', | |
| "yoga": '<circle cx="32" cy="8" r="6.5" fill="currentColor"/><line x1="32" y1="15" x2="32" y2="34" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><path d="M8 22 Q20 32 32 28 Q44 32 56 22" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none"/><path d="M32 34 L17 52 M32 34 L47 52" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>', | |
| "kettlebell": '<path d="M23 24 Q18 14 24 8 Q32 1 40 8 Q46 14 41 24" stroke="currentColor" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M23 24 Q14 26 13 37 Q11 50 24 56 Q32 60 40 56 Q53 50 51 37 Q49 26 41 24Z" stroke="currentColor" stroke-width="3" fill="currentColor" opacity=".18"/><path d="M23 24 Q14 26 13 37 Q11 50 24 56 Q32 60 40 56 Q53 50 51 37 Q49 26 41 24Z" stroke="currentColor" stroke-width="3" fill="none"/>', | |
| "pushup": '<circle cx="47" cy="10" r="6" fill="currentColor"/><path d="M47 17 L47 31 L8 31" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M8 31 L4 46" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><line x1="0" y1="46" x2="10" y2="46" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>', | |
| "stopwatch": '<circle cx="32" cy="37" r="22" stroke="currentColor" stroke-width="3.5" fill="none"/><line x1="32" y1="37" x2="32" y2="21" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><line x1="32" y1="37" x2="45" y2="29" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><line x1="26" y1="6" x2="38" y2="6" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/><line x1="32" y1="6" x2="32" y2="15" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>', | |
| "medal": '<path d="M22 4 L42 4 L50 20 L32 29 L14 20Z" fill="currentColor" opacity=".22" stroke="currentColor" stroke-width="2.5"/><circle cx="32" cy="45" r="17" stroke="currentColor" stroke-width="3.5" fill="none"/><path d="M32 37 L34.8 42.5 L41 43.4 L36.5 47.8 L37.6 54 L32 51 L26.4 54 L27.5 47.8 L23 43.4 L29.2 42.5Z" fill="currentColor"/>', | |
| "heartrate": '<path d="M32 54 Q9 39 9 24 Q9 12 20 11 Q28 9 32 19 Q36 9 44 11 Q55 12 55 24 Q55 39 32 54Z" stroke="currentColor" stroke-width="3" fill="currentColor" opacity=".15"/><path d="M32 54 Q9 39 9 24 Q9 12 20 11 Q28 9 32 19 Q36 9 44 11 Q55 12 55 24 Q55 39 32 54Z" stroke="currentColor" stroke-width="3" fill="none"/><path d="M5 33 L15 33 L21 22 L28 44 L34 27 L38 37 L44 33 L59 33" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>', | |
| "squat": '<circle cx="32" cy="8" r="6" fill="currentColor"/><line x1="32" y1="14" x2="32" y2="29" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><line x1="13" y1="20" x2="51" y2="20" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><path d="M32 29 L19 46 L15 60 M32 29 L45 46 L49 60" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>', | |
| "plank": '<circle cx="55" cy="12" r="6" fill="currentColor"/><path d="M55 19 L46 29 L8 29" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="8" y1="29" x2="4" y2="42" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><line x1="46" y1="29" x2="51" y2="42" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><line x1="0" y1="42" x2="58" y2="42" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>', | |
| "boxing": '<path d="M15 23 Q11 16 14 9 Q20 2 30 8 L48 21 Q56 29 52 39 Q48 45 38 42 L23 37 Q13 34 15 24Z" fill="currentColor" opacity=".18" stroke="currentColor" stroke-width="3"/><path d="M23 37 L19 52 M38 42 L43 56" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>', | |
| "flame": '<path d="M32 60 Q12 50 12 33 Q12 17 26 9 Q22 21 32 24 Q24 12 36 3 Q33 16 43 20 Q54 26 54 40 Q54 53 32 60Z" fill="currentColor" opacity=".2" stroke="currentColor" stroke-width="3"/><path d="M32 60 Q12 50 12 33 Q12 17 26 9 Q22 21 32 24 Q24 12 36 3 Q33 16 43 20 Q54 26 54 40 Q54 53 32 60Z" fill="none" stroke="currentColor" stroke-width="3"/><path d="M32 52 Q20 44 22 35 Q24 28 32 31 Q40 28 42 35 Q44 44 32 52Z" fill="currentColor" opacity=".55"/>', | |
| "target": '<circle cx="32" cy="32" r="27" stroke="currentColor" stroke-width="3" fill="none"/><circle cx="32" cy="32" r="17" stroke="currentColor" stroke-width="3" fill="none"/><circle cx="32" cy="32" r="7" fill="currentColor"/><line x1="32" y1="3" x2="32" y2="10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><line x1="32" y1="54" x2="32" y2="61" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><line x1="3" y1="32" x2="10" y2="32" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><line x1="54" y1="32" x2="61" y2="32" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>', | |
| } | |
| TILE_DATA = [ | |
| ("barbell","BARBELL","#2a1f3d","#c4b5fd"),("runner","RUNNING","#1e2d45","#93c5fd"), | |
| ("dumbbell","DUMBBELL","#2a1f3d","#e0aaff"),("heartrate","CARDIO","#3a1a2a","#fca5a5"), | |
| ("bicycle","CYCLING","#1a2e2a","#6ee7b7"),("yoga","YOGA","#2a1f3d","#d8b4fe"), | |
| ("pullup","PULL-UPS","#1a2e25","#86efac"),("kettlebell","KETTLEBELL","#1d2e36","#5eead4"), | |
| ("stopwatch","INTERVALS","#1e2d45","#7dd3fc"),("pushup","PUSH-UPS","#32210f","#fdba74"), | |
| ("squat","SQUATS","#1f2040","#a5b4fc"),("plank","PLANK","#2a1f3d","#f0abfc"), | |
| ("boxing","BOXING","#3a1a1e","#fda4af"),("medal","CHAMPION","#30280e","#fde68a"), | |
| ("flame","HIIT","#351808","#fed7aa"),("target","GOALS","#1e2d45","#7dd3fc"), | |
| ] | |
| def make_tile(i): | |
| key, label, bg, accent = TILE_DATA[i % len(TILE_DATA)] | |
| d = round((i * 0.4) % 4, 1) | |
| dur = round(3 + (i * 0.3) % 2, 1) | |
| border = "border-bottom:2px solid rgba(229,9,20,0.45);" if i % 7 == 0 else "" | |
| return ( | |
| f'<div class="tile" style="background:{bg};animation-delay:{d}s;animation-duration:{dur}s;{border}">' | |
| f'<svg viewBox="0 0 64 64" fill="none" style="color:{accent};width:clamp(22px,3vw,38px);height:clamp(22px,3vw,38px)">' | |
| + SVG_ICONS[key] + | |
| f'</svg><div class="tile-label" style="color:{accent}bb">{label}</div></div>' | |
| ) | |
| tiles_html = "".join(make_tile(i) for i in range(60)) | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| # BUILD CARD HTML | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| if not is_signup: | |
| card_html = ( | |
| "<div class='card-eyebrow'>Welcome Back</div>" | |
| "<div class='card-title'>Sign In</div>" | |
| + err(login_error) + good(signup_success) | |
| + """<form id="fLogin"> | |
| <div class="f"><input type="text" id="li_u" placeholder="x" autocomplete="username"><label>Email or Username</label></div> | |
| <div class="f"><input type="password" id="li_p" placeholder="x" autocomplete="current-password"><label>Password</label></div> | |
| <button class="btn-main" type="submit"><span class="spinner"></span><span class="btn-label">Sign In</span></button> | |
| </form> | |
| <div class="or-row"><span>OR</span></div> | |
| <div class="switch-row">New here? <a onclick="goSignup()">Create an account.</a></div> | |
| <div class="legal">Your data is encrypted and never shared with third parties.</div>""" | |
| ) | |
| elif signup_step == "otp": | |
| card_html = ( | |
| "<div class='card-eyebrow'>Almost There</div>" | |
| "<div class='card-title'>Verify Email</div>" | |
| + err(otp_error) | |
| + "<div class='otp-info'><p>We sent a 6-digit code to</p><strong>" + pending_email + "</strong><p style='margin-top:6px;font-size:.68rem'>Check your inbox and spam folder</p></div>" | |
| + '<form id="fOtp">' | |
| + '<input type="hidden" id="h_u" value="' + pending_u + '">' | |
| + '<input type="hidden" id="h_e" value="' + pending_e + '">' | |
| + '<input type="hidden" id="h_p" value="' + pending_p + '">' | |
| + """<div class="f"><input class="otp" type="text" id="otp_val" placeholder="000000" maxlength="6" autocomplete="one-time-code" inputmode="numeric"></div> | |
| <button class="btn-main" type="submit"><span class="spinner"></span><span class="btn-label">Verify & Create Account</span></button> | |
| </form> | |
| <div class="back-link"><button id="backBtn">← Wrong email? Start over</button></div> | |
| <div class="switch-row">Already a member? <a onclick="goLogin()">Sign in.</a></div>""" | |
| ) | |
| else: | |
| card_html = ( | |
| "<div class='card-eyebrow'>Join FitPlan Pro</div>" | |
| "<div class='card-title'>Create Account</div>" | |
| + cfg_banner() | |
| + err(signup_error) | |
| + """<form id="fSignup"> | |
| <div class="f"><input type="text" id="su_u" placeholder="x" autocomplete="username"><label>Username</label></div> | |
| <div class="f"><input type="email" id="su_e" placeholder="x" autocomplete="email"><label>Email Address</label></div> | |
| <div class="f"><input type="password" id="su_p" placeholder="x" autocomplete="new-password"><label>Password (min 6 chars)</label></div> | |
| <div class="f"><input type="password" id="su_p2" placeholder="x" autocomplete="new-password"><label>Confirm Password</label></div> | |
| <button class="btn-main" type="submit"><span class="spinner"></span><span class="btn-label">Send Verification Code</span></button> | |
| </form> | |
| <div class="switch-row">Already a member? <a onclick="goLogin()">Sign in.</a></div>""" | |
| ) | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| # FULL PAGE HTML | |
| # ══════════════════════════════════════════════════════════════════════════════ | |
| HTML = f"""<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> | |
| <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root{{ | |
| --red:#E50914;--red-h:#f40612; | |
| --spring:cubic-bezier(0.34,1.56,0.64,1); | |
| --ease:cubic-bezier(0.22,1,0.36,1); | |
| --snappy:cubic-bezier(0.16,1,0.3,1); | |
| }} | |
| *,*::before,*::after{{box-sizing:border-box;margin:0;padding:0;}} | |
| html,body{{width:100%;height:100%;overflow:hidden;font-family:'DM Sans',sans-serif; | |
| background:radial-gradient(ellipse 140% 100% at 50% 0%,#1a1040 0%,#0d0d1a 55%,#080810 100%); | |
| color:#fff;-webkit-font-smoothing:antialiased;}} | |
| /* ━━ MOSAIC ━━ */ | |
| .mosaic{{position:fixed;inset:0;z-index:0;overflow:hidden;display:grid; | |
| grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);gap:4px; | |
| transform:perspective(800px) rotateX(5deg) rotateZ(-6deg) scale(1.5); | |
| animation:mosaic-pan 40s linear infinite alternate;}} | |
| @keyframes mosaic-pan{{ | |
| 0%{{transform:perspective(800px) rotateX(5deg) rotateZ(-6deg) scale(1.5) translate(0,0);}} | |
| 100%{{transform:perspective(800px) rotateX(5deg) rotateZ(-6deg) scale(1.5) translate(-3%,4%);}}}} | |
| .tile{{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; | |
| gap:6px;border-radius:6px;overflow:hidden;cursor:default;user-select:none; | |
| animation:tile-breathe ease-in-out infinite alternate; | |
| transition:transform 0.18s var(--spring),filter 0.18s,opacity 0.18s;will-change:transform,filter,opacity;}} | |
| @keyframes tile-breathe{{from{{opacity:0.48;filter:brightness(0.7) saturate(0.8);}}to{{opacity:0.80;filter:brightness(1.2) saturate(1.3);}}}} | |
| .tile.lit{{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.18),0 0 18px rgba(255,255,255,0.08);}} | |
| .tile-label{{font-family:'Bebas Neue',sans-serif;font-size:clamp(0.34rem,0.65vw,0.55rem);letter-spacing:3px;}} | |
| /* ━━ OVERLAY ━━ */ | |
| .overlay{{position:fixed;inset:0;z-index:1;pointer-events:none; | |
| background:radial-gradient(ellipse 80% 65% at 50% 50%,rgba(13,13,26,.05) 0%,rgba(13,13,26,.6) 60%,rgba(8,8,16,.94) 100%), | |
| linear-gradient(to bottom,rgba(8,8,16,.6) 0%,rgba(8,8,16,0) 18%,rgba(8,8,16,0) 80%,rgba(8,8,16,.75) 100%);}} | |
| /* ━━ TOP NAV ━━ */ | |
| .topnav{{position:fixed;top:0;left:0;right:0;z-index:20; | |
| display:flex;align-items:center;justify-content:space-between;padding:20px 40px 16px; | |
| background:linear-gradient(180deg,rgba(0,0,0,0.75) 0%,transparent 100%); | |
| animation:nav-in 0.7s var(--ease) 0.1s both;}} | |
| @keyframes nav-in{{from{{opacity:0;transform:translateY(-14px)}}to{{opacity:1;transform:none}}}} | |
| .nav-logo{{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.8rem,3vw,2.2rem);letter-spacing:5px; | |
| color:var(--red);text-shadow:0 0 28px rgba(229,9,20,0.55);}} | |
| .nav-btns{{display:flex;gap:10px;align-items:center;}} | |
| .btn-nav-signin{{height:38px;padding:0 20px;background:transparent; | |
| border:1.5px solid rgba(255,255,255,0.30);border-radius:4px; | |
| font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:600; | |
| color:rgba(255,255,255,0.82);cursor:pointer;letter-spacing:0.3px; | |
| transition:border-color 0.2s,color 0.2s,background 0.2s;}} | |
| .btn-nav-signin:hover{{border-color:#fff;color:#fff;background:rgba(255,255,255,0.08);}} | |
| .btn-nav-start{{height:38px;padding:0 22px;background:var(--red);border:none;border-radius:4px; | |
| font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:700;color:#fff;cursor:pointer; | |
| box-shadow:0 3px 16px rgba(229,9,20,0.45); | |
| transition:background 0.2s,box-shadow 0.2s,transform 0.15s;}} | |
| .btn-nav-start:hover{{background:var(--red-h);box-shadow:0 5px 24px rgba(229,9,20,0.65);transform:translateY(-1px);}} | |
| /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | |
| LANDING HERO | |
| ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ | |
| .hero{{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column; | |
| align-items:center;justify-content:center;text-align:center;padding:80px 20px 20px; | |
| pointer-events:none;animation:hero-in 0.9s var(--ease) 0.35s both;}} | |
| @keyframes hero-in{{from{{opacity:0;transform:translateY(28px)}}to{{opacity:1;transform:none}}}} | |
| .hero-eyebrow{{font-size:0.62rem;font-weight:700;letter-spacing:5px;text-transform:uppercase; | |
| color:rgba(229,9,20,0.80);margin-bottom:14px;display:flex;align-items:center;gap:10px;}} | |
| .hero-eyebrow::before,.hero-eyebrow::after{{content:'';width:32px;height:1.5px;background:rgba(229,9,20,0.45);border-radius:1px;}} | |
| /* REDUCED heading size */ | |
| .hero-title{{font-family:'Bebas Neue',sans-serif; | |
| font-size:clamp(2.8rem,6vw,5.2rem); | |
| letter-spacing:3px;line-height:0.95;color:#fff; | |
| text-shadow:0 4px 40px rgba(0,0,0,0.65);margin-bottom:14px; | |
| animation:title-float 6s ease-in-out infinite;}} | |
| .hero-title em{{color:var(--red);font-style:normal;text-shadow:0 0 40px rgba(229,9,20,0.5);}} | |
| @keyframes title-float{{0%,100%{{transform:translateY(0px);}}50%{{transform:translateY(-8px);}}}} | |
| .hero-sub{{font-size:clamp(0.85rem,1.4vw,1rem);color:rgba(255,255,255,0.48);font-weight:300; | |
| max-width:460px;line-height:1.8;margin-bottom:28px;letter-spacing:0.2px; | |
| animation:sub-float 6s ease-in-out infinite;animation-delay:0.4s;}} | |
| @keyframes sub-float{{0%,100%{{transform:translateY(0px);}}50%{{transform:translateY(-5px);}}}} | |
| /* Hero CTA row — includes floating fitness images */ | |
| .hero-cta-row{{pointer-events:all;display:flex;align-items:center;justify-content:center;gap:0;position:relative;}} | |
| /* Floating fitness images */ | |
| .hero-img{{ | |
| width:clamp(100px,12vw,155px); | |
| height:clamp(140px,17vw,210px); | |
| border-radius:16px; | |
| object-fit:cover; | |
| border:2px solid rgba(255,255,255,0.10); | |
| box-shadow:0 20px 60px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.06); | |
| flex-shrink:0; | |
| }} | |
| .hero-img-left{{ | |
| margin-right:-18px;z-index:1; | |
| transform:rotate(-6deg) translateY(10px); | |
| animation:img-float-left 5.5s ease-in-out infinite; | |
| }} | |
| .hero-img-right{{ | |
| margin-left:-18px;z-index:1; | |
| transform:rotate(6deg) translateY(10px); | |
| animation:img-float-right 5.5s ease-in-out infinite; | |
| }} | |
| @keyframes img-float-left{{ | |
| 0%,100%{{transform:rotate(-6deg) translateY(10px);}} | |
| 50%{{transform:rotate(-4deg) translateY(-4px);}} | |
| }} | |
| @keyframes img-float-right{{ | |
| 0%,100%{{transform:rotate(6deg) translateY(10px);}} | |
| 50%{{transform:rotate(4deg) translateY(-4px);}} | |
| }} | |
| /* CTA button box */ | |
| .hero-cta-box{{ | |
| display:flex;flex-direction:column;align-items:center;gap:12px; | |
| padding:0 28px;z-index:2; | |
| animation:cta-float 6s ease-in-out infinite;animation-delay:0.8s; | |
| }} | |
| @keyframes cta-float{{0%,100%{{transform:translateY(0px);}}50%{{transform:translateY(-6px);}}}} | |
| .btn-hero-start{{height:52px;padding:0 38px;background:var(--red);border:none;border-radius:6px; | |
| font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700;color:#fff;cursor:pointer; | |
| letter-spacing:0.5px;box-shadow:0 6px 28px rgba(229,9,20,0.55);white-space:nowrap; | |
| transition:background 0.2s,box-shadow 0.2s,transform 0.2s var(--spring); | |
| position:relative;overflow:hidden;}} | |
| .btn-hero-start::before{{content:'';position:absolute;top:0;bottom:0;left:-90%;width:55%; | |
| background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent); | |
| transform:skewX(-15deg);transition:left 0.55s var(--ease);}} | |
| .btn-hero-start:hover{{background:var(--red-h);box-shadow:0 10px 36px rgba(229,9,20,0.7);transform:translateY(-2px);}} | |
| .btn-hero-start:hover::before{{left:135%;}} | |
| .btn-hero-signin{{height:44px;padding:0 30px;background:rgba(255,255,255,0.07); | |
| border:1.5px solid rgba(255,255,255,0.22);border-radius:6px; | |
| font-family:'DM Sans',sans-serif;font-size:0.9rem;font-weight:600; | |
| color:rgba(255,255,255,0.78);cursor:pointer;white-space:nowrap; | |
| backdrop-filter:blur(8px);transition:background 0.2s,border-color 0.2s,color 0.2s;}} | |
| .btn-hero-signin:hover{{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.55);color:#fff;}} | |
| /* Pills */ | |
| .hero-pills{{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:22px; | |
| animation:pills-float 6s ease-in-out infinite;animation-delay:1.2s;}} | |
| @keyframes pills-float{{0%,100%{{transform:translateY(0px);}}50%{{transform:translateY(-4px);}}}} | |
| .hero-pill{{font-size:0.62rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase; | |
| color:rgba(255,255,255,0.42);border:1px solid rgba(255,255,255,0.11); | |
| border-radius:20px;padding:4px 13px;}} | |
| /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | |
| AUTH CARD SCREEN | |
| ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ | |
| .page{{ | |
| position:fixed;inset:0;z-index:10; | |
| display:flex;align-items:center;justify-content:center; | |
| padding:80px 16px 16px;overflow-y:auto; | |
| /* NO background overlay — show the mosaic fully */ | |
| background:transparent; | |
| }} | |
| .card{{ | |
| width:100%;max-width:420px; | |
| /* Same translucent dark as hero elements */ | |
| background:rgba(8,5,18,0.65); | |
| border-radius:16px; | |
| padding:clamp(32px,5vw,52px) clamp(28px,5vw,52px); | |
| box-shadow: | |
| 0 2px 0 rgba(255,255,255,0.06) inset, | |
| 0 32px 80px rgba(0,0,0,0.70), | |
| 0 0 0 1px rgba(229,9,20,0.12); | |
| border:1px solid rgba(229,9,20,0.18); | |
| backdrop-filter:blur(24px) saturate(1.6); | |
| -webkit-backdrop-filter:blur(24px) saturate(1.6); | |
| animation:card-in 0.65s var(--snappy) 0.05s both; | |
| flex-shrink:0; | |
| /* Subtle red top glow bar matching hero */ | |
| position:relative;overflow:hidden; | |
| }} | |
| .card::before{{ | |
| content:'';position:absolute;top:0;left:0;right:0;height:2px; | |
| background:linear-gradient(90deg,transparent,var(--red) 30%,rgba(255,80,80,0.5) 50%,var(--red) 70%,transparent); | |
| opacity:0.7; | |
| }} | |
| .card::after{{ | |
| content:'';position:absolute;top:-50px;right:-50px; | |
| width:200px;height:200px;border-radius:50%; | |
| background:radial-gradient(circle,rgba(229,9,20,0.14) 0%,transparent 68%); | |
| pointer-events:none; | |
| }} | |
| @keyframes card-in{{ | |
| from{{opacity:0;transform:translateY(32px) scale(0.96);filter:blur(4px);}} | |
| to {{opacity:1;transform:none;filter:none;}} | |
| }} | |
| .card-title{{ | |
| font-family:'Bebas Neue',sans-serif; | |
| font-size:clamp(2.2rem,4vw,3.0rem); | |
| letter-spacing:3px;color:#fff;margin-bottom:8px; | |
| text-shadow:0 2px 24px rgba(0,0,0,0.6); | |
| }} | |
| .card-eyebrow{{ | |
| font-size:0.60rem;font-weight:700;letter-spacing:4px;text-transform:uppercase; | |
| color:rgba(229,9,20,0.75);margin-bottom:20px; | |
| display:flex;align-items:center;gap:8px; | |
| }} | |
| .card-eyebrow::before{{content:'';width:18px;height:1.5px;background:var(--red);border-radius:1px;flex-shrink:0;}} | |
| .back-home{{ | |
| display:inline-flex;align-items:center;gap:7px; | |
| font-size:0.72rem;font-weight:600;letter-spacing:0.5px; | |
| color:rgba(255,255,255,0.38);cursor:pointer;margin-bottom:22px; | |
| background:rgba(255,255,255,0.05); | |
| border:1px solid rgba(255,255,255,0.10); | |
| border-radius:100px;padding:5px 14px 5px 10px; | |
| font-family:'DM Sans',sans-serif; | |
| transition:all 0.2s; | |
| }} | |
| .back-home:hover{{ | |
| background:rgba(255,255,255,0.10); | |
| border-color:rgba(255,255,255,0.28); | |
| color:rgba(255,255,255,0.80); | |
| }} | |
| /* ━━ INPUTS ━━ */ | |
| .f{{margin-bottom:14px;position:relative;}} | |
| .f input{{width:100%;height:52px;padding:22px 16px 8px; | |
| background:rgba(255,255,255,0.07);border:1.5px solid rgba(255,255,255,0.12); | |
| border-radius:6px;font-family:'DM Sans',sans-serif;font-size:1rem;color:#fff;outline:none; | |
| transition:background 0.25s,border-color 0.25s,box-shadow 0.25s; | |
| -webkit-appearance:none;caret-color:var(--red);}} | |
| .f input::placeholder{{color:transparent;}} | |
| .f input:hover{{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.25);}} | |
| .f input:focus{{background:rgba(255,255,255,0.11);border-color:rgba(229,9,20,0.65); | |
| box-shadow:0 0 0 3px rgba(229,9,20,0.12);}} | |
| .f label{{position:absolute;left:16px;top:50%;transform:translateY(-50%); | |
| font-size:0.88rem;color:rgba(255,255,255,0.45);pointer-events:none; | |
| transition:all 0.22s var(--ease);}} | |
| .f input:focus+label,.f input:not(:placeholder-shown)+label{{ | |
| top:10px;transform:none;font-size:0.60rem;letter-spacing:1px; | |
| text-transform:uppercase;color:var(--red);font-weight:700;}} | |
| .f input.otp{{height:68px;padding:0;font-family:'Bebas Neue',sans-serif; | |
| font-size:2.6rem;letter-spacing:20px;text-align:center; | |
| color:var(--red);border-color:rgba(229,9,20,0.35);background:rgba(229,9,20,0.05);}} | |
| .f input.otp:focus{{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,9,20,0.15);}} | |
| /* ━━ BUTTON ━━ */ | |
| .btn-main{{width:100%;height:52px;background:linear-gradient(135deg,#E50914 0%,#c5000d 100%); | |
| border:none;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:1rem; | |
| font-weight:700;letter-spacing:0.6px;color:#fff;cursor:pointer; | |
| position:relative;overflow:hidden;margin-top:10px; | |
| box-shadow:0 4px 18px rgba(229,9,20,0.4); | |
| transition:transform 0.2s var(--spring),box-shadow 0.2s,filter 0.2s;}} | |
| .btn-main::before{{content:'';position:absolute;top:0;bottom:0;left:-90%;width:55%; | |
| background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent); | |
| transform:skewX(-15deg);transition:left 0.55s var(--ease);}} | |
| .btn-main:hover{{transform:translateY(-2px) scale(1.01);box-shadow:0 8px 32px rgba(229,9,20,0.6);filter:brightness(1.08);}} | |
| .btn-main:hover::before{{left:135%;}} | |
| .btn-main:active{{transform:translateY(0) scale(0.99);filter:brightness(0.95);}} | |
| .btn-main:disabled{{opacity:0.55;cursor:not-allowed;transform:none;box-shadow:none;filter:none;}} | |
| .btn-main .spinner{{display:none;width:18px;height:18px;border:2.5px solid rgba(255,255,255,0.3); | |
| border-top-color:#fff;border-radius:50%;animation:btn-spin 0.7s linear infinite; | |
| position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}} | |
| .btn-main.loading .spinner{{display:block;}} | |
| .btn-main.loading .btn-label{{opacity:0;}} | |
| .btn-label{{transition:opacity 0.15s;}} | |
| @keyframes btn-spin{{to{{transform:translate(-50%,-50%) rotate(360deg);}}}} | |
| /* ━━ MISC ━━ */ | |
| .or-row{{display:flex;align-items:center;gap:12px;margin:14px 0;}} | |
| .or-row::before,.or-row::after{{content:'';flex:1;height:1px;background:rgba(255,255,255,0.10);}} | |
| .or-row span{{font-size:0.78rem;color:rgba(255,255,255,0.32);letter-spacing:1px;}} | |
| .switch-row{{margin-top:18px;font-size:0.88rem;color:rgba(255,255,255,0.42);text-align:center;}} | |
| .switch-row a{{color:#fff;font-weight:600;cursor:pointer;text-decoration:none;}} | |
| .switch-row a:hover{{color:rgba(255,200,200,0.95);text-decoration:underline;}} | |
| .legal{{font-size:0.65rem;color:rgba(255,255,255,0.20);margin-top:14px;line-height:1.7;}} | |
| .msg{{display:flex;align-items:flex-start;gap:7px;padding:10px 13px;border-radius:6px; | |
| font-size:0.8rem;font-weight:500;margin-bottom:14px;line-height:1.5; | |
| animation:msg-in 0.4s var(--spring) both;}} | |
| @keyframes msg-in{{from{{opacity:0;transform:translateY(-6px)}}to{{opacity:1;transform:none}}}} | |
| .err{{background:rgba(229,9,20,0.12);border-left:3px solid var(--red);color:#ff8090;}} | |
| .ok {{background:rgba(0,200,90,0.1);border-left:3px solid #00c85a;color:#3ddc84;}} | |
| .otp-info{{background:rgba(229,9,20,0.07);border:1px solid rgba(229,9,20,0.2); | |
| border-radius:8px;padding:14px 16px;margin-bottom:18px;text-align:center;}} | |
| .otp-info p{{font-size:0.72rem;color:rgba(255,255,255,0.45);margin-bottom:2px;}} | |
| .otp-info strong{{color:var(--red);font-size:0.9rem;display:block;margin:4px 0 2px;}} | |
| .back-link{{text-align:center;margin-top:12px;}} | |
| .back-link button{{font-size:0.72rem;color:rgba(255,255,255,0.35);background:none;border:none; | |
| cursor:pointer;font-family:'DM Sans',sans-serif;transition:color 0.2s;}} | |
| .back-link button:hover{{color:rgba(255,255,255,0.75);}} | |
| @media(max-width:520px){{ | |
| .topnav{{padding:14px 18px;}} | |
| .hero-img{{width:80px;height:115px;border-radius:10px;}} | |
| .hero-img-left{{margin-right:-10px;}} | |
| .hero-img-right{{margin-left:-10px;}} | |
| .hero-cta-box{{padding:0 14px;}} | |
| .mosaic{{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(8,1fr);}} | |
| .hero-pills{{display:none;}} | |
| .card{{padding:28px 20px;border-radius:10px;}} | |
| }} | |
| /* FAQ SECTION */ | |
| .faq-section{{ | |
| max-width:850px; | |
| margin:200px auto 80px; | |
| padding:0 20px; | |
| text-align:center; | |
| }] | |
| .faq-title{{ | |
| font-family:'Bebas Neue',sans-serif; | |
| font-size:40px; | |
| letter-spacing:3px; | |
| margin-bottom:40px; | |
| }} | |
| .faq-item{{ | |
| background:rgba(255,255,255,0.05); | |
| border:1px solid rgba(255,255,255,0.15); | |
| border-radius:10px; | |
| margin-bottom:15px; | |
| overflow:hidden; | |
| }} | |
| .faq-question{{ | |
| padding:18px 20px; | |
| font-size:16px; | |
| font-weight:600; | |
| display:flex; | |
| justify-content:space-between; | |
| align-items:center; | |
| cursor:pointer; | |
| }} | |
| .faq-answer{{ | |
| display:none; | |
| padding:0 20px 18px; | |
| font-size:14px; | |
| color:rgba(255,255,255,0.7); | |
| line-height:1.6; | |
| }} | |
| .faq-item.active .faq-answer{{ | |
| display:block; | |
| }} | |
| .faq-question span{{ | |
| color:#E50914; | |
| font-size:20px; | |
| transition:0.3s; | |
| }] | |
| .faq-item.active .faq-question span{{ | |
| transform:rotate(45deg); | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <!-- MOSAIC BACKGROUND — always visible --> | |
| <div class="mosaic">{tiles_html}</div> | |
| <div class="overlay"></div> | |
| <!-- TOP NAV — always visible --> | |
| <nav class="topnav"> | |
| <div class="nav-logo">⚡ FitPlan Pro</div> | |
| <div class="nav-btns"> | |
| <button class="btn-nav-signin" onclick="goLogin()">Sign In</button> | |
| <button class="btn-nav-start" onclick="goSignup()">Get Started</button> | |
| </div> | |
| </nav> | |
| <!-- ═══════════════════════════════════════ --> | |
| <!-- SCREEN 1: LANDING HERO --> | |
| <!-- ═══════════════════════════════════════ --> | |
| <div class="hero" style="display:{'flex' if show_landing else 'none'}"> | |
| <div class="hero-eyebrow">AI-Powered Personal Training</div> | |
| <h1 class="hero-title">TRAIN SMARTER.<br><em>REAL RESULTS.</em></h1> | |
| <p class="hero-sub"> | |
| Your AI coach builds a personalised workout plan<br> | |
| tailored to your body, goals & equipment — in seconds. | |
| </p> | |
| <!-- CTA row: [img] [buttons] [img] --> | |
| <div class="hero-cta-row"> | |
| <!-- Left floating image — deadlift / powerlifting --> | |
| <img class="hero-img hero-img-left" | |
| src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80&auto=format&fit=crop" | |
| alt="Gym training" | |
| onerror="this.style.display='none'"> | |
| <!-- CTA box --> | |
| <div class="hero-cta-box"> | |
| <button class="btn-hero-start" onclick="goSignup()">Get Started Free ›</button> | |
| <button class="btn-hero-signin" onclick="goLogin()">Already a member? Sign in</button> | |
| </div> | |
| <!-- Right floating image — athlete physique / lifting --> | |
| <img class="hero-img hero-img-right" | |
| src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&q=80&auto=format&fit=crop" | |
| alt="Fitness athlete" | |
| onerror="this.style.display='none'"> | |
| </div> | |
| <div class="hero-pills"> | |
| <span class="hero-pill">Strength</span> | |
| <span class="hero-pill">Fat Loss</span> | |
| <span class="hero-pill">Muscle Build</span> | |
| <span class="hero-pill">Cardio</span> | |
| <span class="hero-pill">Flexibility</span> | |
| <span class="hero-pill">Bodyweight</span> | |
| </div> | |
| </div> | |
| <!-- FAQ SECTION --> | |
| <div class="faq-section"> | |
| <div class="faq-title">FREQUENTLY ASKED QUESTIONS</div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| How does FitPlan Pro create my workout plan? | |
| <span>+</span> | |
| </div> | |
| <div class="faq-answer"> | |
| Our AI analyzes your body stats, fitness goals, and available equipment to | |
| generate a personalized workout plan tailored specifically for you. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| Is FitPlan Pro free to use? | |
| <span>+</span> | |
| </div> | |
| <div class="faq-answer"> | |
| Yes. You can start using FitPlan Pro and generate workout plans after | |
| creating your account. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| Can beginners use FitPlan Pro? | |
| <span>+</span> | |
| </div> | |
| <div class="faq-answer"> | |
| Absolutely. FitPlan Pro adjusts workouts according to your fitness level, | |
| whether you are a beginner or an advanced athlete. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| Do I need gym equipment? | |
| <span>+</span> | |
| </div> | |
| <div class="faq-answer"> | |
| No. The AI supports bodyweight workouts, home workouts, and full gym | |
| training programs. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════════════════════════════ --> | |
| <!-- SCREEN 2 & 3: AUTH CARD --> | |
| <!-- ═══════════════════════════════════════ --> | |
| <div class="page" style="display:{'flex' if not show_landing else 'none'}"> | |
| <div class="card"> | |
| <button class="back-home" onclick="goHome()">← Back to Home</button> | |
| {card_html} | |
| </div> | |
| </div> | |
| <script> | |
| /* ━━ NAV ━━ */ | |
| function goHome() {{ window.location.href='?action=go_home'; }} | |
| function goSignup(){{ setTimeout(function(){{window.location.href='?action=go_signup';}},50); }} | |
| function goLogin() {{ setTimeout(function(){{window.location.href='?action=go_login';}},50); }} | |
| /* ━━ SHAKE ━━ */ | |
| function shake(el){{ | |
| el.animate([ | |
| {{transform:'translateX(0)'}},{{transform:'translateX(-8px)'}}, | |
| {{transform:'translateX(8px)'}},{{transform:'translateX(-5px)'}}, | |
| {{transform:'translateX(5px)'}},{{transform:'translateX(0)'}} | |
| ],{{duration:420,easing:'ease-in-out'}}); | |
| }} | |
| /* ━━ LOADING ━━ */ | |
| function btnLoad(btn){{btn.disabled=true;btn.classList.add('loading');}} | |
| /* ━━ LOGIN FORM ━━ */ | |
| var fL=document.getElementById('fLogin'); | |
| if(fL) fL.addEventListener('submit',function(e){{ | |
| e.preventDefault(); | |
| var u=document.getElementById('li_u').value.trim(); | |
| var p=document.getElementById('li_p').value; | |
| if(!u||!p){{shake(fL);return;}} | |
| btnLoad(fL.querySelector('.btn-main')); | |
| setTimeout(function(){{ | |
| window.location.href='?action=login&u='+encodeURIComponent(u)+'&p='+encodeURIComponent(p); | |
| }},120); | |
| }}); | |
| /* ━━ SIGNUP FORM ━━ */ | |
| var fS=document.getElementById('fSignup'); | |
| if(fS) fS.addEventListener('submit',function(e){{ | |
| e.preventDefault(); | |
| var u=document.getElementById('su_u').value.trim(); | |
| var em=document.getElementById('su_e').value.trim(); | |
| var p=document.getElementById('su_p').value; | |
| var p2=document.getElementById('su_p2').value; | |
| if(!u||!em||!p||!p2){{shake(fS);return;}} | |
| if(p!==p2){{shake(fS);return;}} | |
| btnLoad(fS.querySelector('.btn-main')); | |
| setTimeout(function(){{ | |
| window.location.href='?action=send_otp&u='+encodeURIComponent(u)+'&e='+encodeURIComponent(em)+'&p='+encodeURIComponent(p)+'&p2='+encodeURIComponent(p2); | |
| }},120); | |
| }}); | |
| /* ━━ OTP FORM ━━ */ | |
| var fO=document.getElementById('fOtp'); | |
| if(fO) fO.addEventListener('submit',function(e){{ | |
| e.preventDefault(); | |
| var otp=document.getElementById('otp_val').value.trim(); | |
| if(!otp||otp.length<6){{shake(fO);return;}} | |
| btnLoad(fO.querySelector('.btn-main')); | |
| var hu=document.getElementById('h_u').value; | |
| var he=document.getElementById('h_e').value; | |
| var hp=document.getElementById('h_p').value; | |
| setTimeout(function(){{ | |
| window.location.href='?action=verify_otp&otp='+encodeURIComponent(otp)+'&u='+encodeURIComponent(hu)+'&e='+encodeURIComponent(he)+'&p='+encodeURIComponent(hp); | |
| }},120); | |
| }}); | |
| /* OTP auto-submit */ | |
| var otpEl=document.getElementById('otp_val'); | |
| if(otpEl) otpEl.addEventListener('input',function(){{ | |
| this.value=this.value.replace(/[^0-9]/g,''); | |
| if(this.value.length===6){{ | |
| setTimeout(function(){{var b=document.querySelector('#fOtp .btn-main');if(b&&!b.disabled)b.click();}},350); | |
| }} | |
| }}); | |
| var bb=document.getElementById('backBtn'); | |
| if(bb) bb.addEventListener('click',function(){{window.location.href='?action=go_back';}}); | |
| /* ━━ MAGNETIC HOVER + DEPTH TILT on tiles ━━ */ | |
| (function(){{ | |
| var tiles=[],centres=[],mx=innerWidth/2,my=innerHeight/2,raf=null,R=260,P=26; | |
| function init(){{ | |
| tiles=Array.from(document.querySelectorAll('.tile')); | |
| if(!tiles.length){{setTimeout(init,300);return;}} | |
| cache(); | |
| addEventListener('resize',cache,{{passive:true}}); | |
| document.addEventListener('mousemove',function(e){{ | |
| mx=e.clientX;my=e.clientY; | |
| if(!raf)raf=requestAnimationFrame(tick); | |
| }},{{passive:true}}); | |
| tiles.forEach(function(t){{ | |
| t.addEventListener('click',function(){{ | |
| var el=this;el.style.animationPlayState='paused'; | |
| el.animate([ | |
| {{transform:'scale(1.22)',filter:'brightness(2.4) saturate(2.2)'}}, | |
| {{transform:'scale(0.88)',filter:'brightness(0.9)'}}, | |
| {{transform:'scale(1.07)',filter:'brightness(1.4)'}}, | |
| {{transform:'scale(1)',filter:'brightness(1)'}} | |
| ],{{duration:500,easing:'cubic-bezier(.34,1.56,.64,1)'}}).onfinish=function(){{el.style.animationPlayState='';}}; | |
| }}); | |
| }}); | |
| }} | |
| function cache(){{ | |
| centres=tiles.map(function(t){{ | |
| var r=t.getBoundingClientRect(); | |
| return{{x:r.left+r.width*.5,y:r.top+r.height*.5,el:t,w:r.width,h:r.height}}; | |
| }}); | |
| }} | |
| function tick(){{ | |
| raf=null; | |
| centres.forEach(function(c){{ | |
| var dx=mx-c.x,dy=my-c.y,d=Math.sqrt(dx*dx+dy*dy); | |
| if(d<R&&d>0){{ | |
| var s=(1-d/R),mag=s*s*P; | |
| var tiltX=(dy/c.h*s*14).toFixed(2),tiltY=(-dx/c.w*s*14).toFixed(2); | |
| var tx=(-(dx/d)*mag).toFixed(2),ty=(-(dy/d)*mag).toFixed(2); | |
| c.el.style.transform='translate('+tx+'px,'+ty+'px) perspective(280px) rotateX('+tiltX+'deg) rotateY('+tiltY+'deg) scale('+(1+s*.16)+')'; | |
| c.el.style.filter='brightness('+(1+s*.8)+') saturate('+(1+s*.7)+')'; | |
| c.el.style.opacity=(0.48+s*.55)+''; | |
| c.el.style.animationPlayState='paused'; | |
| if(s>0.52)c.el.classList.add('lit');else c.el.classList.remove('lit'); | |
| }}else{{ | |
| c.el.style.transform=c.el.style.filter=c.el.style.opacity=''; | |
| c.el.style.animationPlayState='';c.el.classList.remove('lit'); | |
| }} | |
| }}); | |
| }} | |
| setTimeout(init,300); | |
| }})(); | |
| document.querySelectorAll(".faq-question").forEach(function(q){{ | |
| q.addEventListener("click", function(){{ | |
| const item = this.parentElement; | |
| document.querySelectorAll(".faq-item").forEach(function(el){{ | |
| if(el !== item){{ | |
| el.classList.remove("active"); | |
| }} | |
| }}); | |
| item.classList.toggle("active"); | |
| }}); | |
| }}); | |
| </script> | |
| </body> | |
| </html>""" | |
| components.html(HTML, height=900, scrolling=False) |