Hugging Face's logo

Spaces:
ZoroaStrella
/
vampire-fr
Running

App Files Community
ZoroaStrella commited on
Commit
2be4d28
·
verified ·
1 Parent(s): 66aa518

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +927 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vampire Fr
3
- emoji: 📊
4
- colorFrom: purple
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: vampire-fr
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,927 @@
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>Vampire La Mascarade V5 - Création de Personnages Humains</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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'vampire-red': '#8B0000',
15
+ 'vampire-dark': '#0F0F0F',
16
+ 'vampire-darker': '#050505',
17
+ 'vampire-accent': '#B22222',
18
+ 'vampire-text': '#E0E0E0',
19
+ },
20
+ fontFamily: {
21
+ 'gothic': ['Cinzel', 'serif'],
22
+ 'body': ['Crimson Text', 'serif'],
23
+ },
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:wght@400;600;700&display=swap');
30
+
31
+ body {
32
+ font-family: 'Crimson Text', serif;
33
+ background-color: #050505;
34
+ color: #E0E0E0;
35
+ background-image:
36
+ radial-gradient(circle at 10% 20%, rgba(139, 0, 0, 0.1) 0%, transparent 20%),
37
+ radial-gradient(circle at 90% 80%, rgba(178, 34, 34, 0.1) 0%, transparent 20%);
38
+ }
39
+
40
+ .gothic {
41
+ font-family: 'Cinzel', serif;
42
+ }
43
+
44
+ .blood-drop {
45
+ position: relative;
46
+ }
47
+
48
+ .blood-drop::after {
49
+ content: '';
50
+ position: absolute;
51
+ bottom: -8px;
52
+ left: 0;
53
+ width: 100%;
54
+ height: 2px;
55
+ background: linear-gradient(90deg, #8B0000, transparent);
56
+ }
57
+
58
+ .panel-border {
59
+ border: 1px solid rgba(139, 0, 0, 0.5);
60
+ box-shadow: 0 0 15px rgba(139, 0, 0, 0.3);
61
+ }
62
+
63
+ .input-glow:focus {
64
+ box-shadow: 0 0 10px rgba(139, 0, 0, 0.7);
65
+ border-color: #B22222;
66
+ }
67
+
68
+ .progress-bar {
69
+ height: 6px;
70
+ background: linear-gradient(90deg, #8B0000 0%, #B22222 100%);
71
+ }
72
+
73
+ .tab-active {
74
+ border-bottom: 3px solid #B22222;
75
+ color: #B22222;
76
+ }
77
+
78
+ .floating {
79
+ animation: floating 3s ease-in-out infinite;
80
+ }
81
+
82
+ @keyframes floating {
83
+ 0% { transform: translateY(0px); }
84
+ 50% { transform: translateY(-10px); }
85
+ 100% { transform: translateY(0px); }
86
+ }
87
+
88
+ .checkbox-blood input[type="checkbox"] {
89
+ appearance: none;
90
+ width: 20px;
91
+ height: 20px;
92
+ border: 2px solid #8B0000;
93
+ border-radius: 3px;
94
+ background-color: transparent;
95
+ position: relative;
96
+ cursor: pointer;
97
+ }
98
+
99
+ .checkbox-blood input[type="checkbox"]:checked {
100
+ background-color: #8B0000;
101
+ }
102
+
103
+ .checkbox-blood input[type="checkbox"]:checked::after {
104
+ content: '✓';
105
+ position: absolute;
106
+ color: white;
107
+ font-size: 14px;
108
+ top: 50%;
109
+ left: 50%;
110
+ transform: translate(-50%, -50%);
111
+ }
112
+
113
+ .radio-blood input[type="radio"] {
114
+ appearance: none;
115
+ width: 18px;
116
+ height: 18px;
117
+ border: 2px solid #8B0000;
118
+ border-radius: 50%;
119
+ background-color: transparent;
120
+ position: relative;
121
+ cursor: pointer;
122
+ }
123
+
124
+ .radio-blood input[type="radio"]:checked {
125
+ background-color: #8B0000;
126
+ }
127
+
128
+ .dropdown-blood {
129
+ background-color: #0F0F0F;
130
+ border: 1px solid #8B0000;
131
+ color: #E0E0E0;
132
+ }
133
+
134
+ .dropdown-blood:focus {
135
+ outline: none;
136
+ box-shadow: 0 0 10px rgba(139, 0, 0, 0.7);
137
+ }
138
+ </style>
139
+ </head>
140
+ <body>
141
+ <!-- Header -->
142
+ <header class="bg-vampire-darker border-b border-vampire-red">
143
+ <div class="container mx-auto px-4 py-6">
144
+ <div class="flex justify-between items-center">
145
+ <div class="flex items-center space-x-4">
146
+ <div class="w-12 h-12 rounded-full bg-vampire-red flex items-center justify-center">
147
+ <i class="fas fa-moon text-2xl text-vampire-dark"></i>
148
+ </div>
149
+ <h1 class="gothic text-3xl font-bold">VAMPIRE LA MASQUARADE V5</h1>
150
+ </div>
151
+ <nav class="hidden md:flex space-x-8">
152
+ <a href="#" class="gothic hover:text-vampire-accent transition">RÈGLES</a>
153
+ <a href="#" class="gothic hover:text-vampire-accent transition">PERSONNAGES</a>
154
+ <a href="#" class="gothic hover:text-vampire-accent transition">CHRONIQUES</a>
155
+ <a href="#" class="gothic hover:text-vampire-accent transition">RESSOURCES</a>
156
+ </nav>
157
+ <button class="md:hidden text-vampire-red">
158
+ <i class="fas fa-bars text-2xl"></i>
159
+ </button>
160
+ </div>
161
+ </div>
162
+ </header>
163
+
164
+ <!-- Main Content -->
165
+ <main class="container mx-auto px-4 py-8">
166
+ <!-- Character Creation Progress -->
167
+ <div class="mb-12">
168
+ <div class="flex justify-between mb-2 gothic text-sm">
169
+ <span class="text-vampire-accent">DÉBUT</span>
170
+ <span>COMPLÉTION: <span id="completion">0</span>%</span>
171
+ </div>
172
+ <div class="progress-bar w-full rounded-full"></div>
173
+ </div>
174
+
175
+ <!-- Character Creation Tabs -->
176
+ <div class="flex overflow-x-auto mb-8 border-b border-vampire-red">
177
+ <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="basic">INFORMATIONS DE BASE</button>
178
+ <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="attributes">ATTRIBUTS</button>
179
+ <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="skills">COMPÉTENCES</button>
180
+ <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="advantages">AVANTAGES</button>
181
+ <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="background">HISTOIRE</button>
182
+ </div>
183
+
184
+ <!-- Tab Content -->
185
+ <div class="bg-vampire-dark panel-border rounded-lg p-6 mb-8 min-h-[500px]">
186
+ <!-- Basic Info Tab -->
187
+ <div id="basic-tab" class="tab-content">
188
+ <h2 class="gothic text-2xl mb-6 blood-drop">INFORMATIONS DE BASE</h2>
189
+ <div class="grid md:grid-cols-2 gap-8">
190
+ <div>
191
+ <div class="mb-6">
192
+ <label class="block text-vampire-red mb-2 gothic">NOM DU PERSONNAGE</label>
193
+ <input type="text" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none" placeholder="Entrez le nom du personnage">
194
+ </div>
195
+ <div class="mb-6">
196
+ <label class="block text-vampire-red mb-2 gothic">PRÉNOM</label>
197
+ <input type="text" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none" placeholder="Entrez le prénom">
198
+ </div>
199
+ <div class="mb-6">
200
+ <label class="block text-vampire-red mb-2 gothic">ÂGE</label>
201
+ <input type="number" min="18" max="120" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none" placeholder="Entrez l'âge" value="25">
202
+ </div>
203
+ <div class="mb-6">
204
+ <label class="block text-vampire-red mb-2 gothic">GENRE</label>
205
+ <div class="flex space-x-4 radio-blood">
206
+ <label class="flex items-center">
207
+ <input type="radio" name="gender" class="mr-2" checked>
208
+ <span>Masculin</span>
209
+ </label>
210
+ <label class="flex items-center">
211
+ <input type="radio" name="gender" class="mr-2">
212
+ <span>Féminin</span>
213
+ </label>
214
+ <label class="flex items-center">
215
+ <input type="radio" name="gender" class="mr-2">
216
+ <span>Autre</span>
217
+ </label>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ <div>
222
+ <div class="mb-6">
223
+ <label class="block text-vampire-red mb-2 gothic">CONCEPT</label>
224
+ <select class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none dropdown-blood">
225
+ <option value="">Sélectionnez un concept</option>
226
+ <option value="journalist">Journaliste d'investigation</option>
227
+ <option value="detective">Détective privé</option>
228
+ <option value="doctor">Médecin légiste</option>
229
+ <option value="priest">Prêtre/Religieux</option>
230
+ <option value="artist">Artiste maudit</option>
231
+ <option value="criminal">Criminel</option>
232
+ <option value="cop">Officier de police</option>
233
+ <option value="occultist">Occultiste</option>
234
+ <option value="custom">Personnalisé</option>
235
+ </select>
236
+ <input type="text" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none mt-2 hidden" placeholder="Entrez votre concept" id="custom-concept">
237
+ </div>
238
+ <div class="mb-6">
239
+ <label class="block text-vampire-red mb-2 gothic">CLAN ASSOCIÉ (optionnel)</label>
240
+ <select class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none dropdown-blood">
241
+ <option value="">Aucun</option>
242
+ <option value="brujah">Brujah</option>
243
+ <option value="gangrel">Gangrel</option>
244
+ <option value="malkavian">Malkavian</option>
245
+ <option value="nosferatu">Nosferatu</option>
246
+ <option value="toreador">Toreador</option>
247
+ <option value="tremere">Tremere</option>
248
+ <option value="ventrue">Ventrue</option>
249
+ <option value="thin-blood">Sang-Dilue</option>
250
+ </select>
251
+ </div>
252
+ <div class="mb-6">
253
+ <label class="block text-vampire-red mb-2 gothic">VILLE</label>
254
+ <select class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none dropdown-blood">
255
+ <option value="paris">Paris</option>
256
+ <option value="lyon">Lyon</option>
257
+ <option value="marseille">Marseille</option>
258
+ <option value="london">Londres</option>
259
+ <option value="berlin">Berlin</option>
260
+ <option value="newyork">New York</option>
261
+ <option value="losangeles">Los Angeles</option>
262
+ <option value="custom">Autre</option>
263
+ </select>
264
+ <input type="text" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none mt-2 hidden" placeholder="Entrez votre ville" id="custom-city">
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Attributes Tab -->
271
+ <div id="attributes-tab" class="tab-content hidden">
272
+ <h2 class="gothic text-2xl mb-6 blood-drop">ATTRIBUTS</h2>
273
+ <div class="mb-8">
274
+ <div class="flex items-center mb-4">
275
+ <div class="w-8 h-8 rounded-full bg-vampire-accent flex items-center justify-center mr-4">
276
+ <span class="gothic" id="attribute-points">5</span>
277
+ </div>
278
+ <span>Points d'attributs disponibles</span>
279
+ </div>
280
+
281
+ <div class="grid md:grid-cols-3 gap-6">
282
+ <!-- Physical Attributes -->
283
+ <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6">
284
+ <h3 class="gothic text-xl mb-4 text-center">PHYSIQUE</h3>
285
+ <div class="space-y-6">
286
+ <div class="flex justify-between items-center">
287
+ <span>Force</span>
288
+ <div class="flex items-center">
289
+ <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
290
+ <span class="attribute-value mx-2 gothic">2</span>
291
+ <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
292
+ </div>
293
+ </div>
294
+ <div class="flex justify-between items-center">
295
+ <span>Dextérité</span>
296
+ <div class="flex items-center">
297
+ <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
298
+ <span class="attribute-value mx-2 gothic">2</span>
299
+ <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
300
+ </div>
301
+ </div>
302
+ <div class="flex justify-between items-center">
303
+ <span>Vigueur</span>
304
+ <div class="flex items-center">
305
+ <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
306
+ <span class="attribute-value mx-2 gothic">2</span>
307
+ <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Social Attributes -->
314
+ <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6">
315
+ <h3 class="gothic text-xl mb-4 text-center">SOCIAL</h3>
316
+ <div class="space-y-6">
317
+ <div class="flex justify-between items-center">
318
+ <span>Charisme</span>
319
+ <div class="flex items-center">
320
+ <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
321
+ <span class="attribute-value mx-2 gothic">2</span>
322
+ <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
323
+ </div>
324
+ </div>
325
+ <div class="flex justify-between items-center">
326
+ <span>Manipulation</span>
327
+ <div class="flex items-center">
328
+ <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
329
+ <span class="attribute-value mx-2 gothic">2</span>
330
+ <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
331
+ </div>
332
+ </div>
333
+ <div class="flex justify-between items-center">
334
+ <span>Sang-froid</span>
335
+ <div class="flex items-center">
336
+ <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
337
+ <span class="attribute-value mx-2 gothic">2</span>
338
+ <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+
344
+ <!-- Mental Attributes -->
345
+ <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6">
346
+ <h3 class="gothic text-xl mb-4 text-center">MENTAL</h3>
347
+ <div class="space-y-6">
348
+ <div class="flex justify-between items-center">
349
+ <span>Intelligence</span>
350
+ <div class="flex items-center">
351
+ <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
352
+ <span class="attribute-value mx-2 gothic">2</span>
353
+ <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
354
+ </div>
355
+ </div>
356
+ <div class="flex justify-between items-center">
357
+ <span>Astuce</span>
358
+ <div class="flex items-center">
359
+ <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
360
+ <span class="attribute-value mx-2 gothic">2</span>
361
+ <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
362
+ </div>
363
+ </div>
364
+ <div class="flex justify-between items-center">
365
+ <span>Résolution</span>
366
+ <div class="flex items-center">
367
+ <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
368
+ <span class="attribute-value mx-2 gothic">2</span>
369
+ <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Skills Tab -->
379
+ <div id="skills-tab" class="tab-content hidden">
380
+ <h2 class="gothic text-2xl mb-6 blood-drop">COMPÉTENCES</h2>
381
+ <div class="mb-8">
382
+ <div class="flex items-center mb-4">
383
+ <div class="w-8 h-8 rounded-full bg-vampire-accent flex items-center justify-center mr-4">
384
+ <span class="gothic" id="skill-points">11</span>
385
+ </div>
386
+ <span>Points de compétences disponibles</span>
387
+ </div>
388
+
389
+ <div class="grid md:grid-cols-3 gap-6">
390
+ <!-- Physical Skills -->
391
+ <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6">
392
+ <h3 class="gothic text-xl mb-4 text-center">PHYSIQUE</h3>
393
+ <div class="space-y-4">
394
+ <div class="skill-item flex justify-between items-center">
395
+ <span>Armes de mêlée</span>
396
+ <div class="flex items-center">
397
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
398
+ <span class="skill-value mx-2 gothic">0</span>
399
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
400
+ </div>
401
+ </div>
402
+ <div class="skill-item flex justify-between items-center">
403
+ <span>Armes à feu</span>
404
+ <div class="flex items-center">
405
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
406
+ <span class="skill-value mx-2 gothic">0</span>
407
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
408
+ </div>
409
+ </div>
410
+ <div class="skill-item flex justify-between items-center">
411
+ <span>Discrétion</span>
412
+ <div class="flex items-center">
413
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
414
+ <span class="skill-value mx-2 gothic">0</span>
415
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
416
+ </div>
417
+ </div>
418
+ <div class="skill-item flex justify-between items-center">
419
+ <span>Conduite</span>
420
+ <div class="flex items-center">
421
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
422
+ <span class="skill-value mx-2 gothic">0</span>
423
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <!-- Social Skills -->
430
+ <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6">
431
+ <h3 class="gothic text-xl mb-4 text-center">SOCIAL</h3>
432
+ <div class="space-y-4">
433
+ <div class="skill-item flex justify-between items-center">
434
+ <span>Éloquence</span>
435
+ <div class="flex items-center">
436
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
437
+ <span class="skill-value mx-2 gothic">0</span>
438
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
439
+ </div>
440
+ </div>
441
+ <div class="skill-item flex justify-between items-center">
442
+ <span>Intimidation</span>
443
+ <div class="flex items-center">
444
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
445
+ <span class="skill-value mx-2 gothic">0</span>
446
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
447
+ </div>
448
+ </div>
449
+ <div class="skill-item flex justify-between items-center">
450
+ <span>Subterfuge</span>
451
+ <div class="flex items-center">
452
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
453
+ <span class="skill-value mx-2 gothic">0</span>
454
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
455
+ </div>
456
+ </div>
457
+ <div class="skill-item flex justify-between items-center">
458
+ <span>Représentation</span>
459
+ <div class="flex items-center">
460
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
461
+ <span class="skill-value mx-2 gothic">0</span>
462
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Mental Skills -->
469
+ <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6">
470
+ <h3 class="gothic text-xl mb-4 text-center">MENTAL</h3>
471
+ <div class="space-y-4">
472
+ <div class="skill-item flex justify-between items-center">
473
+ <span>Investigation</span>
474
+ <div class="flex items-center">
475
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
476
+ <span class="skill-value mx-2 gothic">0</span>
477
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
478
+ </div>
479
+ </div>
480
+ <div class="skill-item flex justify-between items-center">
481
+ <span>Occultisme</span>
482
+ <div class="flex items-center">
483
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
484
+ <span class="skill-value mx-2 gothic">0</span>
485
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
486
+ </div>
487
+ </div>
488
+ <div class="skill-item flex justify-between items-center">
489
+ <span>Médecine</span>
490
+ <div class="flex items-center">
491
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
492
+ <span class="skill-value mx-2 gothic">0</span>
493
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
494
+ </div>
495
+ </div>
496
+ <div class="skill-item flex justify-between items-center">
497
+ <span>Sciences</span>
498
+ <div class="flex items-center">
499
+ <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
500
+ <span class="skill-value mx-2 gothic">0</span>
501
+ <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Advantages Tab -->
511
+ <div id="advantages-tab" class="tab-content hidden">
512
+ <h2 class="gothic text-2xl mb-6 blood-drop">AVANTAGES</h2>
513
+ <div class="mb-8">
514
+ <div class="flex items-center mb-4">
515
+ <div class="w-8 h-8 rounded-full bg-vampire-accent flex items-center justify-center mr-4">
516
+ <span class="gothic" id="advantage-points">7</span>
517
+ </div>
518
+ <span>Points d'avantages disponibles</span>
519
+ </div>
520
+
521
+ <div class="grid md:grid-cols-2 gap-6">
522
+ <!-- Backgrounds -->
523
+ <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6">
524
+ <h3 class="gothic text-xl mb-4 text-center">HISTORIQUE</h3>
525
+ <div class="space-y-4">
526
+ <div class="advantage-item flex justify-between items-center">
527
+ <div>
528
+ <h4 class="font-medium">Contacts</h4>
529
+ <p class="text-sm text-gray-400">Réseau de connaissances utiles</p>
530
+ </div>
531
+ <div class="flex items-center">
532
+ <button class="advantage-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
533
+ <span class="advantage-value mx-2 gothic">0</span>
534
+ <button class="advantage-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
535
+ </div>
536
+ </div>
537
+ <div class="advantage-item flex justify-between items-center">
538
+ <div>
539
+ <h4 class="font-medium">Ressources</h4>
540
+ <p class="text-sm text-gray-400">Accès à l'argent et aux biens</p>
541
+ </div>
542
+ <div class="flex items-center">
543
+ <button class="advantage-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
544
+ <span class="advantage-value mx-2 gothic">0</span>
545
+ <button class="advantage-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
546
+ </div>
547
+ </div>
548
+ <div class="advantage-item flex justify-between items-center">
549
+ <div>
550
+ <h4 class="font-medium">Alliés</h4>
551
+ <p class="text-sm text-gray-400">Personnes qui vous soutiennent</p>
552
+ </div>
553
+ <div class="flex items-center">
554
+ <button class="advantage-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button>
555
+ <span class="advantage-value mx-2 gothic">0</span>
556
+ <button class="advantage-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+
562
+ <!-- Merits -->
563
+ <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6">
564
+ <h3 class="gothic text-xl mb-4 text-center">QUALITÉS</h3>
565
+ <div class="space-y-4">
566
+ <div class="advantage-item flex justify-between items-center">
567
+ <div>
568
+ <h4 class="font-medium">Sang-froid</h4>
569
+ <p class="text-sm text-gray-400">Résistance au stress et à la peur</p>
570
+ </div>
571
+ <div class="flex items-center checkbox-blood">
572
+ <input type="checkbox" class="mr-2">
573
+ <span>1 point</span>
574
+ </div>
575
+ </div>
576
+ <div class="advantage-item flex justify-between items-center">
577
+ <div>
578
+ <h4 class="font-medium">Sixième sens</h4>
579
+ <p class="text-sm text-gray-400">Pressentiments surnaturels</p>
580
+ </div>
581
+ <div class="flex items-center checkbox-blood">
582
+ <input type="checkbox" class="mr-2">
583
+ <span>2 points</span>
584
+ </div>
585
+ </div>
586
+ <div class="advantage-item flex justify-between items-center">
587
+ <div>
588
+ <h4 class="font-medium">Résistance au surnaturel</h4>
589
+ <p class="text-sm text-gray-400">Défense contre les disciplines</p>
590
+ </div>
591
+ <div class="flex items-center checkbox-blood">
592
+ <input type="checkbox" class="mr-2">
593
+ <span>3 points</span>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <!-- Flaws -->
600
+ <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6 md:col-span-2">
601
+ <h3 class="gothic text-xl mb-4 text-center">DÉFAUTS</h3>
602
+ <div class="grid md:grid-cols-2 gap-4">
603
+ <div class="flex justify-between items-center">
604
+ <div>
605
+ <h4 class="font-medium">Mauvaise réputation</h4>
606
+ <p class="text-sm text-gray-400">Les gens vous méfient de vous</p>
607
+ </div>
608
+ <div class="flex items-center checkbox-blood">
609
+ <input type="checkbox" class="mr-2">
610
+ <span>+1 point</span>
611
+ </div>
612
+ </div>
613
+ <div class="flex justify-between items-center">
614
+ <div>
615
+ <h4 class="font-medium">Addiction</h4>
616
+ <p class="text-sm text-gray-400">Dépendance à une substance</p>
617
+ </div>
618
+ <div class="flex items-center checkbox-blood">
619
+ <input type="checkbox" class="mr-2">
620
+ <span>+2 points</span>
621
+ </div>
622
+ </div>
623
+ <div class="flex justify-between items-center">
624
+ <div>
625
+ <h4 class="font-medium">Maudit</h4>
626
+ <p class="text-sm text-gray-400">Attire l'attention des forces obscures</p>
627
+ </div>
628
+ <div class="flex items-center checkbox-blood">
629
+ <input type="checkbox" class="mr-2">
630
+ <span>+3 points</span>
631
+ </div>
632
+ </div>
633
+ <div class="flex justify-between items-center">
634
+ <div>
635
+ <h4 class="font-medium">Traumatisme</h4>
636
+ <p class="text-sm text-gray-400">Peur ou folie spécifique</p>
637
+ </div>
638
+ <div class="flex items-center checkbox-blood">
639
+ <input type="checkbox" class="mr-2">
640
+ <span>+2 points</span>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+
649
+ <!-- Background Tab -->
650
+ <div id="background-tab" class="tab-content hidden">
651
+ <h2 class="gothic text-2xl mb-6 blood-drop">HISTOIRE DU PERSONNAGE</h2>
652
+ <div class="grid md:grid-cols-2 gap-8">
653
+ <div>
654
+ <div class="mb-6">
655
+ <label class="block text-vampire-red mb-2 gothic">AMBITION</label>
656
+ <textarea class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none h-32" placeholder="Quel est le but ultime de votre personnage ?"></textarea>
657
+ </div>
658
+ <div class="mb-6">
659
+ <label class="block text-vampire-red mb-2 gothic">DÉSIR</label>
660
+ <textarea class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none h-32" placeholder="Qu'est-ce que votre personnage veut à court terme ?"></textarea>
661
+ </div>
662
+ </div>
663
+ <div>
664
+ <div class="mb-6">
665
+ <label class="block text-vampire-red mb-2 gothic">HISTORIQUE</label>
666
+ <textarea class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none h-32" placeholder="Décrivez le passé de votre personnage..."></textarea>
667
+ </div>
668
+ <div class="mb-6">
669
+ <label class="block text-vampire-red mb-2 gothic">RELATIONS AVEC LES VAMPIRES</label>
670
+ <textarea class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none h-32" placeholder="Comment votre personnage est-il entré en contact avec le monde des vampires ?"></textarea>
671
+ </div>
672
+ </div>
673
+ </div>
674
+
675
+ <div class="mt-8 bg-vampire-darker border border-vampire-red rounded-lg p-6">
676
+ <h3 class="gothic text-xl mb-4 text-center">PORTRAIT DU PERSONNAGE</h3>
677
+ <div class="flex flex-col items-center">
678
+ <div class="w-48 h-48 bg-vampire-darker border-2 border-vampire-red rounded-full mb-4 flex items-center justify-center">
679
+ <i class="fas fa-user text-6xl text-gray-500"></i>
680
+ </div>
681
+ <button class="px-6 py-2 bg-vampire-red text-vampire-dark rounded gothic hover:bg-vampire-accent transition">TÉLÉCHARGER UNE IMAGE</button>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+
687
+ <!-- Navigation Buttons -->
688
+ <div class="flex justify-between">
689
+ <button class="nav-btn px-6 py-3 bg-vampire-dark border border-vampire-red rounded gothic hover:bg-vampire-red hover:text-vampire-dark transition" data-direction="prev" disabled>
690
+ <i class="fas fa-arrow-left mr-2"></i> PRÉCÉDENT
691
+ </button>
692
+ <button class="nav-btn px-6 py-3 bg-vampire-red text-vampire-dark rounded gothic hover:bg-vampire-accent transition" data-direction="next">
693
+ SUIVANT <i class="fas fa-arrow-right ml-2"></i>
694
+ </button>
695
+ </div>
696
+ </main>
697
+
698
+ <!-- Character Sheet Download -->
699
+ <div class="fixed bottom-0 left-0 right-0 bg-vampire-darker border-t border-vampire-red py-4 px-6 flex justify-center">
700
+ <button id="download-sheet" class="px-8 py-3 bg-vampire-red text-vampire-dark rounded-lg gothic text-lg hover:bg-vampire-accent transition transform hover:scale-105">
701
+ <i class="fas fa-file-pdf mr-2"></i> TÉLÉCHARGER LA FICHE DE PERSONNAGE
702
+ </button>
703
+ </div>
704
+
705
+ <!-- Footer -->
706
+ <footer class="bg-vampire-darker border-t border-vampire-red py-8 mt-16">
707
+ <div class="container mx-auto px-4">
708
+ <div class="flex flex-col md:flex-row justify-between items-center">
709
+ <div class="mb-4 md:mb-0">
710
+ <h2 class="gothic text-xl mb-2">VAMPIRE LA MASQUARADE V5</h2>
711
+ <p class="text-gray-400 text-sm">Un jeu de rôle gothique-punk</p>
712
+ </div>
713
+ <div class="flex space-x-6">
714
+ <a href="#" class="text-gray-400 hover:text-vampire-accent transition"><i class="fab fa-discord"></i></a>
715
+ <a href="#" class="text-gray-400 hover:text-vampire-accent transition"><i class="fab fa-twitter"></i></a>
716
+ <a href="#" class="text-gray-400 hover:text-vampire-accent transition"><i class="fab fa-youtube"></i></a>
717
+ </div>
718
+ </div>
719
+ <div class="border-t border-vampire-red mt-8 pt-8 text-center text-gray-400 text-sm">
720
+ <p>Ceci est un outil non-officiel pour Vampire: La Mascarade V5. Tous droits réservés à White Wolf.</p>
721
+ </div>
722
+ </div>
723
+ </footer>
724
+
725
+ <script>
726
+ // Tab Navigation
727
+ const tabs = document.querySelectorAll('.tab-btn');
728
+ const tabContents = document.querySelectorAll('.tab-content');
729
+ let currentTab = 0;
730
+
731
+ tabs.forEach((tab, index) => {
732
+ tab.addEventListener('click', () => {
733
+ // Remove active class from all tabs
734
+ tabs.forEach(t => t.classList.remove('tab-active', 'text-vampire-accent'));
735
+ tabContents.forEach(tc => tc.classList.add('hidden'));
736
+
737
+ // Add active class to current tab
738
+ tab.classList.add('tab-active', 'text-vampire-accent');
739
+ document.getElementById(`${tab.dataset.tab}-tab`).classList.remove('hidden');
740
+ currentTab = index;
741
+ updateProgress();
742
+ updateNavButtons();
743
+ });
744
+ });
745
+
746
+ // Set first tab as active by default
747
+ tabs[0].classList.add('tab-active', 'text-vampire-accent');
748
+
749
+ // Navigation buttons
750
+ const navButtons = document.querySelectorAll('.nav-btn');
751
+
752
+ navButtons.forEach(button => {
753
+ button.addEventListener('click', () => {
754
+ const direction = button.dataset.direction;
755
+
756
+ if (direction === 'next' && currentTab < tabs.length - 1) {
757
+ tabs[currentTab + 1].click();
758
+ } else if (direction === 'prev' && currentTab > 0) {
759
+ tabs[currentTab - 1].click();
760
+ }
761
+
762
+ updateNavButtons();
763
+ });
764
+ });
765
+
766
+ function updateNavButtons() {
767
+ const prevButton = document.querySelector('[data-direction="prev"]');
768
+ const nextButton = document.querySelector('[data-direction="next"]');
769
+
770
+ prevButton.disabled = currentTab === 0;
771
+
772
+ if (currentTab === tabs.length - 1) {
773
+ nextButton.innerHTML = 'TERMINER <i class="fas fa-check ml-2"></i>';
774
+ } else {
775
+ nextButton.innerHTML = 'SUIVANT <i class="fas fa-arrow-right ml-2"></i>';
776
+ }
777
+ }
778
+
779
+ // Concept selection
780
+ const conceptSelect = document.querySelector('select[value="concept"]');
781
+ const customConcept = document.getElementById('custom-concept');
782
+
783
+ conceptSelect.addEventListener('change', function() {
784
+ if (this.value === 'custom') {
785
+ customConcept.classList.remove('hidden');
786
+ } else {
787
+ customConcept.classList.add('hidden');
788
+ }
789
+ });
790
+
791
+ // City selection
792
+ const citySelect = document.querySelector('select[value="city"]');
793
+ const customCity = document.getElementById('custom-city');
794
+
795
+ citySelect.addEventListener('change', function() {
796
+ if (this.value === 'custom') {
797
+ customCity.classList.remove('hidden');
798
+ } else {
799
+ customCity.classList.add('hidden');
800
+ }
801
+ });
802
+
803
+ // Attribute adjustment
804
+ const attributeIncreaseButtons = document.querySelectorAll('.attribute-increase');
805
+ const attributeDecreaseButtons = document.querySelectorAll('.attribute-decrease');
806
+ const attributeValues = document.querySelectorAll('.attribute-value');
807
+ let attributePoints = 5;
808
+
809
+ attributeIncreaseButtons.forEach((button, index) => {
810
+ button.addEventListener('click', () => {
811
+ if (attributePoints > 0) {
812
+ const currentValue = parseInt(attributeValues[index].textContent);
813
+ if (currentValue < 5) {
814
+ attributeValues[index].textContent = currentValue + 1;
815
+ attributePoints--;
816
+ document.getElementById('attribute-points').textContent = attributePoints;
817
+ }
818
+ }
819
+ });
820
+ });
821
+
822
+ attributeDecreaseButtons.forEach((button, index) => {
823
+ button.addEventListener('click', () => {
824
+ const currentValue = parseInt(attributeValues[index].textContent);
825
+ if (currentValue > 1) {
826
+ attributeValues[index].textContent = currentValue - 1;
827
+ attributePoints++;
828
+ document.getElementById('attribute-points').textContent = attributePoints;
829
+ }
830
+ });
831
+ });
832
+
833
+ // Skill adjustment
834
+ const skillIncreaseButtons = document.querySelectorAll('.skill-increase');
835
+ const skillDecreaseButtons = document.querySelectorAll('.skill-decrease');
836
+ const skillValues = document.querySelectorAll('.skill-value');
837
+ let skillPoints = 11;
838
+
839
+ skillIncreaseButtons.forEach((button, index) => {
840
+ button.addEventListener('click', () => {
841
+ if (skillPoints > 0) {
842
+ const currentValue = parseInt(skillValues[index].textContent);
843
+ if (currentValue < 3) {
844
+ skillValues[index].textContent = currentValue + 1;
845
+ skillPoints--;
846
+ document.getElementById('skill-points').textContent = skillPoints;
847
+ }
848
+ }
849
+ });
850
+ });
851
+
852
+ skillDecreaseButtons.forEach((button, index) => {
853
+ button.addEventListener('click', () => {
854
+ const currentValue = parseInt(skillValues[index].textContent);
855
+ if (currentValue > 0) {
856
+ skillValues[index].textContent = currentValue - 1;
857
+ skillPoints++;
858
+ document.getElementById('skill-points').textContent = skillPoints;
859
+ }
860
+ });
861
+ });
862
+
863
+ // Advantage adjustment
864
+ const advantageIncreaseButtons = document.querySelectorAll('.advantage-increase');
865
+ const advantageDecreaseButtons = document.querySelectorAll('.advantage-decrease');
866
+ const advantageValues = document.querySelectorAll('.advantage-value');
867
+ let advantagePoints = 7;
868
+
869
+ advantageIncreaseButtons.forEach((button, index) => {
870
+ button.addEventListener('click', () => {
871
+ if (advantagePoints > 0) {
872
+ const currentValue = parseInt(advantageValues[index].textContent);
873
+ if (currentValue < 5) {
874
+ advantageValues[index].textContent = currentValue + 1;
875
+ advantagePoints--;
876
+ document.getElementById('advantage-points').textContent = advantagePoints;
877
+ }
878
+ }
879
+ });
880
+ });
881
+
882
+ advantageDecreaseButtons.forEach((button, index) => {
883
+ button.addEventListener('click', () => {
884
+ const currentValue = parseInt(advantageValues[index].textContent);
885
+ if (currentValue > 0) {
886
+ advantageValues[index].textContent = currentValue - 1;
887
+ advantagePoints++;
888
+ document.getElementById('advantage-points').textContent = advantagePoints;
889
+ }
890
+ });
891
+ });
892
+
893
+ // Flaws adjustment
894
+ const flawCheckboxes = document.querySelectorAll('.checkbox-blood input[type="checkbox"]');
895
+
896
+ flawCheckboxes.forEach(checkbox => {
897
+ checkbox.addEventListener('change', function() {
898
+ const pointsText = this.parentElement.textContent.trim();
899
+ const points = parseInt(pointsText.match(/\d+/)[0]);
900
+
901
+ if (this.checked) {
902
+ advantagePoints += points;
903
+ } else {
904
+ advantagePoints -= points;
905
+ }
906
+
907
+ document.getElementById('advantage-points').textContent = advantagePoints;
908
+ });
909
+ });
910
+
911
+ // Download character sheet
912
+ document.getElementById('download-sheet').addEventListener('click', function() {
913
+ alert('Fiche de personnage générée avec succès ! (Fonctionnalité simulée)');
914
+ // In a real implementation, this would generate a PDF with all character data
915
+ });
916
+
917
+ // Update progress
918
+ function updateProgress() {
919
+ const progress = Math.round((currentTab / (tabs.length - 1)) * 100);
920
+ document.getElementById('completion').textContent = progress;
921
+ }
922
+
923
+ // Initialize
924
+ updateNavButtons();
925
+ </script>
926
+ <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=ZoroaStrella/vampire-fr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
927
+ </html>
prompts.txt ADDED
File without changes