-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhutbe-prayers.html
172 lines (158 loc) · 13.1 KB
/
hutbe-prayers.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
<!DOCTYPE html>
<html lang="tr" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hutbe Duaları - Namaz Hocası</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-50 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">
<div class="flex items-center">
<button id="menuButton" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 6h16M4 12h16m-16 6h16"></path>
</svg>
</button>
<a href="index.html" class="text-xl font-semibold text-gray-800 dark:text-white ml-2">Namaz Hocası</a>
</div>
<!-- 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>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="hidden md:hidden mt-4">
<nav class="flex flex-col space-y-2">
<a href="index.html" class="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Ana Sayfa</a>
<a href="prayers.html" class="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Namazlar</a>
<a href="ablutions.html" class="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Abdest</a>
<a href="prayer-duas.html" class="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Namaz Duaları</a>
<a href="prayer-suras.html" class="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Namaz Sureleri</a>
<a href="hutbe-prayers.html" class="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Hutbe Duaları</a>
<a href="eid-prayer.html" class="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Bayram Namazı</a>
<a href="funeral-prayer.html" class="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Cenaze Namazı</a>
</nav>
</div>
<!-- Desktop menu -->
<div class="hidden md:flex mt-4 md:mt-0">
<div class="flex flex-col md:flex-row md:items-center">
<a href="index.html" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2">Ana Sayfa</a>
<a href="prayer-suras.html" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2">Namaz Sureleri</a>
<a href="prayer-duas.html" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2">Namaz Duaları</a>
<a href="ablutions.html" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2">Abdest</a>
</div>
</div>
</nav>
</header>
<main class="container mx-auto px-4 py-8 mt-4">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Main Content -->
<div class="lg:col-span-2">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Hutbe Duaları</h1>
<!-- Hutbe Duaları Section -->
<div class="space-y-6">
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Minbere Çıkarken Okunan Dualar</h2>
<div class="space-y-4">
<div class="text-right">
<p class="text-xl font-amiri text-gray-800 dark:text-gray-200 mb-2">اَللّٰهُمَّ افْتَحْ عَلَيْنَا اَبْوَابَ رَحْمَتِكَ * وَيَسِّرْ عَلَيْنَا خَزَائِنَ فَضْلِكَ يَا اَكْرَمَ الْاَكْرَمِينَ * يَا اَرْحَمَ الرَّاحِمِينَ</p>
</div>
<p class="text-gray-600 dark:text-gray-300">Okunuşu: Allah'ım! Bize rahmetinin kapılarını aç. Bize lütuf hazinelerini kolaylaştır, ey ikram edenlerin en keremlisi ve ey merhamet edenlerin en merhametlisi!</p>
<p class="text-gray-600 dark:text-gray-300">Anlamı: Allah'ım! Bize rahmetinin kapılarını aç. Bize lütuf hazinelerini kolaylaştır, ey ikram edenlerin en keremlisi ve ey merhamet edenlerin en merhametlisi!</p>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Üçüncü Basamakta:</h2>
<div class="space-y-4">
<div class="text-right">
<p class="text-xl font-amiri text-gray-800 dark:text-gray-200 mb-2">رَبِّ اشْرَحْ لِي صَدْرِي * وَيَسِّرْ لِي أَمْرِي * وَاحْلُلْ عُقْدَةً مِنْ لِسَانِي * يَفْقَهُوا قَوْلِي * رَبِّ زِدْنِي عِلْمًا وَفَهْمًا وَأَلْحِقْنِي بِالصَّالِحِينَ</p>
</div>
<p class="text-gray-600 dark:text-gray-300">Okunuşu: Rabbim! Göğsümü genişlet, işimi kolaylaştır, dilimdeki düğümü çöz ki sözümü anlasınlar. Rabbim! İlmimi ve anlayışımı artır ve beni salih kullarına kat.</p>
<p class="text-gray-600 dark:text-gray-300">Anlamı: Rabbim! Göğsümü genişlet, işimi kolaylaştır, dilimdeki düğümü çöz ki sözümü anlasınlar. Rabbim! İlmimi ve anlayışımı artır ve beni salih kullarına kat.</p>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Beşinci veya Yedinci Basamakta:</h2>
<div class="space-y-4">
<div class="text-right">
<p class="text-xl font-amiri text-gray-800 dark:text-gray-200 mb-2">اَللّٰهُمَّ هَذَا الْمَقَامُ لَيْسَ بِشَأْنِي وَهَذَا الْمَكَانُ لَيْسَ بِمَكَانِي * اَللّٰهُمَّ يَسِّرْ لِي أَمْرِي وَتَقَبَّلْ مِنِّي * وَالْحَمْدُ لِلّٰهِ * وَسَلَامٌ عَلَى الْأَنْبِيَاءِ وَالْمُرْسَلِينَ * رَبِّ الْعَالَمِينَ</p>
</div>
<p class="text-gray-600 dark:text-gray-300">Okunuşu: Allah'ım! Bu makam benim şanıma, bu yer benim yerime layık değildir. Allah'ım! İşimi kolaylaştır ve benden kabul eyle. Hamd Allah'a mahsustur. Peygamberlere ve resullere selam olsun. Alemlerin Rabbi olan Allah'a hamdolsun.</p>
<p class="text-gray-600 dark:text-gray-300">Anlamı: Allah'ım! Bu makam benim şanıma, bu yer benim yerime layık değildir. Allah'ım! İşimi kolaylaştır ve benden kabul eyle. Hamd Allah'a mahsustur. Peygamberlere ve resullere selam olsun. Alemlerin Rabbi olan Allah'a hamdolsun.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="lg:col-span-1">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Önemli Notlar</h2>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-5 h-5 text-blue-500 mt-1" 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>
<p class="text-gray-600 dark:text-gray-300">Hutbe duaları Arapça okunur</p>
</div>
<div class="flex items-start space-x-3">
<svg class="w-5 h-5 text-blue-500 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-gray-600 dark:text-gray-300">Hutbe sırasında cemaat sessizce dinler</p>
</div>
<div class="flex items-start space-x-3">
<svg class="w-5 h-5 text-blue-500 mt-1" 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>
<p class="text-gray-600 dark:text-gray-300">İmam minbere çıkarken ve inerken özel dualar okur</p>
</div>
<div class="flex items-start space-x-3">
<svg class="w-5 h-5 text-blue-500 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-gray-600 dark:text-gray-300">Hutbe iki bölümden oluşur ve aralarında kısa bir oturuş yapılır</p>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
// Dark mode toggle functionality
const darkModeToggle = document.getElementById('darkModeToggle');
// Check for saved dark mode preference or system preference
if (localStorage.getItem('darkMode') === 'true' ||
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
darkModeToggle.checked = true;
}
// Toggle dark mode
darkModeToggle.addEventListener('change', () => {
document.documentElement.classList.toggle('dark');
localStorage.setItem('darkMode', darkModeToggle.checked);
});
// Mobile menu toggle
const menuButton = document.getElementById('menuButton');
const mobileMenu = document.getElementById('mobileMenu');
menuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when clicking outside
document.addEventListener('click', (event) => {
if (!menuButton.contains(event.target) && !mobileMenu.contains(event.target)) {
mobileMenu.classList.add('hidden');
}
});
</script>
</body>
</html>