Hugging Face's logo

Spaces:
AnySue
/
cooltool
Running

App Files Community
AnySue commited on
Commit
9572c54
·
verified ·
1 Parent(s): 2ba5606

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +628 -19
index.html CHANGED
@@ -1,19 +1,628 @@
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>AI Art Tools Enthusiast Hub | AnySue</title>
7
+ <meta name="description" content="Free AI art tools including FLUX image generator, image background remover, and more. No need to sign up or buy credits.">
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;800&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --primary: #6366f1;
14
+ --primary-dark: #4f46e5;
15
+ --secondary: #ec4899;
16
+ --accent: #06b6d4;
17
+ --bg: #0f0f0f;
18
+ --bg-surface: #1a1a1a;
19
+ --bg-surface-2: #2a2a2a;
20
+ --text: #ffffff;
21
+ --text-muted: #a1a1aa;
22
+ --border: #333;
23
+ --gradient: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
24
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
25
+ --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ body {
35
+ font-family: 'Inter', sans-serif;
36
+ background: var(--bg);
37
+ color: var(--text);
38
+ line-height: 1.6;
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ .container {
43
+ max-width: 1200px;
44
+ margin: 0 auto;
45
+ padding: 0 20px;
46
+ }
47
+
48
+ /* Header */
49
+ header {
50
+ position: fixed;
51
+ top: 0;
52
+ width: 100%;
53
+ background: rgba(15, 15, 15, 0.9);
54
+ backdrop-filter: blur(10px);
55
+ border-bottom: 1px solid var(--border);
56
+ z-index: 1000;
57
+ transition: all 0.3s ease;
58
+ }
59
+
60
+ nav {
61
+ display: flex;
62
+ justify-content: space-between;
63
+ align-items: center;
64
+ padding: 1rem 0;
65
+ }
66
+
67
+ .logo {
68
+ display: flex;
69
+ align-items: center;
70
+ gap: 10px;
71
+ font-family: 'Orbitron', monospace;
72
+ font-size: 1.5rem;
73
+ font-weight: 700;
74
+ background: var(--gradient);
75
+ -webkit-background-clip: text;
76
+ -webkit-text-fill-color: transparent;
77
+ background-clip: text;
78
+ }
79
+
80
+ .logo img {
81
+ height: 40px;
82
+ filter: brightness(0) invert(1);
83
+ }
84
+
85
+ .nav-links {
86
+ display: flex;
87
+ gap: 2rem;
88
+ list-style: none;
89
+ }
90
+
91
+ .nav-links a {
92
+ color: var(--text-muted);
93
+ text-decoration: none;
94
+ font-weight: 500;
95
+ transition: color 0.3s ease;
96
+ position: relative;
97
+ }
98
+
99
+ .nav-links a:hover {
100
+ color: var(--primary);
101
+ }
102
+
103
+ .nav-links a::after {
104
+ content: '';
105
+ position: absolute;
106
+ bottom: -5px;
107
+ left: 0;
108
+ width: 0;
109
+ height: 2px;
110
+ background: var(--gradient);
111
+ transition: width 0.3s ease;
112
+ }
113
+
114
+ .nav-links a:hover::after {
115
+ width: 100%;
116
+ }
117
+
118
+ /* Hero Section */
119
+ .hero {
120
+ min-height: 100vh;
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ text-align: center;
125
+ background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%),
126
+ linear-gradient(to bottom, var(--bg), var(--bg-surface));
127
+ padding-top: 80px;
128
+ }
129
+
130
+ .hero-content h1 {
131
+ font-family: 'Orbitron', monospace;
132
+ font-size: clamp(2.5rem, 5vw, 4rem);
133
+ font-weight: 700;
134
+ margin-bottom: 1rem;
135
+ background: var(--gradient);
136
+ -webkit-background-clip: text;
137
+ -webkit-background-fill-color: transparent;
138
+ background-clip: text;
139
+ -webkit-text-fill-color: transparent;
140
+ }
141
+
142
+ .hero-content p {
143
+ font-size: 1.25rem;
144
+ color: var(--text-muted);
145
+ margin-bottom: 2rem;
146
+ max-width: 600px;
147
+ margin-left: auto;
148
+ margin-right: auto;
149
+ }
150
+
151
+ .cta-buttons {
152
+ display: flex;
153
+ gap: 1rem;
154
+ justify-content: center;
155
+ flex-wrap: wrap;
156
+ }
157
+
158
+ .btn {
159
+ display: inline-block;
160
+ padding: 12px 32px;
161
+ border-radius: 50px;
162
+ text-decoration: none;
163
+ font-weight: 600;
164
+ transition: all 0.3s ease;
165
+ cursor: pointer;
166
+ border: none;
167
+ font-size: 1rem;
168
+ }
169
+
170
+ .btn-primary {
171
+ background: var(--gradient);
172
+ color: white;
173
+ box-shadow: var(--shadow-glow);
174
+ }
175
+
176
+ .btn-primary:hover {
177
+ transform: translateY(-2px);
178
+ box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
179
+ }
180
+
181
+ .btn-secondary {
182
+ background: transparent;
183
+ color: var(--primary);
184
+ border: 2px solid var(--primary);
185
+ }
186
+
187
+ .btn-secondary:hover {
188
+ background: var(--primary);
189
+ color: white;
190
+ transform: translateY(-2px);
191
+ }
192
+
193
+ /* Features Grid */
194
+ .features {
195
+ padding: 100px 0;
196
+ background: var(--bg-surface);
197
+ }
198
+
199
+ .section-title {
200
+ text-align: center;
201
+ margin-bottom: 3rem;
202
+ }
203
+
204
+ .section-title h2 {
205
+ font-family: 'Orbitron', monospace;
206
+ font-size: 2.5rem;
207
+ margin-bottom: 1rem;
208
+ background: var(--gradient);
209
+ -webkit-background-clip: text;
210
+ -webkit-background-fill-color: transparent;
211
+ background-clip: text;
212
+ -webkit-text-fill-color: transparent;
213
+ }
214
+
215
+ .features-grid {
216
+ display: grid;
217
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
218
+ gap: 2rem;
219
+ margin-top: 3rem;
220
+ }
221
+
222
+ .feature-card {
223
+ background: var(--bg-surface-2);
224
+ border: 1px solid var(--border);
225
+ border-radius: 20px;
226
+ padding: 2rem;
227
+ text-align: center;
228
+ transition: all 0.3s ease;
229
+ position: relative;
230
+ overflow: hidden;
231
+ }
232
+
233
+ .feature-card::before {
234
+ content: '';
235
+ position: absolute;
236
+ top: 0;
237
+ left: 0;
238
+ right: 0;
239
+ height: 3px;
240
+ background: var(--gradient);
241
+ transform: scaleX(0);
242
+ transition: transform 0.3s ease;
243
+ }
244
+
245
+ .feature-card:hover {
246
+ transform: translateY(-5px);
247
+ box-shadow: var(--shadow);
248
+ }
249
+
250
+ .feature-card:hover::before {
251
+ transform: scaleX(1);
252
+ }
253
+
254
+ .feature-icon {
255
+ width: 80px;
256
+ height: 80px;
257
+ margin: 0 auto 1rem;
258
+ background: var(--gradient);
259
+ border-radius: 50%;
260
+ display: flex;
261
+ align-items: center;
262
+ justify-content: center;
263
+ font-size: 2rem;
264
+ }
265
+
266
+ .feature-card h3 {
267
+ font-size: 1.5rem;
268
+ margin-bottom: 1rem;
269
+ color: var(--text);
270
+ }
271
+
272
+ .feature-card p {
273
+ color: var(--text-muted);
274
+ line-height: 1.8;
275
+ }
276
+
277
+ /* Tools Section */
278
+ .tools {
279
+ padding: 100px 0;
280
+ background: var(--bg);
281
+ }
282
+
283
+ .tools-grid {
284
+ display: grid;
285
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
286
+ gap: 2rem;
287
+ margin-top: 3rem;
288
+ }
289
+
290
+ .tool-card {
291
+ background: var(--bg-surface);
292
+ border: 1px solid var(--border);
293
+ border-radius: 15px;
294
+ padding: 2rem;
295
+ transition: all 0.3s ease;
296
+ position: relative;
297
+ overflow: hidden;
298
+ }
299
+
300
+ .tool-card:hover {
301
+ transform: scale(1.02);
302
+ box-shadow: var(--shadow);
303
+ }
304
+
305
+ .tool-image {
306
+ width: 100%;
307
+ height: 200px;
308
+ object-fit: cover;
309
+ border-radius: 10px;
310
+ margin-bottom: 1rem;
311
+ }
312
+
313
+ .tool-card h3 {
314
+ font-size: 1.5rem;
315
+ margin-bottom: 0.5rem;
316
+ color: var(--primary);
317
+ }
318
+
319
+ .tool-card p {
320
+ color: var(--text-muted);
321
+ margin-bottom: 1rem;
322
+ }
323
+
324
+ .tool-meta {
325
+ display: flex;
326
+ justify-content: space-between;
327
+ align-items: center;
328
+ margin-top: 1rem;
329
+ padding-top: 1rem;
330
+ border-top: 1px solid var(--border);
331
+ }
332
+
333
+ .price {
334
+ font-size: 1.25rem;
335
+ color: var(--secondary);
336
+ font-weight: 600;
337
+ }
338
+
339
+ /* Footer */
340
+ footer {
341
+ background: var(--bg-surface);
342
+ border-top: 1px solid var(--border);
343
+ padding: 50px 0 20px;
344
+ text-align: center;
345
+ }
346
+
347
+ .footer-content {
348
+ display: grid;
349
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
350
+ gap: 2rem;
351
+ margin-bottom: 2rem;
352
+ }
353
+
354
+ .footer-section h3 {
355
+ color: var(--primary);
356
+ margin-bottom: 1rem;
357
+ }
358
+
359
+ .footer-section a {
360
+ color: var(--text-muted);
361
+ text-decoration: none;
362
+ display: block;
363
+ margin-bottom: 0.5rem;
364
+ transition: color 0.3s ease;
365
+ }
366
+
367
+ .footer-section a:hover {
368
+ color: var(--primary);
369
+ }
370
+
371
+ .footer-bottom {
372
+ padding-top: 2rem;
373
+ border-top: 1px solid var(--border);
374
+ color: var(--text-muted);
375
+ }
376
+
377
+ /* Responsive */
378
+ @media (max-width: 768px) {
379
+ .nav-links {
380
+ display: none;
381
+ }
382
+
383
+ .hero-content h1 {
384
+ font-size: 2.5rem;
385
+ }
386
+
387
+ .features-grid,
388
+ .tools-grid {
389
+ grid-template-columns: 1fr;
390
+ }
391
+
392
+ .cta-buttons {
393
+ flex-direction: column;
394
+ align-items: center;
395
+ }
396
+
397
+ .btn {
398
+ width: 100%;
399
+ max-width: 300px;
400
+ }
401
+ }
402
+
403
+ /* Animations */
404
+ @keyframes fadeIn {
405
+ from {
406
+ opacity: 0;
407
+ transform: translateY(20px);
408
+ }
409
+ to {
410
+ opacity: 1;
411
+ transform: translateY(0);
412
+ }
413
+ }
414
+
415
+ .animate {
416
+ animation: fadeIn 0.6s ease forwards;
417
+ }
418
+
419
+ /* Mobile Menu */
420
+ .mobile-menu-toggle {
421
+ display: none;
422
+ flex-direction: column;
423
+ cursor: pointer;
424
+ }
425
+
426
+ .mobile-menu-toggle span {
427
+ width: 25px;
428
+ height: 3px;
429
+ background: var(--text);
430
+ margin: 3px 0;
431
+ transition: 0.3s;
432
+ }
433
+
434
+ @media (max-width: 768px) {
435
+ .mobile-menu-toggle {
436
+ display: flex;
437
+ }
438
+ }
439
+ </style>
440
+ </head>
441
+ <body>
442
+ <header>
443
+ <nav class="container">
444
+ <a href="/" class="logo">
445
+ <img src="https://assets.nicepagecdn.com/9ba6e1f3/6272947/images/ASLOGONOTHER.png" alt="AnySue Logo">
446
+ AnySue
447
+ </a>
448
+ <ul class="nav-links">
449
+ <li><a href="#tools">Tools</a></li>
450
+ <li><a href="#features">Features</a></li>
451
+ <li><a href="#pricing">Pricing</a></li>
452
+ <li><a href="#about">About</a></li>
453
+ <li><a href="#contact">Contact</a></li>
454
+ </ul>
455
+ <div class="mobile-menu-toggle">
456
+ <span></span>
457
+ <span></span>
458
+ <span></span>
459
+ </div>
460
+ </nav>
461
+ </header>
462
+
463
+ <section class="hero">
464
+ <div class="container">
465
+ <div class="hero-content animate">
466
+ <h1>AI Art Tools Enthusiast Hub</h1>
467
+ <p>Discover cutting-edge AI art tools including FLUX image generator, background remover, and more. No signup required, no credits needed. Just create.</p>
468
+ <div class="cta-buttons">
469
+ <a href="#tools" class="btn btn-primary">Start Creating</a>
470
+ <a href="#features" class="btn btn-secondary">Learn More</a>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </section>
475
+
476
+ <section class="features" id="features">
477
+ <div class="container">
478
+ <div class="section-title animate">
479
+ <h2>Why Choose AnySue</h2>
480
+ <p>Experience the future of AI-powered creativity with our comprehensive toolkit</p>
481
+ </div>
482
+ <div class="features-grid">
483
+ <div class="feature-card animate">
484
+ <div class="feature-icon">🎨</div>
485
+ <h3>FLUX Image Generator</h3>
486
+ <p>Generate stunning, high-quality images using our advanced FLUX AI model. Create anything you can imagine.</p>
487
+ </div>
488
+ <div class="feature-card animate">
489
+ <div class="feature-icon">✂️</div>
490
+ <h3>Background Remover</h3>
491
+ <p>Instantly remove backgrounds from any image with precision. Perfect for creating professional content.</p>
492
+ </div>
493
+ <div class="feature-card animate">
494
+ <div class="feature-icon">⚡</div>
495
+ <h3>No Signup Required</h3>
496
+ <p>Get started immediately without creating an account or providing personal information. Pure creativity.</p>
497
+ </div>
498
+ <div class="feature-card animate">
499
+ <div class="feature-icon">💳</div>
500
+ <h3>Free Credits</h3>
501
+ <p>Enjoy unlimited use without worrying about credits. All tools are completely free to use.</p>
502
+ </div>
503
+ <div class="feature-card animate">
504
+ <div class="feature-icon">🚀</div>
505
+ <h3>Fast Processing</h3>
506
+ <p>Get your results in seconds with our optimized AI models and high-performance infrastructure.</p>
507
+ </div>
508
+ <div class="feature-card animate">
509
+ <div class="feature-icon">🎯</div>
510
+ <h3>Prompt Library</h3>
511
+ <p>Access a curated collection of prompts to spark your creativity and get better results.</p>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </section>
516
+
517
+ <section class="tools" id="tools">
518
+ <div class="container">
519
+ <div class="section-title animate">
520
+ <h2>Popular AI Tools</h2>
521
+ <p>Explore our most used AI-powered creative tools</p>
522
+ </div>
523
+ <div class="tools-grid">
524
+ <div class="tool-card animate">
525
+ <img src="https://assets.nicepagecdn.com/9ba6e1f3/6272947/images/astroblue.jpg" alt="FLUX Image Generator" class="tool-image">
526
+ <h3>FLUX Image Generator</h3>
527
+ <p>Create breathtaking images with our state-of-the-art FLUX AI model. Perfect for artists, designers, and content creators.</p>
528
+ <div class="tool-meta">
529
+ <span class="price">Free</span>
530
+ <a href="#" class="btn btn-secondary">Try Now</a>
531
+ </div>
532
+ </div>
533
+ <div class="tool-card animate">
534
+ <img src="https://assets.nicepagecdn.com/9ba6e1f3/6272947/images/artguy.png" alt="Background Remover" class="tool-image">
535
+ <h3>Background Remover</h3>
536
+ <p>Remove backgrounds from images instantly with AI precision. Ideal for e-commerce, portraits, and graphic design.</p>
537
+ <div class="tool-meta">
538
+ <span class="price">Free</span>
539
+ <a href="#" class="btn btn-secondary">Try Now</a>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </section>
545
+
546
+ <footer>
547
+ <div class="container">
548
+ <div class="footer-content">
549
+ <div class="footer-section">
550
+ <h3>Quick Links</h3>
551
+ <a href="#tools">AI Tools</a>
552
+ <a href="#features">Features</a>
553
+ <a href="#pricing">Pricing</a>
554
+ </div>
555
+ <div class="footer-section">
556
+ <h3>Tools</h3>
557
+ <a href="#">FLUX Generator</a>
558
+ <a href="#">Background Remover</a>
559
+ <a href="#">Prompt Library</a>
560
+ </div>
561
+ <div class="footer-section">
562
+ <h3>Support</h3>
563
+ <a href="#">Help Center</a>
564
+ <a href="#">Contact Us</a>
565
+ <a href="#">Community</a>
566
+ </div>
567
+ </div>
568
+ <div class="footer-bottom">
569
+ <p>&copy; 2024 AnySue. All rights reserved. Free AI art tools for everyone.</p>
570
+ </div>
571
+ </div>
572
+ </footer>
573
+
574
+ <script>
575
+ // Smooth scrolling
576
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
577
+ anchor.addEventListener('click', function (e) {
578
+ e.preventDefault();
579
+ const target = document.querySelector(this.getAttribute('href'));
580
+ if (target) {
581
+ target.scrollIntoView({
582
+ behavior: 'smooth',
583
+ block: 'start'
584
+ });
585
+ }
586
+ });
587
+ });
588
+
589
+ // Animation on scroll
590
+ const observerOptions = {
591
+ threshold: 0.1,
592
+ rootMargin: '0px 0px -50px 0px'
593
+ };
594
+
595
+ const observer = new IntersectionObserver((entries) => {
596
+ entries.forEach(entry => {
597
+ if (entry.isIntersecting) {
598
+ entry.target.classList.add('animate');
599
+ }
600
+ });
601
+ }, observerOptions);
602
+
603
+ document.querySelectorAll('.feature-card, .tool-card, .section-title').forEach(el => {
604
+ observer.observe(el);
605
+ });
606
+
607
+ // Header scroll effect
608
+ window.addEventListener('scroll', () => {
609
+ const header = document.querySelector('header');
610
+ if (window.scrollY > 100) {
611
+ header.style.background = 'rgba(15, 15, 15, 0.95)';
612
+ } else {
613
+ header.style.background = 'rgba(15, 15, 15, 0.9)';
614
+ }
615
+ });
616
+
617
+ // Mobile menu toggle
618
+ const mobileToggle = document.querySelector('.mobile-menu-toggle');
619
+ const navLinks = document.querySelector('.nav-links');
620
+
621
+ if (mobileToggle) {
622
+ mobileToggle.addEventListener('click', () => {
623
+ navLinks.classList.toggle('active');
624
+ });
625
+ }
626
+ </script>
627
+ </body>
628
+ </html>