chaosclock/index.html at master · adunderground/chaosclock · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chaos Clock 🕚</title>
    <link rel="stylesheet" href="style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="main">
      <div class="clock-container">
        <svg id="clock" viewBox="0 0 352 88" class="" data-hour="" data-minute="" data-second="">
          <g class="dots">
            <rect class="" x="110" y="28" width="8" height="8" />
            <rect class="" x="110" y="68" width="8" height="8" />
            <rect class="" x="234" y="28" width="8" height="8" />
            <rect class="" x="234" y="68" width="8" height="8" />
          </g>
          <g class="digit digit-6">
            <polygon class="12347890" points="352 38 348 42 344 38 344 10 348 6 352 10 352 38" />
            <polygon class="23567890" points="342 0 346 4 342 8 314 8 310 4 314 0 342 0" />
            <polygon class="456890" points="312 38 308 42 304 38 304 10 308 6 312 10 312 38" />
            <polygon class="2345689" points="342 40 346 44 342 48 314 48 310 44 314 40 342 40" />
            <polygon class="2356890" points="342 80 346 84 342 88 314 88 310 84 314 80 342 80" />
            <polygon class="2680" points="312 78 308 82 304 78 304 50 308 46 312 50 312 78" />
            <polygon class="134567890" points="352 78 348 82 344 78 344 50 348 46 352 50 352 78" />
          </g>
          <g class="digit digit-5">
            <polygon class="12347890" points="296 38 292 42 288 38 288 10 292 6 296 10 296 38" />
            <polygon class="23567890" points="286 0 290 4 286 8 258 8 254 4 258 0 286 0" />
            <polygon class="456890" points="256 38 252 42 248 38 248 10 252 6 256 10 256 38" />
            <polygon class="2345689" points="286 40 290 44 286 48 258 48 254 44 258 40 286 40" />
            <polygon class="2356890" points="286 80 290 84 286 88 258 88 254 84 258 80 286 80" />
            <polygon class="2680" points="256 78 252 82 248 78 248 50 252 46 256 50 256 78" />
            <polygon class="134567890" points="296 78 292 82 288 78 288 50 292 46 296 50 296 78" />
          </g>
          <g class="digit digit-4">
            <polygon class="12347890" points="228 38 224 42 220 38 220 10 224 6 228 10 228 38" />
            <polygon class="23567890" points="218 0 222 4 218 8 190 8 186 4 190 0 218 0" />
            <polygon class="456890" points="188 38 184 42 180 38 180 10 184 6 188 10 188 38" />
            <polygon class="2345689" points="218 40 222 44 218 48 190 48 186 44 190 40 218 40" />
            <polygon class="2356890" points="218 80 222 84 218 88 190 88 186 84 190 80 218 80" />
            <polygon class="2680" points="188 78 184 82 180 78 180 50 184 46 188 50 188 78" />
            <polygon class="134567890" points="228 78 224 82 220 78 220 50 224 46 228 50 228 78" />
          </g>
          <g class="digit digit-3">
            <polygon class="12347890" points="172 38 168 42 164 38 164 10 168 6 172 10 172 38" />
            <polygon class="23567890" points="162 0 166 4 162 8 134 8 130 4 134 0 162 0" />
            <polygon class="456890" points="132 38 128 42 124 38 124 10 128 6 132 10 132 38" />
            <polygon class="2345689" points="162 40 166 44 162 48 134 48 130 44 134 40 162 40" />
            <polygon class="2356890" points="162 80 166 84 162 88 134 88 130 84 134 80 162 80" />
            <polygon class="2680" points="132 78 128 82 124 78 124 50 128 46 132 50 132 78" />
            <polygon class="134567890" points="172 78 168 82 164 78 164 50 168 46 172 50 172 78" />
          </g>
          <g class="digit digit-2">
            <polygon class="12347890" points="104 38 100 42 96 38 96 10 100 6 104 10 104 38" />
            <polygon class="23567890" points="94 0 98 4 94 8 66 8 62 4 66 0 94 0" />
            <polygon class="456890" points="64 38 60 42 56 38 56 10 60 6 64 10 64 38" />
            <polygon class="2345689" points="94 40 98 44 94 48 66 48 62 44 66 40 94 40" />
            <polygon class="2356890" points="94 80 98 84 94 88 66 88 62 84 66 80 94 80" />
            <polygon class="2680" points="64 78 60 82 56 78 56 50 60 46 64 50 64 78" />
            <polygon class="134567890" points="104 78 100 82 96 78 96 50 100 46 104 50 104 78" />
          </g>
          <g id="digit" class="digit digit-1">
            <polygon class="12347890" points="48 38 44 42 40 38 40 10 44 6 48 10 48 38" />
            <polygon class="23567890" points="38 0 42 4 38 8 10 8 6 4 10 0 38 0" />
            <polygon class="456890" points="8 38 4 42 0 38 0 10 4 6 8 10 8 38" />
            <polygon class="2345689" points="38 40 42 44 38 48 10 48 6 44 10 40 38 40" />
            <polygon class="2356890" points="38 80 42 84 38 88 10 88 6 84 10 80 38 80" />
            <polygon class="2680" points="8 78 4 82 0 78 0 50 4 46 8 50 8 78" />
            <polygon class="134567890" points="48 78 44 82 40 78 40 50 44 46 48 50 48 78" />
          </g>
        </svg>
      </div>

      <div class="button-container">
        <button id="displayBtn">Clock</button>
        <button id="stopBtn">Stop</button>
        <input type="color" name="" id="colorPicker" value="#e81b23" />

        <!-- <button id="timeBtn">Time</button>
          <button id="chaosBtn">Chaos</button>
          <button id="cleanBtn">Clean</button> -->
      </div>
    </div>
    <div class="scanlines"></div>
  </body>
</html>