Tipscoran commited on
Commit
754ee1d
·
verified ·
1 Parent(s): bc0d9d5

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +380 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nur
3
- emoji: 🚀
4
- colorFrom: yellow
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: nur
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,380 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nur Al-Qouloub | Rappels islamiques et produits utiles</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <!-- Font Awesome for icons -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ /* Custom CSS for elements that need more specific styling */
12
+ .arabic-text {
13
+ font-family: 'Traditional Arabic', Arial, sans-serif;
14
+ font-size: 1.5rem;
15
+ line-height: 2.5rem;
16
+ direction: rtl;
17
+ }
18
+ .prayer-bg {
19
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="none" width="100" height="100"/><path fill="%23f3f4f6" d="M40,10L60,10L70,20L30,20Z" opacity="0.2"/><path fill="%23f3f4f6" d="M30,30L70,30L70,50L50,60L30,50Z" opacity="0.2"/><path fill="%23f3f4f6" d="M40,70L60,70L50,80L30,80Z" opacity="0.2"/></svg>');
20
+ background-size: 150px;
21
+ }
22
+ .fade-in {
23
+ animation: fadeIn 1s ease-in-out;
24
+ }
25
+ @keyframes fadeIn {
26
+ from { opacity: 0; transform: translateY(10px); }
27
+ to { opacity: 1; transform: translateY(0); }
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50 text-gray-800 font-sans">
32
+ <!-- Header with mosque silhouette -->
33
+ <header class="p-6 text-center bg-gradient-to-r from-emerald-700 to-teal-800 text-white relative overflow-hidden">
34
+ <div class="absolute inset-0 prayer-bg opacity-10"></div>
35
+ <div class="relative z-10">
36
+ <h1 class="text-3xl md:text-5xl font-bold mb-4 flex items-center justify-center">
37
+ <i class="fas fa-mosque mr-3 text-yellow-200"></i>
38
+ <span>Nur Al-Qouloub</span>
39
+ </h1>
40
+ <p class="text-lg md:text-xl mb-6 flex flex-col md:flex-row items-center justify-center gap-4">
41
+ <span class="inline-flex items-center"><i class="fas fa-book-quran mr-2 text-yellow-200"></i> Rappels islamiques quotidiens</span>
42
+ <span class="hidden md:block">|</span>
43
+ <span class="inline-flex items-center"><i class="fas fa-hands-praying mr-2 text-yellow-200"></i> Produits utiles pour musulmans</span>
44
+ <span class="hidden md:block">|</span>
45
+ <span class="inline-flex items-center"><i class="fas fa-share-alt mr-2 text-yellow-200"></i> Da'wa digitale</span>
46
+ </p>
47
+ <nav class="flex flex-wrap justify-center gap-4">
48
+ <a href="#rappel" class="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-full transition shadow-md flex items-center">
49
+ <i class="fas fa-book-open mr-2"></i> Rappel du jour
50
+ </a>
51
+ <a href="#boutique" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-full transition shadow-md flex items-center">
52
+ <i class="fas fa-shopping-basket mr-2"></i> Produits utiles
53
+ </a>
54
+ <a href="https://www.tiktok.com/@tips.coran1" target="_blank" class="px-4 py-2 bg-pink-600 hover:bg-pink-700 text-white rounded-full transition shadow-md flex items-center">
55
+ <i class="fab fa-tiktok mr-2"></i> Suivre @tips.coran1
56
+ </a>
57
+ </nav>
58
+ </div>
59
+ </header>
60
+
61
+ <main class="container mx-auto px-4 py-8 max-w-4xl">
62
+ <!-- Daily Reminder Section -->
63
+ <section id="rappel" class="mb-12 bg-white rounded-xl shadow-md overflow-hidden fade-in">
64
+ <div class="p-6 md:p-8">
65
+ <div class="flex items-center mb-4">
66
+ <div class="bg-emerald-100 p-3 rounded-full mr-4">
67
+ <i class="fas fa-book-quran text-emerald-600 text-xl"></i>
68
+ </div>
69
+ <h2 class="text-2xl md:text-3xl font-bold text-emerald-800">📖 Rappel du jour – L'importance de la prière</h2>
70
+ </div>
71
+
72
+ <blockquote class="relative bg-gray-100 p-6 rounded-lg mb-6 border-l-4 border-emerald-500 italic">
73
+ <p class="arabic-text text-right mb-2">« إِنَّ أَوَّلَ مَا يُحَاسَبُ بِهِ الْعَبْدُ يَوْمَ الْقِيَامَةِ مِنْ عَمَلِهِ الصَّلَاةُ، فَإِنْ صَلُحَتْ صَلُحَ سَائِرُ عَمَلِهِ، وَإِنْ فَسَدَتْ فَسَدَ سَائِرُ عَمَلِهِ »</p>
74
+ <p class="text-gray-700">« La première chose sur laquelle le serviteur sera jugé le Jour du Jugement, c'est la prière. Si elle est bonne, le reste de ses œuvres seront bonnes. Et si elle est mauvaise, le reste de ses œuvres seront mauvaises. »</p>
75
+ <footer class="text-gray-500 mt-2 text-right">— <cite>At-Tirmidhi</cite></footer>
76
+ </blockquote>
77
+
78
+ <p class="text-gray-700 text-lg leading-relaxed">
79
+ Ne néglige jamais ta salât. Elle est la clé du succès ici-bas et dans l'au-delà. Même si tu es fatigué, occupé, triste : la salât est un refuge, un lien direct avec ton Créateur. Consacre quelques minutes après chaque prière pour faire des dou'as et te rappeler pourquoi tu es sur cette Terre.
80
+ </p>
81
+
82
+ <button id="reminderBtn" class="mt-6 px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition flex items-center">
83
+ <i class="fas fa-bell mr-2"></i> Recevoir un rappel pour la prochaine prière
84
+ </button>
85
+
86
+ <p id="prayerTime" class="mt-4 hidden text-emerald-700 font-medium"></p>
87
+ </div>
88
+ </section>
89
+
90
+ <hr class="my-12 border-t-2 border-gray-200">
91
+
92
+ <!-- Inspiring Verse Section -->
93
+ <section class="mb-12 fade-in">
94
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-8 rounded-xl shadow-lg">
95
+ <div class="flex justify-between items-start">
96
+ <div>
97
+ <h2 class="text-xl md:text4xl font-bold mb-4 flex items-center">
98
+ <i class="fas fa-star-and-crescent mr-3"></i> Verset inspirant
99
+ </h2>
100
+ <blockquote class="italic text-xl leading-relaxed mb-4">
101
+ « Cherchez secours dans la patience et la prière. »
102
+ </blockquote>
103
+ <footer class="text-right text-blue-200 font-medium">
104
+ — <cite>Sourate Al-Baqara, verset 45</cite>
105
+ </footer>
106
+ </div>
107
+ <div class="hidden md:block arabic-text text-3xl" style="writing-mode: vertical-rl; text-orientation: mixed;">
108
+ وَاسْتَعِينُوا بِالصَّبْرِ وَالصَّلَاةِ
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <hr class="my-12 border-t-2 border-gray-200">
115
+
116
+ <!-- Products Section -->
117
+ <section id="boutique" class="mb-12 fade-in">
118
+ <div class="text-center mb-8">
119
+ <h2 class="text-2xl md:text-3xl font-bold text-emerald-800 flex items-center justify-center">
120
+ <i class="fas fa-shopping-basket mr-3"></i> Produits utiles pour musulmans
121
+ </h2>
122
+ <p class="text-gray-600 max-w-2xl mx-auto mt-2">
123
+ Voici des produits recommandés pour améliorer ton quotidien de musulman. En passant par ces liens affiliés, tu soutiens notre projet sans frais supplémentaires.
124
+ </p>
125
+ </div>
126
+
127
+ <div class="grid md:grid-cols-3 gap-6">
128
+ <!-- Product 1 -->
129
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition transform hover:-translate-y-1">
130
+ <div class="h-48 bg-gray-200 overflow-hidden">
131
+ <img src="https://ae01.alicdn.com/kf/H1e43ea93a5404e63bd9b9d4daae85d73R.jpg" alt="Chapelet électronique" class="w-full h-full object-cover">
132
+ </div>
133
+ <div classp-4">
134
+ <h3 class="font-bold text-lg mb-1 flex items-center">
135
+ <i class="fas fa-praying-hands text-emerald-600 mr-2"></i> Chapelet électronique
136
+ </h3>
137
+ <p class="text-gray-600 text-sm mb-3">
138
+ Compteur numérique de dhikr avec écran LED et fonctions multiples
139
+ </p>
140
+ <div class="flex justify-between items-center">
141
+ <span class="text-emerald-600 font-bold">$9.99</span>
142
+ <a href="https://s.click.aliexpress.com/e/_EvzCpXU" target="_blank" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-full transition flex items-center">
143
+ <i class="fas fa-external-link-alt mr-1 text-xs"></i> Voir
144
+ </a>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Product 2 -->
150
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition transform hover:-translate-y-1">
151
+ <div class="h-48 bg-gray-200 overflow-hidden">
152
+ <img src="https://ae01.alicdn.com/kf/S81b9a3b9435e4bb2bea10976d0c77de3K.jpg" alt="Tapis de prière" class="w-full h-full object-cover">
153
+ </div>
154
+ <div class="p-4">
155
+ <h3 class="font-bold text-lg mb-1 flex items-center">
156
+ <i class="fas fa-kaaba text-emerald-600 mr-2"></i> Tapis de prière
157
+ </h3>
158
+ <p class="text-gray-600 text-sm mb-3">
159
+ Avec boussole intégrée et motif de haute qualité
160
+ </p>
161
+ <div class="flex justify-between items-center">
162
+ <span class="text-emerald-600 font-bold">$15.50</span>
163
+ <a href="https://s.click.aliexpress.com/e/_EwDUCCE" target="_blank" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-full transition flex items-center">
164
+ <i class="fas fa-external-link-alt mr-1 text-xs"></i> Voir
165
+ </a>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Product 3 -->
171
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition transform hover:-translate-y-1">
172
+ <div class="h-48 bg-gray-200 overflow-hidden">
173
+ <img src="https://ae01.alicdn.com/kf/Sb183d23c52fc4f20ac82f70a66e6ecb25.jpg" alt="Coran digital" class="w-full h-full object-cover">
174
+ </div>
175
+ <div class="p-4">
176
+ <h3 class="font-bold text-lg mb-1 flex items-center">
177
+ <i class="fas fa-quran text-emerald-600 mr-2"></i> Coran digital
178
+ </h3>
179
+ <p class="text-gray-600 text-sm mb-3">
180
+ Avec audio, traduction et recherche - parfait pour mémorisation
181
+ </p>
182
+ <div class="flex justify-between items-center">
183
+ <span class="text-emerald-600 font-bold">$39.99</span>
184
+ <a href="https://s.click.aliexpress.com/e/_EvRp2nu" target="_blank" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-full transition flex items-center">
185
+ <i class="fas fa-external-link-alt mr-1 text-xs"></i> Voir
186
+ </a>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="text-center mt-8">
193
+ <a href="#" class="inline-block px-6 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-full transition shadow-md">
194
+ <i class="fas fa-store mr-2"></i> Voir plus de produits
195
+ </a>
196
+ </div>
197
+ </section>
198
+
199
+ <hr class="my-12 border-t-2 border-gray-200">
200
+
201
+ <!-- Daily Tip Section -->
202
+ <section class="mb-12 bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-r-lg fade-in">
203
+ <h2 class="text-xl font-bold text-yellow-800 mb-4 flex items-center">
204
+ <i class="fas fa-lightbulb text-yellow-600 mr-2"></i> Astuce spirituelle du jour
205
+ </h2>
206
+ <p class="text-yellow-900">
207
+ 🛌 Avant de dormir, pratique le dhikr suivant : "Subhanallah" 33 fois, "Alhamdulillah" 33 fois et "Allahu Akbar" 34 fois. C'est une sunnah du Prophète ﷺ qui pèsera lourd dans ta balance le Jour du Jugement.
208
+ </p>
209
+ </section>
210
+ </main>
211
+
212
+ <!-- Newsletter Section -->
213
+ <section class="bg-gradient-to-r from-blue-800 to-blue-600 text-white py-12">
214
+ <div class="container mx-auto px-4 max-w-4xl">
215
+ <div class="text-center mb-8">
216
+ <h2 class="text-2xl md:text-3xl font-bold mb-2 flex items-center justify-center">
217
+ <i class="fas fa-envelope-open-text mr-3"></i>
218
+ Inscris-toi à notre newsletter
219
+ </h2>
220
+ <p class="text-blue-100 max-w-2xl mx-auto">
221
+ Recevez chaque vendredi un rappel spirituel, une recommandation de produit utile, et un verset/hadith qui réchauffera ton cœur.
222
+ </p>
223
+ </div>
224
+
225
+ <form id="newsletterForm" class="max-w-md mx-auto">
226
+ <div class="mb-4">
227
+ <label for="name" class="block mb-2 font-medium">Nom (optionnel)</label>
228
+ <input type="text" id="name" class="w-full px-4 py-2 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
229
+ </div>
230
+ <div class="mb-4">
231
+ <label for="email" class="block mb-2 font-medium">Email *</label>
232
+ <input type="email" id="email" required class="w-full px-4 py-2 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
233
+ </div>
234
+ <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-lg transition shadow-md flex items-center justify-center">
235
+ <i class="fas fa-paper-plane mr-2"></i> Je m'inscris
236
+ </button>
237
+ </form>
238
+
239
+ <div id="formSuccess" class="hidden max-w-md mx-auto mt-4 bg-white text-green-700 p-4 rounded-lg shadow-md">
240
+ <i class="fas fa-check-circle mr-2"></i> BarakAllah pour ton inscription ! Tu recevras bientôt nos rappels par email.
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- Footer -->
246
+ <footer class="bg-gray-800 text-gray-300 py-8">
247
+ <div class="container mx-auto px-4 max-w-4xl">
248
+ <div class="grid md:grid-cols-3 gap-8 mb-8">
249
+ <div>
250
+ <h3 class="text-lg font-bold text-white mb-4 flex items-center">
251
+ <i class="fas fa-info-circle mr-2 text-emerald-400"></i> À propos
252
+ </h3>
253
+ <p class="text-sm">
254
+ Nur Al-Qouloub est un projet de da'wa digitale visant à rapprocher les musulmans d'Allah à travers des rappels quotidiens et des produits utiles pour la pratique de notre belle religion.
255
+ </p>
256
+ </div>
257
+
258
+ <div>
259
+ <h3 class="text-lg font-bold text-white mb-4 flex items-center">
260
+ <i class="fas fa-link mr-2 text-emerald-400"></i> Liens utiles
261
+ </h3>
262
+ <ul class="space-y-2">
263
+ <li><a href="#" class="hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-emerald-400"></i> Rappel aléatoire</a></li>
264
+ <li><a href="#" class="hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-emerald-400"></i> Calendrier islamique</a></li>
265
+ <li><a href="#" class="hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-emerald-400"></i> Heures de prière</a></li>
266
+ </ul>
267
+ </div>
268
+
269
+ <div>
270
+ <h3 class="text-lg font-bold text-white mb-4 flex items-center">
271
+ <i class="fas fa-share-alt mr-2 text-emerald-400"></i> Suivez-nous
272
+ </h3>
273
+ <div class="flex space-x-4">
274
+ <a href="https://www.tiktok.com/@tips.coran1" target="_blank" class="text-2xl hover:text-white transition">
275
+ <i class="fab fa-tiktok"></i>
276
+ </a>
277
+ <a href="#" class="text-2xl hover:text-white transition">
278
+ <i class="fab fa-instagram"></i>
279
+ </a>
280
+ <a href="#" class="text-2xl hover:text-white transition">
281
+ <i class="fab fa-youtube"></i>
282
+ </a>
283
+ <a href="#" class="text-2xl hover:text-white transition">
284
+ <i class="fab fa-telegram"></i>
285
+ </a>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="pt-4 border-t border-gray-700 text-center text-sm">
291
+ <p>
292
+ © 2023 Nur Al-Qouloub. Ce site contient des liens d'affiliation AliExpress. En achetant via nos liens, vous soutenez notre mission de da'wa sans aucun coût supplémentaire pour vous.
293
+ </p>
294
+ <p class="mt-2 italic text-emerald-300">
295
+ Barak Allahou fikoum ! Qu'Allah accepte nos bonnes actions et nous guide.
296
+ </p>
297
+ </div>
298
+ </div>
299
+ </footer>
300
+
301
+ <!-- Back to Top Button -->
302
+ <button id="backToTop" class="fixed bottom-6 right-6 bg-emerald-600 text-white w-12 h-12 rounded-full shadow-lg opacity-0 invisible transition-all flex items-center justify-center">
303
+ <i class="fas fa-arrow-up"></i>
304
+ </button>
305
+
306
+ <script>
307
+ // Prayer reminder functionality
308
+ document.getElementById('reminderBtn').addEventListener('click', function() {
309
+ const now = new Date();
310
+ const hours = now.getHours();
311
+
312
+ // Simple prayer time approximation
313
+ let nextPrayer = "";
314
+ if (hours < 5) nextPrayer = "Fajr (prière de l'aube)";
315
+ else if (hours < 12) nextPrayer = "Dhuhr (prière du midi)";
316
+ else if (hours < 15) nextPrayer = "Asr (prière de l'après-midi)";
317
+ else if (hours < 18) nextPrayer = "Maghrib (prière du coucher de soleil)";
318
+ else nextPrayer = "Isha (prière de la nuit)";
319
+
320
+ document.getElementById('prayerTime').classList.remove('hidden');
321
+ document.getElementById('prayerTime').innerHTML = `
322
+ <i class="fas fa-clock mr-2"></i> Prochaine prière recommandée : <strong>${nextPrayer}</strong>
323
+ `;
324
+
325
+ // Show notification
326
+ alert(`Rappel activé pour ${nextPrayer}. Qu'Allah accepte vos prières 🤲`);
327
+
328
+ // Change button after click
329
+ this.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Rappel activé';
330
+ this.classList.remove('bg-emerald-600', 'hover:bg-emerald-700');
331
+ this.classList.add('bg-blue-600', 'hover:bg-blue-700');
332
+ this.disabled = true;
333
+ });
334
+
335
+ // Newsletter form submission
336
+ document.getElementById('newsletterForm').addEventListener('submit', function(e) {
337
+ e.preventDefault();
338
+
339
+ // Hide form and show success message
340
+ this.classList.add('hidden');
341
+ document.getElementById('formSuccess').classList.remove('hidden');
342
+
343
+ // You would typically send the data to a server here
344
+ });
345
+
346
+ // Back to top button
347
+ const backToTopButton = document.getElementById('backToTop');
348
+ window.addEventListener('scroll', function() {
349
+ if (window.pageYOffset > 300) {
350
+ backToTopButton.classList.remove('opacity-0', 'invisible');
351
+ backToTopButton.classList.add('opacity-100', 'visible');
352
+ } else {
353
+ backToTopButton.classList.add('opacity-0', 'invisible');
354
+ backToTopButton.classList.remove('opacity-100', 'visible');
355
+ }
356
+ });
357
+
358
+ backToTopButton.addEventListener('click', function() {
359
+ window.scrollTo({ top: 0, behavior: 'smooth' });
360
+ });
361
+
362
+ // Add animation to elements when they scroll into view
363
+ const fadeElements = document.querySelectorAll('.fade-in');
364
+
365
+ const observer = new IntersectionObserver((entries) => {
366
+ entries.forEach(entry => {
367
+ if (entry.isIntersecting) {
368
+ entry.target.classList.add('animate-fadeIn');
369
+ }
370
+ });
371
+ }, {
372
+ threshold: 0.1
373
+ });
374
+
375
+ fadeElements.forEach(element => {
376
+ observer.observe(element);
377
+ });
378
+ </script>
379
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tipscoran/nur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
380
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ <h1>🕌 Bienvenue sur Nur Al-Qouloub</h1> <p>🔹 Rappels islamiques quotidiens | 🔹 Produits utiles pour musulmans | 🔹 Da'wa digitale pour te rapprocher d’Allah ﷻ</p> <a href="#rappel">📖 Lire le rappel du jour</a> | <a href="#boutique">🛒 Produits utiles</a> | <a href="https://www.tiktok.com/@tips.coran1" target="_blank">📱 Suivre @tips.coran1</a> <hr> <h2 id="rappel">📖 Rappel du jour – L’importance de la prière</h2> <blockquote> « La première chose sur laquelle le serviteur sera jugé le Jour du Jugement, c’est la prière. » (At-Tirmidhi) </blockquote> <p>Ne néglige jamais ta salât. Elle est la clé du succès ici-bas et dans l’au-delà. Même si tu es fatigué, occupé, triste : la salât est un refuge, un lien direct avec ton Créateur.</p> <hr> <h2>📚 Verset inspirant</h2> <blockquote> <i>« Cherchez secours dans la patience et la prière. »</i> <br> — <b>Sourate Al-Baqara, verset 45</b> </blockquote> <hr> <h2 id="boutique">🛍️ Produits utiles (avec liens affiliés AliExpress)</h2> <p>📌 Voici des produits recommandés pour améliorer ton quotidien de musulman. En passant par ces liens affiliés, tu soutiens notre projet sans frais supplémentaires.</p> <ul> <li> <strong>📿 Chapelet électronique digital</strong><br> Idéal pour faire du dhikr discrètement n'importe où<br> 🔗 <a href="https://s.click.aliexpress.com/e/_EvzCpXU" target="_blank">Voir le produit sur AliExpress</a> </li> <li> <strong>🕌 Tapis de prière avec boussole intégrée</strong><br> Pratique pour voyager ou à la maison<br> 🔗 <a href="https://s.click.aliexpress.com/e/_EwDUCCE" target="_blank">Voir le produit sur AliExpress</a> </li> <li> <strong>📖 Coran digital avec audio et traduction</strong><br> Apprends et écoute le Coran facilement (idéal pour les débutants)<br> 🔗 <a href="https://s.click.aliexpress.com/e/_EvRp2nu" target="_blank">Voir le produit sur AliExpress</a> </li> </ul> <hr> <h2>💡 Astuce du jour</h2> <p>🕊️ Commence chaque journée par la lecture de la sourate Al-Fatiha et fais une invocation pour qu’Allah te guide dans tes projets.</p> <hr> <h2>📬 Inscris-toi à notre newsletter</h2> <p>Recevez chaque vendredi un rappel utile + une recommandation produit + un hadith pour ton cœur 🤲</p> <form> <label>Nom :</label><br> <input type="text" name="nom"><br> <label>Email :</label><br> <input type="email" name="email"><br><br> <button type="submit">📩 Je m’inscris</button> </form> <hr> <h2>📱 Suis-nous</h2> <ul> <li><a href="https://www.tiktok.com/@tips.coran1" target="_blank">TikTok : @tips.coran1</a></li> <li><a href="#">Instagram : à venir</a></li> <li><a href="#">YouTube : à venir</a></li> </ul> <hr> <p><small>© 2025 Nur Al-Qouloub. Ce site contient des liens d’affiliation AliExpress. En achetant via nos liens, vous soutenez la da'wa. Barak Allahou fikoum !</small></p>