-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathafternoon-prayer.html
270 lines (252 loc) · 18.5 KB
/
afternoon-prayer.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
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İkindi Namazı - Namaz Hocası 2025</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="js/tailwind.config.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-gray-100 dark:bg-gray-900 min-h-screen">
<header class="bg-white dark:bg-gray-800 shadow-sm">
<nav class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<a href="index.html" class="text-xl font-semibold text-gray-800 dark:text-white">Namaz Hocası</a>
<!-- Dark mode toggle -->
<div class="flex items-center space-x-4">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="darkModeToggle" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Karanlık Mod</span>
</label>
<!-- Mobile menu button -->
<button id="menuButton" class="md:hidden text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="hidden md:flex mt-4 md:mt-0">
<div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-2 md:space-y-0">
<a href="prayers.html" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Namazlar</a>
<a href="prayer-suras.html" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Namaz Sureleri</a>
<a href="prayer-duas.html" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Namaz Duaları</a>
<a href="ablutions.html" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Abdest</a>
</div>
</div>
</nav>
</header>
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<div class="relative rounded-xl overflow-hidden mb-8 h-64 md:h-96">
<img src="img/ikindinamazi_hero.jpg" alt="İkindi Namazı" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 text-white">
<h1 class="text-3xl md:text-4xl font-bold mb-2">İkindi Namazı</h1>
<p class="text-lg md:text-xl">Günün orta vaktinde manevi huzur</p>
</div>
</div>
<!-- Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Main Content -->
<div class="lg:col-span-2 space-y-6">
<!-- Namaz Bilgileri -->
<section class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
<h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">Namaz Vakti</h2>
<div class="space-y-4 text-gray-600 dark:text-gray-300">
<p>İkindi namazı vakti, her şeyin gölgesi, öğle vaktindeki gölgesinin iki katına ulaştığı andan güneşin batmasına kadar olan süredir.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<h3 class="font-semibold text-gray-900 dark:text-white mb-2">Başlangıç</h3>
<p>Her şeyin gölgesi, kendi boyunun iki katına ulaştığında</p>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<h3 class="font-semibold text-gray-900 dark:text-white mb-2">Bitiş</h3>
<p>Güneşin batmasına kadar</p>
</div>
</div>
</div>
</section>
<!-- Namaz Kılınışı -->
<section class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
<h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">Namaz Kılınışı</h2>
<div class="space-y-6">
<!-- Sünnet -->
<div class="border-b border-gray-200 dark:border-gray-700 pb-6">
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">İkindi Namazının 4 Rekat Sünnetinin Kılınışı</h3>
<!-- 1. Rekat -->
<div class="mb-6">
<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-3">1. Rekat</h4>
<ol class="list-decimal list-inside space-y-3 text-gray-600 dark:text-gray-300">
<li class="pl-4">"Niyet ettim Allah rızası için İkindi namazının dört rekat sünnetini kılmaya" diye niyet ederiz</li>
<li class="pl-4">"Allahu Ekber" diyerek İftitah Tekbiri alır ve namaza başlarız</li>
<li class="pl-4">Subhaneke'yi okuruz</li>
<li class="pl-4">Euzü-besmele çekeriz</li>
<li class="pl-4">Fatiha okuruz</li>
<li class="pl-4">Zammı süre veya üç kısa veya bir uzun ayet okunur</li>
<li class="pl-4">Rüku'ya gideriz</li>
<li class="pl-4">Secde'ye gideriz. Doğruluruz, tekrar Secde'ye gideriz</li>
</ol>
</div>
<!-- 2. Rekat -->
<div class="mb-6">
<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-3">2. Rekat</h4>
<ol class="list-decimal list-inside space-y-3 text-gray-600 dark:text-gray-300">
<li class="pl-4">Ayağa kalkarak kıyama dururuz</li>
<li class="pl-4">Besmele çekeriz</li>
<li class="pl-4">Fatiha okuruz</li>
<li class="pl-4">Zammı süre veya üç kısa veya bir uzun ayet okunur</li>
<li class="pl-4">Rüku'ya gideriz</li>
<li class="pl-4">Secde'ye gideriz. Doğruluruz, tekrar Secde'ye gideriz</li>
<li class="pl-4">Oturarak Ettahiyyatu ve Allâhumme salli, Allâhumme Bârik dualarını okuruz</li>
</ol>
</div>
<!-- 3. Rekat -->
<div class="mb-6">
<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-3">3. Rekat</h4>
<ol class="list-decimal list-inside space-y-3 text-gray-600 dark:text-gray-300">
<li class="pl-4">Ayağa kalkarak kıyama dururuz</li>
<li class="pl-4">Subhaneke'yi okuruz</li>
<li class="pl-4">Euzü-besmele çekeriz</li>
<li class="pl-4">Fatiha okuruz</li>
<li class="pl-4">Zammı süre veya üç kısa veya bir uzun ayet okunur</li>
<li class="pl-4">Rüku'ya gideriz</li>
<li class="pl-4">Secde'ye gideriz. Doğruluruz, tekrar Secde'ye gideriz</li>
</ol>
</div>
<!-- 4. Rekat -->
<div>
<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-3">4. Rekat</h4>
<ol class="list-decimal list-inside space-y-3 text-gray-600 dark:text-gray-300">
<li class="pl-4">Ayağa kalkarak kıyama dururuz</li>
<li class="pl-4">Besmele çekeriz</li>
<li class="pl-4">Fatiha okuruz</li>
<li class="pl-4">Zammı süre veya üç kısa veya bir uzun ayet okunur</li>
<li class="pl-4">Rüku'ya gideriz</li>
<li class="pl-4">Secde'ye gideriz. Doğruluruz, tekrar Secde'ye gideriz</li>
<li class="pl-4">Oturarak Ettahiyyatu ve Allâhumme salli, Allâhumme Bârik ve Rabbenâ dualarını okuruz</li>
<li class="pl-4">"Es selâmu aleyküm ve rahmet'ullah" diye sağa ve sola selam vererek namazı tamamlarız</li>
</ol>
</div>
</div>
<!-- Farz -->
<div>
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">İkindi Namazının 4 Rekat Farzının Kılınışı</h3>
<!-- 1. Rekat -->
<div class="mb-6">
<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-3">1. Rekat</h4>
<ol class="list-decimal list-inside space-y-3 text-gray-600 dark:text-gray-300">
<li class="pl-4">"Niyet ettim Allah rızası için İkindi namazının dört rekat farzını kılmaya" diye niyet ederiz</li>
<li class="pl-4">"Allahu Ekber" diyerek İftitah Tekbiri alır ve namaza başlarız</li>
<li class="pl-4">Subhaneke'yi okuruz</li>
<li class="pl-4">Euzü-besmele çekeriz</li>
<li class="pl-4">Fatiha okuruz</li>
<li class="pl-4">Zammı süre veya üç kısa veya bir uzun ayet okunur</li>
<li class="pl-4">Rüku'ya gideriz</li>
<li class="pl-4">Secde'ye gideriz. Doğruluruz, tekrar Secde'ye gideriz</li>
</ol>
</div>
<!-- 2. Rekat -->
<div class="mb-6">
<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-3">2. Rekat</h4>
<ol class="list-decimal list-inside space-y-3 text-gray-600 dark:text-gray-300">
<li class="pl-4">Ayağa kalkarak kıyama dururuz</li>
<li class="pl-4">Besmele çekeriz</li>
<li class="pl-4">Fatiha okuruz</li>
<li class="pl-4">Zammı süre veya üç kısa veya bir uzun ayet okunur</li>
<li class="pl-4">Rüku'ya gideriz</li>
<li class="pl-4">Secde'ye gideriz. Doğruluruz, tekrar Secde'ye gideriz</li>
<li class="pl-4">Oturarak Ettahiyyatu okuruz</li>
</ol>
</div>
<!-- 3. Rekat -->
<div class="mb-6">
<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-3">3. Rekat</h4>
<ol class="list-decimal list-inside space-y-3 text-gray-600 dark:text-gray-300">
<li class="pl-4">Ayağa kalkarak kıyama dururuz</li>
<li class="pl-4">Besmele çekeriz</li>
<li class="pl-4">Fatiha okuruz</li>
<li class="pl-4">Zammı süre veya üç kısa veya bir uzun ayet okunur</li>
<li class="pl-4">Rüku'ya gideriz</li>
<li class="pl-4">Secde'ye gideriz. Doğruluruz, tekrar Secde'ye gideriz</li>
</ol>
</div>
<!-- 4. Rekat -->
<div>
<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-3">4. Rekat</h4>
<ol class="list-decimal list-inside space-y-3 text-gray-600 dark:text-gray-300">
<li class="pl-4">Ayağa kalkarak kıyama dururuz</li>
<li class="pl-4">Besmele çekeriz</li>
<li class="pl-4">Fatiha okuruz</li>
<li class="pl-4">Zammı süre veya üç kısa veya bir uzun ayet okunur</li>
<li class="pl-4">Rüku'ya gideriz</li>
<li class="pl-4">Secde'ye gideriz. Doğruluruz, tekrar Secde'ye gideriz</li>
<li class="pl-4">Oturarak Ettahiyyatu ve Allâhumme salli, Allâhumme Bârik ve Rabbenâ dualarını okuruz</li>
<li class="pl-4">"Es selâmu aleyküm ve rahmet'ullah" diye sağa ve sola selam vererek namazı tamamlarız</li>
</ol>
</div>
</div>
</div>
</section>
</div>
<!-- Sidebar -->
<div class="space-y-6">
<!-- Önemli Bilgiler -->
<section class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
<h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Önemli Bilgiler</h2>
<ul class="space-y-4 text-gray-600 dark:text-gray-300">
<li class="flex items-start">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>İkindi namazı toplam 8 rekattır (4 sünnet + 4 farz)</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Sünneti gayr-i müekked sünnettir</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Güneş sararmadan kılmak daha faziletlidir</span>
</li>
</ul>
</section>
<!-- Tavsiyeler -->
<section class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
<h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Tavsiyeler</h2>
<ul class="space-y-4 text-gray-600 dark:text-gray-300">
<li class="flex items-start">
<svg class="w-6 h-6 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>İkindi namazını geciktirmemek gerekir.</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>Güneş sararmadan kılmaya özen gösterilmelidir.</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>Cemaatle kılmak 27 kat daha faziletlidir.</span>
</li>
</ul>
</section>
</div>
</div>
</main>
<!-- JavaScript -->
<script src="js/main.js"></script>
</body>
</html>