Hugging Face's logo

Spaces:
nitubhai
/
creatorplus
Sleeping

App Files Community
nitubhai commited on
Commit
2c184d8
·
verified ·
1 Parent(s): 03c6c36

Upload 7 files

Browse files
Files changed (7) hide show
  1. 404.html +30 -0
  2. 500.html +33 -0
  3. downloader.html +363 -0
  4. index.html +534 -0
  5. metadata_generator.html +412 -0
  6. privacy_policy.html +74 -0
  7. uploader.html +748 -0
404.html ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>404 - Page Not Found</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
+ <div class="container">
18
+ <section class="result-section error glass-card" style="margin-top: 100px; display: block;">
19
+ <div class="result-icon">🔍</div>
20
+ <h3>404 - Page Not Found</h3>
21
+ <p>The page you're looking for doesn't exist or has been moved.</p>
22
+ <div style="margin-top: 30px;">
23
+ <a href="/" class="btn btn-primary">
24
+ <i class="fas fa-home"></i> Go Home
25
+ </a>
26
+ </div>
27
+ </section>
28
+ </div>
29
+ </body>
30
+ </html>
500.html ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>500 - Server Error</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
+ <div class="container">
18
+ <section class="result-section error glass-card" style="margin-top: 100px; display: block;">
19
+ <div class="result-icon">⚠️</div>
20
+ <h3>500 - Internal Server Error</h3>
21
+ <p>Something went wrong on our end. Please try again later.</p>
22
+ <div style="margin-top: 30px; display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
23
+ <a href="/" class="btn btn-primary">
24
+ <i class="fas fa-home"></i> Go Home
25
+ </a>
26
+ <button onclick="window.location.reload()" class="btn btn-secondary">
27
+ <i class="fas fa-redo"></i> Retry
28
+ </button>
29
+ </div>
30
+ </section>
31
+ </div>
32
+ </body>
33
+ </html>
downloader.html ADDED
@@ -0,0 +1,363 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Instagram Downloader - YouTube Automation</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"><i class="fas fa-home"></i> Home</a>
26
+ <a href="/downloader" class="nav-link active"><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="page-hero fade-in">
47
+ <div class="hero-badge">
48
+ <i class="fas fa-download"></i>
49
+ <span>High Quality Downloads</span>
50
+ </div>
51
+ <h1>Instagram Reel Downloader</h1>
52
+ <p class="hero-subtitle">Download Instagram Reels in HD quality with original audio preserved. Fast, reliable, and easy to use.</p>
53
+ </section>
54
+
55
+ <!-- Downloader Section -->
56
+ <section class="upload-section glass-card fade-in-delay">
57
+ <div class="section-header">
58
+ <i class="fas fa-download"></i>
59
+ <h2>Download Your Reel</h2>
60
+ <p>Paste the Instagram Reel URL below and click download</p>
61
+ </div>
62
+
63
+ <div class="input-group">
64
+ <i class="fab fa-instagram"></i>
65
+ <input type="text" id="downloadUrl" class="glass-input"
66
+ placeholder="Paste Instagram Reel URL here... (e.g., https://www.instagram.com/reel/...)">
67
+ </div>
68
+
69
+ <div class="button-group">
70
+ <button id="downloadBtn" class="btn btn-primary">
71
+ <i class="fas fa-download"></i> Download Reel
72
+ </button>
73
+ </div>
74
+
75
+ <!-- Progress Section -->
76
+ <div id="progressSection" class="progress-section" style="display: none;">
77
+ <div class="progress-header">
78
+ <h3 id="progressTitle">Downloading...</h3>
79
+ <span id="progressPercent" class="progress-percent">0%</span>
80
+ </div>
81
+ <div class="progress-bar">
82
+ <div id="progressFill" class="progress-fill" style="width: 0%"></div>
83
+ </div>
84
+ <p id="progressMessage" class="progress-message">Starting download...</p>
85
+ </div>
86
+
87
+ <!-- Success Result -->
88
+ <div id="successResult" class="result-section success glass-card" style="display: none;">
89
+ <div class="result-icon">✅</div>
90
+ <h3>Download Complete!</h3>
91
+ <p>Your video has been downloaded successfully</p>
92
+ <button id="downloadAgainBtn" class="btn btn-retry">
93
+ <i class="fas fa-redo"></i> Download Another
94
+ </button>
95
+ </div>
96
+
97
+ <!-- Error Result -->
98
+ <div id="errorResult" class="result-section error glass-card" style="display: none;">
99
+ <div class="result-icon">❌</div>
100
+ <h3>Download Failed</h3>
101
+ <p id="errorMessage">An error occurred</p>
102
+ <button id="retryBtn" class="btn btn-retry">
103
+ <i class="fas fa-redo"></i> Try Again
104
+ </button>
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Features Section -->
109
+ <section class="features-section fade-in-delay-1">
110
+ <div class="section-header">
111
+ <h2>Why Use Our Downloader?</h2>
112
+ <p>Powerful features designed for content creators</p>
113
+ </div>
114
+
115
+ <div class="features-grid-small">
116
+ <div class="feature-card glass-card">
117
+ <i class="fas fa-hd-video feature-icon-small"></i>
118
+ <h3>HD Quality</h3>
119
+ <p>Download videos in the highest quality available, preserving every detail of the original content.</p>
120
+ </div>
121
+
122
+ <div class="feature-card glass-card">
123
+ <i class="fas fa-volume-up feature-icon-small"></i>
124
+ <h3>Audio Preservation</h3>
125
+ <p>Original audio is preserved perfectly, including music, voice-overs, and sound effects.</p>
126
+ </div>
127
+
128
+ <div class="feature-card glass-card">
129
+ <i class="fas fa-bolt feature-icon-small"></i>
130
+ <h3>Lightning Fast</h3>
131
+ <p>High-speed download servers ensure your videos are downloaded quickly and efficiently.</p>
132
+ </div>
133
+
134
+ <div class="feature-card glass-card">
135
+ <i class="fas fa-shield-alt feature-icon-small"></i>
136
+ <h3>Secure & Private</h3>
137
+ <p>Your downloads are secure and private. We don't store any of your downloaded content.</p>
138
+ </div>
139
+
140
+ <div class="feature-card glass-card">
141
+ <i class="fas fa-mobile-alt feature-icon-small"></i>
142
+ <h3>Mobile Friendly</h3>
143
+ <p>Works perfectly on all devices - desktop, tablet, and mobile phones.</p>
144
+ </div>
145
+
146
+ <div class="feature-card glass-card">
147
+ <i class="fas fa-infinity feature-icon-small"></i>
148
+ <h3>Unlimited Downloads</h3>
149
+ <p>No limits on how many reels you can download. Use it as much as you need.</p>
150
+ </div>
151
+ </div>
152
+ </section>
153
+
154
+ <!-- How to Use Section -->
155
+ <section class="how-to-use glass-card fade-in-delay-2">
156
+ <div class="section-header">
157
+ <h2>How to Download Instagram Reels</h2>
158
+ <p>Simple 3-step process</p>
159
+ </div>
160
+
161
+ <div class="steps-list">
162
+ <div class="step-card">
163
+ <div class="step-number-badge">1</div>
164
+ <div class="step-info">
165
+ <h3>Find the Reel on Instagram</h3>
166
+ <p>Open Instagram and navigate to the Reel you want to download. Click the three dots menu and select "Copy Link".</p>
167
+ <div class="step-tip">
168
+ <i class="fas fa-lightbulb"></i>
169
+ <span>Tip: Works with both public and accessible Reels</span>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="step-card">
175
+ <div class="step-number-badge">2</div>
176
+ <div class="step-info">
177
+ <h3>Paste the URL</h3>
178
+ <p>Paste the copied link into the input field above. Make sure the URL is complete and valid.</p>
179
+ <div class="step-tip">
180
+ <i class="fas fa-lightbulb"></i>
181
+ <span>Tip: URL should start with https://www.instagram.com/reel/</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="step-card">
187
+ <div class="step-number-badge">3</div>
188
+ <div class="step-info">
189
+ <h3>Click Download</h3>
190
+ <p>Click the "Download Reel" button and wait a few seconds. Your video will be downloaded automatically.</p>
191
+ <div class="step-tip">
192
+ <i class="fas fa-lightbulb"></i>
193
+ <span>Tip: Check your downloads folder for the video file</span>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </section>
199
+
200
+ <!-- Benefits Section -->
201
+ <section class="benefits-section fade-in-delay-3">
202
+ <div class="section-header">
203
+ <h2>Perfect For</h2>
204
+ <p>Who can benefit from our downloader</p>
205
+ </div>
206
+
207
+ <div class="use-cases-grid">
208
+ <div class="use-case-item">
209
+ <i class="fas fa-video"></i>
210
+ <h4>Content Creators</h4>
211
+ <p>Save inspiration and create compilation videos</p>
212
+ </div>
213
+
214
+ <div class="use-case-item">
215
+ <i class="fas fa-bullhorn"></i>
216
+ <h4>Marketers</h4>
217
+ <p>Download content for analysis and research</p>
218
+ </div>
219
+
220
+ <div class="use-case-item">
221
+ <i class="fas fa-graduation-cap"></i>
222
+ <h4>Educators</h4>
223
+ <p>Save educational content for offline viewing</p>
224
+ </div>
225
+
226
+ <div class="use-case-item">
227
+ <i class="fas fa-users"></i>
228
+ <h4>Social Media Managers</h4>
229
+ <p>Backup and archive important content</p>
230
+ </div>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- FAQ Section -->
235
+ <section class="faq-section fade-in-delay-3">
236
+ <div class="section-header">
237
+ <h2>Frequently Asked Questions</h2>
238
+ <p>Common questions about the downloader</p>
239
+ </div>
240
+
241
+ <div class="faq-container">
242
+ <div class="faq-item glass-card">
243
+ <div class="faq-question">
244
+ <i class="fas fa-question-circle"></i>
245
+ <h3>Is it free to use?</h3>
246
+ <i class="fas fa-chevron-down faq-toggle"></i>
247
+ </div>
248
+ <div class="faq-answer">
249
+ <p>Yes! Our Instagram Reel downloader is completely free to use with unlimited downloads.</p>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="faq-item glass-card">
254
+ <div class="faq-question">
255
+ <i class="fas fa-question-circle"></i>
256
+ <h3>What quality will my video be?</h3>
257
+ <i class="fas fa-chevron-down faq-toggle"></i>
258
+ </div>
259
+ <div class="faq-answer">
260
+ <p>We download videos in the highest quality available from Instagram, typically HD quality with original audio preserved.</p>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="faq-item glass-card">
265
+ <div class="faq-question">
266
+ <i class="fas fa-question-circle"></i>
267
+ <h3>Do I need to log in to Instagram?</h3>
268
+ <i class="fas fa-chevron-down faq-toggle"></i>
269
+ </div>
270
+ <div class="faq-answer">
271
+ <p>You need to configure your Instagram session ID in the .env file for the downloader to work. This is a one-time setup and doesn't require sharing your password.</p>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="faq-item glass-card">
276
+ <div class="faq-question">
277
+ <i class="fas fa-question-circle"></i>
278
+ <h3>Can I download private Reels?</h3>
279
+ <i class="fas fa-chevron-down faq-toggle"></i>
280
+ </div>
281
+ <div class="faq-answer">
282
+ <p>You can download Reels that are accessible to your Instagram account. Make sure you have permission to view the content.</p>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="faq-item glass-card">
287
+ <div class="faq-question">
288
+ <i class="fas fa-question-circle"></i>
289
+ <h3>Where are downloaded videos saved?</h3>
290
+ <i class="fas fa-chevron-down faq-toggle"></i>
291
+ </div>
292
+ <div class="faq-answer">
293
+ <p>Videos are saved to your default downloads folder. The browser will typically show a download notification at the bottom of the screen.</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </section>
298
+
299
+ <!-- CTA Section -->
300
+ <section class="cta-section glass-card fade-in-delay-3 text-center">
301
+ <i class="fas fa-rocket cta-icon"></i>
302
+ <h2>Need More Features?</h2>
303
+ <p>Try our other tools for a complete automation experience</p>
304
+ <div class="cta-buttons">
305
+ <a href="/metadata-generator" class="btn btn-preview btn-large">
306
+ <i class="fas fa-brain"></i> Try Metadata Generator
307
+ </a>
308
+ <a href="/uploader" class="btn btn-primary btn-large">
309
+ <i class="fas fa-upload"></i> Upload to YouTube
310
+ </a>
311
+ </div>
312
+ </section>
313
+ </div>
314
+
315
+ <!-- Loading Overlay -->
316
+ <div id="loadingOverlay" class="loading-overlay" style="display: none;">
317
+ <div class="loading-spinner"></div>
318
+ <p>Processing...</p>
319
+ </div>
320
+
321
+ <!-- Toast Notification -->
322
+ <div id="toast" class="toast"></div>
323
+
324
+ <script>
325
+ // Mobile menu toggle
326
+ const mobileMenuToggle = document.getElementById('mobileMenuToggle');
327
+ const mobileMenu = document.getElementById('mobileMenu');
328
+
329
+ if (mobileMenuToggle) {
330
+ mobileMenuToggle.addEventListener('click', () => {
331
+ mobileMenu.classList.toggle('active');
332
+ });
333
+ }
334
+
335
+ // Close mobile menu when clicking outside
336
+ document.addEventListener('click', (e) => {
337
+ if (mobileMenu &&
338
+ mobileMenu.classList.contains('active') &&
339
+ !mobileMenu.contains(e.target) &&
340
+ !mobileMenuToggle.contains(e.target)) {
341
+ mobileMenu.classList.remove('active');
342
+ }
343
+ });
344
+
345
+ // FAQ Accordion
346
+ document.querySelectorAll('.faq-question').forEach(question => {
347
+ question.addEventListener('click', () => {
348
+ const faqItem = question.parentElement;
349
+ const isActive = faqItem.classList.contains('active');
350
+
351
+ document.querySelectorAll('.faq-item').forEach(item => {
352
+ item.classList.remove('active');
353
+ });
354
+
355
+ if (!isActive) {
356
+ faqItem.classList.add('active');
357
+ }
358
+ });
359
+ });
360
+ </script>
361
+ <script src="{{ url_for('static', filename='js/downloader.js') }}"></script>
362
+ </body>
363
+ </html>
index.html ADDED
@@ -0,0 +1,534 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>
metadata_generator.html ADDED
@@ -0,0 +1,412 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Metadata Generator - YouTube Automation</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"><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 active"><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="page-hero fade-in">
47
+ <div class="hero-badge">
48
+ <i class="fas fa-brain"></i>
49
+ <span>AI-Powered Intelligence</span>
50
+ </div>
51
+ <h1>AI Metadata Generator</h1>
52
+ <p class="hero-subtitle">Generate SEO-optimized titles, descriptions, and tags using advanced AI. Powered by Google Gemini for intelligent content analysis.</p>
53
+ </section>
54
+
55
+ <!-- Metadata Generator Section -->
56
+ <section class="upload-section glass-card fade-in-delay">
57
+ <div class="section-header">
58
+ <i class="fas fa-magic"></i>
59
+ <h2>Generate Metadata</h2>
60
+ <p>Our AI will analyze your video and create perfect metadata</p>
61
+ </div>
62
+
63
+ <div class="input-group">
64
+ <i class="fab fa-instagram"></i>
65
+ <input type="text" id="metadataUrl" class="glass-input"
66
+ placeholder="Paste Instagram Reel URL here...">
67
+ </div>
68
+
69
+ <div class="button-group">
70
+ <button id="generateBtn" class="btn btn-preview">
71
+ <i class="fas fa-magic"></i> Generate Metadata
72
+ </button>
73
+ </div>
74
+
75
+ <!-- Metadata Preview -->
76
+ <div id="metadataPreview" class="metadata-preview glass-card" style="display: none;">
77
+ <h3><i class="fas fa-sparkles"></i> AI Generated Metadata</h3>
78
+ <div class="metadata-content">
79
+ <div class="metadata-item">
80
+ <label><i class="fas fa-heading"></i> Title</label>
81
+ <div id="previewTitle" class="metadata-value"></div>
82
+ </div>
83
+ <div class="metadata-item">
84
+ <label><i class="fas fa-align-left"></i> Description</label>
85
+ <div id="previewDescription" class="metadata-value scrollable"></div>
86
+ </div>
87
+ <div class="metadata-item">
88
+ <label><i class="fas fa-tags"></i> Tags</label>
89
+ <div id="previewTags" class="metadata-tags"></div>
90
+ </div>
91
+ <div class="metadata-item">
92
+ <label><i class="fas fa-hashtag"></i> Hashtags</label>
93
+ <div id="previewHashtags" class="metadata-tags"></div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- AI Features Section -->
100
+ <section class="features-section fade-in-delay-1">
101
+ <div class="section-header">
102
+ <h2>AI-Powered Features</h2>
103
+ <p>Advanced capabilities powered by Google Gemini</p>
104
+ </div>
105
+
106
+ <div class="features-grid-small">
107
+ <div class="feature-card glass-card">
108
+ <i class="fas fa-eye feature-icon-small"></i>
109
+ <h3>Video Analysis</h3>
110
+ <p>AI analyzes video content, scenes, objects, and context to understand what your video is about.</p>
111
+ </div>
112
+
113
+ <div class="feature-card glass-card">
114
+ <i class="fas fa-search feature-icon-small"></i>
115
+ <h3>SEO Optimization</h3>
116
+ <p>Generate titles and descriptions optimized for search engines to help your content rank higher.</p>
117
+ </div>
118
+
119
+ <div class="feature-card glass-card">
120
+ <i class="fas fa-hashtag feature-icon-small"></i>
121
+ <h3>Smart Hashtags</h3>
122
+ <p>AI suggests trending and relevant hashtags to maximize your content's reach and engagement.</p>
123
+ </div>
124
+
125
+ <div class="feature-card glass-card">
126
+ <i class="fas fa-bullseye feature-icon-small"></i>
127
+ <h3>Targeted Keywords</h3>
128
+ <p>Generate keywords that match your target audience's search intent and interests.</p>
129
+ </div>
130
+
131
+ <div class="feature-card glass-card">
132
+ <i class="fas fa-language feature-icon-small"></i>
133
+ <h3>Natural Language</h3>
134
+ <p>Descriptions written in natural, engaging language that connects with viewers.</p>
135
+ </div>
136
+
137
+ <div class="feature-card glass-card">
138
+ <i class="fas fa-chart-line feature-icon-small"></i>
139
+ <h3>Trend Awareness</h3>
140
+ <p>AI stays updated with current trends to suggest relevant and timely metadata.</p>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- How It Works Section -->
146
+ <section class="how-to-use glass-card fade-in-delay-2">
147
+ <div class="section-header">
148
+ <h2>How AI Metadata Generation Works</h2>
149
+ <p>Behind the scenes intelligence</p>
150
+ </div>
151
+
152
+ <div class="steps-list">
153
+ <div class="step-card">
154
+ <div class="step-number-badge">1</div>
155
+ <div class="step-info">
156
+ <h3>Video Download & Analysis</h3>
157
+ <p>The system downloads the reel and AI analyzes frames, audio, text overlays, and overall content to understand the video's theme and message.</p>
158
+ <div class="step-tip">
159
+ <i class="fas fa-robot"></i>
160
+ <span>Powered by Google Gemini Vision AI</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <div class="step-card">
166
+ <div class="step-number-badge">2</div>
167
+ <div class="step-info">
168
+ <h3>Context Understanding</h3>
169
+ <p>AI identifies key elements, emotions, actions, and themes. It understands the story, purpose, and target audience of your content.</p>
170
+ <div class="step-tip">
171
+ <i class="fas fa-brain"></i>
172
+ <span>Deep learning models process video semantics</span>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="step-card">
178
+ <div class="step-number-badge">3</div>
179
+ <div class="step-info">
180
+ <h3>Metadata Generation</h3>
181
+ <p>Based on analysis, AI creates engaging titles, detailed descriptions, relevant tags, and trending hashtags optimized for maximum visibility.</p>
182
+ <div class="step-tip">
183
+ <i class="fas fa-magic"></i>
184
+ <span>SEO-optimized for better discoverability</span>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Benefits Section -->
192
+ <section class="benefits-section fade-in-delay-2">
193
+ <div class="section-header">
194
+ <h2>Why Use AI for Metadata?</h2>
195
+ <p>Advantages over manual metadata creation</p>
196
+ </div>
197
+
198
+ <div class="benefits-grid">
199
+ <div class="benefit-card glass-card">
200
+ <i class="fas fa-clock benefit-icon"></i>
201
+ <h3>Save Hours</h3>
202
+ <p>No more brainstorming titles or writing descriptions. AI does it instantly.</p>
203
+ </div>
204
+
205
+ <div class="benefit-card glass-card">
206
+ <i class="fas fa-trophy benefit-icon"></i>
207
+ <h3>Better Results</h3>
208
+ <p>AI-generated metadata often performs better than manual creation.</p>
209
+ </div>
210
+
211
+ <div class="benefit-card glass-card">
212
+ <i class="fas fa-chart-line benefit-icon"></i>
213
+ <h3>SEO Optimized</h3>
214
+ <p>Built-in SEO best practices for improved search rankings.</p>
215
+ </div>
216
+
217
+ <div class="benefit-card glass-card">
218
+ <i class="fas fa-brain benefit-icon"></i>
219
+ <h3>Intelligent Analysis</h3>
220
+ <p>Deep understanding of video content beyond what humans can process quickly.</p>
221
+ </div>
222
+
223
+ <div class="benefit-card glass-card">
224
+ <i class="fas fa-globe benefit-icon"></i>
225
+ <h3>Trend Aware</h3>
226
+ <p>Stays current with trending topics and popular keywords.</p>
227
+ </div>
228
+
229
+ <div class="benefit-card glass-card">
230
+ <i class="fas fa-sync benefit-icon"></i>
231
+ <h3>Consistent Quality</h3>
232
+ <p>Every video gets professional-quality metadata, every time.</p>
233
+ </div>
234
+ </div>
235
+ </section>
236
+
237
+ <!-- Use Cases Section -->
238
+ <section class="use-cases-section glass-card fade-in-delay-3">
239
+ <div class="section-header">
240
+ <h2>Perfect For</h2>
241
+ <p>Who benefits from AI metadata generation</p>
242
+ </div>
243
+
244
+ <div class="use-cases-grid">
245
+ <div class="use-case-item">
246
+ <i class="fas fa-video"></i>
247
+ <h4>YouTubers</h4>
248
+ <p>Optimize every upload for maximum views and engagement</p>
249
+ </div>
250
+
251
+ <div class="use-case-item">
252
+ <i class="fas fa-bullhorn"></i>
253
+ <h4>Digital Marketers</h4>
254
+ <p>Create SEO-friendly content at scale</p>
255
+ </div>
256
+
257
+ <div class="use-case-item">
258
+ <i class="fas fa-store"></i>
259
+ <h4>E-commerce Brands</h4>
260
+ <p>Generate product video descriptions automatically</p>
261
+ </div>
262
+
263
+ <div class="use-case-item">
264
+ <i class="fas fa-users"></i>
265
+ <h4>Social Media Teams</h4>
266
+ <p>Maintain consistency across multiple content pieces</p>
267
+ </div>
268
+
269
+ <div class="use-case-item">
270
+ <i class="fas fa-graduation-cap"></i>
271
+ <h4>Content Educators</h4>
272
+ <p>Make educational content more discoverable</p>
273
+ </div>
274
+
275
+ <div class="use-case-item">
276
+ <i class="fas fa-film"></i>
277
+ <h4>Production Companies</h4>
278
+ <p>Streamline post-production metadata workflow</p>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- FAQ Section -->
284
+ <section class="faq-section fade-in-delay-3">
285
+ <div class="section-header">
286
+ <h2>Frequently Asked Questions</h2>
287
+ <p>Learn more about AI metadata generation</p>
288
+ </div>
289
+
290
+ <div class="faq-container">
291
+ <div class="faq-item glass-card">
292
+ <div class="faq-question">
293
+ <i class="fas fa-question-circle"></i>
294
+ <h3>How accurate is the AI metadata?</h3>
295
+ <i class="fas fa-chevron-down faq-toggle"></i>
296
+ </div>
297
+ <div class="faq-answer">
298
+ <p>Our AI uses Google's Gemini model which provides highly accurate and contextually relevant metadata. It analyzes video content comprehensively and generates professional-quality results.</p>
299
+ </div>
300
+ </div>
301
+
302
+ <div class="faq-item glass-card">
303
+ <div class="faq-question">
304
+ <i class="fas fa-question-circle"></i>
305
+ <h3>Can I edit the generated metadata?</h3>
306
+ <i class="fas fa-chevron-down faq-toggle"></i>
307
+ </div>
308
+ <div class="faq-answer">
309
+ <p>Currently, metadata is automatically generated and applied. We're working on adding an editor feature where you can review and modify metadata before applying it.</p>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="faq-item glass-card">
314
+ <div class="faq-question">
315
+ <i class="fas fa-question-circle"></i>
316
+ <h3>What languages are supported?</h3>
317
+ <i class="fas fa-chevron-down faq-toggle"></i>
318
+ </div>
319
+ <div class="faq-answer">
320
+ <p>Currently, the AI generates metadata primarily in English. We're working on adding support for multiple languages in future updates.</p>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="faq-item glass-card">
325
+ <div class="faq-question">
326
+ <i class="fas fa-question-circle"></i>
327
+ <h3>How long does generation take?</h3>
328
+ <i class="fas fa-chevron-down faq-toggle"></i>
329
+ </div>
330
+ <div class="faq-answer">
331
+ <p>The AI typically takes 10-30 seconds to analyze a video and generate complete metadata including title, description, tags, and hashtags.</p>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="faq-item glass-card">
336
+ <div class="faq-question">
337
+ <i class="fas fa-question-circle"></i>
338
+ <h3>Is there a limit on video length?</h3>
339
+ <i class="fas fa-chevron-down faq-toggle"></i>
340
+ </div>
341
+ <div class="faq-answer">
342
+ <p>The AI works best with Instagram Reels (typically under 90 seconds). Longer videos may take more time to process but are supported.</p>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </section>
347
+
348
+ <!-- CTA Section -->
349
+ <section class="cta-section glass-card fade-in-delay-3 text-center">
350
+ <i class="fas fa-rocket cta-icon"></i>
351
+ <h2>Ready to Automate?</h2>
352
+ <p>Use AI-generated metadata with our auto-uploader</p>
353
+ <div class="cta-buttons">
354
+ <a href="/uploader" class="btn btn-primary btn-large">
355
+ <i class="fas fa-upload"></i> Try Auto Uploader
356
+ </a>
357
+ <a href="/downloader" class="btn btn-secondary btn-large">
358
+ <i class="fas fa-download"></i> Download Only
359
+ </a>
360
+ </div>
361
+ </section>
362
+ </div>
363
+
364
+ <!-- Loading Overlay -->
365
+ <div id="loadingOverlay" class="loading-overlay" style="display: none;">
366
+ <div class="loading-spinner"></div>
367
+ <p>AI is analyzing your video...</p>
368
+ </div>
369
+
370
+ <!-- Toast Notification -->
371
+ <div id="toast" class="toast"></div>
372
+
373
+ <script>
374
+ // Mobile menu toggle
375
+ const mobileMenuToggle = document.getElementById('mobileMenuToggle');
376
+ const mobileMenu = document.getElementById('mobileMenu');
377
+
378
+ if (mobileMenuToggle) {
379
+ mobileMenuToggle.addEventListener('click', () => {
380
+ mobileMenu.classList.toggle('active');
381
+ });
382
+ }
383
+
384
+ // Close mobile menu when clicking outside
385
+ document.addEventListener('click', (e) => {
386
+ if (mobileMenu &&
387
+ mobileMenu.classList.contains('active') &&
388
+ !mobileMenu.contains(e.target) &&
389
+ !mobileMenuToggle.contains(e.target)) {
390
+ mobileMenu.classList.remove('active');
391
+ }
392
+ });
393
+
394
+ // FAQ Accordion
395
+ document.querySelectorAll('.faq-question').forEach(question => {
396
+ question.addEventListener('click', () => {
397
+ const faqItem = question.parentElement;
398
+ const isActive = faqItem.classList.contains('active');
399
+
400
+ document.querySelectorAll('.faq-item').forEach(item => {
401
+ item.classList.remove('active');
402
+ });
403
+
404
+ if (!isActive) {
405
+ faqItem.classList.add('active');
406
+ }
407
+ });
408
+ });
409
+ </script>
410
+ <script src="{{ url_for('static', filename='js/metadata.js') }}"></script>
411
+ </body>
412
+ </html>
privacy_policy.html ADDED
@@ -0,0 +1,74 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Privacy Policy - YouTube Automation</title>
7
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
8
+ </head>
9
+ <body>
10
+ <div class="background-animation">
11
+ <div class="gradient-orb orb-1"></div>
12
+ <div class="gradient-orb orb-2"></div>
13
+ <div class="gradient-orb orb-3"></div>
14
+ </div>
15
+
16
+ <div class="container">
17
+ <div class="glass-card" style="max-width: 900px; margin: 50px auto; padding: 40px;">
18
+ <h1 style="margin-bottom: 30px;">Privacy Policy</h1>
19
+
20
+ <p style="margin-bottom: 20px; color: var(--text-secondary);">
21
+ Last updated: {{ current_date }}
22
+ </p>
23
+
24
+ <h2 style="margin-top: 30px; margin-bottom: 15px;">1. Information We Collect</h2>
25
+ <p>We collect information you provide when using our service:</p>
26
+ <ul style="margin-left: 20px; margin-bottom: 20px;">
27
+ <li>YouTube account information via OAuth 2.0</li>
28
+ <li>Instagram Reel URLs you provide</li>
29
+ <li>Usage data and analytics</li>
30
+ </ul>
31
+
32
+ <h2 style="margin-top: 30px; margin-bottom: 15px;">2. How We Use Your Information</h2>
33
+ <p>Your information is used to:</p>
34
+ <ul style="margin-left: 20px; margin-bottom: 20px;">
35
+ <li>Process video uploads to your YouTube channel</li>
36
+ <li>Generate AI-powered metadata</li>
37
+ <li>Improve our service</li>
38
+ </ul>
39
+
40
+ <h2 style="margin-top: 30px; margin-bottom: 15px;">3. Data Security</h2>
41
+ <p>We use industry-standard security measures including:</p>
42
+ <ul style="margin-left: 20px; margin-bottom: 20px;">
43
+ <li>OAuth 2.0 authentication</li>
44
+ <li>HTTPS encryption</li>
45
+ <li>No password storage</li>
46
+ </ul>
47
+
48
+ <h2 style="margin-top: 30px; margin-bottom: 15px;">4. Third-Party Services</h2>
49
+ <p>We use the following third-party services:</p>
50
+ <ul style="margin-left: 20px; margin-bottom: 20px;">
51
+ <li>Google YouTube API</li>
52
+ <li>Google Gemini AI</li>
53
+ <li>Google Analytics</li>
54
+ <li>Google AdSense</li>
55
+ </ul>
56
+
57
+ <h2 style="margin-top: 30px; margin-bottom: 15px;">5. Your Rights</h2>
58
+ <p>You have the right to:</p>
59
+ <ul style="margin-left: 20px; margin-bottom: 20px;">
60
+ <li>Revoke access at any time</li>
61
+ <li>Request data deletion</li>
62
+ <li>Opt-out of analytics</li>
63
+ </ul>
64
+
65
+ <h2 style="margin-top: 30px; margin-bottom: 15px;">6. Contact Us</h2>
66
+ <p>For privacy concerns, contact us at: privacy@yourapp.com</p>
67
+
68
+ <div style="margin-top: 40px; text-align: center;">
69
+ <a href="/" class="btn btn-primary">Back to Home</a>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </body>
74
+ </html>
uploader.html ADDED
@@ -0,0 +1,748 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Uploader - YouTube Automation</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"><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 active"><i class="fas fa-upload"></i> Uploader</a>
29
+ </div>
30
+
31
+ <!-- Auth Buttons (shown when not authenticated) -->
32
+ <div id="navAuthButtons" class="nav-auth-buttons">
33
+ <button id="navSignInBtn" class="btn btn-nav-signin">
34
+ <i class="fab fa-youtube"></i> Sign in
35
+ </button>
36
+ </div>
37
+
38
+ <!-- User Menu (shown when authenticated) -->
39
+ <div id="navUserMenu" class="nav-user-menu" style="display: none;">
40
+ <div class="user-avatar" id="navUserAvatar">
41
+ <img id="navUserAvatarImg" src="" alt="User Avatar">
42
+ </div>
43
+ <div class="user-dropdown">
44
+ <div class="user-info">
45
+ <div class="user-name" id="navUserName">Channel Name</div>
46
+ <div class="user-email" id="navUserStats">Stats</div>
47
+ </div>
48
+ <div class="dropdown-divider"></div>
49
+ <button class="dropdown-item dropdown-logout" id="navLogoutBtn">
50
+ <i class="fas fa-sign-out-alt"></i> Logout
51
+ </button>
52
+ </div>
53
+ </div>
54
+
55
+ <button class="mobile-menu-toggle" id="mobileMenuToggle">
56
+ <i class="fas fa-bars"></i>
57
+ </button>
58
+ </div>
59
+ </nav>
60
+
61
+ <!-- Mobile Menu -->
62
+ <div class="mobile-menu glass-card" id="mobileMenu">
63
+ <a href="/" class="mobile-menu-link"><i class="fas fa-home"></i> Home</a>
64
+ <a href="/downloader" class="mobile-menu-link"><i class="fas fa-download"></i> Downloader</a>
65
+ <a href="/metadata-generator" class="mobile-menu-link"><i class="fas fa-brain"></i> Metadata Generator</a>
66
+ <a href="/uploader" class="mobile-menu-link"><i class="fas fa-upload"></i> Uploader</a>
67
+ <div class="mobile-menu-divider"></div>
68
+
69
+ <!-- Mobile Sign In (shown when not authenticated) -->
70
+ <button id="mobileSignInBtn" class="btn btn-nav-signin mobile-menu-btn">
71
+ <i class="fab fa-youtube"></i> Sign in
72
+ </button>
73
+
74
+ <!-- Mobile User Info (shown when authenticated) -->
75
+ <div id="mobileUserInfo" style="display: none; padding: 14px;">
76
+ <div style="font-weight: 600; margin-bottom: 5px;" id="mobileUserName">Channel Name</div>
77
+ <div style="font-size: 13px; color: var(--text-secondary);" id="mobileUserStats">Stats</div>
78
+ </div>
79
+ <button class="btn btn-logout mobile-menu-btn" id="mobileLogoutBtn" style="display: none;">
80
+ <i class="fas fa-sign-out-alt"></i> Logout
81
+ </button>
82
+ </div>
83
+
84
+ <div class="container">
85
+ <!-- Hero Section -->
86
+ <section class="page-hero fade-in">
87
+ <div class="hero-badge">
88
+ <i class="fas fa-upload"></i>
89
+ <span>Complete Automation</span>
90
+ </div>
91
+ <h1>YouTube Auto Uploader</h1>
92
+ <p class="hero-subtitle">Upload videos directly to YouTube with AI-generated metadata. Fully automated workflow from Instagram download to YouTube publish.</p>
93
+ </section>
94
+
95
+ <!-- Auth Section -->
96
+ <section id="authSection" class="upload-section glass-card fade-in-delay text-center" style="display: none;">
97
+ <div class="section-header">
98
+ <i class="fab fa-youtube"></i>
99
+ <h2>Connect Your YouTube Channel</h2>
100
+ <p>Sign in to start uploading videos automatically</p>
101
+ </div>
102
+
103
+ <div class="auth-benefits" style="max-width: 600px; margin: 30px auto;">
104
+ <div class="benefit-item">
105
+ <i class="fas fa-check-circle"></i>
106
+ <span>Secure OAuth 2.0 authentication</span>
107
+ </div>
108
+ <div class="benefit-item">
109
+ <i class="fas fa-check-circle"></i>
110
+ <span>Direct YouTube API integration</span>
111
+ </div>
112
+ <div class="benefit-item">
113
+ <i class="fas fa-check-circle"></i>
114
+ <span>Full control over your channel</span>
115
+ </div>
116
+ <div class="benefit-item">
117
+ <i class="fas fa-check-circle"></i>
118
+ <span>Revoke access anytime</span>
119
+ </div>
120
+ </div>
121
+
122
+ <button id="authBtn" class="btn btn-auth btn-large">
123
+ <i class="fab fa-youtube"></i> Sign in with YouTube
124
+ </button>
125
+
126
+ <p style="margin-top: 20px; font-size: 13px; color: var(--text-secondary);">
127
+ We only request upload permissions. Your data is secure.
128
+ </p>
129
+ </section>
130
+
131
+ <!-- Channel Info -->
132
+ <section id="channelInfo" class="channel-info glass-card fade-in" style="display: none;">
133
+ <div class="channel-header">
134
+ <img id="channelAvatar" class="channel-avatar" src="" alt="Channel Avatar">
135
+ <div class="channel-details">
136
+ <h2 id="channelName">Channel Name</h2>
137
+ <p id="channelStats">Loading...</p>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- Upload Section -->
143
+ <section id="uploadSection" class="upload-section glass-card fade-in-delay" style="display: none;">
144
+ <div class="section-header">
145
+ <i class="fas fa-cloud-upload-alt"></i>
146
+ <h2>Auto Upload to YouTube</h2>
147
+ <p>Paste Instagram Reel URL and let AI handle the rest</p>
148
+ </div>
149
+
150
+ <div class="input-group">
151
+ <i class="fab fa-instagram"></i>
152
+ <input type="text" id="reelUrl" class="glass-input"
153
+ placeholder="Paste Instagram Reel URL here...">
154
+ </div>
155
+
156
+ <!-- Video Editing Options Section (NEW) -->
157
+ <div class="video-editing-section glass-card" style="margin-top: 25px; padding: 25px;">
158
+ <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
159
+ <div>
160
+ <h3 style="margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px;">
161
+ <i class="fas fa-magic"></i> Video Editing (Optional)
162
+ </h3>
163
+ <p style="margin: 5px 0 0 0; font-size: 13px; color: var(--text-secondary);">
164
+ Enhance your video with background music and text overlays
165
+ </p>
166
+ </div>
167
+ <label class="toggle-switch">
168
+ <input type="checkbox" id="enableEditingToggle">
169
+ <span class="toggle-slider"></span>
170
+ </label>
171
+ </div>
172
+
173
+ <div id="editingOptions" style="display: none; animation: slideDown 0.3s ease;">
174
+ <!-- Background Music Section -->
175
+ <div class="editing-option" style="margin-bottom: 20px;">
176
+ <label style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 600;">
177
+ <i class="fas fa-music" style="color: var(--secondary);"></i>
178
+ Background Music
179
+ </label>
180
+
181
+ <!-- Music Source Tabs -->
182
+ <div style="display: flex; gap: 10px; margin-bottom: 15px;">
183
+ <button type="button" id="musicTabUrl" class="btn btn-secondary" style="flex: 1; padding: 10px; font-size: 14px;">
184
+ <i class="fab fa-youtube"></i> YouTube URL
185
+ </button>
186
+ <button type="button" id="musicTabFile" class="btn btn-secondary" style="flex: 1; padding: 10px; font-size: 14px; opacity: 0.6;">
187
+ <i class="fas fa-file-audio"></i> Local File
188
+ </button>
189
+ </div>
190
+
191
+ <!-- YouTube URL Input -->
192
+ <div id="musicUrlSection">
193
+ <div class="input-group" style="margin-bottom: 10px;">
194
+ <i class="fab fa-youtube"></i>
195
+ <input type="text" id="musicUrl" class="glass-input"
196
+ placeholder="Paste YouTube music URL (optional)...">
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Local File Input -->
201
+ <div id="musicFileSection" style="display: none;">
202
+ <div class="input-group" style="margin-bottom: 10px; cursor: pointer;" onclick="document.getElementById('musicFileInput').click();">
203
+ <i class="fas fa-upload"></i>
204
+ <input type="text" id="musicFileName" class="glass-input"
205
+ placeholder="Choose audio file from device..." readonly>
206
+ <input type="file" id="musicFileInput" accept="audio/*,.mp3,.wav,.m4a,.aac" style="display: none;">
207
+ </div>
208
+ <p style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">
209
+ <i class="fas fa-info-circle"></i> Supported formats: MP3, WAV, M4A, AAC
210
+ </p>
211
+ </div>
212
+
213
+ <div style="display: flex; align-items: center; gap: 15px;">
214
+ <label style="font-size: 14px; color: var(--text-secondary);">
215
+ <i class="fas fa-volume-up"></i> Volume:
216
+ </label>
217
+ <input type="range" id="musicVolume" min="0" max="100" value="30"
218
+ style="flex: 1; accent-color: var(--secondary);">
219
+ <span id="volumeValue" style="min-width: 40px; font-weight: 600;">30%</span>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Text Overlays Section -->
224
+ <div class="editing-option">
225
+ <label style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 600;">
226
+ <i class="fas fa-text-height" style="color: var(--primary);"></i>
227
+ Text Overlays
228
+ </label>
229
+ <div id="textOverlaysContainer">
230
+ <!-- Text overlay items will be added here -->
231
+ </div>
232
+ <button type="button" id="addTextOverlay" class="btn btn-secondary"
233
+ style="width: 100%; margin-top: 10px;">
234
+ <i class="fas fa-plus"></i> Add Text Overlay
235
+ </button>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="button-group">
241
+ <button id="uploadBtn" class="btn btn-primary">
242
+ <i class="fas fa-upload"></i> Auto Upload
243
+ </button>
244
+ </div>
245
+
246
+ <!-- Progress Section -->
247
+ <div id="progressSection" class="progress-section" style="display: none;">
248
+ <div class="progress-header">
249
+ <h3 id="progressTitle">Processing...</h3>
250
+ <span id="progressPercent" class="progress-percent">0%</span>
251
+ </div>
252
+ <div class="progress-bar">
253
+ <div id="progressFill" class="progress-fill" style="width: 0%"></div>
254
+ </div>
255
+ <p id="progressMessage" class="progress-message">Starting...</p>
256
+ </div>
257
+
258
+ <!-- Metadata Preview -->
259
+ <div id="metadataPreview" class="metadata-preview" style="display: none;">
260
+ <h3><i class="fas fa-sparkles"></i> AI Generated Metadata</h3>
261
+ <div class="metadata-content">
262
+ <div class="metadata-item">
263
+ <label><i class="fas fa-heading"></i> Title</label>
264
+ <div id="previewTitle" class="metadata-value"></div>
265
+ </div>
266
+ <div class="metadata-item">
267
+ <label><i class="fas fa-align-left"></i> Description</label>
268
+ <div id="previewDescription" class="metadata-value scrollable"></div>
269
+ </div>
270
+ <div class="metadata-item">
271
+ <label><i class="fas fa-tags"></i> Tags</label>
272
+ <div id="previewTags" class="metadata-tags"></div>
273
+ </div>
274
+ <div class="metadata-item">
275
+ <label><i class="fas fa-hashtag"></i> Hashtags</label>
276
+ <div id="previewHashtags" class="metadata-tags"></div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Success Result -->
282
+ <div id="successResult" class="result-section success glass-card" style="display: none;">
283
+ <div class="result-icon">🎉</div>
284
+ <h3>Upload Successful!</h3>
285
+ <p>Your video is now live on YouTube</p>
286
+ <div class="button-group">
287
+ <a id="watchBtn" href="#" target="_blank" class="btn btn-watch">
288
+ <i class="fab fa-youtube"></i> Watch on YouTube
289
+ </a>
290
+ <button id="uploadAnotherBtn" class="btn btn-retry">
291
+ <i class="fas fa-plus"></i> Upload Another
292
+ </button>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Error Result -->
297
+ <div id="errorResult" class="result-section error glass-card" style="display: none;">
298
+ <div class="result-icon">❌</div>
299
+ <h3>Upload Failed</h3>
300
+ <p id="errorMessage">An error occurred</p>
301
+ <button id="retryBtn" class="btn btn-retry">
302
+ <i class="fas fa-redo"></i> Try Again
303
+ </button>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- Features Section -->
308
+ <section class="features-section fade-in-delay-1">
309
+ <div class="section-header">
310
+ <h2>Complete Automation Features</h2>
311
+ <p>Everything you need for effortless YouTube uploads</p>
312
+ </div>
313
+
314
+ <div class="features-grid-small">
315
+ <div class="feature-card glass-card">
316
+ <i class="fas fa-robot feature-icon-small"></i>
317
+ <h3>Fully Automated</h3>
318
+ <p>One-click upload process. No manual work required. From download to publish in minutes.</p>
319
+ </div>
320
+
321
+ <div class="feature-card glass-card">
322
+ <i class="fas fa-brain feature-icon-small"></i>
323
+ <h3>AI Metadata</h3>
324
+ <p>Automatically generates SEO-optimized titles, descriptions, tags, and hashtags using AI.</p>
325
+ </div>
326
+
327
+ <div class="feature-card glass-card">
328
+ <i class="fas fa-bolt feature-icon-small"></i>
329
+ <h3>Lightning Fast</h3>
330
+ <p>High-speed processing ensures your content is live on YouTube in record time.</p>
331
+ </div>
332
+
333
+ <div class="feature-card glass-card">
334
+ <i class="fas fa-shield-alt feature-icon-small"></i>
335
+ <h3>Secure OAuth</h3>
336
+ <p>Industry-standard OAuth 2.0 authentication. Your credentials are never stored.</p>
337
+ </div>
338
+
339
+ <div class="feature-card glass-card">
340
+ <i class="fas fa-chart-line feature-icon-small"></i>
341
+ <h3>Real-time Tracking</h3>
342
+ <p>Monitor upload progress in real-time with detailed status updates at each stage.</p>
343
+ </div>
344
+
345
+ <div class="feature-card glass-card">
346
+ <i class="fas fa-cog feature-icon-small"></i>
347
+ <h3>Custom Settings</h3>
348
+ <p>Choose privacy settings, categories, and other options for your uploads.</p>
349
+ </div>
350
+ </div>
351
+ </section>
352
+
353
+ <!-- How It Works Section -->
354
+ <section class="how-to-use glass-card fade-in-delay-2">
355
+ <div class="section-header">
356
+ <h2>How Auto Upload Works</h2>
357
+ <p>Complete automation in 4 simple steps</p>
358
+ </div>
359
+
360
+ <div class="steps-list">
361
+ <div class="step-card">
362
+ <div class="step-number-badge">1</div>
363
+ <div class="step-info">
364
+ <h3>Authenticate with YouTube</h3>
365
+ <p>Click "Sign in with YouTube" to connect your channel. Uses secure OAuth 2.0 authentication. This is a one-time setup.</p>
366
+ <div class="step-tip">
367
+ <i class="fas fa-shield-alt"></i>
368
+ <span>Secure authentication - we never store your password</span>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <div class="step-card">
374
+ <div class="step-number-badge">2</div>
375
+ <div class="step-info">
376
+ <h3>Paste Instagram Reel URL</h3>
377
+ <p>Copy the link to the Instagram Reel you want to upload and paste it into the input field.</p>
378
+ <div class="step-tip">
379
+ <i class="fas fa-link"></i>
380
+ <span>Supports all public Instagram Reels</span>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="step-card">
386
+ <div class="step-number-badge">3</div>
387
+ <div class="step-info">
388
+ <h3>AI Analyzes & Generates</h3>
389
+ <p>Our AI downloads the video, analyzes content, and generates optimized metadata including title, description, tags, and hashtags.</p>
390
+ <div class="step-tip">
391
+ <i class="fas fa-magic"></i>
392
+ <span>Powered by Google Gemini AI for best results</span>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="step-card">
398
+ <div class="step-number-badge">4</div>
399
+ <div class="step-info">
400
+ <h3>Auto Upload to YouTube</h3>
401
+ <p>Video is automatically uploaded to your YouTube channel with all AI-generated metadata applied. Your video goes live instantly!</p>
402
+ <div class="step-tip">
403
+ <i class="fas fa-rocket"></i>
404
+ <span>Track real-time progress and get instant video link</span>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </section>
410
+
411
+ <!-- Benefits Section -->
412
+ <section class="benefits-section fade-in-delay-2">
413
+ <div class="section-header">
414
+ <h2>Why Use Auto Uploader?</h2>
415
+ <p>Advantages of automated YouTube uploads</p>
416
+ </div>
417
+
418
+ <div class="benefits-grid">
419
+ <div class="benefit-card glass-card">
420
+ <i class="fas fa-clock benefit-icon"></i>
421
+ <h3>Save Hours</h3>
422
+ <p>Upload in minutes instead of hours. Automate your entire content workflow.</p>
423
+ </div>
424
+
425
+ <div class="benefit-card glass-card">
426
+ <i class="fas fa-sync benefit-icon"></i>
427
+ <h3>Consistent Quality</h3>
428
+ <p>Every upload gets professional-quality metadata automatically.</p>
429
+ </div>
430
+
431
+ <div class="benefit-card glass-card">
432
+ <i class="fas fa-search benefit-icon"></i>
433
+ <h3>SEO Optimized</h3>
434
+ <p>AI-generated metadata is optimized for YouTube's search algorithm.</p>
435
+ </div>
436
+
437
+ <div class="benefit-card glass-card">
438
+ <i class="fas fa-chart-line benefit-icon"></i>
439
+ <h3>Grow Faster</h3>
440
+ <p>Post more content consistently to grow your channel faster.</p>
441
+ </div>
442
+
443
+ <div class="benefit-card glass-card">
444
+ <i class="fas fa-shield-alt benefit-icon"></i>
445
+ <h3>100% Secure</h3>
446
+ <p>Official YouTube API with OAuth 2.0. Revoke access anytime.</p>
447
+ </div>
448
+
449
+ <div class="benefit-card glass-card">
450
+ <i class="fas fa-mobile-alt benefit-icon"></i>
451
+ <h3>Works Everywhere</h3>
452
+ <p>Upload from any device - desktop, tablet, or mobile.</p>
453
+ </div>
454
+ </div>
455
+ </section>
456
+
457
+ <!-- Use Cases Section -->
458
+ <section class="use-cases-section glass-card fade-in-delay-3">
459
+ <div class="section-header">
460
+ <h2>Perfect For</h2>
461
+ <p>Who benefits from automated YouTube uploads</p>
462
+ </div>
463
+
464
+ <div class="use-cases-grid">
465
+ <div class="use-case-item">
466
+ <i class="fas fa-video"></i>
467
+ <h4>Content Creators</h4>
468
+ <p>Repurpose Instagram content for YouTube effortlessly</p>
469
+ </div>
470
+
471
+ <div class="use-case-item">
472
+ <i class="fas fa-users"></i>
473
+ <h4>Social Media Managers</h4>
474
+ <p>Manage multiple channels with automated workflows</p>
475
+ </div>
476
+
477
+ <div class="use-case-item">
478
+ <i class="fas fa-bullhorn"></i>
479
+ <h4>Digital Marketers</h4>
480
+ <p>Scale video marketing campaigns across platforms</p>
481
+ </div>
482
+
483
+ <div class="use-case-item">
484
+ <i class="fas fa-store"></i>
485
+ <h4>E-commerce Brands</h4>
486
+ <p>Automatically post product videos to YouTube</p>
487
+ </div>
488
+
489
+ <div class="use-case-item">
490
+ <i class="fas fa-graduation-cap"></i>
491
+ <h4>Educators</h4>
492
+ <p>Share educational content across multiple platforms</p>
493
+ </div>
494
+
495
+ <div class="use-case-item">
496
+ <i class="fas fa-music"></i>
497
+ <h4>Musicians & Artists</h4>
498
+ <p>Promote your work with automated uploads</p>
499
+ </div>
500
+ </div>
501
+ </section>
502
+
503
+ <!-- FAQ Section -->
504
+ <section class="faq-section fade-in-delay-3">
505
+ <div class="section-header">
506
+ <h2>Frequently Asked Questions</h2>
507
+ <p>Everything you need to know about auto uploading</p>
508
+ </div>
509
+
510
+ <div class="faq-container">
511
+ <div class="faq-item glass-card">
512
+ <div class="faq-question">
513
+ <i class="fas fa-question-circle"></i>
514
+ <h3>Is my YouTube account safe?</h3>
515
+ <i class="fas fa-chevron-down faq-toggle"></i>
516
+ </div>
517
+ <div class="faq-answer">
518
+ <p>Yes, absolutely! We use YouTube's official API with OAuth 2.0 authentication, the same secure method used by Google's own applications. Your credentials are never stored on our servers, and you can revoke access anytime from your Google account settings.</p>
519
+ </div>
520
+ </div>
521
+
522
+ <div class="faq-item glass-card">
523
+ <div class="faq-question">
524
+ <i class="fas fa-question-circle"></i>
525
+ <h3>How long does the upload process take?</h3>
526
+ <i class="fas fa-chevron-down faq-toggle"></i>
527
+ </div>
528
+ <div class="faq-answer">
529
+ <p>The entire process typically takes 2-5 minutes depending on video size. Download takes 30-60 seconds, AI metadata generation takes 10-30 seconds, and YouTube upload takes 1-3 minutes.</p>
530
+ </div>
531
+ </div>
532
+
533
+ <div class="faq-item glass-card">
534
+ <div class="faq-question">
535
+ <i class="fas fa-question-circle"></i>
536
+ <h3>Can I customize the metadata before upload?</h3>
537
+ <i class="fas fa-chevron-down faq-toggle"></i>
538
+ </div>
539
+ <div class="faq-answer">
540
+ <p>Currently, metadata is automatically generated and applied. We're working on adding an editor feature where you can review and modify AI-generated metadata before the upload completes.</p>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="faq-item glass-card">
545
+ <div class="faq-question">
546
+ <i class="fas fa-question-circle"></i>
547
+ <h3>What video privacy settings are used?</h3>
548
+ <i class="fas fa-chevron-down faq-toggle"></i>
549
+ </div>
550
+ <div class="faq-answer">
551
+ <p>By default, videos are uploaded as "Public". We're adding support for custom privacy settings (Private, Unlisted, Public) in an upcoming update.</p>
552
+ </div>
553
+ </div>
554
+
555
+ <div class="faq-item glass-card">
556
+ <div class="faq-question">
557
+ <i class="fas fa-question-circle"></i>
558
+ <h3>Are there any upload limits?</h3>
559
+ <i class="fas fa-chevron-down faq-toggle"></i>
560
+ </div>
561
+ <div class="faq-answer">
562
+ <p>Upload limits depend on YouTube API quotas. Standard quota allows approximately 6-10 uploads per day. For higher limits, you can request quota increase from Google Cloud Console.</p>
563
+ </div>
564
+ </div>
565
+
566
+ <div class="faq-item glass-card">
567
+ <div class="faq-question">
568
+ <i class="fas fa-question-circle"></i>
569
+ <h3>What happens if upload fails?</h3>
570
+ <i class="fas fa-chevron-down faq-toggle"></i>
571
+ </div>
572
+ <div class="faq-answer">
573
+ <p>If an upload fails, you'll receive a detailed error message. Common issues include expired Instagram session, YouTube quota limits, or network problems. You can retry the upload after resolving the issue.</p>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </section>
578
+
579
+ <!-- CTA Section -->
580
+ <section class="cta-section glass-card fade-in-delay-3 text-center">
581
+ <i class="fas fa-rocket cta-icon"></i>
582
+ <h2>Ready to Automate Your Uploads?</h2>
583
+ <p>Start uploading to YouTube with AI-powered automation today</p>
584
+ <div class="cta-buttons">
585
+ <button class="btn btn-primary btn-large" onclick="document.getElementById('authSection').scrollIntoView({ behavior: 'smooth' })">
586
+ <i class="fas fa-play"></i> Get Started Now
587
+ </button>
588
+ <a href="/metadata-generator" class="btn btn-preview btn-large">
589
+ <i class="fas fa-brain"></i> Try Metadata First
590
+ </a>
591
+ </div>
592
+ <p class="cta-note">No credit card required • Free to use</p>
593
+ </section>
594
+ </div>
595
+
596
+ <!-- Loading Overlay -->
597
+ <div id="loadingOverlay" class="loading-overlay" style="display: none;">
598
+ <div class="loading-spinner"></div>
599
+ <p>Processing...</p>
600
+ </div>
601
+
602
+ <!-- Toast Notification -->
603
+ <div id="toast" class="toast"></div>
604
+
605
+ <script>
606
+ // Mobile menu toggle
607
+ const mobileMenuToggle = document.getElementById('mobileMenuToggle');
608
+ const mobileMenu = document.getElementById('mobileMenu');
609
+
610
+ if (mobileMenuToggle) {
611
+ mobileMenuToggle.addEventListener('click', () => {
612
+ mobileMenu.classList.toggle('active');
613
+ });
614
+ }
615
+
616
+ // Close mobile menu when clicking outside
617
+ document.addEventListener('click', (e) => {
618
+ if (mobileMenu &&
619
+ mobileMenu.classList.contains('active') &&
620
+ !mobileMenu.contains(e.target) &&
621
+ !mobileMenuToggle.contains(e.target)) {
622
+ mobileMenu.classList.remove('active');
623
+ }
624
+ });
625
+
626
+ // FAQ Accordion
627
+ document.querySelectorAll('.faq-question').forEach(question => {
628
+ question.addEventListener('click', () => {
629
+ const faqItem = question.parentElement;
630
+ const isActive = faqItem.classList.contains('active');
631
+
632
+ document.querySelectorAll('.faq-item').forEach(item => {
633
+ item.classList.remove('active');
634
+ });
635
+
636
+ if (!isActive) {
637
+ faqItem.classList.add('active');
638
+ }
639
+ });
640
+ });
641
+
642
+ // Video Editing Toggle
643
+ const enableEditingToggle = document.getElementById('enableEditingToggle');
644
+ const editingOptions = document.getElementById('editingOptions');
645
+
646
+ if (enableEditingToggle) {
647
+ enableEditingToggle.addEventListener('change', () => {
648
+ editingOptions.style.display = enableEditingToggle.checked ? 'block' : 'none';
649
+ });
650
+ }
651
+
652
+ // Music Volume Slider
653
+ const musicVolume = document.getElementById('musicVolume');
654
+ const volumeValue = document.getElementById('volumeValue');
655
+
656
+ if (musicVolume && volumeValue) {
657
+ musicVolume.addEventListener('input', () => {
658
+ volumeValue.textContent = musicVolume.value + '%';
659
+ });
660
+ }
661
+
662
+ // Text Overlay Management
663
+ let overlayCount = 0;
664
+ const textOverlaysContainer = document.getElementById('textOverlaysContainer');
665
+ const addTextOverlayBtn = document.getElementById('addTextOverlay');
666
+
667
+ if (addTextOverlayBtn) {
668
+ addTextOverlayBtn.addEventListener('click', () => {
669
+ overlayCount++;
670
+ const overlayId = `overlay-${overlayCount}`;
671
+
672
+ const overlayDiv = document.createElement('div');
673
+ overlayDiv.className = 'text-overlay-item';
674
+ overlayDiv.id = overlayId;
675
+ overlayDiv.innerHTML = `
676
+ <div style="background: rgba(255, 255, 255, 0.02); padding: 15px; border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--border);">
677
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
678
+ <span style="font-weight: 600; font-size: 14px;">Text Overlay #${overlayCount}</span>
679
+ <button type="button" class="remove-overlay-btn" data-overlay-id="${overlayId}"
680
+ style="background: rgba(255, 23, 68, 0.15); border: none; color: var(--error);
681
+ padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;">
682
+ <i class="fas fa-times"></i> Remove
683
+ </button>
684
+ </div>
685
+ <input type="text" class="glass-input overlay-text" placeholder="Enter text..."
686
+ style="width: 100%; margin-bottom: 10px; padding: 10px; font-size: 14px;">
687
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
688
+ <select class="glass-input overlay-position" style="padding: 10px; font-size: 14px;">
689
+ <option value="top">Top</option>
690
+ <option value="bottom">Bottom</option>
691
+ <option value="center">Center</option>
692
+ </select>
693
+ <input type="number" class="glass-input overlay-duration" placeholder="Duration (sec)"
694
+ value="5" min="1" max="60" style="padding: 10px; font-size: 14px;">
695
+ </div>
696
+ </div>
697
+ `;
698
+
699
+ textOverlaysContainer.appendChild(overlayDiv);
700
+
701
+ // Add remove handler
702
+ const removeBtn = overlayDiv.querySelector('.remove-overlay-btn');
703
+ removeBtn.addEventListener('click', () => {
704
+ overlayDiv.remove();
705
+ });
706
+ });
707
+ }
708
+
709
+ // Music Source Tabs
710
+ const musicTabUrl = document.getElementById('musicTabUrl');
711
+ const musicTabFile = document.getElementById('musicTabFile');
712
+ const musicUrlSection = document.getElementById('musicUrlSection');
713
+ const musicFileSection = document.getElementById('musicFileSection');
714
+
715
+ if (musicTabUrl && musicTabFile) {
716
+ musicTabUrl.addEventListener('click', () => {
717
+ musicTabUrl.classList.add('active');
718
+ musicTabFile.classList.remove('active');
719
+ musicUrlSection.style.display = 'block';
720
+ musicFileSection.style.display = 'none';
721
+ });
722
+
723
+ musicTabFile.addEventListener('click', () => {
724
+ musicTabFile.classList.add('active');
725
+ musicTabUrl.classList.remove('active');
726
+ musicUrlSection.style.display = 'none';
727
+ musicFileSection.style.display = 'block';
728
+ });
729
+ }
730
+
731
+ // Music File Input
732
+ const musicFileInput = document.getElementById('musicFileInput');
733
+ const musicFileName = document.getElementById('musicFileName');
734
+
735
+ if (musicFileInput) {
736
+ musicFileInput.addEventListener('change', (event) => {
737
+ const file = event.target.files[0];
738
+ if (file) {
739
+ musicFileName.value = file.name;
740
+ } else {
741
+ musicFileName.value = '';
742
+ }
743
+ });
744
+ }
745
+ </script>
746
+ <script src="{{ url_for('static', filename='js/uploader.js') }}"></script>
747
+ </body>
748
+ </html>