-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (129 loc) · 4.49 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="description" content="doki⥁ is another internet time concept">
<title>⥁ doki is another internet time concept</title>
<link rel="stylesheet" href="https://unpkg.com/missing.css">
<link rel="stylesheet" href="./style.css">
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<header>
<h1>doki⥁ is another internet time concept</h1>
</header>
<main>
<section>
<div class="box">
<div class="titlebar">current time in doki ⥁</div>
<div id='doki' class="big center margin-block-start"></div>
</div>
<h3>Concept</h3>
<p><b>doki</b> is designed for easy scheduling over countries.</p>
<p><b>doki</b> is always UTC. Same doki means same time all over the world.</p>
<p>Easy to calculate to your local time.</p>
<p>Easy to read, easy to write. Just 4 letters.</p>
<p><b>10 doki</b> is an hour.</p>
<p><b>1 doki</b> is 6 minutes.</p>
<p><b>:1 doki</b> is 1 minute (optional).</p>
<p>The first letter indicates week in UTC.</p>
<table>
<tr>
<th>M</th>
<td><b>M</b>onday</td>
</tr>
<tr>
<th>T</th>
<td><b>T</b>uesday</td>
</tr>
<tr>
<th>W</th>
<td><b>W</b>ednesday</td>
</tr>
<tr>
<th>R</th>
<td>thu<b>R</b>sday</td>
</tr>
<tr>
<th>F</th>
<td><b>F</b>riday</td>
</tr>
<tr>
<th>A</th>
<td>s<b>A</b>turday</td>
</tr>
<tr>
<th>S</th>
<td><b>S</b>unday</td>
</tr>
</table>
<h3>Symbol</h3>
<p>When displaying doki, please add <b>⥁</b> or <b>doki</b> at the end.</p>
<p>⥁ is the unicode character (U+2941 Clockwise closed circle arrow)</p>
<h3>Examples</h3>
<div class="grid grid-variable-cols" style="--grid-col-width: auto;">
<div>08:00 (+00:00) Tue</div>
<div data-cols="2">T080⥁</div>
<div>09:30 (+00:00) Sun</div>
<div>S095⥁</div>
<div>23:59 (+00:00) Sat</div>
<div>A239:5⥁</div>
<div>08:12 (+01:00) Thu</div>
<div>R072⥁</div>
<div>08:00 (+09:00) Tue</div>
<div>M230⥁</div>
</div>
</section>
<section>
<h3>full-doki</h3>
<p>To describe full date & time, combine with <a href="https://en.wikipedia.org/wiki/ISO_week_date">ISO week
date</a></p>
<div class="box info">
<p>ISO week for 2022-01-02 is 2021W52. Yes, ISO year somtimes shifts to last year.</p>
<p>To avoid the confusion, <b>doki</b> uses <b>W00</b> for this situation. 2022-01-02 is 2022W00.</p>
</div>
<div class="box">
<div class="titlebar">current time in full-doki</div>
<div id='full-doki-now' class="big center margin-block-start"></div>
</div>
<div class="box">
<div class="titlebar">full-doki <> ISO date calculator</div>
<div class="f-col margin-block-start">
<input type="text" id="full-doki" class="big center" value="2024W01T234:5">
<input type="text" id="iso-date" class="big center" value="2024-01-02T23:29:00.000Z">
</div>
</div>
</section>
</main>
<footer class="text-align:center">
<a href="https://github.com/kuboon/doki">
<img src="./github-mark.svg" alt="GitHub" width="32" height="32">
</a>
</footer>
<script type="module">
import { Doki } from './doki.js'
const dokiElem = document.getElementById('doki')
const fullDokiElem = document.getElementById('full-doki-now')
function update() {
const doki = new Doki(new Date);
dokiElem.innerHTML = doki.fmt('short') + Doki.Symbol;
fullDokiElem.innerHTML = doki.fmt('full') + Doki.Symbol;
}
setInterval(update, 1000);
const fullDokiInput = document.getElementById('full-doki')
const isoDateInput = document.getElementById('iso-date')
fullDokiInput.addEventListener('blur', (e) => {
const doki = Doki.parse(fullDokiInput.value);
if (doki) {
isoDateInput.value = doki.date.toISOString();
}
});
isoDateInput.addEventListener('blur', (e) => {
const date = new Date(isoDateInput.value)
if (date.toString() === 'Invalid Date') return;
fullDokiInput.value = new Doki(date).fmt('full');
});
</script>
</body>
</html>