Hugging Face's logo

Spaces:
SilentShado
/
anycoder-ff5babfc
Running

App Files Community
SilentShado commited on
Commit
05c334b
·
verified ·
1 Parent(s): f208245

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +641 -19
index.html CHANGED
@@ -1,19 +1,641 @@
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>2opFreecloudVNC - Free Cloud VNC Services</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --primary: #6366f1;
18
+ --primary-dark: #4f46e5;
19
+ --secondary: #06d6a0;
20
+ --accent: #f59e0b;
21
+ --dark: #1e293b;
22
+ --light: #f8fafc;
23
+ --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24
+ --grid-color: rgba(99, 102, 241, 0.1);
25
+ }
26
+
27
+ body {
28
+ background-color: var(--dark);
29
+ color: var(--light);
30
+ overflow-x: hidden;
31
+ min-height: 100vh;
32
+ position: relative;
33
+ }
34
+
35
+ /* Animated Grid Background */
36
+ .grid-bg {
37
+ position: fixed;
38
+ top: 0;
39
+ left: 0;
40
+ width: 100%;
41
+ height: 100%;
42
+ z-index: -1;
43
+ opacity: 0.5;
44
+ background-image:
45
+ linear-gradient(var(--grid-color) 1px, transparent 1px),
46
+ linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
47
+ background-size: 50px 50px;
48
+ animation: gridMove 20s linear infinite;
49
+ }
50
+
51
+ @keyframes gridMove {
52
+ 0% {
53
+ transform: translate(0, 0);
54
+ }
55
+ 100% {
56
+ transform: translate(50px, 50px);
57
+ }
58
+ }
59
+
60
+ /* Header Styles */
61
+ header {
62
+ background: rgba(30, 41, 59, 0.8);
63
+ backdrop-filter: blur(10px);
64
+ padding: 1rem 2rem;
65
+ position: sticky;
66
+ top: 0;
67
+ z-index: 100;
68
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
69
+ }
70
+
71
+ .nav-container {
72
+ display: flex;
73
+ justify-content: space-between;
74
+ align-items: center;
75
+ max-width: 1200px;
76
+ margin: 0 auto;
77
+ }
78
+
79
+ .logo {
80
+ display: flex;
81
+ align-items: center;
82
+ gap: 10px;
83
+ font-size: 1.5rem;
84
+ font-weight: 700;
85
+ color: var(--light);
86
+ }
87
+
88
+ .logo i {
89
+ color: var(--secondary);
90
+ }
91
+
92
+ .nav-links {
93
+ display: flex;
94
+ gap: 2rem;
95
+ }
96
+
97
+ .nav-links a {
98
+ color: var(--light);
99
+ text-decoration: none;
100
+ font-weight: 500;
101
+ transition: color 0.3s;
102
+ position: relative;
103
+ }
104
+
105
+ .nav-links a:hover {
106
+ color: var(--secondary);
107
+ }
108
+
109
+ .nav-links a::after {
110
+ content: '';
111
+ position: absolute;
112
+ bottom: -5px;
113
+ left: 0;
114
+ width: 0;
115
+ height: 2px;
116
+ background: var(--secondary);
117
+ transition: width 0.3s;
118
+ }
119
+
120
+ .nav-links a:hover::after {
121
+ width: 100%;
122
+ }
123
+
124
+ .anycoder-link {
125
+ color: var(--accent);
126
+ text-decoration: none;
127
+ font-size: 0.8rem;
128
+ opacity: 0.8;
129
+ transition: opacity 0.3s;
130
+ }
131
+
132
+ .anycoder-link:hover {
133
+ opacity: 1;
134
+ }
135
+
136
+ /* Hero Section */
137
+ .hero {
138
+ padding: 5rem 2rem;
139
+ text-align: center;
140
+ max-width: 1200px;
141
+ margin: 0 auto;
142
+ }
143
+
144
+ .hero h1 {
145
+ font-size: 3.5rem;
146
+ margin-bottom: 1rem;
147
+ background: var(--gradient);
148
+ -webkit-background-clip: text;
149
+ background-clip: text;
150
+ color: transparent;
151
+ animation: fadeIn 1s ease-out;
152
+ }
153
+
154
+ .hero p {
155
+ font-size: 1.2rem;
156
+ max-width: 700px;
157
+ margin: 0 auto 2rem;
158
+ color: #cbd5e1;
159
+ animation: fadeIn 1.5s ease-out;
160
+ }
161
+
162
+ .hero-btns {
163
+ display: flex;
164
+ gap: 1rem;
165
+ justify-content: center;
166
+ flex-wrap: wrap;
167
+ animation: fadeIn 2s ease-out;
168
+ }
169
+
170
+ .btn {
171
+ padding: 0.8rem 1.5rem;
172
+ border-radius: 50px;
173
+ font-weight: 600;
174
+ text-decoration: none;
175
+ transition: all 0.3s;
176
+ display: inline-flex;
177
+ align-items: center;
178
+ gap: 0.5rem;
179
+ }
180
+
181
+ .btn-primary {
182
+ background: var(--primary);
183
+ color: white;
184
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
185
+ }
186
+
187
+ .btn-primary:hover {
188
+ background: var(--primary-dark);
189
+ transform: translateY(-3px);
190
+ box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
191
+ }
192
+
193
+ .btn-secondary {
194
+ background: transparent;
195
+ color: var(--light);
196
+ border: 2px solid var(--secondary);
197
+ }
198
+
199
+ .btn-secondary:hover {
200
+ background: var(--secondary);
201
+ color: var(--dark);
202
+ transform: translateY(-3px);
203
+ }
204
+
205
+ /* Features Section */
206
+ .features {
207
+ padding: 5rem 2rem;
208
+ max-width: 1200px;
209
+ margin: 0 auto;
210
+ }
211
+
212
+ .section-title {
213
+ text-align: center;
214
+ margin-bottom: 3rem;
215
+ font-size: 2.5rem;
216
+ position: relative;
217
+ }
218
+
219
+ .section-title::after {
220
+ content: '';
221
+ position: absolute;
222
+ bottom: -10px;
223
+ left: 50%;
224
+ transform: translateX(-50%);
225
+ width: 100px;
226
+ height: 4px;
227
+ background: var(--gradient);
228
+ border-radius: 2px;
229
+ }
230
+
231
+ .features-grid {
232
+ display: grid;
233
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
234
+ gap: 2rem;
235
+ }
236
+
237
+ .feature-card {
238
+ background: rgba(30, 41, 59, 0.7);
239
+ border-radius: 15px;
240
+ padding: 2rem;
241
+ text-align: center;
242
+ transition: transform 0.3s, box-shadow 0.3s;
243
+ border: 1px solid rgba(255, 255, 255, 0.1);
244
+ backdrop-filter: blur(10px);
245
+ }
246
+
247
+ .feature-card:hover {
248
+ transform: translateY(-10px);
249
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
250
+ }
251
+
252
+ .feature-icon {
253
+ font-size: 3rem;
254
+ margin-bottom: 1rem;
255
+ color: var(--secondary);
256
+ }
257
+
258
+ .feature-card h3 {
259
+ margin-bottom: 1rem;
260
+ font-size: 1.5rem;
261
+ }
262
+
263
+ .feature-card p {
264
+ color: #cbd5e1;
265
+ }
266
+
267
+ /* Subscription Section */
268
+ .subscription {
269
+ padding: 5rem 2rem;
270
+ text-align: center;
271
+ background: rgba(30, 41, 59, 0.5);
272
+ margin: 2rem 0;
273
+ }
274
+
275
+ .subscription-content {
276
+ max-width: 800px;
277
+ margin: 0 auto;
278
+ }
279
+
280
+ .subscription h2 {
281
+ font-size: 2.5rem;
282
+ margin-bottom: 1rem;
283
+ }
284
+
285
+ .subscription p {
286
+ font-size: 1.2rem;
287
+ margin-bottom: 2rem;
288
+ color: #cbd5e1;
289
+ }
290
+
291
+ .channel-link {
292
+ display: inline-flex;
293
+ align-items: center;
294
+ gap: 0.5rem;
295
+ background: #ff0000;
296
+ color: white;
297
+ padding: 0.8rem 1.5rem;
298
+ border-radius: 50px;
299
+ text-decoration: none;
300
+ font-weight: 600;
301
+ transition: all 0.3s;
302
+ margin-bottom: 2rem;
303
+ }
304
+
305
+ .channel-link:hover {
306
+ background: #cc0000;
307
+ transform: translateY(-3px);
308
+ }
309
+
310
+ .access-form {
311
+ background: rgba(30, 41, 59, 0.7);
312
+ padding: 2rem;
313
+ border-radius: 15px;
314
+ max-width: 500px;
315
+ margin: 0 auto;
316
+ backdrop-filter: blur(10px);
317
+ border: 1px solid rgba(255, 255, 255, 0.1);
318
+ }
319
+
320
+ .form-group {
321
+ margin-bottom: 1.5rem;
322
+ text-align: left;
323
+ }
324
+
325
+ .form-group label {
326
+ display: block;
327
+ margin-bottom: 0.5rem;
328
+ font-weight: 500;
329
+ }
330
+
331
+ .form-group input {
332
+ width: 100%;
333
+ padding: 0.8rem;
334
+ border-radius: 8px;
335
+ border: 1px solid rgba(255, 255, 255, 0.2);
336
+ background: rgba(15, 23, 42, 0.8);
337
+ color: white;
338
+ font-size: 1rem;
339
+ }
340
+
341
+ .form-group input:focus {
342
+ outline: none;
343
+ border-color: var(--primary);
344
+ }
345
+
346
+ /* Footer */
347
+ footer {
348
+ background: rgba(15, 23, 42, 0.9);
349
+ padding: 3rem 2rem;
350
+ text-align: center;
351
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
352
+ }
353
+
354
+ .footer-content {
355
+ max-width: 1200px;
356
+ margin: 0 auto;
357
+ }
358
+
359
+ .footer-links {
360
+ display: flex;
361
+ justify-content: center;
362
+ gap: 2rem;
363
+ margin-bottom: 2rem;
364
+ flex-wrap: wrap;
365
+ }
366
+
367
+ .footer-links a {
368
+ color: #cbd5e1;
369
+ text-decoration: none;
370
+ transition: color 0.3s;
371
+ }
372
+
373
+ .footer-links a:hover {
374
+ color: var(--secondary);
375
+ }
376
+
377
+ .copyright {
378
+ color: #94a3b8;
379
+ font-size: 0.9rem;
380
+ }
381
+
382
+ /* Animations */
383
+ @keyframes fadeIn {
384
+ from {
385
+ opacity: 0;
386
+ transform: translateY(20px);
387
+ }
388
+ to {
389
+ opacity: 1;
390
+ transform: translateY(0);
391
+ }
392
+ }
393
+
394
+ .fade-in {
395
+ animation: fadeIn 1s ease-out;
396
+ }
397
+
398
+ .pulse {
399
+ animation: pulse 2s infinite;
400
+ }
401
+
402
+ @keyframes pulse {
403
+ 0% {
404
+ transform: scale(1);
405
+ }
406
+ 50% {
407
+ transform: scale(1.05);
408
+ }
409
+ 100% {
410
+ transform: scale(1);
411
+ }
412
+ }
413
+
414
+ /* Floating Elements */
415
+ .floating {
416
+ position: absolute;
417
+ border-radius: 50%;
418
+ background: var(--gradient);
419
+ opacity: 0.1;
420
+ filter: blur(40px);
421
+ z-index: -1;
422
+ }
423
+
424
+ .floating-1 {
425
+ width: 300px;
426
+ height: 300px;
427
+ top: 10%;
428
+ left: 10%;
429
+ animation: float 15s infinite ease-in-out;
430
+ }
431
+
432
+ .floating-2 {
433
+ width: 200px;
434
+ height: 200px;
435
+ top: 60%;
436
+ right: 10%;
437
+ animation: float 12s infinite ease-in-out reverse;
438
+ }
439
+
440
+ .floating-3 {
441
+ width: 150px;
442
+ height: 150px;
443
+ bottom: 20%;
444
+ left: 20%;
445
+ animation: float 10s infinite ease-in-out;
446
+ }
447
+
448
+ @keyframes float {
449
+ 0%, 100% {
450
+ transform: translateY(0) rotate(0deg);
451
+ }
452
+ 33% {
453
+ transform: translateY(-20px) rotate(120deg);
454
+ }
455
+ 66% {
456
+ transform: translateY(20px) rotate(240deg);
457
+ }
458
+ }
459
+
460
+ /* Responsive Design */
461
+ @media (max-width: 768px) {
462
+ .nav-links {
463
+ display: none;
464
+ }
465
+
466
+ .hero h1 {
467
+ font-size: 2.5rem;
468
+ }
469
+
470
+ .hero p {
471
+ font-size: 1rem;
472
+ }
473
+
474
+ .section-title {
475
+ font-size: 2rem;
476
+ }
477
+
478
+ .features-grid {
479
+ grid-template-columns: 1fr;
480
+ }
481
+ }
482
+ </style>
483
+ </head>
484
+ <body>
485
+ <!-- Animated Grid Background -->
486
+ <div class="grid-bg"></div>
487
+
488
+ <!-- Floating Elements -->
489
+ <div class="floating floating-1"></div>
490
+ <div class="floating floating-2"></div>
491
+ <div class="floating floating-3"></div>
492
+
493
+ <!-- Header -->
494
+ <header>
495
+ <div class="nav-container">
496
+ <div class="logo">
497
+ <i class="fas fa-cloud"></i>
498
+ <span>2opFreecloudVNC</span>
499
+ </div>
500
+ <div class="nav-links">
501
+ <a href="#home">Home</a>
502
+ <a href="#features">Features</a>
503
+ <a href="#access">Access</a>
504
+ <a href="#about">About</a>
505
+ </div>
506
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
507
+ </div>
508
+ </header>
509
+
510
+ <!-- Hero Section -->
511
+ <section class="hero" id="home">
512
+ <h1 class="fade-in">Free Cloud VNC Services</h1>
513
+ <p class="fade-in">Access powerful virtual machines and cloud environments completely free. Experience the best of Kasm and LinuxZoo with our premium VNC services.</p>
514
+ <div class="hero-btns">
515
+ <a href="#access" class="btn btn-primary pulse">
516
+ <i class="fas fa-rocket"></i> Get Started
517
+ </a>
518
+ <a href="#features" class="btn btn-secondary">
519
+ <i class="fas fa-info-circle"></i> Learn More
520
+ </a>
521
+ </div>
522
+ </section>
523
+
524
+ <!-- Features Section -->
525
+ <section class="features" id="features">
526
+ <h2 class="section-title">Our Features</h2>
527
+ <div class="features-grid">
528
+ <div class="feature-card fade-in">
529
+ <div class="feature-icon">
530
+ <i class="fas fa-desktop"></i>
531
+ </div>
532
+ <h3>Full VNC Access</h3>
533
+ <p>Get complete remote desktop access to powerful virtual machines with high-performance capabilities.</p>
534
+ </div>
535
+ <div class="feature-card fade-in">
536
+ <div class="feature-icon">
537
+ <i class="fas fa-server"></i>
538
+ </div>
539
+ <h3>Cloud Environments</h3>
540
+ <p>Access various cloud-based development environments and testing platforms without any cost.</p>
541
+ </div>
542
+ <div class="feature-card fade-in">
543
+ <div class="feature-icon">
544
+ <i class="fas fa-bolt"></i>
545
+ </div>
546
+ <h3>High Performance</h3>
547
+ <p>Experience lightning-fast performance with our optimized virtual machine configurations.</p>
548
+ </div>
549
+ <div class="feature-card fade-in">
550
+ <div class="feature-icon">
551
+ <i class="fas fa-shield-alt"></i>
552
+ </div>
553
+ <h3>Secure & Private</h3>
554
+ <p>Your sessions are completely isolated and secured with enterprise-grade privacy measures.</p>
555
+ </div>
556
+ </div>
557
+ </section>
558
+
559
+ <!-- Subscription Section -->
560
+ <section class="subscription" id="access">
561
+ <div class="subscription-content">
562
+ <h2 class="section-title">Get Access Now</h2>
563
+ <p>To access our premium VNC services, you must first subscribe to our YouTube channel</p>
564
+
565
+ <a href="https://www.youtube.com/@Creativecanvas_Umar" target="_blank" class="channel-link">
566
+ <i class="fab fa-youtube"></i> Subscribe to Creative Canvas Umar
567
+ </a>
568
+
569
+ <div class="access-form fade-in">
570
+ <h3>Access Request Form</h3>
571
+ <p style="margin-bottom: 1.5rem; color: #94a3b8;">After subscribing, fill this form to get your access credentials</p>
572
+
573
+ <form id="accessForm">
574
+ <div class="form-group">
575
+ <label for="name">Full Name</label>
576
+ <input type="text" id="name" required>
577
+ </div>
578
+ <div class="form-group">
579
+ <label for="email">Email Address</label>
580
+ <input type="email" id="email" required>
581
+ </div>
582
+ <div class="form-group">
583
+ <label for="youtube">YouTube Channel Username</label>
584
+ <input type="text" id="youtube" required>
585
+ </div>
586
+ <button type="submit" class="btn btn-primary" style="width: 100%;">
587
+ <i class="fas fa-key"></i> Request Access
588
+ </button>
589
+ </form>
590
+ </div>
591
+ </div>
592
+ </section>
593
+
594
+ <!-- Footer -->
595
+ <footer>
596
+ <div class="footer-content">
597
+ <div class="footer-links">
598
+ <a href="#home">Home</a>
599
+ <a href="#features">Features</a>
600
+ <a href="#access">Access</a>
601
+ <a href="#about">About</a>
602
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder">Built with anycoder</a>
603
+ </div>
604
+ <p class="copyright">© 2023 2opFreecloudVNC. All rights reserved.</p>
605
+ </div>
606
+ </footer>
607
+
608
+ <script>
609
+ // Form submission handler
610
+ document.getElementById('accessForm').addEventListener('submit', function(e) {
611
+ e.preventDefault();
612
+
613
+ const name = document.getElementById('name').value;
614
+ const email = document.getElementById('email').value;
615
+ const youtube = document.getElementById('youtube').value;
616
+
617
+ // In a real application, this would send data to a server
618
+ alert(`Thank you ${name}! Your access request has been received. We'll verify your YouTube subscription and send credentials to ${email} within 24 hours.`);
619
+
620
+ // Reset form
621
+ this.reset();
622
+ });
623
+
624
+ // Add scroll animations
625
+ document.addEventListener('DOMContentLoaded', function() {
626
+ const fadeElements = document.querySelectorAll('.feature-card, .access-form');
627
+
628
+ const observer = new IntersectionObserver((entries) => {
629
+ entries.forEach(entry => {
630
+ if (entry.isIntersecting) {
631
+ entry.target.style.animation = 'fadeIn 1s ease-out forwards';
632
+ }
633
+ }, { threshold: 0.1 });
634
+
635
+ fadeElements.forEach(el => {
636
+ observer.observe(el);
637
+ });
638
+ });
639
+ </script>
640
+ </body>
641
+ </html>