|
|
@@ -1,2 +1,569 @@
|
|
|
-<h1>Welcome to SvelteKit</h1>
|
|
|
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
|
|
+<script>
|
|
|
+ const features = [
|
|
|
+ {
|
|
|
+ title: 'Log sets fast',
|
|
|
+ body: 'Load, reps, done. Numbers stay large and readable under gym lights.'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Rest between sets',
|
|
|
+ body: 'Timer sits on the current set so you know when to go again.'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Catch PRs',
|
|
|
+ body: 'Personal records get marked when you hit them. No digging later.'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Any modality',
|
|
|
+ body: 'Strength first. Conditioning, mobility, and sport work fit the same flow.'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const sets = [
|
|
|
+ { n: 1, load: '135', reps: '8', status: 'done' },
|
|
|
+ { n: 2, load: '155', reps: '6', status: 'done' },
|
|
|
+ { n: 3, load: '175', reps: '5', status: 'active' },
|
|
|
+ { n: 4, load: '175', reps: '5', status: 'next' }
|
|
|
+ ];
|
|
|
+</script>
|
|
|
+
|
|
|
+<svelte:head>
|
|
|
+ <title>Torus — train with intent</title>
|
|
|
+</svelte:head>
|
|
|
+
|
|
|
+<div class="page">
|
|
|
+ <header class="top">
|
|
|
+ <a class="brand" href="/">
|
|
|
+ <span class="brand-mark" aria-hidden="true"></span>
|
|
|
+ <span class="brand-name">Torus</span>
|
|
|
+ </a>
|
|
|
+ <nav class="nav" aria-label="Primary">
|
|
|
+ <a class="nav-link" href="#features">Features</a>
|
|
|
+ <a class="nav-link" href="#preview">Preview</a>
|
|
|
+ <a class="btn btn-primary nav-cta" href="/register">Create account</a>
|
|
|
+ </nav>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <main>
|
|
|
+ <section class="hero">
|
|
|
+ <div class="hero-copy">
|
|
|
+ <p class="eyebrow"><span class="pill">Weightlifting first</span></p>
|
|
|
+ <h1>Train hard.<br />Log clean.</h1>
|
|
|
+ <p class="lede">
|
|
|
+ Torus is a gym-floor app for sets, rest, and PRs. Built for lifting — works for
|
|
|
+ conditioning and mobility too.
|
|
|
+ </p>
|
|
|
+ <div class="hero-actions">
|
|
|
+ <a class="btn btn-ghost btn-lg" href="#features">See features</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="hero-preview" id="preview" aria-label="Workout preview">
|
|
|
+ <div class="session">
|
|
|
+ <div class="session-head">
|
|
|
+ <div>
|
|
|
+ <p class="session-label">Today</p>
|
|
|
+ <h2 class="session-title">Push A</h2>
|
|
|
+ </div>
|
|
|
+ <span class="pill">Live</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="exercise">
|
|
|
+ <div class="exercise-head">
|
|
|
+ <div>
|
|
|
+ <p class="exercise-name">Bench press</p>
|
|
|
+ <p class="exercise-meta">Barbell · working sets</p>
|
|
|
+ </div>
|
|
|
+ <span class="pill pill-ok">PR zone</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ul class="sets" role="list">
|
|
|
+ {#each sets as set}
|
|
|
+ <li
|
|
|
+ class="set"
|
|
|
+ class:set-done={set.status === 'done'}
|
|
|
+ class:set-active={set.status === 'active'}
|
|
|
+ >
|
|
|
+ <span class="set-n">Set {set.n}</span>
|
|
|
+ <span class="set-nums">
|
|
|
+ <span class="num">{set.load}</span>
|
|
|
+ <span class="unit">lb</span>
|
|
|
+ <span class="times" aria-hidden="true">×</span>
|
|
|
+ <span class="num">{set.reps}</span>
|
|
|
+ <span class="unit">reps</span>
|
|
|
+ </span>
|
|
|
+ {#if set.status === 'done'}
|
|
|
+ <span class="set-status ok">Logged</span>
|
|
|
+ {:else if set.status === 'active'}
|
|
|
+ <span class="set-status active">Current</span>
|
|
|
+ {:else}
|
|
|
+ <span class="set-status">Next</span>
|
|
|
+ {/if}
|
|
|
+ </li>
|
|
|
+ {/each}
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div class="session-actions">
|
|
|
+ <button type="button" class="btn btn-primary btn-wide" tabindex="-1"
|
|
|
+ >Log set</button
|
|
|
+ >
|
|
|
+ <button type="button" class="btn btn-ghost" tabindex="-1">Rest 2:00</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rest-bar" aria-hidden="true">
|
|
|
+ <div class="rest-fill"></div>
|
|
|
+ <span class="rest-label">Rest · 1:24</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="features" id="features">
|
|
|
+ <div class="features-head">
|
|
|
+ <h2>Built for the floor</h2>
|
|
|
+ <p>Short labels. Big numbers. No noise between you and the next set.</p>
|
|
|
+ </div>
|
|
|
+ <ul class="feature-grid" role="list">
|
|
|
+ {#each features as feature}
|
|
|
+ <li class="feature-card">
|
|
|
+ <h3>{feature.title}</h3>
|
|
|
+ <p>{feature.body}</p>
|
|
|
+ </li>
|
|
|
+ {/each}
|
|
|
+ </ul>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="cta-band">
|
|
|
+ <div class="cta-inner">
|
|
|
+ <h2>Ready when you are</h2>
|
|
|
+ <p>Open Torus, pick the session, log the work.</p>
|
|
|
+ <a class="btn btn-primary btn-lg" href="/register">Create account</a>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <footer class="foot">
|
|
|
+ <span class="brand-name foot-brand">Torus</span>
|
|
|
+ <span class="foot-note">Strength first. Any modality.</span>
|
|
|
+ </footer>
|
|
|
+</div>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .page {
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 16px;
|
|
|
+ padding: 16px 20px;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 10;
|
|
|
+ background: color-mix(in srgb, var(--void) 92%, transparent);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-mark {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: var(--ember);
|
|
|
+ box-shadow: 0 0 0 3px var(--ember-soft);
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-name {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-link {
|
|
|
+ display: none;
|
|
|
+ padding: 8px 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-link:hover {
|
|
|
+ color: var(--text);
|
|
|
+ background: var(--steel);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-cta {
|
|
|
+ padding: 9px 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ main {
|
|
|
+ flex: 1;
|
|
|
+ width: min(1120px, 100%);
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 20px 64px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero {
|
|
|
+ display: grid;
|
|
|
+ gap: 40px;
|
|
|
+ padding: 48px 0 24px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .eyebrow {
|
|
|
+ margin: 0 0 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: clamp(2.4rem, 7vw, 3.6rem);
|
|
|
+ line-height: 1.05;
|
|
|
+ letter-spacing: -0.04em;
|
|
|
+ font-weight: 750;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lede {
|
|
|
+ margin: 18px 0 0;
|
|
|
+ max-width: 34rem;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 1.05rem;
|
|
|
+ line-height: 1.55;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-actions {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-lg {
|
|
|
+ padding: 12px 18px;
|
|
|
+ font-size: 15px;
|
|
|
+ border-radius: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-wide {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-preview {
|
|
|
+ scroll-margin-top: 88px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .session {
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius-lg);
|
|
|
+ padding: 18px;
|
|
|
+ box-shadow: 0 24px 60px color-mix(in srgb, black 45%, transparent);
|
|
|
+ }
|
|
|
+
|
|
|
+ .session-head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .session-label {
|
|
|
+ margin: 0;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 650;
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: 0.06em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .session-title {
|
|
|
+ margin: 4px 0 0;
|
|
|
+ font-size: 1.35rem;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .exercise {
|
|
|
+ background: var(--surface-2);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ padding: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .exercise-head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .exercise-name {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 1.05rem;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .exercise-meta {
|
|
|
+ margin: 4px 0 0;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sets {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: grid;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .set {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 52px 1fr auto;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 10px 12px;
|
|
|
+ border-radius: var(--radius-sm);
|
|
|
+ background: var(--surface-3);
|
|
|
+ border: 1px solid transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-done {
|
|
|
+ opacity: 0.72;
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-active {
|
|
|
+ border-color: color-mix(in srgb, var(--ember) 55%, var(--border));
|
|
|
+ background: color-mix(in srgb, var(--ember) 10%, var(--surface-3));
|
|
|
+ box-shadow: inset 3px 0 0 var(--ember);
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-n {
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 650;
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-nums {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ gap: 4px;
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 1.15rem;
|
|
|
+ font-weight: 750;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit,
|
|
|
+ .times {
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .times {
|
|
|
+ margin: 0 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-status {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--text-muted);
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: 0.04em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-status.ok {
|
|
|
+ color: var(--ok);
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-status.active {
|
|
|
+ color: var(--heat);
|
|
|
+ }
|
|
|
+
|
|
|
+ .session-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rest-bar {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 14px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: var(--plate);
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rest-fill {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0 auto 0 0;
|
|
|
+ width: 62%;
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ color-mix(in srgb, var(--ember) 35%, transparent),
|
|
|
+ var(--ember)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ .rest-label {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--ember-ink);
|
|
|
+ background: color-mix(in srgb, var(--bone) 88%, transparent);
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 999px;
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
+ }
|
|
|
+
|
|
|
+ .features {
|
|
|
+ padding: 56px 0 24px;
|
|
|
+ scroll-margin-top: 72px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .features-head {
|
|
|
+ max-width: 36rem;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .features-head h2,
|
|
|
+ .cta-band h2 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: clamp(1.6rem, 4vw, 2rem);
|
|
|
+ letter-spacing: -0.03em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .features-head p,
|
|
|
+ .cta-band p {
|
|
|
+ margin: 10px 0 0;
|
|
|
+ color: var(--text-muted);
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-grid {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-card {
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ padding: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-card h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 1rem;
|
|
|
+ letter-spacing: -0.01em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-card p {
|
|
|
+ margin: 8px 0 0;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 0.95rem;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cta-band {
|
|
|
+ margin-top: 40px;
|
|
|
+ padding: 28px;
|
|
|
+ border-radius: var(--radius-lg);
|
|
|
+ background:
|
|
|
+ radial-gradient(circle at top right, var(--ember-soft), transparent 45%),
|
|
|
+ var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ }
|
|
|
+
|
|
|
+ .cta-inner {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 8px;
|
|
|
+ max-width: 28rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cta-inner .btn {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot-brand {
|
|
|
+ color: var(--text);
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 720px) {
|
|
|
+ .top {
|
|
|
+ padding: 16px 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-link {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ main {
|
|
|
+ padding: 0 28px 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero {
|
|
|
+ grid-template-columns: 1.05fr 0.95fr;
|
|
|
+ gap: 48px;
|
|
|
+ padding: 72px 0 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-grid {
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ }
|
|
|
+
|
|
|
+ .cta-band {
|
|
|
+ padding: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 980px) {
|
|
|
+ .feature-grid {
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
