Hugging Face's logo

Spaces:
rmgn888
/
anycoder-b5d2981e
Running

App Files Community
rmgn888 commited on
Commit
eb613fa
·
verified ·
1 Parent(s): a8aecd0

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1101 -544
index.html CHANGED
@@ -3,739 +3,1296 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="CVTV - Premium IPTV Service. All Your Entertainment In One Place.">
7
- <title>CVTV - Premium Streaming</title>
8
-
9
- <!-- Google Fonts -->
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght=300;400;600;800&display=swap" rel="stylesheet">
11
-
12
- <!-- FontAwesome for Icons -->
13
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
-
 
 
15
  <style>
16
- /* --- CSS VARIABLES & RESET --- */
17
  :root {
18
- --primary-color: #e50914; /* Netflix Red vibe */
19
- --accent-color: #5e17eb; /* Modern Purple for "CVTV" branding */
20
- --bg-dark: #141414;
21
- --bg-card: #1f1f1f;
22
- --text-white: #ffffff;
23
- --text-gray: #b3b3b3;
24
- --gradient: linear-gradient(135deg, #e50914, #8a0c0f);
25
- --glass: rgba(255, 255, 255, 0.05);
26
- --border: rgba(255, 255, 255, 0.1);
27
- --transition: all 0.3s ease;
 
 
 
 
 
 
 
28
  }
29
 
30
  * {
31
  margin: 0;
32
  padding: 0;
33
- box-sizing: box-sizing;
34
- font-family: 'Inter', sans-serif;
35
  }
36
 
37
  body {
38
- background-color: var(--bg-dark);
39
- color: var(--text-white);
40
- overflow-x: hidden;
41
  line-height: 1.6;
 
 
42
  }
43
 
44
- a { text-decoration: none; color: inherit; }
45
- ul { list-style: none; }
 
 
 
46
 
47
- /* --- UTILITIES --- */
48
- .container {
49
- max-width: 1200px;
50
- margin: 0 auto;
51
- padding: 0 20px;
 
 
 
 
 
 
 
 
52
  }
53
 
54
- .section-title {
55
- font-size: 2.5rem;
56
- font-weight: 800;
57
- text-align: center;
58
- margin-bottom: 1rem;
59
- background: linear-gradient(to right, #fff, #b3b3b3);
60
- -webkit-background-clip: text;
61
- -webkit-text-fill-color: transparent;
62
  }
63
 
64
- .section-subtitle {
65
- text-align: center;
66
- color: var(--text-gray);
67
- margin-bottom: 3rem;
68
- font-size: 1.1rem;
 
 
 
 
 
69
  }
70
 
71
- .btn {
72
- display: inline-block;
73
- padding: 12px 30px;
74
- border-radius: 4px;
75
- font-weight: 600;
76
- cursor: pointer;
77
- transition: var(--transition);
78
- text-transform: uppercase;
79
- letter-spacing: 1px;
80
- border: none;
81
  }
82
 
83
- .btn-primary {
84
- background: var(--primary-color);
85
- color: white;
86
- box-shadow: 0 4px 15px rgba(229, 9, 14, 0.4);
87
  }
88
 
89
- .btn-primary:hover {
90
- background: #f40612;
91
- transform: translateY(-2px);
92
  }
93
 
94
- .btn-outline {
95
- background: transparent;
96
- border: 2px solid rgba(255,255,255,0.3);
97
- color: white;
 
 
 
 
 
98
  }
99
 
100
- .btn-outline:hover {
101
- border-color: white;
102
- background: rgba(255,255,255,0.1);
103
  }
104
 
105
- /* --- HEADER --- */
106
- header {
107
- position: fixed;
108
- top: 0;
109
- width: 100%;
110
- padding: 20px 0;
111
- background: rgba(14, 14, 14, 0.8);
112
- backdrop-filter: blur(10px);
113
- z-index: 1000;
114
- border-bottom: 1px solid var(--border);
115
  }
116
 
117
- .nav-wrapper {
 
 
118
  display: flex;
119
- justify-content: space-between;
120
  align-items: center;
121
  }
122
 
123
- .logo {
124
- font-size: 1.8rem;
125
- font-weight: 800;
126
- color: var(--primary-color);
127
- letter-spacing: -1px;
 
 
 
 
 
128
  }
129
 
130
- .logo span { color: white; }
 
 
 
131
 
132
- .anycoder-link {
133
  font-size: 0.8rem;
134
- color: var(--text-gray);
135
- opacity: 0.7;
136
- transition: 0.3s;
137
  }
138
-
139
- .anycoder-link:hover { opacity: 1; color: white; }
140
 
141
- /* --- HERO SECTION --- */
142
- .hero {
143
- height: 100vh;
 
 
 
 
 
 
144
  display: flex;
 
145
  align-items: center;
146
- position: relative;
147
- background: radial-gradient(circle at center, rgba(20,20,20,0.6) 0%, rgba(14,14,14,1) 100%),
148
- url('https://images.unsplash.com/photo-1574375927938-d5a98e8efe30?ixlib=auto&q=80') center/cover;
149
- overflow: hidden;
150
  }
151
 
152
- .hero-content {
153
- max-width: 800px;
154
- z-index: 2;
155
- animation: fadeIn 1s ease-out;
 
 
 
 
156
  }
157
 
158
- .hero h1 {
159
- font-size: 4rem;
160
- line-height: 1.1;
161
- margin-bottom: 20px;
162
- font-weight: 800;
163
  }
164
 
165
- .hero p {
166
- font-size: 1.5rem;
167
- color: var(--text-gray);
168
- margin-bottom: 30px;
169
- font-weight: 300;
 
 
 
 
170
  }
171
 
172
- .stats-badge {
173
- display: inline-flex;
174
- gap: 15px;
175
- margin-bottom: 30px;
176
- background: rgba(0,0,0,0.5);
177
- padding: 10px 20px;
178
- border-radius: 50px;
179
- border: 1px solid var(--border);
 
180
  }
181
 
182
- .stat-item { font-size: 0.9rem; font-weight: 600; }
183
- .stat-item i { color: var(--primary-color); margin-right: 5px; }
184
-
185
- /* --- FEATURES --- */
186
- .features {
187
- padding: 100px 0;
188
- background: var(--bg-dark);
189
  }
190
 
191
- .features-grid {
 
192
  display: grid;
193
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
194
- gap: 30px;
 
195
  }
196
 
197
- .feature-card {
198
- background: var(--bg-card);
199
- padding: 30px;
200
- border-radius: 12px;
201
- border: 1px solid var(--border);
 
202
  transition: var(--transition);
 
203
  }
204
 
205
- .feature-card:hover {
206
  transform: translateY(-5px);
207
- border-color: var(--primary-color);
208
- box-shadow: 0 10px 30px rgba(0,0,0,0.5);
209
  }
210
 
211
- .feature-icon {
212
- font-size: 2rem;
213
- color: var(--primary-color);
214
- margin-bottom: 20px;
215
  }
216
 
217
- .feature-card h3 { margin-bottom: 10px; font-size: 1.2rem; }
218
- .feature-card p { color: var(--text-gray); font-size: 0.9rem; }
 
 
 
 
 
 
 
 
 
219
 
220
- /* --- CONTENT LIBRARY --- */
221
- .library {
222
- padding: 80px 0;
223
- background: #0f0f0f;
224
- text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
225
  }
226
 
227
- .brands-row {
 
 
 
 
 
 
 
 
 
 
228
  display: flex;
229
- justify-content: center;
230
  align-items: center;
231
- gap: 40px;
232
- opacity: 0.7;
233
- flex-wrap: wrap;
234
- margin-top: 40px;
235
  }
236
 
237
- .brand-pill {
238
  font-size: 1.5rem;
239
- font-weight: 700;
240
- color: white;
241
- text-transform: uppercase;
242
- letter-spacing: 2px;
243
- border: 1px solid var(--border);
244
- padding: 10px 20px;
245
- border-radius: 8px;
246
- background: var(--bg-card);
247
- transition: 0.3s;
248
  }
249
 
250
- .brand-pill:hover {
251
- background: white;
252
- color: black;
253
- transform: scale(1.05);
254
  }
255
 
256
- /* --- PRICING --- */
257
- .pricing {
258
- padding: 100px 0;
259
- background: var(--bg-dark);
 
 
 
 
 
 
 
260
  }
261
 
262
- .pricing-grid {
263
- display: grid;
264
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
265
- gap: 30px;
266
  }
267
 
268
- .price-card {
269
- background: var(--bg-card);
270
- padding: 40px;
271
- border-radius: 16px;
272
- border: 1px solid var(--border);
273
- position: relative;
274
- overflow: hidden;
275
- transition: var(--transition);
276
- display: flex;
277
- flex-direction: column;
278
- justify-content: space-between;
279
  }
280
 
281
- .price-card.highlight {
282
- border-color: var(--primary-color);
283
- background: rgba(25, 25, 25, 0.9);
284
- box-shadow: 0 0 30px rgba(229, 9, 14, 0.1);
285
  }
286
 
287
- .price-header {
288
- margin-bottom: 30px;
 
 
 
289
  }
290
 
291
- .price-title { font-size: 1.2rem; color: var(--text-gray); margin-bottom: 10px; }
292
- .price-amount { font-size: 3rem; font-weight: 800; color: white; }
293
- .price-period { font-size: 1rem; color: var(--text-gray); }
 
 
 
 
 
 
294
 
295
- .price-features {
296
- margin-bottom: 30px;
297
- flex-grow: 1;
298
  }
299
 
300
- .price-features li {
301
- margin-bottom: 15px;
302
  display: flex;
303
  align-items: center;
304
- font-size: 1rem;
305
  }
306
 
307
- .price-features li i {
308
- color: var(--primary-color);
309
- margin-right: 10px;
310
- font-size: 0.8rem;
 
 
 
311
  }
312
 
313
- /* --- SETUP GUIDE --- */
314
- .setup {
315
- padding: 100px 0;
316
- background: linear-gradient(to bottom, #141414, #0a0a0a);
 
 
 
 
 
 
 
 
 
 
317
  }
318
 
319
- .steps-container {
320
  display: flex;
321
  flex-wrap: wrap;
322
- justify-content: space-between;
323
- gap: 20px;
324
- position: relative;
325
  }
326
 
327
- .step-item {
328
- flex: 1;
329
- min-width: 250px;
330
- text-align: center;
331
- padding: 20px;
 
 
 
332
  }
333
 
334
- .step-number {
335
- font-size: 4rem;
336
- font-weight: 800;
337
- color: rgba(255,255,255,0.1);
338
- line-height: 1;
339
- margin-bottom: 10px;
340
  }
341
 
342
- .step-item h3 { font-size: 1.5rem; margin-bottom: 10px; }
343
- .step-item p { color: var(--text-gray); }
344
-
345
- /* --- FAQ --- */
346
- .faq {
347
- padding: 100px 0;
348
- background: var(--bg-dark);
349
  }
350
 
351
- .faq-container {
352
- max-width: 800px;
353
- margin: 0 auto;
 
 
 
 
 
 
 
 
 
 
 
 
354
  }
355
 
356
- .faq-item {
357
- background: var(--bg-card);
358
- margin-bottom: 15px;
359
- border-radius: 8px;
360
- border: 1px solid var(--border);
361
- overflow: hidden;
362
  }
363
 
364
- .faq-question {
365
- padding: 20px;
 
 
 
 
 
366
  cursor: pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
367
  font-weight: 600;
 
368
  display: flex;
369
- justify-content: space-between;
370
  align-items: center;
371
- transition: 0.3s;
372
  }
373
 
374
- .faq-question:hover { background: rgba(255,255,255,0.05); }
 
 
 
 
375
 
376
- .faq-answer {
377
- padding: 0 20px 20px;
378
- color: var(--text-gray);
379
- display: none;
380
- border-top: 1px solid var(--border);
381
- margin-top: 10px;
382
  }
383
 
384
- .faq-item.active .faq-answer { display: block; }
385
- .faq-item.active .faq-question i { transform: rotate(180deg); }
 
 
386
 
387
- /* --- FOOTER --- */
388
- footer {
389
- background: #050505;
390
- padding: 50px 0 20px;
391
- border-top: 1px solid var(--border);
392
- text-align: center;
393
- color: var(--text-gray);
 
 
394
  }
395
 
396
- .footer-logo {
397
- font-size: 2rem;
398
- color: var(--primary-color);
399
- font-weight: 800;
400
- margin-bottom: 20px;
401
- display: inline-block;
402
  }
403
 
404
- .social-links {
405
- margin-bottom: 20px;
 
 
406
  }
407
 
408
- .social-links a {
409
- margin: 0 10px;
410
- font-size: 1.2rem;
411
- transition: 0.3s;
 
 
 
412
  }
413
 
414
- .social-links a:hover { color: var(--primary-color); }
 
 
415
 
416
- /* --- FLOATING BUTTON --- */
417
- .floating-support {
418
  position: fixed;
419
- bottom: 20px;
420
- right: 20px;
421
- z-index: 999;
422
- display: flex;
423
- gap: 10px;
 
 
 
 
 
 
 
 
 
424
  }
425
 
426
- .float-btn {
427
- width: 50px;
428
- height: 50px;
429
- border-radius: 50px;
 
 
430
  display: flex;
 
431
  align-items: center;
432
- justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
433
  font-size: 1.5rem;
434
- color: white;
435
- box-shadow: 0 4px 15px rgba(0,0,0,0.5);
436
- transition: 0.3s;
437
- background: #25D366; /* WhatsApp Green */
 
438
  }
439
 
440
- .float-btn.telegram { background: #0088cc; } /* Telegram Blue */
 
 
 
 
 
 
 
 
441
 
442
- .float-btn:hover { transform: translateY(-3px); }
 
 
 
 
443
 
444
- /* --- ANIMATION --- */
445
- @keyframes fadeIn {
446
- from { opacity: 0; transform: translateY(20px); }
447
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
448
  }
449
 
450
- /* --- RESPONSIVE --- */
451
  @media (max-width: 768px) {
452
- .hero h1 { font-size: 2.5rem; }
453
- .hero p { font-size: 1.1rem; }
454
- .section-title { font-size: 2rem; }
455
- .pricing-grid { grid-template-columns: 1fr; }
456
- .steps-container { flex-direction: column; }
457
- .stats-badge { display: flex; flex-direction: column; gap: 5px; padding: 10px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
458
  }
459
  </style>
460
  </head>
461
  <body>
462
-
463
- <!-- Header -->
464
- <header>
465
- <div class="container nav-wrapper">
466
- <a href="#" class="logo">CV<span>TV</span></a>
467
- <div>
468
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
469
- <a href="#pricing" class="btn btn-primary" style="padding: 8px 20px; font-size: 0.8rem; margin-left: 15px;">Get Started</a>
470
- </div>
471
- </div>
472
- </header>
473
-
474
- <!-- Hero Section -->
475
- <section class="hero">
476
- <div class="container hero-content">
477
- <div class="stats-badge">
478
- <span class="stat-item"><i class="fas fa-tv"></i> 6,000 TV Shows</span>
479
- <span class="stat-item"><i class="fas fa-film"></i> 35,000 Movies</span>
480
  </div>
481
- <h1>All Your Entertainment In One Place</h1>
482
- <p>Experience premium streaming with no buffering, crystal clear HD quality, and instant access to thousands of channels.</p>
483
- <a href="#pricing" class="btn btn-primary">Get Started Now</a>
484
- <a href="#features" class="btn btn-outline" style="margin-left: 10px;">Learn More</a>
485
- </div>
486
- </section>
487
-
488
- <!-- Features Section -->
489
- <section id="features" class="features">
490
- <div class="container">
491
- <h2 class="section-title">Why Choose CVTV?</h2>
492
- <p class="section-subtitle">The ultimate streaming solution for modern viewers.</p>
493
 
494
- <div class="features-grid">
495
- <div class="feature-card">
496
- <i class="fas fa-bolt feature-icon"></i>
497
- <h3>VOD On Demand</h3>
498
- <p>Access thousands of movies and series instantly whenever you want.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
499
  </div>
500
- <div class="feature-card">
501
- <i class="fas fa-futbol feature-icon"></i>
502
- <h3>Sports Packages</h3>
503
- <p>Never miss a game. Live coverage of major leagues worldwide.</p>
 
 
 
 
 
 
 
 
 
 
 
 
504
  </div>
505
- <div class="feature-card">
506
- <i class="fas fa-star feature-icon"></i>
507
- <h3>Premium Channels</h3>
508
- <p>Top-tier content from HBO, Sky, and exclusive networks.</p>
 
 
 
 
 
 
 
509
  </div>
510
- <div class="feature-card">
511
- <i class="fas fa-laptop feature-icon"></i>
512
- <h3>Multi Device Support</h3>
513
- <p>Watch on your TV, Smartphone, Tablet, or Laptop seamlessly.</p>
 
 
 
 
514
  </div>
515
- <div class="feature-card">
516
- <i class="fas fa-video feature-icon"></i>
517
- <h3>HD / FHD Streaming</h3>
518
- <p>Crystal clear 1080p and 4K resolution streams.</p>
 
 
 
 
519
  </div>
520
- <div class="feature-card">
521
- <i class="fas fa-clock feature-icon"></i>
522
- <h3>24/7 Availability</h3>
523
- <p>Our servers are always online. No downtime, no waiting.</p>
 
 
 
 
524
  </div>
525
  </div>
526
- </div>
527
- </section>
528
 
529
- <!-- Content Library -->
530
- <section class="library">
531
- <div class="container">
532
- <h2 class="section-title">Content From Top Platforms</h2>
533
- <p class="section-subtitle">We aggregate content from the biggest streaming giants.</p>
534
-
535
- <div class="brands-row">
536
- <div class="brand-pill">Netflix</div>
537
- <div class="brand-pill">Hulu</div>
538
- <div class="brand-pill">Prime</div>
539
- <div class="brand-pill">Max</div>
540
- <div class="brand-pill">Starz</div>
541
- <div class="brand-pill">Disney+</div>
542
- </div>
543
- </div>
544
- </section>
545
-
546
- <!-- Pricing Section -->
547
- <section id="pricing" class="pricing">
548
- <div class="container">
549
- <h2 class="section-title">Simple Monthly Pricing</h2>
550
- <p class="section-subtitle">Choose the plan that fits your household.</p>
551
-
552
- <div class="pricing-grid">
553
- <!-- Plan 1 -->
554
- <div class="price-card">
555
- <div class="price-header">
556
- <h3 class="price-title">1 Device</h3>
557
- <div class="price-amount">$15</div>
558
- <div class="price-period">/ month</div>
559
  </div>
560
- <ul class="price-features">
561
- <li><i class="fas fa-check"></i> Full Channel List</li>
562
- <li><i class="fas fa-check"></i> 4K / HD Quality</li>
563
- <li><i class="fas fa-check"></i> Anti-Freeze Technology</li>
564
- <li><i class="fas fa-check"></i> 24/7 Support</li>
565
- </ul>
566
- <button class="btn btn-outline" onclick="alert('Redirecting to Checkout...')">Subscribe</button>
567
  </div>
568
-
569
- <!-- Plan 2 (Highlight) -->
570
- <div class="price-card highlight">
571
- <div class="price-header">
572
- <div style="color: var(--primary-color); font-size: 0.8rem; font-weight: bold; margin-bottom: 5px;">MOST POPULAR</div>
573
- <h3 class="price-title">2 Devices</h3>
574
- <div class="price-amount">$25</div>
575
- <div class="price-period">/ month</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
576
  </div>
577
- <ul class="price-features">
578
- <li><i class="fas fa-check"></i> Dual Simultaneous Streams</li>
579
- <li><i class="fas fa-check"></i> Full Channel List</li>
580
- <li><i class="fas fa-check"></i> 4K / HD Quality</li>
581
- <li><i class="fas fa-check"></i> Instant Activation</li>
582
- </ul>
583
- <button class="btn btn-primary" onclick="alert('Redirecting to Checkout...')">Subscribe</button>
584
  </div>
585
-
586
- <!-- Plan 3 -->
587
- <div class="price-card">
588
- <div class="price-header">
589
- <h3 class="price-title">3 Devices</h3>
590
- <div class="price-amount">$35</div>
591
- <div class="price-period">/ month</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
592
  </div>
593
- <ul class="price-features">
594
- <li><i class="fas fa-check"></i> Triple Simultaneous Streams</li>
595
- <li><i class="fas fa-check"></i> Family Plan</li>
596
- <li><i class="fas fa-check"></i> Priority Support</li>
597
- <li><i class="fas fa-check"></i> VIP Access</li>
598
- </ul>
599
- <button class="btn btn-outline" onclick="alert('Redirecting to Checkout...')">Subscribe</button>
600
  </div>
601
  </div>
602
- </div>
603
- </section>
604
-
605
- <!-- Setup Guide -->
606
- <section class="setup">
607
- <div class="container">
608
- <h2 class="section-title">Start Watching in 3 Steps</h2>
609
- <div class="steps-container">
610
- <div class="step-item">
611
- <div class="step-number">1</div>
612
- <h3>Choose Plan</h3>
613
- <p>Select the connection plan that suits your needs from our pricing page.</p>
614
  </div>
615
- <div class="step-item">
616
- <div class="step-number">2</div>
617
- <h3>Receive Login</h3>
618
- <p>Instant activation via email or WhatsApp with your credentials.</p>
 
 
 
 
 
 
 
619
  </div>
620
- <div class="step-item">
621
- <div class="step-number">3</div>
622
- <h3>Start Watching</h3>
623
- <p>Enter details on your device and enjoy unlimited entertainment.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
624
  </div>
625
  </div>
626
- </div>
627
- </section>
628
-
629
- <!-- FAQ Section -->
630
- <section class="faq">
631
- <div class="container">
632
- <h2 class="section-title">Frequently Asked Questions</h2>
633
- <div class="faq-container">
634
- <div class="faq-item">
635
- <div class="faq-question">
636
- What devices are supported?
637
- <i class="fas fa-chevron-down"></i>
638
- </div>
639
- <div class="faq-answer">
640
- We support Android TV boxes, Smart TVs, iOS/Android phones, Tablets, Windows/Mac computers, and Mag boxes.
641
  </div>
642
  </div>
643
- <div class="faq-item">
644
- <div class="faq-question">
645
- How fast is activation?
646
- <i class="fas fa-chevron-down"></i>
 
 
 
 
 
 
 
 
 
 
647
  </div>
648
- <div class="faq-answer">
649
- Activation is typically instant. Once payment is confirmed, you receive your login details within 5 minutes.
 
 
 
 
 
 
650
  </div>
651
- </div>
652
- <div class="faq-item">
653
- <div class="faq-question">
654
- Do you offer sports?
655
- <i class="fas fa-chevron-down"></i>
 
 
656
  </div>
657
- <div class="faq-answer">
658
- Yes! We have comprehensive sports packages including NFL, NBA, Premier League, UFC, and more.
 
 
 
 
 
 
 
659
  </div>
660
  </div>
661
- <div class="faq-item">
662
- <div class="faq-question">
663
- Is there a contract?
664
- <i class="fas fa-chevron-down"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
665
  </div>
666
- <div class="faq-answer">
667
- No contracts. Our service is strictly monthly. You can cancel or renew at any time.
 
 
 
668
  </div>
 
 
 
 
 
 
 
 
 
669
  </div>
670
  </div>
671
- </div>
672
- </section>
673
-
674
- <!-- Footer -->
675
- <footer>
676
- <div class="container">
677
- <a href="#" class="footer-logo">CV<span>TV</span></a>
678
- <div class="social-links">
679
- <a href="#"><i class="fab fa-facebook"></i></a>
680
- <a href="#"><i class="fab fa-twitter"></i></a>
681
- <a href="#"><i class="fab fa-instagram"></i></a>
682
- <a href="#"><i class="fab fa-youtube"></i></a>
 
 
 
 
 
 
 
683
  </div>
684
- <p>&copy; 2023 CVTV Services. All rights reserved.</p>
685
- <p style="font-size: 0.8rem; margin-top: 10px;">
686
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: #666;">Built with anycoder</a>
687
- </p>
688
  </div>
689
- </footer>
690
-
691
- <!-- Floating Support Buttons -->
692
- <div class="floating-support">
693
- <a href="#" class="float-btn" title="WhatsApp">
694
- <i class="fab fa-whatsapp"></i>
695
- </a>
696
- <a href="#" class="float-btn telegram" title="Telegram">
697
- <i class="fab fa-paper-plane"></i>
698
- </a>
699
  </div>
700
 
701
- <!-- JavaScript Logic -->
702
  <script>
703
- // FAQ Toggle Logic
704
- const faqItems = document.querySelectorAll('.faq-item');
705
-
706
- faqItems.forEach(item => {
707
- const question = item.querySelector('.faq-question');
708
- question.addEventListener('click', () => {
709
- // Close others
710
- faqItems.forEach(other => {
711
- if (other !== item) other.classList.remove('active');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
712
  });
713
- // Toggle current
714
- item.classList.toggle('active');
715
  });
716
- });
717
-
718
- // Sticky Header Background on Scroll
719
- window.addEventListener('scroll', () => {
720
- const header = document.querySelector('header');
721
- if (window.scrollY > 50) {
722
- header.style.background = 'rgba(14, 14, 14, 0.95)';
723
- header.style.padding = '15px 0';
724
- } else {
725
- header.style.background = 'rgba(14, 14, 14, 0.8)';
726
- header.style.padding = '20px 0';
727
- }
728
- });
729
-
730
- // Smooth Scroll for Anchor Links
731
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
732
- anchor.addEventListener('click', function (e) {
733
- e.preventDefault();
734
- document.querySelector(this.getAttribute('href')).scrollIntoView({
735
- behavior: 'smooth'
 
 
 
 
 
 
 
 
 
 
736
  });
737
  });
738
- });
739
- </script>
740
- </body>
741
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NexusAI | Premium AI Creative Platform</title>
 
 
 
 
 
 
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
11
  <style>
 
12
  :root {
13
+ --primary: #7c3aed;
14
+ --primary-dark: #5b21b6;
15
+ --secondary: #06b6d4;
16
+ --accent: #f59e0b;
17
+ --dark: #0f172a;
18
+ --darker: #020617;
19
+ --light: #f8fafc;
20
+ --gray: #64748b;
21
+ --gray-dark: #334155;
22
+ --glass: rgba(30, 41, 59, 0.7);
23
+ --glass-border: rgba(255, 255, 255, 0.1);
24
+ --success: #10b981;
25
+ --warning: #f59e0b;
26
+ --danger: #ef4444;
27
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
28
+ --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.2);
29
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
30
  }
31
 
32
  * {
33
  margin: 0;
34
  padding: 0;
35
+ box-sizing: border-box;
 
36
  }
37
 
38
  body {
39
+ font-family: 'Inter', sans-serif;
40
+ background: var(--darker);
41
+ color: var(--light);
42
  line-height: 1.6;
43
+ overflow-x: hidden;
44
+ min-height: 100vh;
45
  }
46
 
47
+ .app-container {
48
+ display: flex;
49
+ min-height: 100vh;
50
+ background: linear-gradient(135deg, var(--darker) 0%, #1e293b 100%);
51
+ }
52
 
53
+ /* Sidebar */
54
+ .sidebar {
55
+ width: 260px;
56
+ background: var(--glass);
57
+ backdrop-filter: blur(10px);
58
+ border-right: 1px solid var(--glass-border);
59
+ padding: 1.5rem 1rem;
60
+ display: flex;
61
+ flex-direction: column;
62
+ position: fixed;
63
+ height: 100vh;
64
+ z-index: 100;
65
+ transition: var(--transition);
66
  }
67
 
68
+ .logo {
69
+ display: flex;
70
+ align-items: center;
71
+ margin-bottom: 2rem;
72
+ padding-left: 0.5rem;
 
 
 
73
  }
74
 
75
+ .logo-icon {
76
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
77
+ width: 40px;
78
+ height: 40px;
79
+ border-radius: 10px;
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ margin-right: 12px;
84
+ font-size: 1.5rem;
85
  }
86
 
87
+ .logo-text {
88
+ font-family: 'Poppins', sans-serif;
89
+ font-weight: 700;
90
+ font-size: 1.5rem;
91
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
92
+ -webkit-background-clip: text;
93
+ background-clip: text;
94
+ color: transparent;
 
 
95
  }
96
 
97
+ .nav-menu {
98
+ list-style: none;
99
+ flex: 1;
 
100
  }
101
 
102
+ .nav-item {
103
+ margin-bottom: 0.5rem;
 
104
  }
105
 
106
+ .nav-link {
107
+ display: flex;
108
+ align-items: center;
109
+ padding: 0.75rem 1rem;
110
+ border-radius: 10px;
111
+ color: var(--light);
112
+ text-decoration: none;
113
+ transition: var(--transition);
114
+ font-weight: 500;
115
  }
116
 
117
+ .nav-link:hover, .nav-link.active {
118
+ background: rgba(124, 58, 237, 0.2);
119
+ color: var(--primary);
120
  }
121
 
122
+ .nav-link i {
123
+ margin-right: 12px;
124
+ font-size: 1.2rem;
125
+ width: 24px;
126
+ text-align: center;
 
 
 
 
 
127
  }
128
 
129
+ .user-section {
130
+ padding: 1rem;
131
+ border-top: 1px solid var(--glass-border);
132
  display: flex;
 
133
  align-items: center;
134
  }
135
 
136
+ .user-avatar {
137
+ width: 40px;
138
+ height: 40px;
139
+ border-radius: 50%;
140
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
141
+ display: flex;
142
+ align-items: center;
143
+ justify-content: center;
144
+ margin-right: 12px;
145
+ font-weight: 600;
146
  }
147
 
148
+ .user-info h4 {
149
+ font-size: 0.9rem;
150
+ font-weight: 600;
151
+ }
152
 
153
+ .user-info p {
154
  font-size: 0.8rem;
155
+ color: var(--gray);
 
 
156
  }
 
 
157
 
158
+ /* Main Content */
159
+ .main-content {
160
+ flex: 1;
161
+ margin-left: 260px;
162
+ padding: 1.5rem;
163
+ transition: var(--transition);
164
+ }
165
+
166
+ .header {
167
  display: flex;
168
+ justify-content: space-between;
169
  align-items: center;
170
+ margin-bottom: 2rem;
 
 
 
171
  }
172
 
173
+ .page-title {
174
+ font-family: 'Poppins', sans-serif;
175
+ font-size: 2rem;
176
+ font-weight: 700;
177
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
178
+ -webkit-background-clip: text;
179
+ background-clip: text;
180
+ color: transparent;
181
  }
182
 
183
+ .header-actions {
184
+ display: flex;
185
+ align-items: center;
186
+ gap: 1rem;
 
187
  }
188
 
189
+ .credits-badge {
190
+ background: var(--glass);
191
+ border: 1px solid var(--glass-border);
192
+ border-radius: 20px;
193
+ padding: 0.5rem 1rem;
194
+ font-size: 0.9rem;
195
+ display: flex;
196
+ align-items: center;
197
+ gap: 0.5rem;
198
  }
199
 
200
+ .btn-upgrade {
201
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
202
+ color: white;
203
+ border: none;
204
+ border-radius: 8px;
205
+ padding: 0.75rem 1.5rem;
206
+ font-weight: 600;
207
+ cursor: pointer;
208
+ transition: var(--transition);
209
  }
210
 
211
+ .btn-upgrade:hover {
212
+ transform: translateY(-2px);
213
+ box-shadow: var(--shadow);
 
 
 
 
214
  }
215
 
216
+ /* Tool Cards */
217
+ .tools-grid {
218
  display: grid;
219
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
220
+ gap: 1.5rem;
221
+ margin-bottom: 2rem;
222
  }
223
 
224
+ .tool-card {
225
+ background: var(--glass);
226
+ backdrop-filter: blur(10px);
227
+ border: 1px solid var(--glass-border);
228
+ border-radius: 16px;
229
+ padding: 1.5rem;
230
  transition: var(--transition);
231
+ cursor: pointer;
232
  }
233
 
234
+ .tool-card:hover {
235
  transform: translateY(-5px);
236
+ box-shadow: var(--shadow);
237
+ border-color: rgba(124, 58, 237, 0.3);
238
  }
239
 
240
+ .tool-card.active {
241
+ border-color: var(--primary);
242
+ box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
 
243
  }
244
 
245
+ .tool-icon {
246
+ width: 60px;
247
+ height: 60px;
248
+ border-radius: 12px;
249
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
250
+ display: flex;
251
+ align-items: center;
252
+ justify-content: center;
253
+ margin-bottom: 1rem;
254
+ font-size: 1.8rem;
255
+ }
256
 
257
+ .tool-title {
258
+ font-size: 1.3rem;
259
+ font-weight: 600;
260
+ margin-bottom: 0.5rem;
261
+ }
262
+
263
+ .tool-description {
264
+ color: var(--gray);
265
+ font-size: 0.9rem;
266
+ margin-bottom: 1rem;
267
+ }
268
+
269
+ .tool-status {
270
+ display: inline-block;
271
+ padding: 0.25rem 0.75rem;
272
+ border-radius: 20px;
273
+ font-size: 0.8rem;
274
+ font-weight: 600;
275
+ }
276
+
277
+ .status-active {
278
+ background: rgba(16, 185, 129, 0.2);
279
+ color: var(--success);
280
+ }
281
+
282
+ .status-coming {
283
+ background: rgba(245, 158, 11, 0.2);
284
+ color: var(--warning);
285
+ }
286
+
287
+ /* Tool Interface */
288
+ .tool-interface {
289
+ background: var(--glass);
290
+ backdrop-filter: blur(10px);
291
+ border: 1px solid var(--glass-border);
292
+ border-radius: 16px;
293
+ padding: 2rem;
294
+ margin-top: 1.5rem;
295
+ display: none;
296
  }
297
 
298
+ .tool-interface.active {
299
+ display: block;
300
+ animation: fadeIn 0.5s ease;
301
+ }
302
+
303
+ @keyframes fadeIn {
304
+ from { opacity: 0; transform: translateY(10px); }
305
+ to { opacity: 1; transform: translateY(0); }
306
+ }
307
+
308
+ .tool-header {
309
  display: flex;
310
+ justify-content: space-between;
311
  align-items: center;
312
+ margin-bottom: 1.5rem;
 
 
 
313
  }
314
 
315
+ .tool-header h2 {
316
  font-size: 1.5rem;
317
+ font-weight: 600;
 
 
 
 
 
 
 
 
318
  }
319
 
320
+ .prompt-container {
321
+ margin-bottom: 1.5rem;
 
 
322
  }
323
 
324
+ .prompt-input {
325
+ width: 100%;
326
+ background: rgba(15, 23, 42, 0.7);
327
+ border: 1px solid var(--glass-border);
328
+ border-radius: 12px;
329
+ padding: 1.25rem;
330
+ color: var(--light);
331
+ font-size: 1rem;
332
+ resize: vertical;
333
+ min-height: 120px;
334
+ transition: var(--transition);
335
  }
336
 
337
+ .prompt-input:focus {
338
+ outline: none;
339
+ border-color: var(--primary);
340
+ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
341
  }
342
 
343
+ .controls-grid {
344
+ display: grid;
345
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
346
+ gap: 1.5rem;
347
+ margin-bottom: 1.5rem;
 
 
 
 
 
 
348
  }
349
 
350
+ .control-group {
351
+ margin-bottom: 1rem;
 
 
352
  }
353
 
354
+ .control-label {
355
+ display: block;
356
+ margin-bottom: 0.5rem;
357
+ font-weight: 500;
358
+ font-size: 0.9rem;
359
  }
360
 
361
+ .control-select, .control-input {
362
+ width: 100%;
363
+ background: rgba(15, 23, 42, 0.7);
364
+ border: 1px solid var(--glass-border);
365
+ border-radius: 8px;
366
+ padding: 0.75rem;
367
+ color: var(--light);
368
+ font-size: 0.9rem;
369
+ }
370
 
371
+ .control-select:focus, .control-input:focus {
372
+ outline: none;
373
+ border-color: var(--primary);
374
  }
375
 
376
+ .slider-container {
 
377
  display: flex;
378
  align-items: center;
379
+ gap: 1rem;
380
  }
381
 
382
+ .slider {
383
+ flex: 1;
384
+ -webkit-appearance: none;
385
+ height: 6px;
386
+ border-radius: 3px;
387
+ background: var(--gray-dark);
388
+ outline: none;
389
  }
390
 
391
+ .slider::-webkit-slider-thumb {
392
+ -webkit-appearance: none;
393
+ width: 18px;
394
+ height: 18px;
395
+ border-radius: 50%;
396
+ background: var(--primary);
397
+ cursor: pointer;
398
+ }
399
+
400
+ .slider-value {
401
+ min-width: 40px;
402
+ text-align: center;
403
+ font-weight: 600;
404
+ font-size: 0.9rem;
405
  }
406
 
407
+ .style-presets {
408
  display: flex;
409
  flex-wrap: wrap;
410
+ gap: 0.75rem;
411
+ margin-bottom: 1.5rem;
 
412
  }
413
 
414
+ .style-preset {
415
+ padding: 0.5rem 1rem;
416
+ background: rgba(15, 23, 42, 0.7);
417
+ border: 1px solid var(--glass-border);
418
+ border-radius: 20px;
419
+ font-size: 0.85rem;
420
+ cursor: pointer;
421
+ transition: var(--transition);
422
  }
423
 
424
+ .style-preset:hover, .style-preset.active {
425
+ background: rgba(124, 58, 237, 0.2);
426
+ border-color: var(--primary);
427
+ color: var(--primary);
 
 
428
  }
429
 
430
+ .action-buttons {
431
+ display: flex;
432
+ gap: 1rem;
433
+ margin-top: 2rem;
 
 
 
434
  }
435
 
436
+ .btn-generate {
437
+ flex: 1;
438
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
439
+ color: white;
440
+ border: none;
441
+ border-radius: 10px;
442
+ padding: 1rem 2rem;
443
+ font-weight: 600;
444
+ font-size: 1rem;
445
+ cursor: pointer;
446
+ transition: var(--transition);
447
+ display: flex;
448
+ align-items: center;
449
+ justify-content: center;
450
+ gap: 0.75rem;
451
  }
452
 
453
+ .btn-generate:hover {
454
+ transform: translateY(-2px);
455
+ box-shadow: var(--shadow);
 
 
 
456
  }
457
 
458
+ .btn-secondary {
459
+ background: rgba(30, 41, 59, 0.7);
460
+ border: 1px solid var(--glass-border);
461
+ color: var(--light);
462
+ border-radius: 10px;
463
+ padding: 1rem 1.5rem;
464
+ font-weight: 600;
465
  cursor: pointer;
466
+ transition: var(--transition);
467
+ }
468
+
469
+ .btn-secondary:hover {
470
+ background: rgba(30, 41, 59, 0.9);
471
+ border-color: var(--primary);
472
+ }
473
+
474
+ /* Generation Results */
475
+ .results-section {
476
+ margin-top: 2rem;
477
+ }
478
+
479
+ .results-title {
480
+ font-size: 1.2rem;
481
  font-weight: 600;
482
+ margin-bottom: 1rem;
483
  display: flex;
 
484
  align-items: center;
485
+ justify-content: space-between;
486
  }
487
 
488
+ .results-grid {
489
+ display: grid;
490
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
491
+ gap: 1.5rem;
492
+ }
493
 
494
+ .result-card {
495
+ background: rgba(15, 23, 42, 0.7);
496
+ border-radius: 12px;
497
+ overflow: hidden;
498
+ transition: var(--transition);
 
499
  }
500
 
501
+ .result-card:hover {
502
+ transform: translateY(-5px);
503
+ box-shadow: var(--shadow-light);
504
+ }
505
 
506
+ .result-image {
507
+ width: 100%;
508
+ height: 180px;
509
+ object-fit: cover;
510
+ background: linear-gradient(135deg, #1e293b, #334155);
511
+ display: flex;
512
+ align-items: center;
513
+ justify-content: center;
514
+ color: var(--gray);
515
  }
516
 
517
+ .result-info {
518
+ padding: 1rem;
 
 
 
 
519
  }
520
 
521
+ .result-actions {
522
+ display: flex;
523
+ justify-content: space-between;
524
+ margin-top: 0.5rem;
525
  }
526
 
527
+ .result-action-btn {
528
+ background: none;
529
+ border: none;
530
+ color: var(--gray);
531
+ cursor: pointer;
532
+ transition: var(--transition);
533
+ padding: 0.25rem;
534
  }
535
 
536
+ .result-action-btn:hover {
537
+ color: var(--primary);
538
+ }
539
 
540
+ /* Progress Bar */
541
+ .progress-bar-container {
542
  position: fixed;
543
+ bottom: 0;
544
+ left: 260px;
545
+ right: 0;
546
+ background: var(--glass);
547
+ backdrop-filter: blur(10px);
548
+ border-top: 1px solid var(--glass-border);
549
+ padding: 1rem 1.5rem;
550
+ display: none;
551
+ z-index: 1000;
552
+ }
553
+
554
+ .progress-bar-container.active {
555
+ display: block;
556
+ animation: slideUp 0.3s ease;
557
  }
558
 
559
+ @keyframes slideUp {
560
+ from { transform: translateY(100%); }
561
+ to { transform: translateY(0); }
562
+ }
563
+
564
+ .progress-header {
565
  display: flex;
566
+ justify-content: space-between;
567
  align-items: center;
568
+ margin-bottom: 0.5rem;
569
+ }
570
+
571
+ .progress-bar {
572
+ height: 6px;
573
+ background: var(--gray-dark);
574
+ border-radius: 3px;
575
+ overflow: hidden;
576
+ }
577
+
578
+ .progress-fill {
579
+ height: 100%;
580
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
581
+ width: 0%;
582
+ transition: width 0.3s ease;
583
+ }
584
+
585
+ /* Mobile Menu Toggle */
586
+ .mobile-menu-toggle {
587
+ display: none;
588
+ background: none;
589
+ border: none;
590
+ color: var(--light);
591
  font-size: 1.5rem;
592
+ cursor: pointer;
593
+ position: fixed;
594
+ top: 1.5rem;
595
+ left: 1.5rem;
596
+ z-index: 1001;
597
  }
598
 
599
+ /* Footer */
600
+ .footer {
601
+ text-align: center;
602
+ padding: 2rem 1rem;
603
+ margin-top: 3rem;
604
+ border-top: 1px solid var(--glass-border);
605
+ color: var(--gray);
606
+ font-size: 0.9rem;
607
+ }
608
 
609
+ .footer a {
610
+ color: var(--primary);
611
+ text-decoration: none;
612
+ transition: var(--transition);
613
+ }
614
 
615
+ .footer a:hover {
616
+ color: var(--secondary);
617
+ }
618
+
619
+ /* Responsive Design */
620
+ @media (max-width: 1024px) {
621
+ .sidebar {
622
+ transform: translateX(-100%);
623
+ }
624
+
625
+ .sidebar.active {
626
+ transform: translateX(0);
627
+ }
628
+
629
+ .main-content {
630
+ margin-left: 0;
631
+ }
632
+
633
+ .progress-bar-container {
634
+ left: 0;
635
+ }
636
+
637
+ .mobile-menu-toggle {
638
+ display: block;
639
+ }
640
  }
641
 
 
642
  @media (max-width: 768px) {
643
+ .tools-grid {
644
+ grid-template-columns: 1fr;
645
+ }
646
+
647
+ .controls-grid {
648
+ grid-template-columns: 1fr;
649
+ }
650
+
651
+ .action-buttons {
652
+ flex-direction: column;
653
+ }
654
+
655
+ .results-grid {
656
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
657
+ }
658
+
659
+ .header {
660
+ flex-direction: column;
661
+ align-items: flex-start;
662
+ gap: 1rem;
663
+ }
664
+
665
+ .header-actions {
666
+ width: 100%;
667
+ justify-content: space-between;
668
+ }
669
+ }
670
+
671
+ /* Loading Skeleton */
672
+ .skeleton {
673
+ background: linear-gradient(90deg, rgba(30, 41, 59, 0.5) 25%, rgba(51, 65, 85, 0.5) 50%, rgba(30, 41, 59, 0.5) 75%);
674
+ background-size: 200% 100%;
675
+ animation: loading 1.5s infinite;
676
+ border-radius: 8px;
677
+ }
678
+
679
+ @keyframes loading {
680
+ 0% { background-position: 200% 0; }
681
+ 100% { background-position: -200% 0; }
682
+ }
683
+
684
+ /* Built with anycoder */
685
+ .anycoder-badge {
686
+ position: fixed;
687
+ top: 1.5rem;
688
+ right: 1.5rem;
689
+ z-index: 1000;
690
+ }
691
+
692
+ .anycoder-badge a {
693
+ background: rgba(30, 41, 59, 0.7);
694
+ backdrop-filter: blur(10px);
695
+ border: 1px solid var(--glass-border);
696
+ border-radius: 20px;
697
+ padding: 0.5rem 1rem;
698
+ font-size: 0.8rem;
699
+ color: var(--light);
700
+ text-decoration: none;
701
+ transition: var(--transition);
702
+ }
703
+
704
+ .anycoder-badge a:hover {
705
+ background: rgba(124, 58, 237, 0.2);
706
+ color: var(--primary);
707
  }
708
  </style>
709
  </head>
710
  <body>
711
+ <div class="app-container">
712
+ <!-- Mobile Menu Toggle -->
713
+ <button class="mobile-menu-toggle" id="mobileMenuToggle">
714
+ <i class="fas fa-bars"></i>
715
+ </button>
716
+
717
+ <!-- Sidebar -->
718
+ <aside class="sidebar" id="sidebar">
719
+ <div class="logo">
720
+ <div class="logo-icon">
721
+ <i class="fas fa-brain"></i>
722
+ </div>
723
+ <div class="logo-text">NexusAI</div>
 
 
 
 
 
724
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
725
 
726
+ <ul class="nav-menu">
727
+ <li class="nav-item">
728
+ <a href="#" class="nav-link active" data-tool="dashboard">
729
+ <i class="fas fa-home"></i>
730
+ <span>Dashboard</span>
731
+ </a>
732
+ </li>
733
+ <li class="nav-item">
734
+ <a href="#" class="nav-link" data-tool="text-to-image">
735
+ <i class="fas fa-image"></i>
736
+ <span>Text to Image</span>
737
+ </a>
738
+ </li>
739
+ <li class="nav-item">
740
+ <a href="#" class="nav-link" data-tool="image-editor">
741
+ <i class="fas fa-paint-brush"></i>
742
+ <span>AI Canvas</span>
743
+ </a>
744
+ </li>
745
+ <li class="nav-item">
746
+ <a href="#" class="nav-link" data-tool="text-to-video">
747
+ <i class="fas fa-video"></i>
748
+ <span>Text to Video</span>
749
+ </a>
750
+ </li>
751
+ <li class="nav-item">
752
+ <a href="#" class="nav-link" data-tool="ai-music">
753
+ <i class="fas fa-music"></i>
754
+ <span>AI Music</span>
755
+ </a>
756
+ </li>
757
+ <li class="nav-item">
758
+ <a href="#" class="nav-link">
759
+ <i class="fas fa-history"></i>
760
+ <span>History</span>
761
+ </a>
762
+ </li>
763
+ <li class="nav-item">
764
+ <a href="#" class="nav-link">
765
+ <i class="fas fa-save"></i>
766
+ <span>Saved Projects</span>
767
+ </a>
768
+ </li>
769
+ <li class="nav-item">
770
+ <a href="#" class="nav-link">
771
+ <i class="fas fa-cog"></i>
772
+ <span>Settings</span>
773
+ </a>
774
+ </li>
775
+ </ul>
776
+
777
+ <div class="user-section">
778
+ <div class="user-avatar">JD</div>
779
+ <div class="user-info">
780
+ <h4>John Doe</h4>
781
+ <p>Pro Plan</p>
782
  </div>
783
+ </div>
784
+ </aside>
785
+
786
+ <!-- Main Content -->
787
+ <main class="main-content">
788
+ <div class="header">
789
+ <h1 class="page-title" id="pageTitle">AI Creative Dashboard</h1>
790
+ <div class="header-actions">
791
+ <div class="credits-badge">
792
+ <i class="fas fa-bolt"></i>
793
+ <span>Credits: <strong>142</strong></span>
794
+ </div>
795
+ <button class="btn-upgrade">
796
+ <i class="fas fa-crown"></i>
797
+ Upgrade Plan
798
+ </button>
799
  </div>
800
+ </div>
801
+
802
+ <!-- Tool Cards -->
803
+ <div class="tools-grid" id="toolsGrid">
804
+ <div class="tool-card active" data-tool="text-to-image">
805
+ <div class="tool-icon">
806
+ <i class="fas fa-image"></i>
807
+ </div>
808
+ <h3 class="tool-title">Text to Image</h3>
809
+ <p class="tool-description">Transform text prompts into stunning visuals with advanced AI models.</p>
810
+ <span class="tool-status status-active">Active</span>
811
  </div>
812
+
813
+ <div class="tool-card" data-tool="image-editor">
814
+ <div class="tool-icon">
815
+ <i class="fas fa-paint-brush"></i>
816
+ </div>
817
+ <h3 class="tool-title">AI Canvas</h3>
818
+ <p class="tool-description">Edit, inpaint, outpaint and transform images with AI-powered tools.</p>
819
+ <span class="tool-status status-active">Active</span>
820
  </div>
821
+
822
+ <div class="tool-card" data-tool="text-to-video">
823
+ <div class="tool-icon">
824
+ <i class="fas fa-video"></i>
825
+ </div>
826
+ <h3 class="tool-title">Text to Video</h3>
827
+ <p class="tool-description">Generate dynamic videos from text prompts or animate existing images.</p>
828
+ <span class="tool-status status-active">Active</span>
829
  </div>
830
+
831
+ <div class="tool-card" data-tool="ai-music">
832
+ <div class="tool-icon">
833
+ <i class="fas fa-music"></i>
834
+ </div>
835
+ <h3 class="tool-title">AI Music</h3>
836
+ <p class="tool-description">Create original music tracks in any genre with AI composition.</p>
837
+ <span class="tool-status status-coming">Coming Soon</span>
838
  </div>
839
  </div>
 
 
840
 
841
+ <!-- Text to Image Interface -->
842
+ <div class="tool-interface active" id="text-to-image-interface">
843
+ <div class="tool-header">
844
+ <h2>Text to Image Generator</h2>
845
+ <div class="credits-badge">
846
+ <i class="fas fa-info-circle"></i>
847
+ <span>2 credits per generation</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
848
  </div>
 
 
 
 
 
 
 
849
  </div>
850
+
851
+ <div class="prompt-container">
852
+ <textarea class="prompt-input" id="textToImagePrompt" placeholder="Describe the image you want to create...">A majestic dragon flying over a futuristic city at sunset, cinematic lighting, hyper-detailed, 8K</textarea>
853
+ </div>
854
+
855
+ <div class="style-presets">
856
+ <div class="style-preset active">Realistic</div>
857
+ <div class="style-preset">Cinematic</div>
858
+ <div class="style-preset">Anime</div>
859
+ <div class="style-preset">Streetwear</div>
860
+ <div class="style-preset">Logo Design</div>
861
+ <div class="style-preset">Poster Art</div>
862
+ <div class="style-preset">Fantasy</div>
863
+ <div class="style-preset">Cyberpunk</div>
864
+ </div>
865
+
866
+ <div class="controls-grid">
867
+ <div class="control-group">
868
+ <label class="control-label">Aspect Ratio</label>
869
+ <select class="control-select" id="aspectRatio">
870
+ <option value="1:1">Square (1:1)</option>
871
+ <option value="16:9" selected>Widescreen (16:9)</option>
872
+ <option value="9:16">Portrait (9:16)</option>
873
+ <option value="4:3">Standard (4:3)</option>
874
+ <option value="3:2">Classic (3:2)</option>
875
+ </select>
876
+ </div>
877
+
878
+ <div class="control-group">
879
+ <label class="control-label">Model</label>
880
+ <select class="control-select" id="aiModel">
881
+ <option value="nexus-v5" selected>Nexus V5 (Premium)</option>
882
+ <option value="stable-diffusion">Stable Diffusion XL</option>
883
+ <option value="dall-e">DALL-E 3</option>
884
+ <option value="midjourney">Midjourney V6</option>
885
+ </select>
886
+ </div>
887
+
888
+ <div class="control-group">
889
+ <label class="control-label">
890
+ CFG Scale: <span id="cfgValue">7.5</span>
891
+ </label>
892
+ <div class="slider-container">
893
+ <input type="range" min="1" max="20" value="7.5" step="0.5" class="slider" id="cfgScale">
894
+ <div class="slider-value" id="cfgDisplay">7.5</div>
895
+ </div>
896
+ </div>
897
+
898
+ <div class="control-group">
899
+ <label class="control-label">
900
+ Steps: <span id="stepsValue">30</span>
901
+ </label>
902
+ <div class="slider-container">
903
+ <input type="range" min="10" max="100" value="30" step="5" class="slider" id="steps">
904
+ <div class="slider-value" id="stepsDisplay">30</div>
905
+ </div>
906
+ </div>
907
+
908
+ <div class="control-group">
909
+ <label class="control-label">Seed</label>
910
+ <input type="text" class="control-input" id="seed" placeholder="Random" value="428763">
911
+ </div>
912
+
913
+ <div class="control-group">
914
+ <label class="control-label">Batch Count</label>
915
+ <select class="control-select" id="batchCount">
916
+ <option value="1">1 image</option>
917
+ <option value="2" selected>2 images</option>
918
+ <option value="4">4 images</option>
919
+ <option value="8">8 images</option>
920
+ </select>
921
  </div>
 
 
 
 
 
 
 
922
  </div>
923
+
924
+ <div class="action-buttons">
925
+ <button class="btn-secondary" id="advancedSettingsBtn">
926
+ <i class="fas fa-sliders-h"></i>
927
+ Advanced Settings
928
+ </button>
929
+ <button class="btn-generate" id="generateImageBtn">
930
+ <i class="fas fa-magic"></i>
931
+ Generate Image
932
+ </button>
933
+ </div>
934
+
935
+ <div class="results-section">
936
+ <h3 class="results-title">
937
+ Recent Generations
938
+ <button class="btn-secondary" style="font-size: 0.9rem;">
939
+ <i class="fas fa-history"></i>
940
+ View All
941
+ </button>
942
+ </h3>
943
+ <div class="results-grid" id="imageResults">
944
+ <!-- Image results will be populated by JavaScript -->
945
  </div>
 
 
 
 
 
 
 
946
  </div>
947
  </div>
948
+
949
+ <!-- Image Editor Interface -->
950
+ <div class="tool-interface" id="image-editor-interface">
951
+ <div class="tool-header">
952
+ <h2>AI Canvas Editor</h2>
953
+ <div class="credits-badge">
954
+ <i class="fas fa-info-circle"></i>
955
+ <span>3 credits per edit</span>
956
+ </div>
 
 
 
957
  </div>
958
+
959
+ <div style="text-align: center; padding: 3rem 0;">
960
+ <div style="font-size: 4rem; color: var(--gray); margin-bottom: 1rem;">
961
+ <i class="fas fa-upload"></i>
962
+ </div>
963
+ <h3 style="margin-bottom: 1rem; font-weight: 600;">Drag & Drop Image to Edit</h3>
964
+ <p style="color: var(--gray); margin-bottom: 2rem;">Or click to browse your files</p>
965
+ <button class="btn-secondary" style="padding: 1rem 2rem;">
966
+ <i class="fas fa-folder-open"></i>
967
+ Browse Files
968
+ </button>
969
  </div>
970
+
971
+ <div class="controls-grid">
972
+ <div class="control-group">
973
+ <label class="control-label">Edit Tool</label>
974
+ <select class="control-select">
975
+ <option value="inpaint">AI Inpainting</option>
976
+ <option value="outpaint">Outpainting</option>
977
+ <option value="remove">Object Removal</option>
978
+ <option value="background">Replace Background</option>
979
+ <option value="style">Style Transfer</option>
980
+ </select>
981
+ </div>
982
+
983
+ <div class="control-group">
984
+ <label class="control-label">Brush Size</label>
985
+ <div class="slider-container">
986
+ <input type="range" min="5" max="100" value="30" step="5" class="slider">
987
+ <div class="slider-value">30</div>
988
+ </div>
989
+ </div>
990
+
991
+ <div class="control-group">
992
+ <label class="control-label">Strength</label>
993
+ <div class="slider-container">
994
+ <input type="range" min="0" max="100" value="75" step="5" class="slider">
995
+ <div class="slider-value">75%</div>
996
+ </div>
997
+ </div>
998
  </div>
999
  </div>
1000
+
1001
+ <!-- Text to Video Interface -->
1002
+ <div class="tool-interface" id="text-to-video-interface">
1003
+ <div class="tool-header">
1004
+ <h2>Text to Video Generator</h2>
1005
+ <div class="credits-badge">
1006
+ <i class="fas fa-info-circle"></i>
1007
+ <span>10 credits per generation</span>
 
 
 
 
 
 
 
1008
  </div>
1009
  </div>
1010
+
1011
+ <div class="prompt-container">
1012
+ <textarea class="prompt-input" placeholder="Describe the video you want to create...">A time-lapse of a futuristic city being built, neon lights, cyberpunk aesthetic, smooth camera movement</textarea>
1013
+ </div>
1014
+
1015
+ <div class="controls-grid">
1016
+ <div class="control-group">
1017
+ <label class="control-label">Duration</label>
1018
+ <select class="control-select">
1019
+ <option value="3">3 seconds</option>
1020
+ <option value="5" selected>5 seconds</option>
1021
+ <option value="10">10 seconds</option>
1022
+ <option value="15">15 seconds</option>
1023
+ </select>
1024
  </div>
1025
+
1026
+ <div class="control-group">
1027
+ <label class="control-label">FPS</label>
1028
+ <select class="control-select">
1029
+ <option value="24">24 FPS</option>
1030
+ <option value="30" selected>30 FPS</option>
1031
+ <option value="60">60 FPS</option>
1032
+ </select>
1033
  </div>
1034
+
1035
+ <div class="control-group">
1036
+ <label class="control-label">Motion Strength</label>
1037
+ <div class="slider-container">
1038
+ <input type="range" min="0" max="100" value="65" step="5" class="slider">
1039
+ <div class="slider-value">65%</div>
1040
+ </div>
1041
  </div>
1042
+
1043
+ <div class="control-group">
1044
+ <label class="control-label">Style</label>
1045
+ <select class="control-select">
1046
+ <option value="realistic">Realistic</option>
1047
+ <option value="cinematic" selected>Cinematic</option>
1048
+ <option value="anime">Anime</option>
1049
+ <option value="artistic">Artistic</option>
1050
+ </select>
1051
  </div>
1052
  </div>
1053
+
1054
+ <div class="action-buttons">
1055
+ <button class="btn-secondary">
1056
+ <i class="fas fa-upload"></i>
1057
+ Upload Image to Animate
1058
+ </button>
1059
+ <button class="btn-generate">
1060
+ <i class="fas fa-film"></i>
1061
+ Generate Video
1062
+ </button>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <!-- AI Music Interface -->
1067
+ <div class="tool-interface" id="ai-music-interface">
1068
+ <div class="tool-header">
1069
+ <h2>AI Music Generator</h2>
1070
+ <div class="credits-badge">
1071
+ <i class="fas fa-info-circle"></i>
1072
+ <span>Coming in Phase 2</span>
1073
  </div>
1074
+ </div>
1075
+
1076
+ <div style="text-align: center; padding: 4rem 0;">
1077
+ <div style="font-size: 5rem; color: var(--accent); margin-bottom: 1rem;">
1078
+ <i class="fas fa-music"></i>
1079
  </div>
1080
+ <h3 style="margin-bottom: 1rem; font-weight: 600;">AI Music Generator</h3>
1081
+ <p style="color: var(--gray); max-width: 500px; margin: 0 auto 2rem;">
1082
+ Create original music tracks in any genre with AI composition.
1083
+ This feature is currently in development and will be available in Phase 2.
1084
+ </p>
1085
+ <button class="btn-secondary" disabled>
1086
+ <i class="fas fa-bell"></i>
1087
+ Notify Me When Available
1088
+ </button>
1089
  </div>
1090
  </div>
1091
+
1092
+ <!-- Footer -->
1093
+ <div class="footer">
1094
+ <p>© 2023 NexusAI. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
1095
+ <p>This is a frontend prototype. Backend integration with AI models, GPU inference, and payment processing would be implemented in a full production version.</p>
1096
+ </div>
1097
+ </main>
1098
+
1099
+ <!-- Progress Bar -->
1100
+ <div class="progress-bar-container" id="progressBar">
1101
+ <div class="progress-header">
1102
+ <div>
1103
+ <strong>Generating Image</strong>
1104
+ <span style="margin-left: 1rem; color: var(--gray); font-size: 0.9rem;" id="progressText">Initializing...</span>
1105
+ </div>
1106
+ <div style="color: var(--gray); font-size: 0.9rem;" id="progressPercent">0%</div>
1107
+ </div>
1108
+ <div class="progress-bar">
1109
+ <div class="progress-fill" id="progressFill"></div>
1110
  </div>
 
 
 
 
1111
  </div>
1112
+
1113
+ <!-- Built with anycoder badge -->
1114
+ <div class="anycoder-badge">
1115
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
1116
+ </div>
 
 
 
 
 
1117
  </div>
1118
 
 
1119
  <script>
1120
+ // DOM Elements
1121
+ const mobileMenuToggle = document.getElementById('mobileMenuToggle');
1122
+ const sidebar = document.getElementById('sidebar');
1123
+ const toolsGrid = document.getElementById('toolsGrid');
1124
+ const toolCards = document.querySelectorAll('.tool-card');
1125
+ const navLinks = document.querySelectorAll('.nav-link');
1126
+ const toolInterfaces = document.querySelectorAll('.tool-interface');
1127
+ const pageTitle = document.getElementById('pageTitle');
1128
+ const progressBar = document.getElementById('progressBar');
1129
+ const progressFill = document.getElementById('progressFill');
1130
+ const progressText = document.getElementById('progressText');
1131
+ const progressPercent = document.getElementById('progressPercent');
1132
+ const generateImageBtn = document.getElementById('generateImageBtn');
1133
+ const imageResults = document.getElementById('imageResults');
1134
+
1135
+ // Sliders
1136
+ const cfgScale = document.getElementById('cfgScale');
1137
+ const cfgDisplay = document.getElementById('cfgDisplay');
1138
+ const cfgValue = document.getElementById('cfgValue');
1139
+ const steps = document.getElementById('steps');
1140
+ const stepsDisplay = document.getElementById('stepsDisplay');
1141
+ const stepsValue = document.getElementById('stepsValue');
1142
+
1143
+ // Sample image data for the gallery
1144
+ const sampleImages = [
1145
+ { id: 1, prompt: "A majestic dragon flying over a futuristic city at sunset", style: "Cinematic" },
1146
+ { id: 2, prompt: "Portrait of a cyberpunk samurai with neon lights", style: "Cyberpunk" },
1147
+ { id: 3, prompt: "A serene landscape with mountains and a glowing lake", style: "Realistic" },
1148
+ { id: 4, prompt: "Anime character in a magical forest with floating crystals", style: "Anime" },
1149
+ { id: 5, prompt: "Abstract geometric patterns with vibrant colors", style: "Artistic" },
1150
+ { id: 6, prompt: "Futuristic car design concept with sleek lines", style: "Concept Art" }
1151
+ ];
1152
+
1153
+ // Initialize the page
1154
+ function initPage() {
1155
+ // Set up slider events
1156
+ cfgScale.addEventListener('input', function() {
1157
+ cfgDisplay.textContent = this.value;
1158
+ cfgValue.textContent = this.value;
1159
+ });
1160
+
1161
+ steps.addEventListener('input', function() {
1162
+ stepsDisplay.textContent = this.value;
1163
+ stepsValue.textContent = this.value;
1164
+ });
1165
+
1166
+ // Load sample images
1167
+ renderSampleImages();
1168
+
1169
+ // Set up mobile menu toggle
1170
+ mobileMenuToggle.addEventListener('click', function() {
1171
+ sidebar.classList.toggle('active');
1172
+ });
1173
+
1174
+ // Set up tool card clicks
1175
+ toolCards.forEach(card => {
1176
+ card.addEventListener('click', function() {
1177
+ const tool = this.getAttribute('data-tool');
1178
+
1179
+ // Update active card
1180
+ toolCards.forEach(c => c.classList.remove('active'));
1181
+ this.classList.add('active');
1182
+
1183
+ // Show corresponding interface
1184
+ showToolInterface(tool);
1185
+
1186
+ // Update active nav link
1187
+ navLinks.forEach(link => {
1188
+ if (link.getAttribute('data-tool') === tool) {
1189
+ link.classList.add('active');
1190
+ } else {
1191
+ link.classList.remove('active');
1192
+ }
1193
+ });
1194
+
1195
+ // Update page title
1196
+ updatePageTitle(tool);
1197
+
1198
+ // Close mobile menu on selection
1199
+ if (window.innerWidth <= 1024) {
1200
+ sidebar.classList.remove('active');
1201
+ }
1202
  });
 
 
1203
  });
1204
+
1205
+ // Set up nav link clicks
1206
+ navLinks.forEach(link => {
1207
+ link.addEventListener('click', function(e) {
1208
+ e.preventDefault();
1209
+ const tool = this.getAttribute('data-tool');
1210
+
1211
+ // Update active nav link
1212
+ navLinks.forEach(l => l.classList.remove('active'));
1213
+ this.classList.add('active');
1214
+
1215
+ // Update active tool card
1216
+ toolCards.forEach(card => {
1217
+ if (card.getAttribute('data-tool') === tool) {
1218
+ card.classList.add('active');
1219
+ } else {
1220
+ card.classList.remove('active');
1221
+ }
1222
+ });
1223
+
1224
+ // Show corresponding interface
1225
+ showToolInterface(tool);
1226
+
1227
+ // Update page title
1228
+ updatePageTitle(tool);
1229
+
1230
+ // Close mobile menu on selection
1231
+ if (window.innerWidth <= 1024) {
1232
+ sidebar.classList.remove('active');
1233
+ }
1234
  });
1235
  });
1236
+
1237
+ // Set up generate image button
1238
+ generateImageBtn.addEventListener('click', simulateGeneration);
1239
+
1240
+ // Set up style preset clicks
1241
+ const stylePresets = document.querySelectorAll('.style-preset');
1242
+ stylePresets.forEach(preset => {
1243
+ preset.addEventListener('click', function() {
1244
+ stylePresets.forEach(p => p.classList.remove('active'));
1245
+ this.classList.add('active');
1246
+ });
1247
+ });
1248
+ }
1249
+
1250
+ // Show the selected tool interface
1251
+ function showToolInterface(tool) {
1252
+ toolInterfaces.forEach(interface => {
1253
+ interface.classList.remove('active');
1254
+ });
1255
+
1256
+ const targetInterface = document.getElementById(`${tool}-interface`);
1257
+ if (targetInterface) {
1258
+ targetInterface.classList.add('active');
1259
+ }
1260
+ }
1261
+
1262
+ // Update page title based on selected tool
1263
+ function updatePageTitle(tool) {
1264
+ const titles = {
1265
+ 'dashboard': 'AI Creative Dashboard',
1266
+ 'text-to-image': 'Text to Image Generator',
1267
+ 'image-editor': 'AI Canvas Editor',
1268
+ 'text-to-video': 'Text to Video Generator',
1269
+ 'ai-music': 'AI Music Generator'
1270
+ };
1271
+
1272
+ pageTitle.textContent = titles[tool] || 'NexusAI';
1273
+ }
1274
+
1275
+ // Render sample images in the gallery
1276
+ function renderSampleImages() {
1277
+ imageResults.innerHTML = '';
1278
+
1279
+ sampleImages.forEach(image => {
1280
+ const resultCard = document.createElement('div');
1281
+ resultCard.className = 'result-card';
1282
+ resultCard.innerHTML = `
1283
+ <div class="result-image">
1284
+ <i class="fas fa-image"></i>
1285
+ </div>
1286
+ <div class="result-info">
1287
+ <div style="font-size: 0.8rem; color: var(--gray); margin-bottom: 0.25rem;">${image.style}</div>
1288
+ <div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.5rem;">
1289
+ ${image.prompt}
1290
+ </div>
1291
+ <div class="result-actions">
1292
+ <button class="result-action-btn" title="Download">
1293
+ <i class="fas fa-download"></i>
1294
+ </button>
1295
+ <button class="result-action-btn" title="Upscale">
1296
+ <i class="fas fa-expand-alt"></i>
1297
+ </button>
1298
+ <button class="result-action-btn" title=