<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typing Practice</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
<main id="app">
    <h1>Typing Practice</h1>

    <!-- SETUP ---------------------------------------------------------------->
    <section id="controls">
        <h2>Choose fingers to practice</h2>
        <div class="checkbox-grid">
            <label><input type="checkbox" value="home"  checked />Home row</label>
            <label><input type="checkbox" value="index" checked />Index</label>
            <label><input type="checkbox" value="middle" />Middle</label>
            <label><input type="checkbox" value="ring"   />Ring</label>
            <label><input type="checkbox" value="pinky"  />Pinky</label>
        </div>

        <h2>Options</h2>
        <div class="checkbox-grid">
            <label><input type="checkbox" id="includeNumbers" />Include numbers</label>
        </div>

        <h2>Mode</h2>
        <div class="radio-grid">
            <label><input type="radio" name="mode" value="letter-stream" checked />Letter Stream</label>
            <label><input type="radio" name="mode" value="word-stream"            />Word Stream</label>
        </div>

        <button id="startBtn">Start lesson</button>
    </section>

    <!-- PRACTICE ------------------------------------------------------------->
    <section id="lesson" hidden>
        <div id="target"></div>
        <input id="hiddenInput" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
    </section>

    <!-- RESULTS -------------------------------------------------------------->
    <section id="result" hidden>
        <h2>Finished!</h2>
        <p id="stats"></p>
    </section>
</main>

<script src="app.js"></script>
</body>
</html>