Hugging Face's logo

Spaces:
nruto
/
anycoder-21f137cc
Running

App Files Community
nruto commited on
Commit
012dbcd
·
verified ·
1 Parent(s): 827d8df

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +318 -19
index.html CHANGED
@@ -1,19 +1,318 @@
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>Our AI - Create Your Own Overlay & Frame for Your Channel</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .hero-gradient {
14
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ transition: transform 0.3s ease;
19
+ }
20
+ .testimonial-card {
21
+ background: rgba(255, 255, 255, 0.1);
22
+ backdrop-filter: blur(10px);
23
+ }
24
+ .pricing-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .pricing-card:hover {
28
+ transform: scale(1.05);
29
+ }
30
+ .feature-icon {
31
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-900 text-white">
36
+ <!-- Navigation -->
37
+ <nav class="bg-gray-800 px-6 py-4">
38
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
39
+ <div class="flex items-center space-x-2">
40
+ <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
41
+ <i class="fas fa-robot text-white text-sm"></i>
42
+ </div>
43
+ <span class="text-xl font-bold">Our AI</span>
44
+ </div>
45
+ <div class="hidden md:flex items-center space-x-8">
46
+ <a href="#" class="text-gray-300 hover:text-white">Home</a>
47
+ <a href="#" class="text-gray-300 hover:text-white">Overlays</a>
48
+ <a href="#" class="text-gray-300 hover:text-white">Frames</a>
49
+ <a href="#" class="text-gray-300 hover:text-white">Chatbots</a>
50
+ <a href="#" class="text-gray-300 hover:text-white">Blog</a>
51
+ </div>
52
+ <button class="bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-2 rounded-full text-white font-medium hover:opacity-90">
53
+ Get Started
54
+ </button>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Hero Section -->
59
+ <section class="hero-gradient min-h-screen flex items-center justify-center px-6 relative overflow-hidden">
60
+ <div class="absolute inset-0 bg-black bg-opacity-50"></div>
61
+ <div class="relative z-10 text-center max-w-4xl mx-auto">
62
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
63
+ Create Your Own Overlay & Frame for Your Channel
64
+ </h1>
65
+ <p class="text-xl text-gray-200 mb-8 max-w-2xl mx-auto">
66
+ Unlock the power of AI to create stunning overlays and frames for your YouTube channel
67
+ </p>
68
+ <div class="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-md mx-auto">
69
+ <input type="email" placeholder="Enter your email" class="flex-1 px-4 py-3 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-500">
70
+ <button class="bg-gradient-to-r from-purple-500 to-pink-500 px-8 py-3 rounded-full text-white font-medium hover:opacity-90 whitespace-nowrap">
71
+ Get Started
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </section>
76
+
77
+ <!-- Features Section -->
78
+ <section class="py-20 px-6 bg-gray-800">
79
+ <div class="max-w-7xl mx-auto">
80
+ <div class="text-center mb-16">
81
+ <h2 class="text-4xl font-bold mb-4">Our Features</h2>
82
+ <p class="text-gray-400 text-lg">Discover what makes our AI platform unique</p>
83
+ </div>
84
+ <div class="grid md:grid-cols-3 gap-8">
85
+ <div class="bg-gray-700 rounded-xl p-8 card-hover">
86
+ <div class="feature-icon w-16 h-16 rounded-lg flex items-center justify-center mb-6">
87
+ <i class="fas fa-layer-group text-white text-2xl"></i>
88
+ </div>
89
+ <h3 class="text-2xl font-bold mb-4">Custom Overlays</h3>
90
+ <p class="text-gray-300">Create professional overlays for your streams and videos</p>
91
+ </div>
92
+ <div class="bg-gray-700 rounded-xl p-8 card-hover">
93
+ <div class="feature-icon w-16 h-16 rounded-lg flex items-center justify-center mb-6">
94
+ <i class="fas fa-border-all text-white text-2xl"></i>
95
+ </div>
96
+ <h3 class="text-2xl font-bold mb-4">Custom Frames</h3>
97
+ <p class="text-gray-300">Design unique frames to enhance your video presentation</p>
98
+ </div>
99
+ <div class="bg-gray-700 rounded-xl p-8 card-hover">
100
+ <div class="feature-icon w-16 h-16 rounded-lg flex items-center justify-center mb-6">
101
+ <i class="fas fa-comments text-white text-2xl"></i>
102
+ </div>
103
+ <h3 class="text-2xl font-bold mb-4">AI Chatbots</h3>
104
+ <p class="text-gray-300">Engage your audience with intelligent chatbot interactions</p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </section>
109
+
110
+ <!-- Pricing Section -->
111
+ <section class="py-20 px-6 bg-gray-900">
112
+ <div class="max-w-7xl mx-auto">
113
+ <div class="text-center mb-16">
114
+ <h2 class="text-4xl font-bold mb-4">Simple Pricing</h2>
115
+ <p class="text-gray-400 text-lg">Choose the perfect plan for your needs</p>
116
+ </div>
117
+ <div class="grid md:grid-cols-3 gap-8">
118
+ <div class="bg-gray-800 rounded-xl p-8 pricing-card">
119
+ <h3 class="text-2xl font-bold mb-4">Basic</h3>
120
+ <div class="text-4xl font-bold mb-2">$9<span class="text-lg text-gray-400">/month</span></div>
121
+ <p class="text-gray-400 mb-6">Perfect for beginners</p>
122
+ <ul class="space-y-3 mb-8">
123
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Basic overlays</li>
124
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Standard frames</li>
125
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Basic chatbot</li>
126
+ </ul>
127
+ <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 py-3 rounded-full text-white font-medium hover:opacity-90">
128
+ Get Started
129
+ </button>
130
+ </div>
131
+ <div class="bg-gray-700 rounded-xl p-8 pricing-card border-2 border-purple-500">
132
+ <h3 class="text-2xl font-bold mb-4">Pro</h3>
133
+ <div class="text-4xl font-bold mb-2">$29<span class="text-lg text-gray-400">/month</span></div>
134
+ <p class="text-gray-400 mb-6">For growing creators</p>
135
+ <ul class="space-y-3 mb-8">
136
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Advanced overlays</li>
137
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Custom frames</li>
138
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Smart chatbot</li>
139
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Analytics</li>
140
+ </ul>
141
+ <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 py-3 rounded-full text-white font-medium hover:opacity-90">
142
+ Get Started
143
+ </button>
144
+ </div>
145
+ <div class="bg-gray-800 rounded-xl p-8 pricing-card">
146
+ <h3 class="text-2xl font-bold mb-4">Enterprise</h3>
147
+ <div class="text-4xl font-bold mb-2">$99<span class="text-lg text-gray-400">/month</span></div>
148
+ <p class="text-gray-400 mb-6">For professional creators</p>
149
+ <ul class="space-y-3 mb-8">
150
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Premium overlays</li>
151
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Custom frames</li>
152
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>AI chatbot</li>
153
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Advanced analytics</li>
154
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Priority support</li>
155
+ </ul>
156
+ <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 py-3 rounded-full text-white font-medium hover:opacity-90">
157
+ Get Started
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </section>
163
+
164
+ <!-- Testimonials Section -->
165
+ <section class="py-20 px-6 bg-gray-800">
166
+ <div class="max-w-7xl mx-auto">
167
+ <div class="text-center mb-16">
168
+ <h2 class="text-4xl font-bold mb-4">What Our Users Say</h2>
169
+ <p class="text-gray-400 text-lg">Hear from our satisfied customers</p>
170
+ </div>
171
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
172
+ <div class="testimonial-card rounded-xl p-6 border border-gray-700">
173
+ <div class="flex items-center mb-4">
174
+ <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-4">
175
+ <i class="fas fa-user text-white"></i>
176
+ </div>
177
+ <div>
178
+ <h4 class="font-bold">Sarah Johnson</h4>
179
+ <p class="text-gray-400 text-sm">YouTuber</p>
180
+ </div>
181
+ </div>
182
+ <p class="text-gray-300">"This platform completely transformed my YouTube channel. The overlays are stunning and easy to create!"</p>
183
+ </div>
184
+ <div class="testimonial-card rounded-xl p-6 border border-gray-700">
185
+ <div class="flex items-center mb-4">
186
+ <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-4">
187
+ <i class="fas fa-user text-white"></i>
188
+ </div>
189
+ <div>
190
+ <h4 class="font-bold">Michael Chen</h4>
191
+ <p class="text-gray-400 text-sm">Streamer</p>
192
+ </div>
193
+ </div>
194
+ <p class="text-gray-300">"The AI chatbot has been a game changer for engaging with my audience during live streams."</p>
195
+ </div>
196
+ <div class="testimonial-card rounded-xl p-6 border border-gray-700">
197
+ <div class="flex items-center mb-4">
198
+ <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-4">
199
+ <i class="fas fa-user text-white"></i>
200
+ </div>
201
+ <div>
202
+ <h4 class="font-bold">Emily Rodriguez</h4>
203
+ <p class="text-gray-400 text-sm">Content Creator</p>
204
+ </div>
205
+ </div>
206
+ <p class="text-gray-300">"I love how easy it is to create professional-looking frames for my videos. Highly recommend!"</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </section>
211
+
212
+ <!-- Blog Section -->
213
+ <section class="py-20 px-6 bg-gray-900">
214
+ <div class="max-w-7xl mx-auto">
215
+ <div class="text-center mb-16">
216
+ <h2 class="text-4xl font-bold mb-4">Latest from Our Blog</h2>
217
+ <p class="text-gray-400 text-lg">Stay updated with our latest insights and tips</p>
218
+ </div>
219
+ <div class="grid md:grid-cols-3 gap-8">
220
+ <article class="bg-gray-800 rounded-xl overflow-hidden card-hover">
221
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500"></div>
222
+ <div class="p-6">
223
+ <h3 class="text-xl font-bold mb-3">How to Create Engaging YouTube Overlays</h3>
224
+ <p class="text-gray-400 mb-4">Learn the secrets to creating overlays that keep your audience engaged and coming back for more.</p>
225
+ <a href="#" class="text-purple-400 hover:text-purple-300 font-medium">Read More →</a>
226
+ </div>
227
+ </article>
228
+ <article class="bg-gray-800 rounded-xl overflow-hidden card-hover">
229
+ <div class="h-48 bg-gradient-to-r from-blue-500 to-purple-500"></div>
230
+ <div class="p-6">
231
+ <h3 class="text-xl font-bold mb-3">The Power of AI in Content Creation</h3>
232
+ <p class="text-gray-400 mb-4">Discover how artificial intelligence is revolutionizing the way we create and consume content.</p>
233
+ <a href="#" class="text-purple-400 hover:text-purple-300 font-medium">Read More →</a>
234
+ </div>
235
+ </article>
236
+ <article class="bg-gray-800 rounded-xl overflow-hidden card-hover">
237
+ <div class="h-48 bg-gradient-to-r from-green-500 to-blue-500"></div>
238
+ <div class="p-6">
239
+ <h3 class="text-xl font-bold mb-3">Maximizing Your YouTube Channel Growth</h3>
240
+ <p class="text-gray-400 mb-4">Proven strategies to grow your YouTube channel and increase your subscriber base.</p>
241
+ <a href="#" class="text-purple-400 hover:text-purple-300 font-medium">Read More →</a>
242
+ </div>
243
+ </article>
244
+ </div>
245
+ </div>
246
+ </section>
247
+
248
+ <!-- Footer -->
249
+ <footer class="bg-gray-800 py-16 px-6">
250
+ <div class="max-w-7xl mx-auto">
251
+ <div class="grid md:grid-cols-4 gap-8 mb-12">
252
+ <div>
253
+ <div class="flex items-center space-x-2 mb-6">
254
+ <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
255
+ <i class="fas fa-robot text-white text-sm"></i>
256
+ </div>
257
+ <span class="text-xl font-bold">Our AI</span>
258
+ </div>
259
+ <p class="text-gray-400">Create stunning overlays and frames for your YouTube channel with the power of AI.</p>
260
+ </div>
261
+ <div>
262
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
263
+ <ul class="space-y-2">
264
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
265
+ <li><a href="#" class="text-gray-400 hover:text-white">Overlays</a></li>
266
+ <li><a href="#" class="text-gray-400 hover:text-white">Frames</a></li>
267
+ <li><a href="#" class="text-gray-400 hover:text-white">Chatbots</a></li>
268
+ </ul>
269
+ </div>
270
+ <div>
271
+ <h4 class="text-lg font-bold mb-4">Resources</h4>
272
+ <ul class="space-y-2">
273
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
274
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
275
+ <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
276
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
277
+ </ul>
278
+ </div>
279
+ <div>
280
+ <h4 class="text-lg font-bold mb-4">Connect With Us</h4>
281
+ <div class="flex space-x-4">
282
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600">
283
+ <i class="fab fa-twitter text-gray-400"></i>
284
+ </a>
285
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600">
286
+ <i class="fab fa-facebook text-gray-400"></i>
287
+ </a>
288
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600">
289
+ <i class="fab fa-instagram text-gray-400"></i>
290
+ </a>
291
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600">
292
+ <i class="fab fa-youtube text-gray-400"></i>
293
+ </a>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
298
+ <p class="text-gray-400 text-sm">© 2023 Our AI. All rights reserved.</p>
299
+ <div class="flex space-x-6 mt-4 md:mt-0">
300
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
301
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
302
+ </div>
303
+ </div>
304
+ <div class="mt-4 text-center">
305
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="text-gray-400 hover:text-white text-sm">Built with anycoder</a>
306
+ </div>
307
+ </div>
308
+ </footer>
309
+
310
+ <script>
311
+ // Simple mobile menu toggle (if needed)
312
+ document.addEventListener('DOMContentLoaded', function() {
313
+ // Add any interactive functionality here
314
+ console.log('Our AI website loaded successfully');
315
+ });
316
+ </script>
317
+ </body>
318
+ </html>