Hugging Face's logo

Spaces:
powerisx
/
povpn
Running

App Files Community
powerisx commited on
Commit
eee83bd
·
verified ·
1 Parent(s): fa5abd0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1186 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Povpn
3
- emoji: 🏃
4
- colorFrom: red
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: povpn
3
+ emoji: 🐳
4
+ colorFrom: gray
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,1186 @@
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
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ 'vpn-primary': '#4F46E5',
14
+ 'vpn-secondary': '#10B981',
15
+ 'vpn-accent': '#F59E0B',
16
+ 'vpn-dark': '#1E293B',
17
+ 'vpn-light': '#F8FAFC',
18
+ 'vpn-europe': '#3B82F6',
19
+ 'vpn-usa': '#EC4899',
20
+ 'vpn-asia': '#F97316',
21
+ 'vpn-oceania': '#14B8A6',
22
+ 'vpn-southamerica': '#8B5CF6',
23
+ 'vpn-africa': '#EF4444'
24
+ }
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
30
+ <!-- Leaflet CSS -->
31
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
32
+ <style>
33
+ .gradient-bg {
34
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
35
+ }
36
+ .server-marker {
37
+ width: 16px;
38
+ height: 16px;
39
+ background-color: #4F46E5;
40
+ border-radius: 50%;
41
+ border: 2px solid white;
42
+ position: relative;
43
+ z-index: 1000;
44
+ }
45
+ .server-marker.active {
46
+ background-color: #10B981;
47
+ box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3);
48
+ }
49
+ .connection-animation {
50
+ animation: pulse 2s infinite;
51
+ }
52
+ @keyframes pulse {
53
+ 0% { opacity: 0.7; }
54
+ 50% { opacity: 1; }
55
+ 100% { opacity: 0.7; }
56
+ }
57
+ .vpn-toggle {
58
+ transition: all 0.3s ease;
59
+ }
60
+ .vpn-toggle.active {
61
+ background-color: #10B981;
62
+ }
63
+ .speedometer {
64
+ position: relative;
65
+ width: 150px;
66
+ height: 150px;
67
+ }
68
+ .speedometer-circle {
69
+ position: absolute;
70
+ width: 100%;
71
+ height: 100%;
72
+ border-radius: 50%;
73
+ border: 10px solid #E5E7EB;
74
+ }
75
+ .speedometer-fill {
76
+ position: absolute;
77
+ width: 100%;
78
+ height: 100%;
79
+ border-radius: 50%;
80
+ border: 10px solid transparent;
81
+ border-top-color: #4F46E5;
82
+ border-right-color: #4F46E5;
83
+ transform: rotate(45deg);
84
+ transition: transform 0.5s ease;
85
+ }
86
+ #server-map {
87
+ height: 400px;
88
+ width: 100%;
89
+ border-radius: 0.75rem;
90
+ z-index: 1;
91
+ }
92
+ .country-flag {
93
+ width: 16px;
94
+ height: 12px;
95
+ display: inline-block;
96
+ margin-right: 6px;
97
+ background-size: cover;
98
+ border: 1px solid #e5e7eb;
99
+ }
100
+ .region-tag {
101
+ display: inline-block;
102
+ padding: 2px 6px;
103
+ border-radius: 4px;
104
+ font-size: 10px;
105
+ font-weight: bold;
106
+ text-transform: uppercase;
107
+ margin-left: 6px;
108
+ }
109
+ .region-europe {
110
+ background-color: #3B82F6;
111
+ color: white;
112
+ }
113
+ .region-usa {
114
+ background-color: #EC4899;
115
+ color: white;
116
+ }
117
+ .region-asia {
118
+ background-color: #F97316;
119
+ color: white;
120
+ }
121
+ .region-oceania {
122
+ background-color: #14B8A6;
123
+ color: white;
124
+ }
125
+ .region-southamerica {
126
+ background-color: #8B5CF6;
127
+ color: white;
128
+ }
129
+ .region-africa {
130
+ background-color: #EF4444;
131
+ color: white;
132
+ }
133
+ .server-card {
134
+ transition: all 0.3s ease;
135
+ }
136
+ .server-card:hover {
137
+ transform: translateY(-2px);
138
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
139
+ }
140
+ .ping-indicator {
141
+ width: 10px;
142
+ height: 10px;
143
+ border-radius: 50%;
144
+ display: inline-block;
145
+ margin-right: 4px;
146
+ }
147
+ .ping-excellent {
148
+ background-color: #10B981;
149
+ }
150
+ .ping-good {
151
+ background-color: #84CC16;
152
+ }
153
+ .ping-average {
154
+ background-color: #F59E0B;
155
+ }
156
+ .ping-poor {
157
+ background-color: #EF4444;
158
+ }
159
+ </style>
160
+ </head>
161
+ <body class="bg-vpn-light font-sans">
162
+ <!-- Header -->
163
+ <header class="gradient-bg text-white shadow-lg">
164
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
165
+ <div class="flex items-center space-x-2">
166
+ <i class="fas fa-lock text-2xl"></i>
167
+ <h1 class="text-2xl font-bold">SecureVPN</h1>
168
+ </div>
169
+ <nav class="hidden md:flex space-x-8">
170
+ <a href="#" class="hover:text-gray-200 transition">Features</a>
171
+ <a href="#" class="hover:text-gray-200 transition">Pricing</a>
172
+ <a href="#" class="hover:text-gray-200 transition">Servers</a>
173
+ <a href="#" class="hover:text-gray-200 transition">Support</a>
174
+ </nav>
175
+ <div class="flex items-center space-x-4">
176
+ <button class="px-4 py-2 rounded-full bg-white text-blue-600 font-medium hover:bg-gray-100 transition">Sign In</button>
177
+ <button class="md:hidden text-2xl">
178
+ <i class="fas fa-bars"></i>
179
+ </button>
180
+ </div>
181
+ </div>
182
+ </header>
183
+
184
+ <!-- Main Content -->
185
+ <main class="container mx-auto px-4 py-8">
186
+ <!-- Connection Dashboard -->
187
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
188
+ <div class="p-6 md:p-8">
189
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
190
+ <div>
191
+ <h2 class="text-2xl font-bold text-gray-800">VPN Connection</h2>
192
+ <p class="text-gray-600">Secure your internet connection with one click</p>
193
+ </div>
194
+ <div class="mt-4 md:mt-0 flex items-center space-x-4">
195
+ <div class="flex items-center space-x-2">
196
+ <div class="w-3 h-3 rounded-full bg-gray-300"></div>
197
+ <span class="text-sm text-gray-600" id="connection-status">Disconnected</span>
198
+ </div>
199
+ <div class="relative">
200
+ <div class="vpn-toggle w-16 h-8 bg-gray-300 rounded-full flex items-center cursor-pointer" id="vpn-toggle">
201
+ <div class="w-6 h-6 bg-white rounded-full shadow-md transform translate-x-1 transition"></div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="flex flex-col lg:flex-row gap-8">
208
+ <!-- Server Map -->
209
+ <div class="flex-1 relative">
210
+ <div id="server-map" class="bg-gray-100 rounded-xl"></div>
211
+
212
+ <div class="mt-4">
213
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Server Locations</h3>
214
+ <div class="flex flex-wrap gap-2 mb-4">
215
+ <button class="region-filter px-3 py-1 rounded-full text-xs font-medium bg-vpn-europe text-white" data-region="europe">Europe</button>
216
+ <button class="region-filter px-3 py-1 rounded-full text-xs font-medium bg-vpn-usa text-white" data-region="usa">USA</button>
217
+ <button class="region-filter px-3 py-1 rounded-full text-xs font-medium bg-vpn-asia text-white" data-region="asia">Asia</button>
218
+ <button class="region-filter px-3 py-1 rounded-full text-xs font-medium bg-vpn-oceania text-white" data-region="oceania">Oceania</button>
219
+ <button class="region-filter px-3 py-1 rounded-full text-xs font-medium bg-vpn-southamerica text-white" data-region="southamerica">South America</button>
220
+ <button class="region-filter px-3 py-1 rounded-full text-xs font-medium bg-vpn-africa text-white" data-region="africa">Africa</button>
221
+ <button class="region-filter px-3 py-1 rounded-full text-xs font-medium bg-gray-200 text-gray-800" data-region="all">All Regions</button>
222
+ </div>
223
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3" id="server-buttons-container">
224
+ <!-- Server cards will be added dynamically -->
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Connection Details -->
230
+ <div class="flex-1">
231
+ <div class="bg-gray-50 rounded-xl p-6 h-full">
232
+ <div class="flex flex-col h-full">
233
+ <div class="mb-6">
234
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Current Connection</h3>
235
+ <div class="flex items-center space-x-3">
236
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
237
+ <i class="fas fa-shield-alt text-blue-600"></i>
238
+ </div>
239
+ <div>
240
+ <p class="font-medium" id="current-server">London #7</p>
241
+ <p class="text-sm text-gray-600" id="server-ip">191.32.56.201</p>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="mb-6">
247
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Connection Speed</h3>
248
+ <div class="flex justify-around items-center">
249
+ <div class="text-center">
250
+ <div class="speedometer mx-auto mb-2">
251
+ <div class="speedometer-circle"></div>
252
+ <div class="speedometer-fill" id="download-speedometer"></div>
253
+ </div>
254
+ <p class="text-sm text-gray-600">Download</p>
255
+ <p class="font-bold" id="download-speed">0 Mbps</p>
256
+ </div>
257
+ <div class="text-center">
258
+ <div class="speedometer mx-auto mb-2">
259
+ <div class="speedometer-circle"></div>
260
+ <div class="speedometer-fill" id="upload-speedometer"></div>
261
+ </div>
262
+ <p class="text-sm text-gray-600">Upload</p>
263
+ <p class="font-bold" id="upload-speed">0 Mbps</p>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="mt-auto">
269
+ <div class="flex justify-between items-center mb-2">
270
+ <span class="text-sm text-gray-600">Data Transferred</span>
271
+ <span class="text-sm font-medium" id="data-transferred">0 MB</span>
272
+ </div>
273
+ <div class="w-full bg-gray-200 rounded-full h-2">
274
+ <div class="bg-blue-600 h-2 rounded-full" id="data-progress" style="width: 0%"></div>
275
+ </div>
276
+ <div class="flex justify-between items-center mt-4">
277
+ <span class="text-sm text-gray-600">Connection Time</span>
278
+ <span class="text-sm font-medium" id="connection-time">00:00:00</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Features Section -->
289
+ <div class="mb-12">
290
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Why Choose SecureVPN?</h2>
291
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
292
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
293
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
294
+ <i class="fas fa-bolt text-xl"></i>
295
+ </div>
296
+ <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
297
+ <p class="text-gray-600">Our high-speed servers ensure you can stream, download, and browse without any lag or buffering.</p>
298
+ </div>
299
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
300
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
301
+ <i class="fas fa-user-shield text-xl"></i>
302
+ </div>
303
+ <h3 class="text-xl font-semibold mb-2">Military Grade Encryption</h3>
304
+ <p class="text-gray-600">256-bit AES encryption protects your data from hackers, ISPs, and government surveillance.</p>
305
+ </div>
306
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
307
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
308
+ <i class="fas fa-globe-americas text-xl"></i>
309
+ </div>
310
+ <h3 class="text-xl font-semibold mb-2">Global Network</h3>
311
+ <p class="text-gray-600">Access content from anywhere with our network of 1500+ servers in 80+ countries worldwide.</p>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Testimonials -->
317
+ <div class="mb-12">
318
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">What Our Users Say</h2>
319
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
320
+ <div class="bg-white p-6 rounded-xl shadow-sm">
321
+ <div class="flex items-center mb-4">
322
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
323
+ <i class="fas fa-user text-blue-600"></i>
324
+ </div>
325
+ <div>
326
+ <p class="font-medium">Sarah Johnson</p>
327
+ <div class="flex text-yellow-400">
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="fas fa-star"></i>
331
+ <i class="fas fa-star"></i>
332
+ <i class="fas fa-star"></i>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ <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>
337
+ </div>
338
+ <div class="bg-white p-6 rounded-xl shadow-sm">
339
+ <div class="flex items-center mb-4">
340
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
341
+ <i class="fas fa-user text-blue-600"></i>
342
+ </div>
343
+ <div>
344
+ <p class="font-medium">Michael Chen</p>
345
+ <div class="flex text-yellow-400">
346
+ <i class="fas fa-star"></i>
347
+ <i class="fas fa-star"></i>
348
+ <i class="fas fa-star"></i>
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star-half-alt"></i>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <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>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </main>
359
+
360
+ <!-- Footer -->
361
+ <footer class="bg-gray-800 text-white py-12">
362
+ <div class="container mx-auto px-4">
363
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
364
+ <div>
365
+ <h3 class="text-xl font-bold mb-4 flex items-center">
366
+ <i class="fas fa-lock mr-2"></i> SecureVPN
367
+ </h3>
368
+ <p class="text-gray-400">Protecting your digital life since 2015 with fast, secure, and private VPN services.</p>
369
+ </div>
370
+ <div>
371
+ <h4 class="font-semibold mb-4">Product</h4>
372
+ <ul class="space-y-2">
373
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
374
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
375
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Servers</a></li>
376
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Apps</a></li>
377
+ </ul>
378
+ </div>
379
+ <div>
380
+ <h4 class="font-semibold mb-4">Support</h4>
381
+ <ul class="space-y-2">
382
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
383
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
384
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
385
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Status</a></li>
386
+ </ul>
387
+ </div>
388
+ <div>
389
+ <h4 class="font-semibold mb-4">Legal</h4>
390
+ <ul class="space-y-2">
391
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
392
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
393
+ <li><a href="#" class="text-gray-400 hover:text-white transition">DMCA</a></li>
394
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Refund Policy</a></li>
395
+ </ul>
396
+ </div>
397
+ </div>
398
+ <div class="pt-6 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
399
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 SecureVPN. All rights reserved.</p>
400
+ <div class="flex space-x-4">
401
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
402
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a>
403
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
404
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </footer>
409
+
410
+ <!-- Leaflet JS -->
411
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
412
+ <script>
413
+ // DOM Elements
414
+ const vpnToggle = document.getElementById('vpn-toggle');
415
+ const connectionStatus = document.getElementById('connection-status');
416
+ const currentServer = document.getElementById('current-server');
417
+ const serverIp = document.getElementById('server-ip');
418
+ const downloadSpeed = document.getElementById('download-speed');
419
+ const uploadSpeed = document.getElementById('upload-speed');
420
+ const downloadSpeedometer = document.getElementById('download-speedometer');
421
+ const uploadSpeedometer = document.getElementById('upload-speedometer');
422
+ const dataTransferred = document.getElementById('data-transferred');
423
+ const dataProgress = document.getElementById('data-progress');
424
+ const connectionTime = document.getElementById('connection-time');
425
+ const serverButtonsContainer = document.getElementById('server-buttons-container');
426
+
427
+ // Variables
428
+ let isConnected = false;
429
+ let connectionStartTime = null;
430
+ let connectionInterval = null;
431
+ let dataUsage = 0;
432
+ let currentLocation = 'lon';
433
+ let map;
434
+ let markers = [];
435
+ let activeMarker = null;
436
+ let connectionCircle = null;
437
+
438
+ // Server details with coordinates and flags
439
+ const serverDetails = {
440
+ // USA Locations
441
+ 'nyc': {
442
+ name: 'New York #5',
443
+ ip: '104.18.23.156',
444
+ coords: [40.7128, -74.0060],
445
+ flag: 'https://flagcdn.com/us.svg',
446
+ region: 'usa',
447
+ ping: 28,
448
+ load: 45
449
+ },
450
+ 'la': {
451
+ name: 'Los Angeles #3',
452
+ ip: '185.143.223.41',
453
+ coords: [34.0522, -118.2437],
454
+ flag: 'https://flagcdn.com/us.svg',
455
+ region: 'usa',
456
+ ping: 42,
457
+ load: 62
458
+ },
459
+ 'chi': {
460
+ name: 'Chicago #2',
461
+ ip: '192.168.23.45',
462
+ coords: [41.8781, -87.6298],
463
+ flag: 'https://flagcdn.com/us.svg',
464
+ region: 'usa',
465
+ ping: 35,
466
+ load: 38
467
+ },
468
+ 'mia': {
469
+ name: 'Miami #4',
470
+ ip: '45.67.89.123',
471
+ coords: [25.7617, -80.1918],
472
+ flag: 'https://flagcdn.com/us.svg',
473
+ region: 'usa',
474
+ ping: 31,
475
+ load: 52
476
+ },
477
+ 'sf': {
478
+ name: 'San Francisco #1',
479
+ ip: '172.16.31.90',
480
+ coords: [37.7749, -122.4194],
481
+ flag: 'https://flagcdn.com/us.svg',
482
+ region: 'usa',
483
+ ping: 48,
484
+ load: 57
485
+ },
486
+ 'sea': {
487
+ name: 'Seattle #3',
488
+ ip: '78.141.211.34',
489
+ coords: [47.6062, -122.3321],
490
+ flag: 'https://flagcdn.com/us.svg',
491
+ region: 'usa',
492
+ ping: 52,
493
+ load: 41
494
+ },
495
+ 'dal': {
496
+ name: 'Dallas #2',
497
+ ip: '210.140.92.183',
498
+ coords: [32.7767, -96.7970],
499
+ flag: 'https://flagcdn.com/us.svg',
500
+ region: 'usa',
501
+ ping: 39,
502
+ load: 47
503
+ },
504
+
505
+ // Europe Locations (Expanded with all European countries)
506
+ 'lon': {
507
+ name: 'London #7',
508
+ ip: '191.32.56.201',
509
+ coords: [51.5074, -0.1278],
510
+ flag: 'https://flagcdn.com/gb.svg',
511
+ region: 'europe',
512
+ ping: 22,
513
+ load: 55
514
+ },
515
+ 'ber': {
516
+ name: 'Berlin #5',
517
+ ip: '115.241.91.12',
518
+ coords: [52.5200, 13.4050],
519
+ flag: 'https://flagcdn.com/de.svg',
520
+ region: 'europe',
521
+ ping: 18,
522
+ load: 48
523
+ },
524
+ 'par': {
525
+ name: 'Paris #4',
526
+ ip: '203.116.223.15',
527
+ coords: [48.8566, 2.3522],
528
+ flag: 'https://flagcdn.com/fr.svg',
529
+ region: 'europe',
530
+ ping: 24,
531
+ load: 61
532
+ },
533
+ 'mad': {
534
+ name: 'Madrid #3',
535
+ ip: '217.172.190.47',
536
+ coords: [40.4168, -3.7038],
537
+ flag: 'https://flagcdn.com/es.svg',
538
+ region: 'europe',
539
+ ping: 31,
540
+ load: 42
541
+ },
542
+ 'rom': {
543
+ name: 'Rome #2',
544
+ ip: '176.31.128.1',
545
+ coords: [41.9028, 12.4964],
546
+ flag: 'https://flagcdn.com/it.svg',
547
+ region: 'europe',
548
+ ping: 29,
549
+ load: 39
550
+ },
551
+ 'ams': {
552
+ name: 'Amsterdam #6',
553
+ ip: '82.192.84.116',
554
+ coords: [52.3676, 4.9041],
555
+ flag: 'https://flagcdn.com/nl.svg',
556
+ region: 'europe',
557
+ ping: 15,
558
+ load: 67
559
+ },
560
+ 'sto': {
561
+ name: 'Stockholm #3',
562
+ ip: '31.15.32.10',
563
+ coords: [59.3293, 18.0686],
564
+ flag: 'https://flagcdn.com/se.svg',
565
+ region: 'europe',
566
+ ping: 21,
567
+ load: 34
568
+ },
569
+ 'vie': {
570
+ name: 'Vienna #2',
571
+ ip: '203.109.129.2',
572
+ coords: [48.2082, 16.3738],
573
+ flag: 'https://flagcdn.com/at.svg',
574
+ region: 'europe',
575
+ ping: 26,
576
+ load: 29
577
+ },
578
+ 'pra': {
579
+ name: 'Prague #1',
580
+ ip: '45.67.89.123',
581
+ coords: [50.0755, 14.4378],
582
+ flag: 'https://flagcdn.com/cz.svg',
583
+ region: 'europe',
584
+ ping: 23,
585
+ load: 31
586
+ },
587
+ 'bud': {
588
+ name: 'Budapest #2',
589
+ ip: '89.36.210.144',
590
+ coords: [47.4979, 19.0402],
591
+ flag: 'https://flagcdn.com/hu.svg',
592
+ region: 'europe',
593
+ ping: 27,
594
+ load: 38
595
+ },
596
+ 'war': {
597
+ name: 'Warsaw #3',
598
+ ip: '77.79.233.52',
599
+ coords: [52.2297, 21.0122],
600
+ flag: 'https://flagcdn.com/pl.svg',
601
+ region: 'europe',
602
+ ping: 24,
603
+ load: 42
604
+ },
605
+ 'lis': {
606
+ name: 'Lisbon #1',
607
+ ip: '194.79.52.94',
608
+ coords: [38.7223, -9.1393],
609
+ flag: 'https://flagcdn.com/pt.svg',
610
+ region: 'europe',
611
+ ping: 32,
612
+ load: 29
613
+ },
614
+ 'bru': {
615
+ name: 'Brussels #4',
616
+ ip: '193.191.177.141',
617
+ coords: [50.8503, 4.3517],
618
+ flag: 'https://flagcdn.com/be.svg',
619
+ region: 'europe',
620
+ ping: 19,
621
+ load: 51
622
+ },
623
+ 'zur': {
624
+ name: 'Zurich #5',
625
+ ip: '195.186.1.103',
626
+ coords: [47.3769, 8.5417],
627
+ flag: 'https://flagcdn.com/ch.svg',
628
+ region: 'europe',
629
+ ping: 17,
630
+ load: 47
631
+ },
632
+ 'cop': {
633
+ name: 'Copenhagen #2',
634
+ ip: '92.222.6.47',
635
+ coords: [55.6761, 12.5683],
636
+ flag: 'https://flagcdn.com/dk.svg',
637
+ region: 'europe',
638
+ ping: 20,
639
+ load: 33
640
+ },
641
+ 'hel': {
642
+ name: 'Helsinki #3',
643
+ ip: '91.152.177.84',
644
+ coords: [60.1699, 24.9384],
645
+ flag: 'https://flagcdn.com/fi.svg',
646
+ region: 'europe',
647
+ ping: 23,
648
+ load: 28
649
+ },
650
+ 'osl': {
651
+ name: 'Oslo #1',
652
+ ip: '185.75.56.215',
653
+ coords: [59.9139, 10.7522],
654
+ flag: 'https://flagcdn.com/no.svg',
655
+ region: 'europe',
656
+ ping: 22,
657
+ load: 31
658
+ },
659
+ 'dub': {
660
+ name: 'Dublin #4',
661
+ ip: '185.86.148.90',
662
+ coords: [53.3498, -6.2603],
663
+ flag: 'https://flagcdn.com/ie.svg',
664
+ region: 'europe',
665
+ ping: 25,
666
+ load: 45
667
+ },
668
+ 'ath': {
669
+ name: 'Athens #2',
670
+ ip: '62.103.203.104',
671
+ coords: [37.9838, 23.7275],
672
+ flag: 'https://flagcdn.com/gr.svg',
673
+ region: 'europe',
674
+ ping: 30,
675
+ load: 39
676
+ },
677
+ 'sof': {
678
+ name: 'Sofia #1',
679
+ ip: '87.121.78.4',
680
+ coords: [42.6977, 23.3219],
681
+ flag: 'https://flagcdn.com/bg.svg',
682
+ region: 'europe',
683
+ ping: 28,
684
+ load: 27
685
+ },
686
+ 'buc': {
687
+ name: 'Bucharest #3',
688
+ ip: '89.34.178.4',
689
+ coords: [44.4268, 26.1025],
690
+ flag: 'https://flagcdn.com/ro.svg',
691
+ region: 'europe',
692
+ ping: 26,
693
+ load: 34
694
+ },
695
+ 'zag': {
696
+ name: 'Zagreb #2',
697
+ ip: '78.134.0.1',
698
+ coords: [45.8150, 15.9819],
699
+ flag: 'https://flagcdn.com/hr.svg',
700
+ region: 'europe',
701
+ ping: 24,
702
+ load: 29
703
+ },
704
+ 'bel': {
705
+ name: 'Belgrade #1',
706
+ ip: '77.46.144.2',
707
+ coords: [44.8206, 20.4622],
708
+ flag: 'https://flagcdn.com/rs.svg',
709
+ region: 'europe',
710
+ ping: 27,
711
+ load: 31
712
+ },
713
+ 'brat': {
714
+ name: 'Bratislava #2',
715
+ ip: '158.195.224.1',
716
+ coords: [48.1486, 17.1077],
717
+ flag: 'https://flagcdn.com/sk.svg',
718
+ region: 'europe',
719
+ ping: 23,
720
+ load: 26
721
+ },
722
+ 'ljub': {
723
+ name: 'Ljubljana #1',
724
+ ip: '194.145.240.1',
725
+ coords: [46.0569, 14.5058],
726
+ flag: 'https://flagcdn.com/si.svg',
727
+ region: 'europe',
728
+ ping: 22,
729
+ load: 24
730
+ },
731
+ 'tal': {
732
+ name: 'Tallinn #2',
733
+ ip: '193.40.11.1',
734
+ coords: [59.4370, 24.7536],
735
+ flag: 'https://flagcdn.com/ee.svg',
736
+ region: 'europe',
737
+ ping: 25,
738
+ load: 23
739
+ },
740
+ 'rig': {
741
+ name: 'Riga #1',
742
+ ip: '195.13.195.1',
743
+ coords: [56.9496, 24.1052],
744
+ flag: 'https://flagcdn.com/lv.svg',
745
+ region: 'europe',
746
+ ping: 26,
747
+ load: 25
748
+ },
749
+ 'vil': {
750
+ name: 'Vilnius #2',
751
+ ip: '194.135.96.1',
752
+ coords: [54.6872, 25.2797],
753
+ flag: 'https://flagcdn.com/lt.svg',
754
+ region: 'europe',
755
+ ping: 24,
756
+ load: 22
757
+ },
758
+ 'rey': {
759
+ name: 'Reykjavik #1',
760
+ ip: '193.4.172.1',
761
+ coords: [64.1466, -21.9426],
762
+ flag: 'https://flagcdn.com/is.svg',
763
+ region: 'europe',
764
+ ping: 32,
765
+ load: 19
766
+ },
767
+ 'lux': {
768
+ name: 'Luxembourg #2',
769
+ ip: '194.154.224.1',
770
+ coords: [49.6116, 6.1319],
771
+ flag: 'https://flagcdn.com/lu.svg',
772
+ region: 'europe',
773
+ ping: 20,
774
+ load: 28
775
+ },
776
+ 'val': {
777
+ name: 'Valletta #1',
778
+ ip: '185.1.0.1',
779
+ coords: [35.8989, 14.5146],
780
+ flag: 'https://flagcdn.com/mt.svg',
781
+ region: 'europe',
782
+ ping: 31,
783
+ load: 21
784
+ },
785
+ 'mon': {
786
+ name: 'Monaco #1',
787
+ ip: '80.94.96.1',
788
+ coords: [43.7384, 7.4246],
789
+ flag: 'https://flagcdn.com/mc.svg',
790
+ region: 'europe',
791
+ ping: 29,
792
+ load: 18
793
+ },
794
+ 'and': {
795
+ name: 'Andorra la Vella #1',
796
+ ip: '85.94.160.1',
797
+ coords: [42.5063, 1.5218],
798
+ flag: 'https://flagcdn.com/ad.svg',
799
+ region: 'europe',
800
+ ping: 33,
801
+ load: 17
802
+ },
803
+ 'saraj': {
804
+ name: 'Sarajevo #1',
805
+ ip: '93.86.64.1',
806
+ coords: [43.8563, 18.4131],
807
+ flag: 'https://flagcdn.com/ba.svg',
808
+ region: 'europe',
809
+ ping: 28,
810
+ load: 23
811
+ },
812
+ 'pod': {
813
+ name: 'Podgorica #1',
814
+ ip: '194.106.144.1',
815
+ coords: [42.4304, 19.2594],
816
+ flag: 'https://flagcdn.com/me.svg',
817
+ region: 'europe',
818
+ ping: 27,
819
+ load: 20
820
+ },
821
+ 'pri': {
822
+ name: 'Pristina #1',
823
+ ip: '46.99.0.1',
824
+ coords: [42.6629, 21.1655],
825
+ flag: 'https://flagcdn.com/xk.svg',
826
+ region: 'europe',
827
+ ping: 29,
828
+ load: 19
829
+ },
830
+ 'tir': {
831
+ name: 'Tirana #1',
832
+ ip: '46.99.0.1',
833
+ coords: [41.3275, 19.8187],
834
+ flag: 'https://flagcdn.com/al.svg',
835
+ region: 'europe',
836
+ ping: 30,
837
+ load: 22
838
+ },
839
+ 'minsk': {
840
+ name: 'Minsk #1',
841
+ ip: '93.125.0.1',
842
+ coords: [53.9045, 27.5615],
843
+ flag: 'https://flagcdn.com/by.svg',
844
+ region: 'europe',
845
+ ping: 26,
846
+ load: 25
847
+ },
848
+ 'kiev': {
849
+ name: 'Kyiv #2',
850
+ ip: '93.183.211.1',
851
+ coords: [50.4501, 30.5234],
852
+ flag: 'https://flagcdn.com/ua.svg',
853
+ region: 'europe',
854
+ ping: 28,
855
+ load: 31
856
+ },
857
+ 'chis': {
858
+ name: 'Chișinău #1',
859
+ ip: '93.113.0.1',
860
+ coords: [47.0105, 28.8638],
861
+ flag: 'https://flagcdn.com/md.svg',
862
+ region: 'europe',
863
+ ping: 27,
864
+ load: 24
865
+ },
866
+
867
+ // Other regions
868
+ 'tok': {
869
+ name: 'Tokyo #8',
870
+ ip: '210.140.92.183',
871
+ coords: [35.6762, 139.6503],
872
+ flag: 'https://flagcdn.com/jp.svg',
873
+ region: 'asia',
874
+ ping: 68,
875
+ load: 59
876
+ },
877
+ 'sin': {
878
+ name: 'Singapore #6',
879
+ ip: '203.116.223.15',
880
+ coords: [1.3521, 103.8198],
881
+ flag: 'https://flagcdn.com/sg.svg',
882
+ region: 'asia',
883
+ ping: 72,
884
+ load: 63
885
+ },
886
+ 'syd': {
887
+ name: 'Sydney #5',
888
+ ip: '203.109.129.2',
889
+ coords: [-33.8688, 151.2093],
890
+ flag: 'https://flagcdn.com/au.svg',
891
+ region: 'oceania',
892
+ ping: 142,
893
+ load: 41
894
+ },
895
+ 'rio': {
896
+ name: 'Rio de Janeiro #3',
897
+ ip: '191.32.56.201',
898
+ coords: [-22.9068, -43.1729],
899
+ flag: 'https://flagcdn.com/br.svg',
900
+ region: 'southamerica',
901
+ ping: 98,
902
+ load: 37
903
+ },
904
+ 'cap': {
905
+ name: 'Cape Town #2',
906
+ ip: '115.241.91.12',
907
+ coords: [-33.9249, 18.4241],
908
+ flag: 'https://flagcdn.com/za.svg',
909
+ region: 'africa',
910
+ ping: 124,
911
+ load: 28
912
+ }
913
+ };
914
+
915
+ // Initialize map
916
+ function initMap() {
917
+ map = L.map('server-map').setView([50, 15], 3);
918
+
919
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
920
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
921
+ }).addTo(map);
922
+
923
+ // Add markers for each server location
924
+ for (const [code, details] of Object.entries(serverDetails)) {
925
+ const markerColor = getRegionColor(details.region);
926
+ const marker = L.circleMarker(details.coords, {
927
+ radius: 8,
928
+ fillColor: code === currentLocation ? '#10B981' : markerColor,
929
+ color: '#fff',
930
+ weight: 2,
931
+ opacity: 1,
932
+ fillOpacity: 0.8
933
+ }).addTo(map);
934
+
935
+ marker.bindPopup(`<b>${details.name}</b><br>Ping: ${details.ping}ms<br>Load: ${details.load}%`);
936
+
937
+ marker.on('click', () => {
938
+ changeServerLocation(code);
939
+ });
940
+
941
+ markers.push({ code, marker });
942
+
943
+ if (code === currentLocation) {
944
+ activeMarker = marker;
945
+ map.setView(details.coords, 4);
946
+ }
947
+ }
948
+
949
+ // Create connection animation circle (hidden initially)
950
+ connectionCircle = L.circle(serverDetails[currentLocation].coords, {
951
+ color: '#3B82F6',
952
+ fillColor: '#3B82F6',
953
+ fillOpacity: 0.2,
954
+ radius: 1000000
955
+ }).addTo(map);
956
+ connectionCircle.setStyle({ opacity: 0 });
957
+ }
958
+
959
+ // Get color for region
960
+ function getRegionColor(region) {
961
+ const colors = {
962
+ 'europe': '#3B82F6',
963
+ 'usa': '#EC4899',
964
+ 'asia': '#F97316',
965
+ 'oceania': '#14B8A6',
966
+ 'southamerica': '#8B5CF6',
967
+ 'africa': '#EF4444'
968
+ };
969
+ return colors[region] || '#4F46E5';
970
+ }
971
+
972
+ // Get ping indicator class
973
+ function getPingClass(ping) {
974
+ if (ping < 30) return 'ping-excellent';
975
+ if (ping < 60) return 'ping-good';
976
+ if (ping < 100) return 'ping-average';
977
+ return 'ping-poor';
978
+ }
979
+
980
+ // Initialize server cards
981
+ function initServerCards() {
982
+ for (const [code, details] of Object.entries(serverDetails)) {
983
+ const card = document.createElement('div');
984
+ card.className = `server-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 cursor-pointer server-card-${code} ${code === currentLocation ? 'border-blue-500' : ''}`;
985
+ card.dataset.location = code;
986
+ card.dataset.region = details.region;
987
+
988
+ const pingClass = getPingClass(details.ping);
989
+ const regionClass = `region-${details.region}`;
990
+
991
+ card.innerHTML = `
992
+ <div class="flex justify-between items-start mb-2">
993
+ <div class="flex items-center">
994
+ <span class="country-flag" style="background-image: url(${details.flag})"></span>
995
+ <span class="font-medium">${details.name.split(' #')[0]}</span>
996
+ <span class="region-tag ${regionClass}">${details.region === 'europe' ? 'EU' : details.region.toUpperCase().substring(0, 3)}</span>
997
+ </div>
998
+ <span class="text-xs font-medium ${details.load < 50 ? 'text-green-600' : details.load < 75 ? 'text-yellow-600' : 'text-red-600'}">${details.load}% load</span>
999
+ </div>
1000
+ <div class="flex justify-between items-center text-sm">
1001
+ <span>${details.name}</span>
1002
+ <span class="flex items-center">
1003
+ <span class="${pingClass} ping-indicator"></span>
1004
+ <span>${details.ping}ms</span>
1005
+ </span>
1006
+ </div>
1007
+ `;
1008
+
1009
+ card.addEventListener('click', () => {
1010
+ changeServerLocation(code);
1011
+ });
1012
+
1013
+ serverButtonsContainer.appendChild(card);
1014
+ }
1015
+ }
1016
+
1017
+ // Change server location
1018
+ function changeServerLocation(code) {
1019
+ currentLocation = code;
1020
+ const details = serverDetails[code];
1021
+
1022
+ // Update active marker
1023
+ markers.forEach(({ code: markerCode, marker }) => {
1024
+ if (markerCode === code) {
1025
+ marker.setStyle({ fillColor: '#10B981' });
1026
+ activeMarker = marker;
1027
+ map.setView(details.coords, 4);
1028
+ } else {
1029
+ const regionColor = getRegionColor(serverDetails[markerCode].region);
1030
+ marker.setStyle({ fillColor: regionColor });
1031
+ }
1032
+ });
1033
+
1034
+ // Update server details
1035
+ currentServer.textContent = details.name;
1036
+ serverIp.textContent = details.ip;
1037
+
1038
+ // Update active card
1039
+ document.querySelectorAll('.server-card').forEach(card => {
1040
+ if (card.dataset.location === code) {
1041
+ card.classList.add('border-blue-500');
1042
+ } else {
1043
+ card.classList.remove('border-blue-500');
1044
+ }
1045
+ });
1046
+
1047
+ // If connected, show reconnecting animation
1048
+ if (isConnected) {
1049
+ connectionCircle.setStyle({ opacity: 0 });
1050
+ setTimeout(() => {
1051
+ connectionCircle.setLatLng(details.coords);
1052
+ connectionCircle.setStyle({ opacity: 0.7 });
1053
+ }, 300);
1054
+ }
1055
+ }
1056
+
1057
+ // Filter servers by region
1058
+ function filterServersByRegion(region) {
1059
+ document.querySelectorAll('.server-card').forEach(card => {
1060
+ if (region === 'all' || card.dataset.region === region) {
1061
+ card.classList.remove('hidden');
1062
+ } else {
1063
+ card.classList.add('hidden');
1064
+ }
1065
+ });
1066
+
1067
+ // Highlight active region filter button
1068
+ document.querySelectorAll('.region-filter').forEach(btn => {
1069
+ if (btn.dataset.region === region) {
1070
+ btn.classList.add('ring-2', 'ring-offset-2', 'ring-white');
1071
+ } else {
1072
+ btn.classList.remove('ring-2', 'ring-offset-2', 'ring-white');
1073
+ }
1074
+ });
1075
+ }
1076
+
1077
+ // Toggle VPN Connection
1078
+ vpnToggle.addEventListener('click', () => {
1079
+ isConnected = !isConnected;
1080
+
1081
+ if (isConnected) {
1082
+ // Connect
1083
+ vpnToggle.classList.add('active');
1084
+ vpnToggle.querySelector('div').classList.add('translate-x-8');
1085
+ connectionStatus.textContent = 'Connected';
1086
+ connectionStatus.previousElementSibling.classList.remove('bg-gray-300');
1087
+ connectionStatus.previousElementSibling.classList.add('bg-green-500');
1088
+
1089
+ // Show connection animation
1090
+ connectionCircle.setStyle({ opacity: 0.7 });
1091
+
1092
+ // Start connection timer
1093
+ connectionStartTime = new Date();
1094
+ connectionInterval = setInterval(updateConnectionTime, 1000);
1095
+
1096
+ // Simulate connection speeds
1097
+ simulateConnection();
1098
+ } else {
1099
+ // Disconnect
1100
+ vpnToggle.classList.remove('active');
1101
+ vpnToggle.querySelector('div').classList.remove('translate-x-8');
1102
+ connectionStatus.textContent = 'Disconnected';
1103
+ connectionStatus.previousElementSibling.classList.remove('bg-green-500');
1104
+ connectionStatus.previousElementSibling.classList.add('bg-gray-300');
1105
+
1106
+ // Hide connection animation
1107
+ connectionCircle.setStyle({ opacity: 0 });
1108
+
1109
+ // Stop timers
1110
+ clearInterval(connectionInterval);
1111
+ connectionTime.textContent = '00:00:00';
1112
+
1113
+ // Reset speeds
1114
+ downloadSpeed.textContent = '0 Mbps';
1115
+ uploadSpeed.textContent = '0 Mbps';
1116
+ downloadSpeedometer.style.transform = 'rotate(45deg)';
1117
+ uploadSpeedometer.style.transform = 'rotate(45deg)';
1118
+ }
1119
+ });
1120
+
1121
+ // Update connection time
1122
+ function updateConnectionTime() {
1123
+ const now = new Date();
1124
+ const diff = Math.floor((now - connectionStartTime) / 1000);
1125
+
1126
+ const hours = Math.floor(diff / 3600);
1127
+ const minutes = Math.floor((diff % 3600) / 60);
1128
+ const seconds = diff % 60;
1129
+
1130
+ connectionTime.textContent =
1131
+ `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
1132
+ }
1133
+
1134
+ // Simulate connection speeds and data transfer
1135
+ function simulateConnection() {
1136
+ let download = 0;
1137
+ let upload = 0;
1138
+ dataUsage = 0;
1139
+
1140
+ const speedInterval = setInterval(() => {
1141
+ if (!isConnected) {
1142
+ clearInterval(speedInterval);
1143
+ return;
1144
+ }
1145
+
1146
+ // Random speed fluctuations
1147
+ download = Math.min(100, Math.max(10, download + (Math.random() * 4 - 2)));
1148
+ upload = Math.min(40, Math.max(5, upload + (Math.random() * 2 - 1)));
1149
+
1150
+ // Update speed displays
1151
+ downloadSpeed.textContent = `${download.toFixed(1)} Mbps`;
1152
+ uploadSpeed.textContent = `${upload.toFixed(1)} Mbps`;
1153
+
1154
+ // Update speedometer visuals
1155
+ const downloadRotation = 45 + (download / 100 * 270);
1156
+ const uploadRotation = 45 + (upload / 40 * 270);
1157
+ downloadSpeedometer.style.transform = `rotate(${downloadRotation}deg)`;
1158
+ uploadSpeedometer.style.transform = `rotate(${uploadRotation}deg)`;
1159
+
1160
+ // Update data transferred
1161
+ dataUsage += (download + upload) / 8 / 10; // Convert to MB
1162
+ dataTransferred.textContent = `${dataUsage.toFixed(1)} MB`;
1163
+ const progressPercent = Math.min(100, (dataUsage / 100) * 100);
1164
+ dataProgress.style.width = `${progressPercent}%`;
1165
+ }, 100);
1166
+ }
1167
+
1168
+ // Initialize the app
1169
+ document.addEventListener('DOMContentLoaded', () => {
1170
+ initMap();
1171
+ initServerCards();
1172
+
1173
+ // Set initial server details
1174
+ currentServer.textContent = serverDetails[currentLocation].name;
1175
+ serverIp.textContent = serverDetails[currentLocation].ip;
1176
+
1177
+ // Set up region filters
1178
+ document.querySelectorAll('.region-filter').forEach(btn => {
1179
+ btn.addEventListener('click', () => {
1180
+ filterServersByRegion(btn.dataset.region);
1181
+ });
1182
+ });
1183
+ });
1184
+ </script>
1185
+ <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/povpn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1186
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Add free map, add more vpn countries to select.
2
+ in Europe and USA more locations add. more colors.
3
+ add all europe countries vpn loacations