Hugging Face's logo

Spaces:
Tipscoran
/
github
Running

App Files Community
Tipscoran commited on
Commit
719bb42
·
verified ·
1 Parent(s): afb5a13

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +420 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Github
3
- emoji: 🐠
4
- colorFrom: blue
5
  colorTo: gray
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: github
3
+ emoji: 🐳
4
+ colorFrom: pink
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,420 @@
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 - La lumière des cœurs croyants</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f5f0;
15
+ }
16
+
17
+ .arabic {
18
+ font-family: 'Amiri', serif;
19
+ font-size: 1.2em;
20
+ line-height: 1.8;
21
+ }
22
+
23
+ .hero-gradient {
24
+ background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
25
+ }
26
+
27
+ .card-hover:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
30
+ }
31
+
32
+ .transition-all {
33
+ transition: all 0.3s ease;
34
+ }
35
+
36
+ .bookmark-icon {
37
+ position: absolute;
38
+ top: -10px;
39
+ right: 20px;
40
+ background-color: #f59e0b;
41
+ color: white;
42
+ width: 40px;
43
+ height: 40px;
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: center;
47
+ border-radius: 50%;
48
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="text-gray-800">
53
+ <!-- Header -->
54
+ <header class="hero-gradient text-white py-12 px-4 md:px-8 rounded-b-3xl shadow-lg">
55
+ <div class="container mx-auto max-w-6xl">
56
+ <div class="flex flex-col md:flex-row items-center justify-between">
57
+ <div class="md:w-2/3 mb-8 md:mb-0">
58
+ <h1 class="text-3xl md:text-5xl font-bold mb-4 flex items-center">
59
+ <i class="fas fa-moon mr-3"></i> Nur Al-Qouloub
60
+ </h1>
61
+ <p class="text-lg md:text-xl opacity-90 mb-6">La lumière des cœurs croyants</p>
62
+ <p class="text-white opacity-80 mb-8">Chaque jour, un rappel, un conseil et une sagesse issue du Coran et de la Sunna pour te rapprocher d'Allah ﷻ.</p>
63
+ <div class="flex flex-wrap gap-3">
64
+ <a href="#rappel" class="bg-white text-blue-800 hover:bg-blue-50 px-6 py-3 rounded-full font-semibold transition-all shadow-md">
65
+ <i class="fas fa-book-open mr-2"></i> Rappel du jour
66
+ </a>
67
+ <a href="#produits" class="bg-yellow-400 hover:bg-yellow-300 text-yellow-900 px-6 py-3 rounded-full font-semibold transition-all shadow-md">
68
+ <i class="fas fa-shopping-cart mr-2"></i> Produits utiles
69
+ </a>
70
+ <a href="https://www.tiktok.com/@tips.coran1" target="_blank" class="bg-black hover:bg-gray-800 text-white px-6 py-3 rounded-full font-semibold transition-all shadow-md">
71
+ <i class="fab fa-tiktok mr-2"></i> Suivez-nous
72
+ </a>
73
+ </div>
74
+ </div>
75
+ <div class="md:w-1/3 flex justify-center">
76
+ <div class="relative">
77
+ <img src="https://images.unsplash.com/photo-1568219656418-15c329312bf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Mosquée" class="w-64 h-64 md:w-80 md:h-80 object-cover rounded-full border-4 border-white shadow-xl">
78
+ <div class="absolute -bottom-2 -right-2 bg-green-500 text-white p-3 rounded-full shadow-lg">
79
+ <i class="fas fa-quran text-2xl"></i>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </header>
86
+
87
+ <!-- Main Content -->
88
+ <main class="container mx-auto max-w-6xl px-4 md:px-8 py-12">
89
+ <!-- Daily Reminder -->
90
+ <section id="rappel" class="mb-16">
91
+ <div class="relative bg-white rounded-2xl shadow-lg overflow-hidden mb-12 transition-all card-hover">
92
+ <div class="bookmark-icon">
93
+ <i class="fas fa-bookmark"></i>
94
+ </div>
95
+ <div class="p-8">
96
+ <div class="flex items-center mb-6">
97
+ <div class="bg-blue-100 text-blue-800 p-3 rounded-full mr-4">
98
+ <i class="fas fa-lightbulb text-2xl"></i>
99
+ </div>
100
+ <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Rappel du Jour – La patience est lumière</h2>
101
+ </div>
102
+
103
+ <blockquote class="border-l-4 border-yellow-400 pl-6 py-2 my-6 bg-yellow-50 rounded-r-lg">
104
+ <p class="arabic text-xl italic mb-2">"الصبر نور"</p>
105
+ <p class="text-lg font-medium text-gray-700">Le Prophète ﷺ a dit : <span class="italic">"La patience est une lumière."</span> (Muslim)</p>
106
+ </blockquote>
107
+
108
+ <div class="prose max-w-none text-gray-700 mb-6">
109
+ <p>Dans les épreuves, la patience est le lien invisible entre le croyant et son Seigneur. C'est par elle que le cœur se fortifie et que les péchés s'effacent.</p>
110
+ </div>
111
+
112
+ <div class="bg-blue-50 border border-blue-100 rounded-xl p-5">
113
+ <div class="flex items-start">
114
+ <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-4 mt-1">
115
+ <i class="fas fa-lightbulb"></i>
116
+ </div>
117
+ <div>
118
+ <h3 class="font-bold text-blue-800 mb-1">Astuce du jour :</h3>
119
+ <p>En cas de colère, fais l'ablution. Le feu ne s'éteint que par l'eau.</p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Verse of the Day -->
127
+ <div class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-2xl shadow-lg overflow-hidden transition-all card-hover">
128
+ <div class="p-8 text-white">
129
+ <div class="flex items-center mb-6">
130
+ <div class="bg-white text-green-700 p-3 rounded-full mr-4">
131
+ <i class="fas fa-quran text-2xl"></i>
132
+ </div>
133
+ <h2 class="text-2xl md:text-3xl font-bold">Verset en lumière</h2>
134
+ </div>
135
+
136
+ <blockquote class="border-l-4 border-yellow-300 pl-6 py-2 my-6 bg-white bg-opacity-10 rounded-r-lg">
137
+ <p class="arabic text-xl mb-2">"ذَٰلِكَ الْكِتَابُ لَا رَيْبَ ۛ فِيهِ ۛ هُدًى لِّلْمُتَّقِينَ"</p>
138
+ <p class="text-lg font-medium">Sourate Al-Baqara – Verset 2 : <span class="italic">"Ceci est le Livre au sujet duquel il n'y a aucun doute, c'est un guide pour les pieux."</span></p>
139
+ </blockquote>
140
+
141
+ <div class="prose max-w-none text-white text-opacity-90">
142
+ <p>Le Coran est bien plus qu'un livre. Il est un mode de vie. Il éclaire, il corrige, il purifie. Chaque verset est une clé pour ouvrir les portes de la guidance divine.</p>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Recommended Products -->
149
+ <section id="produits" class="mb-16">
150
+ <div class="text-center mb-12">
151
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Produits recommandés</h2>
152
+ <p class="text-gray-600 max-w-2xl mx-auto">Voici une sélection rigoureuse de produits pour enrichir ta foi. Chaque lien est un lien affilié Amazon – en commandant via ce site, tu aides à financer la da'wa, sans coût supplémentaire pour toi.</p>
153
+ </div>
154
+
155
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
156
+ <!-- Product 1 -->
157
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover">
158
+ <div class="relative">
159
+ <img src="https://images.unsplash.com/photo-1605311588588-44c1ef0e7cfe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Tapis de prière" class="w-full h-48 object-cover">
160
+ <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">Nouveau</div>
161
+ </div>
162
+ <div class="p-5">
163
+ <h3 class="font-bold text-lg mb-2">Tapis de prière mémoire</h3>
164
+ <p class="text-gray-600 text-sm mb-4">Confort + design qibla intelligent</p>
165
+ <a href="https://www.amazon.fr/ton-lien-affilié1" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all">
166
+ <i class="fas fa-shopping-cart mr-2"></i> Voir sur Amazon
167
+ </a>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Product 2 -->
172
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover">
173
+ <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Coran" class="w-full h-48 object-cover">
174
+ <div class="p-5">
175
+ <h3 class="font-bold text-lg mb-2">Coran Arabe-Français</h3>
176
+ <p class="text-gray-600 text-sm mb-4">Traduction simple avec phonétique</p>
177
+ <a href="https://www.amazon.fr/ton-lien-affilié2" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all">
178
+ <i class="fas fa-shopping-cart mr-2"></i> Voir sur Amazon
179
+ </a>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Product 3 -->
184
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover">
185
+ <img src="https://images.unsplash.com/photo-1602002672592-40d5e9fda8f7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Chapelet numérique" class="w-full h-48 object-cover">
186
+ <div class="p-5">
187
+ <h3 class="font-bold text-lg mb-2">Chapelet numérique</h3>
188
+ <p class="text-gray-600 text-sm mb-4">Tasbih pratique & discret</p>
189
+ <a href="https://www.amazon.fr/ton-lien-affilié3" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all">
190
+ <i class="fas fa-shopping-cart mr-2"></i> Voir sur Amazon
191
+ </a>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Product 4 -->
196
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover">
197
+ <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Encens Bakhour" class="w-full h-48 object-cover">
198
+ <div class="p-5">
199
+ <h3 class="font-bold text-lg mb-2">Encens Bakhour</h3>
200
+ <p class="text-gray-600 text-sm mb-4">Ambiance spirituelle pour la maison</p>
201
+ <a href="https://www.amazon.fr/ton-lien-affilié4" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all">
202
+ <i class="fas fa-shopping-cart mr-2"></i> Voir sur Amazon
203
+ </a>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Articles & Tips -->
210
+ <section class="mb-16">
211
+ <div class="text-center mb-12">
212
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Articles et Conseils</h2>
213
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez nos articles pour approfondir votre connaissance et pratique de l'Islam.</p>
214
+ </div>
215
+
216
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
217
+ <!-- Article 1 -->
218
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover">
219
+ <img src="https://images.unsplash.com/photo-1564121211835-e88c852648ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Prière" class="w-full h-40 object-cover">
220
+ <div class="p-5">
221
+ <h3 class="font-bold text-lg mb-2">5 erreurs à éviter pendant la prière</h3>
222
+ <p class="text-gray-600 text-sm mb-4">Découvrez les erreurs courantes qui peuvent invalider votre prière.</p>
223
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-all flex items-center">
224
+ Lire l'article <i class="fas fa-arrow-right ml-2"></i>
225
+ </a>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Article 2 -->
230
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover">
231
+ <img src="https://images.unsplash.com/photo-1540202404-5a7b4f9d1533?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Coran" class="w-full h-40 object-cover">
232
+ <div class="p-5">
233
+ <h3 class="font-bold text-lg mb-2">Comment méditer sur le Coran (Tadabbur)</h3>
234
+ <p class="text-gray-600 text-sm mb-4">Techniques pour une lecture profonde et méditative du Coran.</p>
235
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-all flex items-center">
236
+ Lire l'article <i class="fas fa-arrow-right ml-2"></i>
237
+ </a>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Article 3 -->
242
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover">
243
+ <img src="https://images.unsplash.com/photo-1568217549901-70cc1106a0a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Invocations" class="w-full h-40 object-cover">
244
+ <div class="p-5">
245
+ <h3 class="font-bold text-lg mb-2">Astuces pour rester constant dans les invocations</h3>
246
+ <p class="text-gray-600 text-sm mb-4">Comment intégrer les douas dans votre quotidien.</p>
247
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-all flex items-center">
248
+ Lire l'article <i class="fas fa-arrow-right ml-2"></i>
249
+ </a>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Article 4 -->
254
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover">
255
+ <img src="https://images.unsplash.com/photo-1568219656418-15c329312bf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Mosquée" class="w-full h-40 object-cover">
256
+ <div class="p-5">
257
+ <h3 class="font-bold text-lg mb-2">10 invocations à apprendre par cœur avec sens</h3>
258
+ <p class="text-gray-600 text-sm mb-4">Les douas essentiels pour chaque musulman.</p>
259
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-all flex items-center">
260
+ Lire l'article <i class="fas fa-arrow-right ml-2"></i>
261
+ </a>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- About Section -->
268
+ <section class="mb-16">
269
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
270
+ <div class="md:flex">
271
+ <div class="md:w-1/3">
272
+ <img src="https://images.unsplash.com/photo-1564564244660-5d73c057f2d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Auteur" class="w-full h-full object-cover">
273
+ </div>
274
+ <div class="md:w-2/3 p-8">
275
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">À propos</h2>
276
+ <div class="prose max-w-none text-gray-700 mb-6">
277
+ <p>Je suis un jeune musulman engagé dans la da'wa numérique. À travers TikTok (@tips.coran1) et ce site, je partage des rappels, des connaissances, et des outils pour booster ta relation avec Allah. Chaque jour est une opportunité pour se rapprocher de Lui.</p>
278
+ <p class="mt-4">Mon objectif est de rendre l'Islam accessible et vivant pour les jeunes générations, avec un contenu authentique, pratique et inspirant.</p>
279
+ </div>
280
+ <div class="flex space-x-4">
281
+ <a href="https://www.tiktok.com/@tips.coran1" target="_blank" class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-medium transition-all flex items-center">
282
+ <i class="fab fa-tiktok mr-2"></i> TikTok
283
+ </a>
284
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition-all flex items-center">
285
+ <i class="fab fa-instagram mr-2"></i> Instagram
286
+ </a>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </section>
292
+
293
+ <!-- Newsletter -->
294
+ <section class="mb-16">
295
+ <div class="bg-gradient-to-r from-purple-600 to-indigo-700 rounded-2xl shadow-lg overflow-hidden p-8 text-white">
296
+ <div class="md:flex items-center justify-between">
297
+ <div class="md:w-2/3 mb-8 md:mb-0">
298
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">Inscription à la newsletter</h2>
299
+ <p class="text-white text-opacity-90 mb-6">📩 Reçois chaque vendredi un rappel, une astuce spirituelle, et une recommandation utile directement dans ta boîte mail.</p>
300
+ <div class="flex items-center">
301
+ <i class="fas fa-gift text-2xl mr-4"></i>
302
+ <p class="text-sm">Les premiers inscrits recevront un ebook gratuit "30 jours pour se rapprocher d'Allah"</p>
303
+ </div>
304
+ </div>
305
+ <div class="md:w-1/3">
306
+ <form class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm">
307
+ <div class="mb-4">
308
+ <label class="block text-white text-sm font-medium mb-2">Prénom</label>
309
+ <input type="text" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="Votre prénom">
310
+ </div>
311
+ <div class="mb-6">
312
+ <label class="block text-white text-sm font-medium mb-2">Email</label>
313
+ <input type="email" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="Votre email">
314
+ </div>
315
+ <button type="submit" class="w-full bg-white text-purple-700 hover:bg-gray-100 font-bold py-3 px-4 rounded-lg transition-all shadow-md">
316
+ Je m'inscris !
317
+ </button>
318
+ </form>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </section>
323
+ </main>
324
+
325
+ <!-- Footer -->
326
+ <footer class="bg-gray-900 text-white py-12 px-4 md:px-8">
327
+ <div class="container mx-auto max-w-6xl">
328
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
329
+ <div>
330
+ <h3 class="text-xl font-bold mb-4 flex items-center">
331
+ <i class="fas fa-moon mr-2"></i> Nur Al-Qouloub
332
+ </h3>
333
+ <p class="text-gray-400">La lumière des cœurs croyants. Partage quotidien de rappels islamiques.</p>
334
+ </div>
335
+
336
+ <div>
337
+ <h3 class="text-lg font-bold mb-4">Navigation</h3>
338
+ <ul class="space-y-2">
339
+ <li><a href="#rappel" class="text-gray-400 hover:text-white transition-all">Rappel du jour</a></li>
340
+ <li><a href="#produits" class="text-gray-400 hover:text-white transition-all">Produits utiles</a></li>
341
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all">Articles</a></li>
342
+ <li><a href="#" class="text-gray-400 hover:text-white transition-all">À propos</a></li>
343
+ </ul>
344
+ </div>
345
+
346
+ <div>
347
+ <h3 class="text-lg font-bold mb-4">Réseaux sociaux</h3>
348
+ <div class="flex space-x-4">
349
+ <a href="https://www.tiktok.com/@tips.coran1" target="_blank" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition-all">
350
+ <i class="fab fa-tiktok"></i>
351
+ </a>
352
+ <a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition-all">
353
+ <i class="fab fa-instagram"></i>
354
+ </a>
355
+ <a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition-all">
356
+ <i class="fab fa-youtube"></i>
357
+ </a>
358
+ <a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition-all">
359
+ <i class="fab fa-telegram"></i>
360
+ </a>
361
+ </div>
362
+ </div>
363
+
364
+ <div>
365
+ <h3 class="text-lg font-bold mb-4">Contact</h3>
366
+ <ul class="space-y-2 text-gray-400">
367
+ <li class="flex items-center">
368
+ <i class="fas fa-envelope mr-2"></i> contact@nuralqouloub.com
369
+ </li>
370
+ </ul>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="border-t border-gray-800 pt-8">
375
+ <p class="text-gray-500 text-sm text-center">
376
+ © 2025 Nur Al-Qouloub. Tous droits réservés. Ce site contient des liens affiliés Amazon. En tant que partenaire Amazon, je réalise un bénéfice sur les achats qualifiés.
377
+ </p>
378
+ </div>
379
+ </div>
380
+ </footer>
381
+
382
+ <!-- Back to Top Button -->
383
+ <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all opacity-0 invisible hover:bg-blue-700">
384
+ <i class="fas fa-arrow-up"></i>
385
+ </button>
386
+
387
+ <script>
388
+ // Back to Top Button
389
+ const backToTopButton = document.getElementById('backToTop');
390
+
391
+ window.addEventListener('scroll', () => {
392
+ if (window.pageYOffset > 300) {
393
+ backToTopButton.classList.remove('opacity-0', 'invisible');
394
+ backToTopButton.classList.add('opacity-100', 'visible');
395
+ } else {
396
+ backToTopButton.classList.remove('opacity-100', 'visible');
397
+ backToTopButton.classList.add('opacity-0', 'invisible');
398
+ }
399
+ });
400
+
401
+ backToTopButton.addEventListener('click', () => {
402
+ window.scrollTo({
403
+ top: 0,
404
+ behavior: 'smooth'
405
+ });
406
+ });
407
+
408
+ // Smooth scrolling for anchor links
409
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
410
+ anchor.addEventListener('click', function (e) {
411
+ e.preventDefault();
412
+
413
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
414
+ behavior: 'smooth'
415
+ });
416
+ });
417
+ });
418
+ </script>
419
+ <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/github" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
420
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ <h1>🌙 Bienvenue sur Nur Al-Qouloub – La lumière des cœurs croyants</h1> <p>Chaque jour, un rappel, un conseil et une sagesse issue du Coran et de la Sunna pour te rapprocher d’Allah ﷻ.</p> <a href="#rappel">📖 Lire le rappel du jour</a> | <a href="#produits">🛒 Voir les produits utiles</a> | <a href="https://www.tiktok.com/@tips.coran1" target="_blank">📱 Suivre @tips.coran1 sur TikTok</a> <hr> <h2 id="rappel">🧠 Rappel du Jour – La patience est lumière</h2> <blockquote> Le Prophète ﷺ a dit : <br> <i>“La patience est une lumière.”</i> (Muslim) </blockquote> <p>Dans les épreuves, la patience est le lien invisible entre le croyant et son Seigneur. C’est par elle que le cœur se fortifie et que les péchés s’effacent.</p> <p><strong>Astuce du jour :</strong> En cas de colère, fais l’ablution. Le feu ne s’éteint que par l’eau.</p> <hr> <h2>📖 Verset en lumière</h2> <blockquote> Sourate Al-Baqara – Verset 2 : <br> <i>“Ceci est le Livre au sujet duquel il n’y a aucun doute, c’est un guide pour les pieux.”</i> </blockquote> <p>Le Coran est bien plus qu’un livre. Il est un mode de vie. Il éclaire, il corrige, il purifie. Chaque verset est une clé pour ouvrir les portes de la guidance divine.</p> <hr> <h2 id="produits">🛒 Produits recommandés (liens affiliés Amazon)</h2> <p>Voici une sélection rigoureuse de produits pour enrichir ta foi. Chaque lien est un lien affilié Amazon – en commandant via ce site, tu aides à financer la da'wa, sans coût supplémentaire pour toi.</p> <ul> <li> <strong>Tapis de prière mémoire</strong><br> Confort + design qibla intelligent <br> 🔗 <a href="https://www.amazon.fr/ton-lien-affilié1" target="_blank">Voir sur Amazon</a> </li> <li> <strong>Coran Arabe-Français</strong><br> Traduction simple avec phonétique <br> 🔗 <a href="https://www.amazon.fr/ton-lien-affilié2" target="_blank">Voir sur Amazon</a> </li> <li> <strong>Chapelet numérique</strong><br> Tasbih pratique & discret <br> 🔗 <a href="https://www.amazon.fr/ton-lien-affilié3" target="_blank">Voir sur Amazon</a> </li> <li> <strong>Encens Bakhour</strong><br> Ambiance spirituelle pour la maison <br> 🔗 <a href="https://www.amazon.fr/ton-lien-affilié4" target="_blank">Voir sur Amazon</a> </li> </ul> <hr> <h2>📚 Articles et Conseils</h2> <ul> <li>5 erreurs à éviter pendant la prière</li> <li>Comment méditer sur le Coran (Tadabbur)</li> <li>Astuces pour rester constant dans les invocations</li> <li>10 invocations à apprendre par cœur avec sens</li> </ul> <hr> <h2>🧕 À propos</h2> <p>Je suis un jeune musulman engagé dans la da'wa numérique. À travers TikTok (@tips.coran1) et ce site, je partage des rappels, des connaissances, et des outils pour booster ta relation avec Allah. Chaque jour est une opportunité pour se rapprocher de Lui.</p> <hr> <h2>📬 Inscription à la newsletter</h2> <p>📩 Reçois chaque vendredi un rappel, une astuce spirituelle, et une recommandation utile directement dans ta boîte mail.</p> <form> <label>Prénom :</label><br> <input type="text"><br> <label>Email :</label><br> <input type="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>YouTube : à venir</li> <li>Instagram : à venir</li> </ul> <hr> <p><small>© 2025 Nur Al-Qouloub. Tous droits réservés. Ce site contient des liens affiliés Amazon. En tant que partenaire Amazon, je réalise un bénéfice sur les achats qualifiés.</small></p>