// PROVE web app — all pages. // Design system: dark bg, coral accent, JetBrains Mono numbers, surface cards. const { useState: useStateW, useEffect: useEffectW, useMemo: useMemoW } = React; // ──────────────────────────────────────────────────────────────────────── // ICONS // ──────────────────────────────────────────────────────────────────────── const Icon = { feed: (p) => , compass: (p) => , trophy: (p) => , bell: (p) => , user: (p) => , bolt: (p) => , coin: (p) => , shield: (p) => , flame: (p) => , gear: (p) => , search: (p) => , rooms: (p) => , plus: (p) => , chevronR:(p) => , chevronL:(p) => , x: (p) => , check: (p) => , share: (p) => , chat: (p) => , lock: (p) => , apple: (p) => , camera: (p) => , cameraBig:(p) => , envelope:(p) => , wifiOff: (p) => , vault: (p) => , star: (p) => , upload: (p) => , }; function iconBase({ size = 18, stroke = 'currentColor', fill = 'none', strokeWidth = 1.6 }) { return { width: size, height: size, viewBox: '0 0 24 24', fill, stroke, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }; } // ──────────────────────────────────────────────────────────────────────── // SIDEBAR — 240px, premium spacing // ──────────────────────────────────────────────────────────────────────── function Sidebar({ active = 'feed', windowState = 'open' }) { const items = [ { id: 'feed', label: 'Feed', icon: 'feed', hash: '/feed' }, { id: 'explore', label: 'Explore', icon: 'compass', hash: '/explore' }, { id: 'leaderboard', label: 'Leaderboard', icon: 'trophy', hash: '/leaderboard' }, { id: 'notifications', label: 'Notifications', icon: 'bell', hash: '/notifications', dot: true }, { id: 'activity', label: 'Activity', icon: 'bolt', hash: '/activity' }, { id: 'rooms', label: 'Rooms', icon: 'rooms', hash: '/rooms' }, { id: 'profile', label: 'Profile', icon: 'user', hash: '/profile' }, ]; return (

); } function SideItem({ item, active }) { return ( ); } function StatTile({ icon, label, value, color }) { return (

{Icon[icon]({ size: 12, stroke: color })} {label}

{value}

); } function Day1MiniPill() { return ( Day 1 ); } // ──────────────────────────────────────────────────────────────────────── // MOBILE BOTTOM TAB BAR — 64px (+ safe-area) // ──────────────────────────────────────────────────────────────────────── function BottomTabBar({ active = 'feed' }) { const items = [ { id: 'feed', label: 'Feed', icon: 'feed', hash: '/feed' }, { id: 'explore', label: 'Explore', icon: 'compass', hash: '/explore' }, { id: 'rooms', label: 'Rooms', icon: 'rooms', hash: '/rooms' }, { id: 'leaderboard', label: 'Rank', icon: 'trophy', hash: '/leaderboard' }, { id: 'profile', label: 'Profile', icon: 'user', hash: '/profile' }, ]; return (

{items.map((item) => ( ))}

); } // ──────────────────────────────────────────────────────────────────────── // PAGE SHELLS // ──────────────────────────────────────────────────────────────────────── function PageShell({ width = 1280, height = 900, active = 'feed', windowState = 'open', children }) { return (

{children}

); } function PageShellMobile({ width = 390, height = 844, active = 'feed', hideTabBar, children }) { return (

{children} {!hideTabBar && }

); } function StatusBar() { return (

9:41

); } // ──────────────────────────────────────────────────────────────────────── // AUTH SHELL — true center, 440px card // ──────────────────────────────────────────────────────────────────────── function AuthShell({ width = 1280, height = 900, children }) { return (

{/* Giant watermark PROVE behind the card */}

PROVE

{children}

); } // ──────────────────────────────────────────────────────────────────────── // FORM PRIMITIVES // ──────────────────────────────────────────────────────────────────────── function FormField({ label, type = 'text', value, placeholder, onChange, hint, suffix, rightHint, error }) { const [focus, setFocus] = useStateW(false); return (

{label} {rightHint}

onChange && onChange(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={{ width: '100%', height: 48, padding: '0 16px', paddingRight: suffix ? 44 : 16, background: focus ? 'rgba(255,97,85,0.05)' : 'var(--surface)', border: `1px solid ${focus || error ? 'var(--coral)' : 'var(--border)'}`, borderRadius: 16, color: '#fff', fontFamily: 'inherit', fontSize: 14, outline: 'none', transition: 'border-color 0.12s, background 0.12s', boxSizing: 'border-box', }} /> {suffix && (

{suffix}

)}

{hint &&

{hint}

}

); } function CoralButton({ children, full, onClick, size = 'md', icon }) { const h = size === 'lg' ? 52 : size === 'sm' ? 36 : 44; const fs = size === 'lg' ? 14 : 13; return ( ); } function GhostButton({ children, full, onClick, size = 'md', icon, danger }) { const h = size === 'lg' ? 52 : size === 'sm' ? 36 : 44; const fs = size === 'lg' ? 14 : 13; return ( ); } function AppleButton({ full, label = 'Continue with Apple' }) { return ( ); } function OrDivider({ label = 'or' }) { return (

{label}

); } // ──────────────────────────────────────────────────────────────────────── // FILTER TABS — pill style (active = coral, inactive = ghost) // ──────────────────────────────────────────────────────────────────────── function FilterTabs({ tabs, value, onChange, size = 'md', actions }) { const h = size === 'sm' ? 32 : 38; const fs = size === 'sm' ? 12 : 13; return (

{tabs.map((t) => ( ))} {actions &&

{actions}

}

); } // ──────────────────────────────────────────────────────────────────────── // PROOF CARD — premium card, 16px radius, 20px padding // 42px Back/Doubt buttons aligned identically // ──────────────────────────────────────────────────────────────────────── function ProofCard({ proof, onBack, onDoubt, onComment, onShare, onClick, compact, hero }) { const D = window.PROVE_DATA; const u = D.byHandle[proof.user]; const h = D.habits[proof.habit]; const aspect = hero ? '21/9' : '16/9'; const captionSize = hero ? 18 : 15; const btnHeight = hero ? 52 : 42; const btnFs = hero ? 14 : 13; const oddsHeight = hero ? 12 : 8; const dayHigh = proof.day >= 30; const defaultOpen = () => (window.location.hash = '/proof/' + proof.id); return (

{ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.14)'; e.currentTarget.style.transform = 'translateY(-3px)'; if (!hero) e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'; e.currentTarget.style.transform = ''; if (!hero) e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04) inset'; }} > {/* Video thumbnail */}

{/* Bottom gradient overlay for readability */}

{/* Habit pill (or FEATURED on hero) */}

{hero && ★ Featured ·} {h.label}

{/* Day pill — coral tint for day >= 30 */}

day {proof.day}

{/* User row */}

{u.handle}

{/* Body */}

{proof.caption}

posted 2h ago · inside PROVE Window

{ e.stopPropagation(); onBack && onBack(); }} /> { e.stopPropagation(); onDoubt && onDoubt(); }} />

); } function ProofCardBtn({ variant, amount, onClick, height = 42, fs = 13 }) { const isBack = variant === 'back'; return ( ); } const metaBtnStyle = { display: 'inline-flex', alignItems: 'center', gap: 6, background: 'transparent', border: 'none', cursor: 'pointer', color: 'inherit', fontFamily: 'inherit', padding: 0, }; // ──────────────────────────────────────────────────────────────────────── // EMPTY STATE — coral icon, heading, sub, CTA // ──────────────────────────────────────────────────────────────────────── function EmptyState({ icon, title, body, primary, secondary, color = 'var(--coral)' }) { return (

{Icon[icon]({ size: 48, stroke: color, strokeWidth: 1.6 })}

{title}

{body}

{primary && {primary.label}} {secondary && {secondary.label}}

); } const pageTitleStyle = { fontFamily: 'var(--display)', fontSize: 36, fontWeight: 800, letterSpacing: '-0.04em', margin: 0, textTransform: 'uppercase', color: '#fff', lineHeight: 0.92, }; function PageHeader({ section, title, sub, actions, children, accent }) { // Split title to italicize last word (magazine headline style) const words = String(title).split(' '); const last = words.pop(); const lead = words.join(' '); return (

{section}

{lead && {lead} } {last}

{sub &&

{sub}

}

{actions}

{children}

); } const sectionLabelStyle = { fontSize: 11, fontWeight: 500, letterSpacing: 0.12 + 'em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'var(--mono)', }; // ──────────────────────────────────────────────────────────────────────── // LEADERBOARD ROW (rank 4+) // ──────────────────────────────────────────────────────────────────────── function LeaderRow({ row, compact = false }) { const D = window.PROVE_DATA; const u = D.byHandle[row.user]; const h = D.habits[row.cat]; const isCurrentUser = row.user === 'maya.k'; const evenTint = row.rank % 2 === 0 ? 'rgba(255,255,255,0.01)' : 'transparent'; const bg = isCurrentUser ? 'rgba(255,97,85,0.04)' : evenTint; const bordLeft = isCurrentUser ? '2px solid var(--coral)' : '2px solid transparent'; if (compact) { return (

{String(row.rank).padStart(2, '0')}

{u.handle}

{h.label}

{row.streak}d

); } return (

{ if (!isCurrentUser) e.currentTarget.style.background = 'rgba(255,255,255,0.03)'; }} onMouseLeave={(e) => { if (!isCurrentUser) e.currentTarget.style.background = evenTint; }} > {String(row.rank).padStart(2, '0')}

{u.handle} {isCurrentUser && you}

{u.name} ·

{row.streak}d

{row.backers}

{Icon.coin({ size: 13, stroke: 'var(--coral)' })} {row.coins.toLocaleString()}

); } // ──────────────────────────────────────────────────────────────────────── // LEADERBOARD PODIUM (rank 1–3) // ──────────────────────────────────────────────────────────────────────── function LeaderPodium({ rows }) { const D = window.PROVE_DATA; const order = [rows[1], rows[0], rows[2]]; return (

{order.map((row) => { if (!row) return null; const u = D.byHandle[row.user]; const h = D.habits[row.cat]; const isFirst = row.rank === 1; const isSecond = row.rank === 2; const borderColor = row.rank === 1 ? 'rgba(255,97,85,0.5)' : row.rank === 2 ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.1)'; const watermarkColor = row.rank === 1 ? 'rgba(255,97,85,0.18)' : 'rgba(255,255,255,0.05)'; return (

{/* Crown for #1 */} {isFirst && (

★ Champion

)} {/* Big rank watermark */} {String(row.rank).padStart(2, '0')}

{u.handle}

{/* HERO STREAK NUMBER — the visual anchor */}

{row.streak}d

day streak · {(row.rep / 1000).toFixed(1)}K rep

); })}

); } // FEED PAGE (desktop) — including empty + window-closed variants // ──────────────────────────────────────────────────────────────────────── function FeedPage({ width = 1280, height = 900, windowState = 'closing', variant = 'normal' }) { const [tab, setTab] = useStateW(variant === 'empty' ? 'following' : 'all'); const [modal, setModal] = useStateW(null); // {type, proof} const [stakes, setStakes] = useStateW({}); const D = window.PROVE_DATA; const tabs = [ { id: 'following', label: 'Following', count: variant === 'empty' ? 0 : 3 }, { id: 'all', label: 'All', count: 12 }, { id: 'trending', label: 'Trending', count: 8 }, ]; const enrich = (p) => ({ ...p, back: p.back + ((stakes[p.id] || {}).back || 0), doubt: p.doubt + ((stakes[p.id] || {}).doubt || 0), }); const list = tab === 'following' ? D.proofs.slice(0, 3) : tab === 'trending' ? [...D.proofs].sort((a, b) => (b.back + b.doubt) - (a.back + a.doubt)).slice(0, 8) : D.proofs; const isEmpty = variant === 'empty' && tab === 'following'; return (

} /> {isEmpty ? ( setTab('all') }} secondary={{ label: 'Find people', onClick: () => setTab('all') }} /> ) : (

{list.slice(0, 8).map((p, i) => (

setModal({ type: 'stake', proof: enrich(p), side: 'back' })} onDoubt={() => setModal({ type: 'stake', proof: enrich(p), side: 'doubt' })} onComment={() => setModal({ type: 'comments', proof: enrich(p) })} />

))}

)}

setModal(null)} proof={modal?.proof} initialSide={modal?.side} onConfirm={(side, amt) => setStakes((s) => ({ ...s, [modal.proof.id]: { ...(s[modal.proof.id] || {}), [side]: ((s[modal.proof.id] || {})[side] || 0) + amt } }))} /> setModal(null)} proof={modal?.proof} /> ); } // ──────────────────────────────────────────────────────────────────────── // FEED MOBILE // ──────────────────────────────────────────────────────────────────────── function FeedPageMobile({ width = 390, height = 844 }) { const [tab, setTab] = useStateW('all'); const [modal, setModal] = useStateW(null); const D = window.PROVE_DATA; const tabs = [ { id: 'following', label: 'Following' }, { id: 'all', label: 'All' }, { id: 'trending', label: 'Trending' }, ]; return (

{(tab === 'following' ? D.proofs.slice(0, 3) : D.proofs.slice(0, 6)).map((p) => ( setModal({ type: 'stake', proof: p, side: 'back' })} onDoubt={() => setModal({ type: 'stake', proof: p, side: 'doubt' })} onComment={() => setModal({ type: 'comments', proof: p })} /> ))}

setModal(null)} proof={modal?.proof} initialSide={modal?.side} sheet /> setModal(null)} proof={modal?.proof} sheet /> ); } // ──────────────────────────────────────────────────────────────────────── // EXPLORE PAGE // ──────────────────────────────────────────────────────────────────────── function ExplorePage({ width = 1280, height = 900 }) { const [cat, setCat] = useStateW('all'); const D = window.PROVE_DATA; const cats = [{ id: 'all', label: 'All' }, ...Object.entries(D.habits).map(([k, h]) => ({ id: k, label: h.label }))]; const list = cat === 'all' ? D.proofs : D.proofs.filter((p) => p.habit === cat); return (

{/* Category pills */}

{cats.map((c) => ( ))}

{list.slice(0, 8).map((p) => )}

); } function ExplorePageMobile({ width = 390, height = 844 }) { const [cat, setCat] = useStateW('all'); const D = window.PROVE_DATA; const cats = [{ id: 'all', label: 'All' }, ...Object.entries(D.habits).map(([k, h]) => ({ id: k, label: h.label }))]; const list = cat === 'all' ? D.proofs : D.proofs.filter((p) => p.habit === cat); return (

Explore

{cats.map((c) => ( ))}

{list.slice(0, 5).map((p) => )}

); } // ──────────────────────────────────────────────────────────────────────── // LEADERBOARD // ──────────────────────────────────────────────────────────────────────── function LeaderboardPage({ width = 1280, height = 900 }) { const [tab, setTab] = useStateW('weekly'); const D = window.PROVE_DATA; const tabs = [ { id: 'weekly', label: 'Weekly' }, { id: 'alltime', label: 'All-time' }, { id: 'category', label: 'By category' }, ]; const top3 = D.leaderboard.slice(0, 3); const rest = D.leaderboard.slice(3); return (

} /> {/* Header row */}

Rank User Streak REP Backers Coins

{rest.map((row) => )}

); } function LeaderboardPageMobile({ width = 390, height = 844 }) { const D = window.PROVE_DATA; return (

Leaderboard

Ranked by REP. Resets Sundays.

{}} size="sm" />

{D.leaderboard.map((row) => )}

); } // ──────────────────────────────────────────────────────────────────────── // PROFILE (own + public variants) // ──────────────────────────────────────────────────────────────────────── function ProfilePage({ width = 1280, height = 1500, variant = 'own', handle = 'maya.k' }) { const D = window.PROVE_DATA; const u = D.byHandle[handle]; const [following, setFollowing] = useStateW(variant === 'public-following'); const isPublic = variant.startsWith('public'); const stats = [ { v: variant === 'own' ? '47' : '47', l: 'proofs' }, { v: '198', l: 'backers' }, { v: '18,920', l: 'coins' }, { v: '47', l: 'day streak' }, ]; const gridProofs = Array.from({ length: 12 }, (_, i) => D.proofs[i % D.proofs.length]); return (

{/* Hero card */}

{/* Action row in top-right corner */}

{variant === 'own' && (window.location.hash = '/settings')}>Edit} {isPublic && ( following ? setFollowing(false)}>Following : setFollowing(true)}>Follow )}

day streak

{u.handle}

{u.name} \u00b7 Proving since Mar 2026

{/* Stats row with dividers */}

{stats.map((s, i) => (

{s.v}

{s.l}

))}

{/* Proof archive header */}

Proof archive

47 entries \u00b7 0 missed

{/* 3-col proof grid */}

{gridProofs.map((p, i) => (

(window.location.hash = '/proof/' + p.id)} style={{ position: 'relative', cursor: 'pointer', borderRadius: 'var(--radius-card-sm)', overflow: 'hidden', border: '1px solid var(--border)', transition: 'border-color 0.2s ease, transform 0.2s ease', }} onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--border-hi)'; e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = ''; }} >

{D.habits[p.habit].label}

d{47 - i}

{Icon.check({ size: 13, stroke: '#0D0D0D', strokeWidth: 2.4 })}

))}

); } function ProfilePageMobile({ width = 390, height = 844 }) { const D = window.PROVE_DATA; const u = D.byHandle['maya.k']; const grid = Array.from({ length: 9 }, (_, i) => D.proofs[i % D.proofs.length]); return (

{u.handle}

{u.name}

{[{ v: '47', l: 'proofs' }, { v: '198', l: 'backers' }, { v: '18.9K', l: 'coins' }].map((s) => (

{s.v}

{s.l}

))}

{grid.map((p, i) => (

(window.location.hash = '/proof/' + p.id)} style={{ position: 'relative', borderRadius: 4, overflow: 'hidden', cursor: 'pointer' }}>

d{47 - i}

))}

); } // ──────────────────────────────────────────────────────────────────────── // SINGLE PROOF // ──────────────────────────────────────────────────────────────────────── function SingleProofPage({ width = 1280, height = 1100 }) { const D = window.PROVE_DATA; const p = D.proofs[0]; const u = D.byHandle[p.user]; const h = D.habits[p.habit]; const [back, setBack] = useStateW(p.back); const [doubt, setDoubt] = useStateW(p.doubt); const [modal, setModal] = useStateW(null); return (

← Feed / proof / prove.app/p/maya-k-47

{u.handle}

{u.name} · posted 6h ago inside PROVE Window

day {p.day}

{/* video */}

0:14 / 0:32

"{p.caption}"

{/* Stake panel */}

Live stake split {(back + doubt).toLocaleString()} coins · 47 backers

{/* reactions + comments + share */}

{['🔥', '💪', '👀', '⚡'].map((emoji) => ( ))}

{/* sticky banner */}

Want to post your own proof?

Free during beta · iOS + Android

setModal(null)} proof={{ ...p, back, doubt }} initialSide={modal?.side} onConfirm={(side, amt) => { if (side === 'back') setBack((b) => b + amt); else setDoubt((d) => d + amt); }} /> setModal(null)} proof={p} /> setModal(null)} /> ); } function SingleProofPageMobile({ width = 390, height = 844 }) { const D = window.PROVE_DATA; const p = D.proofs[0]; const u = D.byHandle[p.user]; const h = D.habits[p.habit]; const [back, setBack] = useStateW(p.back); const [doubt, setDoubt] = useStateW(p.doubt); const [modal, setModal] = useStateW(null); return (

← Back to feed

{u.handle}

6h ago · PROVE Window

day {p.day}

"{p.caption}"

{['🔥', '💪', '👀', '⚡'].map((e) => ( ))}

Post your own proof?

Free during beta · iOS

setModal(null)} proof={{ ...p, back, doubt }} initialSide={modal?.side} sheet onConfirm={(side, amt) => { if (side === 'back') setBack((b) => b + amt); else setDoubt((d) => d + amt); }} /> ); } Object.assign(window, { Icon, Sidebar, BottomTabBar, PageShell, PageShellMobile, AuthShell, FormField, CoralButton, GhostButton, AppleButton, OrDivider, FilterTabs, ProofCard, ProofCardBtn, EmptyState, LeaderRow, LeaderPodium, pageTitleStyle, sectionLabelStyle, metaBtnStyle, PageHeader, FeedPage, FeedPageMobile, ExplorePage, ExplorePageMobile, LeaderboardPage, LeaderboardPageMobile, ProfilePage, ProfilePageMobile, SingleProofPage, SingleProofPageMobile, });