Hugging Face's logo

Spaces:
docto41
/
neurovpn
Running

App Files Community
docto41 commited on
Commit
0655086
·
verified ·
1 Parent(s): 1abecd7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +359 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Neurovpn
3
- emoji: 🦀
4
- colorFrom: blue
5
- colorTo: green
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: neurovpn
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,359 @@
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>NeuroVPN - Le VPN Intelligent</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]/build/qrcode.min.js"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
13
+ }
14
+ .server-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
+ }
18
+ .connection-animation {
19
+ animation: pulse 2s infinite;
20
+ }
21
+ @keyframes pulse {
22
+ 0% { opacity: 0.7; }
23
+ 50% { opacity: 1; }
24
+ 100% { opacity: 0.7; }
25
+ }
26
+ .glow {
27
+ box-shadow: 0 0 15px rgba(167, 119, 227, 0.7);
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-100 font-sans">
32
+ <div class="min-h-screen flex flex-col">
33
+ <!-- Header -->
34
+ <header class="gradient-bg text-white py-6 px-4 shadow-lg">
35
+ <div class="container mx-auto flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <i class="fas fa-shield-alt text-3xl"></i>
38
+ <h1 class="text-2xl font-bold">Neuro<span class="font-light">VPN</span></h1>
39
+ </div>
40
+ <div class="flex items-center space-x-4">
41
+ <div class="hidden md:flex items-center space-x-2 bg-white bg-opacity-20 px-4 py-2 rounded-full">
42
+ <i class="fas fa-bolt"></i>
43
+ <span>Mode IA Actif</span>
44
+ </div>
45
+ <button class="bg-white text-purple-700 px-4 py-2 rounded-full font-semibold hover:bg-gray-100 transition">
46
+ <i class="fas fa-user mr-2"></i>Mon Compte
47
+ </button>
48
+ </div>
49
+ </div>
50
+ </header>
51
+
52
+ <!-- Main Content -->
53
+ <main class="flex-grow container mx-auto px-4 py-8">
54
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
55
+ <!-- Left Panel - Connection Status -->
56
+ <div class="lg:col-span-2 space-y-6">
57
+ <!-- Connection Card -->
58
+ <div class="bg-white rounded-xl shadow-lg p-6">
59
+ <div class="flex justify-between items-center mb-6">
60
+ <h2 class="text-xl font-bold text-gray-800">Statut de Connexion</h2>
61
+ <div class="flex items-center space-x-2">
62
+ <span class="text-sm text-gray-500">IA #487 en charge</span>
63
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="flex flex-col md:flex-row items-center justify-between">
68
+ <div class="flex items-center mb-4 md:mb-0">
69
+ <div class="relative">
70
+ <div id="connectionCircle" class="w-24 h-24 rounded-full gradient-bg flex items-center justify-center connection-animation">
71
+ <i class="fas fa-lock text-white text-4xl"></i>
72
+ </div>
73
+ <div class="absolute -bottom-2 -right-2 bg-green-500 text-white rounded-full w-8 h-8 flex items-center justify-center">
74
+ <i class="fas fa-check text-xs"></i>
75
+ </div>
76
+ </div>
77
+ <div class="ml-6">
78
+ <h3 class="text-2xl font-bold text-gray-800">Connecté</h3>
79
+ <p class="text-gray-600">Protection maximale activée</p>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="text-center md:text-right">
84
+ <div class="text-gray-600 mb-2">Serveur actuel</div>
85
+ <div class="text-xl font-bold text-purple-700">Tokyo #17</div>
86
+ <div class="text-sm text-gray-500">Changement dans 8:32</div>
87
+ <button id="toggleConnection" class="mt-4 bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-full font-semibold transition">
88
+ Déconnecter
89
+ </button>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Server Rotation -->
95
+ <div class="bg-white rounded-xl shadow-lg p-6">
96
+ <div class="flex justify-between items-center mb-6">
97
+ <h2 class="text-xl font-bold text-gray-800">Rotation Automatique des Serveurs</h2>
98
+ <div class="flex items-center space-x-2">
99
+ <div class="relative">
100
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
101
+ <div class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-green-500 animate-ping"></div>
102
+ </div>
103
+ <span class="text-sm text-gray-500">Actif</span>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="space-y-4">
108
+ <div class="flex items-center justify-between">
109
+ <div>
110
+ <h3 class="font-semibold">Fréquence de rotation</h3>
111
+ <p class="text-sm text-gray-500">Optimisée par l'IA pour la meilleure performance</p>
112
+ </div>
113
+ <div class="bg-gray-100 px-4 py-2 rounded-full">
114
+ <span class="font-semibold">10 minutes</span>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="flex items-center justify-between">
119
+ <div>
120
+ <h3 class="font-semibold">Prochain serveur</h3>
121
+ <p class="text-sm text-gray-500">Sélectionné parmi 500 serveurs disponibles</p>
122
+ </div>
123
+ <div class="bg-purple-100 text-purple-700 px-4 py-2 rounded-full">
124
+ <span class="font-semibold">Singapour #42</span>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="pt-4">
129
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
130
+ <div id="rotationProgress" class="h-full gradient-bg rounded-full" style="width: 65%"></div>
131
+ </div>
132
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
133
+ <span>Dernier changement: 5:28</span>
134
+ <span>Prochain: 4:32</span>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Security Dashboard -->
141
+ <div class="bg-white rounded-xl shadow-lg p-6">
142
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Tableau de Bord Sécurité</h2>
143
+
144
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
145
+ <div class="bg-gray-50 p-4 rounded-lg">
146
+ <div class="flex items-center justify-between mb-2">
147
+ <h3 class="font-semibold text-gray-700">Protection DNS</h3>
148
+ <i class="fas fa-check-circle text-green-500"></i>
149
+ </div>
150
+ <p class="text-sm text-gray-500">Aucune fuite détectée</p>
151
+ </div>
152
+
153
+ <div class="bg-gray-50 p-4 rounded-lg">
154
+ <div class="flex items-center justify-between mb-2">
155
+ <h3 class="font-semibold text-gray-700">Anti-traçage</h3>
156
+ <i class="fas fa-shield-alt text-blue-500"></i>
157
+ </div>
158
+ <p class="text-sm text-gray-500">Actif - Niveau maximum</p>
159
+ </div>
160
+
161
+ <div class="bg-gray-50 p-4 rounded-lg">
162
+ <div class="flex items-center justify-between mb-2">
163
+ <h3 class="font-semibold text-gray-700">Chiffrement</h3>
164
+ <i class="fas fa-lock text-purple-500"></i>
165
+ </div>
166
+ <p class="text-sm text-gray-500">AES-256-GCM</p>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Right Panel - Quick Actions -->
173
+ <div class="space-y-6">
174
+ <!-- Quick Connect -->
175
+ <div class="bg-white rounded-xl shadow-lg p-6">
176
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Actions Rapides</h2>
177
+
178
+ <div class="space-y-4">
179
+ <button class="w-full flex items-center justify-between bg-gray-100 hover:bg-gray-200 p-4 rounded-lg transition">
180
+ <div class="flex items-center">
181
+ <i class="fas fa-random text-purple-500 mr-3"></i>
182
+ <span>Forcer la rotation du serveur</span>
183
+ </div>
184
+ <i class="fas fa-chevron-right text-gray-400"></i>
185
+ </button>
186
+
187
+ <button class="w-full flex items-center justify-between bg-gray-100 hover:bg-gray-200 p-4 rounded-lg transition">
188
+ <div class="flex items-center">
189
+ <i class="fas fa-user-secret text-blue-500 mr-3"></i>
190
+ <span>Mode furtif activé</span>
191
+ </div>
192
+ <i class="fas fa-toggle-on text-green-500"></i>
193
+ </button>
194
+
195
+ <button class="w-full flex items-center justify-between bg-gray-100 hover:bg-gray-200 p-4 rounded-lg transition">
196
+ <div class="flex items-center">
197
+ <i class="fas fa-rocket text-orange-500 mr-3"></i>
198
+ <span>Boost de vitesse</span>
199
+ </div>
200
+ <i class="fas fa-chevron-right text-gray-400"></i>
201
+ </button>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- App Download -->
206
+ <div class="bg-white rounded-xl shadow-lg p-6">
207
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Télécharger l'application</h2>
208
+ <p class="text-gray-600 mb-6">Scannez le QR code pour installer NeuroVPN sur votre mobile</p>
209
+
210
+ <div class="flex flex-col items-center">
211
+ <div id="qrcode" class="p-4 bg-white rounded-lg border border-gray-200 mb-4"></div>
212
+ <p class="text-sm text-gray-500 text-center">Disponible sur iOS et Android</p>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- AI Settings -->
217
+ <div class="bg-white rounded-xl shadow-lg p-6">
218
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Paramètres IA</h2>
219
+
220
+ <div class="space-y-4">
221
+ <div>
222
+ <label class="flex items-center justify-between cursor-pointer">
223
+ <span class="text-gray-700">Optimisation automatique</span>
224
+ <div class="relative">
225
+ <input type="checkbox" class="sr-only" checked>
226
+ <div class="block bg-purple-500 w-12 h-6 rounded-full"></div>
227
+ <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition"></div>
228
+ </div>
229
+ </label>
230
+ <p class="text-xs text-gray-500 mt-1">L'IA ajuste les paramètres en temps réel</p>
231
+ </div>
232
+
233
+ <div>
234
+ <label class="flex items-center justify-between cursor-pointer">
235
+ <span class="text-gray-700">Rotation intelligente</span>
236
+ <div class="relative">
237
+ <input type="checkbox" class="sr-only" checked>
238
+ <div class="block bg-purple-500 w-12 h-6 rounded-full"></div>
239
+ <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition"></div>
240
+ </div>
241
+ </label>
242
+ <p class="text-xs text-gray-500 mt-1">Changement de serveur toutes les 10 min</p>
243
+ </div>
244
+
245
+ <div>
246
+ <label class="flex items-center justify-between cursor-pointer">
247
+ <span class="text-gray-700">Protection avancée</span>
248
+ <div class="relative">
249
+ <input type="checkbox" class="sr-only" checked>
250
+ <div class="block bg-purple-500 w-12 h-6 rounded-full"></div>
251
+ <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition"></div>
252
+ </div>
253
+ </label>
254
+ <p class="text-xs text-gray-500 mt-1">Double chiffrement des données</p>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </main>
261
+
262
+ <!-- Footer -->
263
+ <footer class="bg-gray-800 text-white py-8 px-4">
264
+ <div class="container mx-auto">
265
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
266
+ <div>
267
+ <h3 class="text-lg font-semibold mb-4">NeuroVPN</h3>
268
+ <p class="text-gray-400">Le VPN le plus intelligent au monde, protégé par 500 IA spécialisées.</p>
269
+ </div>
270
+ <div>
271
+ <h3 class="text-lg font-semibold mb-4">Fonctionnalités</h3>
272
+ <ul class="space-y-2 text-gray-400">
273
+ <li><a href="#" class="hover:text-white">Rotation automatique</a></li>
274
+ <li><a href="#" class="hover:text-white">Protection IA</a></li>
275
+ <li><a href="#" class="hover:text-white">Mode furtif</a></li>
276
+ <li><a href="#" class="hover:text-white">Double VPN</a></li>
277
+ </ul>
278
+ </div>
279
+ <div>
280
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
281
+ <ul class="space-y-2 text-gray-400">
282
+ <li><a href="#" class="hover:text-white">Centre d'aide</a></li>
283
+ <li><a href="#" class="hover:text-white">Contact IA</a></li>
284
+ <li><a href="#" class="hover:text-white">FAQ</a></li>
285
+ <li><a href="#" class="hover:text-white">Statut</a></li>
286
+ </ul>
287
+ </div>
288
+ <div>
289
+ <h3 class="text-lg font-semibold mb-4">Legal</h3>
290
+ <ul class="space-y-2 text-gray-400">
291
+ <li><a href="#" class="hover:text-white">Politique de confidentialité</a></li>
292
+ <li><a href="#" class="hover:text-white">Conditions d'utilisation</a></li>
293
+ <li><a href="#" class="hover:text-white">Transparence</a></li>
294
+ </ul>
295
+ </div>
296
+ </div>
297
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
298
+ <p>© 2023 NeuroVPN. Tous droits réservés.</p>
299
+ </div>
300
+ </div>
301
+ </footer>
302
+ </div>
303
+
304
+ <script>
305
+ // QR Code Generation
306
+ document.addEventListener('DOMContentLoaded', function() {
307
+ // Generate QR Code
308
+ const qrcodeElement = document.getElementById('qrcode');
309
+ QRCode.toCanvas(qrcodeElement, 'https://neurovpn.example.com/download', {
310
+ width: 160,
311
+ margin: 1,
312
+ color: {
313
+ dark: '#6e8efb',
314
+ light: '#ffffff'
315
+ }
316
+ }, function(error) {
317
+ if (error) console.error(error);
318
+ });
319
+
320
+ // Connection toggle
321
+ const toggleConnection = document.getElementById('toggleConnection');
322
+ const connectionCircle = document.getElementById('connectionCircle');
323
+
324
+ toggleConnection.addEventListener('click', function() {
325
+ if (toggleConnection.textContent.includes('Déconnecter')) {
326
+ toggleConnection.textContent = 'Connecter';
327
+ toggleConnection.classList.remove('bg-red-500', 'hover:bg-red-600');
328
+ toggleConnection.classList.add('bg-green-500', 'hover:bg-green-600');
329
+ connectionCircle.classList.remove('gradient-bg', 'connection-animation');
330
+ connectionCircle.classList.add('bg-gray-300');
331
+ connectionCircle.innerHTML = '<i class="fas fa-unlock text-gray-600 text-4xl"></i>';
332
+ } else {
333
+ toggleConnection.textContent = 'Déconnecter';
334
+ toggleConnection.classList.remove('bg-green-500', 'hover:bg-green-600');
335
+ toggleConnection.classList.add('bg-red-500', 'hover:bg-red-600');
336
+ connectionCircle.classList.remove('bg-gray-300');
337
+ connectionCircle.classList.add('gradient-bg', 'connection-animation');
338
+ connectionCircle.innerHTML = '<i class="fas fa-lock text-white text-4xl"></i>';
339
+ }
340
+ });
341
+
342
+ // Simulate rotation progress
343
+ let progress = 65;
344
+ const rotationProgress = document.getElementById('rotationProgress');
345
+
346
+ setInterval(() => {
347
+ progress -= 1;
348
+ if (progress <= 0) progress = 100;
349
+ rotationProgress.style.width = `${progress}%`;
350
+
351
+ // Update time display
352
+ const minutes = Math.floor(progress / 10);
353
+ const seconds = (progress % 10) * 6;
354
+ document.querySelector('#rotationProgress + div > span:last-child').textContent = `Prochain: ${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
355
+ }, 1000);
356
+ });
357
+ </script>
358
+ <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/neurovpn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
359
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
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