guided-typing/index.html at master · jessepav/guided-typing · GitHub

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
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="A free, no-ads guided typing app for kids to teach keyboard layouts.">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Guided Typing</title>
    <link rel="icon" href="favicon.png">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <style>
      html {
        --sans-serif-family: "Roboto", sans-serif;
        --monospace-family: "Roboto Mono", monospace;
      }
    </style>

    <link rel="stylesheet" href="css/guided-typing.css">
    <script defer src="lib/markdown-it.min.js"></script>
    <script type="module" src="js/guided-typing.mjs"></script>
  </head>
  <body>
    <div class="browser-feature-warning" style="display: none;">
      <span class="feature-cross">x</span>
      <p>Your browser doesn't support the web features used in this app, and so
      it's unlikely it will work properly. Browsers that should work include:</p>
      <ul>
        <li>Chrome/Edge 112+</li>
        <li>Firefox 117+</li>
        <li>Safari 16.5+</li>
      </ul>
      (If you're using an old Chromebook that supports installing Android apps via
       the Play Store, you can install an app named "Chrome Beta" to get the
       newest version of Chrome even if your Chromebook no longer includes OS updates.)
    </div>
    <div class="settings-icons-holder">
      <img id="doc-icon" src="img/document-icon.png" alt="Story Icon" title="Edit story text (Ctrl+D)">
      <img id="keyboard-icon" src="img/keyboard-icon.png" alt="Keyboard Icon" title="Change keyboard layout">
      <div class="wpm-div">
        <input type="checkbox" id="wpm-check"><label for="wpm-check">WPM</label>
      </div>
    </div>
    <div id="document-holder"></div>
    <div id="settings-holder">
      <div id="settings-text-holder">
        <p>Story Text</p>
        <textarea id="settings-story-textarea"
                  placeholder="Type or paste your text here and click Save"></textarea>
        <div id="settings-button-holder">
          <button data-command="save" title="(Ctrl+S)">Save</button>
          <button data-command="cancel">Cancel</button>
        </div>
      </div>
      <div id="settings-text-help"></div>
    </div>
    <dialog id="keyboard-layout-dialog">
      <fieldset>
        <legend>Select keyboard layout:</legend>
        <select id="layout-select">
        </select>
      </fieldset>
      <div id="layout-button-holder">
        <button data-command="ok">OK</button>
        <button data-command="cancel">Cancel</button>
      </div>
    </dialog>
  </body>
</html>

<!-- vim: set fo=q tw=80 : -->