-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathkibla.html
163 lines (155 loc) · 7.97 KB
/
kibla.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
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>السنن الرواتب - رمضان</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Amiri', serif;
background: url('islamic-pattern.png') repeat;
}
.islamic-border {
border: 2px solid #2c594f;
position: relative;
padding: 1rem;
}
.islamic-border::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid #d4af37;
pointer-events: none;
}
.hadith-box {
background: #f5f3e4;
border-right: 5px solid #2c594f;
padding: 1.5rem;
margin: 1rem 0;
}
</style>
</head>
<body class="bg-amber-50">
<header class="bg-emerald-800 text-white text-center py-8 shadow-xl">
<div class="container mx-auto">
<h1 class="text-4xl font-bold mb-4">السنن الرواتب في رمضان</h1>
<p class="text-xl">"مَن صلَّى ثِنتَي عشرةَ رَكْعةً في يومٍ وليلةٍ، بُنِيَ له بيتٌ في الجنة"</p>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<!-- مراتب التفضيل -->
<section class="bg-white rounded-lg shadow-lg p-6 mb-8 islamic-border">
<h2 class="text-3xl text-emerald-800 font-bold mb-6">مراتب تفضيل السنن الرواتب</h2>
<ol class="list-decimal pr-8 space-y-4 text-lg">
<li class="text-emerald-700 font-semibold">
<span class="text-black">ركعتا الفجر: الآكد والأفضل</span>
<p class="text-gray-600 text-base mt-2">(سنة مؤكدة عند الجمهور)</p>
</li>
<li class="text-emerald-700">
<span class="text-black">الرواتب المؤكدة:</span>
<ul class="list-disc pr-6 mt-2 text-gray-700">
<li>أربع قبل الظهر + ركعتان بعده</li>
<li>ركعتان بعد المغرب</li>
<li>ركعتان بعد العشاء مع الوتر</li>
</ul>
</li>
<li class="text-emerald-700">
<span class="text-black">الرواتب المستحبة:</span>
<ul class="list-disc pr-6 mt-2 text-gray-700">
<li>ركعتان إضافيتان بعد الظهر</li>
<li>أربع قبل العصر</li>
<li>ركعتان قبل المغرب</li>
<li>ركعتان قبل العشاء</li>
</ul>
</li>
</ol>
</section>
<!-- الأوقات والأنواع -->
<div class="grid md:grid-cols-2 gap-8 mb-8">
<section class="bg-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl text-emerald-800 font-bold mb-4">أوقات الأداء</h2>
<div class="space-y-4">
<div class="bg-amber-50 p-4 rounded">
<h3 class="font-bold text-emerald-700">الراتبة القبلية</h3>
<p>تبدأ بدخول وقت الفرض وتنتهي بخروجه</p>
</div>
<div class="bg-amber-50 p-4 rounded">
<h3 class="font-bold text-emerald-700">الراتبة البعدية</h3>
<p>تبدأ بعد الانتهاء من الفرض وتنتهي بخروج وقت الفرض</p>
</div>
</div>
</section>
<section class="bg-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl text-emerald-800 font-bold mb-4">الجدول الكامل</h2>
<table class="w-full border-collapse text-center">
<thead class="bg-emerald-100">
<tr>
<th class="p-3 border">الصلاة</th>
<th class="p-3 border">قبلية</th>
<th class="p-3 border">بعدية</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-amber-50">
<td class="p-3 border">الفجر</td>
<td class="p-3 border font-bold text-emerald-700">2</td>
<td class="p-3 border">-</td>
</tr>
<tr class="hover:bg-amber-50">
<td class="p-3 border">الظهر</td>
<td class="p-3 border font-bold text-emerald-700">4</td>
<td class="p-3 border">2 (+2 مستحب)</td>
</tr>
<tr class="hover:bg-amber-50">
<td class="p-3 border">العصر</td>
<td class="p-3 border">4 (مستحب)</td>
<td class="p-3 border">-</td>
</tr>
<tr class="hover:bg-amber-50">
<td class="p-3 border">المغرب</td>
<td class="p-3 border">2 (مستحب)</td>
<td class="p-3 border font-bold text-emerald-700">2</td>
</tr>
<tr class="hover:bg-amber-50">
<td class="p-3 border">العشاء</td>
<td class="p-3 border">2 (مستحب)</td>
<td class="p-3 border font-bold text-emerald-700">2 + وتر</td>
</tr>
</tbody>
</table>
</section>
</div>
<!-- الأحاديث والفضائل -->
<section class="bg-white rounded-lg shadow-lg p-6 mb-8">
<h2 class="text-3xl text-emerald-800 font-bold mb-6">الأدلة والفضائل</h2>
<div class="hadith-box">
<p class="text-xl leading-relaxed">"ركعتا الفجر خير من الدنيا وما فيها"</p>
<p class="text-gray-600 mt-2">(رواه مسلم)</p>
</div>
<div class="hadith-box">
<p class="text-xl leading-relaxed">"من حافظ على أربع قبل الظهر وأربع بعدها حرمه الله على النار"</p>
<p class="text-gray-600 mt-2">(رواه الترمذي)</p>
</div>
<div class="bg-emerald-50 p-6 rounded-lg mt-6">
<h3 class="text-2xl text-emerald-800 font-bold mb-4">الفضائل العامة</h3>
<ul class="list-disc pr-6 space-y-3">
<li>بناء بيت في الجنة لكل 12 ركعة يومية</li>
<li>جبر النقص في الفرائض</li>
<li>رفع الدرجات ومحو السيئات</li>
</ul>
</div>
</section>
</main>
<footer class="bg-emerald-900 text-white py-6 text-center">
<div class="container mx-auto">
<p class="mb-4">المراجع: صحيح البخاري - صحيح مسلم - سنن الترمذي</p>
<p>© 2024 موقع السنن الرواتب - جميع الحقوق محفوظة</p>
</div>
</footer>
</body>
</html>