| import streamlit as st |
| from auth_token import login, initiate_signup, complete_signup, STARTUP_WARNINGS |
|
|
| |
| if STARTUP_WARNINGS and not __import__('streamlit').session_state.get('_warnings_shown'): |
| for _w in STARTUP_WARNINGS: |
| __import__('streamlit').session_state['_startup_warning'] = _w |
| __import__('streamlit').session_state['_warnings_shown'] = True |
| import streamlit.components.v1 as components |
| import os |
|
|
| st.set_page_config(page_title="FitPlan Pro", page_icon="⚡", layout="wide") |
|
|
| |
| if st.session_state.get("logged_in"): |
| |
| st.switch_page("pages/1_Profile.py") |
|
|
| |
| for k, v in [("page_mode","landing"),("signup_step","form"),("pending_signup",{})]: |
| if k not in st.session_state: |
| st.session_state[k] = v |
|
|
| |
| 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) |
|
|
| |
| |
| |
| params = st.query_params |
| action = params.get("action", "") |
|
|
| |
| 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() |
| |
| _db_err = None |
| try: |
| import traceback as _tb |
| from utils.db import get_user_profile, get_active_plan |
| |
| prof = get_user_profile(real_username) |
| if prof: |
| st.session_state.user_data = prof |
| |
| existing = get_active_plan(real_username) |
| if existing and existing.get("days") and len(existing["days"]) > 0: |
| structured = [] |
| for d in existing["days"]: |
| |
| structured.append({ |
| "day": int(d.get("day_number", 1)), |
| "is_rest_day": bool(d.get("is_rest_day", False)), |
| "muscle_group": str(d.get("muscle_group") or "Full Body"), |
| "workout": d.get("workout_json") or [], |
| "dietary": d.get("dietary_json") or {}, |
| "pre_stretch": d.get("pre_stretch_json") or [], |
| "post_stretch": d.get("post_stretch_json") or [], |
| }) |
| structured.sort(key=lambda x: x["day"]) |
| st.session_state.structured_days = structured |
| st.session_state.full_plan_data = structured |
| st.session_state.dietary_type = existing.get("dietary_type", "veg") |
| st.session_state.plan_id = existing.get("plan_id", "") |
| st.session_state.plan_start = existing.get("created_at_date", "") |
| st.session_state.plan_duration = len(structured) |
| st.session_state.workout_plan = "\n".join([ |
| f"## Day {d['day']} - {d['muscle_group']}" for d in structured |
| ]) |
| st.session_state._plan_checked = True |
| st.session_state._db_loaded_dash = True |
| |
| st.switch_page("pages/2_Dashboard.py") |
| except Exception as _e: |
| _db_err = str(_e) |
| import traceback; traceback.print_exc() |
| |
| st.session_state._plan_checked = True |
| if _db_err: |
| st.session_state._login_db_err = _db_err |
| st.switch_page("pages/1_Profile.py") |
| else: |
| st.session_state.login_error = msg |
| st.query_params.clear(); st.rerun() |
|
|
| |
| 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() |
|
|
| |
| 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() |
|
|
| |
| 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() |
|
|
| |
| 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" |
| is_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 — OTP email disabled, 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_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)) |
|
|
| |
| |
| |
| landing_html = ( |
| "<div class=\'lhero\'>" |
| "<div class=\'lhero-eyebrow\'>⚡ AI-POWERED FITNESS</div>" |
| "<div class=\'lhero-title\'>TRAIN<br><em>SMARTER.</em><br>NOT HARDER.</div>" |
| "<div class=\'lhero-sub\'>" |
| "Your personalised workout + diet plan — generated by AI,<br>" |
| "tailored to your body, goals, and fitness level." |
| "</div>" |
| "<div class=\'lhero-feats\'>" |
| "<div class=\'feat\'><span>💪</span><span>Personalised Workouts</span></div>" |
| "<div class=\'feat\'><span>🥗</span><span>AI Diet Plans</span></div>" |
| "<div class=\'feat\'><span>📊</span><span>Progress Tracking</span></div>" |
| "<div class=\'feat\'><span>🔥</span><span>Streak System</span></div>" |
| "</div>" |
| "<button class=\'btn-main btn-hero\' onclick=\'goGetStarted()\'>Get Started Free →</button>" |
| "<div class=\'lhero-signin\'>Already a member? " |
| "<a onclick=\'goLogin()\'>Sign in</a></div>" |
| "</div>" |
| ) |
|
|
| |
| |
| |
| if not is_signup: |
| |
| card_html = ( |
| "<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">Sign In</button> |
| </form> |
| <div class="legal" style="margin-top:16px">Your data is encrypted and never shared with third parties.</div>""" |
| ) |
|
|
| elif signup_step == "otp": |
| |
| card_html = ( |
| "<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">Verify & Create Account</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-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">Send Verification Code</button> |
| </form> |
| <div class="switch-row">Already a member? <a onclick="goLogin()">Sign in.</a></div>""" |
| ) |
|
|
| |
| |
| |
| if is_landing: |
| page_content = landing_html |
| else: |
| page_content = f"<div class='card'>{card_html}</div>" |
|
|
| 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&display=swap" rel="stylesheet"> |
| <style> |
| :root{{ |
| --red:#E50914;--red-h:#f40612; |
| --white:#fff; |
| --ease:cubic-bezier(0.22,1,0.36,1); |
| --spring:cubic-bezier(0.34,1.56,0.64,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 — full screen grid behind everything ━━ */ |
| .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(900px) rotateX(4deg) rotateZ(-5deg) scale(1.45); |
| animation:mosaic-pan 50s linear infinite alternate; |
| }} |
| @keyframes mosaic-pan{{ |
| 0% {{transform:perspective(900px) rotateX(4deg) rotateZ(-5deg) scale(1.45) translate(0,0);}} |
| 100%{{transform:perspective(900px) rotateX(4deg) rotateZ(-5deg) scale(1.45) translate(-4%,5%);}} |
| }} |
| .tile{{ |
| position:relative;display:flex;flex-direction:column; |
| align-items:center;justify-content:center;gap:6px; |
| border-radius:6px;overflow:hidden; |
| animation:tile-breathe ease-in-out infinite alternate; |
| cursor:default;user-select:none; |
| transition:transform 0.25s var(--spring),filter 0.25s,box-shadow 0.25s; |
| }} |
| @keyframes tile-breathe{{ |
| from{{opacity:0.42;filter:brightness(0.60) saturate(0.7);}} |
| to {{opacity:0.78;filter:brightness(1.10) saturate(1.20);}} |
| }} |
| .tile::after{{ |
| content:'';position:absolute;inset:0; |
| background:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0) 100%); |
| animation:tile-shimmer 7s ease-in-out infinite;animation-delay:inherit; |
| }} |
| @keyframes tile-shimmer{{0%,100%{{opacity:0;}}50%{{opacity:1;}}}} |
| .tile-label{{ |
| font-family:'Bebas Neue',sans-serif; |
| font-size:clamp(0.32rem,0.58vw,0.50rem); |
| letter-spacing:3px;position:relative;z-index:2; |
| }} |
| .tile svg{{position:relative;z-index:2;}} |
| /* Staggered breathe */ |
| .tile:nth-child(3n+1){{animation-duration:3.4s;animation-delay:0s;}} |
| .tile:nth-child(3n+2){{animation-duration:4.2s;animation-delay:0.9s;}} |
| .tile:nth-child(3n) {{animation-duration:3.8s;animation-delay:1.6s;}} |
| /* Magnetic hover */ |
| .tile:hover{{ |
| animation:none!important; |
| opacity:1!important; |
| transform:scale(1.18) translateY(-6px)!important; |
| filter:brightness(1.8) saturate(2.2)!important; |
| box-shadow:0 0 36px rgba(229,9,20,0.65),0 0 16px currentColor,0 14px 44px rgba(0,0,0,0.7)!important; |
| z-index:5; |
| }} |
| |
| /* ━━ OVERLAY — radial vignette so tiles show through but text is readable ━━ */ |
| .overlay{{ |
| position:fixed;inset:0;z-index:1;pointer-events:none; |
| background: |
| radial-gradient(ellipse 80% 70% at 50% 50%,rgba(8,8,16,0.10) 0%,rgba(8,8,16,0.60) 65%,rgba(8,8,16,0.92) 100%), |
| linear-gradient(to bottom,rgba(8,8,16,0.60) 0%,rgba(8,8,16,0) 15%,rgba(8,8,16,0) 82%,rgba(8,8,16,0.75) 100%); |
| }} |
| |
| /* ━━ LOGO ━━ */ |
| .site-logo{{ |
| position:fixed;top:28px;left:36px;z-index:10; |
| font-family:'Bebas Neue',sans-serif; |
| font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:4px; |
| color:var(--red);text-shadow:0 0 30px rgba(229,9,20,0.5); |
| animation:logo-in 0.8s var(--ease) 0.2s both; |
| }} |
| @keyframes logo-in{{from{{opacity:0;transform:translateX(-20px)}}to{{opacity:1;transform:none}}}} |
| |
| /* ━━ CARD ━━ */ |
| .page{{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;}} |
| .card{{ |
| width:100%;max-width:450px; |
| background:rgba(12,10,28,0.88); |
| border-radius:8px; |
| padding:clamp(32px,5vw,52px) clamp(28px,5vw,64px); |
| box-shadow:0 8px 48px rgba(0,0,0,0.75),0 0 0 1px rgba(140,100,255,0.06); |
| border:1px solid rgba(180,150,255,0.10); |
| backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); |
| animation:card-in 0.7s var(--ease) 0.1s both; |
| flex-shrink:0; |
| }} |
| @keyframes card-in{{from{{opacity:0;transform:translateY(24px)}}to{{opacity:1;transform:none}}}} |
| .card-title{{ |
| font-family:'Bebas Neue',sans-serif; |
| font-size:clamp(1.8rem,3.5vw,2.4rem); |
| letter-spacing:1px;color:var(--white);margin-bottom:24px; |
| }} |
| |
| /* ━━ FLOATING LABEL INPUTS ━━ */ |
| .f{{margin-bottom:14px;position:relative;}} |
| .f input{{ |
| width:100%;height:52px;padding:22px 16px 8px; |
| background:rgba(255,255,255,0.09); |
| border:1.5px solid rgba(255,255,255,0.18); |
| border-radius:4px;font-family:'DM Sans',sans-serif; |
| font-size:1rem;color:#fff;outline:none; |
| transition:background .2s,border-color .2s,box-shadow .2s; |
| -webkit-appearance:none;caret-color:#fff; |
| }} |
| .f input::placeholder{{color:transparent;}} |
| .f label{{ |
| position:absolute;left:16px;top:50%;transform:translateY(-50%); |
| font-size:0.88rem;font-weight:400;color:rgba(255,255,255,0.52); |
| pointer-events:none;transition:all 0.2s var(--ease); |
| }} |
| .f input:focus+label, |
| .f input:not(:placeholder-shown)+label{{ |
| top:10px;transform:none;font-size:0.66rem; |
| letter-spacing:0.8px;text-transform:uppercase; |
| color:rgba(255,255,255,0.65);font-weight:600; |
| }} |
| .f input:focus{{ |
| background:rgba(255,255,255,0.13); |
| border-color:rgba(255,255,255,0.7); |
| box-shadow:0 0 0 2px rgba(255,255,255,0.06); |
| }} |
| /* OTP input */ |
| .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); |
| caret-color:var(--red); |
| }} |
| .f input.otp:focus{{border-color:var(--red);background:rgba(229,9,20,0.09);box-shadow:0 0 0 2px rgba(229,9,20,0.15);}} |
| |
| /* ━━ BUTTON ━━ */ |
| .btn-main{{ |
| width:100%;height:52px;background:var(--red);border:none;border-radius:4px; |
| font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700; |
| letter-spacing:0.5px;color:#fff;cursor:pointer; |
| position:relative;overflow:hidden; |
| transition:background .2s,transform .15s,box-shadow .2s; |
| margin-top:8px;box-shadow:0 2px 12px rgba(229,9,20,0.35); |
| }} |
| .btn-main::before{{ |
| content:'';position:absolute;top:0;bottom:0;left:-80%;width:50%; |
| background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent); |
| transform:skewX(-15deg);transition:left .5s var(--ease); |
| }} |
| .btn-main:hover{{background:var(--red-h);transform:translateY(-1px);box-shadow:0 4px 22px rgba(229,9,20,0.5);}} |
| .btn-main:hover::before{{left:130%;}} |
| .btn-main:active{{transform:translateY(0);}} |
| .btn-main:disabled{{opacity:0.55;cursor:not-allowed;transform:none;box-shadow:none;}} |
| |
| /* ━━ OR / switch / forgot ━━ */ |
| .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.15);}} |
| .or-row span{{font-size:0.78rem;color:rgba(255,255,255,0.4);letter-spacing:1px;}} |
| .switch-row{{margin-top:18px;font-size:0.88rem;color:rgba(255,255,255,0.5);text-align:center;}} |
| .switch-row a{{color:#fff;font-weight:600;cursor:pointer;text-decoration:none;}} |
| .switch-row a:hover{{text-decoration:underline;}} |
| .legal{{font-size:0.65rem;color:rgba(255,255,255,0.22);margin-top:14px;line-height:1.7;}} |
| |
| /* ━━ MESSAGES ━━ */ |
| .msg{{ |
| display:flex;align-items:flex-start;gap:7px; |
| padding:10px 13px;border-radius:4px; |
| font-size:0.8rem;font-weight:500;margin-bottom:14px; |
| line-height:1.5;animation:msg-in 0.35s var(--spring) both; |
| }} |
| @keyframes msg-in{{from{{opacity:0;transform:translateY(-5px)}}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 BADGE ━━ */ |
| .otp-info{{ |
| background:rgba(229,9,20,0.07);border:1px solid rgba(229,9,20,0.2); |
| border-radius:6px;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);}} |
| |
| |
| /* ━━ LANDING HERO ━━ */ |
| .lhero{{ |
| position:relative;z-index:10;max-width:700px; |
| text-align:center;padding:20px 10px; |
| margin:0 auto; |
| }} |
| .lhero-eyebrow{{ |
| font-size:clamp(0.60rem,1.2vw,0.75rem);font-weight:700;letter-spacing:5px; |
| text-transform:uppercase;color:var(--red);margin-bottom:16px; |
| animation:logo-in 0.6s var(--ease) 0.1s both; |
| }} |
| .lhero-title{{ |
| font-family:'Bebas Neue',sans-serif; |
| font-size:clamp(4rem,11vw,8.5rem); |
| letter-spacing:2px;line-height:0.9; |
| color:#fff;margin-bottom:24px; |
| text-shadow:0 4px 40px rgba(0,0,0,0.8); |
| animation:card-in 0.8s var(--ease) 0.2s both; |
| }} |
| .lhero-title em{{ |
| color:var(--red);font-style:normal; |
| text-shadow:0 0 60px rgba(229,9,20,0.65),0 4px 40px rgba(0,0,0,0.8); |
| }} |
| .lhero-sub{{ |
| font-size:clamp(0.88rem,1.8vw,1.05rem); |
| color:rgba(255,255,255,0.52);font-weight:300; |
| line-height:1.75;margin-bottom:30px; |
| animation:card-in 0.8s var(--ease) 0.35s both; |
| }} |
| .lhero-feats{{ |
| display:flex;justify-content:center;flex-wrap:wrap; |
| gap:10px;margin-bottom:34px; |
| animation:card-in 0.8s var(--ease) 0.45s both; |
| }} |
| .feat{{ |
| display:flex;align-items:center;gap:7px; |
| background:rgba(255,255,255,0.06); |
| border:1px solid rgba(255,255,255,0.10); |
| border-radius:100px;padding:8px 16px; |
| font-size:0.80rem;color:rgba(255,255,255,0.75);font-weight:500; |
| }} |
| .btn-hero{{ |
| width:auto!important;min-width:220px;height:58px; |
| font-size:1.05rem!important;letter-spacing:1px; |
| padding:0 36px!important;border-radius:6px; |
| animation:card-in 0.8s var(--ease) 0.55s both; |
| box-shadow:0 0 40px rgba(229,9,20,0.45),0 4px 24px rgba(229,9,20,0.30)!important; |
| }} |
| .btn-hero:hover{{ |
| box-shadow:0 0 60px rgba(229,9,20,0.70),0 8px 32px rgba(229,9,20,0.50)!important; |
| }} |
| .lhero-signin{{ |
| margin-top:20px;font-size:0.88rem; |
| color:rgba(255,255,255,0.38); |
| animation:card-in 0.8s var(--ease) 0.65s both; |
| }} |
| .lhero-signin a{{ |
| color:rgba(255,255,255,0.80);font-weight:600;cursor:pointer; |
| text-decoration:underline;text-underline-offset:3px; |
| }} |
| |
| /* ━━ MOBILE ━━ */ |
| @media(max-width:480px){{ |
| .site-logo{{top:18px;left:20px;font-size:1.6rem;}} |
| .card{{padding:32px 22px;border-radius:6px;max-width:100%;}} |
| .mosaic{{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(8,1fr);}} |
| }} |
| </style> |
| </head> |
| <body> |
| |
| <div class="mosaic">{tiles_html}</div> |
| <div class="overlay"></div> |
| <div class="site-logo">⚡ FitPlan Pro</div> |
| |
| <div class="page"> |
| {page_content} |
| </div> |
| |
| <script> |
| function goSignup(){{setTimeout(function(){{window.location.href='?action=go_signup';}},50);}} |
| function goLogin() {{setTimeout(function(){{window.location.href='?action=go_login';}},50);}} |
| function goGetStarted(){{setTimeout(function(){{window.location.href='?action=go_signup';}},50);}} |
| function goHome(){{setTimeout(function(){{window.location.href='?action=go_home';}},50);}} |
| |
| function shake(el){{ |
| el.animate([ |
| {{transform:'translateX(0)'}},{{transform:'translateX(-7px)'}}, |
| {{transform:'translateX(7px)'}},{{transform:'translateX(-4px)'}}, |
| {{transform:'translateX(4px)'}},{{transform:'translateX(0)'}} |
| ],{{duration:400,easing:'ease-in-out'}}); |
| }} |
| |
| /* ━━ MAGNETIC HOVER + CLICK BOUNCE ━━ */ |
| (function(){{ |
| var tiles=[],centres=[],mx=innerWidth/2,my=innerHeight/2,raf=null,R=220,P=22; |
| 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.2) saturate(2)'}}, |
| {{transform:'scale(0.86)',filter:'brightness(0.9)'}}, |
| {{transform:'scale(1.06)',filter:'brightness(1.35)'}}, |
| {{transform:'scale(1)', filter:'brightness(1)'}} |
| ],{{duration:480,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}}; |
| }}); |
| }} |
| 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; |
| c.el.style.transform='translate('+(-(dx/d)*mag)+'px,'+(-(dy/d)*mag)+'px) scale('+(1+s*.13)+')'; |
| c.el.style.filter='brightness('+(1+s*.65)+') saturate('+(1+s*.55)+')'; |
| c.el.style.opacity=(0.5+s*.5)+''; |
| c.el.style.animationPlayState='paused'; |
| }}else{{ |
| c.el.style.transform=c.el.style.filter=c.el.style.opacity=''; |
| c.el.style.animationPlayState=''; |
| }} |
| }}); |
| }} |
| setTimeout(init,300); |
| }})(); |
| |
| /* ━━ 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;}} |
| var b=fL.querySelector('.btn-main');b.disabled=true;b.textContent='Signing in\u2026'; |
| window.location.href='?action=login&u='+encodeURIComponent(u)+'&p='+encodeURIComponent(p); |
| }}); |
| |
| /* ━━ 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;}} |
| var b=fS.querySelector('.btn-main');b.disabled=true;b.textContent='Sending code\u2026'; |
| window.location.href='?action=send_otp&u='+encodeURIComponent(u)+'&e='+encodeURIComponent(em)+'&p='+encodeURIComponent(p)+'&p2='+encodeURIComponent(p2); |
| }}); |
| |
| /* ━━ 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;}} |
| var b=fO.querySelector('.btn-main');b.disabled=true;b.textContent='Verifying\u2026'; |
| var hu=document.getElementById('h_u').value; |
| var he=document.getElementById('h_e').value; |
| var hp=document.getElementById('h_p').value; |
| window.location.href='?action=verify_otp&otp='+encodeURIComponent(otp) |
| +'&u='+encodeURIComponent(hu)+'&e='+encodeURIComponent(he)+'&p='+encodeURIComponent(hp); |
| }}); |
| |
| /* OTP auto-submit at 6 digits */ |
| 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';}}); |
| </script> |
| </body> |
| </html>""" |
|
|
| components.html(HTML, height=900, scrolling=False) |
