Hugging Face's logo

Spaces:
asriel1
/
evane
Running

App Files Community
asriel1 commited on
Commit
fe140a1
·
verified ·
1 Parent(s): 1855638

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +633 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Evane
3
- emoji: 📊
4
- colorFrom: pink
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: evane
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,633 @@
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>Windows 11 AI Interface</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
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
13
+ }
14
+ .floating { animation: float 3s ease-in-out infinite; }
15
+ .glass-effect {
16
+ background: rgba(255, 255, 255, 0.1);
17
+ backdrop-filter: blur(10px);
18
+ -webkit-backdrop-filter: blur(10px);
19
+ border: 1px solid rgba(255, 255, 255, 0.2);
20
+ }
21
+ .icon-hover {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .icon-hover:hover {
25
+ transform: scale(1.1);
26
+ filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
27
+ }
28
+ .taskbar-icon {
29
+ transition: all 0.2s ease;
30
+ }
31
+ .taskbar-icon:hover {
32
+ transform: scale(1.15);
33
+ }
34
+ .start-menu {
35
+ transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
36
+ }
37
+ .widget {
38
+ transition: all 0.3s ease;
39
+ }
40
+ .widget:hover {
41
+ transform: translateY(-5px);
42
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
43
+ }
44
+ .video-thumbnail {
45
+ aspect-ratio: 16/9;
46
+ background-size: cover;
47
+ background-position: center;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-900 text-white h-screen overflow-hidden select-none">
52
+ <!-- Fond d'écran futuriste -->
53
+ <div class="absolute inset-0 overflow-hidden">
54
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-purple-900 to-gray-900 opacity-90"></div>
55
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1677442136016-3c0a1f1f3249?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center opacity-30"></div>
56
+ <div class="absolute inset-0 flex items-center justify-center">
57
+ <div class="h-64 w-64 rounded-full bg-blue-500 opacity-10 blur-3xl"></div>
58
+ </div>
59
+ </div>
60
+
61
+ <!-- Icônes du bureau -->
62
+ <div class="absolute top-0 left-0 p-6 grid gap-6">
63
+ <!-- Icône de l'explorateur de fichiers -->
64
+ <div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('explorer')">
65
+ <div class="bg-blue-500/20 p-3 rounded-xl glass-effect">
66
+ <i class="fas fa-folder text-blue-400 text-3xl"></i>
67
+ </div>
68
+ <span class="text-xs mt-1 text-white/80">Explorateur</span>
69
+ </div>
70
+
71
+ <!-- Icône du navigateur -->
72
+ <div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('browser')">
73
+ <div class="bg-green-500/20 p-3 rounded-xl glass-effect">
74
+ <i class="fas fa-globe text-green-400 text-3xl"></i>
75
+ </div>
76
+ <span class="text-xs mt-1 text-white/80">Edge</span>
77
+ </div>
78
+
79
+ <!-- Icône de la boutique -->
80
+ <div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('store')">
81
+ <div class="bg-purple-500/20 p-3 rounded-xl glass-effect">
82
+ <i class="fas fa-shopping-bag text-purple-400 text-3xl"></i>
83
+ </div>
84
+ <span class="text-xs mt-1 text-white/80">Store</span>
85
+ </div>
86
+
87
+ <!-- Icône des paramètres -->
88
+ <div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('settings')">
89
+ <div class="bg-gray-500/20 p-3 rounded-xl glass-effect">
90
+ <i class="fas fa-cog text-gray-300 text-3xl"></i>
91
+ </div>
92
+ <span class="text-xs mt-1 text-white/80">Paramètres</span>
93
+ </div>
94
+
95
+ <!-- Icône YouTube -->
96
+ <div class="flex flex-col items-center w-20 text-center icon-hover" onclick="openApp('youtube')">
97
+ <div class="bg-red-500/20 p-3 rounded-xl glass-effect">
98
+ <i class="fab fa-youtube text-red-500 text-3xl"></i>
99
+ </div>
100
+ <span class="text-xs mt-1 text-white/80">YouTube</span>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Widgets -->
105
+ <div class="absolute top-6 right-6 grid gap-4 w-80">
106
+ <!-- Widget météo -->
107
+ <div class="glass-effect rounded-2xl p-4 widget">
108
+ <div class="flex justify-between items-center">
109
+ <div>
110
+ <h3 class="font-semibold">Paris, France</h3>
111
+ <p class="text-sm text-white/70">Ensoleillé</p>
112
+ </div>
113
+ <i class="fas fa-sun text-yellow-400 text-2xl"></i>
114
+ </div>
115
+ <div class="flex justify-between mt-4">
116
+ <div class="text-center">
117
+ <p class="text-3xl font-light">24°</p>
118
+ <p class="text-xs text-white/60">Actuel</p>
119
+ </div>
120
+ <div class="text-center">
121
+ <p class="text-lg font-light">28°</p>
122
+ <p class="text-xs text-white/60">Max</p>
123
+ </div>
124
+ <div class="text-center">
125
+ <p class="text-lg font-light">18°</p>
126
+ <p class="text-xs text-white/60">Min</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Widget calendrier -->
132
+ <div class="glass-effect rounded-2xl p-4 widget">
133
+ <div class="flex justify-between items-center">
134
+ <h3 class="font-semibold">Calendrier</h3>
135
+ <span class="text-sm text-white/70">Aujourd'hui</span>
136
+ </div>
137
+ <div class="mt-4">
138
+ <div class="flex items-center mb-2">
139
+ <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-2">
140
+ <span class="text-blue-400 text-xs">10</span>
141
+ </div>
142
+ <div>
143
+ <p class="text-sm">Réunion d'équipe</p>
144
+ <p class="text-xs text-white/60">10:00 - 11:30</p>
145
+ </div>
146
+ </div>
147
+ <div class="flex items-center">
148
+ <div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center mr-2">
149
+ <span class="text-purple-400 text-xs">14</span>
150
+ </div>
151
+ <div>
152
+ <p class="text-sm">Présentation client</p>
153
+ <p class="text-xs text-white/60">14:00 - 15:00</p>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Widget actualités -->
160
+ <div class="glass-effect rounded-2xl p-4 widget">
161
+ <h3 class="font-semibold mb-2">Actualités</h3>
162
+ <div class="text-sm space-y-2">
163
+ <p class="line-clamp-2">Nouvelle avancée en intelligence artificielle : Google dévoile son modèle Gemini</p>
164
+ <p class="line-clamp-2 text-white/70">Microsoft annonce Windows 12 pour 2024 avec des fonctionnalités révolutionnaires</p>
165
+ <p class="line-clamp-2 text-white/70">La NASA prépare une mission habitée vers Mars d'ici 2030</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Barre des tâches -->
171
+ <div class="absolute bottom-0 left-0 right-0 glass-effect rounded-t-xl mx-auto w-11/12 max-w-4xl h-14 flex items-center justify-center px-4">
172
+ <div class="flex items-center space-x-2">
173
+ <!-- Icône du menu Démarrer -->
174
+ <div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" id="start-button">
175
+ <i class="fab fa-windows text-white text-lg"></i>
176
+ </div>
177
+
178
+ <!-- Icône de recherche -->
179
+ <div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10">
180
+ <i class="fas fa-search text-white/80 text-lg"></i>
181
+ </div>
182
+
183
+ <!-- Icônes des applications épinglées -->
184
+ <div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('explorer')">
185
+ <i class="fas fa-folder text-blue-400 text-lg"></i>
186
+ </div>
187
+ <div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('browser')">
188
+ <i class="fas fa-globe text-green-400 text-lg"></i>
189
+ </div>
190
+ <div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('store')">
191
+ <i class="fas fa-shopping-bag text-purple-400 text-lg"></i>
192
+ </div>
193
+ <div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('mail')">
194
+ <i class="fas fa-envelope text-yellow-400 text-lg"></i>
195
+ </div>
196
+ <div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10" onclick="openApp('youtube')">
197
+ <i class="fab fa-youtube text-red-500 text-lg"></i>
198
+ </div>
199
+
200
+ <!-- Séparateur -->
201
+ <div class="h-6 w-px bg-white/20 mx-1"></div>
202
+
203
+ <!-- Icône de l'heure -->
204
+ <div class="taskbar-icon px-2 h-10 flex items-center justify-center rounded-md hover:bg-white/10">
205
+ <span class="text-sm">14:25</span>
206
+ </div>
207
+
208
+ <!-- Icône des notifications -->
209
+ <div class="taskbar-icon w-10 h-10 flex items-center justify-center rounded-md hover:bg-white/10">
210
+ <i class="fas fa-bell text-white/80 text-lg"></i>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Menu Démarrer -->
216
+ <div class="absolute bottom-20 left-1/2 transform -translate-x-1/2 glass-effect rounded-2xl p-4 w-96 hidden start-menu" id="start-menu">
217
+ <div class="flex justify-between items-center mb-4">
218
+ <input type="text" placeholder="Rechercher" class="bg-white/10 rounded-full px-4 py-2 w-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
219
+ </div>
220
+
221
+ <div class="grid grid-cols-3 gap-4">
222
+ <!-- Applications fréquentes -->
223
+ <div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('explorer')">
224
+ <div class="bg-blue-500/20 p-3 rounded-xl mb-1">
225
+ <i class="fas fa-folder text-blue-400 text-xl"></i>
226
+ </div>
227
+ <span class="text-xs">Explorateur</span>
228
+ </div>
229
+ <div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('browser')">
230
+ <div class="bg-green-500/20 p-3 rounded-xl mb-1">
231
+ <i class="fas fa-globe text-green-400 text-xl"></i>
232
+ </div>
233
+ <span class="text-xs">Edge</span>
234
+ </div>
235
+ <div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('store')">
236
+ <div class="bg-purple-500/20 p-3 rounded-xl mb-1">
237
+ <i class="fas fa-shopping-bag text-purple-400 text-xl"></i>
238
+ </div>
239
+ <span class="text-xs">Store</span>
240
+ </div>
241
+ <div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('mail')">
242
+ <div class="bg-yellow-500/20 p-3 rounded-xl mb-1">
243
+ <i class="fas fa-envelope text-yellow-400 text-xl"></i>
244
+ </div>
245
+ <span class="text-xs">Mail</span>
246
+ </div>
247
+ <div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('photos')">
248
+ <div class="bg-pink-500/20 p-3 rounded-xl mb-1">
249
+ <i class="fas fa-images text-pink-400 text-xl"></i>
250
+ </div>
251
+ <span class="text-xs">Photos</span>
252
+ </div>
253
+ <div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('settings')">
254
+ <div class="bg-gray-500/20 p-3 rounded-xl mb-1">
255
+ <i class="fas fa-cog text-gray-300 text-xl"></i>
256
+ </div>
257
+ <span class="text-xs">Paramètres</span>
258
+ </div>
259
+ <div class="flex flex-col items-center p-2 rounded-lg hover:bg-white/10" onclick="openApp('youtube')">
260
+ <div class="bg-red-500/20 p-3 rounded-xl mb-1">
261
+ <i class="fab fa-youtube text-red-500 text-xl"></i>
262
+ </div>
263
+ <span class="text-xs">YouTube</span>
264
+ </div>
265
+ </div>
266
+
267
+ <div class="mt-6 pt-4 border-t border-white/10">
268
+ <div class="flex items-center p-2 rounded-lg hover:bg-white/10">
269
+ <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-3">
270
+ <i class="fas fa-power-off text-blue-400 text-sm"></i>
271
+ </div>
272
+ <span class="text-sm">Arrêter</span>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Fenêtre d'application (cachée par défaut) -->
278
+ <div class="absolute inset-0 flex items-center justify-center hidden" id="app-window">
279
+ <div class="glass-effect rounded-2xl overflow-hidden w-3/4 max-w-3xl h-3/4 max-h-[600px] flex flex-col">
280
+ <div class="bg-white/10 h-10 flex items-center px-4 justify-between">
281
+ <span class="text-sm font-medium" id="app-title">Application</span>
282
+ <div class="flex space-x-2">
283
+ <button class="w-6 h-6 flex items-center justify-center hover:bg-white/20 rounded">
284
+ <i class="fas fa-minus text-xs"></i>
285
+ </button>
286
+ <button class="w-6 h-6 flex items-center justify-center hover:bg-white/20 rounded">
287
+ <i class="fas fa-square text-xs"></i>
288
+ </button>
289
+ <button class="w-6 h-6 flex items-center justify-center hover:bg-red-500/50 rounded" onclick="closeApp()">
290
+ <i class="fas fa-times text-xs"></i>
291
+ </button>
292
+ </div>
293
+ </div>
294
+ <div class="flex-1 p-6 overflow-auto" id="app-content">
295
+ <!-- Contenu de l'application dynamique -->
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <script>
301
+ // Gestion du menu Démarrer
302
+ document.getElementById('start-button').addEventListener('click', function() {
303
+ const menu = document.getElementById('start-menu');
304
+ menu.classList.toggle('hidden');
305
+ });
306
+
307
+ // Fonction pour ouvrir une application
308
+ function openApp(appName) {
309
+ const appWindow = document.getElementById('app-window');
310
+ const appTitle = document.getElementById('app-title');
311
+ const appContent = document.getElementById('app-content');
312
+
313
+ // Masquer le menu Démarrer s'il est ouvert
314
+ document.getElementById('start-menu').classList.add('hidden');
315
+
316
+ // Configurer l'application en fonction du nom
317
+ switch(appName) {
318
+ case 'explorer':
319
+ appTitle.textContent = 'Explorateur de fichiers';
320
+ appContent.innerHTML = `
321
+ <div class="flex h-full">
322
+ <div class="w-48 bg-white/5 rounded-lg p-3">
323
+ <div class="p-2 rounded hover:bg-white/10 flex items-center">
324
+ <i class="fas fa-desktop text-blue-400 mr-2"></i>
325
+ <span>Bureau</span>
326
+ </div>
327
+ <div class="p-2 rounded hover:bg-white/10 flex items-center">
328
+ <i class="fas fa-download text-green-400 mr-2"></i>
329
+ <span>Téléchargements</span>
330
+ </div>
331
+ <div class="p-2 rounded hover:bg-white/10 flex items-center">
332
+ <i class="fas fa-image text-yellow-400 mr-2"></i>
333
+ <span>Images</span>
334
+ </div>
335
+ <div class="p-2 rounded hover:bg-white/10 flex items-center">
336
+ <i class="fas fa-music text-purple-400 mr-2"></i>
337
+ <span>Musique</span>
338
+ </div>
339
+ </div>
340
+ <div class="flex-1 ml-4">
341
+ <div class="grid grid-cols-5 gap-4">
342
+ <div class="flex flex-col items-center">
343
+ <div class="bg-blue-500/20 p-4 rounded-xl mb-1">
344
+ <i class="fas fa-folder text-blue-400 text-2xl"></i>
345
+ </div>
346
+ <span class="text-xs">Documents</span>
347
+ </div>
348
+ <div class="flex flex-col items-center">
349
+ <div class="bg-green-500/20 p-4 rounded-xl mb-1">
350
+ <i class="fas fa-folder text-green-400 text-2xl"></i>
351
+ </div>
352
+ <span class="text-xs">Images</span>
353
+ </div>
354
+ <div class="flex flex-col items-center">
355
+ <div class="bg-yellow-500/20 p-4 rounded-xl mb-1">
356
+ <i class="fas fa-folder text-yellow-400 text-2xl"></i>
357
+ </div>
358
+ <span class="text-xs">Musique</span>
359
+ </div>
360
+ <div class="flex flex-col items-center">
361
+ <div class="bg-purple-500/20 p-4 rounded-xl mb-1">
362
+ <i class="fas fa-folder text-purple-400 text-2xl"></i>
363
+ </div>
364
+ <span class="text-xs">Vidéos</span>
365
+ </div>
366
+ <div class="flex flex-col items-center">
367
+ <div class="bg-red-500/20 p-4 rounded-xl mb-1">
368
+ <i class="fas fa-folder text-red-400 text-2xl"></i>
369
+ </div>
370
+ <span class="text-xs">Téléchargements</span>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ `;
376
+ break;
377
+
378
+ case 'browser':
379
+ appTitle.textContent = 'Microsoft Edge';
380
+ appContent.innerHTML = `
381
+ <div class="flex flex-col h-full">
382
+ <div class="flex items-center bg-white/10 rounded-full px-4 py-2 mb-4">
383
+ <i class="fas fa-search text-white/50 mr-2"></i>
384
+ <input type="text" placeholder="Rechercher sur le web ou saisir une URL" class="bg-transparent border-none w-full focus:outline-none text-sm">
385
+ </div>
386
+ <div class="flex-1 bg-white/5 rounded-lg p-4">
387
+ <h3 class="text-lg font-medium mb-4">Page d'accueil</h3>
388
+ <div class="grid grid-cols-3 gap-4">
389
+ <div class="bg-white/10 rounded-lg p-3 hover:bg-white/20 cursor-pointer">
390
+ <div class="h-20 bg-blue-500/20 rounded-lg mb-2 flex items-center justify-center">
391
+ <i class="fab fa-windows text-blue-400 text-2xl"></i>
392
+ </div>
393
+ <p class="text-sm">Microsoft</p>
394
+ </div>
395
+ <div class="bg-white/10 rounded-lg p-3 hover:bg-white/20 cursor-pointer">
396
+ <div class="h-20 bg-red-500/20 rounded-lg mb-2 flex items-center justify-center">
397
+ <i class="fab fa-youtube text-red-400 text-2xl"></i>
398
+ </div>
399
+ <p class="text-sm">YouTube</p>
400
+ </div>
401
+ <div class="bg-white/10 rounded-lg p-3 hover:bg-white/20 cursor-pointer">
402
+ <div class="h-20 bg-blue-400/20 rounded-lg mb-2 flex items-center justify-center">
403
+ <i class="fab fa-twitter text-blue-400 text-2xl"></i>
404
+ </div>
405
+ <p class="text-sm">Twitter</p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ `;
411
+ break;
412
+
413
+ case 'store':
414
+ appTitle.textContent = 'Microsoft Store';
415
+ appContent.innerHTML = `
416
+ <div class="flex flex-col h-full">
417
+ <div class="flex items-center mb-6">
418
+ <h2 class="text-xl font-semibold">Microsoft Store</h2>
419
+ <div class="ml-auto flex space-x-2">
420
+ <button class="px-3 py-1 bg-white/10 rounded-full text-sm">Applications</button>
421
+ <button class="px-3 py-1 bg-white/5 rounded-full text-sm">Jeux</button>
422
+ </div>
423
+ </div>
424
+ <div class="grid grid-cols-3 gap-4 flex-1 overflow-auto">
425
+ <div class="bg-white/10 rounded-xl p-3 hover:bg-white/20 cursor-pointer">
426
+ <div class="h-32 bg-purple-500/20 rounded-lg mb-2 flex items-center justify-center">
427
+ <i class="fas fa-gamepad text-purple-400 text-4xl"></i>
428
+ </div>
429
+ <p class="font-medium">Minecraft</p>
430
+ <p class="text-xs text-white/60">Jeu de construction</p>
431
+ </div>
432
+ <div class="bg-white/10 rounded-xl p-3 hover:bg-white/20 cursor-pointer">
433
+ <div class="h-32 bg-blue-500/20 rounded-lg mb-2 flex items-center justify-center">
434
+ <i class="fas fa-film text-blue-400 text-4xl"></i>
435
+ </div>
436
+ <p class="font-medium">Netflix</p>
437
+ <p class="text-xs text-white/60">Streaming vidéo</p>
438
+ </div>
439
+ <div class="bg-white/10 rounded-xl p-3 hover:bg-white/20 cursor-pointer">
440
+ <div class="h-32 bg-green-500/20 rounded-lg mb-2 flex items-center justify-center">
441
+ <i class="fas fa-music text-green-400 text-4xl"></i>
442
+ </div>
443
+ <p class="font-medium">Spotify</p>
444
+ <p class="text-xs text-white/60">Musique en streaming</p>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ `;
449
+ break;
450
+
451
+ case 'mail':
452
+ appTitle.textContent = 'Courrier';
453
+ appContent.innerHTML = `
454
+ <div class="flex h-full">
455
+ <div class="w-48 bg-white/5 rounded-lg p-3">
456
+ <button class="w-full bg-blue-500/20 text-blue-400 rounded-full py-2 px-4 mb-4 text-sm">
457
+ Nouveau message
458
+ </button>
459
+ <div class="space-y-1">
460
+ <div class="p-2 rounded hover:bg-white/10 flex items-center">
461
+ <i class="fas fa-inbox text-blue-400 mr-2"></i>
462
+ <span>Boîte de réception</span>
463
+ </div>
464
+ <div class="p-2 rounded hover:bg-white/10 flex items-center">
465
+ <i class="fas fa-paper-plane text-green-400 mr-2"></i>
466
+ <span>Envoyés</span>
467
+ </div>
468
+ <div class="p-2 rounded hover:bg-white/10 flex items-center">
469
+ <i class="fas fa-star text-yellow-400 mr-2"></i>
470
+ <span>Importants</span>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ <div class="flex-1 ml-4">
475
+ <div class="bg-white/5 rounded-lg p-4 h-full">
476
+ <div class="flex items-center justify-between mb-4">
477
+ <h3 class="font-medium">Boîte de réception</h3>
478
+ <div class="flex items-center space-x-2">
479
+ <i class="fas fa-chevron-left text-white/50"></i>
480
+ <i class="fas fa-chevron-right text-white/50"></i>
481
+ </div>
482
+ </div
483
+ <div class="space-y-2">
484
+ <div class="p-3 bg-white/10 rounded-lg hover:bg-white/20 cursor-pointer">
485
+ <div class="flex items-center justify-between">
486
+ <p class="font-medium">Microsoft</p>
487
+ <span class="text-xs text-white/50">14:20</span>
488
+ </div>
489
+ <p class="text-sm">Mise à jour de votre compte</p>
490
+ <p class="text-xs text-white/60 line-clamp-1">Nous avons détecté une nouvelle connexion à votre compte Microsoft depuis un appareil inconnu...</p>
491
+ </div>
492
+ <div class="p-3 bg-white/10 rounded-lg hover:bg-white/20 cursor-pointer">
493
+ <div class="flex items-center justify-between">
494
+ <p class="font-medium">GitHub</p>
495
+ <span class="text-xs text-white/50">12:45</span>
496
+ </div>
497
+ <p class="text-sm">Pull request: Nouvelle fonctionnalité</p>
498
+ <p class="text-xs text-white/60 line-clamp-1">Une nouvelle pull request a été ouverte dans le dépôt windows-ai-interface...</p>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ `;
505
+ break;
506
+
507
+ case 'youtube':
508
+ appTitle.textContent = 'YouTube';
509
+ appContent.innerHTML = `
510
+ <div class="flex flex-col h-full">
511
+ <!-- Barre de navigation -->
512
+ <div class="flex items-center bg-black/50 p-2 rounded-lg mb-4">
513
+ <div class="flex items-center bg-white/10 rounded-full px-4 py-1 flex-1 max-w-xl">
514
+ <input type="text" placeholder="Rechercher" class="bg-transparent border-none w-full focus:outline-none text-sm">
515
+ <i class="fas fa-search text-white/50 ml-2"></i>
516
+ </div>
517
+ <div class="flex space-x-2 ml-4">
518
+ <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/10">
519
+ <i class="fas fa-video text-white/80"></i>
520
+ </button>
521
+ <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/10">
522
+ <i class="fas fa-bell text-white/80"></i>
523
+ </button>
524
+ <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white">
525
+ <i class="fas fa-user"></i>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <!-- Onglets -->
531
+ <div class="flex space-x-2 mb-4 overflow-x-auto pb-2">
532
+ <button class="px-3 py-1 bg-white/10 rounded-full text-sm whitespace-nowrap">Tout</button>
533
+ <button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Musique</button>
534
+ <button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Jeux vidéo</button>
535
+ <button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Actualités</button>
536
+ <button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Films</button>
537
+ <button class="px-3 py-1 bg-white/5 rounded-full text-sm whitespace-nowrap">Vidéos récentes</button>
538
+ </div>
539
+
540
+ <!-- Contenu principal -->
541
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 flex-1 overflow-auto">
542
+ <!-- Votre chaîne -->
543
+ <div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer" onclick="window.open('https://www.youtube.com/@asrielchrist9334', '_blank')">
544
+ <div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div>
545
+ <div class="p-3">
546
+ <div class="flex">
547
+ <div class="w-9 h-9 rounded-full bg-red-500 mr-2 flex-shrink-0"></div>
548
+ <div>
549
+ <h3 class="font-medium text-sm line-clamp-2">Ma chaîne YouTube - AsrielChrist</h3>
550
+ <p class="text-xs text-white/60 mt-1">AsrielChrist • 10K abonnés</p>
551
+ <p class="text-xs text-white/60">Visitez ma chaîne pour du contenu incroyable!</p>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <!-- Vidéos suggérées -->
558
+ <div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer">
559
+ <div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div>
560
+ <div class="p-3">
561
+ <h3 class="font-medium text-sm line-clamp-2">Tutoriel Windows 11 - Personnalisation avancée</h3>
562
+ <p class="text-xs text-white/60 mt-1">TechTutor • 120K vues • Il y a 2 semaines</p>
563
+ </div>
564
+ </div>
565
+
566
+ <div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer">
567
+ <div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div>
568
+ <div class="p-3">
569
+ <h3 class="font-medium text-sm line-clamp-2">Les dernières fonctionnalités IA de Windows 12</h3>
570
+ <p class="text-xs text-white/60 mt-1">TechNews • 450K vues • Il y a 1 mois</p>
571
+ </div>
572
+ </div>
573
+
574
+ <div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer">
575
+ <div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div>
576
+ <div class="p-3">
577
+ <h3 class="font-medium text-sm line-clamp-2">Comment créer une interface utilisateur moderne</h3>
578
+ <p class="text-xs text-white/60 mt-1">DevTips • 85K vues • Il y a 3 jours</p>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer">
583
+ <div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div>
584
+ <div class="p-3">
585
+ <h3 class="font-medium text-sm line-clamp-2">Les meilleurs outils pour développeurs en 2023</h3>
586
+ <p class="text-xs text-white/60 mt-1">CodeMaster • 210K vues • Il y a 2 semaines</p>
587
+ </div>
588
+ </div>
589
+
590
+ <div class="bg-white/5 rounded-lg overflow-hidden hover:bg-white/10 cursor-pointer">
591
+ <div class="video-thumbnail bg-[url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')]"></div>
592
+ <div class="p-3">
593
+ <h3 class="font-medium text-sm line-clamp-2">Introduction à l'intelligence artificielle</h3>
594
+ <p class="text-xs text-white/60 mt-1">AIExplained • 320K vues • Il y a 1 mois</p>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ `;
600
+ break;
601
+
602
+ default:
603
+ appTitle.textContent = 'Application';
604
+ appContent.innerHTML = `
605
+ <div class="flex items-center justify-center h-full">
606
+ <div class="text-center">
607
+ <i class="fas fa-info-circle text-blue-400 text-4xl mb-4"></i>
608
+ <p>Contenu de l'application non disponible</p>
609
+ </div>
610
+ </div>
611
+ `;
612
+ }
613
+
614
+ appWindow.classList.remove('hidden');
615
+ }
616
+
617
+ // Fonction pour fermer l'application
618
+ function closeApp() {
619
+ document.getElementById('app-window').classList.add('hidden');
620
+ }
621
+
622
+ // Fermer le menu Démarrer quand on clique ailleurs
623
+ document.addEventListener('click', function(event) {
624
+ const startButton = document.getElementById('start-button');
625
+ const startMenu = document.getElementById('start-menu');
626
+
627
+ if (!startButton.contains(event.target) && !startMenu.contains(event.target)) {
628
+ startMenu.classList.add('hidden');
629
+ }
630
+ });
631
+ </script>
632
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=asriel1/evane" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
633
+ </html>