39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="color-scheme" content="light dark">
|
||
|
|
<title>Countdown Timer - Tools</title>
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
<script type="module" src="main.js"></script>
|
||
|
|
</head>
|
||
|
|
<body class="container">
|
||
|
|
<header>
|
||
|
|
<hgroup>
|
||
|
|
<h1>Countdown Timer</h1>
|
||
|
|
<p>Set a time and count down</p>
|
||
|
|
</hgroup>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<section class="timer" aria-label="Countdown timer">
|
||
|
|
<div class="counter" role="group" aria-label="Time remaining">
|
||
|
|
<input id="minutes" type="text" inputmode="numeric" pattern="[0-9]*"
|
||
|
|
value="0" aria-label="Minutes" autocomplete="off" spellcheck="false"
|
||
|
|
title="Up/Down: change by 1. Shift+Up/Down: change by 10.">
|
||
|
|
<span aria-hidden="true">:</span>
|
||
|
|
<input id="seconds" type="text" inputmode="numeric" pattern="[0-9]*"
|
||
|
|
value="00" aria-label="Seconds" autocomplete="off" spellcheck="false"
|
||
|
|
title="Up/Down: change by 1. Shift+Up/Down: change by 10.">
|
||
|
|
</div>
|
||
|
|
<div class="controls">
|
||
|
|
<button id="start-stop" type="button">Start</button>
|
||
|
|
<button id="reset" class="secondary" type="button">Reset</button>
|
||
|
|
</div>
|
||
|
|
<span id="status" class="visually-hidden" role="status">Idle</span>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|