[OCaml] High Intensity Training Online
chore add static showcase site
Add the marketing showcase for hito.mlnp.fr: a static index page and its stylesheet. The CSS design tokens and typography are copied from the app stylesheet so the showcase and the app read as one product.
Changed files
site/assets/site.css
@@ -0,0 +1,288 @@
1
Added:
/* hito showcase — hito.mlnp.fr
2
Added:
3
Added:
The design tokens, paper texture, and typography are copied verbatim from
4
Added:
the application stylesheet (lib/web/assets/hito.css) so the showcase and the
5
Added:
app read as one product. Only the layout below (hero, features, screenshots,
6
Added:
footer) is specific to the showcase. Keep the token block in sync with the
7
Added:
app when it changes. */
8
Added:
9
Added:
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");
10
Added:
11
Added:
:root {
12
Added:
color-scheme: light;
13
Added:
--paper: #f7f2e8;
14
Added:
--paper-raised: #fffdf8;
15
Added:
--ink: #1a1a16;
16
Added:
--muted-ink: #5b584f;
17
Added:
--rule: #b9b1a2;
18
Added:
--rule-strong: #756f63;
19
Added:
--oxblood: #8c201b;
20
Added:
--oxblood-dark: #65130f;
21
Added:
--brass: #7b5714;
22
Added:
--brass-wash: #f4e7c5;
23
Added:
--evergreen: #1f5b45;
24
Added:
--evergreen-wash: #dcebe2;
25
Added:
--focus: #65130f;
26
Added:
--error: #8c201b;
27
Added:
--font-size-small: 0.875rem;
28
Added:
--font-size-base: 1rem;
29
Added:
--font-size-lead: 1.125rem;
30
Added:
--font-size-heading: 2rem;
31
Added:
--radius: 0.4em;
32
Added:
--sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
33
Added:
--mono: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
34
Added:
}
35
Added:
36
Added:
* { box-sizing: border-box; }
37
Added:
38
Added:
html { background: var(--paper); }
39
Added:
40
Added:
body {
41
Added:
min-width: 20rem;
42
Added:
margin: 0;
43
Added:
color: var(--ink);
44
Added:
background: var(--paper);
45
Added:
font: 400 var(--font-size-base)/1.5 var(--sans);
46
Added:
text-rendering: optimizeLegibility;
47
Added:
}
48
Added:
49
Added:
/* The signature paper rule-grid, shared with the app. */
50
Added:
body::before {
51
Added:
position: fixed;
52
Added:
z-index: -1;
53
Added:
inset: 0;
54
Added:
background-image: linear-gradient(to bottom, rgba(26, 26, 22, 0.035) 1px, transparent 1px);
55
Added:
background-size: 100% 2rem;
56
Added:
content: "";
57
Added:
pointer-events: none;
58
Added:
}
59
Added:
60
Added:
a {
61
Added:
color: var(--oxblood-dark);
62
Added:
font-weight: 600;
63
Added:
text-decoration-thickness: 0.1em;
64
Added:
text-underline-offset: 0.16em;
65
Added:
}
66
Added:
67
Added:
a:hover { color: var(--oxblood); }
68
Added:
69
Added:
a:focus-visible,
70
Added:
summary:focus-visible {
71
Added:
outline: 2px solid var(--focus);
72
Added:
outline-offset: 2px;
73
Added:
}
74
Added:
75
Added:
/* Shared shell metrics and the wordmark, matching the app masthead. */
76
Added:
.shell {
77
Added:
width: min(100%, 72rem);
78
Added:
margin: 0 auto;
79
Added:
padding: 0 1rem 3rem;
80
Added:
}
81
Added:
82
Added:
.masthead {
83
Added:
display: flex;
84
Added:
align-items: center;
85
Added:
gap: 1rem;
86
Added:
min-height: 4.75rem;
87
Added:
}
88
Added:
89
Added:
.brand {
90
Added:
display: inline-flex;
91
Added:
align-items: center;
92
Added:
margin-right: auto;
93
Added:
color: var(--ink);
94
Added:
font: 800 2rem/1 var(--sans);
95
Added:
letter-spacing: -0.03em;
96
Added:
text-decoration: none;
97
Added:
}
98
Added:
99
Added:
.masthead-cta {
100
Added:
display: inline-flex;
101
Added:
align-items: center;
102
Added:
min-height: 2.75rem;
103
Added:
padding: 0.5rem 0.9rem;
104
Added:
border: 1px solid var(--oxblood-dark);
105
Added:
border-radius: var(--radius);
106
Added:
color: var(--paper-raised);
107
Added:
background: var(--oxblood);
108
Added:
font-weight: 700;
109
Added:
text-decoration: none;
110
Added:
}
111
Added:
.masthead-cta:hover {
112
Added:
color: var(--paper-raised);
113
Added:
background: var(--oxblood-dark);
114
Added:
}
115
Added:
116
Added:
/* The eyebrow label, shared with the app. */
117
Added:
.eyebrow {
118
Added:
margin: 0 0 0.5rem;
119
Added:
color: var(--oxblood-dark);
120
Added:
font: 700 var(--font-size-small)/1.35 var(--sans);
121
Added:
letter-spacing: 0.09em;
122
Added:
text-transform: uppercase;
123
Added:
}
124
Added:
125
Added:
/* Hero: the oxblood-topped paper card, matching the app's .page-surface. */
126
Added:
.hero {
127
Added:
border: 1px solid var(--rule-strong);
128
Added:
border-top: 6px solid var(--oxblood);
129
Added:
background: var(--paper-raised);
130
Added:
border-radius: var(--radius);
131
Added:
box-shadow: 0 0.4rem 1.5rem rgba(26, 26, 22, 0.09);
132
Added:
padding: clamp(1.5rem, 4vw, 3rem);
133
Added:
}
134
Added:
135
Added:
.hero h1 {
136
Added:
margin: 0 0 0.75rem;
137
Added:
font: 800 clamp(2rem, 5vw, 3rem)/1.05 var(--sans);
138
Added:
letter-spacing: -0.02em;
139
Added:
}
140
Added:
141
Added:
.hero .lead {
142
Added:
max-width: 42rem;
143
Added:
margin: 0 0 1.75rem;
144
Added:
color: var(--muted-ink);
145
Added:
font-size: var(--font-size-lead);
146
Added:
}
147
Added:
148
Added:
.hero-actions {
149
Added:
display: flex;
150
Added:
flex-wrap: wrap;
151
Added:
gap: 0.75rem;
152
Added:
}
153
Added:
154
Added:
.button-primary,
155
Added:
.button-secondary {
156
Added:
display: inline-flex;
157
Added:
align-items: center;
158
Added:
min-height: 2.75rem;
159
Added:
padding: 0.6rem 1.1rem;
160
Added:
border-radius: var(--radius);
161
Added:
font-weight: 700;
162
Added:
text-decoration: none;
163
Added:
}
164
Added:
.button-primary {
165
Added:
color: var(--paper-raised);
166
Added:
background: var(--oxblood);
167
Added:
border: 1px solid var(--oxblood-dark);
168
Added:
}
169
Added:
.button-primary:hover {
170
Added:
color: var(--paper-raised);
171
Added:
background: var(--oxblood-dark);
172
Added:
}
173
Added:
.button-secondary {
174
Added:
color: var(--ink);
175
Added:
background: transparent;
176
Added:
border: 1px solid var(--rule-strong);
177
Added:
}
178
Added:
.button-secondary:hover {
179
Added:
color: var(--oxblood-dark);
180
Added:
background: #ece4d5;
181
Added:
}
182
Added:
183
Added:
/* Section rhythm. */
184
Added:
.section {
185
Added:
margin-top: 3rem;
186
Added:
}
187
Added:
.section > h2 {
188
Added:
margin: 0 0 1.25rem;
189
Added:
font: 800 var(--font-size-heading)/1.1 var(--sans);
190
Added:
letter-spacing: -0.01em;
191
Added:
}
192
Added:
193
Added:
/* Feature grid: each principle is a paper card. */
194
Added:
.feature-grid {
195
Added:
display: grid;
196
Added:
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
197
Added:
gap: 1rem;
198
Added:
}
199
Added:
200
Added:
.feature {
201
Added:
border: 1px solid var(--rule);
202
Added:
border-left: 4px solid var(--brass);
203
Added:
background: var(--paper-raised);
204
Added:
border-radius: var(--radius);
205
Added:
padding: 1.25rem;
206
Added:
}
207
Added:
.feature h3 {
208
Added:
margin: 0 0 0.5rem;
209
Added:
font: 700 var(--font-size-lead)/1.25 var(--sans);
210
Added:
}
211
Added:
.feature p {
212
Added:
margin: 0;
213
Added:
color: var(--muted-ink);
214
Added:
}
215
Added:
216
Added:
/* Screenshot slots: captioned placeholders, ready for images later. */
217
Added:
.shots {
218
Added:
display: grid;
219
Added:
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
220
Added:
gap: 1rem;
221
Added:
}
222
Added:
.shot {
223
Added:
margin: 0;
224
Added:
border: 1px solid var(--rule);
225
Added:
background: var(--paper-raised);
226
Added:
border-radius: var(--radius);
227
Added:
overflow: hidden;
228
Added:
}
229
Added:
.shot img {
230
Added:
display: block;
231
Added:
width: 100%;
232
Added:
height: auto;
233
Added:
}
234
Added:
.shot .placeholder {
235
Added:
display: flex;
236
Added:
align-items: center;
237
Added:
justify-content: center;
238
Added:
aspect-ratio: 16 / 10;
239
Added:
color: var(--muted-ink);
240
Added:
background: repeating-linear-gradient(
241
Added:
45deg,
242
Added:
#efe7d6,
243
Added:
#efe7d6 10px,
244
Added:
var(--paper-raised) 10px,
245
Added:
var(--paper-raised) 20px
246
Added:
);
247
Added:
font: 700 var(--font-size-small)/1.35 var(--mono);
248
Added:
letter-spacing: 0.06em;
249
Added:
text-transform: uppercase;
250
Added:
}
251
Added:
.shot figcaption {
252
Added:
padding: 0.75rem 1rem;
253
Added:
color: var(--muted-ink);
254
Added:
font-size: var(--font-size-small);
255
Added:
border-top: 1px solid var(--rule);
256
Added:
}
257
Added:
258
Added:
/* Closing call to action. */
259
Added:
.cta-band {
260
Added:
margin-top: 3rem;
261
Added:
border: 1px solid var(--rule-strong);
262
Added:
border-top: 6px solid var(--evergreen);
263
Added:
background: var(--evergreen-wash);
264
Added:
border-radius: var(--radius);
265
Added:
padding: clamp(1.5rem, 4vw, 2.5rem);
266
Added:
text-align: center;
267
Added:
}
268
Added:
.cta-band h2 {
269
Added:
margin: 0 0 0.5rem;
270
Added:
font: 800 var(--font-size-heading)/1.1 var(--sans);
271
Added:
}
272
Added:
.cta-band p {
273
Added:
margin: 0 0 1.5rem;
274
Added:
color: var(--muted-ink);
275
Added:
}
276
Added:
277
Added:
/* Footer. */
278
Added:
.site-footer {
279
Added:
margin-top: 3rem;
280
Added:
padding-top: 1.5rem;
281
Added:
border-top: 1px solid var(--rule);
282
Added:
color: var(--muted-ink);
283
Added:
font-size: var(--font-size-small);
284
Added:
}
285
Added:
286
Added:
@media (prefers-reduced-motion: reduce) {
287
Added:
* { scroll-behavior: auto; }
288
Added:
}
site/index.html
@@ -0,0 +1,108 @@
1
Added:
<!DOCTYPE html>
2
Added:
<html lang="en">
3
Added:
<head>
4
Added:
<title>hito — a high-intensity training tracker</title>
5
Added:
<meta charset="utf-8" />
6
Added:
<meta name="viewport" content="width=device-width,initial-scale=1" />
7
Added:
<meta
8
Added:
name="description"
9
Added:
content="hito is a training tracker for brief, infrequent, high-intensity workouts. It records what happened and shows your progress, without pushing you to do more."
10
Added:
/>
11
Added:
<link rel="stylesheet" href="assets/site.css" />
12
Added:
</head>
13
Added:
<body>
14
Added:
<div class="shell">
15
Added:
<header class="masthead">
16
Added:
<a class="brand" href="/">hito</a>
17
Added:
<a class="masthead-cta" href="https://app.hito.mlnp.fr">Open the app</a>
18
Added:
</header>
19
Added:
20
Added:
<main>
21
Added:
<section class="hero">
22
Added:
<p class="eyebrow">High-intensity training</p>
23
Added:
<h1>Train hard. Train brief. Grow.</h1>
24
Added:
<p class="lead">
25
Added:
hito is a training tracker for people who lift with high intensity.
26
Added:
It keeps your sessions short and infrequent, records exactly what
27
Added:
you did, and shows your progress — one more rep, a little more
28
Added:
weight. It never asks you to do more than the work that grows you.
29
Added:
</p>
30
Added:
<div class="hero-actions">
31
Added:
<a class="button-primary" href="https://app.hito.mlnp.fr">Open the app</a>
32
Added:
<a class="button-secondary" href="#principles">See the method</a>
33
Added:
</div>
34
Added:
</section>
35
Added:
36
Added:
<section class="section" id="principles">
37
Added:
<h2>Built around four principles</h2>
38
Added:
<div class="feature-grid">
39
Added:
<article class="feature">
40
Added:
<h3>Intensity, not volume</h3>
41
Added:
<p>
42
Added:
A working set runs to the point where one more rep is not
43
Added:
possible. That effort is what signals growth. hito treats the
44
Added:
set as complete at that point — not at a rep count.
45
Added:
</p>
46
Added:
</article>
47
Added:
<article class="feature">
48
Added:
<h3>Recovery comes first</h3>
49
Added:
<p>
50
Added:
The gym stimulates growth; rest produces it. hito tracks
51
Added:
recovery between sessions, so a hard workout gates the next one
52
Added:
and you train again only when you are ready.
53
Added:
</p>
54
Added:
</article>
55
Added:
<article class="feature">
56
Added:
<h3>The minimum that works</h3>
57
Added:
<p>
58
Added:
More sets are not more progress. hito favours the smallest
59
Added:
effective dose and flags rising volume as a warning to watch,
60
Added:
never a target to chase.
61
Added:
</p>
62
Added:
</article>
63
Added:
<article class="feature">
64
Added:
<h3>Progress you can see</h3>
65
Added:
<p>
66
Added:
Progress is a clear signal: more reps, more weight, or both.
67
Added:
hito reads your logbook and shows the trend, so each session
68
Added:
has a plain measure of whether you moved forward.
69
Added:
</p>
70
Added:
</article>
71
Added:
</div>
72
Added:
</section>
73
Added:
74
Added:
<section class="section" id="screenshots">
75
Added:
<h2>A look inside</h2>
76
Added:
<div class="shots">
77
Added:
<figure class="shot">
78
Added:
<div class="placeholder">Screenshot</div>
79
Added:
<figcaption>Your routine — the exercises and the load for the next session.</figcaption>
80
Added:
</figure>
81
Added:
<figure class="shot">
82
Added:
<div class="placeholder">Screenshot</div>
83
Added:
<figcaption>The workout in progress — log each set as you take it to failure.</figcaption>
84
Added:
</figure>
85
Added:
<figure class="shot">
86
Added:
<div class="placeholder">Screenshot</div>
87
Added:
<figcaption>The logbook — every session recorded, with the progress trend.</figcaption>
88
Added:
</figure>
89
Added:
</div>
90
Added:
</section>
91
Added:
92
Added:
<section class="cta-band">
93
Added:
<h2>Start your logbook</h2>
94
Added:
<p>Brief, infrequent, intense. hito keeps the record so you can focus on the work.</p>
95
Added:
<a class="button-primary" href="https://app.hito.mlnp.fr">Open the app</a>
96
Added:
</section>
97
Added:
</main>
98
Added:
99
Added:
<footer class="site-footer">
100
Added:
<p>
101
Added:
hito is a personal training tracker. Its method is inspired by Mike
102
Added:
Mentzer's approach to high-intensity training. It is not medical or
103
Added:
fitness advice; train within your own limits.
104
Added:
</p>
105
Added:
</footer>
106
Added:
</div>
107
Added:
</body>
108
Added:
</html>