-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmorning-prayer.html
215 lines (201 loc) · 14.7 KB
/
morning-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
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sabah 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/sabahnamazi_hero.jpg" alt="Sabah 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">Sabah Namazı</h1>
<p class="text-lg md:text-xl">Günün ilk namazı ve en faziletli ibadetlerden biri</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>Sabah namazı vakti, tan yerinin ağarmasıyla (fecr-i sadık) başlar ve güneşin doğuşuna kadar devam eder.</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>Tan yerinin ağarması (fecr-i sadık)</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 doğması</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">Sabah Namazının 2 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 Sabah namazının iki 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>
<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 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">Sabah Namazının 2 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 Sabah namazının iki 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>
<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 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>Sabah namazı 2 rekat sünnet, 2 rekat farz olmak üzere toplam 4 rekattır.</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>Sabah namazının sünneti müekked sünnettir (kuvvetli sünnet).</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>Sabah namazının vakti, tan yerinin ağarmasından güneşin doğuşuna kadardır.</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>Sabah namazını ilk vaktinde kılmak daha faziletlidir.</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>Sabah namazının sünnetinde Kafirun ve İhlas surelerini okumak sünnettir.</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>Sabah namazından sonra güneş doğuncaya kadar zikirle meşgul olmak müstehaptır.</span>
</li>
</ul>
</section>
</div>
</div>
</main>
<!-- JavaScript -->
<script src="js/main.js"></script>
</body>
</html>