ZeroBlade commited on
Commit
c86c721
·
verified ·
1 Parent(s): ada84f0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +469 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Zeroblade Vpn
3
- emoji: 🦀
4
- colorFrom: pink
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: zeroblade-vpn
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,469 @@
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>ZeroBlade VPN | Premium V2Ray Subscriptions</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #6e00ff;
11
+ --secondary: #ff00a0;
12
+ --dark: #0a0a1a;
13
+ --light: #f0f0ff;
14
+ --accent: #00ffcc;
15
+ }
16
+
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22
+ }
23
+
24
+ body {
25
+ background-color: var(--dark);
26
+ color: var(--light);
27
+ overflow-x: hidden;
28
+ background-image:
29
+ radial-gradient(circle at 20% 30%, rgba(110, 0, 255, 0.15) 0%, transparent 30%),
30
+ radial-gradient(circle at 80% 70%, rgba(255, 0, 160, 0.15) 0%, transparent 30%);
31
+ }
32
+
33
+ .container {
34
+ max-width: 1200px;
35
+ margin: 0 auto;
36
+ padding: 2rem;
37
+ position: relative;
38
+ z-index: 1;
39
+ }
40
+
41
+ header {
42
+ display: flex;
43
+ justify-content: space-between;
44
+ align-items: center;
45
+ padding: 1rem 0;
46
+ position: relative;
47
+ }
48
+
49
+ .logo {
50
+ display: flex;
51
+ align-items: center;
52
+ gap: 0.5rem;
53
+ font-size: 1.5rem;
54
+ font-weight: 700;
55
+ color: var(--light);
56
+ text-decoration: none;
57
+ }
58
+
59
+ .logo-icon {
60
+ color: var(--accent);
61
+ font-size: 2rem;
62
+ animation: pulse 2s infinite;
63
+ }
64
+
65
+ @keyframes pulse {
66
+ 0% { transform: scale(1); }
67
+ 50% { transform: scale(1.1); }
68
+ 100% { transform: scale(1); }
69
+ }
70
+
71
+ nav ul {
72
+ display: flex;
73
+ gap: 2rem;
74
+ list-style: none;
75
+ }
76
+
77
+ nav a {
78
+ color: var(--light);
79
+ text-decoration: none;
80
+ font-weight: 500;
81
+ position: relative;
82
+ padding: 0.5rem 0;
83
+ }
84
+
85
+ nav a::after {
86
+ content: '';
87
+ position: absolute;
88
+ bottom: 0;
89
+ left: 0;
90
+ width: 0;
91
+ height: 2px;
92
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
93
+ transition: width 0.3s ease;
94
+ }
95
+
96
+ nav a:hover::after {
97
+ width: 100%;
98
+ }
99
+
100
+ .hero {
101
+ display: flex;
102
+ flex-direction: column;
103
+ align-items: center;
104
+ justify-content: center;
105
+ text-align: center;
106
+ padding: 5rem 0;
107
+ position: relative;
108
+ }
109
+
110
+ .hero h1 {
111
+ font-size: 3.5rem;
112
+ margin-bottom: 1.5rem;
113
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
114
+ -webkit-background-clip: text;
115
+ background-clip: text;
116
+ color: transparent;
117
+ line-height: 1.2;
118
+ }
119
+
120
+ .hero p {
121
+ font-size: 1.2rem;
122
+ max-width: 700px;
123
+ margin-bottom: 2rem;
124
+ opacity: 0.9;
125
+ }
126
+
127
+ .particles {
128
+ position: absolute;
129
+ top: 0;
130
+ left: 0;
131
+ width: 100%;
132
+ height: 100%;
133
+ z-index: -1;
134
+ overflow: hidden;
135
+ }
136
+
137
+ .particle {
138
+ position: absolute;
139
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
140
+ border-radius: 50%;
141
+ opacity: 0.5;
142
+ animation: float linear infinite;
143
+ }
144
+
145
+ @keyframes float {
146
+ 0% { transform: translateY(0) rotate(0deg); }
147
+ 100% { transform: translateY(-100vh) rotate(360deg); }
148
+ }
149
+
150
+ .subscription-card {
151
+ background: rgba(20, 20, 40, 0.7);
152
+ border-radius: 20px;
153
+ padding: 3rem;
154
+ margin: 2rem auto;
155
+ max-width: 600px;
156
+ backdrop-filter: blur(10px);
157
+ border: 1px solid rgba(255, 255, 255, 0.1);
158
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
159
+ position: relative;
160
+ overflow: hidden;
161
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
162
+ }
163
+
164
+ .subscription-card:hover {
165
+ transform: translateY(-10px);
166
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
167
+ }
168
+
169
+ .subscription-card::before {
170
+ content: '';
171
+ position: absolute;
172
+ top: -50%;
173
+ left: -50%;
174
+ width: 200%;
175
+ height: 200%;
176
+ background: conic-gradient(
177
+ transparent,
178
+ transparent,
179
+ transparent,
180
+ var(--primary)
181
+ );
182
+ animation: rotate 4s linear infinite;
183
+ z-index: -1;
184
+ }
185
+
186
+ .subscription-card::after {
187
+ content: '';
188
+ position: absolute;
189
+ inset: 3px;
190
+ background: rgba(20, 20, 40, 0.9);
191
+ border-radius: 17px;
192
+ z-index: -1;
193
+ }
194
+
195
+ @keyframes rotate {
196
+ 0% { transform: rotate(0deg); }
197
+ 100% { transform: rotate(360deg); }
198
+ }
199
+
200
+ .card-header {
201
+ display: flex;
202
+ justify-content: space-between;
203
+ align-items: center;
204
+ margin-bottom: 2rem;
205
+ }
206
+
207
+ .card-title {
208
+ font-size: 2rem;
209
+ font-weight: 700;
210
+ background: linear-gradient(90deg, var(--accent), var(--secondary));
211
+ -webkit-background-clip: text;
212
+ background-clip: text;
213
+ color: transparent;
214
+ }
215
+
216
+ .card-price {
217
+ font-size: 2.5rem;
218
+ font-weight: 700;
219
+ color: var(--accent);
220
+ position: relative;
221
+ }
222
+
223
+ .card-price::after {
224
+ content: 'TMT';
225
+ font-size: 1rem;
226
+ position: absolute;
227
+ bottom: -0.5rem;
228
+ right: -2rem;
229
+ color: var(--light);
230
+ opacity: 0.7;
231
+ }
232
+
233
+ .card-features {
234
+ margin-bottom: 2rem;
235
+ }
236
+
237
+ .feature {
238
+ display: flex;
239
+ align-items: center;
240
+ gap: 1rem;
241
+ margin-bottom: 1rem;
242
+ padding: 0.5rem 0;
243
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
244
+ }
245
+
246
+ .feature-icon {
247
+ color: var(--accent);
248
+ font-size: 1.2rem;
249
+ }
250
+
251
+ .buy-btn {
252
+ display: inline-flex;
253
+ align-items: center;
254
+ justify-content: center;
255
+ gap: 0.5rem;
256
+ padding: 1rem 2rem;
257
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
258
+ color: white;
259
+ border: none;
260
+ border-radius: 50px;
261
+ font-size: 1.1rem;
262
+ font-weight: 600;
263
+ cursor: pointer;
264
+ transition: all 0.3s ease;
265
+ text-decoration: none;
266
+ width: 100%;
267
+ position: relative;
268
+ overflow: hidden;
269
+ z-index: 1;
270
+ }
271
+
272
+ .buy-btn::before {
273
+ content: '';
274
+ position: absolute;
275
+ top: 0;
276
+ left: 0;
277
+ width: 100%;
278
+ height: 100%;
279
+ background: linear-gradient(90deg, var(--secondary), var(--primary));
280
+ opacity: 0;
281
+ transition: opacity 0.3s ease;
282
+ z-index: -1;
283
+ }
284
+
285
+ .buy-btn:hover::before {
286
+ opacity: 1;
287
+ }
288
+
289
+ .buy-btn:hover {
290
+ transform: translateY(-3px);
291
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
292
+ }
293
+
294
+ .telegram-icon {
295
+ font-size: 1.3rem;
296
+ }
297
+
298
+ .contact-info {
299
+ text-align: center;
300
+ margin-top: 3rem;
301
+ padding: 2rem;
302
+ background: rgba(20, 20, 40, 0.5);
303
+ border-radius: 15px;
304
+ border: 1px solid rgba(255, 255, 255, 0.05);
305
+ }
306
+
307
+ .contact-info h2 {
308
+ margin-bottom: 1rem;
309
+ color: var(--accent);
310
+ }
311
+
312
+ .telegram-link {
313
+ display: inline-flex;
314
+ align-items: center;
315
+ gap: 0.5rem;
316
+ color: var(--light);
317
+ font-size: 1.2rem;
318
+ text-decoration: none;
319
+ padding: 0.5rem 1.5rem;
320
+ border-radius: 50px;
321
+ background: rgba(0, 136, 204, 0.2);
322
+ border: 1px solid rgba(0, 136, 204, 0.3);
323
+ transition: all 0.3s ease;
324
+ }
325
+
326
+ .telegram-link:hover {
327
+ background: rgba(0, 136, 204, 0.4);
328
+ transform: translateY(-3px);
329
+ }
330
+
331
+ footer {
332
+ text-align: center;
333
+ padding: 2rem 0;
334
+ margin-top: 3rem;
335
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
336
+ font-size: 0.9rem;
337
+ opacity: 0.7;
338
+ }
339
+
340
+ @media (max-width: 768px) {
341
+ .hero h1 {
342
+ font-size: 2.5rem;
343
+ }
344
+
345
+ .subscription-card {
346
+ padding: 2rem;
347
+ }
348
+
349
+ nav ul {
350
+ gap: 1rem;
351
+ }
352
+ }
353
+ </style>
354
+ </head>
355
+ <body>
356
+ <div class="particles" id="particles"></div>
357
+
358
+ <div class="container">
359
+ <header>
360
+ <a href="#" class="logo">
361
+ <i class="fas fa-shield-alt logo-icon"></i>
362
+ <span>ZeroBlade VPN</span>
363
+ </a>
364
+ <nav>
365
+ <ul>
366
+ <li><a href="#subscription">Subscription</a></li>
367
+ <li><a href="#contact">Contact</a></li>
368
+ <li><a href="#about">About</a></li>
369
+ </ul>
370
+ </nav>
371
+ </header>
372
+
373
+ <section class="hero">
374
+ <h1>Premium V2Ray VPN Subscription</h1>
375
+ <p>Experience blazing fast speeds, unlimited bandwidth, and secure browsing with our premium V2Ray service. Bypass restrictions and enjoy true internet freedom.</p>
376
+ </section>
377
+
378
+ <section id="subscription" class="subscription-card">
379
+ <div class="card-header">
380
+ <h2 class="card-title">1 Month Plan</h2>
381
+ <div class="card-price">110</div>
382
+ </div>
383
+
384
+ <div class="card-features">
385
+ <div class="feature">
386
+ <i class="fas fa-bolt feature-icon"></i>
387
+ <span>High-speed servers worldwide</span>
388
+ </div>
389
+ <div class="feature">
390
+ <i class="fas fa-lock feature-icon"></i>
391
+ <span>Military-grade encryption</span>
392
+ </div>
393
+ <div class="feature">
394
+ <i class="fas fa-infinity feature-icon"></i>
395
+ <span>Unlimited bandwidth</span>
396
+ </div>
397
+ <div class="feature">
398
+ <i class="fas fa-user-shield feature-icon"></i>
399
+ <span>No activity logs</span>
400
+ </div>
401
+ <div class="feature">
402
+ <i class="fas fa-globe feature-icon"></i>
403
+ <span>Access to geo-restricted content</span>
404
+ </div>
405
+ </div>
406
+
407
+ <a href="https://t.me/zerob1ade" class="buy-btn">
408
+ <i class="fab fa-telegram telegram-icon"></i>
409
+ Contact on Telegram to Purchase
410
+ </a>
411
+ </section>
412
+
413
+ <section id="contact" class="contact-info">
414
+ <h2>Ready to Get Started?</h2>
415
+ <p>Contact me directly on Telegram to purchase your 1-month V2Ray subscription</p>
416
+ <a href="https://t.me/zerob1ade" class="telegram-link">
417
+ <i class="fab fa-telegram"></i>
418
+ @zerob1ade
419
+ </a>
420
+ </section>
421
+ </div>
422
+
423
+ <footer>
424
+ <p>&copy; 2023 ZeroBlade VPN. All rights reserved.</p>
425
+ </footer>
426
+
427
+ <script>
428
+ // Create floating particles
429
+ document.addEventListener('DOMContentLoaded', function() {
430
+ const particlesContainer = document.getElementById('particles');
431
+ const particleCount = 20;
432
+
433
+ for (let i = 0; i < particleCount; i++) {
434
+ const particle = document.createElement('div');
435
+ particle.classList.add('particle');
436
+
437
+ // Random size between 5px and 15px
438
+ const size = Math.random() * 10 + 5;
439
+ particle.style.width = `${size}px`;
440
+ particle.style.height = `${size}px`;
441
+
442
+ // Random position
443
+ particle.style.left = `${Math.random() * 100}%`;
444
+ particle.style.top = `${Math.random() * 100}%`;
445
+
446
+ // Random animation duration between 10s and 30s
447
+ const duration = Math.random() * 20 + 10;
448
+ particle.style.animationDuration = `${duration}s`;
449
+
450
+ // Random delay
451
+ particle.style.animationDelay = `${Math.random() * 5}s`;
452
+
453
+ particlesContainer.appendChild(particle);
454
+ }
455
+
456
+ // Add hover effect to subscription card
457
+ const card = document.querySelector('.subscription-card');
458
+ card.addEventListener('mousemove', (e) => {
459
+ const rect = card.getBoundingClientRect();
460
+ const x = e.clientX - rect.left;
461
+ const y = e.clientY - rect.top;
462
+
463
+ card.style.setProperty('--mouse-x', `${x}px`);
464
+ card.style.setProperty('--mouse-y', `${y}px`);
465
+ });
466
+ });
467
+ </script>
468
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
469
+ </html>