Hugging Face's logo

Spaces:
Gonfrist8
/
arise
Running

App Files Community
Gonfrist8 commited on
Commit
bb41ec4
·
verified ·
1 Parent(s): 309cd01

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1849 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Arise
3
- emoji: 😻
4
- colorFrom: indigo
5
- colorTo: pink
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: arise
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,1849 @@
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>Ombre Monarch Training System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #6a00f4;
14
+ --primary-dark: #4a00b0;
15
+ --primary-transparent: rgba(106, 0, 244, 0.15);
16
+ --secondary: #ff5e00;
17
+ --secondary-light: #ff8a00;
18
+ --secondary-transparent: rgba(255, 94, 0, 0.15);
19
+ --dark: #0a0a0a;
20
+ --darker: #050505;
21
+ --dark-secondary: #1a1a1a;
22
+ --light: #f0f0f0;
23
+ --light-transparent: rgba(240, 240, 240, 0.1);
24
+ --accent: #00c853;
25
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
26
+ --elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
27
+ --elevation-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
28
+ --elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
29
+ --text-gradient: linear-gradient(90deg, var(--primary), var(--secondary));
30
+ --gold-gradient: linear-gradient(135deg, #FFD700, #FFA500);
31
+ }
32
+
33
+ * {
34
+ margin: 0;
35
+ padding: 0;
36
+ box-sizing: border-box;
37
+ }
38
+
39
+ body {
40
+ font-family: 'Space Grotesk', sans-serif;
41
+ background-color: var(--dark);
42
+ color: var(--light);
43
+ min-height: 100vh;
44
+ background-image:
45
+ radial-gradient(circle at 15% 85%, rgba(106, 0, 244, 0.1) 0%, transparent 40%),
46
+ radial-gradient(circle at 85% 15%, rgba(255, 94, 0, 0.1) 0%, transparent 40%),
47
+ linear-gradient(to bottom, var(--darker), var(--dark));
48
+ background-attachment: fixed;
49
+ line-height: 1.6;
50
+ overflow-x: hidden;
51
+ }
52
+
53
+ .container {
54
+ max-width: 1100px;
55
+ margin: 0 auto;
56
+ padding: 4rem 2rem;
57
+ position: relative;
58
+ z-index: 1;
59
+ }
60
+
61
+ /* Glitch effect */
62
+ .glitch-layers {
63
+ position: absolute;
64
+ top: 50%;
65
+ left: 50%;
66
+ width: 100px;
67
+ height: 100px;
68
+ transform: translate(-50%, -50%);
69
+ opacity: 0.03;
70
+ z-index: -1;
71
+ pointer-events: none;
72
+ }
73
+
74
+ .glitch-layer {
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ width: 100%;
79
+ height: 100%;
80
+ background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
81
+ border-radius: 50%;
82
+ animation: glitch-anim 5s infinite linear;
83
+ }
84
+
85
+ .glitch-layer:nth-child(1) {
86
+ animation-delay: -1s;
87
+ }
88
+
89
+ .glitch-layer:nth-child(2) {
90
+ background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
91
+ animation-delay: -2s;
92
+ }
93
+
94
+ @keyframes glitch-anim {
95
+ 0% { transform: scale(1); opacity: 1; }
96
+ 50% { transform: scale(1.5); opacity: 0.7; }
97
+ 100% { transform: scale(1); opacity: 1; }
98
+ }
99
+
100
+ /* Particles effect */
101
+ .particles {
102
+ position: fixed;
103
+ top: 0;
104
+ left: 0;
105
+ width: 100%;
106
+ height: 100%;
107
+ pointer-events: none;
108
+ z-index: -1;
109
+ }
110
+
111
+ .particle {
112
+ position: absolute;
113
+ background: var(--primary);
114
+ border-radius: 50%;
115
+ opacity: 0.7;
116
+ animation: float linear infinite;
117
+ }
118
+
119
+ @keyframes float {
120
+ 0% { transform: translateY(0) rotate(0deg); }
121
+ 100% { transform: translateY(-100vh) rotate(360deg); }
122
+ }
123
+
124
+ /* Header styles */
125
+ .header {
126
+ text-align: center;
127
+ margin-bottom: 4rem;
128
+ position: relative;
129
+ z-index: 1;
130
+ }
131
+
132
+ .title {
133
+ font-size: 4rem;
134
+ font-weight: 900;
135
+ background: var(--text-gradient);
136
+ -webkit-background-clip: text;
137
+ -webkit-text-fill-color: transparent;
138
+ margin-bottom: 0.8rem;
139
+ text-shadow: 0 0 15px rgba(106, 0, 244, 0.4);
140
+ animation: pulse 3s infinite;
141
+ letter-spacing: -2px;
142
+ position: relative;
143
+ display: inline-block;
144
+ font-family: 'Space Grotesk', sans-serif;
145
+ }
146
+
147
+ .title::after {
148
+ content: '';
149
+ position: absolute;
150
+ bottom: -8px;
151
+ left: 50%;
152
+ transform: translateX(-50%);
153
+ width: 100px;
154
+ height: 3px;
155
+ background: var(--text-gradient);
156
+ border-radius: 3px;
157
+ opacity: 0.7;
158
+ }
159
+
160
+ .subtitle {
161
+ font-size: 1.4rem;
162
+ opacity: 0.9;
163
+ margin-bottom: 2rem;
164
+ max-width: 700px;
165
+ margin-left: auto;
166
+ margin-right: auto;
167
+ color: rgba(255,255,255,0.8);
168
+ font-weight: 300;
169
+ position: relative;
170
+ padding: 0 1rem;
171
+ }
172
+
173
+ .subtitle::before,
174
+ .subtitle::after {
175
+ content: '""';
176
+ position: absolute;
177
+ top: 50%;
178
+ transform: translateY(-50%);
179
+ font-size: 2rem;
180
+ opacity: 0.3;
181
+ }
182
+
183
+ .subtitle::before {
184
+ left: -15px;
185
+ }
186
+
187
+ .subtitle::after {
188
+ right: -15px;
189
+ }
190
+
191
+ /* Player card */
192
+ .player-card {
193
+ background: linear-gradient(145deg, rgba(26,26,26,0.9), rgba(10,10,10,0.95));
194
+ border-radius: 24px;
195
+ padding: 3rem;
196
+ box-shadow: var(--elevation-3);
197
+ border: 1px solid rgba(106, 0, 244, 0.2);
198
+ margin-bottom: 3rem;
199
+ position: relative;
200
+ overflow: hidden;
201
+ backdrop-filter: blur(8px) brightness(1.1);
202
+ transform-style: preserve-3d;
203
+ perspective: 1000px;
204
+ transition: transform 0.5s, box-shadow 0.5s;
205
+ }
206
+
207
+ .player-card:hover {
208
+ transform: translateY(-5px) scale(1.005);
209
+ box-shadow: 0 15px 30px rgba(0,0,0,0.3);
210
+ }
211
+
212
+ .player-card::before {
213
+ content: '';
214
+ position: absolute;
215
+ top: -50%;
216
+ left: -50%;
217
+ width: 200%;
218
+ height: 200%;
219
+ background: radial-gradient(circle, rgba(106,0,244,0.15) 0%, transparent 70%);
220
+ transform: rotate(45deg);
221
+ pointer-events: none;
222
+ z-index: -1;
223
+ }
224
+
225
+ .player-card::after {
226
+ content: '';
227
+ position: absolute;
228
+ top: 0;
229
+ left: 0;
230
+ right: 0;
231
+ bottom: 0;
232
+ border: 1px solid transparent;
233
+ background: linear-gradient(45deg, var(--primary), var(--secondary)) border-box;
234
+ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
235
+ -webkit-mask-composite: xor;
236
+ mask-composite: exclude;
237
+ border-radius: 24px;
238
+ pointer-events: none;
239
+ }
240
+
241
+ .player-info {
242
+ display: flex;
243
+ align-items: center;
244
+ margin-bottom: 2rem;
245
+ gap: 1.5rem;
246
+ }
247
+
248
+ .player-avatar {
249
+ width: 120px;
250
+ height: 120px;
251
+ border-radius: 50%;
252
+ background-image: url('https://i.imgur.com/JYI5U4G.png');
253
+ background-size: cover;
254
+ background-position: center;
255
+ border: 4px solid var(--primary);
256
+ box-shadow: 0 0 25px var(--primary), inset 0 0 15px rgba(106, 0, 244, 0.7);
257
+ position: relative;
258
+ transition: transform 0.3s, box-shadow 0.3s;
259
+ }
260
+
261
+ .player-avatar::before {
262
+ content: '';
263
+ position: absolute;
264
+ top: -6px;
265
+ left: -6px;
266
+ right: -6px;
267
+ bottom: -6px;
268
+ border: 2px solid var(--secondary);
269
+ border-radius: 50%;
270
+ animation: pulse-border 2s infinite;
271
+ }
272
+
273
+ .player-avatar:hover {
274
+ transform: scale(1.05);
275
+ box-shadow: 0 0 30px var(--secondary), inset 0 0 20px rgba(255, 94, 0, 0.6);
276
+ }
277
+
278
+ .player-avatar-container {
279
+ position: relative;
280
+ }
281
+
282
+ .player-avatar-level {
283
+ position: absolute;
284
+ bottom: -8px;
285
+ right: -8px;
286
+ background: linear-gradient(45deg, var(--secondary), var(--secondary-light));
287
+ color: white;
288
+ width: 36px;
289
+ height: 36px;
290
+ border-radius: 50%;
291
+ display: flex;
292
+ align-items: center;
293
+ justify-content: center;
294
+ font-weight: 700;
295
+ font-size: 0.9rem;
296
+ border: 3px solid var(--dark-secondary);
297
+ z-index: 2;
298
+ box-shadow: 0 0 10px rgba(255, 94, 0, 0.5);
299
+ }
300
+
301
+ .player-name {
302
+ font-size: 2.2rem;
303
+ font-weight: 700;
304
+ margin-bottom: 0.3rem;
305
+ background: linear-gradient(90deg, var(--light), #ffffff);
306
+ -webkit-background-clip: text;
307
+ -webkit-text-fill-color: transparent;
308
+ text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
309
+ letter-spacing: -0.5px;
310
+ }
311
+
312
+ .player-title {
313
+ font-size: 1.1rem;
314
+ color: var(--secondary);
315
+ font-weight: 600;
316
+ letter-spacing: 1px;
317
+ position: relative;
318
+ display: inline-block;
319
+ padding-left: 18px;
320
+ }
321
+
322
+ .player-title::before {
323
+ content: '';
324
+ position: absolute;
325
+ left: 0;
326
+ top: 50%;
327
+ transform: translateY(-50%);
328
+ width: 12px;
329
+ height: 12px;
330
+ background-color: var(--secondary);
331
+ border-radius: 50%;
332
+ }
333
+
334
+ .player-title::after {
335
+ content: '';
336
+ position: absolute;
337
+ bottom: -5px;
338
+ left: 0;
339
+ width: 40px;
340
+ height: 2px;
341
+ background: var(--secondary);
342
+ }
343
+
344
+ /* Progress bar */
345
+ .progress-container {
346
+ width: 100%;
347
+ background-color: rgba(255, 255, 255, 0.08);
348
+ border-radius: 12px;
349
+ height: 26px;
350
+ margin: 2rem 0;
351
+ overflow: hidden;
352
+ position: relative;
353
+ box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 10px rgba(106, 0, 244, 0.1);
354
+ }
355
+
356
+ .progress-info {
357
+ display: flex;
358
+ justify-content: space-between;
359
+ margin-bottom: 0.8rem;
360
+ align-items: center;
361
+ }
362
+
363
+ .progress-label {
364
+ display: flex;
365
+ align-items: center;
366
+ gap: 0.5rem;
367
+ font-size: 1rem;
368
+ color: rgba(255,255,255,0.9);
369
+ font-weight: 500;
370
+ }
371
+
372
+ .progress-percent {
373
+ font-weight: 600;
374
+ color: var(--secondary);
375
+ font-size: 1.2rem;
376
+ display: flex;
377
+ align-items: center;
378
+ gap: 0.3rem;
379
+ }
380
+
381
+ .progress-arrow {
382
+ transition: transform 0.3s;
383
+ }
384
+
385
+ .progress-bar {
386
+ height: 100%;
387
+ background: var(--text-gradient);
388
+ border-radius: 12px;
389
+ position: relative;
390
+ overflow: hidden;
391
+ transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
392
+ }
393
+
394
+ .progress-bar::after {
395
+ content: '';
396
+ position: absolute;
397
+ top: 0;
398
+ left: -100%;
399
+ width: 100%;
400
+ height: 100%;
401
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
402
+ animation: progressShine 2.5s infinite;
403
+ }
404
+
405
+ /* Stats */
406
+ .stats {
407
+ display: grid;
408
+ grid-template-columns: repeat(4, 1fr);
409
+ gap: 1.8rem;
410
+ margin-top: 2.5rem;
411
+ }
412
+
413
+ .stat {
414
+ background: rgba(10,10,10,0.7);
415
+ border-radius: 16px;
416
+ padding: 1.5rem;
417
+ text-align: center;
418
+ position: relative;
419
+ overflow: hidden;
420
+ border: 1px solid rgba(106, 0, 244, 0.2);
421
+ box-shadow: var(--elevation-1);
422
+ transition: all 0.3s ease;
423
+ min-height: 150px;
424
+ display: flex;
425
+ flex-direction: column;
426
+ justify-content: space-between;
427
+ }
428
+
429
+ .stat:hover {
430
+ transform: translateY(-5px) scale(1.02);
431
+ box-shadow: var(--elevation-2);
432
+ border-color: rgba(106, 0, 244, 0.4);
433
+ background: rgba(10,10,10,0.8);
434
+ }
435
+
436
+ .stat::before {
437
+ content: '';
438
+ position: absolute;
439
+ top: -1px;
440
+ left: -1px;
441
+ right: -1px;
442
+ height: 4px;
443
+ background: var(--text-gradient);
444
+ z-index: 1;
445
+ }
446
+
447
+ .stat-value {
448
+ font-size: 2.4rem;
449
+ font-weight: 800;
450
+ background: var(--text-gradient);
451
+ -webkit-background-clip: text;
452
+ -webkit-text-fill-color: transparent;
453
+ margin: 0.3rem 0;
454
+ position: relative;
455
+ display: inline-block;
456
+ text-shadow: 0 0 8px rgba(106, 0, 244, 0.3);
457
+ }
458
+
459
+ .stat-label {
460
+ font-size: 0.9rem;
461
+ opacity: 0.8;
462
+ text-transform: uppercase;
463
+ letter-spacing: 1px;
464
+ margin-top: 0.3rem;
465
+ color: rgba(255,255,255,0.7);
466
+ font-weight: 500;
467
+ }
468
+
469
+ .stat-icon {
470
+ width: 50px;
471
+ height: 50px;
472
+ margin: 0 auto 0.8rem;
473
+ background: linear-gradient(135deg, var(--primary-transparent), var(--secondary-transparent));
474
+ border-radius: 12px;
475
+ display: flex;
476
+ align-items: center;
477
+ justify-content: center;
478
+ font-size: 1.4rem;
479
+ color: var(--secondary);
480
+ box-shadow: 0 0 10px rgba(106, 0, 244, 0.2);
481
+ }
482
+
483
+ /* Level badge */
484
+ .level-badge {
485
+ position: absolute;
486
+ top: 2.5rem;
487
+ right: 2.5rem;
488
+ background: linear-gradient(45deg, var(--secondary), var(--secondary-light));
489
+ color: white;
490
+ padding: 0.7rem 1.5rem;
491
+ border-radius: 50px;
492
+ font-size: 1rem;
493
+ font-weight: 700;
494
+ box-shadow: 0 5px 20px rgba(255, 94, 0, 0.3);
495
+ display: flex;
496
+ align-items: center;
497
+ gap: 10px;
498
+ z-index: 2;
499
+ border: none;
500
+ transition: all 0.3s ease;
501
+ }
502
+
503
+ .level-badge:hover {
504
+ transform: translateY(-2px) scale(1.05);
505
+ box-shadow: 0 8px 25px rgba(255, 94, 0, 0.4);
506
+ }
507
+
508
+ /* Training controls */
509
+ .training-controls {
510
+ background: rgba(10,10,10,0.9);
511
+ border-radius: 20px;
512
+ padding: 2.5rem;
513
+ box-shadow: var(--elevation-2);
514
+ margin-bottom: 3rem;
515
+ backdrop-filter: blur(6px);
516
+ border: 1px solid rgba(106, 0, 244, 0.15);
517
+ position: relative;
518
+ overflow: hidden;
519
+ }
520
+
521
+ .training-controls::after {
522
+ content: '';
523
+ position: absolute;
524
+ top: 0;
525
+ left: 0;
526
+ width: 100%;
527
+ height: 5px;
528
+ background: var(--text-gradient);
529
+ }
530
+
531
+ .controls-header {
532
+ display: flex;
533
+ justify-content: space-between;
534
+ align-items: center;
535
+ margin-bottom: 2rem;
536
+ }
537
+
538
+ .controls-title {
539
+ font-size: 1.8rem;
540
+ font-weight: 600;
541
+ background: linear-gradient(90deg, var(--light), white);
542
+ -webkit-background-clip: text;
543
+ -webkit-text-fill-color: transparent;
544
+ display: flex;
545
+ align-items: center;
546
+ gap: 12px;
547
+ }
548
+
549
+ .select-container {
550
+ position: relative;
551
+ margin-bottom: 2rem;
552
+ }
553
+
554
+ .select-container::after {
555
+ content: '\f078';
556
+ font-family: 'Font Awesome 6 Free';
557
+ font-weight: 900;
558
+ position: absolute;
559
+ right: 18px;
560
+ top: 50%;
561
+ transform: translateY(-50%);
562
+ color: var(--light);
563
+ pointer-events: none;
564
+ z-index: 1;
565
+ }
566
+
567
+ select {
568
+ width: 100%;
569
+ padding: 18px 22px;
570
+ background-color: rgba(26,26,26,0.8);
571
+ color: var(--light);
572
+ border: 1px solid rgba(106, 0, 244, 0.4);
573
+ border-radius: 16px;
574
+ font-size: 1.1rem;
575
+ appearance: none;
576
+ cursor: pointer;
577
+ transition: all 0.3s ease;
578
+ box-shadow: var(--elevation-1);
579
+ font-family: 'Space Grotesk', sans-serif;
580
+ font-weight: 500;
581
+ }
582
+
583
+ select:focus, select:hover {
584
+ outline: none;
585
+ border-color: var(--primary);
586
+ box-shadow: 0 0 0 3px rgba(106, 0, 244, 0.2);
587
+ background-color: rgba(26,26,26,0.9);
588
+ }
589
+
590
+ /* Buttons */
591
+ .btn {
592
+ padding: 18px 36px;
593
+ color: white;
594
+ border: none;
595
+ border-radius: 16px;
596
+ font-size: 1.1rem;
597
+ font-weight: 700;
598
+ cursor: pointer;
599
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
600
+ box-shadow: var(--elevation-1);
601
+ text-transform: uppercase;
602
+ letter-spacing: 1px;
603
+ display: inline-flex;
604
+ align-items: center;
605
+ justify-content: center;
606
+ gap: 12px;
607
+ position: relative;
608
+ overflow: hidden;
609
+ font-family: 'Space Grotesk', sans-serif;
610
+ }
611
+
612
+ .btn-primary {
613
+ background: linear-gradient(45deg, var(--primary), var(--primary-dark));
614
+ }
615
+
616
+ .btn-primary:hover {
617
+ transform: translateY(-3px);
618
+ box-shadow: 0 12px 25px rgba(106, 0, 244, 0.3);
619
+ }
620
+
621
+ .btn-primary:active {
622
+ transform: translateY(1px);
623
+ }
624
+
625
+ .btn-primary::before {
626
+ content: '';
627
+ position: absolute;
628
+ top: 0;
629
+ left: -100%;
630
+ width: 100%;
631
+ height: 100%;
632
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
633
+ transition: all 0.6s ease;
634
+ }
635
+
636
+ .btn-primary:hover::before {
637
+ left: 100%;
638
+ }
639
+
640
+ .btn-secondary {
641
+ background: linear-gradient(45deg, var(--secondary), #ff4500);
642
+ }
643
+
644
+ .btn-secondary:hover {
645
+ transform: translateY(-3px);
646
+ box-shadow: 0 12px 25px rgba(255, 94, 0, 0.3);
647
+ }
648
+
649
+ .btn-secondary:active {
650
+ transform: translateY(1px);
651
+ }
652
+
653
+ .btn-completed {
654
+ background: linear-gradient(45deg, #00c853, #5efc82);
655
+ animation: pulse 2s infinite;
656
+ }
657
+
658
+ .btn-completed:hover {
659
+ transform: translateY(-3px);
660
+ box-shadow: 0 12px 25px rgba(0, 200, 83, 0.3);
661
+ }
662
+
663
+ /* Training program */
664
+ .training-program {
665
+ background: rgba(26,26,26,0.95);
666
+ border-radius: 20px;
667
+ padding: 2.5rem;
668
+ box-shadow: var(--elevation-3);
669
+ margin-bottom: 2rem;
670
+ backdrop-filter: blur(6px);
671
+ border-left: 5px solid var(--primary);
672
+ transform: translateY(20px);
673
+ opacity: 0;
674
+ animation: fadeInUp 0.6s forwards 0.3s;
675
+ position: relative;
676
+ }
677
+
678
+ .training-program::before {
679
+ content: '';
680
+ position: absolute;
681
+ top: 0;
682
+ left: 0;
683
+ width: 100%;
684
+ height: 5px;
685
+ background: var(--text-gradient);
686
+ }
687
+
688
+ .program-header {
689
+ display: flex;
690
+ justify-content: space-between;
691
+ align-items: center;
692
+ margin-bottom: 2rem;
693
+ flex-wrap: wrap;
694
+ gap: 1.5rem;
695
+ }
696
+
697
+ .program-title {
698
+ font-size: 1.8rem;
699
+ font-weight: 600;
700
+ color: var(--primary);
701
+ display: flex;
702
+ align-items: center;
703
+ gap: 15px;
704
+ }
705
+
706
+ .program-level {
707
+ background: rgba(106,0,244,0.2);
708
+ padding: 0.8rem 1.5rem;
709
+ border-radius: 50px;
710
+ font-size: 1rem;
711
+ font-weight: 600;
712
+ display: flex;
713
+ align-items: center;
714
+ gap: 10px;
715
+ border: 1px solid rgba(106, 0, 244, 0.4);
716
+ }
717
+
718
+ .exercises {
719
+ display: grid;
720
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
721
+ gap: 1.5rem;
722
+ }
723
+
724
+ .exercise {
725
+ background: rgba(10,10,10,0.7);
726
+ border-radius: 16px;
727
+ padding: 1.5rem;
728
+ box-shadow: var(--elevation-1);
729
+ border: 1px solid rgba(106, 0, 244, 0.1);
730
+ transition: all 0.3s ease;
731
+ display: flex;
732
+ flex-direction: column;
733
+ position: relative;
734
+ overflow: hidden;
735
+ min-height: 150px;
736
+ }
737
+
738
+ .exercise:hover {
739
+ transform: translateY(-3px);
740
+ box-shadow: var(--elevation-2);
741
+ border-color: rgba(106, 0, 244, 0.2);
742
+ background: rgba(10,10,10,0.8);
743
+ }
744
+
745
+ .exercise::before {
746
+ content: '';
747
+ position: absolute;
748
+ top: 0;
749
+ left: 0;
750
+ width: 4px;
751
+ height: 100%;
752
+ background: var(--text-gradient);
753
+ }
754
+
755
+ .exercise.completed {
756
+ background: rgba(10,10,10,0.5);
757
+ border-color: rgba(0, 200, 83, 0.3);
758
+ }
759
+
760
+ .exercise.completed::before {
761
+ background: linear-gradient(to bottom, #00c853, #5efc82);
762
+ }
763
+
764
+ .exercise-name {
765
+ display: flex;
766
+ align-items: center;
767
+ gap: 15px;
768
+ margin-bottom: 1rem;
769
+ }
770
+
771
+ .exercise-icon {
772
+ width: 40px;
773
+ height: 40px;
774
+ background: linear-gradient(135deg, var(--primary-transparent), var(--secondary-transparent));
775
+ border-radius: 10px;
776
+ display: flex;
777
+ align-items: center;
778
+ justify-content: center;
779
+ color: var(--secondary);
780
+ font-size: 1.2rem;
781
+ flex-shrink: 0;
782
+ box-shadow: 0 0 8px rgba(106, 0, 244, 0.2);
783
+ }
784
+
785
+ .exercise.completed .exercise-icon {
786
+ background: rgba(0, 200, 83, 0.15);
787
+ color: #00c853;
788
+ }
789
+
790
+ .exercise-title {
791
+ font-weight: 600;
792
+ font-size: 1.2rem;
793
+ color: var(--light);
794
+ flex: 1;
795
+ }
796
+
797
+ .exercise.completed .exercise-title {
798
+ opacity: 0.8;
799
+ text-decoration: line-through;
800
+ }
801
+
802
+ .exercise-details {
803
+ display: flex;
804
+ justify-content: space-between;
805
+ align-items: center;
806
+ margin-top: auto;
807
+ }
808
+
809
+ .exercise-value {
810
+ font-weight: 700;
811
+ color: var(--secondary);
812
+ font-size: 1.2rem;
813
+ }
814
+
815
+ .exercise.completed .exercise-value {
816
+ color: #00c853;
817
+ }
818
+
819
+ .exercise-progress {
820
+ width: 100%;
821
+ height: 6px;
822
+ background: rgba(255,255,255,0.1);
823
+ border-radius: 6px;
824
+ margin-top: 1rem;
825
+ overflow: hidden;
826
+ }
827
+
828
+ .exercise-progress-bar {
829
+ height: 100%;
830
+ width: 0;
831
+ background: var(--text-gradient);
832
+ transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
833
+ }
834
+
835
+ .exercise.completed .exercise-progress-bar {
836
+ background: linear-gradient(90deg, #00c853, #5efc82);
837
+ width: 100% !important;
838
+ }
839
+
840
+ /* Exercise checkbox */
841
+ .exercise-check {
842
+ position: absolute;
843
+ top: 16px;
844
+ right: 16px;
845
+ width: 28px;
846
+ height: 28px;
847
+ border-radius: 8px;
848
+ border: 2px solid rgba(106, 0, 244, 0.5);
849
+ background: rgba(10,10,10,0.7);
850
+ cursor: pointer;
851
+ transition: all 0.2s ease;
852
+ display: flex;
853
+ align-items: center;
854
+ justify-content: center;
855
+ z-index: 2;
856
+ }
857
+
858
+ .exercise-check i {
859
+ color: var(--secondary);
860
+ font-size: 16px;
861
+ opacity: 0;
862
+ transform: scale(0.8);
863
+ transition: all 0.2s ease;
864
+ }
865
+
866
+ .exercise-check.active {
867
+ background: rgba(106, 0, 244, 0.2);
868
+ border-color: var(--primary);
869
+ }
870
+
871
+ .exercise-check.active i {
872
+ opacity: 1;
873
+ transform: scale(1);
874
+ }
875
+
876
+ .exercise.completed .exercise-check {
877
+ background: rgba(0, 200, 83, 0.2);
878
+ border-color: #00c853;
879
+ }
880
+
881
+ .exercise.completed .exercise-check i {
882
+ color: #00c853;
883
+ }
884
+
885
+ /* Completion message */
886
+ .completion-container {
887
+ position: fixed;
888
+ top: 0;
889
+ left: 0;
890
+ width: 100%;
891
+ height: 100%;
892
+ display: flex;
893
+ align-items: center;
894
+ justify-content: center;
895
+ z-index: 1000;
896
+ pointer-events: none;
897
+ opacity: 0;
898
+ transition: opacity 0.3s ease;
899
+ background-color: rgba(0, 0, 0, 0.8);
900
+ backdrop-filter: blur(5px);
901
+ }
902
+
903
+ .completion-message {
904
+ background: rgba(26,26,26,0.98);
905
+ border-radius: 24px;
906
+ padding: 3rem;
907
+ box-shadow: 0 25px 50px rgba(0,0,0,0.4);
908
+ max-width: 600px;
909
+ width: 90%;
910
+ border: 2px solid var(--primary);
911
+ transform: translateY(30px) scale(0.9);
912
+ transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
913
+ text-align: center;
914
+ position: relative;
915
+ overflow: hidden;
916
+ pointer-events: auto;
917
+ }
918
+
919
+ .completion-message::before {
920
+ content: '';
921
+ position: absolute;
922
+ top: 0;
923
+ left: 0;
924
+ width: 100%;
925
+ height: 5px;
926
+ background: var(--text-gradient);
927
+ }
928
+
929
+ .completion-message.max-level::before {
930
+ background: var(--gold-gradient);
931
+ }
932
+
933
+ .completion-icon {
934
+ font-size: 5rem;
935
+ margin-bottom: 2rem;
936
+ color: var(--secondary);
937
+ animation: bounce 1s infinite alternate;
938
+ }
939
+
940
+ .completion-message.max-level .completion-icon {
941
+ color: #FFD700;
942
+ animation: bounce 1s infinite alternate, glow 2s infinite;
943
+ }
944
+
945
+ .completion-title {
946
+ font-size: 2.2rem;
947
+ font-weight: 800;
948
+ margin-bottom: 1.5rem;
949
+ background: var(--text-gradient);
950
+ -webkit-background-clip: text;
951
+ -webkit-text-fill-color: transparent;
952
+ letter-spacing: -0.5px;
953
+ }
954
+
955
+ .completion-message.max-level .completion-title {
956
+ background: var(--gold-gradient);
957
+ -webkit-background-clip: text;
958
+ -webkit-text-fill-color: transparent;
959
+ text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
960
+ }
961
+
962
+ .completion-text {
963
+ font-size: 1.2rem;
964
+ margin-bottom: 2.5rem;
965
+ color: rgba(255,255,255,0.9);
966
+ line-height: 1.6;
967
+ }
968
+
969
+ .close-btn {
970
+ padding: 16px 36px;
971
+ border-radius: 12px;
972
+ background: var(--text-gradient);
973
+ color: white;
974
+ border: none;
975
+ cursor: pointer;
976
+ font-weight: 700;
977
+ transition: all 0.3s ease;
978
+ font-family: 'Space Grotesk', sans-serif;
979
+ font-size: 1.1rem;
980
+ box-shadow: var(--elevation-1);
981
+ }
982
+
983
+ .completion-message.max-level .close-btn {
984
+ background: var(--gold-gradient);
985
+ }
986
+
987
+ .close-btn:hover {
988
+ transform: translateY(-3px);
989
+ box-shadow: 0 10px 20px rgba(106, 0, 244, 0.3);
990
+ }
991
+
992
+ .stats-gained {
993
+ display: flex;
994
+ justify-content: center;
995
+ gap: 1.5rem;
996
+ margin: 2rem 0;
997
+ flex-wrap: wrap;
998
+ }
999
+
1000
+ .stat-gain {
1001
+ background: rgba(10,10,10,0.7);
1002
+ padding: 1rem 1.5rem;
1003
+ border-radius: 12px;
1004
+ display: flex;
1005
+ align-items: center;
1006
+ gap: 10px;
1007
+ border: 1px solid rgba(106, 0, 244, 0.3);
1008
+ }
1009
+
1010
+ .stat-gain i {
1011
+ color: var(--secondary);
1012
+ }
1013
+
1014
+ .stat-gain-value {
1015
+ font-weight: 700;
1016
+ color: var(--secondary);
1017
+ }
1018
+
1019
+ /* Stats increase animation */
1020
+ .stat-increase {
1021
+ position: absolute;
1022
+ right: 10px;
1023
+ top: 10px;
1024
+ color: var(--secondary);
1025
+ font-weight: 700;
1026
+ font-size: 1rem;
1027
+ opacity: 0;
1028
+ transform: translateY(10px);
1029
+ animation: statIncrease 1s forwards;
1030
+ text-shadow: 0 0 5px rgba(255, 94, 0, 0.3);
1031
+ }
1032
+
1033
+ /* Animations */
1034
+ @keyframes pulse {
1035
+ 0% { transform: scale(1); }
1036
+ 50% { transform: scale(1.02); box-shadow: 0 0 30px rgba(0, 200, 83, 0.4); }
1037
+ 100% { transform: scale(1); }
1038
+ }
1039
+
1040
+ @keyframes glow {
1041
+ 0% { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); }
1042
+ 50% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)); }
1043
+ 100% { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); }
1044
+ }
1045
+
1046
+ @keyframes pulse-border {
1047
+ 0% { transform: scale(1); opacity: 0.7; }
1048
+ 50% { transform: scale(1.1); opacity: 0.3; }
1049
+ 100% { transform: scale(1); opacity: 0.7; }
1050
+ }
1051
+
1052
+ @keyframes progressShine {
1053
+ to {
1054
+ left: 100%;
1055
+ }
1056
+ }
1057
+
1058
+ @keyframes fadeInUp {
1059
+ from { opacity: 0; transform: translateY(20px); }
1060
+ to { opacity: 1; transform: translateY(0); }
1061
+ }
1062
+
1063
+ @keyframes bounce {
1064
+ from { transform: translateY(0); }
1065
+ to { transform: translateY(-15px); }
1066
+ }
1067
+
1068
+ @keyframes statIncrease {
1069
+ 0% { opacity: 0; transform: translateY(10px); }
1070
+ 50% { opacity: 1; transform: translateY(0); }
1071
+ 100% { opacity: 0; transform: translateY(-20px); }
1072
+ }
1073
+
1074
+ /* Responsive */
1075
+ @media (max-width: 1024px) {
1076
+ .container {
1077
+ padding: 3rem 1.5rem;
1078
+ }
1079
+
1080
+ .player-card {
1081
+ padding: 2.5rem;
1082
+ }
1083
+
1084
+ .stats {
1085
+ grid-template-columns: repeat(2, 1fr);
1086
+ }
1087
+
1088
+ .exercises {
1089
+ grid-template-columns: 1fr;
1090
+ }
1091
+ }
1092
+
1093
+ @media (max-width: 768px) {
1094
+ .title {
1095
+ font-size: 3rem;
1096
+ }
1097
+
1098
+ .subtitle {
1099
+ font-size: 1.2rem;
1100
+ }
1101
+
1102
+ .player-info {
1103
+ flex-direction: column;
1104
+ text-align: center;
1105
+ }
1106
+
1107
+ .player-avatar {
1108
+ margin-bottom: 1.5rem;
1109
+ }
1110
+
1111
+ .level-badge {
1112
+ position: relative;
1113
+ top: auto;
1114
+ right: auto;
1115
+ margin: 1.5rem auto 0;
1116
+ display: inline-flex;
1117
+ }
1118
+
1119
+ .training-controls,
1120
+ .training-program {
1121
+ padding: 2rem;
1122
+ }
1123
+ }
1124
+
1125
+ @media (max-width: 480px) {
1126
+ .container {
1127
+ padding: 2rem 1rem;
1128
+ }
1129
+
1130
+ .title {
1131
+ font-size: 2.5rem;
1132
+ }
1133
+
1134
+ .stats {
1135
+ grid-template-columns: 1fr;
1136
+ }
1137
+
1138
+ .btn {
1139
+ padding: 16px 24px;
1140
+ font-size: 1rem;
1141
+ width: 100%;
1142
+ }
1143
+
1144
+ .select-container,
1145
+ .controls-header {
1146
+ margin-bottom: 1.5rem;
1147
+ }
1148
+
1149
+ .training-controls,
1150
+ .training-program {
1151
+ padding: 1.5rem;
1152
+ }
1153
+
1154
+ .completion-message {
1155
+ padding: 2rem 1.5rem;
1156
+ }
1157
+ }
1158
+ </style>
1159
+ </head>
1160
+ <body>
1161
+ <!-- Glitch effect background -->
1162
+ <div class="glitch-layers">
1163
+ <div class="glitch-layer"></div>
1164
+ <div class="glitch-layer"></div>
1165
+ </div>
1166
+
1167
+ <!-- Particles background -->
1168
+ <div class="particles" id="particles"></div>
1169
+
1170
+ <div class="container">
1171
+ <div class="header">
1172
+ <h1 class="title">OMBRE MONARCH TRAINING</h1>
1173
+ <p class="subtitle">"Surpasse tes limites et deviens l'être ultime. Que tes ombres grandissent avec toi."</p>
1174
+ </div>
1175
+
1176
+ <!-- Player Card -->
1177
+ <div class="player-card">
1178
+ <div class="player-info">
1179
+ <div class="player-avatar-container">
1180
+ <div class="player-avatar"></div>
1181
+ <div class="player-avatar-level" id="player-level">1</div>
1182
+ </div>
1183
+ <div>
1184
+ <div class="player-name">SUNG JIN-WOO</div>
1185
+ <div class="player-title">Monarque de l'Ombre</div>
1186
+ </div>
1187
+ </div>
1188
+
1189
+ <div class="progress-info">
1190
+ <div class="progress-label">
1191
+ <i class="fas fa-chart-line"></i>
1192
+ <span>Progression du jour</span>
1193
+ </div>
1194
+ <div class="progress-percent" id="progress-percent">0%
1195
+ <span class="progress-arrow" id="progress-arrow">→</span>
1196
+ </div>
1197
+ </div>
1198
+ <div class="progress-container">
1199
+ <div class="progress-bar" id="progress-bar" style="width: 0%"></div>
1200
+ </div>
1201
+
1202
+ <div class="stats">
1203
+ <div class="stat">
1204
+ <div class="stat-icon"><i class="fas fa-fist-raised"></i></div>
1205
+ <div class="stat-value" id="strength-stat">0</div>
1206
+ <div class="stat-label">Force</div>
1207
+ <div class="stat-increase" id="strength-increase"></div>
1208
+ </div>
1209
+ <div class="stat">
1210
+ <div class="stat-icon"><i class="fas fa-running"></i></div>
1211
+ <div class="stat-value" id="agility-stat">0</div>
1212
+ <div class="stat-label">Agilité</div>
1213
+ <div class="stat-increase" id="agility-increase"></div>
1214
+ </div>
1215
+ <div class="stat">
1216
+ <div class="stat-icon"><i class="fas fa-heartbeat"></i></div>
1217
+ <div class="stat-value" id="stamina-stat">0</div>
1218
+ <div class="stat-label">Endurance</div>
1219
+ <div class="stat-increase" id="stamina-increase"></div>
1220
+ </div>
1221
+ <div class="stat">
1222
+ <div class="stat-icon"><i class="fas fa-brain"></i></div>
1223
+ <div class="stat-value" id="willpower-stat">0</div>
1224
+ <div class="stat-label">Volonté</div>
1225
+ <div class="stat-increase" id="willpower-increase"></div>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="level-badge">
1230
+ <i class="fas fa-fire"></i>
1231
+ <span id="current-level">Débutant</span>
1232
+ </div>
1233
+ </div>
1234
+
1235
+ <!-- Training Controls -->
1236
+ <div class="training-controls">
1237
+ <div class="controls-header">
1238
+ <h2 class="controls-title"><i class="fas fa-cog"></i> Configuration</h2>
1239
+ </div>
1240
+
1241
+ <div class="select-container">
1242
+ <select id="niveau">
1243
+ <option value="débutant">Niveau Débutant (Éclaireur)</option>
1244
+ <option value="intermédiaire">Niveau Intermédiaire (Chasseur B-Rank)</option>
1245
+ <option value="avancé">Niveau Avancé (Chasseur S-Rank)</option>
1246
+ </select>
1247
+ </div>
1248
+
1249
+ <button onclick="genererProgramme()" class="btn btn-primary" id="generate-btn">
1250
+ <i class="fas fa-dumbbell"></i> Commencer l'Entraînement
1251
+ </button>
1252
+ </div>
1253
+
1254
+ <!-- Training Program -->
1255
+ <div class="training-program" id="training-program" style="display: none;">
1256
+ <div class="program-header">
1257
+ <div class="program-title">
1258
+ <i class="fas fa-clipboard-list"></i>
1259
+ <h2>Programme d'Entraînement</h2>
1260
+ </div>
1261
+ <div class="program-level">
1262
+ <i class="fas fa-fire"></i>
1263
+ <span id="program-level-display">Débutant</span>
1264
+ </div>
1265
+ </div>
1266
+ <div class="exercises" id="exercises-list"></div>
1267
+ </div>
1268
+
1269
+ <!-- Complete button -->
1270
+ <button onclick="completeTraining()" class="btn btn-completed" id="complete-btn" style="display: none; width: 100%;">
1271
+ <i class="fas fa-check-circle"></i> Terminer l'Entraînement
1272
+ </button>
1273
+ </div>
1274
+
1275
+ <!-- Completion Message -->
1276
+ <div class="completion-container" id="completion-container">
1277
+ <div class="completion-message" id="completion-message">
1278
+ <div class="completion-icon">
1279
+ <i class="fas fa-trophy" id="completion-icon"></i>
1280
+ </div>
1281
+ <h3 class="completion-title" id="completion-title">Entraînement Terminé!</h3>
1282
+ <div class="stats-gained" id="stats-gained"></div>
1283
+ <p class="completion-text" id="completion-text">Vous avez réussi votre entraînement et gagné des points de stats!</p>
1284
+ <button class="close-btn" onclick="hideCompletion()">
1285
+ <i class="fas fa-times"></i> Fermer
1286
+ </button>
1287
+ </div>
1288
+ </div>
1289
+
1290
+ <script>
1291
+ // Variables d'état
1292
+ let currentProgress = 0;
1293
+ let currentLevel = "débutant";
1294
+ let playerLevel = 1;
1295
+ let strength = 0;
1296
+ let agility = 0;
1297
+ let stamina = 0;
1298
+ let willpower = 0;
1299
+ let programGenerated = false;
1300
+ let exercisesCompleted = 0;
1301
+ let exerciseElements = [];
1302
+ let previousProgress = 0;
1303
+ let experienceToNextLevel = 50;
1304
+ let currentExperience = 0;
1305
+
1306
+ // Générer particules
1307
+ function generateParticles() {
1308
+ const particlesContainer = document.getElementById('particles');
1309
+ const particleCount = 50;
1310
+
1311
+ for (let i = 0; i < particleCount; i++) {
1312
+ const particle = document.createElement('div');
1313
+ particle.classList.add('particle');
1314
+
1315
+ // Position aléatoire
1316
+ const x = Math.random() * 100;
1317
+ const y = Math.random() * 100;
1318
+ particle.style.left = `${x}%`;
1319
+ particle.style.top = `${y}%`;
1320
+
1321
+ // Taille aléatoire
1322
+ const size = Math.random() * 6 + 2;
1323
+ particle.style.width = `${size}px`;
1324
+ particle.style.height = `${size}px`;
1325
+
1326
+ // Opacité aléatoire
1327
+ particle.style.opacity = Math.random() * 0.6 + 0.1;
1328
+
1329
+ // Couleur aléatoire entre primary et secondary
1330
+ const r = Math.random();
1331
+ const color = r < 0.7 ? 'var(--primary)' : 'var(--secondary)';
1332
+ particle.style.background = color;
1333
+
1334
+ // Durée d'animation aléatoire
1335
+ const duration = Math.random() * 20 + 10;
1336
+ particle.style.animationDuration = `${duration}s`;
1337
+
1338
+ // Délai aléatoire
1339
+ particle.style.animationDelay = `-${Math.random() * duration}s`;
1340
+
1341
+ particlesContainer.appendChild(particle);
1342
+ }
1343
+ }
1344
+
1345
+ // Génère le programme d'entraînement
1346
+ function genererProgramme() {
1347
+ programGenerated = true;
1348
+ exercisesCompleted = 0;
1349
+ const previousLevel = currentLevel;
1350
+ currentLevel = document.getElementById("niveau").value;
1351
+
1352
+ // Mettre à jour le badge de niveau
1353
+ updateLevelDisplay();
1354
+
1355
+ // Réinitialiser la progression partielle si le niveau change
1356
+ if (previousLevel !== currentLevel) {
1357
+ currentProgress = 0;
1358
+ updateProgressBar(currentProgress);
1359
+ }
1360
+
1361
+ // Générer les exercices en fonction du niveau
1362
+ let exercises = [];
1363
+
1364
+ if (currentLevel === "débutant") {
1365
+ exercises = [
1366
+ { name: "Pompes", value: "3 séries de 20", icon: "fa-hand-paper", points: 8, type: 'strength' },
1367
+ { name: "Squats", value: "3 séries de 25", icon: "fa-running", points: 8, type: 'stamina' },
1368
+ { name: "Abdominaux", value: "3 séries de 15", icon: "fa-heartbeat", points: 8, type: 'stamina' },
1369
+ { name: "Course à pied", value: "5 km", icon: "fa-road", points: 12, type: 'agility' },
1370
+ { name: "Étirements", value: "15 minutes", icon: "fa-child", points: 8, type: 'willpower' }
1371
+ ];
1372
+ } else if (currentLevel === "intermédiaire") {
1373
+ exercises = [
1374
+ { name: "Pompes", value: "4 séries de 30", icon: "fa-hand-paper", points: 12, type: 'strength' },
1375
+ { name: "Squats", value: "4 séries de 40", icon: "fa-running", points: 12, type: 'stamina' },
1376
+ { name: "Abdominaux", value: "4 séries de 25", icon: "fa-heartbeat", points: 12, type: 'stamina' },
1377
+ { name: "Tractions", value: "4 séries de 10", icon: "fa-arrows-alt-v", points: 12, type: 'strength' },
1378
+ { name: "Musculation", value: "8 exercices", icon: "fa-dumbbell", points: 16, type: 'strength' },
1379
+ { name: "Course à pied", value: "10 km", icon: "fa-road", points: 20, type: 'agility' },
1380
+ { name: "Gainage", value: "3 séries", icon: "fa-stopwatch", points: 12, type: 'stamina' }
1381
+ ];
1382
+ } else if (currentLevel === "avancé") {
1383
+ exercises = [
1384
+ { name: "Pompes", value: "5 séries de 50", icon: "fa-hand-paper", points: 18, type: 'strength' },
1385
+ { name: "Squats", value: "5 séries de 50", icon: "fa-running", points: 18, type: 'stamina' },
1386
+ { name: "Tractions", value: "5 séries de 15", icon: "fa-arrows-alt-v", points: 18, type: 'strength' },
1387
+ { name: "Musculation", value: "12 exercices", icon: "fa-dumbbell", points: 24, type: 'strength' },
1388
+ { name: "Course à pied", value: "15 km", icon: "fa-road", points: 30, type: 'agility' },
1389
+ { name: "Gainage", value: "5 séries", icon: "fa-stopwatch", points: 18, type: 'stamina' },
1390
+ { name: "Arts martiaux", value: "1 heure", icon: "fa-user-ninja", points: 18, type: 'willpower' },
1391
+ { name: "Méditation", value: "30 minutes", icon: "fa-brain", points: 18, type: 'willpower' }
1392
+ ];
1393
+ }
1394
+
1395
+ // Afficher les exercices
1396
+ const exercisesList = document.getElementById("exercises-list");
1397
+ exercisesList.innerHTML = '';
1398
+ exerciseElements = [];
1399
+
1400
+ exercises.forEach((exercise, index) => {
1401
+ const exerciseEl = document.createElement('div');
1402
+ exerciseEl.className = 'exercise';
1403
+ exerciseEl.innerHTML = `
1404
+ <div class="exercise-name">
1405
+ <div class="exercise-icon"><i class="fas ${exercise.icon}"></i></div>
1406
+ <div class="exercise-title">${exercise.name}</div>
1407
+ </div>
1408
+ <div class="exercise-details">
1409
+ <div class="exercise-value">${exercise.value}</div>
1410
+ <div class="exercise-check"><i class="fas fa-check"></i></div>
1411
+ </div>
1412
+ <div class="exercise-progress">
1413
+ <div class="exercise-progress-bar"></div>
1414
+ </div>
1415
+ `;
1416
+
1417
+ // Stocker les informations de l'exercice
1418
+ exerciseEl.exerciseData = exercise;
1419
+ exerciseEl.index = index;
1420
+
1421
+ // Gestionnaire d'événement pour cocher l'exercice
1422
+ const checkBox = exerciseEl.querySelector('.exercise-check');
1423
+ checkBox.addEventListener('click', function() {
1424
+ toggleExerciseCompletion(exerciseEl);
1425
+ });
1426
+
1427
+ exercisesList.appendChild(exerciseEl);
1428
+ exerciseElements.push(exerciseEl);
1429
+ });
1430
+
1431
+ // Afficher le programme avec animation
1432
+ document.getElementById("training-program").style.display = 'block';
1433
+ document.getElementById("complete-btn").style.display = 'none';
1434
+
1435
+ // Animation du bouton
1436
+ const btn = document.getElementById("generate-btn");
1437
+ btn.innerHTML = '<i class="fas fa-sync-alt fa-spin"></i> Régénération...';
1438
+ setTimeout(() => {
1439
+ btn.innerHTML = '<i class="fas fa-dumbbell"></i> Régénérer Programme';
1440
+ }, 1000);
1441
+
1442
+ // Animation d'apparition des exercices
1443
+ setTimeout(() => {
1444
+ const exercises = document.querySelectorAll('.exercise');
1445
+ exercises.forEach((ex, index) => {
1446
+ setTimeout(() => {
1447
+ ex.style.opacity = '1';
1448
+ ex.style.transform = 'translateY(0)';
1449
+ }, 100 * index);
1450
+ });
1451
+ }, 300);
1452
+ }
1453
+
1454
+ // Basculer complétion exercice
1455
+ function toggleExerciseCompletion(exerciseEl) {
1456
+ const checkBox = exerciseEl.querySelector('.exercise-check');
1457
+ const progressBar = exerciseEl.querySelector('.exercise-progress-bar');
1458
+
1459
+ if (checkBox.classList.contains('active')) {
1460
+ // Décocher l'exercice
1461
+ checkBox.classList.remove('active');
1462
+ exerciseEl.classList.remove('completed');
1463
+ exercisesCompleted--;
1464
+ progressBar.style.width = '0%';
1465
+ } else {
1466
+ // Cocher l'exercice
1467
+ checkBox.classList.add('active');
1468
+ exerciseEl.classList.add('completed');
1469
+ exercisesCompleted++;
1470
+ progressBar.style.width = '100%';
1471
+
1472
+ // Animation de la coche
1473
+ checkBox.innerHTML = '';
1474
+ const icon = document.createElement('i');
1475
+ icon.className = 'fas fa-check';
1476
+ icon.style.opacity = '0';
1477
+ icon.style.transform = 'scale(0.5)';
1478
+ checkBox.appendChild(icon);
1479
+
1480
+ // Animation d'achèvement
1481
+ exerciseEl.style.boxShadow = '0 0 15px rgba(106, 0, 244, 0.3)';
1482
+ setTimeout(() => {
1483
+ icon.style.opacity = '1';
1484
+ icon.style.transform = 'scale(1)';
1485
+ exerciseEl.style.boxShadow = '0 3px 15px rgba(106, 0, 244, 0.2)';
1486
+ }, 10);
1487
+
1488
+ // Petite animation de rebondissement
1489
+ exerciseEl.style.transform = 'translateY(-3px) scale(1.02)';
1490
+ setTimeout(() => {
1491
+ exerciseEl.style.transform = 'translateY(-1px) scale(1.01)';
1492
+ setTimeout(() => {
1493
+ exerciseEl.style.transform = 'translateY(-3px)';
1494
+ }, 100);
1495
+ }, 100);
1496
+ }
1497
+
1498
+ // Si tous les exercices sont complétés, afficher le bouton de complétion
1499
+ if (exercisesCompleted === exerciseElements.length) {
1500
+ setTimeout(() => {
1501
+ document.getElementById("complete-btn").style.display = 'flex';
1502
+ }, 500);
1503
+ } else {
1504
+ document.getElementById("complete-btn").style.display = 'none';
1505
+ }
1506
+ }
1507
+
1508
+ // Terminer l'entraînement
1509
+ function completeTraining() {
1510
+ if (!programGenerated || exercisesCompleted < exerciseElements.length) return;
1511
+
1512
+ previousProgress = currentProgress;
1513
+
1514
+ // Calculer les points gagnés
1515
+ const totalPoints = exerciseElements.reduce((sum, el) => {
1516
+ return sum + (el.querySelector('.exercise-check').classList.contains('active') ? el.exerciseData.points : 0);
1517
+ }, 0);
1518
+
1519
+ // Calculer la progression, les stats et l'expérience
1520
+ let progressIncrement;
1521
+ let statsIncrement;
1522
+ let experienceGained;
1523
+
1524
+ if (currentLevel === "débutant") {
1525
+ progressIncrement = 50; // 50% (exercices) + 50% pour complétion
1526
+ statsIncrement = 1 + Math.floor(totalPoints / 30);
1527
+ experienceGained = totalPoints * 0.8;
1528
+ } else if (currentLevel === "intermédiaire") {
1529
+ progressIncrement = 60;
1530
+ statsIncrement = 2 + Math.floor(totalPoints / 25);
1531
+ experienceGained = totalPoints;
1532
+ } else if (currentLevel === "avancé") {
1533
+ progressIncrement = 80;
1534
+ statsIncrement = 3 + Math.floor(totalPoints / 20);
1535
+ experienceGained = totalPoints * 1.2;
1536
+ }
1537
+
1538
+ // Animation flèche de progression
1539
+ const arrow = document.getElementById('progress-arrow');
1540
+ arrow.textContent = '↑';
1541
+ setTimeout(() => {
1542
+ arrow.style.transform = 'translateY(-5px)';
1543
+ setTimeout(() => {
1544
+ arrow.style.transform = 'translateY(0)';
1545
+ }, 300);
1546
+ }, 300);
1547
+
1548
+ // Calculer l'augmentation par stat
1549
+ const statGains = {
1550
+ strength: 0,
1551
+ agility: 0,
1552
+ stamina: 0,
1553
+ willpower: 0
1554
+ };
1555
+
1556
+ exerciseElements.forEach(exerciseEl => {
1557
+ if (exerciseEl.querySelector('.exercise-check').classList.contains('active')) {
1558
+ const type = exerciseEl.exerciseData.type;
1559
+ const points = exerciseEl.exerciseData.points * (1 + (playerLevel / 10));
1560
+ statGains[type] += Math.floor(points / 5); // Convertir points en gain de stat
1561
+ }
1562
+ });
1563
+
1564
+ // Augmenter les statistiques
1565
+ const oldStrength = strength;
1566
+ const oldAgility = agility;
1567
+ const oldStamina = stamina;
1568
+ const oldWillpower = willpower;
1569
+
1570
+ strength += statGains.strength || statsIncrement;
1571
+ agility += statGains.agility || statsIncrement;
1572
+ stamina += statGains.stamina || statsIncrement;
1573
+ willpower += statGains.willpower || statsIncrement;
1574
+
1575
+ // Ajouter de l'expérience
1576
+ currentExperience += experienceGained;
1577
+
1578
+ // Vérifier le niveau up
1579
+ let levelUp = false;
1580
+ while (currentExperience >= experienceToNextLevel && playerLevel < 100) {
1581
+ currentExperience -= experienceToNextLevel;
1582
+ playerLevel++;
1583
+ levelUp = true;
1584
+ experienceToNextLevel = Math.floor(experienceToNextLevel * 1.2); // 20% de plus pour le prochain niveau
1585
+ }
1586
+
1587
+ // Animer l'augmentation des stats
1588
+ animateStatIncrease(strength - oldStrength, agility - oldAgility, stamina - oldStamina, willpower - oldWillpower);
1589
+
1590
+ // Mettre à jour la progression
1591
+ currentProgress = Math.min(currentProgress + progressIncrement, 100);
1592
+ updateProgressBar(currentProgress);
1593
+
1594
+ // Mettre à jour les statistiques
1595
+ updateStats();
1596
+ updatePlayerLevel();
1597
+
1598
+ // Afficher le message de complétion
1599
+ setTimeout(() => {
1600
+ showCompletionMessage({
1601
+ strength: strength - oldStrength,
1602
+ agility: agility - oldAgility,
1603
+ stamina: stamina - oldStamina,
1604
+ willpower: willpower - oldWillpower
1605
+ }, levelUp);
1606
+ }, 800);
1607
+
1608
+ // Cacher le bouton après complétion
1609
+ document.getElementById("complete-btn").style.display = 'none';
1610
+ }
1611
+
1612
+ // Afficher le message de complétion
1613
+ function showCompletionMessage(statGains, levelUp = false) {
1614
+ const container = document.getElementById("completion-container");
1615
+ const message = container.querySelector(".completion-message");
1616
+ const statsGainedEl = document.getElementById("stats-gained");
1617
+
1618
+ container.style.opacity = '1';
1619
+ container.style.pointerEvents = 'auto';
1620
+
1621
+ message.style.transform = 'translateY(0) scale(1)';
1622
+
1623
+ const title = document.getElementById("completion-title");
1624
+ const text = document.getElementById("completion-text");
1625
+ const icon = document.getElementById("completion-icon");
1626
+
1627
+ // Afficher les gains de stats
1628
+ statsGainedEl.innerHTML = '';
1629
+
1630
+ if (statGains.strength > 0) {
1631
+ statsGainedEl.innerHTML += `
1632
+ <div class="stat-gain">
1633
+ <i class="fas fa-fist-raised"></i>
1634
+ <span>Force: <span class="stat-gain-value">+${statGains.strength}</span></span>
1635
+ </div>
1636
+ `;
1637
+ }
1638
+
1639
+ if (statGains.agility > 0) {
1640
+ statsGainedEl.innerHTML += `
1641
+ <div class="stat-gain">
1642
+ <i class="fas fa-running"></i>
1643
+ <span>Agilité: <span class="stat-gain-value">+${statGains.agility}</span></span>
1644
+ </div>
1645
+ `;
1646
+ }
1647
+
1648
+ if (statGains.stamina > 0) {
1649
+ statsGainedEl.innerHTML += `
1650
+ <div class="stat-gain">
1651
+ <i class="fas fa-heartbeat"></i>
1652
+ <span>Endurance: <span class="stat-gain-value">+${statGains.stamina}</span></span>
1653
+ </div>
1654
+ `;
1655
+ }
1656
+
1657
+ if (statGains.willpower > 0) {
1658
+ statsGainedEl.innerHTML += `
1659
+ <div class="stat-gain">
1660
+ <i class="fas fa-brain"></i>
1661
+ <span>Volonté: <span class="stat-gain-value">+${statGains.willpower}</span></span>
1662
+ </div>
1663
+ `;
1664
+ }
1665
+
1666
+ if (levelUp) {
1667
+ title.textContent = "NIVEAU SUPÉRIEUR!";
1668
+ text.textContent = `Félicitations! Vous avez atteint le niveau ${playerLevel}! Vos capacités ont augmenté significativement.`;
1669
+ icon.className = "fas fa-level-up-alt";
1670
+
1671
+ // Animation spéciale de niveau supérieur
1672
+ message.classList.add('max-level');
1673
+
1674
+ // Animation du badge de niveau joueur
1675
+ const levelBadge = document.querySelector('.level-badge');
1676
+ levelBadge.style.animation = 'none';
1677
+ void levelBadge.offsetWidth; // Triggers reflow
1678
+ levelBadge.style.animation = 'pulse 0.5s 3';
1679
+
1680
+ // Changer temporairement le background du badge
1681
+ const originalBg = levelBadge.style.background;
1682
+ levelBadge.style.background = 'var(--gold-gradient)';
1683
+ setTimeout(() => {
1684
+ levelBadge.style.background = originalBg;
1685
+ }, 1500);
1686
+ } else if (currentProgress === 100) {
1687
+ title.textContent = "MAÎTRISE ACQUISE!";
1688
+ text.textContent = "Vous avez maîtrisé ce niveau d'entraînement. Passez au niveau supérieur pour continuer à progresser!";
1689
+ icon.className = "fas fa-award";
1690
+ } else {
1691
+ const messages = [
1692
+ "Entraînement réussi! Vos capacités s'améliorent!",
1693
+ "Nouveau record établi! Continuez comme ça!",
1694
+ "Votre détermination impressionne même le système!",
1695
+ "Un pas de plus vers le niveau S-Rank!",
1696
+ "Vos ombres se renforcent avec vous!"
1697
+ ];
1698
+ const randomMessage = messages[Math.floor(Math.random() * messages.length)];
1699
+
1700
+ title.textContent = "Entraînement Terminé!";
1701
+ text.textContent = randomMessage;
1702
+ icon.className = "fas fa-trophy";
1703
+ }
1704
+ }
1705
+
1706
+ // Cacher le message de complétion
1707
+ function hideCompletion() {
1708
+ const container = document.getElementById("completion-container");
1709
+ const message = container.querySelector(".completion-message");
1710
+
1711
+ message.style.transform = 'translateY(30px) scale(0.9)';
1712
+ setTimeout(() => {
1713
+ container.style.opacity = '0';
1714
+ container.style.pointerEvents = 'none';
1715
+ message.classList.remove('max-level');
1716
+ }, 300);
1717
+ }
1718
+
1719
+ // Animer l'augmentation des statistiques
1720
+ function animateStatIncrease(str, agi, sta, wil) {
1721
+ const anim = (statId, increment) => {
1722
+ if (increment <= 0) return;
1723
+
1724
+ const el = document.getElementById(statId);
1725
+ if (el) {
1726
+ el.textContent = `+${increment}`;
1727
+ el.style.opacity = '1';
1728
+ el.style.transform = 'translateY(0)';
1729
+
1730
+ setTimeout(() => {
1731
+ el.style.opacity = '0';
1732
+ el.style.transform = 'translateY(-20px)';
1733
+ }, 1000);
1734
+ }
1735
+ };
1736
+
1737
+ anim('strength-increase', str);
1738
+ anim('agility-increase', agi);
1739
+ anim('stamina-increase', sta);
1740
+ anim('willpower-increase', wil);
1741
+
1742
+ // Petite animation des valeurs de stats
1743
+ const stats = ['strength', 'agility', 'stamina', 'willpower'];
1744
+ stats.forEach(stat => {
1745
+ const el = document.getElementById(`${stat}-stat`);
1746
+ el.style.transform = 'scale(1.1)';
1747
+ setTimeout(() => {
1748
+ el.style.transform = 'scale(1)';
1749
+ }, 300);
1750
+ });
1751
+ }
1752
+
1753
+ // Mettre à jour la barre de progression
1754
+ function updateProgressBar(progress) {
1755
+ const progressBar = document.getElementById("progress-bar");
1756
+ const progressPercent = document.getElementById("progress-percent");
1757
+
1758
+ // Animation fluide
1759
+ let start = null;
1760
+ const duration = 1000;
1761
+ const startProgress = parseInt(progressBar.style.width) || 0;
1762
+
1763
+ function animate(timestamp) {
1764
+ if (!start) start = timestamp;
1765
+ const progressRatio = (timestamp - start) / duration;
1766
+ const current = Math.floor(startProgress + (progress - startProgress) * Math.min(progressRatio, 1));
1767
+
1768
+ progressBar.style.width = current + '%';
1769
+ progressPercent.textContent = current + '%';
1770
+
1771
+ if (progressRatio < 1) {
1772
+ requestAnimationFrame(animate);
1773
+ }
1774
+ }
1775
+
1776
+ requestAnimationFrame(animate);
1777
+
1778
+ // Changer la couleur si proche de 100%
1779
+ if (progress >= 90) {
1780
+ progressBar.style.background = "linear-gradient(90deg, #ff8a00, #ffcc00)";
1781
+ } else if (progress >= 70) {
1782
+ progressBar.style.background = "linear-gradient(90deg, var(--primary), var(--secondary))";
1783
+ }
1784
+ }
1785
+
1786
+ // Mettre à jour l'affichage du niveau
1787
+ function updateLevelDisplay() {
1788
+ const levelNames = {
1789
+ "débutant": "Débutant",
1790
+ "intermédiaire": "Intermédiaire",
1791
+ "avancé": "Avancé"
1792
+ };
1793
+
1794
+ const levelColors = {
1795
+ "débutant": "linear-gradient(45deg, var(--secondary), var(--secondary-light))",
1796
+ "intermédiaire": "linear-gradient(45deg, var(--primary), #8a2be2)",
1797
+ "avancé": "linear-gradient(45deg, #8a2be2, #ff00ff)"
1798
+ };
1799
+
1800
+ const badge = document.querySelector(".level-badge");
1801
+ badge.style.background = levelColors[currentLevel];
1802
+ document.getElementById("current-level").textContent = levelNames[currentLevel];
1803
+ document.getElementById("program-level-display").textContent = levelNames[currentLevel];
1804
+ }
1805
+
1806
+ // Mettre à jour le niveau du joueur
1807
+ function updatePlayerLevel() {
1808
+ document.getElementById("player-level").textContent = playerLevel;
1809
+
1810
+ // Animation du niveau
1811
+ const levelEl = document.getElementById("player-level");
1812
+ levelEl.style.transform = 'scale(1.3)';
1813
+ setTimeout(() => {
1814
+ levelEl.style.transform = 'scale(1)';
1815
+ }, 300);
1816
+ }
1817
+
1818
+ // Mettre à jour les statistiques
1819
+ function updateStats() {
1820
+ document.getElementById("strength-stat").textContent = strength;
1821
+ document.getElementById("agility-stat").textContent = agility;
1822
+ document.getElementById("stamina-stat").textContent = stamina;
1823
+ document.getElementById("willpower-stat").textContent = willpower;
1824
+ }
1825
+
1826
+ // Initialisation
1827
+ document.addEventListener('DOMContentLoaded', () => {
1828
+ generateParticles();
1829
+ updateStats();
1830
+ updateLevelDisplay();
1831
+ updatePlayerLevel();
1832
+
1833
+ // Activer l'animation on scroll
1834
+ const observer = new IntersectionObserver((entries) => {
1835
+ entries.forEach(entry => {
1836
+ if (entry.isIntersecting) {
1837
+ entry.target.style.opacity = '1';
1838
+ entry.target.style.transform = 'translateY(0)';
1839
+ }
1840
+ });
1841
+ }, { threshold: 0.1 });
1842
+
1843
+ document.querySelectorAll('.stat, .exercise').forEach(el => {
1844
+ observer.observe(el);
1845
+ });
1846
+ });
1847
+ </script>
1848
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1849
+ </html>