82 lines
3.2 KiB
HTML
82 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#0e0e11" />
|
|
<meta name="description" content="Interval training timer with pause and work phases." />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Timer" />
|
|
<link rel="manifest" href="./manifest.webmanifest" />
|
|
<link rel="apple-touch-icon" href="./icons/icon-192.png" />
|
|
<link rel="icon" href="./icons/icon-192.png" />
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
<title>Interval Timer</title>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="topbar">
|
|
<h1>Interval Timer</h1>
|
|
<button id="settingsToggle" class="icon-btn" type="button" aria-expanded="false" aria-controls="settings" aria-label="Settings">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
|
|
<path fill="currentColor" d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"/>
|
|
<path fill="currentColor" d="m19.4 13-.2-1 .2-1 1.6-1.2-1.6-2.8-1.9.7-1.7-1-.3-2h-3.2l-.3 2-1.7 1-1.9-.7-1.6 2.8L8.8 11l-.2 1 .2 1-1.6 1.2 1.6 2.8 1.9-.7 1.7 1 .3 2h3.2l.3-2 1.7-1 1.9.7 1.6-2.8L19.4 13Zm-2.1 3.2-1.3-.5-2.6 1.5-.2 1.4h-1.6l-.2-1.4-2.6-1.5-1.3.5-.8-1.4 1.1-.9v-3l-1.1-.9.8-1.4 1.3.5 2.6-1.5.2-1.4h1.6l.2 1.4 2.6 1.5 1.3-.5.8 1.4-1.1.9v3l1.1.9-.8 1.4Z"/>
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<main class="stage" id="stage">
|
|
<div class="progress" id="progress"></div>
|
|
|
|
<div class="phase-label" id="phaseLabel">Ready</div>
|
|
|
|
<div class="exercise" id="exerciseName">Add your exercises</div>
|
|
|
|
<div class="clock" id="clock">00:00</div>
|
|
|
|
<div class="next" id="nextUp"></div>
|
|
</main>
|
|
|
|
<div class="controls" id="controls">
|
|
<button id="startBtn" class="btn btn-primary" type="button">Start</button>
|
|
<button id="pauseBtn" class="btn" type="button" hidden>Pause</button>
|
|
<button id="resetBtn" class="btn" type="button" hidden>Reset</button>
|
|
</div>
|
|
|
|
<section class="settings" id="settings" hidden>
|
|
<div class="field-row">
|
|
<label class="field">
|
|
<span>Pause (seconds)</span>
|
|
<input id="pauseInput" type="number" inputmode="numeric" min="0" step="1" value="15" />
|
|
</label>
|
|
<label class="field">
|
|
<span>Training (seconds)</span>
|
|
<input id="workInput" type="number" inputmode="numeric" min="1" step="1" value="45" />
|
|
</label>
|
|
<label class="field">
|
|
<span>Sets</span>
|
|
<input id="setsInput" type="number" inputmode="numeric" min="1" step="1" value="5" />
|
|
</label>
|
|
</div>
|
|
|
|
<h2 class="section-title">Exercises</h2>
|
|
<ul class="exercise-list" id="exerciseList"></ul>
|
|
<p class="empty-hint" id="emptyHint">No exercises yet. Add one below.</p>
|
|
|
|
<div class="add-row">
|
|
<input id="exerciseInput" type="text" placeholder="Exercise name" autocomplete="off" enterkeyhint="done" />
|
|
<button id="addBtn" class="btn btn-add" type="button" aria-label="Add exercise">+</button>
|
|
</div>
|
|
|
|
<p class="hint">Order: for every set, each exercise runs a pause first, then the training period.</p>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<span id="installHint"></span>
|
|
</footer>
|
|
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|