-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
236 lines (217 loc) · 19.9 KB
/
index.html
File metadata and controls
236 lines (217 loc) · 19.9 KB
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
<html>
<head>
<title>Hijri Date: based on moon sightings</title>
<meta charset="UTF-8">
<meta name="description" content="A hijri calendar website to help keep track of the current hijri date based on real sighting data from moon sighting organisations around the world. Also contains a gregorian to hijri date converter.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/style.css" type="text/css">
<link rel="stylesheet" href="/assets/languages.css" type="text/css">
<script src="/assets/languages.js"></script>
<script src="/assets/script.js"></script>
<script src="/assets/easydropdown.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script src="https://unpkg.com/gridjs@6.1.0/dist/gridjs.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" type="text/css">
<link rel="icon" href="/favicon.png" />
</head>
<body lang="en">
<h1 lang="en">Hijri Date</h1>
<h1 lang="so">Taariikhda Hijriga</h1>
<h1 lang="ar">التاريخ الهجري</h1>
<select name="orgs" class="orgs" onchange="select();" dir="ltr"></select>
<br />
<br />
<div class="toggle">
<select class="langs" onchange="changeLang();">
<option class="en">English</option>
<option class="so">Af-Soomaali</option>
<option class="ar">العريية</option>
</select>
<input type="checkbox" id="darkmode-toggle" onchange="toggleTheme(this.checked)" />
<label class="darklabel" for="darkmode-toggle">
<svg version="1.1" class="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve">
<rect x="152.994" y="58.921" transform="matrix(0.3827 0.9239 -0.9239 0.3827 168.6176 -118.5145)" width="40.001" height="16" />
<rect x="46.9" y="164.979" transform="matrix(0.9239 0.3827 -0.3827 0.9239 71.29 -12.4346)" width="40.001" height="16" />
<rect x="46.947" y="315.048" transform="matrix(0.9239 -0.3827 0.3827 0.9239 -118.531 50.2116)" width="40.001" height="16" />
<rect x="164.966" y="409.112" transform="matrix(-0.9238 -0.3828 0.3828 -0.9238 168.4872 891.7491)" width="16" height="39.999" />
<rect x="303.031" y="421.036" transform="matrix(-0.3827 -0.9239 0.9239 -0.3827 50.2758 891.6655)" width="40.001" height="16" />
<rect x="409.088" y="315.018" transform="matrix(-0.9239 -0.3827 0.3827 -0.9239 701.898 785.6559)" width="40.001" height="16" />
<rect x="409.054" y="165.011" transform="matrix(-0.9239 0.3827 -0.3827 -0.9239 891.6585 168.6574)" width="40.001" height="16" />
<rect x="315.001" y="46.895" transform="matrix(0.9238 0.3828 -0.3828 0.9238 50.212 -118.5529)" width="16" height="39.999" />
<path d="M248,88c-88.224,0-160,71.776-160,160s71.776,160,160,160s160-71.776,160-160S336.224,88,248,88z M248,392
c-79.4,0-144-64.6-144-144s64.6-144,144-144s144,64.6,144,144S327.4,392,248,392z" />
<rect x="240" width="16" height="72" />
<rect x="62.097" y="90.096" transform="matrix(0.7071 0.7071 -0.7071 0.7071 98.0963 -40.6334)" width="71.999" height="16" />
<rect y="240" width="72" height="16" />
<rect x="90.091" y="361.915" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -113.9157 748.643)" width="16" height="71.999" />
<rect x="240" y="424" width="16" height="72" />
<rect x="361.881" y="389.915" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 397.8562 960.6281)" width="71.999" height="16" />
<rect x="424" y="240" width="72" height="16" />
<rect x="389.911" y="62.091" transform="matrix(0.7071 0.7071 -0.7071 0.7071 185.9067 -252.6357)" width="16" height="71.999" />
</svg>
<svg version="1.1" class="moon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 49.739 49.739" style="enable-background:new 0 0 49.739 49.739;" xml:space="preserve">
<path d="M25.068,48.889c-9.173,0-18.017-5.06-22.396-13.804C-3.373,23.008,1.164,8.467,13.003,1.979l2.061-1.129l-0.615,2.268
c-1.479,5.459-0.899,11.25,1.633,16.306c2.75,5.493,7.476,9.587,13.305,11.526c5.831,1.939,12.065,1.492,17.559-1.258v0
c0.25-0.125,0.492-0.258,0.734-0.391l2.061-1.13l-0.585,2.252c-1.863,6.873-6.577,12.639-12.933,15.822
C32.639,48.039,28.825,48.888,25.068,48.889z M12.002,4.936c-9.413,6.428-12.756,18.837-7.54,29.253
c5.678,11.34,19.522,15.945,30.864,10.268c5.154-2.582,9.136-7.012,11.181-12.357c-5.632,2.427-11.882,2.702-17.752,0.748
c-6.337-2.108-11.473-6.557-14.463-12.528C11.899,15.541,11.11,10.16,12.002,4.936z" />
</svg>
</label>
</div>
<br />
<div class="date_row">
<img src="/assets/icons/chevron_left.svg" class="back" onclick="back();" />
<span class="date"></span>
<img src="/assets/icons/chevron_right.svg" class="forward" onclick="forward();" />
</div>
<div id="table"></div>
<br class="map" />
<h4 class="map_title"></h4>
<br />
<div class="map">
<select name="conjunction" class="conjunction" onchange="getMap();"></select>
<select name="criteria" class="criteria" onchange="get_criteria();">
<option class="yallop" lang="en" selected>Yallop Criteria</option>
<option class="yallop" lang="so">Xisaabta Yallop</option>
<option class="yallop" lang="ar">معايير يالوب</option>
<option class="odeh" lang="en">Odeh Criteria</option>
<option class="odeh" lang="so">Xisaabta Odeh</option>
<option class="odeh" lang="ar">معايير اوده</option>
</select>
</div>
<br class="pre_map" />
<div>
<img class="map" />
<span style="font-size: 0.6em;" lang="en">Generated using: </span><a href="https://github.com/crescent-moon-visibility/crescent-moon-visibility" style="font-size: 0.6em;" lang="en">this crescent visibility map generator</a>
<span style="font-size: 0.6em;" lang="so">Sawirka waxaa lagu sameeyey: </span><a href="https://github.com/crescent-moon-visibility/crescent-moon-visibility" style="font-size: 0.6em;" lang="so">brograamkaan</a>
<span style="font-size: 0.6em;" lang="ar">صنع </span><a href="https://github.com/crescent-moon-visibility/crescent-moon-visibility" style="font-size: 0.6em;" lang="ar">بهذا البرنامج</a>
</div>
<br class="pre_keys" />
<div class="map_keys yallop">
<span class="code_a key yallop">00</span>
<span class="code_a_exp exp yallop" lang="en">A - easily visible to the unaided eye</span>
<span class="code_a_exp exp yallop" lang="so">A - si fudud bey isha u qaban kartaa</span>
<span class="code_a_exp exp yallop" lang="ar">أ - يمكن رؤية الهلال بسهولة</span>
<span class="code_a key odeh">00</span>
<span class="code_a_exp exp odeh" lang="en">A - visible with the naked eye</span>
<span class="code_a_exp exp odeh" lang="so">A - isha wey qaban kartaa</span>
<span class="code_a_exp exp odeh" lang="ar">أ - يمكن رؤية الهلال بالعين المجردة</span>
<span class="code_b key yallop">00</span>
<span class="code_b_exp exp yallop" lang="en">B - visible under perfect atmospheric conditions</span>
<span class="code_b_exp exp yallop" lang="so">B - waa la arki karaa jawiga hadduu fiicanyahay</span>
<span class="code_b_exp exp yallop" lang="ar">ب - يمكن رؤية الهلال في أحوال الطقس المثالية</span>
<span class="code_c key yallop">00</span>
<span class="code_c_exp exp yallop" lang="en">C - visible to the unaided eye after found after found with optical aid</span>
<span class="code_c_exp exp yallop" lang="so">C - isha baad ku arki kartaa marka hore haddaad qalab ku heshid</span>
<span class="code_c_exp exp yallop" lang="ar">ج - يمكن رؤية الهلال بالعين المجرد ان وجدته بتلسكوب اولا</span>
<span class="code_c key odeh">00</span>
<span class="code_c_exp exp odeh" lang="en">C - visible with optical aid</span>
<span class="code_c_exp exp odeh" lang="so">C - qalab baa lagu arki karaa</span>
<span class="code_c_exp exp odeh" lang="ar">ج - يمكن رؤية الهلال بتلسكوب</span>
<span class="code_d key yallop">00</span>
<span class="code_d_exp exp yallop" lang="en">D - only visible with binoculars or conventional telescopes</span>
<span class="code_d_exp exp yallop" lang="so">D - qalab kaliyaa lagu arki karaa</span>
<span class="code_d_exp exp yallop" lang="ar">د - يمكن رؤية الهلال بمنظار او بتلسكوب فقط</span>
<span class="code_e key yallop">00</span>
<span class="code_e_exp exp yallop" lang="en">E - not visible with conventional telescopes</span>
<span class="code_e_exp exp yallop" lang="so">E - qalab caadi ah lagu ma arki karo</span>
<span class="code_e_exp exp yallop" lang="ar">ج - غير مرئية مع بالتلسكوب التقليدي</span>
<span class="code_e key odeh">00</span>
<span class="code_e_exp exp odeh" lang="en">E - visible only with optical aid</span>
<span class="code_e_exp exp odeh" lang="so">E - qalab kaliyaa lagu aeki karaa</span>
<span class="code_e_exp exp odeh" lang="ar">ح - يمكن رؤية الهلال بتلسكوب فقط</span>
<span class="code_f_exp exp yallop" lang="en"> F - beyond danjon limit (7°)</span>
<span class="code_f_exp exp yallop" lang="so"> F - qoraxa ito dayaxa wey isku aadanyihiin, xagasha u dhexeysana wexey ka yartahay 7°</span>
<span class="code_f_exp exp yallop" lang="ar"> ط - ما بعد دانجون (٧°) (هذه هي درجة الفصل الزاوي بين الشمس والقمر، وأقل من ذلك يعني أنهما قريبان جدًا وبالتالي يخفي ضوء الشمس القمر)</span>
<span class="code_g key">00</span>
<span class="code_g_exp" lang="en">G - sunset before new moon</span>
<span class="code_g_exp" lang="so">G - qoraxda waxay dhacaysaa bisha cusub oo wali dhalan</span>
<span class="code_g_exp" lang="ar">ي - غروب الشمس قبل المحاق</span>
<span class="code_i key">00</span>
<span class="code_i_exp" lang="en">I - moonset before sunset</span>
<span class="code_i_exp" lang="so">I - dayaxaa dhacaayo inteysan qoraxda dhicin</span>
<span class="code_i_exp" lang="ar">ك - غروب القمر قبل غروب الشمس</span>
<span class="code_j key">00</span>
<span class="code_j_exp" lang="en">J - sunset before new moon and moonset before sunset</span>
<span class="code_j_exp" lang="so">J - qoraxda waxay dhacaysaa bisha xusub oo wali dhalan iyo dayaxaa dhacaayo inteysan qoraxda dhicin</span>
<span class="code_j_exp" lang="ar">ل - غروب الشمس قبل المحاق وغروب القمر قبل غروب الشمس</span>
</div>
<br />
<div class="greg_convert">
<h2 lang="en">Gregorian to Hijri</h2>
<h2 lang="so">Taariikh Miiladi Taariikh Hijri U Badal</h2>
<h2 lang="ar">الميلادي الى الهجري</h2>
<select name="year" class="year" onchange="setupMonths();"></select>
<select name="month" class="month" onchange="setupDays();"></select>
<select name="day" class="day"></select>
<br />
<p class="converted hidden"></p>
<button class="convert" onclick="convert();" lang="en">Convert</button>
<button class="convert" onclick="convert();" lang="so">Badal</button>
<button class="convert" onclick="convert();" lang="ar">محول</button>
</div>
<br />
<div class="keys">
<span class="today_key key">00</span>
<span> - </span>
<span class="today_exp" lang="en">Today: post-midnight, pre-sunset</span>
<span class="today_exp" lang="so">Maanta: haddii habaynbar laa dhaafay oo gabaldhac la gaarin</span>
<span class="today_exp" lang="ar">اليوم: بعد منتصف الليل، قبل غروب الشمس</span>
<span> </span>
<span class="tomorrow_key key">00</span>
<span> - </span>
<span class="tomorrow_exp" lang="en">Today: pre-midnight, post-sunset</span>
<span class="tomorrow_exp" lang="so">Caawa: hadii qoraxdhac la dhaafay oo habaynbar la gaarin</span>
<span class="tomorrow_exp" lang="ar">اليوم: بعد غروب الشمس، قبل منتصف الليل</span>
<span> </span>
<span class="white_day key"> x </span>
<span> - </span>
<span class="white_day_exp" lang="en">White day: recommended to fast</span>
<span class="white_day_exp" lang="so">Maalin Cad: waxaa fiican inaad soontid maalintaan</span>
<span class="white_day_exp" lang="ar">اليوم الابيض: مستحب للصيام</span>
<span> </span>
<span class="observe key">00</span>
<span> - </span>
<span class="observe_exp" lang="en">The new crescent should be observed after sunset</span>
<span class="observe_exp" lang="so">Bisha cusub markay gabalka maalintaan dhacdo baa la raadinaayaa</span>
<span class="observe_exp" lang="ar">ينبغي رؤية الهلال الجديد بعد غروب الشمس</span>
<span id="arafah" style="display: none;"> </span>
<span id="arafah" class="arafah key" style="display: none;">00</span>
<span id="arafah" style="display: none;"> - </span>
<span id="arafah" class="arafah_exp" style="display: none;" lang="en">Day of Arafah: Fasting recommended</span>
<span id="arafah" class="arafah_exp" style="display: none;" lang="so">Maalinta Carafo: inaad soontid baa fiican</span>
<span id="arafah" class="arafah_exp" style="display: none;" lang="ar">يوم عرفة: يستحب صيامه</span>
<span id="eid"> </span>
<span id="eid" class="eid key" style="display: none;">00</span>
<span id="eid" style="display: none;"> - </span>
<span id="eid" class="eid_exp" style="display: none;" lang="en">Eid</span>
<span id="eid" class="eid_exp" style="display: none;" lang="so">Ciid/Iid</span>
<span id="eid" class="eid_exp" style="display: none;" lang="ar">عيد</span>
<span id="ashura" class="ashura key" style="display: none;">00</span>
<span id="ashura" style="display: none;"> - </span>
<span id="ashura" class="ashura_exp" style="display: none;" lang="en">The day of 'Ashura: Fasting recommended</span>
<span id="ashura" class="ashura_exp" style="display: none;" lang="so">Maalinta Caashura: Inaad soontid baa fiican</span>
<span id="ashura" class="ashura_exp" style="display: none;" lang="ar">يوم عاشوراء: صيام مستحب</span>
<span id="ashura" style="display: none;"> </span>
<span id="ashura" class="ashura_adjacent key" style="display: none;">00</span>
<span id="ashura" style="display: none;"> - </span>
<span id="ashura" class="ashura_adjacent_exp" style="display: none;" lang="en">The day before/after 'Ashura: fast one of these along with the day of 'Ashura</span>
<span id="ashura" class="ashura_adjacent_exp" style="display: none;" lang="so">Maalinta ka horreysa ama ka danbeysa maalinta caashura, labadan mid kamid soon markad soontid ama soomi rabtid maalinta caashura</span>
<span id="ashura" class="ashura_adjacent_exp" style="display: none;" lang="ar">يوم قبل / بعد عاشوراء: صم واحدًا من هذه مع عاشوراء</span>
<span id="tashreeq" style="display: none;"> </span>
<span id="tashreeq" class="tashreeq key" style="display: none;">00</span>
<span id="tashreeq" style="display: none;"> - </span>
<span id="tashreeq" class="tashreeq_exp" lang="en" style="display: none;">Day of Tashrīq: one of 3 days after 'Eid Al-Adḥā</span>
<span id="tashreeq" class="tashreeq_exp" lang="so" style="display: none;">Ayaamu tashriiq: 3da maalmood oo ku xiga ciidul adxa</span>
<span id="tashreeq" class="tashreeq_exp" lang="ar" style="display: none;">أيام التشريق: الأيام التالية لعيد الأضحى</span>
</div>
<p style="font-size: 0.6em;" lang="en">*Due to the hijri calendar starting at sunset, and the gregorian calendar starting at midnight, calculating the current day's change without location data is difficult, and as such 2 days are highlighted as 'today' depending on whether it is before or after sunset.</p>
<p style="font-size: 0.6em;" lang="so">*Tariikhda hijriga maalintiisa cusub madaama ey bilaawato qoraxdhacda kadib, iyo tariikhda miiladiga malmeeheeda ey bilowdaan habeynbarka kadib, waxaa adag ina la ogaado maalintey kuu tahay xagga tariikhda hijriga anagoo ogaan meeshaad daggantahay, marka labo malmood baan calaamadinay.</p>
<p style="font-size: 0.6em;" lang="ar">*نظرًا لأن التقويم الهجري يبدأ عند غروب الشمس، والتقويم الميلادي الذي يبدأ عند منتصف الليل، فإن حساب تغير اليوم الحالي بدون بيانات الموقع أمر صعب، وبالتالي يتم تمييز يومين على أنه "اليوم" اعتمادًا على ما إذا كان قبل غروب الشمس أو بعده. (في الأساس شرح للسلسلة الأولى)</span>
<p style="font-size: 0.6em;" lang="en">**Where today is a highlighted day, the background will be a gradient with the top colour indicating that it is today, and the bottom colour being the colour of the highlighted day show its significance - with the exception of the white days wherein the text colour is changed to reflect that it is today</p>
<p style="font-size: 0.6em;" lang="so">**Maanta hadduu yahay maaliin calamadsan siida Carafo oo kale, waxaa la muujin midabo isku qasan oo midabka kore uu tusinaayo inuu maanta yahay maalinta calaamadsan, iyo midabka hoose uu tilmaamaayo sababta kale uu u calaamadsan yahay</p>
<p style="font-size: 0.6em;" lang="ar">**عندما يكون اليوم يومًا مميزًا، ستكون الخلفية متدرجة حيث يشير اللون العلوي إلى أنه اليوم، واللون السفلي كونه لون اليوم المميز يوضح أهميته - باستثناء الأيام البيضاء حيث النص تم تغيير اللون ليعكس ما هو عليه اليوم</span>
</body>
</html>