Hugging Face's logo

Spaces:
martianband1t
/
rech-bibli
Running

App Files Community
martianband1t commited on
Commit
d1053a2
·
verified ·
1 Parent(s): dde9d24

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1035 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Rech Bibli
3
- emoji: 🌍
4
- colorFrom: red
5
- colorTo: indigo
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: rech-bibli
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,1035 @@
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>BibleSearch - Concordance et Prédications</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
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.8.2/docx.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap');
13
+
14
+ body {
15
+ font-family: 'Open Sans', sans-serif;
16
+ background-color: #f8f4e8;
17
+ color: #333;
18
+ }
19
+
20
+ .title-font {
21
+ font-family: 'Cardo', serif;
22
+ }
23
+
24
+ .parchment-bg {
25
+ background-color: #f9f3e6;
26
+ 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 width="100" height="100" fill="none" stroke="%23d4c9a8" stroke-width="1"/></svg>');
27
+ background-size: 20px 20px;
28
+ }
29
+
30
+ .gold-border {
31
+ border: 1px solid #d4af37;
32
+ }
33
+
34
+ .purple-text {
35
+ color: #6a0dad;
36
+ }
37
+
38
+ .verse-card:hover {
39
+ transform: translateY(-2px);
40
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
41
+ }
42
+
43
+ .tab-active {
44
+ border-bottom: 3px solid #d4af37;
45
+ color: #6a0dad;
46
+ font-weight: 600;
47
+ }
48
+
49
+ /* Animation for search results */
50
+ @keyframes fadeIn {
51
+ from { opacity: 0; transform: translateY(10px); }
52
+ to { opacity: 1; transform: translateY(0); }
53
+ }
54
+
55
+ .fade-in {
56
+ animation: fadeIn 0.3s ease-out forwards;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="min-h-screen">
61
+ <!-- Header -->
62
+ <header class="bg-purple-900 text-white shadow-md">
63
+ <div class="container mx-auto px-4 py-6 flex justify-between items-center">
64
+ <div class="flex items-center space-x-2">
65
+ <i class="fas fa-bible text-2xl text-yellow-400"></i>
66
+ <h1 class="title-font text-2xl md:text-3xl font-bold">BibleSearch</h1>
67
+ </div>
68
+ <div class="flex items-center space-x-4">
69
+ <button id="themeToggle" class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 transition">
70
+ <i class="fas fa-moon"></i>
71
+ </button>
72
+ <button class="hidden md:flex items-center space-x-1 bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-semibold px-4 py-2 rounded transition">
73
+ <i class="fas fa-user"></i>
74
+ <span>Connexion</span>
75
+ </button>
76
+ </div>
77
+ </div>
78
+ </header>
79
+
80
+ <!-- Main Content -->
81
+ <main class="container mx-auto px-4 py-8">
82
+ <!-- Tabs Navigation -->
83
+ <div class="flex border-b border-gray-300 mb-8">
84
+ <button id="concordanceTab" class="tab-active px-6 py-3 font-medium text-sm md:text-base">Concordance Biblique</button>
85
+ <button id="sermonsTab" class="px-6 py-3 font-medium text-sm md:text-base text-gray-600 hover:text-purple-900">Mes Prédications</button>
86
+ </div>
87
+
88
+ <!-- Concordance Section -->
89
+ <section id="concordanceSection" class="">
90
+ <!-- Search Area -->
91
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8 gold-border">
92
+ <h2 class="title-font text-xl md:text-2xl font-bold mb-4 purple-text">Recherche Biblique</h2>
93
+ <div class="flex flex-col md:flex-row gap-4">
94
+ <div class="flex-grow">
95
+ <label for="keyword" class="block text-sm font-medium text-gray-700 mb-1">Mot-clé ou phrase</label>
96
+ <div class="relative">
97
+ <input type="text" id="keyword" placeholder="Ex: foi, amour, paix..."
98
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
99
+ <button id="searchBtn" class="absolute right-2 top-2 text-purple-700 hover:text-purple-900">
100
+ <i class="fas fa-search"></i>
101
+ </button>
102
+ </div>
103
+ </div>
104
+ <div class="w-full md:w-48">
105
+ <label for="version" class="block text-sm font-medium text-gray-700 mb-1">Version</label>
106
+ <select id="version" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
107
+ <option value="LSG">Louis Segond</option>
108
+ <option value="KJV">King James</option>
109
+ <option value="NIV">NIV</option>
110
+ </select>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
115
+ <div>
116
+ <label for="testament" class="block text-sm font-medium text-gray-700 mb-1">Testament</label>
117
+ <select id="testament" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
118
+ <option value="all">Tous</option>
119
+ <option value="old">Ancien Testament</option>
120
+ <option value="new">Nouveau Testament</option>
121
+ </select>
122
+ </div>
123
+ <div>
124
+ <label for="book" class="block text-sm font-medium text-gray-700 mb-1">Livre</label>
125
+ <select id="book" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
126
+ <option value="all">Tous</option>
127
+ <!-- Books will be populated by JavaScript -->
128
+ </select>
129
+ </div>
130
+ <div>
131
+ <label for="theme" class="block text-sm font-medium text-gray-700 mb-1">Thème</label>
132
+ <select id="theme" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
133
+ <option value="all">Tous</option>
134
+ <option value="faith">Foi</option>
135
+ <option value="love">Amour</option>
136
+ <option value="salvation">Salut</option>
137
+ <option value="repentance">Repentance</option>
138
+ <option value="hope">Espérance</option>
139
+ </select>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Results Area -->
145
+ <div id="resultsArea" class="hidden">
146
+ <div class="flex justify-between items-center mb-4">
147
+ <h3 class="title-font text-lg md:text-xl font-semibold purple-text">Résultats de recherche</h3>
148
+ <div class="text-sm text-gray-600">
149
+ <span id="resultsCount">0</span> versets trouvés
150
+ </div>
151
+ </div>
152
+
153
+ <div id="versesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
154
+ <!-- Verses will be inserted here by JavaScript -->
155
+ </div>
156
+
157
+ <div id="pagination" class="mt-8 flex justify-center">
158
+ <!-- Pagination will be inserted here by JavaScript -->
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Themes Section -->
163
+ <div class="mt-12">
164
+ <h3 class="title-font text-xl md:text-2xl font-bold mb-6 purple-text text-center">Thèmes Bibliques</h3>
165
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
166
+ <div class="theme-card bg-white rounded-lg shadow-md p-4 text-center cursor-pointer hover:bg-yellow-50 transition gold-border" data-theme="faith">
167
+ <i class="fas fa-cross text-3xl mb-2 text-purple-700"></i>
168
+ <h4 class="font-semibold">Foi</h4>
169
+ <p class="text-sm text-gray-600 mt-1">Versets sur la foi et la confiance</p>
170
+ </div>
171
+ <div class="theme-card bg-white rounded-lg shadow-md p-4 text-center cursor-pointer hover:bg-yellow-50 transition gold-border" data-theme="love">
172
+ <i class="fas fa-heart text-3xl mb-2 text-purple-700"></i>
173
+ <h4 class="font-semibold">Amour</h4>
174
+ <p class="text-sm text-gray-600 mt-1">L'amour de Dieu et du prochain</p>
175
+ </div>
176
+ <div class="theme-card bg-white rounded-lg shadow-md p-4 text-center cursor-pointer hover:bg-yellow-50 transition gold-border" data-theme="salvation">
177
+ <i class="fas fa-dove text-3xl mb-2 text-purple-700"></i>
178
+ <h4 class="font-semibold">Salut</h4>
179
+ <p class="text-sm text-gray-600 mt-1">Le plan du salut en Christ</p>
180
+ </div>
181
+ <div class="theme-card bg-white rounded-lg shadow-md p-4 text-center cursor-pointer hover:bg-yellow-50 transition gold-border" data-theme="repentance">
182
+ <i class="fas fa-hand-holding-heart text-3xl mb-2 text-purple-700"></i>
183
+ <h4 class="font-semibold">Repentance</h4>
184
+ <p class="text-sm text-gray-600 mt-1">Se tourner vers Dieu</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- Sermons Section (Hidden by default) -->
191
+ <section id="sermonsSection" class="hidden">
192
+ <div class="flex justify-between items-center mb-6">
193
+ <h2 class="title-font text-xl md:text-2xl font-bold purple-text">Mes Prédications</h2>
194
+ <button id="newSermonBtn" class="bg-purple-700 hover:bg-purple-800 text-white px-4 py-2 rounded-md flex items-center space-x-2 transition">
195
+ <i class="fas fa-plus"></i>
196
+ <span>Nouvelle Prédication</span>
197
+ </button>
198
+ </div>
199
+
200
+ <!-- Sermons List -->
201
+ <div id="sermonsList" class="grid grid-cols-1 gap-6">
202
+ <!-- Sermons will be inserted here by JavaScript -->
203
+ <div class="text-center py-10 text-gray-500">
204
+ <i class="fas fa-book-open text-4xl mb-4"></i>
205
+ <p>Vous n'avez pas encore de prédications enregistrées</p>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- New Sermon Modal -->
210
+ <div id="sermonModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
211
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
212
+ <div class="p-6">
213
+ <div class="flex justify-between items-center mb-4">
214
+ <h3 class="title-font text-xl font-bold purple-text">Nouvelle Prédication</h3>
215
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
216
+ <i class="fas fa-times"></i>
217
+ </button>
218
+ </div>
219
+
220
+ <form id="sermonForm">
221
+ <div class="mb-4">
222
+ <label for="sermonTitle" class="block text-sm font-medium text-gray-700 mb-1">Titre</label>
223
+ <input type="text" id="sermonTitle" required
224
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
225
+ </div>
226
+
227
+ <div class="mb-4">
228
+ <label for="baseText" class="block text-sm font-medium text-gray-700 mb-1">Texte de base</label>
229
+ <input type="text" id="baseText"
230
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
231
+ </div>
232
+
233
+ <div class="mb-4">
234
+ <label for="keyPoints" class="block text-sm font-medium text-gray-700 mb-1">Points clés</label>
235
+ <textarea id="keyPoints" rows="3"
236
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500"></textarea>
237
+ <p class="text-xs text-gray-500 mt-1">Séparez chaque point par une nouvelle ligne</p>
238
+ </div>
239
+
240
+ <div class="mb-4">
241
+ <label class="block text-sm font-medium text-gray-700 mb-1">Versets utilisés</label>
242
+ <div id="selectedVerses" class="border border-gray-300 rounded-md p-2 min-h-20">
243
+ <!-- Selected verses will appear here -->
244
+ <p class="text-gray-500 text-sm">Aucun verset sélectionné</p>
245
+ </div>
246
+ <button type="button" id="addVersesBtn" class="mt-2 text-sm text-purple-700 hover:text-purple-900 flex items-center">
247
+ <i class="fas fa-plus mr-1"></i> Ajouter des versets
248
+ </button>
249
+ </div>
250
+
251
+ <div class="mb-4">
252
+ <label for="sermonNotes" class="block text-sm font-medium text-gray-700 mb-1">Notes complémentaires</label>
253
+ <textarea id="sermonNotes" rows="5"
254
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500"></textarea>
255
+ </div>
256
+
257
+ <div class="flex justify-end space-x-3 mt-6">
258
+ <button type="button" id="cancelSermonBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 transition">
259
+ Annuler
260
+ </button>
261
+ <button type="submit" class="bg-purple-700 hover:bg-purple-800 text-white px-4 py-2 rounded-md transition">
262
+ Enregistrer
263
+ </button>
264
+ </div>
265
+ </form>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Add Verses Modal -->
271
+ <div id="versesModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
272
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden">
273
+ <div class="p-6">
274
+ <div class="flex justify-between items-center mb-4">
275
+ <h3 class="title-font text-xl font-bold purple-text">Sélectionner des versets</h3>
276
+ <button id="closeVersesModalBtn" class="text-gray-500 hover:text-gray-700">
277
+ <i class="fas fa-times"></i>
278
+ </button>
279
+ </div>
280
+
281
+ <div class="mb-4">
282
+ <input type="text" id="searchVersesInput" placeholder="Rechercher des versets..."
283
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
284
+ </div>
285
+
286
+ <div class="border rounded-md overflow-hidden">
287
+ <div class="grid grid-cols-12 bg-gray-100 p-2 font-medium text-sm">
288
+ <div class="col-span-1"></div>
289
+ <div class="col-span-4">Référence</div>
290
+ <div class="col-span-7">Texte</div>
291
+ </div>
292
+ <div id="versesSelectionList" class="max-h-[60vh] overflow-y-auto">
293
+ <!-- Verses for selection will appear here -->
294
+ </div>
295
+ </div>
296
+
297
+ <div class="flex justify-end space-x-3 mt-6">
298
+ <button type="button" id="cancelVersesBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 transition">
299
+ Annuler
300
+ </button>
301
+ <button type="button" id="confirmVersesBtn" class="bg-purple-700 hover:bg-purple-800 text-white px-4 py-2 rounded-md transition">
302
+ Confirmer la sélection
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </section>
309
+ </main>
310
+
311
+ <!-- Footer -->
312
+ <footer class="bg-purple-900 text-white py-8 mt-12">
313
+ <div class="container mx-auto px-4">
314
+ <div class="flex flex-col md:flex-row justify-between items-center">
315
+ <div class="mb-4 md:mb-0">
316
+ <h2 class="title-font text-xl font-bold flex items-center">
317
+ <i class="fas fa-bible mr-2 text-yellow-400"></i>
318
+ BibleSearch
319
+ </h2>
320
+ <p class="text-sm mt-1">Votre outil d'étude biblique et de préparation de prédications</p>
321
+ </div>
322
+ <div class="flex space-x-6">
323
+ <a href="#" class="hover:text-yellow-400 transition"><i class="fab fa-facebook-f"></i></a>
324
+ <a href="#" class="hover:text-yellow-400 transition"><i class="fab fa-twitter"></i></a>
325
+ <a href="#" class="hover:text-yellow-400 transition"><i class="fab fa-instagram"></i></a>
326
+ </div>
327
+ </div>
328
+ <div class="border-t border-purple-700 mt-6 pt-6 text-sm text-center md:text-left">
329
+ <p>&copy; 2023 BibleSearch. Tous droits réservés.</p>
330
+ </div>
331
+ </div>
332
+ </footer>
333
+
334
+ <script>
335
+ // Sample Bible data (in a real app, this would come from an API or database)
336
+ const bibleData = {
337
+ LSG: {
338
+ oldTestament: [
339
+ { book: "Genèse", chapters: 50, abbreviation: "Gen" },
340
+ { book: "Exode", chapters: 40, abbreviation: "Ex" },
341
+ // ... other OT books
342
+ ],
343
+ newTestament: [
344
+ { book: "Matthieu", chapters: 28, abbreviation: "Mat" },
345
+ { book: "Marc", chapters: 16, abbreviation: "Marc" },
346
+ // ... other NT books
347
+ ],
348
+ verses: [
349
+ {
350
+ reference: "Jean 3:16",
351
+ text: "Car Dieu a tant aimé le monde qu'il a donné son Fils unique, afin que quiconque croit en lui ne périsse point, mais qu'il ait la vie éternelle.",
352
+ book: "Jean", chapter: 3, verse: 16,
353
+ testament: "new",
354
+ themes: ["love", "salvation"]
355
+ },
356
+ {
357
+ reference: "Hébreux 11:1",
358
+ text: "Or la foi est une ferme assurance des choses qu'on espère, une démonstration de celles qu'on ne voit pas.",
359
+ book: "Hébreux", chapter: 11, verse: 1,
360
+ testament: "new",
361
+ themes: ["faith"]
362
+ },
363
+ {
364
+ reference: "Psaumes 23:1",
365
+ text: "L'Éternel est mon berger: je ne manquerai de rien.",
366
+ book: "Psaumes", chapter: 23, verse: 1,
367
+ testament: "old",
368
+ themes: ["faith", "trust"]
369
+ },
370
+ // ... more verses
371
+ ]
372
+ },
373
+ KJV: {
374
+ // Similar structure for KJV version
375
+ }
376
+ };
377
+
378
+ // Sample sermons data
379
+ let sermons = [
380
+ // {
381
+ // id: 1,
382
+ // title: "La puissance de la foi",
383
+ // baseText: "Hébreux 11:1-6",
384
+ // keyPoints: [
385
+ // "La foi est une assurance",
386
+ // "La foi plaît à Dieu",
387
+ // "Exemples de foi dans l'Écriture"
388
+ // ],
389
+ // verses: [
390
+ // { reference: "Hébreux 11:1", text: "Or la foi est une ferme assurance..." },
391
+ // { reference: "Hébreux 11:6", text: "Or sans la foi il est impossible..." }
392
+ // ],
393
+ // notes: "La foi est le fondement de notre relation avec Dieu...",
394
+ // createdAt: "2023-05-15"
395
+ // }
396
+ ];
397
+
398
+ // DOM Elements
399
+ const concordanceTab = document.getElementById('concordanceTab');
400
+ const sermonsTab = document.getElementById('sermonsTab');
401
+ const concordanceSection = document.getElementById('concordanceSection');
402
+ const sermonsSection = document.getElementById('sermonsSection');
403
+ const keywordInput = document.getElementById('keyword');
404
+ const searchBtn = document.getElementById('searchBtn');
405
+ const versionSelect = document.getElementById('version');
406
+ const testamentSelect = document.getElementById('testament');
407
+ const bookSelect = document.getElementById('book');
408
+ const themeSelect = document.getElementById('theme');
409
+ const resultsArea = document.getElementById('resultsArea');
410
+ const resultsCount = document.getElementById('resultsCount');
411
+ const versesContainer = document.getElementById('versesContainer');
412
+ const pagination = document.getElementById('pagination');
413
+ const themeCards = document.querySelectorAll('.theme-card');
414
+ const newSermonBtn = document.getElementById('newSermonBtn');
415
+ const sermonsList = document.getElementById('sermonsList');
416
+ const sermonModal = document.getElementById('sermonModal');
417
+ const closeModalBtn = document.getElementById('closeModalBtn');
418
+ const sermonForm = document.getElementById('sermonForm');
419
+ const selectedVerses = document.getElementById('selectedVerses');
420
+ const addVersesBtn = document.getElementById('addVersesBtn');
421
+ const versesModal = document.getElementById('versesModal');
422
+ const closeVersesModalBtn = document.getElementById('closeVersesModalBtn');
423
+ const searchVersesInput = document.getElementById('searchVersesInput');
424
+ const versesSelectionList = document.getElementById('versesSelectionList');
425
+ const cancelVersesBtn = document.getElementById('cancelVersesBtn');
426
+ const confirmVersesBtn = document.getElementById('confirmVersesBtn');
427
+ const cancelSermonBtn = document.getElementById('cancelSermonBtn');
428
+ const themeToggle = document.getElementById('themeToggle');
429
+
430
+ // State variables
431
+ let currentTab = 'concordance';
432
+ let currentPage = 1;
433
+ const versesPerPage = 9;
434
+ let searchResults = [];
435
+ let selectedVersesForSermon = [];
436
+ let allVersesForSelection = [];
437
+
438
+ // Initialize the app
439
+ function init() {
440
+ // Populate books dropdown
441
+ populateBooksDropdown();
442
+
443
+ // Set up event listeners
444
+ setupEventListeners();
445
+
446
+ // Load sermons from localStorage if available
447
+ loadSermons();
448
+ }
449
+
450
+ // Populate books dropdown based on selected testament
451
+ function populateBooksDropdown() {
452
+ const testament = testamentSelect.value;
453
+ const version = versionSelect.value;
454
+
455
+ bookSelect.innerHTML = '<option value="all">Tous</option>';
456
+
457
+ if (testament === 'all') {
458
+ bibleData[version].oldTestament.forEach(book => {
459
+ bookSelect.innerHTML += `<option value="${book.abbreviation}">${book.book}</option>`;
460
+ });
461
+ bibleData[version].newTestament.forEach(book => {
462
+ bookSelect.innerHTML += `<option value="${book.abbreviation}">${book.book}</option>`;
463
+ });
464
+ } else if (testament === 'old') {
465
+ bibleData[version].oldTestament.forEach(book => {
466
+ bookSelect.innerHTML += `<option value="${book.abbreviation}">${book.book}</option>`;
467
+ });
468
+ } else {
469
+ bibleData[version].newTestament.forEach(book => {
470
+ bookSelect.innerHTML += `<option value="${book.abbreviation}">${book.book}</option>`;
471
+ });
472
+ }
473
+ }
474
+
475
+ // Set up all event listeners
476
+ function setupEventListeners() {
477
+ // Tab switching
478
+ concordanceTab.addEventListener('click', () => switchTab('concordance'));
479
+ sermonsTab.addEventListener('click', () => switchTab('sermons'));
480
+
481
+ // Search functionality
482
+ searchBtn.addEventListener('click', performSearch);
483
+ keywordInput.addEventListener('keypress', (e) => {
484
+ if (e.key === 'Enter') performSearch();
485
+ });
486
+
487
+ // Testament change updates books dropdown
488
+ testamentSelect.addEventListener('change', populateBooksDropdown);
489
+
490
+ // Theme cards click
491
+ themeCards.forEach(card => {
492
+ card.addEventListener('click', () => {
493
+ const theme = card.dataset.theme;
494
+ themeSelect.value = theme;
495
+ keywordInput.value = '';
496
+ performSearch();
497
+ });
498
+ });
499
+
500
+ // Sermons functionality
501
+ newSermonBtn.addEventListener('click', openNewSermonModal);
502
+ closeModalBtn.addEventListener('click', closeSermonModal);
503
+ sermonForm.addEventListener('submit', saveSermon);
504
+ cancelSermonBtn.addEventListener('click', closeSermonModal);
505
+ addVersesBtn.addEventListener('click', openVersesSelectionModal);
506
+ closeVersesModalBtn.addEventListener('click', closeVersesSelectionModal);
507
+ cancelVersesBtn.addEventListener('click', closeVersesSelectionModal);
508
+ confirmVersesBtn.addEventListener('click', confirmVersesSelection);
509
+ searchVersesInput.addEventListener('input', filterVersesForSelection);
510
+
511
+ // Theme toggle
512
+ themeToggle.addEventListener('click', toggleDarkMode);
513
+ }
514
+
515
+ // Switch between tabs
516
+ function switchTab(tab) {
517
+ currentTab = tab;
518
+
519
+ if (tab === 'concordance') {
520
+ concordanceTab.classList.add('tab-active');
521
+ sermonsTab.classList.remove('tab-active');
522
+ concordanceSection.classList.remove('hidden');
523
+ sermonsSection.classList.add('hidden');
524
+ } else {
525
+ concordanceTab.classList.remove('tab-active');
526
+ sermonsTab.classList.add('tab-active');
527
+ concordanceSection.classList.add('hidden');
528
+ sermonsSection.classList.remove('hidden');
529
+ renderSermonsList();
530
+ }
531
+ }
532
+
533
+ // Perform search based on current filters
534
+ function performSearch() {
535
+ const keyword = keywordInput.value.trim().toLowerCase();
536
+ const version = versionSelect.value;
537
+ const testament = testamentSelect.value;
538
+ const book = bookSelect.value;
539
+ const theme = themeSelect.value;
540
+
541
+ // Filter verses based on criteria
542
+ searchResults = bibleData[version].verses.filter(verse => {
543
+ // Keyword search
544
+ const keywordMatch = keyword === '' ||
545
+ verse.text.toLowerCase().includes(keyword) ||
546
+ verse.reference.toLowerCase().includes(keyword);
547
+
548
+ // Testament filter
549
+ const testamentMatch = testament === 'all' ||
550
+ (testament === 'old' && verse.testament === 'old') ||
551
+ (testament === 'new' && verse.testament === 'new');
552
+
553
+ // Book filter
554
+ const bookMatch = book === 'all' ||
555
+ verse.book.toLowerCase().includes(book.toLowerCase()) ||
556
+ verse.reference.toLowerCase().includes(book.toLowerCase());
557
+
558
+ // Theme filter
559
+ const themeMatch = theme === 'all' ||
560
+ (verse.themes && verse.themes.includes(theme));
561
+
562
+ return keywordMatch && testamentMatch && bookMatch && themeMatch;
563
+ });
564
+
565
+ // Display results
566
+ displaySearchResults();
567
+ }
568
+
569
+ // Display search results with pagination
570
+ function displaySearchResults() {
571
+ if (searchResults.length === 0) {
572
+ resultsArea.classList.add('hidden');
573
+ return;
574
+ }
575
+
576
+ resultsArea.classList.remove('hidden');
577
+ resultsCount.textContent = searchResults.length;
578
+
579
+ // Calculate pagination
580
+ const totalPages = Math.ceil(searchResults.length / versesPerPage);
581
+ currentPage = Math.min(currentPage, totalPages);
582
+
583
+ // Display verses for current page
584
+ const startIndex = (currentPage - 1) * versesPerPage;
585
+ const endIndex = Math.min(startIndex + versesPerPage, searchResults.length);
586
+ const versesToDisplay = searchResults.slice(startIndex, endIndex);
587
+
588
+ versesContainer.innerHTML = '';
589
+ versesToDisplay.forEach((verse, index) => {
590
+ const verseElement = createVerseCard(verse, startIndex + index + 1);
591
+ versesContainer.appendChild(verseElement);
592
+ });
593
+
594
+ // Display pagination controls
595
+ renderPagination(totalPages);
596
+ }
597
+
598
+ // Create a verse card element
599
+ function createVerseCard(verse, index) {
600
+ const card = document.createElement('div');
601
+ card.className = 'verse-card bg-white rounded-lg shadow-sm p-4 transition cursor-pointer gold-border fade-in';
602
+ card.innerHTML = `
603
+ <div class="flex justify-between items-start mb-2">
604
+ <span class="text-xs font-semibold bg-purple-100 text-purple-800 px-2 py-1 rounded">${verse.reference}</span>
605
+ <button class="text-purple-700 hover:text-purple-900 add-to-sermon" data-ref="${verse.reference}" data-text="${verse.text}">
606
+ <i class="fas fa-plus-circle"></i>
607
+ </button>
608
+ </div>
609
+ <p class="text-gray-800">${verse.text}</p>
610
+ ${verse.themes && verse.themes.length > 0 ?
611
+ `<div class="mt-3 flex flex-wrap gap-1">
612
+ ${verse.themes.map(theme =>
613
+ `<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">${getThemeName(theme)}</span>`
614
+ ).join('')}
615
+ </div>` : ''}
616
+ `;
617
+
618
+ // Add event listener to add to sermon button
619
+ card.querySelector('.add-to-sermon').addEventListener('click', (e) => {
620
+ e.stopPropagation();
621
+ addVerseToSermon(verse.reference, verse.text);
622
+ });
623
+
624
+ return card;
625
+ }
626
+
627
+ // Get theme name for display
628
+ function getThemeName(themeKey) {
629
+ const themes = {
630
+ 'faith': 'Foi',
631
+ 'love': 'Amour',
632
+ 'salvation': 'Salut',
633
+ 'repentance': 'Repentance',
634
+ 'trust': 'Confiance',
635
+ 'hope': 'Espérance'
636
+ };
637
+ return themes[themeKey] || themeKey;
638
+ }
639
+
640
+ // Render pagination controls
641
+ function renderPagination(totalPages) {
642
+ if (totalPages <= 1) {
643
+ pagination.innerHTML = '';
644
+ return;
645
+ }
646
+
647
+ let html = '<div class="flex items-center space-x-1">';
648
+
649
+ // Previous button
650
+ html += `
651
+ <button class="px-3 py-1 border rounded-md ${currentPage === 1 ? 'text-gray-400 cursor-not-allowed' : 'text-purple-700 hover:bg-purple-50'}"
652
+ ${currentPage === 1 ? 'disabled' : ''} id="prevPage">
653
+ <i class="fas fa-chevron-left"></i>
654
+ </button>
655
+ `;
656
+
657
+ // Page numbers
658
+ for (let i = 1; i <= totalPages; i++) {
659
+ html += `
660
+ <button class="px-3 py-1 border rounded-md ${currentPage === i ? 'bg-purple-700 text-white' : 'text-purple-700 hover:bg-purple-50'}"
661
+ data-page="${i}" class="page-btn">
662
+ ${i}
663
+ </button>
664
+ `;
665
+ }
666
+
667
+ // Next button
668
+ html += `
669
+ <button class="px-3 py-1 border rounded-md ${currentPage === totalPages ? 'text-gray-400 cursor-not-allowed' : 'text-purple-700 hover:bg-purple-50'}"
670
+ ${currentPage === totalPages ? 'disabled' : ''} id="nextPage">
671
+ <i class="fas fa-chevron-right"></i>
672
+ </button>
673
+ `;
674
+
675
+ html += '</div>';
676
+ pagination.innerHTML = html;
677
+
678
+ // Add event listeners to pagination buttons
679
+ document.getElementById('prevPage')?.addEventListener('click', () => {
680
+ if (currentPage > 1) {
681
+ currentPage--;
682
+ displaySearchResults();
683
+ }
684
+ });
685
+
686
+ document.getElementById('nextPage')?.addEventListener('click', () => {
687
+ if (currentPage < totalPages) {
688
+ currentPage++;
689
+ displaySearchResults();
690
+ }
691
+ });
692
+
693
+ document.querySelectorAll('.page-btn').forEach(btn => {
694
+ btn.addEventListener('click', () => {
695
+ currentPage = parseInt(btn.dataset.page);
696
+ displaySearchResults();
697
+ });
698
+ });
699
+ }
700
+
701
+ // Sermons functionality
702
+ function openNewSermonModal() {
703
+ selectedVersesForSermon = [];
704
+ sermonForm.reset();
705
+ updateSelectedVersesDisplay();
706
+ sermonModal.classList.remove('hidden');
707
+ }
708
+
709
+ function closeSermonModal() {
710
+ sermonModal.classList.add('hidden');
711
+ }
712
+
713
+ function openVersesSelectionModal() {
714
+ // Prepare all verses for selection
715
+ allVersesForSelection = [...bibleData[versionSelect.value].verses];
716
+ renderVersesForSelection();
717
+ versesModal.classList.remove('hidden');
718
+ }
719
+
720
+ function closeVersesSelectionModal() {
721
+ versesModal.classList.add('hidden');
722
+ }
723
+
724
+ function renderVersesForSelection() {
725
+ versesSelectionList.innerHTML = '';
726
+
727
+ allVersesForSelection.forEach(verse => {
728
+ const isSelected = selectedVersesForSermon.some(v => v.reference === verse.reference);
729
+
730
+ const verseElement = document.createElement('div');
731
+ verseElement.className = `grid grid-cols-12 p-2 border-b border-gray-100 hover:bg-purple-50 ${isSelected ? 'bg-purple-100' : ''}`;
732
+ verseElement.innerHTML = `
733
+ <div class="col-span-1 flex items-center justify-center">
734
+ <input type="checkbox" class="verse-checkbox" data-ref="${verse.reference}" data-text="${verse.text}" ${isSelected ? 'checked' : ''}>
735
+ </div>
736
+ <div class="col-span-4 font-medium text-sm">${verse.reference}</div>
737
+ <div class="col-span-7 text-sm">${verse.text}</div>
738
+ `;
739
+
740
+ versesSelectionList.appendChild(verseElement);
741
+ });
742
+ }
743
+
744
+ function filterVersesForSelection() {
745
+ const searchTerm = searchVersesInput.value.trim().toLowerCase();
746
+
747
+ if (searchTerm === '') {
748
+ renderVersesForSelection();
749
+ return;
750
+ }
751
+
752
+ const filteredVerses = allVersesForSelection.filter(verse =>
753
+ verse.text.toLowerCase().includes(searchTerm) ||
754
+ verse.reference.toLowerCase().includes(searchTerm)
755
+ );
756
+
757
+ versesSelectionList.innerHTML = '';
758
+
759
+ filteredVerses.forEach(verse => {
760
+ const isSelected = selectedVersesForSermon.some(v => v.reference === verse.reference);
761
+
762
+ const verseElement = document.createElement('div');
763
+ verseElement.className = `grid grid-cols-12 p-2 border-b border-gray-100 hover:bg-purple-50 ${isSelected ? 'bg-purple-100' : ''}`;
764
+ verseElement.innerHTML = `
765
+ <div class="col-span-1 flex items-center justify-center">
766
+ <input type="checkbox" class="verse-checkbox" data-ref="${verse.reference}" data-text="${verse.text}" ${isSelected ? 'checked' : ''}>
767
+ </div>
768
+ <div class="col-span-4 font-medium text-sm">${verse.reference}</div>
769
+ <div class="col-span-7 text-sm">${verse.text}</div>
770
+ `;
771
+
772
+ versesSelectionList.appendChild(verseElement);
773
+ });
774
+ }
775
+
776
+ function confirmVersesSelection() {
777
+ const checkboxes = versesSelectionList.querySelectorAll('.verse-checkbox:checked');
778
+ selectedVersesForSermon = Array.from(checkboxes).map(checkbox => ({
779
+ reference: checkbox.dataset.ref,
780
+ text: checkbox.dataset.text
781
+ }));
782
+
783
+ updateSelectedVersesDisplay();
784
+ closeVersesSelectionModal();
785
+ }
786
+
787
+ function addVerseToSermon(reference, text) {
788
+ if (!selectedVersesForSermon.some(v => v.reference === reference)) {
789
+ selectedVersesForSermon.push({ reference, text });
790
+ updateSelectedVersesDisplay();
791
+
792
+ // Show a toast notification
793
+ showToast(`Verset ${reference} ajouté à la prédication`);
794
+ }
795
+ }
796
+
797
+ function updateSelectedVersesDisplay() {
798
+ if (selectedVersesForSermon.length === 0) {
799
+ selectedVerses.innerHTML = '<p class="text-gray-500 text-sm">Aucun verset sélectionné</p>';
800
+ return;
801
+ }
802
+
803
+ selectedVerses.innerHTML = '';
804
+ selectedVersesForSermon.forEach(verse => {
805
+ const verseElement = document.createElement('div');
806
+ verseElement.className = 'flex justify-between items-start mb-2 p-2 bg-purple-50 rounded';
807
+ verseElement.innerHTML = `
808
+ <div>
809
+ <span class="text-xs font-semibold text-purple-800">${verse.reference}</span>
810
+ <p class="text-xs text-gray-700 truncate">${verse.text}</p>
811
+ </div>
812
+ <button class="text-red-500 hover:text-red-700 remove-verse" data-ref="${verse.reference}">
813
+ <i class="fas fa-times"></i>
814
+ </button>
815
+ `;
816
+
817
+ verseElement.querySelector('.remove-verse').addEventListener('click', (e) => {
818
+ e.stopPropagation();
819
+ selectedVersesForSermon = selectedVersesForSermon.filter(v => v.reference !== verse.reference);
820
+ updateSelectedVersesDisplay();
821
+ });
822
+
823
+ selectedVerses.appendChild(verseElement);
824
+ });
825
+ }
826
+
827
+ function saveSermon(e) {
828
+ e.preventDefault();
829
+
830
+ const title = document.getElementById('sermonTitle').value.trim();
831
+ const baseText = document.getElementById('baseText').value.trim();
832
+ const keyPoints = document.getElementById('keyPoints').value.split('\n').filter(point => point.trim() !== '');
833
+ const notes = document.getElementById('sermonNotes').value.trim();
834
+
835
+ if (!title) {
836
+ alert('Veuillez entrer un titre pour la prédication');
837
+ return;
838
+ }
839
+
840
+ const newSermon = {
841
+ id: Date.now(),
842
+ title,
843
+ baseText,
844
+ keyPoints,
845
+ verses: [...selectedVersesForSermon],
846
+ notes,
847
+ createdAt: new Date().toISOString().split('T')[0]
848
+ };
849
+
850
+ sermons.push(newSermon);
851
+ saveSermonsToStorage();
852
+ renderSermonsList();
853
+ closeSermonModal();
854
+
855
+ showToast('Prédication enregistrée avec succès');
856
+ }
857
+
858
+ function renderSermonsList() {
859
+ if (sermons.length === 0) {
860
+ sermonsList.innerHTML = `
861
+ <div class="text-center py-10 text-gray-500">
862
+ <i class="fas fa-book-open text-4xl mb-4"></i>
863
+ <p>Vous n'avez pas encore de prédications enregistrées</p>
864
+ </div>
865
+ `;
866
+ return;
867
+ }
868
+
869
+ sermonsList.innerHTML = '';
870
+ sermons.forEach(sermon => {
871
+ const sermonElement = document.createElement('div');
872
+ sermonElement.className = 'bg-white rounded-lg shadow-md p-6 gold-border';
873
+ sermonElement.innerHTML = `
874
+ <div class="flex justify-between items-start mb-4">
875
+ <h3 class="title-font text-lg font-semibold purple-text">${sermon.title}</h3>
876
+ <div class="flex space-x-2">
877
+ <button class="text-purple-700 hover:text-purple-900 export-btn" data-id="${sermon.id}" title="Exporter">
878
+ <i class="fas fa-file-export"></i>
879
+ </button>
880
+ <button class="text-red-500 hover:text-red-700 delete-btn" data-id="${sermon.id}" title="Supprimer">
881
+ <i class="fas fa-trash"></i>
882
+ </button>
883
+ </div>
884
+ </div>
885
+ ${sermon.baseText ? `<p class="text-sm font-medium text-gray-700 mb-2">Texte de base: <span class="font-normal">${sermon.baseText}</span></p>` : ''}
886
+ <div class="mb-3">
887
+ <p class="text-sm font-medium text-gray-700">Points clés:</p>
888
+ <ul class="list-disc list-inside text-sm text-gray-700 pl-2">
889
+ ${sermon.keyPoints.map(point => `<li>${point}</li>`).join('')}
890
+ </ul>
891
+ </div>
892
+ <div class="mb-3">
893
+ <p class="text-sm font-medium text-gray-700">Versets utilisés (${sermon.verses.length}):</p>
894
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
895
+ ${sermon.verses.slice(0, 4).map(verse => `
896
+ <div class="text-xs bg-purple-50 text-purple-800 px-2 py-1 rounded">
897
+ <span class="font-semibold">${verse.reference}</span>: ${verse.text.substring(0, 50)}...
898
+ </div>
899
+ `).join('')}
900
+ ${sermon.verses.length > 4 ? `<div class="text-xs text-purple-700">+ ${sermon.verses.length - 4} autres versets...</div>` : ''}
901
+ </div>
902
+ </div>
903
+ <div class="flex justify-between items-center text-xs text-gray-500 mt-4">
904
+ <span>Créé le: ${sermon.createdAt}</span>
905
+ <button class="text-purple-700 hover:text-purple-900 text-sm view-btn" data-id="${sermon.id}">
906
+ Voir détails <i class="fas fa-chevron-right ml-1"></i>
907
+ </button>
908
+ </div>
909
+ `;
910
+
911
+ sermonsList.appendChild(sermonElement);
912
+
913
+ // Add event listeners to buttons
914
+ sermonElement.querySelector('.export-btn').addEventListener('click', (e) => {
915
+ e.stopPropagation();
916
+ exportSermon(sermon.id);
917
+ });
918
+
919
+ sermonElement.querySelector('.delete-btn').addEventListener('click', (e) => {
920
+ e.stopPropagation();
921
+ deleteSermon(sermon.id);
922
+ });
923
+
924
+ sermonElement.querySelector('.view-btn').addEventListener('click', (e) => {
925
+ e.stopPropagation();
926
+ viewSermonDetails(sermon.id);
927
+ });
928
+ });
929
+ }
930
+
931
+ function viewSermonDetails(sermonId) {
932
+ const sermon = sermons.find(s => s.id === sermonId);
933
+ if (!sermon) return;
934
+
935
+ // In a real app, you would show a detailed view modal
936
+ alert(`Détails de la prédication: ${sermon.title}\n\nTexte de base: ${sermon.baseText || 'Non spécifié'}\n\nPoints clés:\n${sermon.keyPoints.join('\n')}\n\nNotes: ${sermon.notes || 'Aucune note supplémentaire'}`);
937
+ }
938
+
939
+ function deleteSermon(sermonId) {
940
+ if (confirm('Êtes-vous sûr de vouloir supprimer cette prédication ?')) {
941
+ sermons = sermons.filter(s => s.id !== sermonId);
942
+ saveSermonsToStorage();
943
+ renderSermonsList();
944
+ showToast('Prédication supprimée');
945
+ }
946
+ }
947
+
948
+ function exportSermon(sermonId) {
949
+ const sermon = sermons.find(s => s.id === sermonId);
950
+ if (!sermon) return;
951
+
952
+ // Simple export as text (in a real app, implement PDF/DOCX export)
953
+ const exportText = `
954
+ PRÉDICATION: ${sermon.title}
955
+ ====================================
956
+
957
+ Texte de base: ${sermon.baseText || 'Non spécifié'}
958
+
959
+ Points clés:
960
+ ${sermon.keyPoints.map((point, i) => `${i+1}. ${point}`).join('\n')}
961
+
962
+ Versets utilisés:
963
+ ${sermon.verses.map(verse => `${verse.reference}: ${verse.text}`).join('\n\n')}
964
+
965
+ Notes complémentaires:
966
+ ${sermon.notes || 'Aucune note supplémentaire'}
967
+
968
+ ====================================
969
+ Créé le: ${sermon.createdAt}
970
+ Exporté depuis BibleSearch
971
+ `;
972
+
973
+ // Create download link
974
+ const blob = new Blob([exportText], { type: 'text/plain' });
975
+ const url = URL.createObjectURL(blob);
976
+ const a = document.createElement('a');
977
+ a.href = url;
978
+ a.download = `Predication_${sermon.title.replace(/[^a-z0-9]/gi, '_')}.txt`;
979
+ document.body.appendChild(a);
980
+ a.click();
981
+ document.body.removeChild(a);
982
+ URL.revokeObjectURL(url);
983
+
984
+ showToast('Prédication exportée');
985
+ }
986
+
987
+ // Local storage functions
988
+ function loadSermons() {
989
+ const savedSermons = localStorage.getItem('bibleSearchSermons');
990
+ if (savedSermons) {
991
+ sermons = JSON.parse(savedSermons);
992
+ renderSermonsList();
993
+ }
994
+ }
995
+
996
+ function saveSermonsToStorage() {
997
+ localStorage.setItem('bibleSearchSermons', JSON.stringify(sermons));
998
+ }
999
+
1000
+ // Helper functions
1001
+ function showToast(message) {
1002
+ const toast = document.createElement('div');
1003
+ toast.className = 'fixed bottom-4 right-4 bg-purple-800 text-white px-4 py-2 rounded-md shadow-lg flex items-center space-x-2 animate-fade-in';
1004
+ toast.innerHTML = `
1005
+ <i class="fas fa-check-circle"></i>
1006
+ <span>${message}</span>
1007
+ `;
1008
+
1009
+ document.body.appendChild(toast);
1010
+
1011
+ setTimeout(() => {
1012
+ toast.classList.add('animate-fade-out');
1013
+ setTimeout(() => toast.remove(), 300);
1014
+ }, 3000);
1015
+ }
1016
+
1017
+ function toggleDarkMode() {
1018
+ document.documentElement.classList.toggle('dark');
1019
+ const icon = themeToggle.querySelector('i');
1020
+ if (document.documentElement.classList.contains('dark')) {
1021
+ icon.classList.replace('fa-moon', 'fa-sun');
1022
+ themeToggle.classList.replace('bg-purple-700', 'bg-yellow-500');
1023
+ themeToggle.classList.replace('hover:bg-purple-600', 'hover:bg-yellow-600');
1024
+ } else {
1025
+ icon.classList.replace('fa-sun', 'fa-moon');
1026
+ themeToggle.classList.replace('bg-yellow-500', 'bg-purple-700');
1027
+ themeToggle.classList.replace('hover:bg-yellow-600', 'hover:bg-purple-600');
1028
+ }
1029
+ }
1030
+
1031
+ // Initialize the app
1032
+ init();
1033
+ </script>
1034
+ <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=martianband1t/rech-bibli" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1035
+ </html>