forked from jtheletter/dateclock
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (159 loc) · 11.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date Clock | Analog layers of date and time. An holistic horologe of cyclic progression.</title>
<!-- Base appearance. -->
<meta name="viewport" content="initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-navbutton-color" content="#777777">
<!-- realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=kPxzkAPK08">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=kPxzkAPK08">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=kPxzkAPK08">
<link rel="manifest" href="/manifest.json?v=kPxzkAPK08">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=kPxzkAPK08" color="#777777">
<link rel="shortcut icon" href="/favicon.ico?v=kPxzkAPK08">
<meta name="apple-mobile-web-app-title" content="Date Clock">
<meta name="application-name" content="Date Clock">
<meta name="msapplication-TileColor" content="#777777">
<meta name="theme-color" content="#777777">
<!-- SEO & share. -->
<meta name="robots" content="index, follow">
<meta name="description" content="Touch hands or digits to show names. Toggle time, orientation, and theme. Each dial is centrally aligned on its origin. Lunar year is defined from the first moon to be full after winter solstice, to the last moon to be full on or before winter solstice.">
<meta name="keywords" content="analog, animated, calendar, cyclic, date clock, daylight saving time, gregorian, holistic, horologe, lunar, moon, natural time, solar, standard time, wristwatch">
<meta name="author" content="Jay Pea">
<link rel="canonical" href="https://dateclock.net/">
<meta property="og:type" content="website">
<meta property="og:title" content="Date Clock">
<meta property="og:site_name" content="Date Clock">
<meta property="og:description" content="Analog layers of date and time. An holistic horologe of cyclic progression. Touch hands or digits to show names. Toggle months, time, orientation, and theme. Each dial is centrally aligned on its origin.">
<meta property="og:url" content="https://dateclock.net/">
<meta property="og:image" content="https://dateclock.net/dateclock-preview.png">
<meta property="og:image" content="https://dateclock.net/dateclock-dark-preview.png">
<meta property="og:image" content="https://dateclock.net/sketches/dateclock-sketch-1.jpg">
<meta property="og:image" content="https://dateclock.net/sketches/dateclock-sketch-2.jpg">
<meta property="og:image" content="https://dateclock.net/sketches/dateclock-sketches.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Date Clock">
<meta name="twitter:description" content="Analog layers of date and time. An holistic horologe of cyclic progression. Toggle time, orientation, and theme.">
<meta name="twitter:site" content="@DateClock">
<meta name="twitter:creator" content="@mr_jay_pea">
<meta name="twitter:image" content="https://dateclock.net/dateclock-preview.png">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "Date Clock",
"description": "Analog layers of date and time. An holistic horologe of cyclic progression.",
"url": "https://dateclock.net/",
"sameAs": [
"https://x.com/DateClock",
"https://www.facebook.com/DateClock/"
],
"logo": "https://dateclock.net/dateclock-logo-1.png",
"image": [
"https://dateclock.net/screenshots/dateclock-dark.png",
"https://dateclock.net/screenshots/dateclock-highlight.png",
"https://dateclock.net/screenshots/dateclock-info-dark.png",
"https://dateclock.net/screenshots/dateclock-info.png",
"https://dateclock.net/screenshots/dateclock-sundial.png",
"https://dateclock.net/screenshots/dateclock-wide-dark.png",
"https://dateclock.net/screenshots/dateclock-wide.png",
"https://dateclock.net/screenshots/dateclock.png"
]
}
</script>
<!-- Styles & scripts. -->
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="dateclock.css">
<script async src="dateclock.js"></script>
<!-- Analytics. -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-79M0MBZ7JD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-79M0MBZ7JD');
</script>
</head>
<body ontouchstart="">
<div class="wrap">
<input id="toggle-panel" type="checkbox">
<input id="toggle-month" type="checkbox">
<input id="toggle-time" type="checkbox">
<input id="toggle-orientation" type="checkbox">
<input id="toggle-theme" type="checkbox">
<div class="bg"></div>
<div class="fg upfront" id="fg"></div>
<div class="panel" id="panel">
<h1 class="panel-brand">DATE CLOCK</h1>
<p class="panel-p">Analog layers of date and time. An holistic hor­o­loge of cyc­lic progression.</p>
<p class="panel-p">Touch hands or digits to show names.</p>
<p class="panel-p">Toggle:</p>
<ul class="panel-ul">
<li class="panel-li">Gregorian vs lunar months.</li>
<li class="panel-li">Daylight Shifting (“Saving”) vs Stan­dard Time.</li>
<li class="panel-li">Origin at top vs bottom.</li>
<li class="panel-li">Colors.</li>
</ul>
<p class="panel-p">Each dial is centrally aligned on its origin:</p>
<ul class="panel-ul">
<li class="panel-li">First second of a minute is zero.</li>
<li class="panel-li">First minute of an hour is zero.</li>
<li class="panel-li">First hour of a day is zero.</li>
<li class="panel-li">First day of a month is one.</li>
<li class="panel-li">First month of a year is one.</li>
</ul>
<p class="panel-p">Lunar year is defined from first moon full af­ter winter sol­stice, to last moon full on or before winter solstice.</p>
<p class="panel-p">Years with thirteen full moons count the first as zero, so as to leap (tra­di­tion­al blue, belewe, be­tray­er moon).</p>
<p class="panel-p panel-link"><a href="sketches/" title="View">Original Sketches</a></p>
<p class="panel-p panel-link"><a href="https://github.com/jtheletter/dateclock" target="_blank" title="Visit">GitHub</a></p>
<p class="panel-p panel-link"><a href="https://x.com/DateClock" target="_blank" title="Visit">X</a></p>
<p class="panel-p panel-link"><a href="https://www.facebook.com/DateClock/" target="_blank" title="Visit">Facebook</a></p>
<p class="panel-p panel-link"><a href="https://calendardial.net/" target="_blank" title="Visit">Lunisolar Calendar Dial</a></p>
<p class="panel-p panel-link"><a href="https://jtheletter.com/" target="_blank" title="Visit">jtheletter.com</a></p>
<p class="panel-p panel-copyright">© 2009, 2018 Jay Pea</p>
<button class="reset-button" id="reset-button" title="Reset Clock"><small>Reset Clock</small><span></span></button>
</div>
<label class="toggle-label-panel" id="toggle-label-panel" for="toggle-panel" title="View Info"><small>View Info</small><span></span></label>
<div class="dial">
<p class="supertitle" id="supertitle-month">Month</p>
<p class="supertitle" id="supertitle-day">Day</p>
<p class="supertitle" id="supertitle-hour">Hour</p>
<p class="supertitle" id="supertitle-minute">Minute</p>
<p class="supertitle" id="supertitle-second">Second</p>
<h1 class="dial-brand">DATE CLOCK</h1>
<p class="dial-copyright">© 2009, 2018 JP</p>
<p class="utc-offset">UTC<span id="utc-offset"></span></p>
</div>
<div class="display-analog">
<div class="rule rule-hori"></div>
<div class="rule rule-vert"></div>
<p class="pip pip-month" id="pip-month"></p>
<p class="pip pip-day" id="pip-day"></p>
<p class="pip pip-hour" id="pip-hour"></p>
<p class="pip pip-minute" id="pip-minute"></p>
<div class="hand focal hand-month" id="hand-month"></div>
<div class="hand focal hand-day" id="hand-day"></div>
<div class="hand focal hand-hour" id="hand-hour"></div>
<div class="hand focal hand-minute" id="hand-minute"></div>
<div class="hand focal hand-second" id="hand-second"></div>
</div>
<p class="display-digital"><span class="digit focal digit-month" id="digit-month">00</span><span class="digit digit-hyphen">‐</span><span class="digit focal digit-day" id="digit-day">00</span><span class="digit">  </span><span class="digit focal digit-hour" id="digit-hour">00</span><span class="digit digit-colon-1">:</span><span class="digit focal digit-minute" id="digit-minute">00</span><span class="digit digit-colon-2">:</span><span class="digit focal digit-second" id="digit-second">00</span></p>
<div class="sep-hori"></div>
<div class="toggle-label-setting-wrap">
<label class="toggle-label-setting" id="toggle-label-month" for="toggle-month" title="Toggle Month"><span>Gregorian</span><span>Lunar</span></label>
<label class="toggle-label-setting" id="toggle-label-time" for="toggle-time" title="Toggle Time"><span>DST</span><span>Standard</span></label>
<label class="toggle-label-setting" id="toggle-label-orientation" for="toggle-orientation" title="Toggle Orientation"><span>Clock</span><span>Sundial</span></label>
<label class="toggle-label-setting" id="toggle-label-theme" for="toggle-theme" title="Toggle Theme"><span>Light</span><span>Dark</span></label>
</div>
<div class="ios-prompt" id="ios-prompt">
<button class="ios-prompt-close" id="ios-prompt-close" title="Close.">╳</button>
<p class="ios-prompt-p">Tap <span class="ios-share">Share</span> then <span class="ios-a2hs">Add to Home Screen</span> to save this app.</p>
</div>
</div>
</body>
</html>