-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathconverter.html
277 lines (270 loc) · 11.7 KB
/
converter.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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Convertisseur milésien</title>
<!-- Version M2023-08-05 - see Github for details
-->
<meta name="creator" content="Louis-Aimé de Fouquières">
<meta name="description" content="Convertisseur de calendriers,
conversion entre calendriers et en jour julien,
représentation de l'heure selon les fuseaux horaires ,
restitution dans les calendriers Unicode et utilisateur">
<meta name="keywords" content="Convertisseur de calendriers, conversion de date, calendriers Unicode">
<meta name="viewport" content="width=device-width">
<!-- Page environment -->
<link href="dialsandpanels.css" rel="stylesheet"/>
<script type="text/javascript" src="milesianclockinitiate.js"></script>
<script type="text/javascript" src="milesianclockutilities.js"></script>
<script type="text/javascript" src="converterdisplay.js"></script>
<!-- <script type="text/javascript" src="yearsignaturedisplay.js"></script> -->
<script type="text/javascript" src="converteronload.js"></script>
<style>
.panel {height: 410px;}
</style>
</head>
<body class="centered">
<section><h1 class="panelhead">Convertisseur de calendrier</h1>
</section>
<div class="panel"><h2 class="panelhead" id="clockmilesiandate" > </h2> <!-- The string of the Milesian date is inserted here -->
<!-- put svg code inline -->
<!-- Scalable viewbox, centered in the middle -->
<section>
<svg width="300" height="100%" xml:lang="fr"
viewBox="-300 -300 600 600" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="convclock">
<!-- the dial -->
<image href="https://louis-aime.github.io/Milesian-calendar/milesian_dial.jpg" x="-300" y ="-300" width="600" height="599" />
<!-- the motto on the dial -->
<text class="motto" x="0" y="36" >CERTUM MONSTRAT DIEM</text>
<!-- main dial: month, day; the rect enables to fetch the center of the dial -->
<rect class="center dragon month day" x="0" y="0" width="0" height="0" />
<!-- the year field -->
<text class="clock yeardisplay"
x="0" y="+100"></text>
<!-- seasons' marks -->
<g class="seasonmark winter" transform="rotate(0)"> <polygon points="0,-300 6,-300 6,-284 0,-278 -6,-284 -6,-300" /> </g>
<g class="seasonmark spring" transform="rotate(0)"> <polygon points="0,-300 6,-300 6,-284 0,-278 -6,-284 -6,-300" /> </g>
<g class="seasonmark summer" transform="rotate(0)"> <polygon points="0,-300 6,-300 6,-284 0,-278 -6,-284 -6,-300" /> </g>
<g class="seasonmark autumn" transform="rotate(0)"> <polygon points="0,-300 6,-300 6,-284 0,-278 -6,-284 -6,-300" /> </g>
<!-- moon age -->
<text class="centered yeardisplay" x="-40" y="-80">
<script type="text/Javascript"> document.write (String.fromCodePoint(0x1F319)); </script>
</text>
<text class="centered yeardisplay moonage" x="20" y="-80">0</text>
<!-- center circle -->
<circle class="clockhand" r="9" />
<!-- the month hand -->
<g class="clockhand month" transform="rotate(0)"
opacity="0.8">
<polygon points="0,0 12,-20 10,-185 0,-195 -10,-185 -12,-20" />
</g>
<!-- the day hand -->
<g class="clockhand day" transform="rotate(0)"
opacity="0.8" >
<polygon points="0,0 11,-20 8,-260 0,-270 -8,-260 -11,-20" />
</g>
</g>
</svg>
</section>
</div>
<div class="panel autoscroll"><h2 class="panelhead">Date et calendrier</h2>
<section><h3 class="panelhead">Dates en années algébriques</h3>
<table class="centered">
<tr>
<th><button id="customCalend" class="textline">Calendrier</button></th>
<th>Quant.</th>
<th>Mois</th>
<th>Année</th>
<th> </th>
</tr>
<form name="custom">
<tr id="customline">
<td><select name="calend" size="1" class="centered">
<option value="milesian">milésien</option>
<option value="iso_8601">iso 8601</option>
<option value="julian">julien</option>
<option value="gregorian" selected>grégorien</option>
<option value="frenchrev">révolutionnaire</option>
</select></td>
<td><input name="day" type="number" min="1" max="31" class="centered digit2 mutable"> </td>
<td><input name="month" type="number" min="1" max="13" class="centered digit2 mutable"></td>
<td><input name="year" type="number" class="centered digit4 mutable"> </td>
<td><button class="textline">Ok</button></td>
</tr>
</form>
</table>
<table class="centered">
<tr>
<form name="week">
<th>Semaines</th>
<td><input name="weekday" type="number" min="0" max="30" class="centered digit2 mutable"> </td>
<td><input name="weeknumber" type="number" min="0" max="56" class="centered digit2 mutable"></td>
<td><input name="weekyear" type="number" class="centered digit4 mutable"></td>
<td><button class="textline">Ok</button></td>
</tr>
</table>
<table class="centered">
<tr>
<td>Jour de semaine</td>
<td><input name="dayofweek" type="text" class="centered" size="12" disabled="disabled" /></td>
<td>Semaines dans l'année</td>
<td><input name="weeksinyear" type="number" min="0" max="56" class="centered digit2" disabled="disabled"></td>
</tr>
</form>
</table>
</section>
<section><!-- now, day navigation -->
<form name="control">
<table class="centered">
<tr>
<td><button name="now" class="textline" type="button">Aujourd'hui</button></td>
<th>+/- jours : </th>
<td><button name="minus" type="button" class="textline symbol">-</button></td>
<td><input name="shift" type="number" value="1" min="0" step="any" class="centered digit4"></td>
<td><button name="plus" type="button" class="textline symbol">+</button></td>
</tr>
</table>
</form>
</section>
<section><h4 class="panelhead">Calendrier historique : passage au grégorien</h4>
<table class="centered">
<form name="gregorianswitch">
<tr>
<td><input name="day" type="number" value="20" min="1" max="31" class="centered digit2"></td>
<td>
<select name="month" size="1" class="centered">
<option value="1">janvier</option>
<option value="2">février</option>
<option value="3">mars</option>
<option value="4">avril</option>
<option value="5">mai</option>
<option value="6">juin</option>
<option value="7">juillet</option>
<option value="8">août</option>
<option value="9">septembre</option>
<option value="10">octobre</option>
<option value="11">novembre</option>
<option value="12"selected>décembre</option>
</select> </td>
<td><input name="year" type="number" value="1582" min="1582" max="275760" class="centered digit4"></td>
<td><button class="textline">Ok</button></td>
</tr>
</form>
</table>
<!-- Contrôle validité non utilisé
<table class="centered">
<form name="controloptions">
<tr>
<td><input type="checkbox" name="datevalidity" checked></td>
<th>Contrôle de validité des dates saisies</th>
</tr>
</form>
</table>
-->
</section>
<section><h3 class="panelhead">Jour julien à 12 h UTC</h3>
<form name="daycounter">
<table class="centered">
<tr>
<td><input name="julianday" type="number" size="24" min="-97559413" max="102440588" step="1" class="centered"></td>
<td><button class="textline" name="setday" value="julianday">Ok</button></td>
</tr>
</table>
</form>
</section>
<section><h3 class="panelhead">Affichage selon options</h3>
<section><h4 class="panelhead">Calendrier utilisateur (<span id="customcalname"></span>)</h4>
<span class="centered mutable" id="CustomString"></span>
</section>
</section>
</div>
<div class="panel autoscroll"><h2 class="panelhead">Options d'affichage</h2>
<section><h3 class="panelhead">Paramètres régionaux et format</h3>
<form name="LocaleOptions" method="post"> <!-- heavy form, hence post method -->
<table class="centered">
<tr>
<th>Format :</th>
<td>
<select name="DatePresentation" class="centered" size="1">
<option value="long">Texte complet</option>
<option value="standard" selected>Texte courant</option>
<option value="short">Texte abrégé</option>
<option value="narrow">Texte compact</option>
<option value="numeric">Numérique complet</option>
<option value="2-digit">Numérique compact</option>
<option value="year-2-digit">Année 2 chiffres</option>
<option value="none">Vide</option>
</select>
</td>
</tr>
</table>
<table class="centered">
<tr>
<th>Code langue : </th>
<td>
<input name="Language" class="centered" type="text" autocomplete="language" size="5">
</td>
<th>Code effectif : </th><td id="langCode"></td>
</tr>
</table>
<div>Exemples : <code>en-GB</code> ou <code>en-US</code></div>
<div><button class="textline">Valider les options d'affichage</button></div>
</form>
</section>
<section><h3 class="panelhead">Lien utile</h3>
<span><a target="_blank" href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry">Codes langues Unicode</a>
</span>
</section>
</div>
<div class="centered"><h2 class="panelhead">Dates converties</h2>
<section class="outdisplay"><h3 class="milesianhead">Grégorien et dérivés</h3>
<table class="centered">
<tr><th>ISO 8601 : </th><td class="calenddate" id="iso_8601"></td></tr>
<tr><th>Grégorien proleptique : </th><td class="calenddate" id="gregory"></td></tr>
<tr><th>Grégorien : </th><td class="calenddate" id="gregorian"></td></tr>
<tr><th>Thaï : </th><td class="calenddate" id="buddhist"></td></tr>
<tr><th>Japonais : </th><td class="calenddate" id="japanese"></td></tr>
<tr><th>Chinois moderne : </th><td class="calenddate" id="roc"></td></tr>
</table>
</section>
<section class="outdisplay"><h3 class="milesianhead">Solaires en phase</h3>
<table class="centered">
<tr><th>Milésien : </th><td class="calenddate" id="milesian"></td></tr>
<tr><th>Persan : </th><td class="calenddate" id="persian"></td></tr>
<tr><th>Indien moderne : </th><td class="calenddate" id="indian"></td></tr>
<tr><th>Révolutionnaire : </th><td class="calenddate" id="frenchrev"></td></tr>
</table>
</section>
<section class="outdisplay"><h3 class="milesianhead">Julien, copte et éthiopiens</h3>
<table class="centered">
<tr><th>Julien : </th><td class="calenddate" id="julian"></td></tr>
<tr><th>Copte : </th><td class="calenddate" id="coptic"></td></tr>
<tr><th>Ethiopien antique : </th><td class="calenddate" id="ethioaa"></td></tr>
<tr><th>Ethiopien chrétien : </th><td class="calenddate" id="ethiopic"></td></tr>
</table>
</section>
<section class="outdisplay"><h3 class="milesianhead">Luni-solaires</h3>
<table class="centered">
<tr><th>Hébraïque : </th><td class="calenddate" id="hebrew"></td></tr>
<tr><th>Chinois traditionnel : </th><td class="calenddate" id="chinese"></td></tr>
<tr><th>Coréen traditionnel : </th><td class="calenddate" id="dangi"></td></tr>
</table>
</section>
<section class="outdisplay"><h3 class="milesianhead">Lunaires musulmans</h3>
<table class="centered">
<tr><th>Standard : </th><td class="calenddate" id="islamic"></td></tr>
<tr><th>Umm al-Qura : </th><td class="calenddate" id="islamic-umalqura"></td></tr>
<tr><th>Tabulaire astronomique : </th><td class="calenddate" id="islamic-tbla"></td></tr>
<tr><th>Tabulaire civil : </th><td class="calenddate" id="islamic-civil"></td></tr>
<tr><th>Arabie saoudite : </th><td class="calenddate" id="islamic-rgsa"></td></tr>
</table>
</section>
</div>
<footer>
<span>© 2016-2022 <a target="_blank" href="http://www.calendriermilesien.org">www.calendriermilesien.org</a></span>
</footer>
</body>
</html>