-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
186 lines (179 loc) · 9.35 KB
/
Copy pathindex.html
File metadata and controls
186 lines (179 loc) · 9.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zone Engine — Heart-rate zone training for Android</title>
<meta
name="description"
content="Heart-rate zone training with guided intervals and audio cues. No account, all on-device."
/>
<link rel="icon" href="/images/icon.png" />
<meta property="og:title" content="Zone Engine" />
<meta
property="og:description"
content="Heart-rate zone training with guided intervals and audio cues."
/>
<meta property="og:image" content="/images/og.png" />
<meta property="og:type" content="website" />
</head>
<body>
<nav class="nav">
<div class="wrap nav-inner">
<a class="brand" href="/">
<img src="/images/icon.png" alt="" />
<span>Zone Engine</span>
</a>
<div class="nav-links">
<a href="#features">Features</a>
<a href="/privacy">Privacy</a>
<span class="soon"><i class="bi bi-hourglass-split"></i> Coming Soon</span>
</div>
</div>
</nav>
<header class="hero">
<div class="wrap hero-inner">
<div class="hero-copy">
<span class="eyebrow">Heart-rate zone training</span>
<h1>Train in the <span class="grad-text">right zone</span>, every session.</h1>
<p class="lead">
Live BPM from your Bluetooth monitor, guided interval workouts that only count time
in-zone, and audio cues so you never have to look at your screen.
</p>
<div class="cta-row">
<span class="soon lg"><i class="bi bi-hourglass-split"></i> Coming Soon</span>
</div>
<p class="trust">No account. Everything stays on your device.</p>
</div>
<div class="hero-art">
<div class="phone">
<img src="/images/02-workout-live.png" alt="Zone Engine live workout screen" />
</div>
</div>
</div>
</header>
<div class="zone-strip">
<div class="wrap">
<span style="--c: var(--z2)">Zone 2</span>
<span style="--c: var(--z3)">Zone 3</span>
<span style="--c: var(--z4)">Zone 4</span>
<span style="--c: var(--z5)">Zone 5</span>
</div>
</div>
<section class="block" id="screens">
<div class="wrap">
<div class="section-head">
<h2>See it in action</h2>
<p>From picking a workout to staying locked in your target zone.</p>
</div>
<div id="shotCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#shotCarousel" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#shotCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#shotCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#shotCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#shotCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#shotCarousel" data-bs-slide-to="5" aria-label="Slide 6"></button>
<button type="button" data-bs-target="#shotCarousel" data-bs-slide-to="6" aria-label="Slide 7"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="shot">
<div class="phone"><img src="/images/01-select-workout.png" alt="Select a workout" /></div>
<p class="caption">Pick a workout</p>
</div>
</div>
<div class="carousel-item">
<div class="shot">
<div class="phone"><img src="/images/07-custom-builder.png" alt="Custom workout builder" /></div>
<p class="caption">Build your own workout</p>
</div>
</div>
<div class="carousel-item">
<div class="shot">
<div class="phone"><img src="/images/02-workout-live.png" alt="Live workout view" /></div>
<p class="caption">Stay in your zone</p>
</div>
</div>
<div class="carousel-item">
<div class="shot">
<div class="phone"><img src="/images/06-zone-distribution.png" alt="Live time-in-zone distribution" /></div>
<p class="caption">See where the time went</p>
</div>
</div>
<div class="carousel-item">
<div class="shot">
<div class="phone"><img src="/images/03-zones.png" alt="Zone settings" /></div>
<p class="caption">Tune your zones</p>
</div>
</div>
<div class="carousel-item">
<div class="shot">
<div class="phone"><img src="/images/05-audio-cues.png" alt="Audio cue settings" /></div>
<p class="caption">Train by ear</p>
</div>
</div>
<div class="carousel-item">
<div class="shot">
<div class="phone"><img src="/images/04-settings.png" alt="Settings" /></div>
<p class="caption">Make it yours</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="block" id="features">
<div class="wrap">
<div class="section-head">
<h2>Built for focused training</h2>
<p>Everything you need to train by heart rate, and nothing you don't.</p>
</div>
<div class="feature-grid">
<div class="feature">
<i class="bi bi-shield-lock" style="color: var(--z2)"></i>
<h3>Private by design</h3>
<p>No account, no analytics, no servers. Your heart-rate data never leaves your phone.</p>
</div>
<div class="feature">
<i class="bi bi-stopwatch" style="color: var(--z3)"></i>
<h3>Guided intervals</h3>
<p>Interval time only accrues while you're in the target zone, so the work counts when it actually counts.</p>
</div>
<div class="feature">
<i class="bi bi-volume-up" style="color: var(--z4)"></i>
<h3>Audio cues</h3>
<p>Spoken or tone cues call out your zone, on every change or on a schedule you set, so you can keep your eyes off the screen.</p>
</div>
<div class="feature">
<i class="bi bi-sliders" style="color: var(--z5)"></i>
<h3>Custom workouts</h3>
<p>Build your own sessions: set target zones and durations, group intervals, and repeat them as many times as you want.</p>
</div>
</div>
</div>
</section>
<section class="block cta-band">
<div class="wrap">
<div class="inner">
<h2>Ready to train smarter?</h2>
<p>Zone Engine has no ads and works with the heart-rate monitor you already own.</p>
<span class="soon lg"><i class="bi bi-hourglass-split"></i> Coming Soon</span>
</div>
</div>
</section>
<footer class="footer">
<div class="wrap footer-inner">
<a class="brand" href="/">
<img src="/images/icon.png" alt="" />
<span>Zone Engine</span>
</a>
<div class="footer-links">
<a href="/privacy">Privacy</a>
</div>
<p class="copy">© <span id="year"></span> Zone Engine</p>
</div>
</footer>
<script type="module" src="/src/main.js"></script>
</body>
</html>