Hugging Face's logo

Spaces:
powerisx
/
secure-vpn
Running

App Files Community
powerisx commited on
Commit
3a27bef
·
verified ·
1 Parent(s): 925eb98

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +649 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Secure Vpn
3
- emoji: ⚡
4
- colorFrom: blue
5
- colorTo: red
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: secure-vpn
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
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,649 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SecureVPN - Fast & Secure Virtual Private Network</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
+ <!-- Leaflet CSS -->
10
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
11
+ <style>
12
+ .gradient-bg {
13
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
14
+ }
15
+ .server-marker {
16
+ width: 16px;
17
+ height: 16px;
18
+ background-color: #4F46E5;
19
+ border-radius: 50%;
20
+ border: 2px solid white;
21
+ position: relative;
22
+ z-index: 1000;
23
+ }
24
+ .server-marker.active {
25
+ background-color: #10B981;
26
+ box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3);
27
+ }
28
+ .connection-animation {
29
+ animation: pulse 2s infinite;
30
+ }
31
+ @keyframes pulse {
32
+ 0% { opacity: 0.7; }
33
+ 50% { opacity: 1; }
34
+ 100% { opacity: 0.7; }
35
+ }
36
+ .vpn-toggle {
37
+ transition: all 0.3s ease;
38
+ }
39
+ .vpn-toggle.active {
40
+ background-color: #10B981;
41
+ }
42
+ .speedometer {
43
+ position: relative;
44
+ width: 150px;
45
+ height: 150px;
46
+ }
47
+ .speedometer-circle {
48
+ position: absolute;
49
+ width: 100%;
50
+ height: 100%;
51
+ border-radius: 50%;
52
+ border: 10px solid #E5E7EB;
53
+ }
54
+ .speedometer-fill {
55
+ position: absolute;
56
+ width: 100%;
57
+ height: 100%;
58
+ border-radius: 50%;
59
+ border: 10px solid transparent;
60
+ border-top-color: #4F46E5;
61
+ border-right-color: #4F46E5;
62
+ transform: rotate(45deg);
63
+ transition: transform 0.5s ease;
64
+ }
65
+ #server-map {
66
+ height: 400px;
67
+ width: 100%;
68
+ border-radius: 0.75rem;
69
+ z-index: 1;
70
+ }
71
+ .country-flag {
72
+ width: 16px;
73
+ height: 12px;
74
+ display: inline-block;
75
+ margin-right: 6px;
76
+ background-size: cover;
77
+ border: 1px solid #e5e7eb;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-gray-50 font-sans">
82
+ <!-- Header -->
83
+ <header class="gradient-bg text-white shadow-lg">
84
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
85
+ <div class="flex items-center space-x-2">
86
+ <i class="fas fa-lock text-2xl"></i>
87
+ <h1 class="text-2xl font-bold">SecureVPN</h1>
88
+ </div>
89
+ <nav class="hidden md:flex space-x-8">
90
+ <a href="#" class="hover:text-gray-200 transition">Features</a>
91
+ <a href="#" class="hover:text-gray-200 transition">Pricing</a>
92
+ <a href="#" class="hover:text-gray-200 transition">Servers</a>
93
+ <a href="#" class="hover:text-gray-200 transition">Support</a>
94
+ </nav>
95
+ <div class="flex items-center space-x-4">
96
+ <button class="px-4 py-2 rounded-full bg-white text-blue-600 font-medium hover:bg-gray-100 transition">Sign In</button>
97
+ <button class="md:hidden text-2xl">
98
+ <i class="fas fa-bars"></i>
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </header>
103
+
104
+ <!-- Main Content -->
105
+ <main class="container mx-auto px-4 py-8">
106
+ <!-- Connection Dashboard -->
107
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
108
+ <div class="p-6 md:p-8">
109
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
110
+ <div>
111
+ <h2 class="text-2xl font-bold text-gray-800">VPN Connection</h2>
112
+ <p class="text-gray-600">Secure your internet connection with one click</p>
113
+ </div>
114
+ <div class="mt-4 md:mt-0 flex items-center space-x-4">
115
+ <div class="flex items-center space-x-2">
116
+ <div class="w-3 h-3 rounded-full bg-gray-300"></div>
117
+ <span class="text-sm text-gray-600" id="connection-status">Disconnected</span>
118
+ </div>
119
+ <div class="relative">
120
+ <div class="vpn-toggle w-16 h-8 bg-gray-300 rounded-full flex items-center cursor-pointer" id="vpn-toggle">
121
+ <div class="w-6 h-6 bg-white rounded-full shadow-md transform translate-x-1 transition"></div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="flex flex-col lg:flex-row gap-8">
128
+ <!-- Server Map -->
129
+ <div class="flex-1 relative">
130
+ <div id="server-map" class="bg-gray-100 rounded-xl"></div>
131
+
132
+ <div class="mt-4 flex flex-wrap gap-2" id="server-buttons-container">
133
+ <!-- Server buttons will be added dynamically -->
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Connection Details -->
138
+ <div class="flex-1">
139
+ <div class="bg-gray-50 rounded-xl p-6 h-full">
140
+ <div class="flex flex-col h-full">
141
+ <div class="mb-6">
142
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Current Connection</h3>
143
+ <div class="flex items-center space-x-3">
144
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
145
+ <i class="fas fa-shield-alt text-blue-600"></i>
146
+ </div>
147
+ <div>
148
+ <p class="font-medium" id="current-server">Australia #23</p>
149
+ <p class="text-sm text-gray-600" id="server-ip">192.168.23.45</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="mb-6">
155
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Connection Speed</h3>
156
+ <div class="flex justify-around items-center">
157
+ <div class="text-center">
158
+ <div class="speedometer mx-auto mb-2">
159
+ <div class="speedometer-circle"></div>
160
+ <div class="speedometer-fill" id="download-speedometer"></div>
161
+ </div>
162
+ <p class="text-sm text-gray-600">Download</p>
163
+ <p class="font-bold" id="download-speed">0 Mbps</p>
164
+ </div>
165
+ <div class="text-center">
166
+ <div class="speedometer mx-auto mb-2">
167
+ <div class="speedometer-circle"></div>
168
+ <div class="speedometer-fill" id="upload-speedometer"></div>
169
+ </div>
170
+ <p class="text-sm text-gray-600">Upload</p>
171
+ <p class="font-bold" id="upload-speed">0 Mbps</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="mt-auto">
177
+ <div class="flex justify-between items-center mb-2">
178
+ <span class="text-sm text-gray-600">Data Transferred</span>
179
+ <span class="text-sm font-medium" id="data-transferred">0 MB</span>
180
+ </div>
181
+ <div class="w-full bg-gray-200 rounded-full h-2">
182
+ <div class="bg-blue-600 h-2 rounded-full" id="data-progress" style="width: 0%"></div>
183
+ </div>
184
+ <div class="flex justify-between items-center mt-4">
185
+ <span class="text-sm text-gray-600">Connection Time</span>
186
+ <span class="text-sm font-medium" id="connection-time">00:00:00</span>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Features Section -->
197
+ <div class="mb-12">
198
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Why Choose SecureVPN?</h2>
199
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
200
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
201
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
202
+ <i class="fas fa-bolt text-xl"></i>
203
+ </div>
204
+ <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
205
+ <p class="text-gray-600">Our high-speed servers ensure you can stream, download, and browse without any lag or buffering.</p>
206
+ </div>
207
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
208
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
209
+ <i class="fas fa-user-shield text-xl"></i>
210
+ </div>
211
+ <h3 class="text-xl font-semibold mb-2">Military Grade Encryption</h3>
212
+ <p class="text-gray-600">256-bit AES encryption protects your data from hackers, ISPs, and government surveillance.</p>
213
+ </div>
214
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
215
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
216
+ <i class="fas fa-globe-americas text-xl"></i>
217
+ </div>
218
+ <h3 class="text-xl font-semibold mb-2">Global Network</h3>
219
+ <p class="text-gray-600">Access content from anywhere with our network of 1000+ servers in 50+ countries worldwide.</p>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Testimonials -->
225
+ <div class="mb-12">
226
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">What Our Users Say</h2>
227
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
228
+ <div class="bg-white p-6 rounded-xl shadow-sm">
229
+ <div class="flex items-center mb-4">
230
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
231
+ <i class="fas fa-user text-blue-600"></i>
232
+ </div>
233
+ <div>
234
+ <p class="font-medium">Sarah Johnson</p>
235
+ <div class="flex text-yellow-400">
236
+ <i class="fas fa-star"></i>
237
+ <i class="fas fa-star"></i>
238
+ <i class="fas fa-star"></i>
239
+ <i class="fas fa-star"></i>
240
+ <i class="fas fa-star"></i>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ <p class="text-gray-600">"I've tried several VPN services before, but SecureVPN is by far the fastest and most reliable. It's become an essential tool for my remote work."</p>
245
+ </div>
246
+ <div class="bg-white p-6 rounded-xl shadow-sm">
247
+ <div class="flex items-center mb-4">
248
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
249
+ <i class="fas fa-user text-blue-600"></i>
250
+ </div>
251
+ <div>
252
+ <p class="font-medium">Michael Chen</p>
253
+ <div class="flex text-yellow-400">
254
+ <i class="fas fa-star"></i>
255
+ <i class="fas fa-star"></i>
256
+ <i class="fas fa-star"></i>
257
+ <i class="fas fa-star"></i>
258
+ <i class="fas fa-star-half-alt"></i>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ <p class="text-gray-600">"As a frequent traveler, SecureVPN allows me to access my favorite shows and websites no matter where I am. The connection is always stable."</p>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </main>
267
+
268
+ <!-- Footer -->
269
+ <footer class="bg-gray-800 text-white py-12">
270
+ <div class="container mx-auto px-4">
271
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
272
+ <div>
273
+ <h3 class="text-xl font-bold mb-4 flex items-center">
274
+ <i class="fas fa-lock mr-2"></i> SecureVPN
275
+ </h3>
276
+ <p class="text-gray-400">Protecting your digital life since 2015 with fast, secure, and private VPN services.</p>
277
+ </div>
278
+ <div>
279
+ <h4 class="font-semibold mb-4">Product</h4>
280
+ <ul class="space-y-2">
281
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
282
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
283
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Servers</a></li>
284
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Apps</a></li>
285
+ </ul>
286
+ </div>
287
+ <div>
288
+ <h4 class="font-semibold mb-4">Support</h4>
289
+ <ul class="space-y-2">
290
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
291
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
292
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
293
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Status</a></li>
294
+ </ul>
295
+ </div>
296
+ <div>
297
+ <h4 class="font-semibold mb-4">Legal</h4>
298
+ <ul class="space-y-2">
299
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
300
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
301
+ <li><a href="#" class="text-gray-400 hover:text-white transition">DMCA</a></li>
302
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Refund Policy</a></li>
303
+ </ul>
304
+ </div>
305
+ </div>
306
+ <div class="pt-6 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
307
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 SecureVPN. All rights reserved.</p>
308
+ <div class="flex space-x-4">
309
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
310
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a>
311
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
312
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </footer>
317
+
318
+ <!-- Leaflet JS -->
319
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
320
+ <script>
321
+ // DOM Elements
322
+ const vpnToggle = document.getElementById('vpn-toggle');
323
+ const connectionStatus = document.getElementById('connection-status');
324
+ const currentServer = document.getElementById('current-server');
325
+ const serverIp = document.getElementById('server-ip');
326
+ const downloadSpeed = document.getElementById('download-speed');
327
+ const uploadSpeed = document.getElementById('upload-speed');
328
+ const downloadSpeedometer = document.getElementById('download-speedometer');
329
+ const uploadSpeedometer = document.getElementById('upload-speedometer');
330
+ const dataTransferred = document.getElementById('data-transferred');
331
+ const dataProgress = document.getElementById('data-progress');
332
+ const connectionTime = document.getElementById('connection-time');
333
+ const serverButtonsContainer = document.getElementById('server-buttons-container');
334
+
335
+ // Variables
336
+ let isConnected = false;
337
+ let connectionStartTime = null;
338
+ let connectionInterval = null;
339
+ let dataUsage = 0;
340
+ let currentLocation = 'au';
341
+ let map;
342
+ let markers = [];
343
+ let activeMarker = null;
344
+ let connectionCircle = null;
345
+
346
+ // Server details with coordinates and flags
347
+ const serverDetails = {
348
+ 'us': {
349
+ name: 'United States #12',
350
+ ip: '104.18.23.156',
351
+ coords: [37.0902, -95.7129],
352
+ flag: 'https://flagcdn.com/us.svg'
353
+ },
354
+ 'eu': {
355
+ name: 'Europe #7',
356
+ ip: '185.143.223.41',
357
+ coords: [50.1109, 8.6821],
358
+ flag: 'https://flagcdn.com/eu.svg'
359
+ },
360
+ 'au': {
361
+ name: 'Australia #23',
362
+ ip: '192.168.23.45',
363
+ coords: [-25.2744, 133.7751],
364
+ flag: 'https://flagcdn.com/au.svg'
365
+ },
366
+ 'asia': {
367
+ name: 'Asia #9',
368
+ ip: '45.67.89.123',
369
+ coords: [35.8617, 104.1954],
370
+ flag: 'https://flagcdn.com/cn.svg'
371
+ },
372
+ 'ca': {
373
+ name: 'Canada #5',
374
+ ip: '172.16.31.90',
375
+ coords: [56.1304, -106.3468],
376
+ flag: 'https://flagcdn.com/ca.svg'
377
+ },
378
+ 'uk': {
379
+ name: 'UK #8',
380
+ ip: '78.141.211.34',
381
+ coords: [55.3781, -3.4360],
382
+ flag: 'https://flagcdn.com/gb.svg'
383
+ },
384
+ 'jp': {
385
+ name: 'Japan #15',
386
+ ip: '210.140.92.183',
387
+ coords: [36.2048, 138.2529],
388
+ flag: 'https://flagcdn.com/jp.svg'
389
+ },
390
+ 'br': {
391
+ name: 'Brazil #3',
392
+ ip: '191.32.56.201',
393
+ coords: [-14.2350, -51.9253],
394
+ flag: 'https://flagcdn.com/br.svg'
395
+ },
396
+ 'in': {
397
+ name: 'India #11',
398
+ ip: '115.241.91.12',
399
+ coords: [20.5937, 78.9629],
400
+ flag: 'https://flagcdn.com/in.svg'
401
+ },
402
+ 'sg': {
403
+ name: 'Singapore #6',
404
+ ip: '203.116.223.15',
405
+ coords: [1.3521, 103.8198],
406
+ flag: 'https://flagcdn.com/sg.svg'
407
+ },
408
+ 'de': {
409
+ name: 'Germany #9',
410
+ ip: '217.172.190.47',
411
+ coords: [51.1657, 10.4515],
412
+ flag: 'https://flagcdn.com/de.svg'
413
+ },
414
+ 'fr': {
415
+ name: 'France #4',
416
+ ip: '176.31.128.1',
417
+ coords: [46.2276, 2.2137],
418
+ flag: 'https://flagcdn.com/fr.svg'
419
+ },
420
+ 'nl': {
421
+ name: 'Netherlands #7',
422
+ ip: '82.192.84.116',
423
+ coords: [52.1326, 5.2913],
424
+ flag: 'https://flagcdn.com/nl.svg'
425
+ },
426
+ 'se': {
427
+ name: 'Sweden #2',
428
+ ip: '31.15.32.10',
429
+ coords: [60.1282, 18.6435],
430
+ flag: 'https://flagcdn.com/se.svg'
431
+ },
432
+ 'nz': {
433
+ name: 'New Zealand #5',
434
+ ip: '203.109.129.2',
435
+ coords: [-40.9006, 174.8860],
436
+ flag: 'https://flagcdn.com/nz.svg'
437
+ }
438
+ };
439
+
440
+ // Initialize map
441
+ function initMap() {
442
+ map = L.map('server-map').setView([20, 0], 2);
443
+
444
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
445
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
446
+ }).addTo(map);
447
+
448
+ // Add markers for each server location
449
+ for (const [code, details] of Object.entries(serverDetails)) {
450
+ const marker = L.circleMarker(details.coords, {
451
+ radius: 8,
452
+ fillColor: code === currentLocation ? '#10B981' : '#4F46E5',
453
+ color: '#fff',
454
+ weight: 2,
455
+ opacity: 1,
456
+ fillOpacity: 0.8
457
+ }).addTo(map);
458
+
459
+ marker.on('click', () => {
460
+ changeServerLocation(code);
461
+ });
462
+
463
+ markers.push({ code, marker });
464
+
465
+ if (code === currentLocation) {
466
+ activeMarker = marker;
467
+ map.setView(details.coords, 4);
468
+ }
469
+ }
470
+
471
+ // Create connection animation circle (hidden initially)
472
+ connectionCircle = L.circle(serverDetails[currentLocation].coords, {
473
+ color: '#3B82F6',
474
+ fillColor: '#3B82F6',
475
+ fillOpacity: 0.2,
476
+ radius: 1000000
477
+ }).addTo(map);
478
+ connectionCircle.setStyle({ opacity: 0 });
479
+ }
480
+
481
+ // Initialize server buttons
482
+ function initServerButtons() {
483
+ for (const [code, details] of Object.entries(serverDetails)) {
484
+ const button = document.createElement('button');
485
+ button.className = `px-4 py-2 bg-gray-100 rounded-full text-sm font-medium hover:bg-gray-200 transition server-btn ${code === currentLocation ? 'bg-blue-100 text-blue-700 hover:bg-blue-200' : ''}`;
486
+ button.dataset.location = code;
487
+
488
+ const flagSpan = document.createElement('span');
489
+ flagSpan.className = 'country-flag';
490
+ flagSpan.style.backgroundImage = `url(${details.flag})`;
491
+
492
+ const textSpan = document.createElement('span');
493
+ textSpan.textContent = details.name.split(' #')[0];
494
+
495
+ button.appendChild(flagSpan);
496
+ button.appendChild(textSpan);
497
+
498
+ button.addEventListener('click', () => {
499
+ changeServerLocation(code);
500
+ });
501
+
502
+ serverButtonsContainer.appendChild(button);
503
+ }
504
+ }
505
+
506
+ // Change server location
507
+ function changeServerLocation(code) {
508
+ currentLocation = code;
509
+ const details = serverDetails[code];
510
+
511
+ // Update active marker
512
+ markers.forEach(({ code: markerCode, marker }) => {
513
+ if (markerCode === code) {
514
+ marker.setStyle({ fillColor: '#10B981' });
515
+ activeMarker = marker;
516
+ map.setView(details.coords, 4);
517
+ } else {
518
+ marker.setStyle({ fillColor: '#4F46E5' });
519
+ }
520
+ });
521
+
522
+ // Update server details
523
+ currentServer.textContent = details.name;
524
+ serverIp.textContent = details.ip;
525
+
526
+ // Update active button
527
+ document.querySelectorAll('.server-btn').forEach(btn => {
528
+ if (btn.dataset.location === code) {
529
+ btn.classList.remove('bg-gray-100', 'hover:bg-gray-200');
530
+ btn.classList.add('bg-blue-100', 'text-blue-700', 'hover:bg-blue-200');
531
+ } else {
532
+ btn.classList.remove('bg-blue-100', 'text-blue-700', 'hover:bg-blue-200');
533
+ btn.classList.add('bg-gray-100', 'hover:bg-gray-200');
534
+ }
535
+ });
536
+
537
+ // If connected, show reconnecting animation
538
+ if (isConnected) {
539
+ connectionCircle.setStyle({ opacity: 0 });
540
+ setTimeout(() => {
541
+ connectionCircle.setLatLng(details.coords);
542
+ connectionCircle.setStyle({ opacity: 0.7 });
543
+ }, 300);
544
+ }
545
+ }
546
+
547
+ // Toggle VPN Connection
548
+ vpnToggle.addEventListener('click', () => {
549
+ isConnected = !isConnected;
550
+
551
+ if (isConnected) {
552
+ // Connect
553
+ vpnToggle.classList.add('active');
554
+ vpnToggle.querySelector('div').classList.add('translate-x-8');
555
+ connectionStatus.textContent = 'Connected';
556
+ connectionStatus.previousElementSibling.classList.remove('bg-gray-300');
557
+ connectionStatus.previousElementSibling.classList.add('bg-green-500');
558
+
559
+ // Show connection animation
560
+ connectionCircle.setStyle({ opacity: 0.7 });
561
+
562
+ // Start connection timer
563
+ connectionStartTime = new Date();
564
+ connectionInterval = setInterval(updateConnectionTime, 1000);
565
+
566
+ // Simulate connection speeds
567
+ simulateConnection();
568
+ } else {
569
+ // Disconnect
570
+ vpnToggle.classList.remove('active');
571
+ vpnToggle.querySelector('div').classList.remove('translate-x-8');
572
+ connectionStatus.textContent = 'Disconnected';
573
+ connectionStatus.previousElementSibling.classList.remove('bg-green-500');
574
+ connectionStatus.previousElementSibling.classList.add('bg-gray-300');
575
+
576
+ // Hide connection animation
577
+ connectionCircle.setStyle({ opacity: 0 });
578
+
579
+ // Stop timers
580
+ clearInterval(connectionInterval);
581
+ connectionTime.textContent = '00:00:00';
582
+
583
+ // Reset speeds
584
+ downloadSpeed.textContent = '0 Mbps';
585
+ uploadSpeed.textContent = '0 Mbps';
586
+ downloadSpeedometer.style.transform = 'rotate(45deg)';
587
+ uploadSpeedometer.style.transform = 'rotate(45deg)';
588
+ }
589
+ });
590
+
591
+ // Update connection time
592
+ function updateConnectionTime() {
593
+ const now = new Date();
594
+ const diff = Math.floor((now - connectionStartTime) / 1000);
595
+
596
+ const hours = Math.floor(diff / 3600);
597
+ const minutes = Math.floor((diff % 3600) / 60);
598
+ const seconds = diff % 60;
599
+
600
+ connectionTime.textContent =
601
+ `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
602
+ }
603
+
604
+ // Simulate connection speeds and data transfer
605
+ function simulateConnection() {
606
+ let download = 0;
607
+ let upload = 0;
608
+ dataUsage = 0;
609
+
610
+ const speedInterval = setInterval(() => {
611
+ if (!isConnected) {
612
+ clearInterval(speedInterval);
613
+ return;
614
+ }
615
+
616
+ // Random speed fluctuations
617
+ download = Math.min(100, Math.max(10, download + (Math.random() * 4 - 2)));
618
+ upload = Math.min(40, Math.max(5, upload + (Math.random() * 2 - 1)));
619
+
620
+ // Update speed displays
621
+ downloadSpeed.textContent = `${download.toFixed(1)} Mbps`;
622
+ uploadSpeed.textContent = `${upload.toFixed(1)} Mbps`;
623
+
624
+ // Update speedometer visuals
625
+ const downloadRotation = 45 + (download / 100 * 270);
626
+ const uploadRotation = 45 + (upload / 40 * 270);
627
+ downloadSpeedometer.style.transform = `rotate(${downloadRotation}deg)`;
628
+ uploadSpeedometer.style.transform = `rotate(${uploadRotation}deg)`;
629
+
630
+ // Update data transferred
631
+ dataUsage += (download + upload) / 8 / 10; // Convert to MB
632
+ dataTransferred.textContent = `${dataUsage.toFixed(1)} MB`;
633
+ const progressPercent = Math.min(100, (dataUsage / 100) * 100);
634
+ dataProgress.style.width = `${progressPercent}%`;
635
+ }, 100);
636
+ }
637
+
638
+ // Initialize the app
639
+ document.addEventListener('DOMContentLoaded', () => {
640
+ initMap();
641
+ initServerButtons();
642
+
643
+ // Set initial server details
644
+ currentServer.textContent = serverDetails[currentLocation].name;
645
+ serverIp.textContent = serverDetails[currentLocation].ip;
646
+ });
647
+ </script>
648
+ <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=powerisx/secure-vpn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
649
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Add free map, add more vpn countries to select.