Hugging Face's logo

Spaces:
docto41
/
site-ia
Running

App Files Community
docto41 commited on
Commit
573e3d4
·
verified ·
1 Parent(s): d72ac39

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1340 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Site Ia
3
- emoji: ⚡
4
- colorFrom: indigo
5
- colorTo: purple
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: site-ia
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1340 @@
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>NEXUS | Interface Futuriste</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');
14
+
15
+ :root {
16
+ --neon-blue: #0ff0fc;
17
+ --neon-pink: #ff2ced;
18
+ --neon-purple: #9d00ff;
19
+ --dark-bg: #0a0a1a;
20
+ }
21
+
22
+ body {
23
+ font-family: 'Rajdhani', sans-serif;
24
+ background-color: var(--dark-bg);
25
+ color: white;
26
+ overflow-x: hidden;
27
+ cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="none" stroke="%230ff0fc" stroke-width="2"/><circle cx="8" cy="8" r="1" fill="%230ff0fc"/></svg>'), auto;
28
+ }
29
+
30
+ h1, h2, h3, .font-orbitron {
31
+ font-family: 'Orbitron', sans-serif;
32
+ text-transform: uppercase;
33
+ letter-spacing: 2px;
34
+ }
35
+
36
+ .neon-text {
37
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
38
+ }
39
+
40
+ .neon-box {
41
+ border: 1px solid var(--neon-blue);
42
+ box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue);
43
+ position: relative;
44
+ overflow: hidden;
45
+ }
46
+
47
+ .neon-box::before {
48
+ content: '';
49
+ position: absolute;
50
+ top: -50%;
51
+ left: -50%;
52
+ width: 200%;
53
+ height: 200%;
54
+ background: linear-gradient(
55
+ to bottom right,
56
+ transparent, transparent, transparent,
57
+ var(--neon-blue),
58
+ transparent, transparent, transparent
59
+ );
60
+ transform: rotate(30deg);
61
+ animation: shine 3s infinite;
62
+ }
63
+
64
+ @keyframes shine {
65
+ 0% { left: -50%; top: -50%; }
66
+ 100% { left: 150%; top: 150%; }
67
+ }
68
+
69
+ .glitch {
70
+ position: relative;
71
+ }
72
+
73
+ .glitch::before, .glitch::after {
74
+ content: attr(data-text);
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ width: 100%;
79
+ height: 100%;
80
+ }
81
+
82
+ .glitch::before {
83
+ color: var(--neon-pink);
84
+ animation: glitch-effect 3s infinite;
85
+ clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
86
+ }
87
+
88
+ .glitch::after {
89
+ color: var(--neon-purple);
90
+ animation: glitch-effect 2s infinite reverse;
91
+ clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
92
+ }
93
+
94
+ @keyframes glitch-effect {
95
+ 0% { transform: translate(0); }
96
+ 20% { transform: translate(-3px, 3px); }
97
+ 40% { transform: translate(-3px, -3px); }
98
+ 60% { transform: translate(3px, 3px); }
99
+ 80% { transform: translate(3px, -3px); }
100
+ 100% { transform: translate(0); }
101
+ }
102
+
103
+ .holographic-card {
104
+ background: rgba(10, 10, 30, 0.7);
105
+ backdrop-filter: blur(10px);
106
+ border-radius: 10px;
107
+ border: 1px solid rgba(255, 255, 255, 0.1);
108
+ box-shadow: 0 8px 32px 0 rgba(0, 255, 252, 0.2);
109
+ transition: all 0.3s ease;
110
+ }
111
+
112
+ .holographic-card:hover {
113
+ transform: translateY(-10px);
114
+ box-shadow: 0 12px 40px 0 rgba(0, 255, 252, 0.3);
115
+ }
116
+
117
+ .scanline {
118
+ position: absolute;
119
+ top: 0;
120
+ left: 0;
121
+ width: 100%;
122
+ height: 100%;
123
+ background: linear-gradient(
124
+ to bottom,
125
+ transparent 0%,
126
+ rgba(0, 255, 252, 0.1) 50%,
127
+ transparent 100%
128
+ );
129
+ animation: scan 8s linear infinite;
130
+ pointer-events: none;
131
+ }
132
+
133
+ @keyframes scan {
134
+ 0% { transform: translateY(-100%); }
135
+ 100% { transform: translateY(100%); }
136
+ }
137
+
138
+ .particles {
139
+ position: fixed;
140
+ top: 0;
141
+ left: 0;
142
+ width: 100%;
143
+ height: 100%;
144
+ z-index: -1;
145
+ pointer-events: none;
146
+ }
147
+
148
+ .terminal {
149
+ background: rgba(0, 0, 0, 0.7);
150
+ border: 1px solid var(--neon-blue);
151
+ border-radius: 5px;
152
+ font-family: 'Courier New', monospace;
153
+ position: relative;
154
+ }
155
+
156
+ .terminal-header {
157
+ background: rgba(0, 0, 0, 0.5);
158
+ padding: 5px 10px;
159
+ border-bottom: 1px solid var(--neon-blue);
160
+ }
161
+
162
+ .terminal-body {
163
+ padding: 15px;
164
+ height: 200px;
165
+ overflow-y: auto;
166
+ }
167
+
168
+ .terminal-input {
169
+ color: var(--neon-blue);
170
+ }
171
+
172
+ .cursor {
173
+ display: inline-block;
174
+ width: 10px;
175
+ height: 15px;
176
+ background: var(--neon-blue);
177
+ animation: blink 1s infinite;
178
+ }
179
+
180
+ @keyframes blink {
181
+ 0%, 100% { opacity: 1; }
182
+ 50% { opacity: 0; }
183
+ }
184
+
185
+ .cyber-button {
186
+ position: relative;
187
+ padding: 15px 30px;
188
+ background: transparent;
189
+ color: var(--neon-blue);
190
+ border: 2px solid var(--neon-blue);
191
+ font-family: 'Orbitron', sans-serif;
192
+ text-transform: uppercase;
193
+ letter-spacing: 3px;
194
+ cursor: pointer;
195
+ overflow: hidden;
196
+ transition: all 0.3s;
197
+ }
198
+
199
+ .cyber-button:hover {
200
+ color: var(--dark-bg);
201
+ background: var(--neon-blue);
202
+ box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
203
+ }
204
+
205
+ .cyber-button::before {
206
+ content: '';
207
+ position: absolute;
208
+ top: 0;
209
+ left: -100%;
210
+ width: 100%;
211
+ height: 100%;
212
+ background: linear-gradient(90deg, transparent, rgba(0, 255, 252, 0.4), transparent);
213
+ transition: 0.5s;
214
+ }
215
+
216
+ .cyber-button:hover::before {
217
+ left: 100%;
218
+ }
219
+
220
+ .hexagon {
221
+ position: relative;
222
+ width: 60px;
223
+ height: 34.64px;
224
+ background-color: var(--neon-blue);
225
+ margin: 17.32px 0;
226
+ display: inline-block;
227
+ }
228
+
229
+ .hexagon:before,
230
+ .hexagon:after {
231
+ content: "";
232
+ position: absolute;
233
+ width: 0;
234
+ border-left: 30px solid transparent;
235
+ border-right: 30px solid transparent;
236
+ }
237
+
238
+ .hexagon:before {
239
+ bottom: 100%;
240
+ border-bottom: 17.32px solid var(--neon-blue);
241
+ }
242
+
243
+ .hexagon:after {
244
+ top: 100%;
245
+ border-top: 17.32px solid var(--neon-blue);
246
+ }
247
+
248
+ .hexagon-container {
249
+ display: flex;
250
+ justify-content: center;
251
+ align-items: center;
252
+ animation: float 6s ease-in-out infinite;
253
+ }
254
+
255
+ @keyframes float {
256
+ 0%, 100% { transform: translateY(0); }
257
+ 50% { transform: translateY(-20px); }
258
+ }
259
+
260
+ .data-stream {
261
+ position: relative;
262
+ height: 2px;
263
+ background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
264
+ margin: 20px 0;
265
+ overflow: hidden;
266
+ }
267
+
268
+ .data-stream::after {
269
+ content: '';
270
+ position: absolute;
271
+ top: 0;
272
+ left: 0;
273
+ width: 100%;
274
+ height: 100%;
275
+ background: linear-gradient(90deg, transparent, rgba(0, 255, 252, 0.8), transparent);
276
+ animation: stream 2s linear infinite;
277
+ }
278
+
279
+ @keyframes stream {
280
+ 0% { transform: translateX(-100%); }
281
+ 100% { transform: translateX(100%); }
282
+ }
283
+
284
+ .grid-overlay {
285
+ position: fixed;
286
+ top: 0;
287
+ left: 0;
288
+ width: 100%;
289
+ height: 100%;
290
+ background:
291
+ linear-gradient(rgba(0, 255, 252, 0.05) 1px, transparent 1px),
292
+ linear-gradient(90deg, rgba(0, 255, 252, 0.05) 1px, transparent 1px);
293
+ background-size: 50px 50px;
294
+ pointer-events: none;
295
+ z-index: -1;
296
+ }
297
+
298
+ .empire-panel {
299
+ position: fixed;
300
+ top: 50%;
301
+ left: 50%;
302
+ transform: translate(-50%, -50%);
303
+ width: 80%;
304
+ max-width: 800px;
305
+ background: rgba(10, 10, 30, 0.95);
306
+ border: 2px solid var(--neon-pink);
307
+ box-shadow: 0 0 30px var(--neon-pink);
308
+ padding: 30px;
309
+ z-index: 1000;
310
+ display: none;
311
+ border-radius: 10px;
312
+ }
313
+
314
+ .empire-panel h2 {
315
+ color: var(--neon-pink);
316
+ margin-bottom: 20px;
317
+ }
318
+
319
+ .empire-panel p {
320
+ margin-bottom: 20px;
321
+ }
322
+
323
+ .empire-overlay {
324
+ position: fixed;
325
+ top: 0;
326
+ left: 0;
327
+ width: 100%;
328
+ height: 100%;
329
+ background: rgba(0, 0, 0, 0.8);
330
+ z-index: 999;
331
+ display: none;
332
+ }
333
+
334
+ .auto-pilot-active {
335
+ position: fixed;
336
+ bottom: 20px;
337
+ left: 20px;
338
+ background: rgba(0, 255, 0, 0.2);
339
+ border: 1px solid rgba(0, 255, 0, 0.5);
340
+ padding: 10px 20px;
341
+ border-radius: 5px;
342
+ display: none;
343
+ z-index: 1001;
344
+ animation: pulse 2s infinite;
345
+ }
346
+
347
+ @keyframes pulse {
348
+ 0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.4); }
349
+ 70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
350
+ 100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
351
+ }
352
+
353
+ .robot-mode-active {
354
+ position: fixed;
355
+ bottom: 60px;
356
+ left: 20px;
357
+ background: rgba(0, 255, 252, 0.2);
358
+ border: 1px solid rgba(0, 255, 252, 0.5);
359
+ padding: 10px 20px;
360
+ border-radius: 5px;
361
+ display: none;
362
+ z-index: 1001;
363
+ animation: pulse-blue 2s infinite;
364
+ }
365
+
366
+ @keyframes pulse-blue {
367
+ 0% { box-shadow: 0 0 0 0 rgba(0, 255, 252, 0.4); }
368
+ 70% { box-shadow: 0 0 0 10px rgba(0, 255, 252, 0); }
369
+ 100% { box-shadow: 0 0 0 0 rgba(0, 255, 252, 0); }
370
+ }
371
+ </style>
372
+ </head>
373
+ <body class="antialiased">
374
+ <!-- Grid Overlay -->
375
+ <div class="grid-overlay"></div>
376
+
377
+ <!-- Particles Background -->
378
+ <div id="particles-js" class="particles"></div>
379
+
380
+ <!-- Auto-pilot and Robot mode indicators -->
381
+ <div id="auto-pilot-indicator" class="auto-pilot-active">
382
+ <i class="fas fa-robot mr-2"></i> AUTOPILOTE ACTIVÉ
383
+ </div>
384
+
385
+ <div id="robot-mode-indicator" class="robot-mode-active">
386
+ <i class="fas fa-cogs mr-2"></i> MODE ROBOTISÉ ACTIVÉ
387
+ </div>
388
+
389
+ <!-- Empire Panel -->
390
+ <div id="empire-overlay" class="empire-overlay"></div>
391
+
392
+ <div id="empire-panel" class="empire-panel">
393
+ <h2 class="text-3xl font-orbitron">MON EMPIRE</h2>
394
+ <p>Système impérial activé. Tous les modules sont maintenant sous votre contrôle absolu.</p>
395
+
396
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
397
+ <div class="p-4 border border-neon-purple rounded">
398
+ <h3 class="font-orbitron text-neon-purple mb-2">STATUT DU SYSTÈME</h3>
399
+ <div class="space-y-2">
400
+ <div class="flex justify-between">
401
+ <span>Puissance:</span>
402
+ <span class="text-neon-blue">100%</span>
403
+ </div>
404
+ <div class="flex justify-between">
405
+ <span>Contrôle:</span>
406
+ <span class="text-neon-pink">Total</span>
407
+ </div>
408
+ <div class="flex justify-between">
409
+ <span>Réseaux:</span>
410
+ <span class="text-neon-purple">Synchronisés</span>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="p-4 border border-neon-blue rounded">
416
+ <h3 class="font-orbitron text-neon-blue mb-2">COMMANDES</h3>
417
+ <div class="space-y-2">
418
+ <button id="activate-all" class="cyber-button w-full border-neon-blue">
419
+ <i class="fas fa-power-off mr-2"></i> TOUT ACTIVER
420
+ </button>
421
+ <button id="robotize-all" class="cyber-button w-full border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black">
422
+ <i class="fas fa-robot mr-2"></i> ROBOTISER TOUT
423
+ </button>
424
+ <button id="auto-pilot" class="cyber-button w-full border-neon-purple text-neon-purple hover:bg-neon-purple hover:text-black">
425
+ <i class="fas fa-space-shuttle mr-2"></i> AUTOPILOTE
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="mt-6 flex justify-end space-x-4">
432
+ <button id="close-empire" class="cyber-button border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black">
433
+ FERMER
434
+ </button>
435
+ <button id="confirm-empire" class="cyber-button bg-neon-purple text-black hover:bg-neon-blue">
436
+ CONFIRMER
437
+ </button>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- Navigation -->
442
+ <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-900">
443
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
444
+ <div class="flex justify-between h-16 items-center">
445
+ <div class="flex-shrink-0 flex items-center">
446
+ <div class="hexagon-container">
447
+ <div class="hexagon"></div>
448
+ </div>
449
+ <span class="ml-3 font-orbitron text-xl neon-text">NEXUS</span>
450
+ </div>
451
+ <div class="hidden md:block">
452
+ <div class="ml-10 flex items-baseline space-x-8">
453
+ <a href="#" class="text-white hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium font-orbitron transition-all duration-300 neon-text">ACCUEIL</a>
454
+ <a href="#services" class="text-gray-300 hover:text-neon-pink px-3 py-2 rounded-md text-sm font-medium font-orbitron transition-all duration-300">SERVICES</a>
455
+ <a href="#technologies" class="text-gray-300 hover:text-neon-purple px-3 py-2 rounded-md text-sm font-medium font-orbitron transition-all duration-300">TECHNOLOGIES</a>
456
+ <a href="#contact" class="text-gray-300 hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium font-orbitron transition-all duration-300">CONTACT</a>
457
+ </div>
458
+ </div>
459
+ <div class="md:hidden">
460
+ <button id="mobile-menu-button" class="cyber-button text-xs">MENU</button>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </nav>
465
+
466
+ <!-- Mobile Menu -->
467
+ <div id="mobile-menu" class="hidden fixed inset-0 z-40 bg-black bg-opacity-90 backdrop-filter backdrop-blur-lg">
468
+ <div class="flex items-center justify-center h-full">
469
+ <div class="text-center">
470
+ <button id="close-mobile-menu" class="absolute top-4 right-4 text-2xl text-neon-pink">
471
+ <i class="fas fa-times"></i>
472
+ </button>
473
+ <div class="space-y-6">
474
+ <a href="#" class="block text-2xl font-orbitron text-neon-blue hover:text-neon-pink">ACCUEIL</a>
475
+ <a href="#services" class="block text-2xl font-orbitron text-neon-blue hover:text-neon-pink">SERVICES</a>
476
+ <a href="#technologies" class="block text-2xl font-orbitron text-neon-blue hover:text-neon-pink">TECHNOLOGIES</a>
477
+ <a href="#contact" class="block text-2xl font-orbitron text-neon-blue hover:text-neon-pink">CONTACT</a>
478
+ <button id="empire-btn-mobile" class="cyber-button text-xl mt-10 border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black">
479
+ MON EMPIRE
480
+ </button>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- Hero Section -->
487
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
488
+ <div class="absolute inset-0 z-0">
489
+ <div class="scanline"></div>
490
+ </div>
491
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10 text-center">
492
+ <h1 class="glitch text-6xl md:text-8xl font-bold mb-6 neon-text" data-text="NEXUS">NEXUS</h1>
493
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Interface quantique de nouvelle génération pour l'ère numérique</p>
494
+ <div class="flex justify-center space-x-4">
495
+ <button id="access-btn" class="cyber-button">
496
+ <i class="fas fa-key mr-2"></i> ACCÉDER
497
+ </button>
498
+ <button id="demo-btn" class="cyber-button border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black">
499
+ <i class="fas fa-play mr-2"></i> DÉMO
500
+ </button>
501
+ <button id="empire-btn" class="cyber-button border-neon-purple text-neon-purple hover:bg-neon-purple hover:text-black">
502
+ <i class="fas fa-crown mr-2"></i> MON EMPIRE
503
+ </button>
504
+ </div>
505
+ </div>
506
+
507
+ <!-- Floating elements -->
508
+ <div class="absolute top-1/4 left-1/4 w-10 h-10 rounded-full bg-neon-blue opacity-20 animate-pulse"></div>
509
+ <div class="absolute top-1/3 right-1/4 w-16 h-16 rounded-full bg-neon-pink opacity-20 animate-pulse" style="animation-delay: 0.5s;"></div>
510
+ <div class="absolute bottom-1/4 left-1/3 w-20 h-20 rounded-full bg-neon-purple opacity-20 animate-pulse" style="animation-delay: 1s;"></div>
511
+ </section>
512
+
513
+ <!-- Data Stream Divider -->
514
+ <div class="data-stream"></div>
515
+
516
+ <!-- Services Section -->
517
+ <section id="services" class="py-20 relative">
518
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
519
+ <h2 class="text-4xl font-bold text-center mb-16 font-orbitron neon-text">NOS SERVICES</h2>
520
+
521
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
522
+ <!-- Service 1 -->
523
+ <div class="holographic-card p-8 relative overflow-hidden">
524
+ <div class="text-neon-blue text-4xl mb-4">
525
+ <i class="fas fa-brain"></i>
526
+ </div>
527
+ <h3 class="text-2xl font-bold mb-4 font-orbitron">INTELLIGENCE QUANTIQUE</h3>
528
+ <p class="text-gray-300">Algorithmes quantiques révolutionnaires pour résoudre des problèmes complexes en temps réel.</p>
529
+ <div class="mt-6">
530
+ <span class="inline-block px-3 py-1 text-xs font-semibold bg-neon-blue bg-opacity-20 text-neon-blue rounded-full">Nouveau</span>
531
+ </div>
532
+ <button class="cyber-button w-full mt-6 activate-service" data-service="quantique">
533
+ <i class="fas fa-power-off mr-2"></i> ACTIVER
534
+ </button>
535
+ </div>
536
+
537
+ <!-- Service 2 -->
538
+ <div class="holographic-card p-8 relative overflow-hidden">
539
+ <div class="text-neon-pink text-4xl mb-4">
540
+ <i class="fas fa-shield-alt"></i>
541
+ </div>
542
+ <h3 class="text-2xl font-bold mb-4 font-orbitron">CYBER-SÉCURITÉ</h3>
543
+ <p class="text-gray-300">Protection avancée contre les menaces cybernétiques avec cryptographie post-quantique.</p>
544
+ <div class="mt-6">
545
+ <span class="inline-block px-3 py-1 text-xs font-semibold bg-neon-pink bg-opacity-20 text-neon-pink rounded-full">Sécurisé</span>
546
+ </div>
547
+ <button class="cyber-button w-full mt-6 border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black activate-service" data-service="securite">
548
+ <i class="fas fa-power-off mr-2"></i> ACTIVER
549
+ </button>
550
+ </div>
551
+
552
+ <!-- Service 3 -->
553
+ <div class="holographic-card p-8 relative overflow-hidden">
554
+ <div class="text-neon-purple text-4xl mb-4">
555
+ <i class="fas fa-cloud"></i>
556
+ </div>
557
+ <h3 class="text-2xl font-bold mb-4 font-orbitron">CLOUD NEURAL</h3>
558
+ <p class="text-gray-300">Infrastructure cloud distribuée avec apprentissage automatique intégré à chaque nœud.</p>
559
+ <div class="mt-6">
560
+ <span class="inline-block px-3 py-1 text-xs font-semibold bg-neon-purple bg-opacity-20 text-neon-purple rounded-full">Évolutif</span>
561
+ </div>
562
+ <button class="cyber-button w-full mt-6 border-neon-purple text-neon-purple hover:bg-neon-purple hover:text-black activate-service" data-service="cloud">
563
+ <i class="fas fa-power-off mr-2"></i> ACTIVER
564
+ </button>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </section>
569
+
570
+ <!-- Data Stream Divider -->
571
+ <div class="data-stream"></div>
572
+
573
+ <!-- Technologies Section -->
574
+ <section id="technologies" class="py-20 bg-black bg-opacity-50 relative">
575
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
576
+ <h2 class="text-4xl font-bold text-center mb-16 font-orbitron neon-text">TECHNOLOGIES</h2>
577
+
578
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
579
+ <div>
580
+ <h3 class="text-3xl font-bold mb-6 font-orbitron">PLATEFORME NEXUS CORE</h3>
581
+ <p class="text-gray-300 mb-8">Notre technologie brevetée utilise des réseaux neuronaux quantiques hybrides pour offrir des performances inégalées.</p>
582
+
583
+ <div class="space-y-6">
584
+ <div>
585
+ <div class="flex items-center mb-2">
586
+ <div class="w-4 h-4 rounded-full bg-neon-blue mr-2"></div>
587
+ <span class="font-orbitron">Calcul Quantique</span>
588
+ </div>
589
+ <div class="w-full bg-gray-800 rounded-full h-2">
590
+ <div class="bg-neon-blue h-2 rounded-full" style="width: 95%"></div>
591
+ </div>
592
+ </div>
593
+
594
+ <div>
595
+ <div class="flex items-center mb-2">
596
+ <div class="w-4 h-4 rounded-full bg-neon-pink mr-2"></div>
597
+ <span class="font-orbitron">Sécurité</span>
598
+ </div>
599
+ <div class="w-full bg-gray-800 rounded-full h-2">
600
+ <div class="bg-neon-pink h-2 rounded-full" style="width: 98%"></div>
601
+ </div>
602
+ </div>
603
+
604
+ <div>
605
+ <div class="flex items-center mb-2">
606
+ <div class="w-4 h-4 rounded-full bg-neon-purple mr-2"></div>
607
+ <span class="font-orbitron">Vitesse</span>
608
+ </div>
609
+ <div class="w-full bg-gray-800 rounded-full h-2">
610
+ <div class="bg-neon-purple h-2 rounded-full" style="width: 99%"></div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+
615
+ <button id="activate-tech" class="cyber-button mt-10 w-full">
616
+ <i class="fas fa-bolt mr-2"></i> ACTIVER LES TECHNOLOGIES
617
+ </button>
618
+ </div>
619
+
620
+ <div class="terminal neon-box">
621
+ <div class="terminal-header flex items-center">
622
+ <div class="flex space-x-2 mr-4">
623
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
624
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
625
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
626
+ </div>
627
+ <span class="text-xs">nexus-core-terminal</span>
628
+ </div>
629
+ <div class="terminal-body">
630
+ <div class="terminal-line"><span class="text-green-400">user@nexus:~$</span> <span class="terminal-input">init core_system</span></div>
631
+ <div class="terminal-line text-purple-300">> Initializing quantum neural network...</div>
632
+ <div class="terminal-line text-blue-300">> Loading AI modules: 100%</div>
633
+ <div class="terminal-line text-green-300">> System ready</div>
634
+ <div class="terminal-line"><span class="text-green-400">user@nexus:~$</span> <span class="terminal-input">run diagnostics</span></div>
635
+ <div class="terminal-line">
636
+ <span class="text-yellow-300">> Running full diagnostic...</span>
637
+ <div class="mt-2">
638
+ <div class="flex">
639
+ <span class="w-24">CPU:</span>
640
+ <span class="text-neon-blue">[||||||||||] 100%</span>
641
+ </div>
642
+ <div class="flex">
643
+ <span class="w-24">MEM:</span>
644
+ <span class="text-neon-pink">[||||||||| ] 87%</span>
645
+ </div>
646
+ <div class="flex">
647
+ <span class="w-24">Q-BITS:</span>
648
+ <span class="text-neon-purple">[||||||||||] 100%</span>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ <div class="terminal-line"><span class="text-green-400">user@nexus:~$</span> <span class="terminal-input"><span class="cursor"></span></span></div>
653
+ </div>
654
+
655
+ <button id="terminal-control" class="cyber-button w-full mt-6 border-neon-blue text-neon-blue hover:bg-neon-blue hover:text-black">
656
+ <i class="fas fa-terminal mr-2"></i> PRENDRE LE CONTRÔLE
657
+ </button>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </section>
662
+
663
+ <!-- Data Stream Divider -->
664
+ <div class="data-stream"></div>
665
+
666
+ <!-- Contact Section -->
667
+ <section id="contact" class="py-20 relative">
668
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
669
+ <h2 class="text-4xl font-bold text-center mb-16 font-orbitron neon-text">CONTACT</h2>
670
+
671
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
672
+ <div class="holographic-card p-8">
673
+ <h3 class="text-2xl font-bold mb-6 font-orbitron">ENVOYEZ-NOUS UN MESSAGE</h3>
674
+
675
+ <form id="contact-form">
676
+ <div class="mb-6">
677
+ <label class="block text-gray-300 mb-2">NOM</label>
678
+ <input type="text" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-blue focus:ring-1 focus:ring-neon-blue rounded px-4 py-2 outline-none transition duration-300" required>
679
+ </div>
680
+
681
+ <div class="mb-6">
682
+ <label class="block text-gray-300 mb-2">EMAIL</label>
683
+ <input type="email" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-pink focus:ring-1 focus:ring-neon-pink rounded px-4 py-2 outline-none transition duration-300" required>
684
+ </div>
685
+
686
+ <div class="mb-6">
687
+ <label class="block text-gray-300 mb-2">MESSAGE</label>
688
+ <textarea rows="5" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-purple focus:ring-1 focus:ring-neon-purple rounded px-4 py-2 outline-none transition duration-300" required></textarea>
689
+ </div>
690
+
691
+ <button type="submit" class="cyber-button w-full">
692
+ <i class="fas fa-paper-plane mr-2"></i> ENVOYER
693
+ </button>
694
+ </form>
695
+ </div>
696
+
697
+ <div>
698
+ <h3 class="text-2xl font-bold mb-6 font-orbitron">INFORMATIONS</h3>
699
+
700
+ <div class="space-y-6">
701
+ <div class="flex items-start">
702
+ <div class="text-neon-blue text-xl mr-4 mt-1">
703
+ <i class="fas fa-map-marker-alt"></i>
704
+ </div>
705
+ <div>
706
+ <h4 class="font-orbitron text-lg mb-1">ADRESSE</h4>
707
+ <p class="text-gray-300">Nexus Tower, Quantum District<br>Neo-Tokyo, Japon</p>
708
+ </div>
709
+ </div>
710
+
711
+ <div class="flex items-start">
712
+ <div class="text-neon-pink text-xl mr-4 mt-1">
713
+ <i class="fas fa-phone-alt"></i>
714
+ </div>
715
+ <div>
716
+ <h4 class="font-orbitron text-lg mb-1">TÉLÉPHONE</h4>
717
+ <p class="text-gray-300">+81 3-XXXX-XXXX</p>
718
+ </div>
719
+ </div>
720
+
721
+ <div class="flex items-start">
722
+ <div class="text-neon-purple text-xl mr-4 mt-1">
723
+ <i class="fas fa-envelope"></i>
724
+ </div>
725
+ <div>
726
+ <h4 class="font-orbitron text-lg mb-1">EMAIL</h4>
727
+ <p class="text-gray-300">[email protected]</p>
728
+ </div>
729
+ </div>
730
+ </div>
731
+
732
+ <div class="mt-12">
733
+ <h4 class="font-orbitron text-lg mb-4">RÉSEAUX SOCIAUX</h4>
734
+ <div class="flex space-x-4">
735
+ <a href="#" class="w-10 h-10 rounded-full border border-neon-blue flex items-center justify-center text-neon-blue hover:bg-neon-blue hover:text-black transition duration-300">
736
+ <i class="fab fa-twitter"></i>
737
+ </a>
738
+ <a href="#" class="w-10 h-10 rounded-full border border-neon-pink flex items-center justify-center text-neon-pink hover:bg-neon-pink hover:text-black transition duration-300">
739
+ <i class="fab fa-instagram"></i>
740
+ </a>
741
+ <a href="#" class="w-10 h-10 rounded-full border border-neon-purple flex items-center justify-center text-neon-purple hover:bg-neon-purple hover:text-black transition duration-300">
742
+ <i class="fab fa-github"></i>
743
+ </a>
744
+ <a href="#" class="w-10 h-10 rounded-full border border-neon-blue flex items-center justify-center text-neon-blue hover:bg-neon-blue hover:text-black transition duration-300">
745
+ <i class="fab fa-linkedin-in"></i>
746
+ </a>
747
+ </div>
748
+ </div>
749
+
750
+ <button id="emergency-contact" class="cyber-button w-full mt-10 border-red-500 text-red-500 hover:bg-red-500 hover:text-black">
751
+ <i class="fas fa-exclamation-triangle mr-2"></i> CONTACT D'URGENCE
752
+ </button>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </section>
757
+
758
+ <!-- Footer -->
759
+ <footer class="bg-black bg-opacity-80 py-12 border-t border-gray-900">
760
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
761
+ <div class="flex flex-col md:flex-row justify-between items-center">
762
+ <div class="flex items-center mb-6 md:mb-0">
763
+ <div class="hexagon-container">
764
+ <div class="hexagon"></div>
765
+ </div>
766
+ <span class="ml-3 font-orbitron text-xl neon-text">NEXUS</span>
767
+ </div>
768
+
769
+ <div class="text-center md:text-right">
770
+ <p class="text-gray-400 text-sm">© 2023 NEXUS Technologies. Tous droits réservés.</p>
771
+ <p class="text-gray-500 text-xs mt-2">Interface quantique v4.2.1</p>
772
+ </div>
773
+ </div>
774
+ </div>
775
+ </footer>
776
+
777
+ <!-- Floating Action Button -->
778
+ <div class="fixed bottom-8 right-8 z-50">
779
+ <button id="fab" class="w-16 h-16 rounded-full bg-neon-blue text-black flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110">
780
+ <i class="fas fa-arrow-up text-xl"></i>
781
+ </button>
782
+ </div>
783
+
784
+ <script>
785
+ // Initialize Three.js particles
786
+ document.addEventListener('DOMContentLoaded', function() {
787
+ // Particle system
788
+ const particleCount = 500;
789
+ const particles = new THREE.BufferGeometry();
790
+ const particlePositions = new Float32Array(particleCount * 3);
791
+ const particleSizes = new Float32Array(particleCount);
792
+
793
+ for (let i = 0; i < particleCount; i++) {
794
+ const i3 = i * 3;
795
+ particlePositions[i3] = (Math.random() - 0.5) * 2000;
796
+ particlePositions[i3 + 1] = (Math.random() - 0.5) * 2000;
797
+ particlePositions[i3 + 2] = (Math.random() - 0.5) * 2000;
798
+ particleSizes[i] = Math.random() * 3;
799
+ }
800
+
801
+ particles.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));
802
+ particles.setAttribute('size', new THREE.BufferAttribute(particleSizes, 1));
803
+
804
+ const particleMaterial = new THREE.PointsMaterial({
805
+ color: 0x0ff0fc,
806
+ size: 1,
807
+ sizeAttenuation: true,
808
+ transparent: true,
809
+ opacity: 0.8,
810
+ blending: THREE.AdditiveBlending
811
+ });
812
+
813
+ const particleSystem = new THREE.Points(particles, particleMaterial);
814
+
815
+ // Scene setup
816
+ const scene = new THREE.Scene();
817
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
818
+ camera.position.z = 100;
819
+
820
+ const renderer = new THREE.WebGLRenderer({ alpha: true });
821
+ renderer.setSize(window.innerWidth, window.innerHeight);
822
+ document.getElementById('particles-js').appendChild(renderer.domElement);
823
+
824
+ // Animation
825
+ function animate() {
826
+ requestAnimationFrame(animate);
827
+
828
+ particleSystem.rotation.x += 0.0005;
829
+ particleSystem.rotation.y += 0.001;
830
+
831
+ renderer.render(scene, camera);
832
+ }
833
+
834
+ animate();
835
+
836
+ // Handle window resize
837
+ window.addEventListener('resize', function() {
838
+ camera.aspect = window.innerWidth / window.innerHeight;
839
+ camera.updateProjectionMatrix();
840
+ renderer.setSize(window.innerWidth, window.innerHeight);
841
+ });
842
+
843
+ // GSAP animations
844
+ gsap.registerPlugin(ScrollTrigger);
845
+
846
+ // Animate elements on scroll
847
+ gsap.utils.toArray('.holographic-card').forEach(card => {
848
+ gsap.from(card, {
849
+ scrollTrigger: {
850
+ trigger: card,
851
+ start: "top 80%",
852
+ toggleActions: "play none none none"
853
+ },
854
+ y: 50,
855
+ opacity: 0,
856
+ duration: 1,
857
+ ease: "power3.out"
858
+ });
859
+ });
860
+
861
+ // Terminal typing effect
862
+ const terminalLines = document.querySelectorAll('.terminal-line');
863
+ let delay = 0;
864
+
865
+ terminalLines.forEach((line, index) => {
866
+ if (index < terminalLines.length - 1) {
867
+ gsap.set(line, { opacity: 0 });
868
+ gsap.to(line, {
869
+ scrollTrigger: {
870
+ trigger: '.terminal',
871
+ start: "top 70%",
872
+ toggleActions: "play none none none"
873
+ },
874
+ opacity: 1,
875
+ delay: delay,
876
+ duration: 0.5
877
+ });
878
+ delay += 0.5;
879
+ }
880
+ });
881
+
882
+ // Floating action button
883
+ const fab = document.getElementById('fab');
884
+ fab.addEventListener('click', () => {
885
+ window.scrollTo({
886
+ top: 0,
887
+ behavior: 'smooth'
888
+ });
889
+ });
890
+
891
+ // Glitch effect on hover for buttons
892
+ const cyberButtons = document.querySelectorAll('.cyber-button');
893
+ cyberButtons.forEach(button => {
894
+ button.addEventListener('mouseenter', () => {
895
+ gsap.to(button, {
896
+ 'text-shadow': '0 0 5px #0ff0fc, 0 0 10px #0ff0fc',
897
+ duration: 0.3
898
+ });
899
+ });
900
+
901
+ button.addEventListener('mouseleave', () => {
902
+ gsap.to(button, {
903
+ 'text-shadow': 'none',
904
+ duration: 0.3
905
+ });
906
+ });
907
+ });
908
+
909
+ // Random glitch effect on headings
910
+ setInterval(() => {
911
+ const headings = document.querySelectorAll('.glitch');
912
+ headings.forEach(heading => {
913
+ if (Math.random() > 0.7) {
914
+ heading.style.animation = 'none';
915
+ void heading.offsetWidth; // Trigger reflow
916
+ heading.style.animation = null;
917
+ }
918
+ });
919
+ }, 3000);
920
+
921
+ // Mouse follower effect
922
+ document.addEventListener('mousemove', (e) => {
923
+ const follower = document.createElement('div');
924
+ follower.className = 'mouse-follower';
925
+ follower.style.position = 'fixed';
926
+ follower.style.left = e.clientX + 'px';
927
+ follower.style.top = e.clientY + 'px';
928
+ follower.style.width = '10px';
929
+ follower.style.height = '10px';
930
+ follower.style.backgroundColor = 'rgba(0, 255, 252, 0.3)';
931
+ follower.style.borderRadius = '50%';
932
+ follower.style.pointerEvents = 'none';
933
+ follower.style.zIndex = '9999';
934
+ follower.style.transform = 'translate(-50%, -50%)';
935
+ document.body.appendChild(follower);
936
+
937
+ gsap.to(follower, {
938
+ scale: 0,
939
+ opacity: 0,
940
+ duration: 0.5,
941
+ onComplete: () => {
942
+ follower.remove();
943
+ }
944
+ });
945
+ });
946
+
947
+ // Empire panel functionality
948
+ const empireBtn = document.getElementById('empire-btn');
949
+ const empireBtnMobile = document.getElementById('empire-btn-mobile');
950
+ const empirePanel = document.getElementById('empire-panel');
951
+ const empireOverlay = document.getElementById('empire-overlay');
952
+ const closeEmpire = document.getElementById('close-empire');
953
+ const confirmEmpire = document.getElementById('confirm-empire');
954
+ const activateAll = document.getElementById('activate-all');
955
+ const robotizeAll = document.getElementById('robotize-all');
956
+ const autoPilot = document.getElementById('auto-pilot');
957
+ const autoPilotIndicator = document.getElementById('auto-pilot-indicator');
958
+ const robotModeIndicator = document.getElementById('robot-mode-indicator');
959
+
960
+ function openEmpirePanel() {
961
+ empirePanel.style.display = 'block';
962
+ empireOverlay.style.display = 'block';
963
+ document.body.style.overflow = 'hidden';
964
+ }
965
+
966
+ function closeEmpirePanel() {
967
+ empirePanel.style.display = 'none';
968
+ empireOverlay.style.display = 'none';
969
+ document.body.style.overflow = '';
970
+ }
971
+
972
+ empireBtn.addEventListener('click', openEmpirePanel);
973
+ empireBtnMobile.addEventListener('click', openEmpirePanel);
974
+ closeEmpire.addEventListener('click', closeEmpirePanel);
975
+ empireOverlay.addEventListener('click', closeEmpirePanel);
976
+
977
+ confirmEmpire.addEventListener('click', () => {
978
+ closeEmpirePanel();
979
+ // Add confirmation effect
980
+ const confirmation = document.createElement('div');
981
+ confirmation.className = 'fixed inset-0 flex items-center justify-center z-50';
982
+ confirmation.innerHTML = `
983
+ <div class="bg-black bg-opacity-90 p-10 rounded-lg border border-neon-purple text-center max-w-md">
984
+ <i class="fas fa-check-circle text-neon-purple text-6xl mb-6"></i>
985
+ <h3 class="font-orbitron text-2xl mb-4">EMPIRE CONFIRMÉ</h3>
986
+ <p class="mb-6">Tous les systèmes sont maintenant sous votre contrôle.</p>
987
+ <button class="cyber-button px-8" id="close-confirmation">CONTINUER</button>
988
+ </div>
989
+ `;
990
+ document.body.appendChild(confirmation);
991
+
992
+ document.getElementById('close-confirmation').addEventListener('click', () => {
993
+ confirmation.remove();
994
+ });
995
+ });
996
+
997
+ // Activate all services
998
+ activateAll.addEventListener('click', () => {
999
+ const serviceButtons = document.querySelectorAll('.activate-service');
1000
+ serviceButtons.forEach(button => {
1001
+ button.innerHTML = '<i class="fas fa-check mr-2"></i> ACTIVÉ';
1002
+ button.classList.add('bg-neon-blue', 'text-black');
1003
+ button.classList.remove('border-neon-blue', 'border-neon-pink', 'border-neon-purple', 'text-neon-blue', 'text-neon-pink', 'text-neon-purple');
1004
+
1005
+ // Add activation effect
1006
+ const card = button.closest('.holographic-card');
1007
+ gsap.to(card, {
1008
+ boxShadow: '0 0 30px rgba(0, 255, 252, 0.5)',
1009
+ duration: 0.5,
1010
+ yoyo: true,
1011
+ repeat: 1
1012
+ });
1013
+ });
1014
+
1015
+ // Show activation message
1016
+ const activationMessage = document.createElement('div');
1017
+ activationMessage.className = 'fixed bottom-4 right-4 bg-black bg-opacity-80 border border-neon-blue px-4 py-2 rounded font-orbitron z-50';
1018
+ activationMessage.innerHTML = '<i class="fas fa-bolt mr-2 text-neon-blue"></i> TOUS LES SYSTÈMES ACTIVÉS';
1019
+ document.body.appendChild(activationMessage);
1020
+
1021
+ setTimeout(() => {
1022
+ gsap.to(activationMessage, {
1023
+ opacity: 0,
1024
+ duration: 0.5,
1025
+ onComplete: () => activationMessage.remove()
1026
+ });
1027
+ }, 3000);
1028
+ });
1029
+
1030
+ // Robotize all
1031
+ robotizeAll.addEventListener('click', () => {
1032
+ robotModeIndicator.style.display = 'block';
1033
+
1034
+ // Add robotization effect to all interactive elements
1035
+ const interactiveElements = document.querySelectorAll('button, a, input, textarea');
1036
+ interactiveElements.forEach(el => {
1037
+ el.style.transition = 'all 0.3s';
1038
+ el.style.borderColor = 'var(--neon-blue)';
1039
+
1040
+ if (el.tagName === 'BUTTON' || el.tagName === 'A') {
1041
+ el.classList.add('font-orbitron');
1042
+ }
1043
+ });
1044
+
1045
+ // Add robotic sound effect
1046
+ const audio = new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...');
1047
+ audio.volume = 0.3;
1048
+ audio.play();
1049
+
1050
+ // Show robotization message
1051
+ const robotMessage = document.createElement('div');
1052
+ robotMessage.className = 'fixed bottom-4 right-4 bg-black bg-opacity-80 border border-neon-blue px-4 py-2 rounded font-orbitron z-50';
1053
+ robotMessage.innerHTML = '<i class="fas fa-robot mr-2 text-neon-blue"></i> MODE ROBOTISÉ ACTIVÉ';
1054
+ document.body.appendChild(robotMessage);
1055
+
1056
+ setTimeout(() => {
1057
+ gsap.to(robotMessage, {
1058
+ opacity: 0,
1059
+ duration: 0.5,
1060
+ onComplete: () => robotMessage.remove()
1061
+ });
1062
+ }, 3000);
1063
+ });
1064
+
1065
+ // Auto-pilot
1066
+ autoPilot.addEventListener('click', () => {
1067
+ autoPilotIndicator.style.display = 'block';
1068
+
1069
+ // Simulate auto-pilot behavior
1070
+ let currentSection = 0;
1071
+ const sections = ['hero', 'services', 'technologies', 'contact'];
1072
+
1073
+ function autoScroll() {
1074
+ if (currentSection < sections.length) {
1075
+ document.getElementById(sections[currentSection]).scrollIntoView({
1076
+ behavior: 'smooth'
1077
+ });
1078
+ currentSection++;
1079
+ setTimeout(autoScroll, 3000);
1080
+ } else {
1081
+ currentSection = 0;
1082
+ setTimeout(autoScroll, 3000);
1083
+ }
1084
+ }
1085
+
1086
+ autoScroll();
1087
+
1088
+ // Show auto-pilot message
1089
+ const autoPilotMessage = document.createElement('div');
1090
+ autoPilotMessage.className = 'fixed bottom-4 right-4 bg-black bg-opacity-80 border border-green-500 px-4 py-2 rounded font-orbitron z-50';
1091
+ autoPilotMessage.innerHTML = '<i class="fas fa-space-shuttle mr-2 text-green-500"></i> AUTOPILOTE ACTIVÉ';
1092
+ document.body.appendChild(autoPilotMessage);
1093
+
1094
+ setTimeout(() => {
1095
+ gsap.to(autoPilotMessage, {
1096
+ opacity: 0,
1097
+ duration: 0.5,
1098
+ onComplete: () => autoPilotMessage.remove()
1099
+ });
1100
+ }, 3000);
1101
+ });
1102
+
1103
+ // Mobile menu functionality
1104
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
1105
+ const mobileMenu = document.getElementById('mobile-menu');
1106
+ const closeMobileMenu = document.getElementById('close-mobile-menu');
1107
+
1108
+ mobileMenuButton.addEventListener('click', () => {
1109
+ mobileMenu.style.display = 'block';
1110
+ document.body.style.overflow = 'hidden';
1111
+ });
1112
+
1113
+ closeMobileMenu.addEventListener('click', () => {
1114
+ mobileMenu.style.display = 'none';
1115
+ document.body.style.overflow = '';
1116
+ });
1117
+
1118
+ // Contact form submission
1119
+ const contactForm = document.getElementById('contact-form');
1120
+ contactForm.addEventListener('submit', (e) => {
1121
+ e.preventDefault();
1122
+
1123
+ // Show submission effect
1124
+ const submitMessage = document.createElement('div');
1125
+ submitMessage.className = 'fixed inset-0 flex items-center justify-center z-50';
1126
+ submitMessage.innerHTML = `
1127
+ <div class="bg-black bg-opacity-90 p-10 rounded-lg border border-neon-blue text-center max-w-md">
1128
+ <i class="fas fa-paper-plane text-neon-blue text-6xl mb-6"></i>
1129
+ <h3 class="font-orbitron text-2xl mb-4">MESSAGE ENVOYÉ</h3>
1130
+ <p class="mb-6">Votre message a été transmis aux systèmes centraux.</p>
1131
+ <button class="cyber-button px-8" id="close-submit">CONTINUER</button>
1132
+ </div>
1133
+ `;
1134
+ document.body.appendChild(submitMessage);
1135
+
1136
+ document.getElementById('close-submit').addEventListener('click', () => {
1137
+ submitMessage.remove();
1138
+ contactForm.reset();
1139
+ });
1140
+ });
1141
+
1142
+ // Emergency contact
1143
+ const emergencyContact = document.getElementById('emergency-contact');
1144
+ emergencyContact.addEventListener('click', () => {
1145
+ // Show emergency panel
1146
+ const emergencyPanel = document.createElement('div');
1147
+ emergencyPanel.className = 'fixed inset-0 flex items-center justify-center z-50';
1148
+ emergencyPanel.innerHTML = `
1149
+ <div class="bg-black bg-opacity-90 p-10 rounded-lg border border-red-500 text-center max-w-md">
1150
+ <i class="fas fa-exclamation-triangle text-red-500 text-6xl mb-6"></i>
1151
+ <h3 class="font-orbitron text-2xl mb-4">CONTACT D'URGENCE</h3>
1152
+ <p class="mb-6">Activation du protocole d'urgence. Tous les systèmes sont en alerte.</p>
1153
+ <div class="grid grid-cols-2 gap-4">
1154
+ <button class="cyber-button border-red-500 text-red-500 hover:bg-red-500 hover:text-black" id="confirm-emergency">
1155
+ <i class="fas fa-check mr-2"></i> CONFIRMER
1156
+ </button>
1157
+ <button class="cyber-button" id="cancel-emergency">
1158
+ <i class="fas fa-times mr-2"></i> ANNULER
1159
+ </button>
1160
+ </div>
1161
+ </div>
1162
+ `;
1163
+ document.body.appendChild(emergencyPanel);
1164
+
1165
+ document.getElementById('confirm-emergency').addEventListener('click', () => {
1166
+ // Flash red alert
1167
+ document.body.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
1168
+ setTimeout(() => {
1169
+ document.body.style.backgroundColor = 'var(--dark-bg)';
1170
+ }, 500);
1171
+
1172
+ // Show emergency activated
1173
+ const emergencyActivated = document.createElement('div');
1174
+ emergencyActivated.className = 'fixed inset-0 flex items-center justify-center z-50';
1175
+ emergencyActivated.innerHTML = `
1176
+ <div class="bg-black bg-opacity-90 p-10 rounded-lg border border-red-500 text-center max-w-md">
1177
+ <i class="fas fa-shield-alt text-red-500 text-6xl mb-6"></i>
1178
+ <h3 class="font-orbitron text-2xl mb-4">PROTOCOLE ACTIVÉ</h3>
1179
+ <p class="mb-6">Toutes les unités ont été alertées. Assistance en route.</p>
1180
+ <button class="cyber-button border-red-500 text-red-500 hover:bg-red-500 hover:text-black px-8" id="close-emergency">
1181
+ <i class="fas fa-times mr-2"></i> FERMER
1182
+ </button>
1183
+ </div>
1184
+ `;
1185
+ emergencyPanel.remove();
1186
+ document.body.appendChild(emergencyActivated);
1187
+
1188
+ document.getElementById('close-emergency').addEventListener('click', () => {
1189
+ emergencyActivated.remove();
1190
+ });
1191
+ });
1192
+
1193
+ document.getElementById('cancel-emergency').addEventListener('click', () => {
1194
+ emergencyPanel.remove();
1195
+ });
1196
+ });
1197
+
1198
+ // Terminal control
1199
+ const terminalControl = document.getElementById('terminal-control');
1200
+ terminalControl.addEventListener('click', () => {
1201
+ // Simulate terminal takeover
1202
+ const terminalBody = document.querySelector('.terminal-body');
1203
+ const newLines = [
1204
+ '> Taking control of terminal...',
1205
+ '> Bypassing security protocols...',
1206
+ '> Access granted',
1207
+ 'user@nexus:~# <span class="text-neon-blue">systemctl start nexus-core</span>',
1208
+ '> Starting Nexus Core v4.2.1',
1209
+ '> All systems online',
1210
+ '> Welcome, ADMIN'
1211
+ ];
1212
+
1213
+ let lineDelay = 0;
1214
+ newLines.forEach(line => {
1215
+ setTimeout(() => {
1216
+ const newLine = document.createElement('div');
1217
+ newLine.className = 'terminal-line';
1218
+ newLine.innerHTML = line;
1219
+ terminalBody.appendChild(newLine);
1220
+ terminalBody.scrollTop = terminalBody.scrollHeight;
1221
+ }, lineDelay);
1222
+ lineDelay += 500;
1223
+ });
1224
+
1225
+ // Change terminal header to show admin access
1226
+ const terminalHeader = document.querySelector('.terminal-header span');
1227
+ terminalHeader.textContent = 'nexus-core-terminal [ADMIN]';
1228
+ terminalHeader.classList.add('text-neon-blue');
1229
+
1230
+ // Change button to show success
1231
+ terminalControl.innerHTML = '<i class="fas fa-check mr-2"></i> CONTRÔLE ACQUIS';
1232
+ terminalControl.classList.add('bg-neon-blue', 'text-black');
1233
+ terminalControl.classList.remove('border-neon-blue', 'text-neon-blue');
1234
+ });
1235
+
1236
+ // Activate technologies
1237
+ const activateTech = document.getElementById('activate-tech');
1238
+ activateTech.addEventListener('click', () => {
1239
+ // Animate progress bars
1240
+ const progressBars = document.querySelectorAll('.h-2.rounded-full');
1241
+ gsap.to(progressBars[0], { width: '100%', duration: 1, ease: 'power2.out' });
1242
+ gsap.to(progressBars[1], { width: '100%', duration: 1, ease: 'power2.out', delay: 0.2 });
1243
+ gsap.to(progressBars[2], { width: '100%', duration: 1, ease: 'power2.out', delay: 0.4 });
1244
+
1245
+ // Change button
1246
+ activateTech.innerHTML = '<i class="fas fa-check mr-2"></i> TECHNOLOGIES ACTIVÉES';
1247
+ activateTech.classList.add('bg-neon-blue', 'text-black');
1248
+
1249
+ // Show activation effect
1250
+ const techSection = document.getElementById('technologies');
1251
+ gsap.to(techSection, {
1252
+ boxShadow: '0 0 50px rgba(0, 255, 252, 0.3)',
1253
+ duration: 1,
1254
+ yoyo: true,
1255
+ repeat: 1
1256
+ });
1257
+ });
1258
+
1259
+ // Access button
1260
+ const accessBtn = document.getElementById('access-btn');
1261
+ accessBtn.addEventListener('click', () => {
1262
+ // Show access panel
1263
+ const accessPanel = document.createElement('div');
1264
+ accessPanel.className = 'fixed inset-0 flex items-center justify-center z-50';
1265
+ accessPanel.innerHTML = `
1266
+ <div class="bg-black bg-opacity-90 p-10 rounded-lg border border-neon-blue text-center max-w-md">
1267
+ <i class="fas fa-key text-neon-blue text-6xl mb-6"></i>
1268
+ <h3 class="font-orbitron text-2xl mb-4">ACCÈS SYSTÈME</h3>
1269
+ <div class="mb-6">
1270
+ <label class="block text-gray-300 mb-2 text-left">IDENTIFIANT</label>
1271
+ <input type="text" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-blue rounded px-4 py-2 outline-none mb-4">
1272
+
1273
+ <label class="block text-gray-300 mb-2 text-left">MOT DE PASSE</label>
1274
+ <input type="password" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-blue rounded px-4 py-2 outline-none">
1275
+ </div>
1276
+ <div class="grid grid-cols-2 gap-4">
1277
+ <button class="cyber-button border-neon-blue text-neon-blue hover:bg-neon-blue hover:text-black" id="confirm-access">
1278
+ <i class="fas fa-unlock mr-2"></i> ACCÉDER
1279
+ </button>
1280
+ <button class="cyber-button" id="cancel-access">
1281
+ <i class="fas fa-times mr-2"></i> ANNULER
1282
+ </button>
1283
+ </div>
1284
+ </div>
1285
+ `;
1286
+ document.body.appendChild(accessPanel);
1287
+
1288
+ document.getElementById('confirm-access').addEventListener('click', () => {
1289
+ // Show success
1290
+ const successPanel = document.createElement('div');
1291
+ successPanel.className = 'fixed inset-0 flex items-center justify-center z-50';
1292
+ successPanel.innerHTML = `
1293
+ <div class="bg-black bg-opacity-90 p-10 rounded-lg border border-green-500 text-center max-w-md">
1294
+ <i class="fas fa-check-circle text-green-500 text-6xl mb-6"></i>
1295
+ <h3 class="font-orbitron text-2xl mb-4">ACCÈS AUTORISÉ</h3>
1296
+ <p class="mb-6">Bienvenue dans le système Nexus Core.</p>
1297
+ <button class="cyber-button border-green-500 text-green-500 hover:bg-green-500 hover:text-black px-8" id="close-access">
1298
+ <i class="fas fa-arrow-right mr-2"></i> CONTINUER
1299
+ </button>
1300
+ </div>
1301
+ `;
1302
+ accessPanel.remove();
1303
+ document.body.appendChild(successPanel);
1304
+
1305
+ document.getElementById('close-access').addEventListener('click', () => {
1306
+ successPanel.remove();
1307
+ });
1308
+ });
1309
+
1310
+ document.getElementById('cancel-access').addEventListener('click', () => {
1311
+ accessPanel.remove();
1312
+ });
1313
+ });
1314
+
1315
+ // Demo button
1316
+ const demoBtn = document.getElementById('demo-btn');
1317
+ demoBtn.addEventListener('click', () => {
1318
+ // Show demo panel
1319
+ const demoPanel = document.createElement('div');
1320
+ demoPanel.className = 'fixed inset-0 flex items-center justify-center z-50';
1321
+ demoPanel.innerHTML = `
1322
+ <div class="bg-black bg-opacity-90 p-10 rounded-lg border border-neon-pink text-center max-w-md">
1323
+ <i class="fas fa-play text-neon-pink text-6xl mb-6"></i>
1324
+ <h3 class="font-orbitron text-2xl mb-4">DÉMO SYSTÈME</h3>
1325
+ <p class="mb-6">Lancement de la démonstration des capacités Nexus...</p>
1326
+ <div class="grid grid-cols-2 gap-4">
1327
+ <button class="cyber-button border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black" id="confirm-demo">
1328
+ <i class="fas fa-rocket mr-2"></i> LANCER
1329
+ </button>
1330
+ <button class="cyber-button" id="cancel-demo">
1331
+ <i class="fas fa-times mr-2"></i> ANNULER
1332
+ </button>
1333
+ </div>
1334
+ </div>
1335
+ `;
1336
+ document.body.appendChild(demoPanel);
1337
+
1338
+ document.getElementById('confirm-demo').addEventListener('click', () => {
1339
+
1340
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ JE VEUX PAS DE SITE DE DEMO JE VEUX UN VRAIS SITE INTERFACES TRES FUTURISTE ET TRES ANIME
2
+ aucun bouton ne fonctionne pas le bouton je veux mon Empire ne fonctionne pas activer toutes les boutons en systeme robotiser en autopilote