Hugging Face's logo

Spaces:
docto41
/
quantumvpn
Running

App Files Community
docto41 commited on
Commit
e8a8065
·
verified ·
1 Parent(s): 42274b5

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +486 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quantumvpn
3
- emoji: 🐨
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: quantumvpn
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,486 @@
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>QuantumVPN - VPN Intelligent Automatique</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
13
+ }
14
+ .server-card {
15
+ transition: all 0.3s ease;
16
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .server-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
21
+ }
22
+ .connection-animation {
23
+ animation: pulse 2s infinite;
24
+ }
25
+ @keyframes pulse {
26
+ 0% { opacity: 0.7; }
27
+ 50% { opacity: 1; }
28
+ 100% { opacity: 0.7; }
29
+ }
30
+ .progress-bar {
31
+ height: 6px;
32
+ border-radius: 3px;
33
+ background-color: #e0e0e0;
34
+ }
35
+ .progress-fill {
36
+ height: 100%;
37
+ border-radius: 3px;
38
+ background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
39
+ transition: width 0.5s ease;
40
+ }
41
+ #qrcode-container {
42
+ width: 160px;
43
+ height: 160px;
44
+ margin: 0 auto;
45
+ padding: 10px;
46
+ background: white;
47
+ border-radius: 8px;
48
+ border: 1px solid #e0e0e0;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-100 font-sans">
53
+ <div class="min-h-screen flex flex-col">
54
+ <!-- Header -->
55
+ <header class="gradient-bg text-white py-6 px-4 shadow-lg">
56
+ <div class="container mx-auto flex justify-between items-center">
57
+ <div class="flex items-center space-x-2">
58
+ <i class="fas fa-shield-alt text-2xl"></i>
59
+ <h1 class="text-2xl font-bold">QuantumVPN</h1>
60
+ </div>
61
+ <div class="flex items-center space-x-4">
62
+ <span class="hidden md:inline-block px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">
63
+ <i class="fas fa-brain mr-1"></i> 500 IA en réseau
64
+ </span>
65
+ <button class="px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full transition">
66
+ <i class="fas fa-user mr-1"></i> Mon compte
67
+ </button>
68
+ </div>
69
+ </div>
70
+ </header>
71
+
72
+ <!-- Main Content -->
73
+ <main class="flex-grow container mx-auto px-4 py-8">
74
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
75
+ <!-- Left Panel -->
76
+ <div class="lg:col-span-2 space-y-6">
77
+ <!-- Connection Status -->
78
+ <div class="bg-white rounded-xl shadow-md p-6">
79
+ <div class="flex justify-between items-center mb-4">
80
+ <h2 class="text-xl font-semibold">Statut de connexion</h2>
81
+ <div class="flex items-center space-x-2">
82
+ <span class="text-sm text-gray-500">Rotation serveur:</span>
83
+ <span id="rotation-timer" class="font-medium">10:00</span>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="flex flex-col md:flex-row items-center justify-between">
88
+ <div class="flex items-center mb-4 md:mb-0">
89
+ <div id="connection-indicator" class="w-4 h-4 rounded-full bg-gray-400 mr-3"></div>
90
+ <span id="connection-status" class="text-lg">Déconnecté</span>
91
+ </div>
92
+ <button id="connect-btn" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full font-medium transition flex items-center">
93
+ <i class="fas fa-power-off mr-2"></i> Se connecter
94
+ </button>
95
+ </div>
96
+
97
+ <div class="mt-6">
98
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
99
+ <span>Sécurité</span>
100
+ <span id="security-level">Optimale</span>
101
+ </div>
102
+ <div class="progress-bar">
103
+ <div id="security-progress" class="progress-fill" style="width: 95%"></div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Current Server -->
109
+ <div id="current-server" class="bg-white rounded-xl shadow-md p-6 hidden">
110
+ <h2 class="text-xl font-semibold mb-4">Serveur actuel</h2>
111
+ <div class="flex flex-col md:flex-row items-center">
112
+ <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white text-2xl mb-4 md:mb-0 md:mr-6">
113
+ <i class="fas fa-server"></i>
114
+ </div>
115
+ <div class="flex-grow">
116
+ <h3 id="server-name" class="text-lg font-medium">Chargement...</h3>
117
+ <div class="flex flex-wrap items-center mt-2 text-sm text-gray-600">
118
+ <span class="flex items-center mr-4">
119
+ <i class="fas fa-map-marker-alt mr-1"></i>
120
+ <span id="server-location">Localisation</span>
121
+ </span>
122
+ <span class="flex items-center mr-4">
123
+ <i class="fas fa-tachometer-alt mr-1"></i>
124
+ <span id="server-speed">Vitesse</span>
125
+ </span>
126
+ <span class="flex items-center">
127
+ <i class="fas fa-shield-alt mr-1"></i>
128
+ <span id="server-security">Sécurité</span>
129
+ </span>
130
+ </div>
131
+ </div>
132
+ <div class="mt-4 md:mt-0">
133
+ <div class="text-right">
134
+ <div class="text-xs text-gray-500 mb-1">Prochaine rotation</div>
135
+ <div id="next-rotation" class="text-xl font-bold">10:00</div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Server Network -->
142
+ <div class="bg-white rounded-xl shadow-md p-6">
143
+ <div class="flex justify-between items-center mb-4">
144
+ <h2 class="text-xl font-semibold">Réseau Quantum</h2>
145
+ <div class="flex items-center space-x-2 text-sm">
146
+ <i class="fas fa-sync-alt text-blue-500"></i>
147
+ <span>Mise à jour en temps réel</span>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
152
+ <!-- Server cards will be added here by JavaScript -->
153
+ </div>
154
+
155
+ <div class="mt-6 text-center">
156
+ <button class="px-4 py-2 border border-blue-500 text-blue-500 hover:bg-blue-50 rounded-full transition">
157
+ <i class="fas fa-plus mr-1"></i> Afficher plus de serveurs
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Right Panel -->
164
+ <div class="space-y-6">
165
+ <!-- AI Optimization -->
166
+ <div class="bg-white rounded-xl shadow-md p-6">
167
+ <h2 class="text-xl font-semibold mb-4">Optimisation IA</h2>
168
+ <div class="space-y-4">
169
+ <div>
170
+ <div class="flex justify-between text-sm mb-1">
171
+ <span>Analyse du trafic</span>
172
+ <span id="traffic-analysis">Active</span>
173
+ </div>
174
+ <div class="progress-bar">
175
+ <div class="progress-fill" style="width: 87%"></div>
176
+ </div>
177
+ </div>
178
+ <div>
179
+ <div class="flex justify-between text-sm mb-1">
180
+ <span>Protection contre les menaces</span>
181
+ <span id="threat-protection">Active</span>
182
+ </div>
183
+ <div class="progress-bar">
184
+ <div class="progress-fill" style="width: 92%"></div>
185
+ </div>
186
+ </div>
187
+ <div>
188
+ <div class="flex justify-between text-sm mb-1">
189
+ <span>Sélection intelligente des serveurs</span>
190
+ <span id="server-selection">Active</span>
191
+ </div>
192
+ <div class="progress-bar">
193
+ <div class="progress-fill" style="width: 95%"></div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ <div class="mt-6">
198
+ <button class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition">
199
+ <i class="fas fa-cog mr-1"></i> Paramètres avancés
200
+ </button>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Download App -->
205
+ <div class="bg-white rounded-xl shadow-md p-6">
206
+ <h2 class="text-xl font-semibold mb-4">Télécharger l'application</h2>
207
+ <p class="text-gray-600 mb-4">Scannez le QR code pour installer QuantumVPN sur votre mobile</p>
208
+
209
+ <div class="flex flex-col items-center">
210
+ <div id="qrcode-container"></div>
211
+ <div class="text-center mt-4">
212
+ <p class="text-sm text-gray-500 mb-2">Disponible sur</p>
213
+ <div class="flex justify-center space-x-3">
214
+ <i class="fab fa-apple text-2xl text-gray-700"></i>
215
+ <i class="fab fa-android text-2xl text-gray-700"></i>
216
+ <i class="fab fa-windows text-2xl text-gray-700"></i>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Statistics -->
223
+ <div class="bg-white rounded-xl shadow-md p-6">
224
+ <h2 class="text-xl font-semibold mb-4">Statistiques</h2>
225
+ <div class="space-y-3">
226
+ <div class="flex justify-between">
227
+ <span class="text-gray-600">Données protégées</span>
228
+ <span class="font-medium">4.7 GB</span>
229
+ </div>
230
+ <div class="flex justify-between">
231
+ <span class="text-gray-600">Menaces bloquées</span>
232
+ <span class="font-medium">128</span>
233
+ </div>
234
+ <div class="flex justify-between">
235
+ <span class="text-gray-600">Serveurs disponibles</span>
236
+ <span class="font-medium">500+</span>
237
+ </div>
238
+ <div class="flex justify-between">
239
+ <span class="text-gray-600">Latence moyenne</span>
240
+ <span class="font-medium">28 ms</span>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </main>
247
+
248
+ <!-- Footer -->
249
+ <footer class="bg-gray-800 text-white py-6 px-4">
250
+ <div class="container mx-auto">
251
+ <div class="flex flex-col md:flex-row justify-between items-center">
252
+ <div class="mb-4 md:mb-0">
253
+ <div class="flex items-center space-x-2">
254
+ <i class="fas fa-shield-alt"></i>
255
+ <span class="font-medium">QuantumVPN</span>
256
+ </div>
257
+ <p class="text-sm text-gray-400 mt-1">Protection intelligente par IA</p>
258
+ </div>
259
+ <div class="flex space-x-6">
260
+ <a href="#" class="hover:text-blue-300 transition">Confidentialité</a>
261
+ <a href="#" class="hover:text-blue-300 transition">Conditions</a>
262
+ <a href="#" class="hover:text-blue-300 transition">Support</a>
263
+ </div>
264
+ </div>
265
+ <div class="mt-6 pt-6 border-t border-gray-700 text-center text-sm text-gray-400">
266
+ <p>© 2023 QuantumVPN. Tous droits réservés. Rotation automatique des serveurs gérée par 500 IA.</p>
267
+ </div>
268
+ </div>
269
+ </footer>
270
+ </div>
271
+
272
+ <script>
273
+ // Sample server data
274
+ const servers = [
275
+ { id: 1, name: "Quantum-Node-1", location: "Paris, France", speed: "Ultra Rapide", security: "Maximale", ping: 12, load: 35, premium: false },
276
+ { id: 2, name: "Quantum-Node-2", location: "New York, USA", speed: "Rapide", security: "Élevée", ping: 28, load: 62, premium: false },
277
+ { id: 3, name: "Quantum-Node-3", location: "Tokyo, Japon", speed: "Moyenne", security: "Maximale", ping: 45, load: 41, premium: true },
278
+ { id: 4, name: "Quantum-Node-4", location: "Sydney, Australie", speed: "Rapide", security: "Élevée", ping: 38, load: 57, premium: false },
279
+ { id: 5, name: "Quantum-Node-5", location: "Londres, UK", speed: "Ultra Rapide", security: "Maximale", ping: 9, load: 29, premium: true },
280
+ { id: 6, name: "Quantum-Node-6", location: "Singapour", speed: "Moyenne", security: "Élevée", ping: 52, load: 68, premium: false }
281
+ ];
282
+
283
+ // Current connection state
284
+ let isConnected = false;
285
+ let currentServer = null;
286
+ let rotationInterval;
287
+ let rotationTime = 600; // 10 minutes in seconds
288
+
289
+ // DOM elements
290
+ const connectBtn = document.getElementById('connect-btn');
291
+ const connectionIndicator = document.getElementById('connection-indicator');
292
+ const connectionStatus = document.getElementById('connection-status');
293
+ const currentServerSection = document.getElementById('current-server');
294
+ const serverName = document.getElementById('server-name');
295
+ const serverLocation = document.getElementById('server-location');
296
+ const serverSpeed = document.getElementById('server-speed');
297
+ const serverSecurity = document.getElementById('server-security');
298
+ const nextRotation = document.getElementById('next-rotation');
299
+ const rotationTimer = document.getElementById('rotation-timer');
300
+ const serverNetwork = document.querySelector('.grid.gap-4');
301
+ const securityLevel = document.getElementById('security-level');
302
+ const securityProgress = document.getElementById('security-progress');
303
+
304
+ // Generate QR Code
305
+ function generateQRCode() {
306
+ const qr = qrcode(0, 'L');
307
+ qr.addData('https://quantumvpn.com/download');
308
+ qr.make();
309
+
310
+ const qrContainer = document.getElementById('qrcode-container');
311
+ qrContainer.innerHTML = qr.createImgTag(4, 0);
312
+
313
+ // Style the generated image
314
+ const qrImg = qrContainer.querySelector('img');
315
+ qrImg.style.width = '100%';
316
+ qrImg.style.height = '100%';
317
+ }
318
+
319
+ // Render server cards
320
+ function renderServers() {
321
+ serverNetwork.innerHTML = '';
322
+ servers.forEach(server => {
323
+ const serverCard = document.createElement('div');
324
+ serverCard.className = 'server-card bg-white rounded-lg p-4 border border-gray-200 hover:border-blue-300 cursor-pointer';
325
+ serverCard.innerHTML = `
326
+ <div class="flex justify-between items-start mb-2">
327
+ <h3 class="font-medium">${server.name}</h3>
328
+ ${server.premium ? '<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Premium</span>' : ''}
329
+ </div>
330
+ <div class="text-sm text-gray-600 mb-3">
331
+ <div class="flex items-center mb-1">
332
+ <i class="fas fa-map-marker-alt text-xs mr-2"></i>
333
+ <span>${server.location}</span>
334
+ </div>
335
+ <div class="flex items-center">
336
+ <i class="fas fa-tachometer-alt text-xs mr-2"></i>
337
+ <span>${server.speed} (${server.ping}ms)</span>
338
+ </div>
339
+ </div>
340
+ <div class="flex justify-between items-center text-xs">
341
+ <div>
342
+ <div class="h-2 w-16 bg-gray-200 rounded-full overflow-hidden">
343
+ <div class="h-full bg-green-500" style="width: ${100 - server.load}%"></div>
344
+ </div>
345
+ <span>Charge: ${server.load}%</span>
346
+ </div>
347
+ <span class="flex items-center text-blue-600">
348
+ <i class="fas fa-shield-alt mr-1"></i>
349
+ ${server.security}
350
+ </span>
351
+ </div>
352
+ `;
353
+ serverCard.addEventListener('click', () => selectServer(server));
354
+ serverNetwork.appendChild(serverCard);
355
+ });
356
+ }
357
+
358
+ // Select a server
359
+ function selectServer(server) {
360
+ currentServer = server;
361
+ serverName.textContent = server.name;
362
+ serverLocation.textContent = server.location;
363
+ serverSpeed.textContent = server.speed;
364
+ serverSecurity.textContent = server.security;
365
+
366
+ if (isConnected) {
367
+ // If already connected, just update the current server display
368
+ currentServerSection.classList.remove('hidden');
369
+ }
370
+ }
371
+
372
+ // Connect/disconnect function
373
+ function toggleConnection() {
374
+ if (!isConnected) {
375
+ // If no server selected, choose a random one
376
+ if (!currentServer) {
377
+ const randomServer = servers[Math.floor(Math.random() * servers.length)];
378
+ selectServer(randomServer);
379
+ }
380
+
381
+ // Connect
382
+ isConnected = true;
383
+ connectBtn.innerHTML = '<i class="fas fa-power-off mr-2"></i> Se déconnecter';
384
+ connectionIndicator.className = 'w-4 h-4 rounded-full bg-green-500 mr-3 connection-animation';
385
+ connectionStatus.textContent = 'Connecté';
386
+ currentServerSection.classList.remove('hidden');
387
+ securityLevel.textContent = 'Optimale';
388
+ securityProgress.style.width = '95%';
389
+
390
+ // Start server rotation countdown
391
+ startRotationTimer();
392
+
393
+ // Simulate AI optimization
394
+ simulateAIOptimization();
395
+ } else {
396
+ // Disconnect
397
+ isConnected = false;
398
+ connectBtn.innerHTML = '<i class="fas fa-power-off mr-2"></i> Se connecter';
399
+ connectionIndicator.className = 'w-4 h-4 rounded-full bg-gray-400 mr-3';
400
+ connectionStatus.textContent = 'Déconnecté';
401
+ securityLevel.textContent = 'Non protégé';
402
+ securityProgress.style.width = '0%';
403
+
404
+ // Stop rotation timer
405
+ clearInterval(rotationInterval);
406
+ rotationTimer.textContent = '10:00';
407
+
408
+ // Hide current server section
409
+ currentServerSection.classList.add('hidden');
410
+ }
411
+ }
412
+
413
+ // Start rotation timer
414
+ function startRotationTimer() {
415
+ rotationTime = 600; // Reset to 10 minutes
416
+ updateRotationDisplay();
417
+
418
+ rotationInterval = setInterval(() => {
419
+ rotationTime--;
420
+ updateRotationDisplay();
421
+
422
+ if (rotationTime <= 0) {
423
+ // Rotate to a new server
424
+ const otherServers = servers.filter(s => s.id !== currentServer.id);
425
+ const newServer = otherServers[Math.floor(Math.random() * otherServers.length)];
426
+ selectServer(newServer);
427
+
428
+ // Reset timer
429
+ rotationTime = 600;
430
+
431
+ // Show notification
432
+ showRotationNotification(newServer);
433
+ }
434
+ }, 1000);
435
+ }
436
+
437
+ // Update rotation display
438
+ function updateRotationDisplay() {
439
+ const minutes = Math.floor(rotationTime / 60);
440
+ const seconds = rotationTime % 60;
441
+ rotationTimer.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
442
+ nextRotation.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
443
+ }
444
+
445
+ // Show rotation notification
446
+ function showRotationNotification(server) {
447
+ // In a real app, this would be a more elegant notification
448
+ alert(`Le serveur a été automatiquement changé pour ${server.name} (${server.location}) pour optimiser votre connexion.`);
449
+ }
450
+
451
+ // Simulate AI optimization
452
+ function simulateAIOptimization() {
453
+ const aiFeatures = ['traffic-analysis', 'threat-protection', 'server-selection'];
454
+
455
+ setInterval(() => {
456
+ if (!isConnected) return;
457
+
458
+ // Randomly adjust values to simulate AI working
459
+ aiFeatures.forEach(feature => {
460
+ const element = document.getElementById(feature);
461
+ if (element) {
462
+ const currentValue = parseInt(element.textContent === 'Active' ? 85 : element.textContent);
463
+ const newValue = Math.min(100, Math.max(80, currentValue + (Math.random() * 10 - 5)));
464
+ element.textContent = newValue > 85 ? 'Active' : Math.round(newValue) + '%';
465
+ }
466
+ });
467
+
468
+ // Randomly adjust security level slightly
469
+ const currentSecurity = parseInt(securityProgress.style.width);
470
+ const newSecurity = Math.min(95, Math.max(90, currentSecurity + (Math.random() * 4 - 2)));
471
+ securityProgress.style.width = `${newSecurity}%`;
472
+
473
+ }, 3000);
474
+ }
475
+
476
+ // Event listeners
477
+ connectBtn.addEventListener('click', toggleConnection);
478
+
479
+ // Initialize
480
+ document.addEventListener('DOMContentLoaded', () => {
481
+ renderServers();
482
+ generateQRCode();
483
+ });
484
+ </script>
485
+ <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=docto41/quantumvpn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
486
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ creer moi mon VPN hyper sofistique e automatique gerrer part 500 IA changement serveur toutes les 10 minute en automatique ...je veux un vrai VPN fonctionnel de suite avec qr code pour installer l'application sur telephone avec une belle interface
2
+ le qr code ne fonctionne pas