-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (135 loc) · 5.89 KB
/
index.html
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>PrimeTime</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<script src="dodecahedron.js"></script>
<script src="icosahedron.js"></script>
<script src="kleinohedron.js"></script>
</head>
<body>
<div id="time-container">
<div id="time">
<span id="hours-and-description"
><span id="hours"></span
><span id="hours-description"></span
></span
><span id="minutes"></span><span id="seconds"></span>
</div>
</div>
<div id="bottom">
<div id="settings">
<p>
<label>
<span>Minutes</span>
<input type="checkbox" id="show-seconds" checked>
<span class="slider"></span>
<span>Show seconds</span>
</label>
</p>
<p>
<label>
<span>Numbers</span>
<input type="checkbox" id="show-symmetries">
<span class="slider"></span>
<span>Symmetries</span>
</label>
</p>
<p>
Week starts on
<select id="week-start">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="0">Sunday</option>
</select>
</p>
</div>
<a id="github-link" href="https://github.com/amirlb/PrimeTime/" target="_blank">
<img id="github-logo" src="github-logo.png" alt="Source code">
Source code © 2021 Amir Livne Bar-on
</a>
</div>
<div id="help-button">
<svg id="help-button-info-sign" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="lightgray" stroke-width="8" />
<circle cx="50" cy="25" r="2.5" fill="none" stroke="lightgray" stroke-width="5" />
<path d="M42,40L50,40L50,70Q55,75,60,70" stroke="lightgray" stroke-width="8" />
</svg>
What am I looking at?
</div>
<div id="help-screen-background">
<div id="help-screen">
<svg id="help-screen-close-button" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="gray" />
<line x1="25" y1="25" x2="75" y2="75" stroke="white" stroke-width="4" stroke-linecap="round" />
<line x1="25" y1="75" x2="75" y2="25" stroke="white" stroke-width="4" stroke-linecap="round" />
</svg>
<div id="help-screen-primes">
<p>
In this clock, the day of week and the hour are indicated using
<a href="https://en.wikipedia.org/wiki/Prime_number" target="_blank">prime numbers</a>.
</p>
<p>
There is the same number of primes up to 1000 and hours in a week.
So it's possible to indicate what day and hour it is using a prime number
in the range 2, 3, 5, ..., 991, 997.
</p>
<p>
For example, <span id="help-current-prime"></span> is the
<span id="help-prime-index"></span> in the list.
This is <span id="help-place-in-list"></span> so today is the
<span id="help-day-index"></span> day of the week,
<span id="help-day-name"></span>.
Within that day it's the <span id="help-hour-calculation"></span>
hour, so the time now is <span id="help-hour-name"></span>.
</p>
<p>
For a different concept, try flipping the Symmetries switch.
</p>
</div>
<div id="help-screen-symmetries">
<p>
In this clock, the time is shown using
<a href="https://en.wikipedia.org/wiki/Symmetry_(geometry)" target="_blank">symmetries</a>
of geometric shapes (rotations that keep the shape exactly the same).
</p>
<p>
<span class="help-screen-highlight">The seconds hand</span>
shows the symmetries of a
<a href="https://en.wikipedia.org/wiki/Dodecahedron" target="_blank">dodecahedron</a>.
Each of the 12 faces can be brought to the front and rotated 5 different
ways, for a total of 5×12=60 rotations.
</p>
<p>
<span class="help-screen-highlight">The minutes hand</span>
shows the symmetries of an
<a href="https://en.wikipedia.org/wiki/Icosahedron" target="_blank">icosahedron</a>.
Each of the 20 faces can be brought to the front and rotated 3 different
ways, for a total of 3×20=60 rotations.
</p>
<p>
<span class="help-screen-highlight">The hours hand</span>
shows the symmetries of
<a href="https://en.wikipedia.org/wiki/Klein_quartic" target="_blank">Klein's quartic curve</a>.
This surface cannot be embedded in 3-dimensional space, but is a quotient of the
<a href="https://en.wikipedia.org/wiki/Hyperbolic_plane" target="_blank">hyperbolic plane</a>.
If we tile the hyperbolic plane with heptagons, this quotient leaves 24 heptagons,
and the 7×24=168 symmetries of their arrangement are the same as those of the Klein
quartic curve.
The view here shows this tiling using the
<a href="https://en.wikipedia.org/wiki/Klein_disk_model" target="_blank">Klein disk model</a>.
</p>
<p>
For a different concept, try flipping the Symmetries switch.
</p>
</div>
</div>
</div>
</html>