-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
337 lines (300 loc) · 26.7 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sun Clock</title>
<meta name="description" content="A 24-hour clock that shows sunrise, sunset, golden hour, and twilight times for your current location. It also shows the current position and phase of the moon, and its rising and setting times.">
<meta name="keywords" content="24-hour, clock, sunrise, sunset, twilight, dawn, dusk, moon, moonrise, moonset, moon phase,">
<meta name="author" content="Geoff Pack">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/colors.css">
<link rel="icon" type="image/png" href="icons/icon_512.png">
<link rel="icon" type="image/svg+xml" href="icons/icon.svg">
<!-- iOS -->
<link rel="apple-touch-icon" type="image/png" href="icons/icon.png">
<link rel="apple-touch-startup-image" href="icons/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" -->
<!-- script src="https://raw.githubusercontent.com/mourner/suncalc/master/suncalc.js"></script -->
<script src="libs/suncalc/suncalc.js"></script>
<!-- script src="https://raw.githubusercontent.com/cosinekitty/astronomy/master/source/js/astronomy.js"></script -->
<script src="libs/astronomy/astronomy.browser.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/clock.js"></script>
<script src="scripts/calendar.js"></script>
</head>
<body>
<nav id="nav1">
<a href="#" title="Clock">
<svg width="26" height="26" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="20" cy="20" r="15" stroke="currentColor" stroke-width="3.5" fill="none"/>
<g transform="translate(20,20)">
<g id="clockIconHours">
<line x1="0" y1="0" x2="0" y2="8" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" />
</g>
<g id="clockIconMinutes">
<line x1="0" y1="0" x2="0" y2="-10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
</g>
</g>
</svg>
</a>
<a href="#calendar" title="Calendar">
<svg width="26" height="26" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="6" y="6" width="28" height="28" rx="6" stroke="currentColor" fill="none" stroke-width="3.5" />
<text id="calendarIconMonth" x="20" y="16.5" text-anchor="middle" fill="currentColor" stroke="currentColor" stroke-width="0.7" style="font:8px sans-serif;">JAN</text>
<text id="calendarIconDate" x="20" y="30" text-anchor="middle" fill="currentColor" stroke="currentColor" stroke-width="1.0" style="font:15px sans-serif;">0</text>
</svg>
</a>
<a href="#about" title="About">
<svg width="26" height="26" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="20" cy="20" r="15" stroke="currentColor" stroke-width="3.5" fill="none"/>
<circle cx="20" cy="12.5" r="2" stroke="none" fill="currentColor"/>
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" d="M20.5 17.5 L20.5 26.5 M17.0 17.5 L20.0 17.5 M16.0 26.5 L25.0 26.5" />
</svg>
</a>
</nav>
<nav id="nav2">
<a href="#fullscreen" id="fullscreen" title="toggle full-screen">
<svg width="26" height="26" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path class="enter" fill="none" stroke="currentColor" stroke-width="3.5" d="M6 16 v-10 h10 M24 6 h10 v10 M34 24 v10 h-10 M16 34 h-10 v-10" />
<path class="exit" fill="none" stroke="currentColor" stroke-width="3.5" d="M6 16 h10 v-10 M24 6 v10 h10 M34 24 h-10 v10 M16 34 v-10 h-10" />
</svg>
</a>
<a href="#settings" title="Settings">
<svg width="26" height="26" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path fill="currentColor" d="m15.67 36.96-.8-5.38q-.62-.25-1.3-.64-.7-.4-1.24-.82L7.3 32.34l-4.33-7.62 4.46-3.34-.07-.66-.02-.71.02-.7.07-.68-4.46-3.33 4.33-7.62 5.04 2.2q.54-.41 1.23-.8.69-.4 1.31-.61l.8-5.42h8.66l.8 5.38q.62.25 1.33.64.7.4 1.2.81l5.05-2.2 4.33 7.62-4.5 3.3q.09.33.1.7.03.38.03.71l-.02.7q-.02.38-.1.72l4.5 3.29-4.38 7.62-5-2.2q-.55.41-1.21.83-.67.41-1.34.62l-.79 5.38ZM20 25.54q2.3 0 3.92-1.62 1.62-1.63 1.62-3.92 0-2.3-1.62-3.92-1.63-1.62-3.92-1.62-2.3 0-3.92 1.62-1.62 1.63-1.62 3.92 0 2.3 1.62 3.92 1.63 1.62 3.92 1.62Zm0-2.75q-1.17 0-1.98-.81T17.21 20q0-1.17.81-1.98t1.98-.81q1.17 0 1.98.81t.81 1.98q0 1.17-.81 1.98t-1.98.81ZM20 20Zm-1.7 13.8h3.37l.58-4.6q1.38-.32 2.58-1.01 1.21-.69 2.17-1.69l4.33 1.83 1.55-2.79-3.8-2.79q.17-.67.27-1.35.1-.7.1-1.4t-.07-1.4q-.09-.68-.3-1.35l3.8-2.8-1.55-2.78L27 13.5q-.92-1.04-2.13-1.77-1.2-.73-2.62-.94l-.54-4.58h-3.38l-.58 4.54q-1.42.33-2.63 1.02-1.2.69-2.16 1.73l-4.3-1.83-1.54 2.79 3.75 2.75q-.16.7-.27 1.4-.1.68-.1 1.39 0 .7.1 1.4.1.68.28 1.35l-3.76 2.8 1.55 2.78 4.29-1.83q1 1 2.2 1.7 1.21.72 2.59 1.05Z" />
</svg>
</a>
</nav>
<svg id="clock" width="600" height="600" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<circle cx="150" cy="150" r="130" fill="none" stroke="#777" stroke-width="0.5" />
<!-- technique from: https://css-tricks.com/my-struggle-to-use-and-animate-a-conic-gradient-in-svg/ -->
<clipPath id="clip">
<circle cx="150" cy="150" r="130" />
</clipPath>
<foreignObject x="0" y="0" width="300" height="300" clip-path="url(#clip)">
<div xmlns="http://www.w3.org/1999/xhtml" class="skyBackground"></div>
</foreignObject>
<g transform="translate(150,150)" font-family="Geneva, Helvetica Neue, Helvetica, Arial" text-anchor="middle">
<circle id="clockFace" cx="0" cy="0" r="130" fill="none" stroke="#000" stroke-width="0.5" />
<circle cx="0" cy="0" r="136" fill="rgba(255,255,255,0.33)" stroke="#000" stroke-width="0.33" />
<circle cx="0" cy="0" r="130.25" fill="none" stroke="#000" stroke-width="0.25" />
<g id="arcs" fill="none" stroke="none" stroke-width="0"></g>
<path id="noon" d="M 0,0 L 0,0" stroke="#fff" stroke-width="0.5" />
<path id="midnight" d="M 0,0 L 0,0" stroke="#000" stroke-width="0.5" />
<g id="hourMarks" fill="none" stroke="#777" stroke-width="1.0"></g>
<g id="hourMarks2" fill="none" stroke="#777" stroke-width="1.0"></g>
<g id="minuteMarks" fill="none" stroke="#000" stroke-width="0.5"></g>
<g id="hourNumbers" fill="#000" font-size="12px" style="letter-spacing:-1;"></g>
<g id="minuteNumbers" fill="#000" font-size="5px" style="letter-spacing:0.8;"></g>
<g id="moonHand" cursor="crosshair" transform="rotate(180)">
<line x1="0" y1="0" x2="0" y2="80" fill="none" stroke="#aaa" stroke-width="1" />
<g id="moonIcon" transform="translate(0 80) rotate(180)">
<circle cx="0" cy="0" r="12" fill="transparent" />
<circle cx="0" cy="0" r="6" fill="#000" stroke="#000" stroke-width="0" />
</g>
</g>
<g id="hourHand" cursor="crosshair" transform="rotate(180)">
<line x1="0" y1="0" x2="0" y2="100" fill="none" stroke="#f70" stroke-width="4" stroke-linecap="round" />
<circle cx="0" cy="0" r="3.9" fill="#f70" stroke="#f60" stroke-width="0" />
</g>
<g id="minuteHand" transform="rotate(0)">
<line x1="0" y1="0" x2="0" y2="-119" fill="none" stroke="#090" stroke-width="2" stroke-linecap="round" />
<circle cx="0" cy="0" r="4.0" fill="#090" stroke="#0a0" stroke-width="0" />
</g>
<g id="secondHand" transform="rotate(0)">
<line x1="0" y1="0" x2="0" y2="-129" fill="none" stroke="#f00" stroke-width="1" stroke-linecap="round" />
<circle cx="0" cy="0" r="4.1" fill="#f00" stroke="#e00" stroke-width="0" />
</g>
<circle id="centerCircle" cursor="crosshair" cx="0" cy="0" r="15" fill="transparent" />
</g>
</svg>
<svg id="calendar" width="600" height="600" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g transform="translate(150,150)">
<g id="calendarFace">
<circle cx="0" cy="0" r="136" fill="none" stroke="currentColor" stroke-width="0.5" />
<circle cx="0" cy="0" r="102" fill="none" stroke="currentColor" stroke-width="0.5" />
<g id="monthArcs" fill="none" stroke="currentColor" stroke-width="0.5"></g>
<g id="monthNames" fill="currentColor" font-size="6px" font-family="Geneva, Helvetica Neue, Helvetica, Arial" text-anchor="middle"></g>
<g id="dayMarks" fill="none" stroke="currentColor" stroke-width="0.5"></g>
</g>
<g id="dateHand2">
<path d="M 0,-5 L 0,-130" stroke="#999" stroke-width="1.0" />
</g>
<g id="calendarOverlay">
<circle cx="0" cy="0" r="136" fill="rgba(0,255,0,0)" cursor="pointer" />
</g>
<g id="astronomicalEvents" cursor="crosshair" fill="rgba(0,255,0,0)" stroke-width="0">
<g id="springEquinox" data-title="Vernal (Spring) Equinox" data-date="">
<path d="M 0,0 L -9,-101 L 9,-101 z" />
<path d="M 0,-5 L 0,-101.9" stroke-width="0.75" />
</g>
<g id="summerSolstice" data-title="Summer Solstice" data-date="">
<path d="M 0,0 L -9,-101 L 9,-101 z" />
<path d="M 0,-5 L 0,-101.9" stroke-width="0.75" />
</g>
<g id="autumnEquinox" data-title="Autumnal (Fall) Equinox" data-date="">
<path d="M 0,0 L -9,-101 L 9,-101 z" />
<path d="M 0,-5 L 0,-101.9" stroke-width="0.75" />
</g>
<g id="winterSolstice" data-title="Winter Solstice" data-date="">
<path d="M 0,0 L -9,-101 L 9,-101 z" />
<path d="M 0,-5 L 0,-101.9" stroke-width="0.75" />
</g>
<g id="perihelion" data-title="Perihelion" data-date="">
<path d="M 0,0 L -9,-101 L 9,-101 z" />
<path d="M 0,-5 L 0,-101.9" stroke-width="0.75" />
</g>
<g id="aphelion" data-title="Aphelion" data-date="">
<path d="M 0,0 L -9,-101 L 9,-101 z" />
<path d="M 0,-5 L 0,-101.9" stroke-width="0.75" />
</g>
</g>
<g id="dateHand">
<path d="M 0,0 L 0,-130" stroke="#f30" stroke-width="1.5" />
<circle cx="0" cy="0" r="3" fill="#f30" />
</g>
</g>
</svg>
<div id="info1" class="info">
<h1>Sun Clock</h1>
<h3 id="dateText">Getting date…</h3>
<p id="timeText"></p>
<p id="location">Getting location…</p>
<p id="mainTimes"></p>
<p><small><a href="#allTimes">show all times</a></small></p>
<h1>Sun Calendar</h1>
<noscript>
<p><b>This site requires Javascript!</b></p>
</noscript>
</div>
<div id="info2" class="info"></div>
<section id="about">
<div>
<h2>About</h2>
<p>Sun Clock is a 24-hour clock that displays the position of the sun, and times of <a href="https://en.wikipedia.org/wiki/Sunrise" target="wikipedia">sunrise</a>, <a href="https://en.wikipedia.org/wiki/Noon#Solar_noon" target="wikipedia">solar noon</a>, <a href="https://en.wikipedia.org/wiki/Sunset" target="wikipedia">sunset</a>, <a href="https://en.wikipedia.org/wiki/Golden_hour_(photography)" target="wikipedia">golden hour</a>, and <a href="https://en.wikipedia.org/wiki/Twilight" target="wikipedia">twilight</a> for your current location.</p>
<p>It also shows the position and <a href="https://en.wikipedia.org/wiki/Lunar_phase" target="wikipedia">phase</a> of the moon, and its rising and setting times.</p>
<noscript><p><b>This site requires JavaScript to work.</b> Page weight is under 50 KB, and there's no advertising or tracking (only a tiny stats script from <a href="https://simpleanalytics.com">Simple Analytics</a>). It's worth it, honest ;)</p></noscript>
<p>In the Northern Hemisphere the Sun moves across the sky in a clockwise direction; in the Southern Hemisphere, it moves anti-clockwise. Sun Clock matches this by setting its direction of rotation based on your latitude<a href="#note1"><sup>1</sup></a>. You can change it in the settings if you wish.</p>
<p id="note1"><small>1. Ideally you want the clock to turn in the same direction as the sun, regardless of which hemisphere you are in. If you are facing North when at your computer set it to anti-clockwise.</small></p>
<h3>Tips</h3>
<p>Tap on or hover over the segments to get their start and end times. You can also tap/hover on the moon, the hour hand, and the centre dot.</p>
<p>See <a href="#updates">updates</a> for change history.</p>
<h3>Support</h3>
<p>Sun Clock is free to use, and contains no advertising. If you would like to help support Sun Clock, please —</p>
<p id="bmc">
<a href="https://buymeacoffee.com/virtualgeoff" target="_blank" title="Buy Me a Coffee">
<svg width="160" height="35" viewBox="0 0 4169 913" xmlns="http://www.w3.org/2000/svg">
<path d="M565 212h-2 2ZM574 278h-1 1ZM565 212ZM565 212ZM573 277h2v-1l-2 1ZM567 214l-1-1-1-1 2 2ZM307 847l-2 1h1l1-1ZM458 817c0-1-1-1-1 3l1-1v-2ZM442 847l-2 1h1l1-1ZM201 854l-2-1 1 1h1ZM177 831l-1-3 1 3Z" fill="#0D0C22"/>
<path d="M337 422c-32 14-70 30-118 30-20 0-40-3-60-9l34 343a57 57 0 0 0 57 53l63 2 68-2a57 57 0 0 0 57-53l36-378c-16-6-32-10-51-10-31 0-56 11-86 24Z" fill="#FFF"/>
<path d="M56 276h1-1ZM628 244l-5-25c-5-23-15-45-38-53-8-2-16-4-22-9s-7-14-9-22l-7-43c-2-12-4-26-10-37-7-16-22-24-37-30l-24-8C438 7 398 4 359 1c-47-2-94-1-141 3-35 3-71 7-105 19-12 4-24 10-33 19a37 37 0 0 0-7 43c6 11 16 18 26 23 14 6 28 10 43 14a952 952 0 0 0 298 5c13-2 22-20 18-32-5-15-17-20-32-18l-6 1h-2a882 882 0 0 1-223 1l-4-1h-1l-5-1a475 475 0 0 1-30-6 4 4 0 0 1 3-7 447 447 0 0 1 32-5l15-2a954 954 0 0 1 207 1h5l4 1 30 5c15 4 34 5 41 21l4 16 1 7v1a107615 107615 0 0 0 11 53 9 9 0 0 1-8 7h-4a1191 1191 0 0 1-180 11 1411 1411 0 0 1-179-11l-5-1-11-1-37-7c-15-2-29-1-43 7-11 6-20 15-25 26-6 12-8 25-11 38-2 13-6 27-5 40 4 29 24 52 52 58a1478 1478 0 0 0 432 14 18 18 0 0 1 20 20l-2 27-17 160a128801 128801 0 0 1-22 216c-2 16-2 32-5 48-5 24-21 39-45 44-22 5-44 8-67 8l-74-1c-27 0-60-2-80-22-18-17-21-45-23-68l-10-94-18-173-12-112v-6c-2-13-11-26-26-25-13 0-27 11-26 25l9 83 18 172 15 147 3 28c6 51 45 79 93 87 28 4 57 5 86 5 37 1 74 2 110-4 53-10 94-46 99-101l5-48 17-159 17-174 9-79a18 18 0 0 1 14-16c16-3 30-8 41-20 18-18 21-43 15-67ZM52 261l-1 3 1-3Zm1 12 1 1-1-1Zm2 2s0 1 0 0Zm3 2Zm514-4c-6 6-14 8-22 9a1551 1551 0 0 1-476-1c-7-1-14-2-18-7-9-9-4-27-2-38 2-10 5-23 17-24 19-3 40 5 58 8l66 8a1276 1276 0 0 0 336-13c15-3 32-8 41 8 6 10 7 24 6 37 0 5-3 10-6 13Z" fill="#0D0C22"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1129 529c-5 10-13 19-22 26-10 8-21 14-33 19-13 5-25 8-38 9-13 2-25 2-37 0s-22-6-30-12l9-97a357 357 0 0 1 73-16c14-2 27-1 40 0 12 2 22 6 29 12l10 12 5 13c1 12-1 23-6 34ZM993 321a141 141 0 0 1 77-17c8 1 16 3 22 7 7 4 12 10 15 18 4 7 5 17 3 28-1 10-5 17-11 24-6 6-13 12-22 16s-18 8-28 10a237 237 0 0 1-65 8l9-94Zm184 145c-5-11-11-20-19-28s-18-13-29-17c5-4 10-10 14-18a161 161 0 0 0 19-57c1-10 1-18-1-26-5-17-13-31-24-41a89 89 0 0 0-38-21c-15-4-31-5-48-3-18 2-35 7-54 13l1-4v-5c0-5-2-9-6-12-5-3-10-5-16-6-6 0-11 1-17 4-5 3-9 9-11 17a12727 12727 0 0 0-23 258l-8 84c1 8 3 14 7 18 3 5 7 8 12 8 5 1 10 1 15-2s10-7 14-13c12 6 25 11 40 13h45a212 212 0 0 0 86-31c13-8 23-18 31-28 9-10 14-21 17-33a116 116 0 0 0-7-70ZM1613 701a314 314 0 0 1-17 60c-4 9-9 16-14 22-4 5-10 8-15 7s-8-4-9-9v-18c1-8 4-16 7-25a219 219 0 0 1 29-55l20-21c1 2 2 6 2 13l-3 26Zm152-194c-4-4-9-6-15-7s-12 3-18 10c-3 7-8 14-14 20a190 190 0 0 1-51 40 278 278 0 0 1-1-64 419 419 0 0 1 18-97c0-8-2-15-6-20s-9-8-14-10c-6-1-11 0-17 3-6 2-11 8-15 15a2985 2985 0 0 1-28 70 375 375 0 0 1-43 69c-9 9-18 16-28 21s-21 8-32 7c-6-1-9-5-12-12-2-6-4-15-4-24l1-33a462 462 0 0 1 21-94c3-9 3-16 0-22-4-5-9-9-15-11s-13-2-20 0-12 7-15 14a346 346 0 0 0-23 88c-3 16-4 32-5 48v3c-6 17-12 30-18 39-8 11-16 16-26 15-4-2-7-6-8-13-2-6-2-14-2-24a333 333 0 0 1 11-69 2189 2189 0 0 1 16-76c0-11-3-19-9-24-6-6-14-8-24-7-8 3-13 7-16 12-4 5-7 11-9 18l-5 23a1047 1047 0 0 1-22 87c-5 16-11 31-17 44-7 14-13 24-21 32-7 8-15 12-24 10-5-1-8-6-9-15-2-8-2-19-1-33a426 426 0 0 1 14-87 1924 1924 0 0 1 13-58c0-9-2-16-6-21s-9-8-14-10c-6-1-12 0-17 3-6 2-11 7-15 15a753 753 0 0 1-13 60 1678 1678 0 0 0-13 84 349 349 0 0 0 2 59c1 10 4 19 8 27 3 8 9 15 16 21 7 5 16 8 26 9 12 0 21-1 29-3 9-2 16-6 23-10l18-17 16-22c5 12 12 20 20 27 8 6 17 10 25 11 9 1 18 0 28-4 9-4 17-10 25-19 5-5 9-12 14-19 1 4 3 7 6 10 7 9 17 16 29 19 14 4 27 4 40 2s25-7 36-13a173 173 0 0 0 59-50 428 428 0 0 0-1 39 298 298 0 0 0-101 134c-5 17-8 33-8 48s4 28 11 38c7 11 18 19 33 24 16 5 30 5 43 1 12-5 23-13 32-24s16-24 22-40a322 322 0 0 0 20-142c26-11 47-24 63-41 17-16 30-33 41-51 3-5 4-10 3-16-1-7-3-12-7-17ZM2329 479a215 215 0 0 1 10-44c3-7 6-13 10-18 3-5 7-9 11-11 4-3 8-2 13 0 4 3 7 9 8 17 1 9 0 18-3 28s-9 19-17 28c-8 8-19 14-33 16l1-16Zm155 18h-14c-5 1-8 4-9 9a153 153 0 0 1-56 81c-10 7-20 12-30 15-11 3-19 4-26 1-7-2-12-7-16-13s-7-13-9-22-3-17-3-27c17 2 32-1 45-9 13-7 25-17 34-29s16-25 21-40 7-30 8-45c0-14-2-26-6-35-5-10-11-18-19-23-7-5-16-8-26-9-9-1-19 0-30 4-12 4-22 11-31 20-8 9-15 20-21 33a360 360 0 0 0-23 118l-2 4c-4 10-10 20-16 31-6 10-13 18-20 25-8 7-15 9-23 7-5-1-8-7-8-16-1-10 0-22 1-37l5-47 3-49c0-13-2-26-7-38-5-13-12-23-21-31s-19-14-31-16c-11-3-24-1-37 5-14 6-24 15-32 26l-22 36c-2-10-6-18-10-27-5-8-11-15-17-21-7-6-15-11-23-14-8-4-17-5-26-5s-17 1-25 5c-8 3-15 8-21 13s-12 11-17 18l-13 20a430 430 0 0 0-6-35c-2-4-5-7-9-9-3-2-8-3-15-3-3 0-6 0-10 2l-8 5c-3 3-5 5-6 9-1 3-2 7-1 12l2 12a312 312 0 0 1 7 84 730 730 0 0 1-12 124c-1 6 2 11 7 15 6 4 12 6 19 7 6 1 13-1 19-4s10-8 11-15a470 470 0 0 1 27-136c5-14 10-26 16-37 5-10 12-19 18-25 6-7 13-10 19-10 9 0 15 4 20 12 4 7 8 17 10 29s3 25 2 39a600 600 0 0 1-8 97c0 7 3 12 8 16s11 6 17 7c7 1 13 0 18-4 6-3 9-8 10-15a662 662 0 0 1 30-123c7-17 15-31 23-41 8-11 17-17 26-17 5 0 8 4 11 10 2 7 4 16 4 27l-2 25a719 719 0 0 1-10 56 227 227 0 0 0 1 57c1 10 4 19 8 28 4 8 10 16 17 22 8 6 17 9 28 9 17 0 32-4 45-11s25-17 34-28l2-2 2 5c6 13 15 23 26 30s24 11 39 12 31-2 48-8a128 128 0 0 0 60-44c9-10 16-22 22-35l19-46c2-5 1-9-3-13-3-4-7-6-12-8ZM2727 448a450 450 0 0 1-16 61c-4 12-9 22-14 31-6 9-13 16-20 21-7 6-16 8-25 7-5-1-9-4-11-10-3-6-4-13-4-22a172 172 0 0 1 11-63c3-11 8-20 13-29 6-9 12-16 19-21s15-7 23-7 17 5 27 13l-3 19Zm158 34c-4-3-9-3-14-2s-8 6-10 14l-8 29-16 32c-6 10-13 19-21 25-8 7-16 10-25 9-8 0-13-4-16-11s-4-16-4-26a601 601 0 0 1 21-113l7-30c3-8 2-14-2-19-4-6-9-9-14-11-6-3-12-3-18-2s-10 4-12 9a90 90 0 0 0-50-24c-17-1-32 2-45 11-14 8-26 20-37 36a228 228 0 0 0-38 108c-1 19 0 37 4 53s12 29 22 39c11 10 25 15 43 15 8 0 16-2 24-5a115 115 0 0 0 37-26l11-12a72 72 0 0 0 27 45 64 64 0 0 0 38 14c14 0 27-5 39-14 13-10 24-21 33-35a223 223 0 0 0 37-84c2-5 1-10-1-14-3-5-7-9-12-11ZM3690 728c-2 10-6 18-12 25-5 7-12 11-20 11-5 0-9-2-11-8-3-6-5-13-6-22s-2-19-1-30a587 587 0 0 1 6-83c10 1 19 5 25 13 7 7 12 16 16 27a121 121 0 0 1 3 67Zm-162 0c-2 10-6 18-12 25-5 7-12 11-20 11-5 0-9-2-11-8-3-6-5-13-6-22l-1-30a568 568 0 0 1 6-83c10 1 19 5 26 13 6 7 11 16 15 27a121 121 0 0 1 3 67Zm-166-253-2 18c-1 6-2 9-4 11-3-2-7-6-12-14-5-7-9-16-11-25-3-9-4-19-3-28s6-16 14-21c4-2 6-1 9 2l6 14 3 20v23Zm-39 88a79 79 0 0 1-33 21c-6 2-11 2-16 1-14-2-24-8-31-17s-12-19-14-31-1-25 1-39c2-13 6-26 12-38s13-22 21-30c8-9 16-14 26-16-4 15-5 31-4 47a119 119 0 0 0 27 69c6 7 13 13 21 18-2 6-6 11-10 15Zm494-84a215 215 0 0 1 11-44l9-18c4-5 8-9 12-11s8-2 12 0c5 3 7 9 8 17 1 9 0 18-3 28s-8 19-16 28c-9 8-19 14-33 16v-16Zm180 0a215 215 0 0 1 11-44c3-7 6-13 10-18 3-5 7-9 11-11s8-2 12 0c5 3 8 9 9 17 1 9 0 18-4 28-3 10-8 19-16 28-8 8-19 14-33 16v-16Zm168 26a28 28 0 0 0-27-8c-4 1-7 4-8 9a153 153 0 0 1-56 81c-10 7-20 12-30 15-11 3-20 4-26 1-7-2-13-7-17-13s-7-13-8-22l-4-27c17 2 33-1 46-9 13-7 24-17 34-29 9-12 16-25 21-40 4-15 7-30 8-45 0-14-2-26-7-35-4-10-10-18-18-23-7-5-16-8-26-9s-20 0-30 4c-12 4-22 11-31 20-8 9-15 20-21 33-6 12-10 25-14 39a358 358 0 0 0-9 81 161 161 0 0 1-23 36c-8 9-16 16-26 23-9 7-19 12-30 15-10 3-19 4-26 1-6-2-12-7-16-13s-7-13-9-22l-3-27c17 2 32-1 46-9 13-7 24-17 33-29 10-12 17-25 21-40 5-15 8-30 8-45 1-14-1-26-6-35-4-10-10-18-18-23s-16-8-26-9-20 0-30 4c-12 4-23 11-31 20-9 9-16 20-21 33-6 12-10 25-14 39a360 360 0 0 0-9 65l-8 8a268 268 0 0 1-68 39c-12 4-25 6-38 7l28-295c2-7 1-12-3-17-3-5-8-8-13-10-6-2-12-1-19 1-6 2-11 7-15 14a3732 3732 0 0 0-26 251v3l-8 7a269 269 0 0 1-68 39c-12 4-25 6-37 7l27-295c2-7 1-12-2-17-4-5-9-8-14-10-6-2-12-1-18 1-7 2-12 7-16 14l-7 46a3634 3634 0 0 0-19 205v1l-15 6c-6 2-12 3-20 3a174 174 0 0 0 5-38l1-22-2-19c-1-13-4-25-8-37-4-11-9-21-16-28-7-8-16-13-26-16s-22-2-36 3a109 109 0 0 0-97 33 184 184 0 0 0-46 116 130 130 0 0 1-65 63l-23 6c-7 2-15 2-22 1s-14-5-20-10c-4-5-8-11-11-20-2-10-4-20-4-32a258 258 0 0 1 8-73c4-11 8-22 13-31s11-15 18-19c4 1 6 3 7 7l1 14-2 17-2 15c2 8 5 14 9 18 4 5 9 7 14 8 6 1 11 0 16-4 5-3 10-8 13-15h1l7-56c1-8 0-15-4-21s-10-9-17-10c-8-13-20-19-35-20-14-1-29 4-45 15-10 6-18 16-25 28-8 12-13 25-18 40a254 254 0 0 0-3 138c5 13 11 25 18 34 7 8 14 14 23 18 8 3 17 6 26 7 9 0 18 0 27-2 9-1 17-3 25-6a253 253 0 0 0 64-37l16-14c2 6 4 11 8 16 8 14 18 24 32 33 14 8 31 12 51 12a120 120 0 0 0 104-63c17 0 34-3 51-9v6a522 522 0 0 0-4 68 836 836 0 0 0 0 94c1 16 4 31 9 44s12 24 20 33c9 10 21 15 35 17 15 2 28-1 39-8s20-18 27-31c7-12 12-27 15-44a217 217 0 0 0-7-100c-5-15-12-27-21-37 5-2 12-4 19-9l23-14 6-3-1 22-2 36a856 856 0 0 0 0 94c1 16 4 31 9 44s12 24 20 33c9 10 21 15 35 17 15 2 28-1 39-8s20-18 27-31c7-12 12-27 15-44a217 217 0 0 0-7-100c-5-15-12-27-21-37 5-2 11-4 19-9a368 368 0 0 0 35-22c2 15 5 27 10 38 7 13 15 23 26 30s24 11 39 12 31-2 49-8a128 128 0 0 0 60-44l2-2 4 12c7 13 16 23 27 30s24 11 38 12a135 135 0 0 0 83-26c10-7 19-16 27-26l21-35 19-46c1-5 0-9-3-13Z" fill="currentColor"/>
</svg>
</a>
</p>
<h3>Privacy</h3>
<p>We collect aggregate user stats only. Your location and settings are stored in your web browser and are not sent to the server. No cookies are saved or sent.</p>
<br>
<p class="center"><small>
<a href="#" data-address="6d 61 69 6c 74 6f 3a 73 75 6e 63 6c 6f 63 6b 40 76 69 72 74 75 61 6c 67 65 6f 66 66 2e 63 6f 6d">Feedback</a> 〜
<a href="https://github.com/virtualgeoff/sunclock">Source</a> 〜
<a href="https://github.com/mourner/suncalc">SunCalc</a>
</small></p>
<a href="#" class="close">✕</a>
</div>
</section>
<section id="updates">
<div>
<h2>Updates</h2>
<h3>2024-05-23</h3>
<p>Added the option to show the <i>odd</i> numbers on the clock face.</p>
<p>The "<i>use 12-hour times</i>" option now applies to the numbers on the clock face also.</p>
<h3>2024-02-13</h3>
<p>Added an <a href="#calendar">annual calendar</a>. Try it out. <a href="#" data-address="6d 61 69 6c 74 6f 3a 73 75 6e 63 6c 6f 63 6b 40 76 69 72 74 75 61 6c 67 65 6f 66 66 2e 63 6f 6d">Feedback welcome!</a></p>
<h3>2023-10-20</h3>
<p>Sun Clock is now a <a href="https://en.wikipedia.org/wiki/Progressive_web_app">Progressive Web App</a>. This means you can install it on your device homepage and it will be available when your are offline.</p>
<h3>2022-10-24</h3>
<p>Added auto-color mode (dynamic colors that change with the time periods.)</p>
<h3>2022-09-07</h3>
<p>Added dark mode.</p>
<h3>2022-05-27</h3>
<p>Live!</p>
<a href="#" class="close">✕</a>
</div>
</section>
<section id="allTimes">
<div>
<h2>All Times</h2>
<p>Times update at Solar Midnight</p>
<table>
<thead>
<tr>
<th scope="col">Event</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<a href="#" class="close">✕</a>
</div>
</section>
<section id="settings">
<div>
<h2>Settings</h2>
<form id="settingsForm" onsubmit="return App.updateLocation(this);">
<p>
<label><input type="checkbox" name="showMoon" onchange="App.setOption(this)" checked> show moon</label>
</p>
<p>
<label><input type="checkbox" name="showHourNumbers" onchange="App.setOption(this)" checked> show hour numbers</label><br>
<label><input type="checkbox" name="showOddHourNumbers" onchange="App.setOption(this)"> show odd hour numbers</label><br>
<label><input type="checkbox" name="showHourMarks" onchange="App.setOption(this)" checked> show hour marks</label><br>
</p>
<p>
<label><input type="checkbox" name="showMinuteHand" onchange="App.setOption(this)" checked> show minutes hand</label><br>
<label><input type="checkbox" name="showMinuteMarks" onchange="App.setOption(this)" checked> show minute marks</label><br>
<label><input type="checkbox" name="showMinuteNumbers" onchange="App.setOption(this)" checked> show minute numbers</label><br>
</p>
<p>
<label><input type="checkbox" name="showSecondHand" onchange="App.setOption(this)" checked> show seconds hand</label>
</p>
<p>
<label><input type="checkbox" name="hour12" onchange="App.setOption(this)"> use 12-hour times</label>
</p>
<p>
<label><input type="checkbox" name="setDirectionManually" onchange="App.setOption(this)"> set direction manually</label>
</p>
<p id="setDirection">
<label><input type="radio" name="setDirection" id="direction_cw" value="clockwise" onchange="App.setOption(this)"> clockwise</label>
<label><input type="radio" name="setDirection" id="direction_ccw" value="anticlockwise" onchange="App.setOption(this)"> anti-clockwise</label>
</p>
<p>
<label><input type="checkbox" name="setLocationManually" onchange="App.setOption(this)"> set location manually</label>
</p>
<p id="setLocation">
<label for="latitude">Latitude </label> <input name="latitude" id="latitude" type="number" min="-90" max="90" step="any" placeholder="-90 to 90" required> <a href="#note2">ℹ︎</a><br>
<span id="note2"><small>Use <a href="https://en.wikipedia.org/wiki/Decimal_degrees" target="_blank">decimal degrees</a>. Should be a number between -90.0 and 90.0<br>1–2 decimal places is sufficient.</small></span>
<label for="longitude">Longitude </label> <input name="longitude" id="longitude" type="number" min="-180" max="180" step="any" placeholder="-180 to 180" required> <a href="#note3">ℹ︎</a><br>
<span id="note3"><small>Use <a href="https://en.wikipedia.org/wiki/Decimal_degrees" target="_blank">decimal degrees</a>. Should be a number between -180.0 and 180.0<br>1–2 decimal places is sufficient.</small></span>
<label></label> <input type="submit" value="Update">
</p>
<h3>Color mode:</h3>
<p id="setColorScheme">
<label><input type="radio" name="setColorScheme" id="scheme_light" value="light" onchange="App.setOption(this)"> light</label>
<label><input type="radio" name="setColorScheme" id="scheme_dark" value="dark" onchange="App.setOption(this)"> dark</label>
<label><input type="radio" name="setColorScheme" id="scheme_auto" value="auto" onchange="App.setOption(this)"> auto</label><br>
<label><input type="radio" name="setColorScheme" id="scheme_dynamic" value="dynamic" onchange="App.setOption(this)" checked> dynamic</label>
</p>
</form>
<a href="#" class="close">✕</a>
</div>
</section>
<!-- stats -->
<script async defer src="https://api.virtualgeoff.com/latest.js"></script>
<noscript><img src="https://api.virtualgeoff.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade"></noscript>
</body>
</html>