Hugging Face's logo

Spaces:
nitubhai
/
creatorplus
Sleeping

App Files Community
nitubhai commited on
Commit
b52f846
·
verified ·
1 Parent(s): 8a265be

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -534
index.html DELETED
@@ -1,534 +0,0 @@
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>YouTube Automation Machine - AI-Powered Content Management</title>
7
- <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- </head>
10
- <body>
11
- <div class="background-animation">
12
- <div class="gradient-orb orb-1"></div>
13
- <div class="gradient-orb orb-2"></div>
14
- <div class="gradient-orb orb-3"></div>
15
- </div>
16
-
17
- <!-- Navigation -->
18
- <nav class="navbar glass-card">
19
- <div class="nav-container">
20
- <a href="/" class="nav-brand">
21
- <i class="fab fa-youtube"></i>
22
- <span>YouTube Automation</span>
23
- </a>
24
- <div class="nav-menu">
25
- <a href="/" class="nav-link active"><i class="fas fa-home"></i> Home</a>
26
- <a href="/downloader" class="nav-link"><i class="fas fa-download"></i> Downloader</a>
27
- <a href="/metadata-generator" class="nav-link"><i class="fas fa-brain"></i> Metadata</a>
28
- <a href="/uploader" class="nav-link"><i class="fas fa-upload"></i> Uploader</a>
29
- </div>
30
- <button class="mobile-menu-toggle" id="mobileMenuToggle">
31
- <i class="fas fa-bars"></i>
32
- </button>
33
- </div>
34
- </nav>
35
-
36
- <!-- Mobile Menu -->
37
- <div class="mobile-menu glass-card" id="mobileMenu">
38
- <a href="/" class="mobile-menu-link"><i class="fas fa-home"></i> Home</a>
39
- <a href="/downloader" class="mobile-menu-link"><i class="fas fa-download"></i> Downloader</a>
40
- <a href="/metadata-generator" class="mobile-menu-link"><i class="fas fa-brain"></i> Metadata Generator</a>
41
- <a href="/uploader" class="mobile-menu-link"><i class="fas fa-upload"></i> Uploader</a>
42
- </div>
43
-
44
- <div class="container">
45
- <!-- Hero Section -->
46
- <section class="hero-section fade-in">
47
- <div class="hero-content text-center">
48
- <div class="hero-badge">
49
- <i class="fas fa-rocket"></i>
50
- <span>AI-Powered Automation</span>
51
- </div>
52
- <h1 class="hero-title">Transform Instagram Reels into <span class="gradient-text">YouTube Success</span></h1>
53
- <p class="hero-description">
54
- Automate your content workflow with AI-powered metadata generation,
55
- seamless downloads, and instant YouTube uploads. Save hours of work and grow your channel faster.
56
- </p>
57
- <div class="hero-buttons">
58
- <a href="/uploader" class="btn btn-primary btn-large">
59
- <i class="fas fa-play"></i> Start Uploading Now
60
- </a>
61
- <a href="#features" class="btn btn-secondary btn-large">
62
- <i class="fas fa-info-circle"></i> Learn More
63
- </a>
64
- </div>
65
- <div class="hero-stats">
66
- <div class="stat-item">
67
- <i class="fas fa-download"></i>
68
- <strong>Fast Downloads</strong>
69
- <span>HD Quality with Audio</span>
70
- </div>
71
- <div class="stat-item">
72
- <i class="fas fa-brain"></i>
73
- <strong>AI Metadata</strong>
74
- <span>Powered by Gemini</span>
75
- </div>
76
- <div class="stat-item">
77
- <i class="fas fa-upload"></i>
78
- <strong>Auto Upload</strong>
79
- <span>Direct to YouTube</span>
80
- </div>
81
- </div>
82
- </div>
83
- </section>
84
-
85
- <!-- Features Section -->
86
- <section id="features" class="features-section-detailed fade-in-delay">
87
- <div class="section-header">
88
- <h2>Powerful Features for Content Creators</h2>
89
- <p>Everything you need to automate your content workflow</p>
90
- </div>
91
-
92
- <div class="features-grid">
93
- <div class="feature-card-detailed glass-card">
94
- <div class="feature-icon-large">
95
- <i class="fas fa-download"></i>
96
- </div>
97
- <h3>Instagram Reel Downloader</h3>
98
- <p class="feature-description">Download Instagram Reels in high quality with audio preservation. Fast, reliable, and secure.</p>
99
-
100
- <div class="feature-benefits">
101
- <div class="benefit-item">
102
- <i class="fas fa-check-circle"></i>
103
- <span>HD quality video downloads</span>
104
- </div>
105
- <div class="benefit-item">
106
- <i class="fas fa-check-circle"></i>
107
- <span>Audio preservation included</span>
108
- </div>
109
- <div class="benefit-item">
110
- <i class="fas fa-check-circle"></i>
111
- <span>Fast download speeds</span>
112
- </div>
113
- <div class="benefit-item">
114
- <i class="fas fa-check-circle"></i>
115
- <span>Batch download support</span>
116
- </div>
117
- </div>
118
-
119
- <a href="/downloader" class="btn btn-secondary" style="width: 100%; margin-top: 20px;">
120
- <i class="fas fa-arrow-right"></i> Try Downloader
121
- </a>
122
- </div>
123
-
124
- <div class="feature-card-detailed glass-card">
125
- <div class="feature-icon-large">
126
- <i class="fas fa-brain"></i>
127
- </div>
128
- <h3>AI Metadata Generator</h3>
129
- <p class="feature-description">Generate SEO-optimized titles, descriptions, and tags using advanced AI powered by Google Gemini.</p>
130
-
131
- <div class="feature-benefits">
132
- <div class="benefit-item">
133
- <i class="fas fa-check-circle"></i>
134
- <span>AI-powered content analysis</span>
135
- </div>
136
- <div class="benefit-item">
137
- <i class="fas fa-check-circle"></i>
138
- <span>SEO-optimized titles & descriptions</span>
139
- </div>
140
- <div class="benefit-item">
141
- <i class="fas fa-check-circle"></i>
142
- <span>Relevant hashtags & keywords</span>
143
- </div>
144
- <div class="benefit-item">
145
- <i class="fas fa-check-circle"></i>
146
- <span>Customizable for your audience</span>
147
- </div>
148
- </div>
149
-
150
- <a href="/metadata-generator" class="btn btn-preview" style="width: 100%; margin-top: 20px;">
151
- <i class="fas fa-arrow-right"></i> Generate Metadata
152
- </a>
153
- </div>
154
-
155
- <div class="feature-card-detailed glass-card">
156
- <div class="feature-icon-large">
157
- <i class="fas fa-upload"></i>
158
- </div>
159
- <h3>YouTube Auto Uploader</h3>
160
- <p class="feature-description">Upload videos directly to YouTube with AI-generated metadata. Fully automated workflow from download to publish.</p>
161
-
162
- <div class="feature-benefits">
163
- <div class="benefit-item">
164
- <i class="fas fa-check-circle"></i>
165
- <span>Direct YouTube API integration</span>
166
- </div>
167
- <div class="benefit-item">
168
- <i class="fas fa-check-circle"></i>
169
- <span>Automatic metadata application</span>
170
- </div>
171
- <div class="benefit-item">
172
- <i class="fas fa-check-circle"></i>
173
- <span>Custom privacy settings</span>
174
- </div>
175
- <div class="benefit-item">
176
- <i class="fas fa-check-circle"></i>
177
- <span>Real-time upload tracking</span>
178
- </div>
179
- </div>
180
-
181
- <a href="/uploader" class="btn btn-primary" style="width: 100%; margin-top: 20px;">
182
- <i class="fas fa-arrow-right"></i> Start Uploading
183
- </a>
184
- </div>
185
- </div>
186
- </section>
187
-
188
- <!-- How It Works -->
189
- <section class="how-it-works-detailed glass-card fade-in-delay-1">
190
- <div class="section-header">
191
- <h2>How It Works</h2>
192
- <p>Simple 3-step process to automate your content</p>
193
- </div>
194
-
195
- <div class="steps-detailed">
196
- <div class="step-detailed">
197
- <div class="step-number-large">1</div>
198
- <div class="step-content">
199
- <i class="fas fa-link step-icon-large"></i>
200
- <h3>Paste Instagram Reel URL</h3>
201
- <p>Copy the link to any Instagram Reel you want to upload. Our system supports all public Instagram Reels.</p>
202
- <div class="step-tips">
203
- <strong>Pro Tips:</strong>
204
- <ul>
205
- <li>Works with any public Instagram Reel</li>
206
- <li>No Instagram login required</li>
207
- <li>Supports both mobile and desktop links</li>
208
- </ul>
209
- </div>
210
- </div>
211
- </div>
212
-
213
- <div class="step-divider">
214
- <i class="fas fa-arrow-down"></i>
215
- </div>
216
-
217
- <div class="step-detailed">
218
- <div class="step-number-large">2</div>
219
- <div class="step-content">
220
- <i class="fas fa-magic step-icon-large"></i>
221
- <h3>AI Analyzes & Generates</h3>
222
- <p>Our AI powered by Google Gemini analyzes the video content and generates SEO-optimized metadata including title, description, tags, and hashtags.</p>
223
- <div class="step-tips">
224
- <strong>AI Features:</strong>
225
- <ul>
226
- <li>Content understanding & analysis</li>
227
- <li>SEO keyword optimization</li>
228
- <li>Trend-aware hashtag generation</li>
229
- <li>Audience-targeted descriptions</li>
230
- </ul>
231
- </div>
232
- </div>
233
- </div>
234
-
235
- <div class="step-divider">
236
- <i class="fas fa-arrow-down"></i>
237
- </div>
238
-
239
- <div class="step-detailed">
240
- <div class="step-number-large">3</div>
241
- <div class="step-content">
242
- <i class="fas fa-cloud-upload-alt step-icon-large"></i>
243
- <h3>Auto Upload to YouTube</h3>
244
- <p>The video is automatically downloaded and uploaded to your YouTube channel with all AI-generated metadata applied.</p>
245
- <div class="step-tips">
246
- <strong>Upload Benefits:</strong>
247
- <ul>
248
- <li>Instant publishing to YouTube</li>
249
- <li>Real-time progress tracking</li>
250
- <li>Custom privacy settings</li>
251
- <li>Automatic video optimization</li>
252
- </ul>
253
- </div>
254
- </div>
255
- </div>
256
- </div>
257
- </section>
258
-
259
- <!-- Benefits Section -->
260
- <section class="benefits-section fade-in-delay-2">
261
- <div class="section-header">
262
- <h2>Why Choose YouTube Automation Machine?</h2>
263
- <p>Built for content creators who value their time</p>
264
- </div>
265
-
266
- <div class="benefits-grid">
267
- <div class="benefit-card glass-card">
268
- <i class="fas fa-clock benefit-icon"></i>
269
- <h3>Save Time</h3>
270
- <p>Automate hours of manual work. Download, generate metadata, and upload in minutes instead of hours.</p>
271
- </div>
272
-
273
- <div class="benefit-card glass-card">
274
- <i class="fas fa-chart-line benefit-icon"></i>
275
- <h3>Boost SEO</h3>
276
- <p>AI-generated metadata is optimized for search engines, helping your videos rank higher and get more views.</p>
277
- </div>
278
-
279
- <div class="benefit-card glass-card">
280
- <i class="fas fa-robot benefit-icon"></i>
281
- <h3>AI-Powered</h3>
282
- <p>Leverage Google Gemini AI for intelligent content analysis and metadata generation.</p>
283
- </div>
284
-
285
- <div class="benefit-card glass-card">
286
- <i class="fas fa-shield-alt benefit-icon"></i>
287
- <h3>Secure & Private</h3>
288
- <p>Your credentials and content are protected. We use official YouTube API with OAuth 2.0 security.</p>
289
- </div>
290
-
291
- <div class="benefit-card glass-card">
292
- <i class="fas fa-bolt benefit-icon"></i>
293
- <h3>Lightning Fast</h3>
294
- <p>High-speed downloads and uploads. Process multiple videos efficiently with our optimized workflow.</p>
295
- </div>
296
-
297
- <div class="benefit-card glass-card">
298
- <i class="fas fa-mobile-alt benefit-icon"></i>
299
- <h3>Mobile Friendly</h3>
300
- <p>Works perfectly on all devices. Manage your content from anywhere, anytime.</p>
301
- </div>
302
- </div>
303
- </section>
304
-
305
- <!-- Use Cases Section -->
306
- <section class="use-cases-section glass-card fade-in-delay-3">
307
- <div class="section-header">
308
- <h2>Perfect For</h2>
309
- <p>Content creators across different niches</p>
310
- </div>
311
-
312
- <div class="use-cases-grid">
313
- <div class="use-case-item">
314
- <i class="fas fa-user-tie"></i>
315
- <h4>Social Media Managers</h4>
316
- <p>Repurpose Instagram content for YouTube channels efficiently</p>
317
- </div>
318
-
319
- <div class="use-case-item">
320
- <i class="fas fa-video"></i>
321
- <h4>Content Creators</h4>
322
- <p>Expand your reach by posting on multiple platforms seamlessly</p>
323
- </div>
324
-
325
- <div class="use-case-item">
326
- <i class="fas fa-bullhorn"></i>
327
- <h4>Digital Marketers</h4>
328
- <p>Automate video marketing campaigns across platforms</p>
329
- </div>
330
-
331
- <div class="use-case-item">
332
- <i class="fas fa-store"></i>
333
- <h4>E-commerce Brands</h4>
334
- <p>Share product videos on YouTube for better reach</p>
335
- </div>
336
-
337
- <div class="use-case-item">
338
- <i class="fas fa-graduation-cap"></i>
339
- <h4>Educators</h4>
340
- <p>Share educational content across multiple platforms</p>
341
- </div>
342
-
343
- <div class="use-case-item">
344
- <i class="fas fa-music"></i>
345
- <h4>Musicians & Artists</h4>
346
- <p>Promote your work on YouTube with optimized metadata</p>
347
- </div>
348
- </div>
349
- </section>
350
-
351
- <!-- FAQ Section -->
352
- <section class="faq-section fade-in-delay-3">
353
- <div class="section-header">
354
- <h2>Frequently Asked Questions</h2>
355
- <p>Everything you need to know</p>
356
- </div>
357
-
358
- <div class="faq-container">
359
- <div class="faq-item glass-card">
360
- <div class="faq-question">
361
- <i class="fas fa-question-circle"></i>
362
- <h3>Do I need to login to Instagram?</h3>
363
- <i class="fas fa-chevron-down faq-toggle"></i>
364
- </div>
365
- <div class="faq-answer">
366
- <p>No direct Instagram login is required. However, you need to provide your Instagram session ID in the .env configuration file for the downloader to work. This is a one-time setup.</p>
367
- </div>
368
- </div>
369
-
370
- <div class="faq-item glass-card">
371
- <div class="faq-question">
372
- <i class="fas fa-question-circle"></i>
373
- <h3>Is my YouTube account safe?</h3>
374
- <i class="fas fa-chevron-down faq-toggle"></i>
375
- </div>
376
- <div class="faq-answer">
377
- <p>Yes, absolutely! We use YouTube's official API with OAuth 2.0 authentication. Your credentials are never stored on our servers. You can revoke access anytime from your Google account settings.</p>
378
- </div>
379
- </div>
380
-
381
- <div class="faq-item glass-card">
382
- <div class="faq-question">
383
- <i class="fas fa-question-circle"></i>
384
- <h3>What video quality is supported?</h3>
385
- <i class="fas fa-chevron-down faq-toggle"></i>
386
- </div>
387
- <div class="faq-answer">
388
- <p>We download videos in the highest quality available from Instagram, including HD quality with original audio. The quality depends on the original upload quality on Instagram.</p>
389
- </div>
390
- </div>
391
-
392
- <div class="faq-item glass-card">
393
- <div class="faq-question">
394
- <i class="fas fa-question-circle"></i>
395
- <h3>Can I edit the AI-generated metadata?</h3>
396
- <i class="fas fa-chevron-down faq-toggle"></i>
397
- </div>
398
- <div class="faq-answer">
399
- <p>Currently, the metadata is automatically generated and applied. We're working on adding an editor feature in future updates where you can review and modify metadata before upload.</p>
400
- </div>
401
- </div>
402
-
403
- <div class="faq-item glass-card">
404
- <div class="faq-question">
405
- <i class="fas fa-question-circle"></i>
406
- <h3>How accurate is the AI metadata generation?</h3>
407
- <i class="fas fa-chevron-down faq-toggle"></i>
408
- </div>
409
- <div class="faq-answer">
410
- <p>Our AI uses Google's Gemini model which provides highly accurate and contextually relevant metadata. It analyzes video content, understands context, and generates SEO-optimized titles, descriptions, and tags.</p>
411
- </div>
412
- </div>
413
-
414
- <div class="faq-item glass-card">
415
- <div class="faq-question">
416
- <i class="fas fa-question-circle"></i>
417
- <h3>Are there any usage limits?</h3>
418
- <i class="fas fa-chevron-down faq-toggle"></i>
419
- </div>
420
- <div class="faq-answer">
421
- <p>Usage limits depend on YouTube API quotas and your Instagram session validity. For heavy usage, we recommend upgrading to YouTube API quota extensions through Google Cloud Console.</p>
422
- </div>
423
- </div>
424
- </div>
425
- </section>
426
-
427
- <!-- CTA Section -->
428
- <section class="cta-section glass-card fade-in-delay-3 text-center">
429
- <i class="fas fa-rocket cta-icon"></i>
430
- <h2>Ready to Automate Your Content?</h2>
431
- <p>Join thousands of content creators who are saving time and growing faster</p>
432
- <div class="cta-buttons">
433
- <a href="/uploader" class="btn btn-primary btn-large">
434
- <i class="fas fa-play"></i> Get Started Free
435
- </a>
436
- <a href="/downloader" class="btn btn-secondary btn-large">
437
- <i class="fas fa-download"></i> Try Downloader
438
- </a>
439
- </div>
440
- <p class="cta-note">No credit card required • Start in minutes</p>
441
- </section>
442
- </div>
443
-
444
- <!-- Footer -->
445
- <footer class="footer-detailed fade-in-delay-3">
446
- <div class="footer-content">
447
- <div class="footer-brand">
448
- <i class="fab fa-youtube"></i>
449
- <h3>YouTube Automation Machine</h3>
450
- <p>AI-powered content automation for modern creators</p>
451
- </div>
452
-
453
- <div class="footer-links">
454
- <div class="footer-column">
455
- <h4>Product</h4>
456
- <a href="/downloader">Downloader</a>
457
- <a href="/metadata-generator">Metadata Generator</a>
458
- <a href="/uploader">Uploader</a>
459
- </div>
460
-
461
- <div class="footer-column">
462
- <h4>Resources</h4>
463
- <a href="#features">Features</a>
464
- <a href="#how-it-works">How It Works</a>
465
- <a href="#faq">FAQ</a>
466
- </div>
467
-
468
- <div class="footer-column">
469
- <h4>Technology</h4>
470
- <a href="https://cloud.google.com/vertex-ai/generative-ai/docs/model-reference/gemini" target="_blank">Google Gemini AI</a>
471
- <a href="https://developers.google.com/youtube/v3" target="_blank">YouTube API</a>
472
- <a href="https://www.instagram.com/developer" target="_blank">Instagram API</a>
473
- </div>
474
- </div>
475
- </div>
476
-
477
- <div class="footer-bottom">
478
- <p>Made with <i class="fas fa-heart"></i> by YouTube Automation Team</p>
479
- <p class="footer-tech">Powered by Google Gemini AI • YouTube Data API v3 • Flask</p>
480
- </div>
481
- </footer>
482
-
483
- <script>
484
- // Mobile menu toggle
485
- const mobileMenuToggle = document.getElementById('mobileMenuToggle');
486
- const mobileMenu = document.getElementById('mobileMenu');
487
-
488
- if (mobileMenuToggle) {
489
- mobileMenuToggle.addEventListener('click', () => {
490
- mobileMenu.classList.toggle('active');
491
- });
492
- }
493
-
494
- // Close mobile menu when clicking outside
495
- document.addEventListener('click', (e) => {
496
- if (mobileMenu &&
497
- mobileMenu.classList.contains('active') &&
498
- !mobileMenu.contains(e.target) &&
499
- !mobileMenuToggle.contains(e.target)) {
500
- mobileMenu.classList.remove('active');
501
- }
502
- });
503
-
504
- // FAQ Accordion
505
- document.querySelectorAll('.faq-question').forEach(question => {
506
- question.addEventListener('click', () => {
507
- const faqItem = question.parentElement;
508
- const isActive = faqItem.classList.contains('active');
509
-
510
- // Close all FAQ items
511
- document.querySelectorAll('.faq-item').forEach(item => {
512
- item.classList.remove('active');
513
- });
514
-
515
- // Open clicked item if it wasn't active
516
- if (!isActive) {
517
- faqItem.classList.add('active');
518
- }
519
- });
520
- });
521
-
522
- // Smooth scroll for anchor links
523
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
524
- anchor.addEventListener('click', function (e) {
525
- e.preventDefault();
526
- const target = document.querySelector(this.getAttribute('href'));
527
- if (target) {
528
- target.scrollIntoView({ behavior: 'smooth', block: 'start' });
529
- }
530
- });
531
- });
532
- </script>
533
- </body>
534
- </html>