Hugging Face's logo

Spaces:
iamTheFoxCoder
/
mon-espace
Running

App Files Community
iamTheFoxCoder commited on
Commit
853893a
路
verified 路
1 Parent(s): f7e4306

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +715 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mon Espace
3
- emoji: 馃彚
4
- colorFrom: green
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: mon-espace
3
+ emoji: 馃惓
4
+ colorFrom: red
5
+ colorTo: red
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,715 @@
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>Arbre G茅n茅alogique</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .network {
13
+ width: 100%;
14
+ height: 70vh;
15
+ border: 1px solid #374151;
16
+ border-radius: 0.5rem;
17
+ background-color: #1f2937;
18
+ }
19
+ .person-card {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .person-card:hover {
23
+ transform: translateY(-2px);
24
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
25
+ }
26
+ .search-highlight {
27
+ background-color: rgba(234, 179, 8, 0.3);
28
+ border: 1px solid rgba(234, 179, 8, 0.5);
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-900 text-gray-200 min-h-screen">
33
+ <div class="container mx-auto px-4 py-8">
34
+ <header class="mb-8">
35
+ <h1 class="text-4xl font-bold text-center text-indigo-400 mb-2">Arbre G茅n茅alogique</h1>
36
+ <p class="text-center text-gray-400">Explorez et g茅rez votre histoire familiale</p>
37
+ </header>
38
+
39
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
40
+ <!-- Sidebar -->
41
+ <div class="lg:col-span-1 bg-gray-800 p-6 rounded-lg shadow-lg">
42
+ <div class="mb-6">
43
+ <h2 class="text-xl font-semibold mb-4 text-indigo-300">Rechercher</h2>
44
+ <div class="relative">
45
+ <input type="text" id="searchInput" placeholder="Nom, pr茅nom..."
46
+ class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-4 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
47
+ <button id="searchBtn" class="absolute right-2 top-2 text-gray-400 hover:text-indigo-400">
48
+ <i class="fas fa-search"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+
53
+ <div class="mb-6">
54
+ <h2 class="text-xl font-semibold mb-4 text-indigo-300">Ajouter un membre</h2>
55
+ <div class="space-y-4">
56
+ <div>
57
+ <label class="block text-sm font-medium text-gray-300 mb-1">Type de relation</label>
58
+ <select id="relationType" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
59
+ <option value="parent">Parent</option>
60
+ <option value="spouse">Conjoint</option>
61
+ <option value="sibling">Fr猫re/S艙ur</option>
62
+ <option value="child">Enfant</option>
63
+ </select>
64
+ </div>
65
+ <div>
66
+ <label class="block text-sm font-medium text-gray-300 mb-1">Membre existant</label>
67
+ <select id="existingMember" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
68
+ <option value="">S茅lectionner un membre</option>
69
+ </select>
70
+ </div>
71
+ <button id="addMemberBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md transition duration-300 flex items-center justify-center">
72
+ <i class="fas fa-user-plus mr-2"></i> Ajouter
73
+ </button>
74
+ </div>
75
+ </div>
76
+
77
+ <div>
78
+ <h2 class="text-xl font-semibold mb-4 text-indigo-300">Statistiques</h2>
79
+ <div class="grid grid-cols-2 gap-4">
80
+ <div class="bg-gray-700 p-3 rounded-lg text-center">
81
+ <p class="text-2xl font-bold text-indigo-400" id="totalMembers">0</p>
82
+ <p class="text-xs text-gray-400">Membres</p>
83
+ </div>
84
+ <div class="bg-gray-700 p-3 rounded-lg text-center">
85
+ <p class="text-2xl font-bold text-indigo-400" id="generations">0</p>
86
+ <p class="text-xs text-gray-400">G茅n茅rations</p>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Main Content -->
93
+ <div class="lg:col-span-3 space-y-6">
94
+ <div class="network" id="familyTree"></div>
95
+
96
+ <div class="bg-gray-800 p-6 rounded-lg shadow-lg" id="memberDetails" style="display: none;">
97
+ <div class="flex justify-between items-start mb-4">
98
+ <h2 class="text-2xl font-bold text-indigo-300" id="memberName">D茅tails du membre</h2>
99
+ <button id="editMemberBtn" class="text-gray-400 hover:text-indigo-400">
100
+ <i class="fas fa-edit"></i>
101
+ </button>
102
+ </div>
103
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
104
+ <div class="md:col-span-1">
105
+ <div class="bg-gray-700 rounded-lg overflow-hidden">
106
+ <img id="memberPhoto" src="https://via.placeholder.com/300x300?text=Photo" alt="Photo" class="w-full h-auto">
107
+ </div>
108
+ </div>
109
+ <div class="md:col-span-2">
110
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
111
+ <div>
112
+ <p class="text-sm text-gray-400">Date de naissance</p>
113
+ <p class="font-medium" id="memberBirthDate">Inconnue</p>
114
+ </div>
115
+ <div>
116
+ <p class="text-sm text-gray-400">Lieu de naissance</p>
117
+ <p class="font-medium" id="memberBirthPlace">Inconnu</p>
118
+ </div>
119
+ <div>
120
+ <p class="text-sm text-gray-400">Date de d茅c猫s</p>
121
+ <p class="font-medium" id="memberDeathDate">-</p>
122
+ </div>
123
+ <div>
124
+ <p class="text-sm text-gray-400">Profession</p>
125
+ <p class="font-medium" id="memberOccupation">Inconnue</p>
126
+ </div>
127
+ </div>
128
+ <div class="mb-4">
129
+ <p class="text-sm text-gray-400">Biographie</p>
130
+ <p class="font-medium" id="memberBio">Aucune information biographique disponible.</p>
131
+ </div>
132
+ <div>
133
+ <p class="text-sm text-gray-400 mb-2">Relations</p>
134
+ <div class="flex flex-wrap gap-2" id="memberRelations">
135
+ <!-- Relations will be added here -->
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Edit Member Modal -->
143
+ <div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
144
+ <div class="bg-gray-800 rounded-lg p-6 w-full max-w-2xl">
145
+ <div class="flex justify-between items-center mb-4">
146
+ <h3 class="text-xl font-bold text-indigo-300">Modifier le membre</h3>
147
+ <button id="closeModalBtn" class="text-gray-400 hover:text-white">
148
+ <i class="fas fa-times"></i>
149
+ </button>
150
+ </div>
151
+ <form id="editMemberForm" class="space-y-4">
152
+ <input type="hidden" id="editMemberId">
153
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
154
+ <div>
155
+ <label class="block text-sm font-medium text-gray-300 mb-1">Pr茅nom</label>
156
+ <input type="text" id="editFirstName" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
157
+ </div>
158
+ <div>
159
+ <label class="block text-sm font-medium text-gray-300 mb-1">Nom</label>
160
+ <input type="text" id="editLastName" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
161
+ </div>
162
+ </div>
163
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
164
+ <div>
165
+ <label class="block text-sm font-medium text-gray-300 mb-1">Date de naissance</label>
166
+ <input type="date" id="editBirthDate" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
167
+ </div>
168
+ <div>
169
+ <label class="block text-sm font-medium text-gray-300 mb-1">Lieu de naissance</label>
170
+ <input type="text" id="editBirthPlace" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
171
+ </div>
172
+ </div>
173
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
174
+ <div>
175
+ <label class="block text-sm font-medium text-gray-300 mb-1">Date de d茅c猫s</label>
176
+ <input type="date" id="editDeathDate" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
177
+ </div>
178
+ <div>
179
+ <label class="block text-sm font-medium text-gray-300 mb-1">Profession</label>
180
+ <input type="text" id="editOccupation" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
181
+ </div>
182
+ </div>
183
+ <div>
184
+ <label class="block text-sm font-medium text-gray-300 mb-1">Biographie</label>
185
+ <textarea id="editBio" rows="3" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
186
+ </div>
187
+ <div>
188
+ <label class="block text-sm font-medium text-gray-300 mb-1">Photo URL</label>
189
+ <input type="text" id="editPhotoUrl" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
190
+ </div>
191
+ <div class="flex justify-end space-x-3 pt-4">
192
+ <button type="button" id="deleteMemberBtn" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-300">
193
+ <i class="fas fa-trash mr-2"></i> Supprimer
194
+ </button>
195
+ <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md transition duration-300">
196
+ <i class="fas fa-save mr-2"></i> Enregistrer
197
+ </button>
198
+ </div>
199
+ </form>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <script>
207
+ // Sample family data
208
+ const familyData = {
209
+ nodes: [
210
+ { id: 1, label: "Jean Dupont\n(1920-2005)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/1.jpg",
211
+ birthDate: "1920-05-15", deathDate: "2005-11-20", birthPlace: "Paris, France", occupation: "Ing茅nieur",
212
+ bio: "Fondateur de l'entreprise familiale. A servi pendant la Seconde Guerre mondiale." },
213
+ { id: 2, label: "Marie Martin\n(1925-2010)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/1.jpg",
214
+ birthDate: "1925-08-22", deathDate: "2010-03-10", birthPlace: "Lyon, France", occupation: "Infirmi猫re",
215
+ bio: "A travaill茅 脿 l'h么pital local pendant 40 ans. Passionn茅e de jardinage." },
216
+ { id: 3, label: "Pierre Dupont\n(1950-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/2.jpg",
217
+ birthDate: "1950-07-30", deathDate: "", birthPlace: "Paris, France", occupation: "M茅decin",
218
+ bio: "Sp茅cialiste en cardiologie. A publi茅 plusieurs articles m茅dicaux." },
219
+ { id: 4, label: "Sophie Lambert\n(1955-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/2.jpg",
220
+ birthDate: "1955-02-14", deathDate: "", birthPlace: "Marseille, France", occupation: "Professeure",
221
+ bio: "Enseigne la litt茅rature fran莽aise 脿 l'universit茅. Auteur de deux romans." },
222
+ { id: 5, label: "Thomas Dupont\n(1980-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/3.jpg",
223
+ birthDate: "1980-11-05", deathDate: "", birthPlace: "Lyon, France", occupation: "Avocat",
224
+ bio: "Sp茅cialis茅 en droit des affaires. Mari茅 avec deux enfants." },
225
+ { id: 6, label: "Julie Bernard\n(1982-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/3.jpg",
226
+ birthDate: "1982-04-18", deathDate: "", birthPlace: "Toulouse, France", occupation: "Architecte",
227
+ bio: "A con莽u plusieurs b芒timents prim茅s. Passionn茅e d'art moderne." },
228
+ { id: 7, label: "Lucas Dupont\n(2010-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/4.jpg",
229
+ birthDate: "2010-09-12", deathDate: "", birthPlace: "Lyon, France", occupation: "脡tudiant",
230
+ bio: "脡l猫ve au lyc茅e. Passionn茅 de football et de programmation." },
231
+ { id: 8, label: "Emma Dupont\n(2012-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/4.jpg",
232
+ birthDate: "2012-03-25", deathDate: "", birthPlace: "Lyon, France", occupation: "脡tudiante",
233
+ bio: "Aime la danse et la musique. Souhaite devenir v茅t茅rinaire." },
234
+ { id: 9, label: "Claire Dupont\n(1952-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/5.jpg",
235
+ birthDate: "1952-12-03", deathDate: "", birthPlace: "Paris, France", occupation: "Artiste",
236
+ bio: "Peintre renomm茅e. Expositions internationales." },
237
+ { id: 10, label: "Jacques Leroy\n(1948-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/5.jpg",
238
+ birthDate: "1948-06-19", deathDate: "", birthPlace: "Nice, France", occupation: "Journaliste",
239
+ bio: "Correspondant 脿 l'茅tranger pendant 20 ans. Maintenant 脿 la retraite." }
240
+ ],
241
+ edges: [
242
+ { from: 1, to: 2, label: "mari茅", dashes: false, color: { color: "#818cf8" } },
243
+ { from: 1, to: 3, label: "p猫re" },
244
+ { from: 2, to: 3, label: "m猫re" },
245
+ { from: 3, to: 4, label: "mari茅", dashes: false, color: { color: "#818cf8" } },
246
+ { from: 3, to: 5, label: "p猫re" },
247
+ { from: 4, to: 5, label: "m猫re" },
248
+ { from: 5, to: 6, label: "mari茅", dashes: false, color: { color: "#818cf8" } },
249
+ { from: 5, to: 7, label: "p猫re" },
250
+ { from: 6, to: 7, label: "m猫re" },
251
+ { from: 5, to: 8, label: "p猫re" },
252
+ { from: 6, to: 8, label: "m猫re" },
253
+ { from: 1, to: 9, label: "p猫re" },
254
+ { from: 2, to: 9, label: "m猫re" },
255
+ { from: 9, to: 10, label: "mari茅", dashes: false, color: { color: "#818cf8" } }
256
+ ]
257
+ };
258
+
259
+ // Initialize the network
260
+ let network = null;
261
+ let selectedNodeId = null;
262
+ let allNodes = [...familyData.nodes];
263
+ let allEdges = [...familyData.edges];
264
+
265
+ function initFamilyTree() {
266
+ const container = document.getElementById('familyTree');
267
+ const options = {
268
+ nodes: {
269
+ borderWidth: 2,
270
+ size: 40,
271
+ color: {
272
+ border: '#4f46e5',
273
+ background: '#1f2937',
274
+ highlight: {
275
+ border: '#f59e0b',
276
+ background: '#1f2937'
277
+ }
278
+ },
279
+ font: {
280
+ color: '#e5e7eb',
281
+ size: 14,
282
+ face: 'sans-serif',
283
+ strokeWidth: 0,
284
+ align: 'center'
285
+ },
286
+ shadow: {
287
+ enabled: true,
288
+ color: 'rgba(0,0,0,0.5)',
289
+ size: 10,
290
+ x: 5,
291
+ y: 5
292
+ }
293
+ },
294
+ edges: {
295
+ width: 2,
296
+ color: {
297
+ color: '#6b7280',
298
+ highlight: '#f59e0b',
299
+ hover: '#f59e0b'
300
+ },
301
+ smooth: {
302
+ type: 'cubicBezier',
303
+ forceDirection: 'vertical'
304
+ },
305
+ font: {
306
+ color: '#9ca3af',
307
+ size: 12,
308
+ strokeWidth: 0,
309
+ align: 'middle'
310
+ },
311
+ arrows: {
312
+ to: false,
313
+ from: false
314
+ },
315
+ selectionWidth: 3
316
+ },
317
+ layout: {
318
+ hierarchical: {
319
+ direction: 'UD',
320
+ sortMethod: 'directed',
321
+ nodeSpacing: 150,
322
+ levelSeparation: 150
323
+ }
324
+ },
325
+ physics: {
326
+ hierarchicalRepulsion: {
327
+ nodeDistance: 200
328
+ },
329
+ solver: 'hierarchicalRepulsion'
330
+ },
331
+ interaction: {
332
+ hover: true,
333
+ multiselect: false,
334
+ navigationButtons: true,
335
+ keyboard: true
336
+ }
337
+ };
338
+
339
+ // Create the network
340
+ network = new vis.Network(container, { nodes: allNodes, edges: allEdges }, options);
341
+
342
+ // Event listeners
343
+ network.on("selectNode", function(params) {
344
+ selectedNodeId = params.nodes[0];
345
+ showMemberDetails(selectedNodeId);
346
+ });
347
+
348
+ network.on("deselectNode", function() {
349
+ selectedNodeId = null;
350
+ document.getElementById('memberDetails').style.display = 'none';
351
+ });
352
+
353
+ // Populate existing members dropdown
354
+ updateExistingMembersDropdown();
355
+ updateStats();
356
+ }
357
+
358
+ function showMemberDetails(nodeId) {
359
+ const member = allNodes.find(n => n.id === nodeId);
360
+ if (!member) return;
361
+
362
+ document.getElementById('memberName').textContent = member.label.split('\n')[0];
363
+ document.getElementById('memberPhoto').src = member.image;
364
+ document.getElementById('memberBirthDate').textContent = member.birthDate || 'Inconnue';
365
+ document.getElementById('memberBirthPlace').textContent = member.birthPlace || 'Inconnu';
366
+ document.getElementById('memberDeathDate').textContent = member.deathDate || '-';
367
+ document.getElementById('memberOccupation').textContent = member.occupation || 'Inconnue';
368
+ document.getElementById('memberBio').textContent = member.bio || 'Aucune information biographique disponible.';
369
+
370
+ // Find relations
371
+ const relationsContainer = document.getElementById('memberRelations');
372
+ relationsContainer.innerHTML = '';
373
+
374
+ // Find spouses
375
+ const spouseEdges = allEdges.filter(e =>
376
+ (e.from === nodeId || e.to === nodeId) && e.label === 'mari茅'
377
+ );
378
+
379
+ spouseEdges.forEach(edge => {
380
+ const spouseId = edge.from === nodeId ? edge.to : edge.from;
381
+ const spouse = allNodes.find(n => n.id === spouseId);
382
+ if (spouse) {
383
+ const relationElement = document.createElement('div');
384
+ relationElement.className = 'bg-gray-700 px-3 py-1 rounded-full text-sm flex items-center';
385
+ relationElement.innerHTML = `
386
+ <span class="text-indigo-300 mr-1">Conjoint:</span>
387
+ <span>${spouse.label.split('\n')[0]}</span>
388
+ `;
389
+ relationsContainer.appendChild(relationElement);
390
+ }
391
+ });
392
+
393
+ // Find parents
394
+ const parentEdges = allEdges.filter(e =>
395
+ e.to === nodeId && (e.label === 'p猫re' || e.label === 'm猫re')
396
+ );
397
+
398
+ parentEdges.forEach(edge => {
399
+ const parent = allNodes.find(n => n.id === edge.from);
400
+ if (parent) {
401
+ const relationType = edge.label === 'p猫re' ? 'P猫re' : 'M猫re';
402
+ const relationElement = document.createElement('div');
403
+ relationElement.className = 'bg-gray-700 px-3 py-1 rounded-full text-sm flex items-center';
404
+ relationElement.innerHTML = `
405
+ <span class="text-indigo-300 mr-1">${relationType}:</span>
406
+ <span>${parent.label.split('\n')[0]}</span>
407
+ `;
408
+ relationsContainer.appendChild(relationElement);
409
+ }
410
+ });
411
+
412
+ // Find children
413
+ const childEdges = allEdges.filter(e =>
414
+ e.from === nodeId && (e.label === 'p猫re' || e.label === 'm猫re')
415
+ );
416
+
417
+ childEdges.forEach(edge => {
418
+ const child = allNodes.find(n => n.id === edge.to);
419
+ if (child) {
420
+ const relationElement = document.createElement('div');
421
+ relationElement.className = 'bg-gray-700 px-3 py-1 rounded-full text-sm flex items-center';
422
+ relationElement.innerHTML = `
423
+ <span class="text-indigo-300 mr-1">Enfant:</span>
424
+ <span>${child.label.split('\n')[0]}</span>
425
+ `;
426
+ relationsContainer.appendChild(relationElement);
427
+ }
428
+ });
429
+
430
+ // Find siblings
431
+ const siblingEdges = allEdges.filter(e =>
432
+ (e.from === nodeId || e.to === nodeId) && e.label === 'fr猫re/s艙ur'
433
+ );
434
+
435
+ siblingEdges.forEach(edge => {
436
+ const siblingId = edge.from === nodeId ? edge.to : edge.from;
437
+ const sibling = allNodes.find(n => n.id === siblingId);
438
+ if (sibling) {
439
+ const relationElement = document.createElement('div');
440
+ relationElement.className = 'bg-gray-700 px-3 py-1 rounded-full text-sm flex items-center';
441
+ relationElement.innerHTML = `
442
+ <span class="text-indigo-300 mr-1">Fr猫re/S艙ur:</span>
443
+ <span>${sibling.label.split('\n')[0]}</span>
444
+ `;
445
+ relationsContainer.appendChild(relationElement);
446
+ }
447
+ });
448
+
449
+ document.getElementById('memberDetails').style.display = 'block';
450
+ }
451
+
452
+ function updateExistingMembersDropdown() {
453
+ const dropdown = document.getElementById('existingMember');
454
+ dropdown.innerHTML = '<option value="">S茅lectionner un membre</option>';
455
+
456
+ allNodes.forEach(node => {
457
+ const option = document.createElement('option');
458
+ option.value = node.id;
459
+ option.textContent = node.label.split('\n')[0];
460
+ dropdown.appendChild(option);
461
+ });
462
+ }
463
+
464
+ function updateStats() {
465
+ document.getElementById('totalMembers').textContent = allNodes.length;
466
+
467
+ // Calculate generations (simplified)
468
+ let maxGeneration = 1;
469
+ allNodes.forEach(node => {
470
+ const generation = calculateGeneration(node.id);
471
+ if (generation > maxGeneration) {
472
+ maxGeneration = generation;
473
+ }
474
+ });
475
+
476
+ document.getElementById('generations').textContent = maxGeneration;
477
+ }
478
+
479
+ function calculateGeneration(nodeId, currentGen = 1) {
480
+ // Find parents
481
+ const parentEdges = allEdges.filter(e =>
482
+ e.to === nodeId && (e.label === 'p猫re' || e.label === 'm猫re')
483
+ );
484
+
485
+ if (parentEdges.length === 0) {
486
+ return currentGen;
487
+ }
488
+
489
+ let maxParentGen = 0;
490
+ parentEdges.forEach(edge => {
491
+ const parentGen = calculateGeneration(edge.from, currentGen + 1);
492
+ if (parentGen > maxParentGen) {
493
+ maxParentGen = parentGen;
494
+ }
495
+ });
496
+
497
+ return maxParentGen;
498
+ }
499
+
500
+ function searchMember() {
501
+ const searchTerm = document.getElementById('searchInput').value.toLowerCase();
502
+ if (!searchTerm) return;
503
+
504
+ // Reset all nodes
505
+ const updatedNodes = allNodes.map(node => {
506
+ const newNode = {...node};
507
+ newNode.color = {
508
+ border: '#4f46e5',
509
+ background: '#1f2937'
510
+ };
511
+ newNode.font = {
512
+ color: '#e5e7eb'
513
+ };
514
+ return newNode;
515
+ });
516
+
517
+ // Find matching nodes
518
+ const matchingNodes = allNodes.filter(node =>
519
+ node.label.toLowerCase().includes(searchTerm)
520
+ );
521
+
522
+ if (matchingNodes.length > 0) {
523
+ // Highlight matching nodes
524
+ matchingNodes.forEach(match => {
525
+ const nodeIndex = updatedNodes.findIndex(n => n.id === match.id);
526
+ if (nodeIndex !== -1) {
527
+ updatedNodes[nodeIndex].color = {
528
+ border: '#f59e0b',
529
+ background: '#1f2937'
530
+ };
531
+ updatedNodes[nodeIndex].font = {
532
+ color: '#f59e0b'
533
+ };
534
+ }
535
+ });
536
+
537
+ // Focus on first match
538
+ network.selectNodes([matchingNodes[0].id]);
539
+ network.focus(matchingNodes[0].id, {
540
+ animation: {
541
+ duration: 1000,
542
+ easingFunction: 'easeInOutQuad'
543
+ }
544
+ });
545
+ }
546
+
547
+ network.setData({ nodes: updatedNodes, edges: allEdges });
548
+ }
549
+
550
+ function addMember() {
551
+ const relationType = document.getElementById('relationType').value;
552
+ const existingMemberId = parseInt(document.getElementById('existingMember').value);
553
+
554
+ if (!existingMemberId) {
555
+ alert('Veuillez s茅lectionner un membre existant');
556
+ return;
557
+ }
558
+
559
+ // Generate new member data
560
+ const newId = allNodes.length > 0 ? Math.max(...allNodes.map(n => n.id)) + 1 : 1;
561
+ const newMember = {
562
+ id: newId,
563
+ label: "Nouveau Membre\n()",
564
+ shape: "circularImage",
565
+ image: "https://via.placeholder.com/300x300?text=Nouveau",
566
+ birthDate: "",
567
+ deathDate: "",
568
+ birthPlace: "",
569
+ occupation: "",
570
+ bio: ""
571
+ };
572
+
573
+ // Add the new member
574
+ allNodes.push(newMember);
575
+
576
+ // Add the relationship
577
+ if (relationType === 'parent') {
578
+ allEdges.push({ from: newId, to: existingMemberId, label: 'p猫re' });
579
+ } else if (relationType === 'spouse') {
580
+ allEdges.push({ from: newId, to: existingMemberId, label: 'mari茅', dashes: false, color: { color: "#818cf8" } });
581
+ } else if (relationType === 'sibling') {
582
+ allEdges.push({ from: newId, to: existingMemberId, label: 'fr猫re/s艙ur' });
583
+ } else if (relationType === 'child') {
584
+ allEdges.push({ from: existingMemberId, to: newId, label: 'p猫re' });
585
+ }
586
+
587
+ // Update the visualization
588
+ network.setData({ nodes: allNodes, edges: allEdges });
589
+
590
+ // Update dropdown and stats
591
+ updateExistingMembersDropdown();
592
+ updateStats();
593
+
594
+ // Select and show the new member
595
+ network.selectNodes([newId]);
596
+ showMemberDetails(newId);
597
+
598
+ // Open edit modal for the new member
599
+ openEditModal(newId);
600
+ }
601
+
602
+ function openEditModal(nodeId) {
603
+ const member = allNodes.find(n => n.id === nodeId);
604
+ if (!member) return;
605
+
606
+ document.getElementById('editModal').classList.remove('hidden');
607
+ document.getElementById('editMemberId').value = nodeId;
608
+
609
+ const nameParts = member.label.split('\n')[0].split(' ');
610
+ document.getElementById('editFirstName').value = nameParts[0] || '';
611
+ document.getElementById('editLastName').value = nameParts.slice(1).join(' ') || '';
612
+ document.getElementById('editBirthDate').value = member.birthDate || '';
613
+ document.getElementById('editBirthPlace').value = member.birthPlace || '';
614
+ document.getElementById('editDeathDate').value = member.deathDate || '';
615
+ document.getElementById('editOccupation').value = member.occupation || '';
616
+ document.getElementById('editBio').value = member.bio || '';
617
+ document.getElementById('editPhotoUrl').value = member.image || '';
618
+ }
619
+
620
+ function closeEditModal() {
621
+ document.getElementById('editModal').classList.add('hidden');
622
+ }
623
+
624
+ function saveMemberChanges(e) {
625
+ e.preventDefault();
626
+
627
+ const nodeId = parseInt(document.getElementById('editMemberId').value);
628
+ const memberIndex = allNodes.findIndex(n => n.id === nodeId);
629
+ if (memberIndex === -1) return;
630
+
631
+ const firstName = document.getElementById('editFirstName').value.trim();
632
+ const lastName = document.getElementById('editLastName').value.trim();
633
+ const birthDate = document.getElementById('editBirthDate').value;
634
+ const birthPlace = document.getElementById('editBirthPlace').value.trim();
635
+ const deathDate = document.getElementById('editDeathDate').value;
636
+ const occupation = document.getElementById('editOccupation').value.trim();
637
+ const bio = document.getElementById('editBio').value.trim();
638
+ const photoUrl = document.getElementById('editPhotoUrl').value.trim();
639
+
640
+ // Update member data
641
+ const updatedMember = {
642
+ ...allNodes[memberIndex],
643
+ label: `${firstName} ${lastName}\n(${birthDate ? birthDate.split('-')[0] : ''}${deathDate ? '-' + deathDate.split('-')[0] : ''})`,
644
+ birthDate: birthDate || '',
645
+ birthPlace: birthPlace || '',
646
+ deathDate: deathDate || '',
647
+ occupation: occupation || '',
648
+ bio: bio || '',
649
+ image: photoUrl || 'https://via.placeholder.com/300x300?text=Photo'
650
+ };
651
+
652
+ allNodes[memberIndex] = updatedMember;
653
+
654
+ // Update the visualization
655
+ network.setData({ nodes: allNodes, edges: allEdges });
656
+
657
+ // Update dropdown and stats
658
+ updateExistingMembersDropdown();
659
+ updateStats();
660
+
661
+ // If this was the selected member, update the details view
662
+ if (selectedNodeId === nodeId) {
663
+ showMemberDetails(nodeId);
664
+ }
665
+
666
+ closeEditModal();
667
+ }
668
+
669
+ function deleteMember() {
670
+ if (!confirm('脢tes-vous s没r de vouloir supprimer ce membre?')) return;
671
+
672
+ const nodeId = parseInt(document.getElementById('editMemberId').value);
673
+
674
+ // Remove the node and all connected edges
675
+ allNodes = allNodes.filter(n => n.id !== nodeId);
676
+ allEdges = allEdges.filter(e => e.from !== nodeId && e.to !== nodeId);
677
+
678
+ // Update the visualization
679
+ network.setData({ nodes: allNodes, edges: allEdges });
680
+
681
+ // Update dropdown and stats
682
+ updateExistingMembersDropdown();
683
+ updateStats();
684
+
685
+ // Hide details if showing the deleted member
686
+ if (selectedNodeId === nodeId) {
687
+ document.getElementById('memberDetails').style.display = 'none';
688
+ selectedNodeId = null;
689
+ }
690
+
691
+ closeEditModal();
692
+ }
693
+
694
+ // Initialize when DOM is loaded
695
+ document.addEventListener('DOMContentLoaded', function() {
696
+ initFamilyTree();
697
+
698
+ // Event listeners
699
+ document.getElementById('searchBtn').addEventListener('click', searchMember);
700
+ document.getElementById('searchInput').addEventListener('keypress', function(e) {
701
+ if (e.key === 'Enter') searchMember();
702
+ });
703
+
704
+ document.getElementById('addMemberBtn').addEventListener('click', addMember);
705
+ document.getElementById('editMemberBtn').addEventListener('click', function() {
706
+ if (selectedNodeId) openEditModal(selectedNodeId);
707
+ });
708
+
709
+ document.getElementById('closeModalBtn').addEventListener('click', closeEditModal);
710
+ document.getElementById('editMemberForm').addEventListener('submit', saveMemberChanges);
711
+ document.getElementById('deleteMemberBtn').addEventListener('click', deleteMember);
712
+ });
713
+ </script>
714
+ <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=iamTheFoxCoder/mon-espace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
715
+ </html>