PageSourceSearch

https://afghanistan.af/pages/namaz/

html afghanistan.af collected 2026-10-03 01:07:31 UTC 37,244 bytes, 787 lines download raw bytes

1<!DOCTYPE html>
2<html lang="fa" dir="rtl">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>اوقات شرعی افغانستان | حنفی و جعفری — کابل، هرات، مزار و همه ولایات</title>
7<meta name="description" content="اوقات دقیق نماز برای مذهب حنفی و جعفری — فجر، طلوع، ظهر، عصر، مغرب، عشا — کابل، هرات، مزار شریف و ۳۴ ولایت افغانستان">
8<link rel="canonical" href="https://afghanistan.af/pages/namaz/">
9<link rel="preconnect" href="https://fonts.googleapis.com">
10<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
vendor: 65 bytes, lines 10-11
10
11<script async src="https://www.googletagmanager.com/gtag/js?id=
11G-WMN1STP83Z
vendor: 13 bytes, line 11
11"></script>
12<script>
vendor: 117 bytes, line 12
12window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','
12G-WMN1STP83Z
vendor: 3 bytes, line 12
12');
12</script>
12
13<style>
14:root{
15  --bg:#f0ece2;--card:#fffdf7;--black:#0c0c0a;
16  --g:#0a3d2b;--g2:#1a5c3f;--gold:#c8960a;--goldt:#f0c060;
17  --sc:#7c2d12;--sc2:#9a3412;
18  --text:#1a1510;--muted:#7a6a55;--border:#ddd0b0;
19  --sh:0 1px 8px rgba(10,61,43,.07);
20}
21*{margin:0;padding:0;box-sizing:border-box;}
22html{scroll-behavior:smooth;}
23body{font-family:'Vazirmatn',sans-serif;background:var(--bg);color:var(--text);direction:rtl;min-height:100vh;}
24
25.topbar{background:var(--black);border-bottom:3px solid var(--gold);padding:11px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}
26.logo{color:#f0ebe0;font-weight:800;font-size:.9rem;text-decoration:none;}
27.logo em{color:var(--gold);font-style:normal;}
28.back{color:#888;font-size:.78rem;text-decoration:none;}
29.back:hover{color:#fff;}
30.clock{font-size:.88rem;font-weight:800;color:var(--goldt);font-family:monospace;letter-spacing:1px;}
31
32/* HERO */
33.hero{background:linear-gradient(150deg,#051a0f,#0a3d2b 55%,#062814);padding:24px 20px 20px;position:relative;}
34.hi{max-width:860px;margin:0 auto;}
35.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
36.hero-title{font-size:1.45rem;font-weight:900;color:#fff;line-height:1.2;}
37.hero-title em{color:var(--goldt);font-style:normal;}
38.hero-sub{font-size:.78rem;color:rgba(255,255,255,.5);margin-top:4px;}
39.date-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 14px;text-align:center;flex-shrink:0;}
40.dc-sh{font-size:.9rem;font-weight:800;color:#fff;}
41.dc-hj{font-size:.7rem;color:rgba(255,255,255,.55);margin-top:3px;}
42
43/* CITY BAR */
44.city-bar{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
45.cb-row{display:flex;flex-direction:column;gap:4px;}
46.cb-row.full{grid-column:1/-1;}
47.city-bar label{font-size:.68rem;color:rgba(255,255,255,.55);font-weight:700;}
48.csel,.dinp{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:9px 12px;color:#fff;font-family:inherit;font-size:.85rem;font-weight:700;width:100%;}
49.csel{-webkit-appearance:none;}
50.csel option{color:#000;background:#fff;}
51.dinp{direction:ltr;}
52.calc-btn{background:var(--goldt);color:#0a3d2b;border:none;border-radius:8px;padding:11px;font-size:.88rem;font-weight:900;cursor:pointer;font-family:inherit;width:100%;grid-column:1/-1;}
53.calc-btn:hover{background:#e8b44e;}
54
55/* NEXT PRAYER BAR */
56.next-bar{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 14px;margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-items:center;}
57.nb-lbl{font-size:.65rem;color:rgba(255,255,255,.5);font-weight:700;margin-bottom:2px;}
58.nb-name{font-size:.9rem;font-weight:900;color:var(--goldt);}
59.nb-time{font-size:1.2rem;font-weight:900;color:#fff;font-family:monospace;}
60.nb-cd{font-size:.78rem;color:rgba(255,255,255,.65);font-family:monospace;font-weight:700;}
61.nb-prog{grid-column:1/-1;height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;}
62.nb-fill{height:4px;background:var(--goldt);border-radius:2px;transition:width 1s;}
63
64/* LAYOUT */
65.wrap{max-width:860px;margin:0 auto;padding:16px 16px 60px;display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start;}
66@media(max-width:660px){.wrap{grid-template-columns:1fr;}}
67
68/* CARD */
69.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--sh);margin-bottom:12px;}
70.card-hd{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
71.card-title{font-size:.88rem;font-weight:800;color:var(--g);}
72.card-sub{font-size:.7rem;color:var(--muted);}
73
74/* TABS */
75.tabs{display:flex;}
76.tab{flex:1;padding:11px 8px;text-align:center;cursor:pointer;font-size:.8rem;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;background:none;border-top:none;border-right:none;border-left:none;font-family:inherit;transition:all .15s;border-bottom:2px solid transparent;}
77.tab.on{color:var(--g);border-bottom-color:var(--g);background:rgba(10,61,43,.03);}
78.tab.st.on{color:var(--sc);border-bottom-color:var(--sc);background:rgba(124,45,18,.03);}
79.tab-sep{width:1px;background:var(--border);}
80
81/* PRAYER ROWS */
82.pt{padding:4px 0;}
83.pr{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid rgba(221,208,176,.35);position:relative;transition:background .1s;}
84.pr:last-child{border-bottom:none;}
85.pr:hover{background:rgba(10,61,43,.03);}
86.pr.cur{background:linear-gradient(90deg,rgba(10,61,43,.07),transparent);}
87.pr.cur::before{content:'';position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--gold);border-radius:0 0 0 3px;}
88.pr.scur::before{background:var(--sc);}
89.pr-icon{font-size:1.15rem;width:28px;text-align:center;flex-shrink:0;}
90.pr-info{flex:1;}
91.pr-name{font-size:.88rem;font-weight:800;color:var(--text);}
92.pr-ar{font-size:.68rem;color:var(--muted);}
93.pr-right{text-align:left;flex-shrink:0;}
94.pr-time{font-size:1.05rem;font-weight:900;font-family:monospace;direction:ltr;color:var(--g);}
95.pr-time.sc{color:var(--sc);}
96.pr-12{font-size:.67rem;color:var(--muted);font-family:monospace;direction:ltr;margin-top:1px;}
97.now-badge{font-size:.6rem;font-weight:800;background:var(--gold);color:#fff;padding:2px 7px;border-radius:8px;margin-right:6px;}
98.now-badge.sc{background:var(--sc);}
99
100/* COMPARE TABLE */
101.cmp{width:100%;border-collapse:collapse;font-size:.82rem;}
102.cmp th{padding:9px 12px;text-align:center;font-size:.7rem;font-weight:800;color:var(--muted);background:rgba(240,236,226,.6);border-bottom:1px solid var(--border);}
103.cmp td{padding:9px 12px;border-bottom:1px solid rgba(221,208,176,.35);text-align:center;font-family:monospace;}
104.cmp td.nm{font-family:inherit;text-align:right;font-weight:700;color:var(--text);}
105.cmp td.hc{color:var(--g);font-weight:800;}
106.cmp td.sc{color:var(--sc);font-weight:800;}
107.cmp tr:last-child td{border-bottom:none;}
108.cmp tr.cr td{background:rgba(10,61,43,.05);}
109.dif{font-size:.7rem;font-weight:700;}
110.dif.p{color:#b45309;} .dif.n{color:#991b1b;} .dif.z{color:var(--muted);}
111
112/* MONTHLY */
113.ms{overflow-y:auto;max-height:360px;}
114.mt{width:100%;border-collapse:collapse;font-size:.74rem;}
115.mt th{padding:7px 8px;text-align:center;font-weight:800;font-size:.66rem;color:var(--muted);background:rgba(240,236,226,.7);position:sticky;top:0;z-index:1;}
116.mt td{padding:7px 8px;border-bottom:1px solid rgba(221,208,176,.3);text-align:center;font-family:monospace;font-size:.72rem;}
117.mt td.dc{font-family:inherit;text-align:right;font-size:.7rem;color:var(--muted);}
118.mt tr.tr td{background:rgba(10,61,43,.08);font-weight:700;}
119.mt .hv{color:var(--g);} .mt .sv{color:var(--sc);}
120
121/* SIDEBAR */
122.sun-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(221,208,176,.35);}
123.sun-row:last-child{border-bottom:none;}
124.sr-ic{font-size:1.2rem;width:26px;text-align:center;}
125.sr-nm{flex:1;font-size:.82rem;font-weight:700;}
126.sr-t{font-size:.9rem;font-weight:800;color:var(--g);font-family:monospace;direction:ltr;}
127
128.info-row{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid rgba(221,208,176,.35);}
129.info-row:last-child{border-bottom:none;}
130.ir-l{font-size:.78rem;color:var(--muted);}
131.ir-v{font-size:.82rem;font-weight:700;color:var(--text);}
132
133.note{margin:0 14px 10px;padding:9px 12px;
133border-right:3px solid;border-radius:0 8px 8px 0;font-size:.76rem;line-height:1.7;color:var(--muted);}
134.note.g{background:#f0fdf4;border-color:var(--g);}
135.note.a{background:#fefce8;border-color:var(--gold);}
136.note.r{background:#fef2f2;border-color:#b91c1c;}
137
138/* QIBLA */
139.qibla-box{padding:14px 16px;text-align:center;}
140.comp{width:110px;height:110px;margin:0 auto 10px;border-radius:50%;border:2px solid var(--border);background:radial-gradient(circle,#fff 60%,var(--bg));position:relative;}
141.cn{position:absolute;font-size:.6rem;font-weight:800;color:var(--muted);}
142.cn.n{top:4px;left:50%;transform:translateX(-50%);}
143.cn.s{bottom:4px;left:50%;transform:translateX(-50%);}
144.cn.e{right:5px;top:50%;transform:translateY(-50%);}
145.cn.w{left:5px;top:50%;transform:translateY(-50%);}
146.needle{position:absolute;top:50%;left:50%;width:3px;height:42px;margin:-42px 0 0 -1.5px;background:linear-gradient(var(--g) 50%,transparent 50%);border-radius:2px;transform-origin:bottom center;}
147.cdot{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:var(--g);transform:translate(-50%,-50%);}
148
149/* ══ MOBILE ══ */
150@media(max-width:480px){
151  .topbar{padding:9px 14px;}
152  .logo{font-size:.82rem;}
153  .clock{font-size:.78rem;}
154  .back{font-size:.7rem;}
155
156  .hero{padding:16px 14px 14px;}
157  .hero-title{font-size:1.15rem;}
158  .hero-top{flex-wrap:nowrap;align-items:center;}
159  .date-chip{padding:8px 10px;}
160  .dc-sh{font-size:.8rem;}
161  .dc-hj{font-size:.62rem;}
162
163  .wrap{padding:12px 10px 50px;}
164
165  /* جدول ۳۰ روز — ستون‌های تکراری مخفی */
166  .mt th:nth-child(3),.mt td:nth-child(3),
167  .mt th:nth-child(5),.mt td:nth-child(5),
168  .mt th:nth-child(7),.mt td:nth-child(7){display:none;}
169  .mt{font-size:.66rem;}
170  .mt th,.mt td{padding:5px 4px;}
171  .mt td.dc{font-size:.62rem;}
172
173  /* جدول مقایسه */
174  .cmp{font-size:.76rem;}
175  .cmp th,.cmp td{padding:7px 8px;}
176
177  /* ردیف‌های نماز */
178  .card-hd{padding:10px 12px;}
179  .card-title{font-size:.82rem;}
180  .pr{padding:10px 12px;gap:8px;}
181  .pr-icon{font-size:1rem;width:22px;}
182  .pr-name{font-size:.82rem;}
183  .pr-ar{font-size:.62rem;}
184  .pr-time{font-size:.95rem;}
185
186  /* پنل خورشیدی */
187  .sun-row{padding:8px 12px;}
188  .sr-nm{font-size:.76rem;}
189  .sr-t{font-size:.82rem;}
190
191  .info-row{padding:7px 12px;}
192  .ir-l{font-size:.72rem;}
193  .ir-v{font-size:.76rem;}
194  .note{font-size:.7rem;}
195}
196</style>
197</head>
198<body>
199
200<div class="topbar">
201  <a href="/" class="logo">پورتال ملی <em>افغانستان</em></a>
202  <div class="clock" id="clk">--:--:--</div>
203  <a href="/" class="back">← خانه</a>
204</div>
205
206<div class="hero">
207<div class="hi">
208  <div class="hero-top">
209    <div>
210      <div class="hero-title">اوقات <em>شرعی</em> افغانستان</div>
211      <div class="hero-sub">حنفی · جعفری · محاسبه دقیق · بدون نیاز به اینترنت</div>
212    </div>
213    <div class="date-chip">
214      <div class="dc-sh" id="dc-sh">—</div>
215      <div class="dc-hj" id="dc-hj">—</div>
216    </div>
217  </div>
218
219  <div class="city-bar">
220    <div class="cb-row">
221      <label>🏙 ولایت / شهر:</label>
222      <select class="csel" id="csel">
223        <option value="34.5281,69.1723,4.5">کابل</option>
224        <option value="34.3482,62.2000,4.5">هرات</option>
225        <option value="36.7069,67.1136,4.5">مزار شریف</option>
226        <option value="31.6289,65.7372,4.5">قندهار</option>
227        <option value="34.4415,70.4382,4.5">جلال‌آباد</option>
228        <option value="36.7280,68.8574,4.5">کندز</option>
229        <option value="33.5537,68.4168,4.5">غزنی</option>
230        <option value="34.8241,67.8231,4.5">بامیان</option>
231        <option value="32.3740,62.1139,4.5">فراه</option>
232        <option value="36.7359,69.5146,4.5">تالقان</option>
233        <option value="30.9592,61.8624,4.5">زرنج</option>
234        <option value="36.6669,65.7567,4.5">شبرغان</option>
235        <option value="35.9490,68.7157,4.5">پل خمری</option>
236        <option value="33.3338,69.9220,4.5">خوست</option>
237        <option value="33.5976,69.2266,4.5">گردیز</option>
238        <option value="35.4700,64.3662,4.5">میمنه</option>
239        <option value="33.0000,65.0167,4.5">لشکرگاه</option>
240        <option value="34.7681,67.2089,4.5">چاریکار</option>
241        <option value="34.1706,70.5776,4.5">مهتر لام</option>
242        <option value="35.2985,69.0122,4.5">پل‌علم</option>
243      </select>
244    </div>
245    <div class="cb-row">
246      <label>📅 تاریخ:</label>
247      <input type="date" class="dinp" id="dinp">
248    </div>
249    <button class="calc-btn" onclick="calc()">محاسبه اوقات</button>
250  </div>
251
252  <div class="next-bar" id="next-bar" style="display:none">
253    <div><div class="nb-lbl">نماز بعدی</div><div class="nb-name" id="nb-nm">—</div></div>
254    <div class="nb-time" id="nb-t">—</div>
255    <div><div class="nb-lbl">مانده تا اذان</div><div class="nb-cd" id="nb-cd">—</div></div>
256    <div class="nb-prog"><div class="nb-fill" id="nb-f" style="width:0%"></div></div>
257  </div>
258</div>
259</div>
260
261<div class="wrap">
262<div>
263
264  <div class="card">
265    <div class="card-hd">
266      <span class="card-title" id="card-title">اوقات شرعی</span>
267      <span class="card-sub" id="card-sub">شهر را انتخاب کنید</span>
268    </div>
269    <div style="display:flex;border-bottom:1px solid var(--border);">
270      <button class="tab on" id="tab-h" onclick="setTab('h')">🕌 حنفی</button>
271      <div class="tab-sep"></div>
272      <button class="tab st" id="tab-s" onclick="setTab('s')">☽ جعفری (شیعه)</button>
273    </div>
274    <div id="panel-h" class="pt">
275      <div style="padding:20px;text-align:center;color:var(--muted);font-size:.85rem">شهر و تاریخ را انتخاب کنید و «محاسبه اوقات» را بزنید.</div>
276    </div>
277    <div id="panel-s" class="pt" style="display:none">
278      <div style="padding:20px;text-align:center;color:var(--muted);font-size:.85rem">شهر و تاریخ را انتخاب کنید و «محاسبه اوقات» را بزنید.</div>
279    </div>
280  </div>
281
282  <div class="card">
283    <div class="card-hd"><span class="card-title">⚖️ مقایسه حنفی و جعفری</span></div>
284    <div style="overflow-x:auto">
285      <table class="cmp">
286        <thead><tr>
287          <th style="text-align:right">نماز</th>
288          <th style="color:var(--g)">🕌 حنفی</th>
289          <th style="color:var(--sc)">☽ جعفری</th>
290          <th>اختلاف</th>
291        </tr></thead>
292        <tbody id="cmp-body"><tr><td colspan="4" style="padding:14px;text-align:center;color:var(--muted);font-size:.8rem">بعد از محاسبه نمایش داده می‌شود</td></tr></tbody>
293      </table>
294    </div>
295  </div>
296
297  <div class="card">
298    <div class="card-hd"><span class="card-title">📅 تقویم ۳۰ روز آینده</span></div>
299    <div class="ms"><table class="mt" id="mtable">
300      <thead><tr>
301        <th class="dc">تاریخ شمسی</th>
302        <th class="hv">فجر(ح)</th><th class="sv">فجر(ج)</th>
303        <th>ظهر</th>
304        <th class="hv">عصر(ح)</th><th class="sv">عصر(ج)</th>
305        <th class="hv">مغرب(ح)</th><th class="sv">مغرب(ج)</th>
306        <th>عشا</th>
307      </tr></thead>
308      <tbody id="mbody"><tr><td colspan="9" style="padding:12px;text-align:center;color:var(--muted);font-size:.78rem">بعد از محاسبه نمایش می‌شود</td></tr></tbody>
309    </table></div>
310  </div>
311
312  <div class="card">
313    <div class="card-hd"><span class="card-title">📖 روش محاسبه</span></div>
314    <div style="padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:.8rem;color:var(--muted);line-height:1.8">
315      <div style="background:#f0fdf4;border-right:4px solid var(--g);border-radius:0 10px 10px 0;padding:12px">
316        <div style="font-weight:800;color:var(--g);margin-bottom:4px">🕌 مذهب حنفی</div>
317        روش: دانشگاه علوم اسلامی کراچی · فجر ۱۸° · عشا ۱۸°<br>
318        وقت عصر: سایه شاخص = ۲ برابر طول + سایه ظهر (مستحب)
319      </div>
320      <div style="background:#fff7f5;border-right:4px solid var(--sc);border-radius:0 10px 10px 0;padding:12px">
321        <div style="font-weight:800;color:var(--sc);margin-bottom:4px">☽ مذهب جعفری</div>
322        روش: انستیتوی ژئوفیزیک دانشگاه تهران · فجر ۱۶° · عشا ۱۴°<br>
323        مغرب: ۴ دقیقه بعد از غروب · عصر: سایه ۱× (مانند شافعی)
324      </div>
325    </div>
326  </div>
327
328</div>
329
330<div><!-- sidebar -->
331
332  <div class="card">
333    <div class="card-hd"><span class="card-title">☀️ رویدادهای خورشیدی</span></div>
334    <div id="sun-panel">
335      <div class="sun-row"><span class="sr-ic">🌙</span><span class="sr-nm">امساک</span><span class="sr-t" id="sp-imsak">—</span></div>
336      <div class="sun-row"><span class="sr-ic">🌅</span><span class="sr-nm">طلوع آفتاب</span><span class="sr-t" id="sp-rise">—</span></div>
337      <div class="sun-row"><span class="sr-ic">☀️</span><span class="sr-nm">اذان ظهر</span><span class="sr-t" id="sp-dhuhr">—</span></div>
338      <div class="sun-row"><span class="sr-ic">🌆</span><span class="sr-nm">غروب آفتاب</span><span class="sr-t" id="sp-set">—</span></div>
339      <div class="sun-row"><span class="sr-ic">🌃</span><span class="sr-nm">نیمه‌شب شرعی</span><span class="sr-t" id="sp-mid">—</span></div>
340    </div>
341  </div>
342
343  <div class="card">
344    <div class="card-hd"><span class="card-title">🧭 جهت قبله</span><span class="card-sub" id="qc">کابل</span></div>
345    <div class="qibla-box">
346      <div class="comp">
347        <div class="cn n">ش</div><div class="cn s">ج</div>
348        <div class="cn e">ق</div><div class="cn w">غ</div>
349        <div class="needle" id="needle"></div>
350        <div class="cdot"></div>
351      </div>
352      <div style="font-size:.82rem;font-weight:700;color:var(--text)" id="qdeg">—</div>
353      <div style="font-size:.7rem;color:var(--muted);margin-top:4px">از شمال جغرافیایی</div>
354    </div>
355  </div>
356
357  <div class="card">
358    <div class="card-hd"><span class="card-title">📊 آمار روز</span></div>
359    <div class="info-row"><span class="ir-l">طول روز</span><span class="ir-v" id="ir-day">—</span></div>
360    <div class="info-row"><span class="ir-l">طول شب</span><span class="ir-v" id="ir-night">—</span></div>
361    <div class="info-row"><span class="ir-l">اختلاف عصر ح/ج</span><span class="ir-v" id="ir-asr">—</span></div>
362    <div class="info-row"><span class="ir-l">اختلاف مغرب ح/ج</span><span class="ir-v" id="ir-mgh">—</span></div>
363  </div>
364
365  <div class="card">
366    <div class="card-hd"><span class="card-title">📌 نکات</span></div>
367    <div style="padding:10px 12px;display:flex;flex-direction:column;gap:7px">
368      <div class="note g">محاسبه آفلاین با الگوریتم نجومی دقیق — بدون نیاز به اینترنت.</div>
369      <div class="note a">وقت‌ها به وقت محلی افغانستان (UTC+۴:۳۰) است.</div>
370      <div class="note r">در ماه رمضان افطار و سحری را با مسجد محلی تطبیق دهید.</div>
371    </div>
372  </div>
373
374</div>
375</div>
376
377<script>
378/* ══════════════════════════════════════════
379   PrayTimes Algorithm
380   بر اساس praytimes.org — GPL License
381   ══════════════════════════════════════════ */
382var PT={
383  // روش‌های محاسبه
384  MWL:{fajr:18,isha:17},
385  ISNA:{fajr:15,isha:15},
386  Egypt:{fajr:19.5,isha:17.5},
387  Makkah:{fajr:18.5,isha:'90 min'},
388  Karachi:{fajr:18,isha:18},  // حنفی
389  Tehran:{fajr:16,isha:14,maghrib:4.5,midnight:'Jafari'}, // جعفری
390
391  dtr:function(d){return d*Math.PI/180;},
392  rtd:function(r){return r*180/Math.PI;},
393  sin:function(d){return Math.sin(this.dtr(d));},
394  cos:function(d){return Math.cos(this.dtr(d));},
395  tan:function(d){return Math.tan(this.dtr(d));},
396  asin:function(x){return this.rtd(Math.asin(x));},
397  acos:function(x){return this.rtd(Math.acos(x));},
398  atan:function(x){return this.rtd(Math.atan(x));},
399  atan2:function(y,x){return this.rtd(Math.atan2(y,x));},
400
401  fix:function(a,b){a=a-b*Math.floor(a/b);return a<0?a+b:a;},
402  fix360:function(a){return this.fix(a,360);},
403  fixHour:function(a){return this.fix(a,24);},
404
405  julianDate:function(y,m,d){
406    if(m<=2){y--;m+=12;}
407    var A=Math.floor(y/100),B=2-A+Math.floor(A/4);
408    return Math.floor(365.25*(y+4716))+Math.floor(30.6001*(m+1))+d+B-1524.5;
409  },
410
411  sunPosition:function(jd){
412    var D=jd-2451545;
413    var g=this.fix360(357.529+0.98560028*D);
414    var q=this.fix360(280.459+0.98564736*D);
415    var L=this.fix360(q+1.915*this.sin(g)+0.020*this.sin(2*g));
416    var e=23.439-0.00000036*D;
417    var RA=this.rtd(Math.atan2(this.cos(e)*this.sin(L),this.cos(L)))/15;
418    var d=this.asin(this.sin(e)*this.sin(L));
419    var EqT=q/15-this.fix(RA,24);
420    return{d:d,eq:EqT};
421  },
422
423  midDay:function(jd,lng,t){
424    var sp=this.sunPosition(jd+t);
425    return this.fixHour(12-sp.eq-lng/15);
426  },
427
428  sunAngleTime:function(jd,lat,lng,angle,time,ccw){
429    var sp=this.sunPosition(jd+time);
430    var cosVal=-this.sin(angle)-this.sin(lat)*this.sin(sp.d);
431    cosVal=cosVal/(this.cos(lat)*this.cos(sp.d));
432    if(cosVal<-1) cosVal=-1;
433    if(cosVal>1)  cosVal=1;
434    var t=this.acos(cosVal)/15;
435    return this.midDay(jd,lng,time)+(ccw?-t:t);
436  },
437
438  asrTime:function(jd,lat,lng,factor,time){
439    var sp=this.sunPosition(jd+time);
440    var angle=-this.atan(1/(factor+this.tan(Math.abs(lat-sp.d))));
441    return this.sunAngleTime(jd,lat,lng,angle,time,false);
442  },
443
444  // محاسبه اصلی
445  compute:function(lat,lng,tz,date,method,school){
446    var jd=this.julianDate(date.getFullYear(),date.getMonth()+1,date.getDate());
447    var t=function(h){return h-lng/15;};
448    var p=this;
449
450    // noon
451    var noon=this.midDay(jd,lng,12);
452
453    // fajr
454    var fajrAngle=method.fajr||18;
455    var fajr=this.sunAngleTime(jd,lat,lng,fajrAngle,t(5),true);
456
457    // sunrise
458    var sunrise=this.sunAngleTime(jd,lat,lng,0.833,t(6),true);
459
460    // sunset
461    var sunset=this.sunAngleTime(jd,lat,lng,0.833,t(18),false);
462
463    // dhuhr = noon + small offset
464    var dhuhr=noon+0.5/60;
465
466    // asr — حنفی: factor=2, شافعی/جعفری: factor=1
467    var asrFactor=school===1?2:1;
468    var asrTime=this.asrTime(jd,lat,lng,asrFactor,t(13));
469
470    // maghrib
471    var maghrib;
472    if(method.maghrib){
473      // جعفری: چند دقیقه بعد غروب
474      maghrib=sunset+method.maghrib/60;
475    } else {
476      maghrib=sunset;
477    }
478
479    // isha
480    var isha;
481    if(typeof method.isha==='string'&&method.isha.includes('min')){
482      isha=maghrib+parseInt(method.isha)/60;
483    } else {
484      isha=this.sunAngleTime(jd,lat,lng,method.isha||18,t(18),false);
485    }
486
487    // imsak = fajr - 10 min
488    var imsak=fajr-10/60;
489
490    // midnight
491    var midnight;
492    if(method.midnight==='Jafari'){
493      midnight=sunset+(sunrise+24-sunset)/2;
494    } else {
495      midnight=sunset+(sunrise+24-sunset)/2;
496    }
497
498    // convert to time string
499    var fmt=function(h){
500      h=p.fixHour(h+tz);
501      var hh=Math.floor(h),mm=Math.round((h-hh)*60);
502      if(mm>=60){hh++;mm=0;}
503      if(hh>=24) hh-=24;
504      return ('0'+hh).slice(-2)+':'+('0'+mm).slice(-2);
505    };
506    var fmt12=function(s){
507      var p2=s.split(':'),h=parseInt(p2[0]),m=p2[1];
508      return (h%12||12)+':'+m+(h<12?' AM':' PM');
509    };
510
511    var times={
512      imsak:fmt(imsak),fajr:fmt(fajr),sunrise:fmt(sunrise),
513      dhuhr:fmt(dhuhr),asr:fmt(asrTime),sunset:fmt(sunset),
514      maghrib:fmt(maghrib),isha:fmt(isha),midnight:fmt(midnight)
515    };
516    Object.keys(times).forEach(function(k){times[k+'12']=fmt12(times[k]);});
517    return times;
518  }
519};
520
521/* ══════════════════════════════════════════
522   تقویم شمسی
523   ══════════════════════════════════════════ */
524var SHM=['حمل','ثور','جوزا','سرطان','اسد','سنبله','میزان','عقرب','قوس','جدی','دلو','حوت'];
525var SHD=['یکشنبه','دوشنبه','سه‌شنبه','چهارشنبه','پنجشنبه','جمعه','شنبه'];
526
527function toSH(gy,gm,gd){
528  var gy2=gy-1600,gm2=gm-1,gd2=gd-1;
529  var g=[0,31,59,90,120,151,181,212,243,273,304,334];
530  var gdn=365*gy2+Math.floor((gy2+3)/4)-Math.floor((gy2+99)/100)+Math.floor((gy2+399)/400)+g[gm2]+gd2;
531  if(gm2>1&&((gy%4===0&&gy%100!==0)||gy%400===0))gdn++;
532  var jdn=gdn-79,jnp=Math.floor(jdn/12053);jdn%=12053;
533  var jy=979+33*jnp+4*Math.floor(jdn/1461);jdn%=1461;
534  if(jdn>=366){jy+=Math.floor((jdn-1)/365);jdn=(jdn-1)%365;}
535  var ml=[31,31,31,31,31,31,30,30,30,30,30,29];
536  for(var i=0;i<12;i++){if(jdn<ml[i])return{y:jy,m:i+1,d:jdn+1,mn:SHM[i]};jdn-=ml[i];}
537}
538function toHijri(gy,gm,gd){
539  var a=(14-gm)/12|0,y=gy+4800-a,mo=gm+12*a-3;
540  var JD=gd+((153*mo+2)/5|0)+365*y+(y/4|0)-(y/100|0)+(y/400|0)-32045;
541  var l=JD-1948440+10632,n=(l-1)/10631|0;
542  l=l-10631*n+354;var j=(10985-l)/5965|0;l=l-5765*j+10;
543  var mo2=((l*2-1)/59)|0,d=l-((mo2*59+1)/2|0),m=mo2,y2=30*n+j;
544  if(m>12){m-=12;y2++;}
545  return{y:y2,m:m,d:d};
546}
547var HM=['','محرم','صفر','ربیع‌الاول','ربیع‌الثانی','جمادی‌الاول','جمادی‌الثانی','رجب','شعبان','رمضان','شوال','ذیقعده','ذیحجه'];
548function fa(n){return String(n).replace(/\d/g,function(d){return'Û°Û±Û²Û³Û´ÛµÛ¶Û·Û¸Û¹'[d];});}
549
550/* ══════════════════════════════════════════
551   State و محاسبه
552   ══════════════════════════════════════════ */
553var STATE={h:null,s:null,lat:34.5281,lng:69.1723,tz:4.5,city:'کابل',date:new Date()};
554var CTAB='h';
555
556// تنظیم تاریخ
557var today=new Date();
558document.getElementById('dinp').value=today.toISOString().split('T')[0];
559
560// ساعت
561function tick(){
562  var n=new Date();
563  document.getElementById('clk').textContent=('0'+n.getHours()).slice(-2)+':'+('0'+n.getMinutes()).slice(-2)+':'+('0'+n.getSeconds()).slice(-2);
564  updateNext();
565}
566setInterval(tick,1000);tick();
567
568// hero date
569function updateHeroDates(){
570  var n=new Date();
571  var s=toSH(n.getFullYear(),n.getMonth()+1,n.getDate());
572  var h=toHijri(n.getFullYear(),n.getMonth()+1,n.getDate());
573  document.getElementById('dc-sh').textContent=fa(s.d)+' '+s.mn+' '+fa(s.y);
574  document.getElementById('dc-hj').textContent=fa(h.d)+' '+HM[h.m]+' '+fa(h.y);
575}
576updateHeroDates();
577
578function calc(){
579  var sel=document.getElementById('csel');
580  var parts=sel.value.split(',');
581  STATE.lat=parseFloat(parts[0]);
582  STATE.lng=parseFloat(parts[1]);
583  STATE.tz=parseFloat(parts[2]);
584  STATE.city=sel.options[sel.selectedIndex].text;
585
586  var dv=document.getElementById('dinp').value;
587  var dp=dv.split('-');
588  STATE.date=new Date(parseInt(dp[0]),parseInt(dp[1])-1,parseInt(dp[2]));
589
590  // محاسبه حنفی
591  STATE.h=PT.compute(STATE.lat,STATE.lng,STATE.tz,STATE.date,PT.Karachi,1);
592  // محاسبه جعفری
593  STATE.s=PT.compute(STATE.lat,STATE.lng,STATE.tz,STATE.date,PT.Tehran,0);
594
595  renderPanels();
596  renderCompare();
597  renderMonthly();
598  updateSunPanel();
599  updateStats();
600  calcQibla();
601  document.getElementById('next-bar').style.display='flex';
602  updateNext();
603
604  // عنوان
605  var sh=toSH(STATE.date.getFullYear(),STATE.date.getMonth()+1,STATE.date.getDate());
606  document.getElementById('card-title').textContent='اوقات شرعی — '+STATE.city;
607  document.getElementById('card-sub').textContent=fa(sh.d)+' '+sh.mn+' '+fa(sh.y);
608}
609
610/* ══════════════════════════════════════════
611   رندر پانل‌ها
612   ══════════════════════════════════════════ */
613var ROWS=[
614  {k:'imsak',n:'امساک',ar:'الإمساك',ic:'🌙',skip_s:true},
615  {k:'fajr',n:'فجر',ar:'الفجر',ic:'🌄'},
616  {k:'sunrise',n:'طلوع آفتاب',ar:'الشروق',ic:'🌅',info:true},
617  {k:'dhuhr',n:'ظهر',ar:'الظهر',ic:'☀️'},
618  {k:'asr',n:'عصر',ar:'العصر',ic:'🌤'},
619  {k:'maghrib',n:'مغرب',ar:'المغرب',ic:'🌆'},
620  {k:'isha',n:'عشا',ar:'العشاء',ic:'🌃'},
621  {k:'midnight',n:'نیمه‌شب',ar:'منتصف الليل',ic:'🌙',info:true},
622];
623var PK=['fajr','dhuhr','asr','maghrib','isha'];
624var PN={fajr:'فجر',dhuhr:'ظهر',asr:'عصر',maghrib:'مغرب',isha:'عشا'};
625
626function toM(t){var p=t.split(':');return parseInt(p[0])*60+parseInt(p[1]);}
627function toS(t){var p=t.split(':');return parseInt(p[0])*3600+parseInt(p[1])*60;}
628
629function nextKey(times){
630  var n=new Date();
631  var nm=n.getHours()*60+n.getMinutes();
632  var isToday=STATE.date.toDateString()===new Date().toDateString();
633  if(!isToday) return PK[0];
634  for(var i=0;i<PK.length;i++){
635    var k=PK[i];
636    if(times[k]&&toM(times[k])>nm) return k;
637  }
638  return PK[0];
639}
640
641function renderPanel(which,times,isSh){
642  if(!times) return;
643  var nk=nextKey(times);
644  var html='';
645  ROWS.forEach(function(r){
646    if(isSh&&r.skip_s) return;
647    var t=times[r.k]||'—',t12=times[r.k+'12']||'';
648    var isCur=(r.k===nk&&!r.info);
649    var cls='pr'+(isCur?(isSh?' cur scur':' cur'):'');
650    html+='<div class="'+cls+'">'
651      +'<span class="pr-icon">'+r.ic+'</span>'
652      +'<div class="pr-info"><div class="pr-name">'+r.n+'</div><div class="pr-ar">'+r.ar+'</div></div>'
653      +(isCur?'<span class="now-badge'+(isSh?' sc':'')+'">اکنون</span>':'')
654      +'<div class="pr-right"><div class="pr-time'+(isSh?' sc':'')+'">'+t+'</div><div class="pr-12">'+t12+'</div></div>'
655      +'</div>';
656  });
657  document.getElementById('panel-'+which).innerHTML=html;
658}
659
660function renderPanels(){
661  renderPanel('h',STATE.h,false);
662  renderPanel('s',STATE.s,true);
663}
664
665/* ══════════════════════════════════════════
666   مقایسه
667   ══════════════════════════════════════════ */
668function renderCompare(){
669  var h=STATE.h,s=STATE.s; if(!h||!s) return;
670  var nk=nextKey(h);
671  var rows=[{k:'fajr',n:'فجر'},{k:'dhuhr',n:'ظهر'},{k:'asr',n:'عصر'},{k:'maghrib',n:'مغرب'},{k:'isha',n:'عشا'}];
672  var html='';
673  rows.forEach(function(r){
674    var ht=h[r.k],st=s[r.k];
675    var diff=toM(st)-toM(ht);
676    var cls=diff>0?'p':diff<0?'n':'z';
677    var ds=diff===0?'یکسان':(diff>0?'+':'')+diff+'د';
678    var isCur=r.k===nk;
679    html+='<tr'+(isCur?' class="cr"':'')+'>'
680      +'<td class="nm">'+r.n+'</td>'
681      +'<td class="hc">'+ht+'</td><td class="sc">'+st+'</td>'
682      +'<td class="dif '+cls+'">'+ds+'</td></tr>';
683  });
684  document.getElementById('cmp-body').innerHTML=html;
685}
686
687/* ══════════════════════════════════════════
688   تقویم ماهانه
689   ══════════════════════════════════════════ */
690function renderMonthly(){
691  var html='';
692  var td=new Date();
693  for(var i=0;i<30;i++){
694    var d=new Date(STATE.date); d.setDate(d.getDate()+i);
695    var sh=toSH(d.getFullYear(),d.getMonth()+1,d.getDate());
696    var hh=PT.compute(STATE.lat,STATE.lng,STATE.tz,d,PT.Karachi,1);
697    var ss=PT.compute(STATE.lat,STATE.lng,STATE.tz,d,PT.Tehran,0);
698    var isT=d.toDateString()===td.toDateString();
699    html+='<tr'+(isT?' class="tr"':'')+'>'
700      +'<td class="dc">'+fa(sh.d)+' '+sh.mn+'</td>'
701      +'<td class="hv">'+hh.fajr+'</td><td class="sv">'+ss.fajr+'</td>'
702      +'<td>'+hh.dhuhr+'</td>'
703      +'<td class="hv">'+hh.asr+'</td><td class="sv">'+ss.asr+'</td>'
704      +'<td class="hv">'+hh.maghrib+'</td><td class="sv">'+ss.maghrib+'</td>'
705      +'<td>'+hh.isha+'</td>'
706      +'</tr>';
707  }
708  document.getElementById('mbody').innerHTML=html;
709}
710
711/* ══════════════════════════════════════════
712   نماز بعدی
713   ══════════════════════════════════════════ */
714function updateNext(){
715  var h=STATE.h; if(!h) return;
716  var isToday=STATE.date.toDateString()===new Date().toDateString();
717  if(!isToday) return;
718  var nk=nextKey(h);
719  var t=h[nk]; if(!t) return;
720  var n=new Date();
721  var ns=n.getHours()*3600+n.getMinutes()*60+n.getSeconds();
722  var ps=toS(t);
723  var diff=ps-ns; if(diff<0) diff+=86400;
724  var hh=Math.floor(diff/3600),mm=Math.floor((diff%3600)/60),ss=diff%60;
725  document.getElementById('nb-nm').textContent=PN[nk]||nk;
726  document.getElementById('nb-t').textContent=t;
727  document.getElementById('nb-cd').textContent=('0'+hh).slice(-2)+':'+('0'+mm).slice(-2)+':'+('0'+ss).slice(-2);
728  // progress
729  var prevK=PK[PK.indexOf(nk)-1];
730  if(prevK&&h[prevK]){
731    var total=toS(t)-toS(h[prevK]); if(total<0)total+=86400;
732    var passed=ns-toS(h[prevK]); if(passed<0)passed+=86400;
733    document.getElementById('nb-f').style.width=Math.min(100,(passed/total*100))+'%';
734  }
735}
736
737/* ══════════════════════════════════════════
738   اطلاعات جانبی
739   ══════════════════════════════════════════ */
740function updateSunPanel(){
741  var h=STATE.h; if(!h) return;
742  document.getElementById('sp-imsak').textContent=h.imsak;
743  document.getElementById('sp-rise').textContent=h.sunrise;
744  document.getElementById('sp-dhuhr').textContent=h.dhuhr;
745  document.getElementById('sp-set').textContent=h.sunset;
746  document.getElementById('sp-mid').textContent=h.midnight;
747}
748
749function updateStats(){
750  var h=STATE.h,s=STATE.s; if(!h) return;
751  var dayM=toM(h.sunset)-toM(h.sunrise);
752  var nightM=1440-dayM;
753  document.getElementById('ir-day').textContent=fa(Math.floor(dayM/60))+'س '+fa(dayM%60)+'د';
754  document.getElementById('ir-night').textContent=fa(Math.floor(nightM/60))+'س '+fa(nightM%60)+'د';
755  if(s){
756    var da=toM(s.asr)-toM(h.asr),dm=toM(s.maghrib)-toM(h.maghrib);
757    document.getElementById('ir-asr').textContent=(da>=0?'+':'')+da+' دقیقه';
758    document.getElementById('ir-mgh').textContent=(dm>=0?'+':'')+dm+' دقیقه';
759  }
760}
761
762function calcQibla(){
763  var MLAT=21.4225,MLNG=39.8262;
764  var lat1=STATE.lat*Math.PI/180,lat2=MLAT*Math.PI/180;
765  var dl=(MLNG-STATE.lng)*Math.PI/180;
766  var y=Math.sin(dl)*Math.cos(lat2);
767  var x=Math.cos(lat1)*Math.sin(lat2)-Math.sin(lat1)*Math.cos(lat2)*Math.cos(dl);
768  var b=(Math.atan2(y,x)*180/Math.PI+360)%360;
769  document.getElementById('needle').style.transform='rotate('+b+'deg)';
770  document.getElementById('qdeg').textContent='زاویه: '+Math.round(b)+'° از شمال';
771  document.getElementById('qc').textContent=STATE.city;
772}
773
774function setTab(t){
775  CTAB=t;
776  document.getElementById('tab-h').classList.toggle('on',t==='h');
777  document.getElementById('tab-s').classList.toggle('on',t==='s');
778  document.getElementById('panel-h').style.display=t==='h'?'':'none';
779  document.getElementById('panel-s').style.display=t==='s'?'':'none';
780}
781
782// اجرای اولیه با کابل و امروز
783calcQibla();
784calc();
785</script>
785
786</body>
787</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.