big-clock/index.html at main · BeckyPollard/big-clock · 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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Just a simple, big clock. That's it.">
    <meta name="Big Clock">
    <meta name="author" content="Becky Pollard">
    <title>Big Clock</title>
    <link rel="icon" href="/images/favicon.ico">
    <!-- <link rel="stylesheet" href="./assets/css/style.css"> -->
    <link rel="stylesheet" href="/clock/assets/css/style.css">
  </head>
  <body class='dark'>
    <header>
      <details>
        <summary onclick='optionsToggleClick()'>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/>
            {/* https://iconmonstr.com/gear-1-svg/ */}
          </svg>
        </summary>
        <div id="options">
          <h2>Big Clock Options</h2>
          <hr>
          <form>
            <h3>Audio Settings</h3>
            <label for="audioMin">
              Ping Minute
              <input
                id="audioMin"
                type="checkbox"
                name="audioMin"
                value="audioMin"
                onClick='setOption(this.id)'
              >
            </label>
            <label for="audioHr">
              Announce Hour
              <input
                id="audioHr"
                type="checkbox"
                name="audioHr"
                value="audioHr"
                onClick='setOption(this.id)'
              >
            </label>
            <label for="seconds">
              Seconds
              <input
                id="seconds"
                type="checkbox"
                name="seconds"
                value="seconds"
                onClick='setOption(this.id)'
              >
            </label>
            <label for="meridiem">
              AM/PM
              <input
                id="meridiem"
                type="checkbox"
                name="meridiem"
                value="meridiem"
                onClick='setOption(this.id)'
              >
            </label>
            <label for="theme">
              Theme
              <select name="theme" id="theme" onchange='setOption(this.value)'>
                <option value="dark">Dark</option>
                <option value="light">Light</option>
                <option value="pinky">Pinky</option>
                <option value="ugly">Ugly</option>
              </select>
            </label>
          </form>
          <hr>
          <p id="textureCreds">Textures from <a href="https://textures.neocities.org/">TextureTown</a></p>
          <p id='optError'></p>
        </div>
      </details>
    </header>
    <main>
      <time id='big-clock'>00:00 PM</time>
    </main>
    <footer></footer>

    <audio id="plonk">
      <source src="/clock/assets/audio/plonk.ogg" type="audio/ogg">
      <source src="/clock/assets/audio/plonk.mp3" type="audio/mpeg">
    </audio>
    <audio id="ping"><source src="/clock/assets/audio/ping.mp3" type="audio/mpeg"></audio>
    <audio id="one"><source src="/clock/assets/audio/1.mp3" type="audio/mpeg"></audio>
    <audio id="two"><source src="/clock/assets/audio/2.mp3" type="audio/mpeg"></audio>
    <audio id="three"><source src="/clock/assets/audio/3.mp3" type="audio/mpeg"></audio>
    <audio id="four"><source src="/clock/assets/audio/4.mp3" type="audio/mpeg"></audio>
    <audio id="five"><source src="/clock/assets/audio/5.mp3" type="audio/mpeg"></audio>
    <audio id="six"><source src="/clock/assets/audio/6.mp3" type="audio/mpeg"></audio>
    <audio id="seven"><source src="/clock/assets/audio/7.mp3" type="audio/mpeg"></audio>
    <audio id="eight"><source src="/clock/assets/audio/8.mp3" type="audio/mpeg"></audio>
    <audio id="nine"><source src="/clock/assets/audio/9.mp3" type="audio/mpeg"></audio>
    <audio id="ten"><source src="/clock/assets/audio/10.mp3" type="audio/mpeg"></audio>
    <audio id="eleven"><source src="/clock/assets/audio/11.mp3" type="audio/mpeg"></audio>
    <audio id="twelve"><source src="/clock/assets/audio/12.mp3" type="audio/mpeg"></audio>

    <!-- <script src="./scripts/main.js"></script> -->
    <script src="/clock/scripts/main.js"></script>
  </body>
</html>