Hugging Face's logo

Spaces:
samihalawa
/
Autotutorial
Running

App Files Community
1
Luigi commited on
Commit
4f87493
·
verified ·
1 Parent(s): fb531d5

Update index.html (#1)

Browse files

- Update index.html (3e0f96ca5a33782f0ae29789607ddc96f06ff498)

Files changed (1) hide show
  1. index.html +242 -166
index.html CHANGED
@@ -3,84 +3,101 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Autotutorial.ai Desktop - Video Tutorial Generator</title> <!-- More Desktop-App Like Title -->
7
- <!-- Tailwind CSS CDN for styling -->
 
 
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
9
- <!-- Font Awesome CDN for icons -->
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
11
- <!-- Inter Font from Google Fonts -->
12
  <link rel="preconnect" href="https://fonts.googleapis.com">
13
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
15
  <style>
16
- body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; } /* Lighter background */
17
- .app-container { max-width: 1200px; margin: 2rem auto; background-color: #fff; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.08); } /* Increased max-width and shadow */
18
- header { background-image: linear-gradient(to right, #4f46e5, #6366f1); padding: 2rem 2.5rem; color: white; } /* Gradient header */
19
- header h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; } /* Larger title */
20
- header p { font-size: 1.125rem; color: #d1d5db; } /* Subtitle styling */
21
- nav { background-color: #e5e7eb; border-bottom: 1px solid #d2d6da; } /* Navigation bar */
22
- nav ul { display: flex; padding-left: 2.5rem; }
23
- nav li { margin-right: 2rem; }
24
- nav a { display: block; padding: 1rem 0; color: #4b5563; font-weight: 500; transition: color 0.2s; border-bottom: 2px solid transparent; }
25
- nav a:hover, nav a.active { color: #374151; border-bottom-color: #4f46e5; } /* Active state and hover */
26
- nav a.active { color: #4f46e5; }
27
- main { padding: 2.5rem; }
28
- section { margin-bottom: 2.5rem; } /* Increased section spacing */
29
- section h2 { font-size: 1.75rem; font-weight: 600; color: #374151; margin-bottom: 1.5rem; } /* Section title styling */
30
- .input-label { @apply block text-gray-700 text-sm font-bold mb-2; }
31
- .input-field { @apply shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500; } /* Shadow on inputs */
32
- .btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 px-5 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200; } /* Rounded-md buttons and padding */
33
- .btn-primary:disabled { @apply bg-blue-300 cursor-not-allowed hover:bg-blue-300 focus:ring-0; }
34
- .btn-secondary { @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2.5 px-5 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50 transition-colors duration-200; } /* Rounded-md buttons and padding */
35
- .status-box { @apply border rounded-md p-4 mb-4 bg-gray-50 border-gray-200; } /* Rounded status box */
36
  .error-text { @apply text-red-500 mt-2 text-sm; }
37
- .video-player-container { @apply rounded-md overflow-hidden shadow-md; } /* Rounded video player */
38
- footer { background-color: #f9fafb; border-top: 1px solid #e5e7eb; padding: 1.5rem 2.5rem; text-center text-gray-500 text-sm; } /* Lighter footer */
39
- footer a { color: #6b7280; text-decoration: none; }
 
40
  footer a:hover { text-decoration: underline; }
41
- .tutorial-item { @apply bg-white p-4 rounded-md shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-200 cursor-pointer; } /* Tutorial list item */
42
- .tutorial-item h3 { @apply font-semibold text-gray-800 mb-1; }
43
  .tutorial-item p { @apply text-gray-600 text-sm; }
44
- .tutorial-list-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } /* Responsive tutorial list */
45
- .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } /* Settings grid layout */
46
- .help-section p { line-height: 1.6; margin-bottom: 1rem; } /* Help section text */
47
 
48
- /* Basic animation for button clicks */
49
- .btn-primary:active, .btn-secondary:active {
50
- transform: scale(0.98);
51
  }
52
-
53
- /* Custom Scrollbar (Webkit - Chrome, Safari) - Make it look less default */
54
- ::-webkit-scrollbar {
55
- width: 8px; /* Thin scrollbar */
56
- height: 8px;
 
 
 
 
 
 
57
  }
58
- ::-webkit-scrollbar-track {
59
- background: #f1f1f1; /* Light track background */
 
 
 
60
  }
61
- ::-webkit-scrollbar-thumb {
62
- background: #a8a8a8; /* Gray thumb */
63
- border-radius: 4px;
64
  }
65
- ::-webkit-scrollbar-thumb:hover {
66
- background: #888; /* Darker gray on hover */
67
  }
 
68
 
69
- /* For Firefox - using CSS only, simpler customization */
70
- /* No need for complex selectors, just set properties */
71
- * {
72
- scrollbar-width: thin;
73
- scrollbar-color: #a8a8a8 #f1f1f1;
74
- }
 
 
 
 
 
 
 
75
 
76
  </style>
77
  </head>
78
- <body class="bg-gray-100">
79
  <div class="app-container">
80
  <!-- Header Section -->
81
  <header>
82
- <h1 class="text-3xl">Autotutorial.ai Desktop</h1> <!-- Desktop App Title -->
83
- <p class="text-lg">Effortlessly Generate Professional Video Tutorials</p>
84
  </header>
85
 
86
  <!-- Navigation Bar -->
@@ -95,168 +112,170 @@
95
 
96
  <!-- Main Content Area -->
97
  <main>
98
- <!-- Generate Tutorial Section (Initially Active) -->
99
  <section id="generate-section">
100
  <h2 class="text-2xl">Generate New Tutorial</h2>
101
- <p class="text-gray-700 mb-6">Enter the topic and duration for your new video tutorial.</p>
102
 
103
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
104
  <div>
105
- <label for="tutorialTopic" class="input-label">Tutorial Topic <span class="text-gray-500">(e.g., "Getting Started with React Hooks")</span></label>
106
- <input type="text" id="tutorialTopic" class="input-field" placeholder="Enter tutorial topic" value="Advanced CSS Animations and Transitions" required>
107
  </div>
108
  <div>
109
  <label for="desiredDuration" class="input-label">Desired Duration (Minutes)</label>
110
- <select id="desiredDuration" class="input-field">
111
- <option value="5">5 Minutes</option>
112
- <option value="10" selected>10 Minutes</option>
113
- <option value="15">15 Minutes</option>
114
- <option value="20">20 Minutes</option>
115
  </select>
116
  </div>
117
  </div>
118
 
119
- <section class="mb-6">
120
- <h3 class="text-xl font-semibold mb-4 text-gray-800">API Keys <span class="text-gray-500">(Optional, for enhanced features)</span></h3>
121
  <div class="settings-grid">
122
  <div>
123
- <label for="openaiApiKey" class="input-label">OpenAI API Key <span class="text-gray-500">(For script generation)</span></label>
124
- <input type="text" id="openaiApiKey" class="input-field" placeholder="Enter your OpenAI API Key (Optional)" value="sk-DEMO_OPENAI_KEY">
125
  </div>
126
  <div>
127
- <label for="videoGenApiKey" class="input-label">Video Generation API Key <span class="text-gray-500">(For advanced video synthesis)</span></label>
128
- <input type="text" id="videoGenApiKey" class="input-field" placeholder="Enter Video API Key (Optional)" value="vg-DEMO_VIDEO_GEN_KEY">
129
  </div>
130
  </div>
131
- <p class="text-sm text-gray-500 mt-2">Optional API keys enhance tutorial quality. Basic tutorials work without them.</p>
132
  </section>
133
 
134
-
135
- <section class="mb-6 flex justify-between">
136
- <button id="generateButton" class="btn-primary"><i class="fas fa-magic mr-2"></i> Generate Tutorial</button>
137
- <button id="resetButton" class="btn-secondary hidden"><i class="fas fa-redo mr-2"></i> Reset</button>
138
  </section>
139
 
140
  <section id="statusSection" class="status-box">
141
- <h3 class="font-semibold text-gray-700 mb-2"><i class="fas fa-info-circle mr-2"></i> Status Updates</h3>
142
  <div id="statusMessages">
143
  <p class="text-gray-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Ready to generate. Click "Generate Tutorial".</p>
144
  </div>
145
  <p id="errorMessage" class="error-text hidden"></p>
 
146
  </section>
147
 
148
- <section id="videoOutputSection" class="hidden">
149
  <h2 class="text-xl font-semibold mb-4 text-gray-800"><i class="fas fa-film mr-2"></i> Tutorial Preview</h2>
150
  <div class="video-player-container">
151
  <video id="tutorialVideo" controls width="100%">
152
- <source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4"> <!-- More Engaging Demo Video -->
153
  Your browser does not support the video tag.
154
  </video>
 
155
  </div>
156
- <div class="mt-4 flex justify-between items-center">
157
  <div>
158
- <p class="text-gray-700"><strong>Tutorial Title:</strong> <span id="videoTitle">Advanced CSS Animations and Transitions in 10 Minutes</span></p>
159
  <p class="text-gray-500 text-sm">Generated tutorial preview.</p>
160
  </div>
161
  <div>
162
- <a href="#" id="downloadButton" class="btn-primary" download="tutorial.mp4"><i class="fas fa-download mr-2"></i> Download Video</a>
163
  </div>
164
  </div>
165
  </section>
166
  </section>
167
 
168
- <!-- Tutorial History Section (Initially Hidden) -->
169
  <section id="history-section" class="hidden">
170
  <h2 class="text-2xl">Tutorial History</h2>
171
- <p class="text-gray-700 mb-6">Access your previously generated tutorials.</p>
172
 
173
  <div class="tutorial-list-section">
174
- <div class="tutorial-item">
175
  <h3>Mastering JavaScript Promises</h3>
176
  <p>Generated: October 26, 2023</p>
177
- <p class="text-blue-600 font-semibold">View Tutorial</p>
178
  </div>
179
- <div class="tutorial-item">
180
- <h3>Introduction to Python for Beginners</h3>
181
  <p>Generated: October 25, 2023</p>
182
- <p class="text-blue-600 font-semibold">View Tutorial</p>
183
  </div>
184
- <div class="tutorial-item">
185
- <h3>Building a Simple REST API with Node.js</h3>
186
  <p>Generated: October 20, 2023</p>
187
- <p class="text-blue-600 font-semibold">View Tutorial</p>
188
  </div>
189
- <!-- Add more tutorial items here -->
190
  </div>
191
- <p class="mt-4 text-sm text-gray-500">History is simulated for demo purposes.</p>
192
  </section>
193
 
194
- <!-- Settings Section (Initially Hidden) -->
195
  <section id="settings-section" class="hidden">
196
  <h2 class="text-2xl">Settings</h2>
197
- <p class="text-gray-700 mb-6">Customize your Autotutorial.ai experience.</p>
198
 
199
  <div class="settings-grid">
200
  <div>
201
  <label for="defaultDurationSetting" class="input-label">Default Tutorial Duration</label>
202
- <select id="defaultDurationSetting" class="input-field">
203
- <option value="5">5 Minutes</option>
204
- <option value="10" selected>10 Minutes</option>
205
- <option value="15">15 Minutes</option>
206
  </select>
207
  </div>
208
  <div>
209
  <label for="videoQualitySetting" class="input-label">Default Video Quality</label>
210
- <select id="videoQualitySetting" class="input-field">
211
- <option value="720p" selected>720p (HD)</option>
212
- <option value="1080p">1080p (Full HD)</option>
213
- <option value="4k">4K (Ultra HD) - Premium</option>
214
  </select>
215
  </div>
216
  <div>
217
  <label for="voiceoverLanguage" class="input-label">Voiceover Language</label>
218
- <select id="voiceoverLanguage" class="input-field">
219
- <option value="en-US" selected>English (US)</option>
220
- <option value="en-GB">English (UK)</option>
221
- <option value="es-ES">Spanish (ES)</option>
222
- <option value="fr-FR">French (FR)</option>
223
- </select>
224
  </div>
225
  <div>
226
  <label for="outputFormat" class="input-label">Default Output Format</label>
227
- <select id="outputFormat" class="input-field">
228
- <option value="mp4" selected>MP4 (Recommended)</option>
229
- <option value="mov">MOV</option>
230
- <option value="webm">WebM</option>
231
  </select>
232
  </div>
233
- <!-- Add more settings as needed -->
234
  </div>
235
- <p class="mt-4 text-sm text-gray-500">Basic settings for demo purposes.</p>
 
 
 
236
  </section>
237
 
238
- <!-- Help Section (Initially Hidden) -->
239
  <section id="help-section" class="hidden">
240
  <h2 class="text-2xl">Help & Support</h2>
241
- <p class="text-gray-700 mb-6">Get assistance and learn how to use Autotutorial.ai Desktop.</p>
242
 
243
  <div class="help-section">
244
- <p>Welcome to Autotutorial.ai Desktop! This application helps you automatically generate professional video tutorials quickly and easily.</p>
245
  <p><strong>Getting Started:</strong></p>
246
- <ol class="list-decimal pl-5 mb-4">
247
- <li>Navigate to the "Generate Tutorial" section using the top navigation.</li>
248
- <li>Enter the topic you want to create a tutorial about in the "Tutorial Topic" field.</li>
249
- <li>Select your desired tutorial duration from the "Desired Duration" dropdown.</li>
250
- <li>(Optional) Enter your OpenAI and Video Generation API keys for enhanced tutorial generation. These are not required for basic functionality.</li>
251
- <li>Click the "Generate Tutorial" button.</li>
252
- <li>Monitor the "Status Updates" section for progress.</li>
253
- <li>Once generation is complete, preview your tutorial in the "Tutorial Preview" section and download it.</li>
254
  </ol>
255
  <p><strong>Tutorial History:</strong></p>
256
- <p>The "Tutorial History" section allows you to view and access your previously generated tutorials. (This is a simulated demo feature).</p>
257
  <p><strong>Settings:</strong></p>
258
- <p>In the "Settings" section, you can customize default preferences such as tutorial duration, video quality, and output format. (These are basic settings for demonstration).</p>
259
- <p>For further assistance or to report issues, please contact our support team at <a href="mailto:[email protected]">[email protected]</a>.</p>
260
  </div>
261
  </section>
262
 
@@ -270,34 +289,63 @@
270
 
271
  <script>
272
  document.addEventListener('DOMContentLoaded', () => {
273
- // Navigation functionality
274
  const navLinks = document.querySelectorAll('nav a.nav-link');
275
  const sections = document.querySelectorAll('main > section');
276
 
277
  navLinks.forEach(link => {
278
  link.addEventListener('click', function(event) {
279
- event.preventDefault(); // Prevent default link behavior
280
  const sectionId = this.getAttribute('data-section');
281
 
282
- // Deactivate all nav links and hide all sections
283
  navLinks.forEach(nl => nl.classList.remove('active'));
284
  sections.forEach(sec => sec.classList.add('hidden'));
285
 
286
- // Activate the clicked nav link and show the corresponding section
287
  this.classList.add('active');
288
  document.getElementById(`${sectionId}-section`).classList.remove('hidden');
 
 
 
 
289
  });
290
  });
291
-
292
- // Keep "Generate Tutorial" section active on initial load
293
  document.querySelector('nav a.nav-link[data-section="generate"]').classList.add('active');
294
  document.getElementById('generate-section').classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
295
  });
296
 
297
 
298
  document.getElementById('generateButton').addEventListener('click', function() {
299
- // ... (same generateButton event listener logic as before, but with updated IDs if needed) ...
300
- const topic = document.getElementById('tutorialTopic').value;
301
  const duration = document.getElementById('desiredDuration').value;
302
  const openaiKey = document.getElementById('openaiApiKey').value;
303
  const videoGenKey = document.getElementById('videoGenApiKey').value;
@@ -308,38 +356,62 @@
308
  const statusSection = document.getElementById('statusSection');
309
  const videoOutputSection = document.getElementById('videoOutputSection');
310
  const videoTitleSpan = document.getElementById('videoTitle');
 
 
311
 
312
  // Reset status and hide video output
313
  statusMessagesDiv.innerHTML = '';
314
  errorMessageDiv.classList.add('hidden');
315
  videoOutputSection.classList.add('hidden');
 
316
  resetButton.classList.add('hidden');
317
  generateButton.disabled = true;
318
  statusSection.querySelector('h3 i').classList.remove('fa-check-circle', 'text-green-500', 'fa-times-circle', 'text-red-500');
319
  statusSection.querySelector('h3 i').classList.add('fa-spinner', 'fa-spin', 'mr-2');
320
  statusSection.querySelector('h3').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Status Updates';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
321
 
322
 
323
- // Simulate tutorial generation process with delays
324
- simulateStep(statusMessagesDiv, "Generating tutorial script...", 1000, () => {
325
- simulateStep(statusMessagesDiv, "Creating voiceover...", 2000, () => {
326
- simulateStep(statusMessagesDiv, "Synthesizing video scenes...", 3000, () => {
327
- simulateStep(statusMessagesDiv, "Finalizing and rendering...", 2500, () => {
328
- // Simulate success
329
- statusMessagesDiv.innerHTML = '<p class="text-green-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Tutorial generation complete!</p>';
330
- statusSection.querySelector('h3 i').classList.remove('fa-spinner', 'fa-spin', 'mr-2');
331
- statusSection.querySelector('h3 i').classList.add('fa-check-circle', 'text-green-500', 'mr-2');
332
- statusSection.querySelector('h3').innerHTML = '<i class="fas fa-check-circle text-green-500 mr-2"></i> Status Updates';
333
-
334
- videoTitleSpan.textContent = topic + " in " + duration + " Minutes";
335
- videoOutputSection.classList.remove('hidden');
336
- generateButton.disabled = false;
337
- generateButton.classList.add('hidden');
338
- resetButton.classList.remove('hidden');
339
- }, false);
340
- }, false);
341
- }, false);
342
- }, false);
343
  });
344
 
345
  document.getElementById('resetButton').addEventListener('click', function() {
@@ -350,26 +422,30 @@
350
  const resetButton = document.getElementById('resetButton');
351
  const statusSection = document.getElementById('statusSection');
352
  const videoOutputSection = document.getElementById('videoOutputSection');
 
353
 
354
  statusMessagesDiv.innerHTML = '<p class="text-gray-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Ready to generate tutorial. Please click "Generate Tutorial".</p>';
355
  errorMessageDiv.classList.add('hidden');
356
  videoOutputSection.classList.add('hidden');
 
357
  generateButton.disabled = false;
358
  generateButton.classList.remove('hidden');
359
  resetButton.classList.add('hidden');
360
  statusSection.querySelector('h3 i').classList.remove('fa-times-circle', 'text-red-500', 'fa-spinner', 'fa-spin', 'mr-2');
361
  statusSection.querySelector('h3 i').classList.add('fa-check-circle', 'text-green-500', 'mr-2');
362
  statusSection.querySelector('h3').innerHTML = '<i class="fas fa-check-circle text-green-500 mr-2"></i> Status Updates';
 
 
 
363
  });
364
 
365
 
366
  function simulateStep(statusDiv, message, delay, callback, isSuccess = true) {
367
- // ... (same simulateStep function as before) ...
368
- setTimeout(function() {
369
  const messageElement = document.createElement('p');
370
  if (isSuccess) {
371
  messageElement.classList.add('text-gray-600');
372
- messageElement.innerHTML = `<i class="fas fa-check-circle text-green-500 mr-1"></i> ${message}`;
373
  } else {
374
  messageElement.classList.add('text-red-500');
375
  messageElement.innerHTML = `<i class="fas fa-times-circle text-red-500 mr-1"></i> ${message}`;
@@ -381,12 +457,12 @@
381
  document.getElementById('generateButton').disabled = false;
382
  document.getElementById('generateButton').classList.add('hidden');
383
  document.getElementById('resetButton').classList.remove('hidden');
384
-
385
  }
386
  statusDiv.appendChild(messageElement);
387
- statusDiv.scrollTop = statusDiv.scrollHeight; // Auto scroll to bottom
388
  if (callback) callback();
389
- }, delay);
390
  }
391
  </script>
392
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Autotutorial.ai Desktop - Video Tutorial Generator</title>
7
+ <!-- Radix UI Styles -->
8
+ <link rel="stylesheet" href="https://unpkg.com/@radix-ui/[email protected]/dist/index.css">
9
+ <!-- Tailwind CSS CDN -->
10
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
11
+ <!-- Font Awesome CDN -->
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
13
+ <!-- Inter & Poppins Fonts -->
14
  <link rel="preconnect" href="https://fonts.googleapis.com">
15
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
17
  <style>
18
+ body { font-family: 'Inter', sans-serif; background-color: var(--gray-50); color: var(--gray-900); }
19
+ .app-container { max-width: 1200px; margin: 2rem auto; background-color: var(--white); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.12); /* More window-like shadow */ }
20
+ header { background-image: linear-gradient(to right, var(--indigo-700), var(--indigo-800)); padding: 2.5rem 3rem; color: var(--white); position: relative; /* For title bar effect */ }
21
+ header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background-color: rgba(0,0,0,0.1); border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; } /* Subtle title bar effect */
22
+ header h1 { font-family: 'Poppins', sans-serif; font-size: 2.75rem; font-weight: 700; margin-bottom: 0.75rem; letter-spacing: -0.025em; }
23
+ header p { font-size: 1.25rem; color: var(--indigo-200); font-weight: 500; }
24
+ nav { background-color: var(--gray-100); border-bottom: 1px solid var(--gray-200); }
25
+ nav ul { display: flex; padding-left: 3rem; }
26
+ nav li { margin-right: 2.5rem; }
27
+ nav a { display: block; padding: 1.25rem 0; color: var(--gray-700); font-weight: 500; transition: color 0.2s, border-bottom-color 0.2s; border-bottom: 2px solid transparent; }
28
+ nav a:hover, nav a.active { color: var(--gray-900); border-bottom-color: var(--indigo-500); }
29
+ nav a.active { color: var(--indigo-600); }
30
+ main { padding: 3rem; }
31
+ section { margin-bottom: 3rem; }
32
+ section h2 { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 600; color: var(--gray-800); margin-bottom: 1.75rem; letter-spacing: -0.02em; }
33
+ section h3 { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 500; color: var(--gray-700); margin-bottom: 1rem; letter-spacing: -0.015em; }
34
+ .input-label { @apply block text-gray-700 text-sm font-semibold mb-2; }
35
+ .status-box { @apply border rounded-md p-5 mb-5 bg-gray-50 border-gray-200 relative overflow-hidden; } /* Status box relative for progress bar */
 
 
36
  .error-text { @apply text-red-500 mt-2 text-sm; }
37
+ .video-player-container { @apply rounded-md overflow-hidden shadow-xl relative; } /* Relative for video overlay */
38
+ .video-overlay-title { position: absolute; bottom: 20px; left: 20px; color: white; font-size: 1.75rem; font-weight: 600; text-shadow: 2px 2px 4px rgba(0,0,0,0.6); } /* Video title overlay */
39
+ footer { background-color: var(--gray-100); border-top: 1px solid var(--gray-200); padding: 2rem 3rem; text-center text-gray-500 text-sm; }
40
+ footer a { color: var(--gray-600); text-decoration: none; }
41
  footer a:hover { text-decoration: underline; }
42
+ .tutorial-item { @apply bg-white p-5 rounded-md shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-200 cursor-pointer; }
43
+ .tutorial-item h3 { @apply font-semibold text-gray-800 mb-2; }
44
  .tutorial-item p { @apply text-gray-600 text-sm; }
45
+ .tutorial-list-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
46
+ .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
47
+ .help-section p { line-height: 1.7; margin-bottom: 1.25rem; }
48
 
49
+ /* Radix UI Button Styling */
50
+ .radix-button {
51
+ @apply inline-flex items-center justify-center rounded-md px-5 py-2.5 font-semibold text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors duration-200;
52
  }
53
+ .radix-button-primary { @apply radix-button bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white shadow-sm hover:shadow-md; } /* More distinct hover/active */
54
+ .radix-button-primary:disabled { @apply bg-indigo-300 cursor-not-allowed hover:bg-indigo-300 focus:ring-0 shadow-none; }
55
+ .radix-button-secondary { @apply radix-button bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 shadow-sm hover:shadow-md; } /* More distinct hover/active */
56
+ .radix-button-apply { @apply radix-button bg-green-500 hover:bg-green-600 active:bg-green-700 text-white shadow-sm hover:shadow-md; } /* Apply button style */
57
+
58
+ /* Radix UI Input Styling */
59
+ .radix-input {
60
+ @apply shadow-sm appearance-none border rounded-md w-full py-2.5 px-3.5 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-shadow duration-200;
61
+ border-color: var(--gray-300);
62
+ background-color: var(--white);
63
+ color: var(--gray-900);
64
  }
65
+ .radix-input:focus { @apply shadow-md border-indigo-500; } /* Clearer focus effect */
66
+
67
+ /* Radix UI Select Styling (Trigger only - see JS for full select in React) */
68
+ .radix-select-trigger {
69
+ @apply radix-button radix-button-secondary w-full justify-between;
70
  }
71
+ .radix-select-content {
72
+ @apply rounded-md shadow-md bg-white border border-gray-200 overflow-hidden;
 
73
  }
74
+ .radix-select-item {
75
+ @apply px-3.5 py-2 text-sm text-gray-700 cursor-pointer hover:bg-gray-100 focus:outline-none focus:bg-gray-100;
76
  }
77
+ .radix-select-item[data-highlighted] { @apply bg-indigo-50 text-indigo-900; }
78
 
79
+ /* Progress Bar */
80
+ .status-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background-color: var(--indigo-500); border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; transform-origin: 0% 0%; transform: scaleX(0); transition: transform 0.4s ease-out; }
81
+ .status-progress-bar.active { transform: scaleX(1); }
82
+
83
+ /* Transitions */
84
+ .transition-opacity { transition-property: opacity; transition-timing-function: ease-out; transition-duration: 200ms; }
85
+
86
+ /* Scrollbar Styles */
87
+ ::-webkit-scrollbar { width: 8px; height: 8px; }
88
+ ::-webkit-scrollbar-track { background: #f1f1f1; }
89
+ ::-webkit-scrollbar-thumb { background: #a8a8a8; border-radius: 4px; }
90
+ ::-webkit-scrollbar-thumb:hover { background: #888; }
91
+ * { scrollbar-width: thin; scrollbar-color: #a8a8a8 #f1f1f1; }
92
 
93
  </style>
94
  </head>
95
+ <body class="bg-gray-50">
96
  <div class="app-container">
97
  <!-- Header Section -->
98
  <header>
99
+ <h1 class="text-3xl">Autotutorial.ai Desktop</h1>
100
+ <p class="text-lg">Video Tutorial Generator</p>
101
  </header>
102
 
103
  <!-- Navigation Bar -->
 
112
 
113
  <!-- Main Content Area -->
114
  <main>
115
+ <!-- Generate Tutorial Section -->
116
  <section id="generate-section">
117
  <h2 class="text-2xl">Generate New Tutorial</h2>
118
+ <p class="text-gray-700 mb-7">Topic and duration for your next tutorial video.</p>
119
 
120
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-7 mb-7">
121
  <div>
122
+ <label for="tutorialTopic" class="input-label">Tutorial Topic <span class="text-gray-500">(e.g., "Vue.js Composition API")</span></label>
123
+ <input type="text" id="tutorialTopic" class="radix-input" placeholder="Enter tutorial topic" value="Advanced React Context API Patterns" required>
124
  </div>
125
  <div>
126
  <label for="desiredDuration" class="input-label">Desired Duration (Minutes)</label>
127
+ <select id="desiredDuration" class="radix-select-trigger">
128
+ <option value="5" class="radix-select-item">5 Minutes</option>
129
+ <option value="10" selected class="radix-select-item">10 Minutes</option>
130
+ <option value="15" class="radix-select-item">15 Minutes</option>
131
+ <option value="20" class="radix-select-item">20 Minutes</option>
132
  </select>
133
  </div>
134
  </div>
135
 
136
+ <section class="mb-7">
137
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">API Keys <span class="text-gray-500">(Optional, Enhanced Features)</span></h3>
138
  <div class="settings-grid">
139
  <div>
140
+ <label for="openaiApiKey" class="input-label">OpenAI API Key <span class="text-gray-500">(AI Script Generation)</span></label>
141
+ <input type="text" id="openaiApiKey" class="radix-input" placeholder="Enter OpenAI API Key (Optional)" value="sk-DEMO_OPENAI_KEY">
142
  </div>
143
  <div>
144
+ <label for="videoGenApiKey" class="input-label">Video Generation API Key <span class="text-gray-500">(AI Video Synthesis)</span></label>
145
+ <input type="text" id="videoGenApiKey" class="radix-input" placeholder="Enter Video API Key (Optional)" value="vg-DEMO_VIDEO_GEN_KEY">
146
  </div>
147
  </div>
148
+ <p class="text-sm text-gray-500 mt-2">Optional API keys for advanced AI features. Basic tutorials work without them.</p>
149
  </section>
150
 
151
+ <section class="mb-7 flex justify-start gap-4">
152
+ <button id="generateButton" class="radix-button-primary"><i class="fas fa-magic mr-2"></i> Generate Tutorial</button>
153
+ <button id="resetButton" class="radix-button-secondary hidden"><i class="fas fa-redo mr-2"></i> Reset</button>
 
154
  </section>
155
 
156
  <section id="statusSection" class="status-box">
157
+ <h3 class="font-semibold text-gray-700 mb-3"><i class="fas fa-info-circle mr-2"></i> Status Updates</h3>
158
  <div id="statusMessages">
159
  <p class="text-gray-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Ready to generate. Click "Generate Tutorial".</p>
160
  </div>
161
  <p id="errorMessage" class="error-text hidden"></p>
162
+ <div id="progressBar" class="status-progress-bar"></div> <!-- Progress Bar -->
163
  </section>
164
 
165
+ <section id="videoOutputSection" class="hidden transition-opacity opacity-0 duration-200">
166
  <h2 class="text-xl font-semibold mb-4 text-gray-800"><i class="fas fa-film mr-2"></i> Tutorial Preview</h2>
167
  <div class="video-player-container">
168
  <video id="tutorialVideo" controls width="100%">
169
+ <source src="https://joy.videvo.net/videvo_files/video/free/2016-06/small_watermarked/Drone_Flying_Above_City_Skyline_preview.mp4" type="video/mp4"> <!-- Tutorial-style stock video -->
170
  Your browser does not support the video tag.
171
  </video>
172
+ <div id="videoTitleOverlay" class="video-overlay-title"></div> <!-- Video Title Overlay -->
173
  </div>
174
+ <div class="mt-5 flex justify-between items-center">
175
  <div>
176
+ <p class="text-gray-700"><strong>Tutorial Title:</strong> <span id="videoTitle"></span></p>
177
  <p class="text-gray-500 text-sm">Generated tutorial preview.</p>
178
  </div>
179
  <div>
180
+ <a href="#" id="downloadButton" class="radix-button-primary" download="tutorial.mp4"><i class="fas fa-download mr-2"></i> Download Video</a>
181
  </div>
182
  </div>
183
  </section>
184
  </section>
185
 
186
+ <!-- Tutorial History Section -->
187
  <section id="history-section" class="hidden">
188
  <h2 class="text-2xl">Tutorial History</h2>
189
+ <p class="text-gray-700 mb-7">Access and manage past tutorial videos.</p>
190
 
191
  <div class="tutorial-list-section">
192
+ <div class="tutorial-item history-item" data-video-title="Mastering JavaScript Promises">
193
  <h3>Mastering JavaScript Promises</h3>
194
  <p>Generated: October 26, 2023</p>
195
+ <p class="text-indigo-600 font-semibold">View Tutorial</p>
196
  </div>
197
+ <div class="tutorial-item history-item" data-video-title="Introduction to Python for Data Science">
198
+ <h3>Introduction to Python for Data Science</h3>
199
  <p>Generated: October 25, 2023</p>
200
+ <p class="text-indigo-600 font-semibold">View Tutorial</p>
201
  </div>
202
+ <div class="tutorial-item history-item" data-video-title="Building a REST API with Express.js">
203
+ <h3>Building a REST API with Express.js</h3>
204
  <p>Generated: October 20, 2023</p>
205
+ <p class="text-indigo-600 font-semibold">View Tutorial</p>
206
  </div>
 
207
  </div>
208
+ <p class="mt-4 text-sm text-gray-500">Tutorial history is simulated for demonstration.</p>
209
  </section>
210
 
211
+ <!-- Settings Section -->
212
  <section id="settings-section" class="hidden">
213
  <h2 class="text-2xl">Settings</h2>
214
+ <p class="text-gray-700 mb-7">Customize your Autotutorial.ai Desktop preferences.</p>
215
 
216
  <div class="settings-grid">
217
  <div>
218
  <label for="defaultDurationSetting" class="input-label">Default Tutorial Duration</label>
219
+ <select id="defaultDurationSetting" class="radix-select-trigger">
220
+ <option value="5" class="radix-select-item">5 Minutes</option>
221
+ <option value="10" selected class="radix-select-item">10 Minutes</option>
222
+ <option value="15" class="radix-select-item">15 Minutes</option>
223
  </select>
224
  </div>
225
  <div>
226
  <label for="videoQualitySetting" class="input-label">Default Video Quality</label>
227
+ <select id="videoQualitySetting" class="radix-select-trigger">
228
+ <option value="720p" selected class="radix-select-item">720p (HD)</option>
229
+ <option value="1080p" class="radix-select-item">1080p (Full HD)</option>
230
+ <option value="4k" class="radix-select-item">4K (Ultra HD) - Premium</option>
231
  </select>
232
  </div>
233
  <div>
234
  <label for="voiceoverLanguage" class="input-label">Voiceover Language</label>
235
+ <select id="voiceoverLanguage" class="radix-select-trigger">
236
+ <option value="en-US" selected class="radix-select-item">English (US)</option>
237
+ <option value="en-GB" class="radix-select-item">English (UK)</option>
238
+ <option value="es-ES" class="radix-select-item">Spanish (ES)</option>
239
+ <option value="fr-FR" class="radix-select-item">French (FR)</option>
240
+ </select>
241
  </div>
242
  <div>
243
  <label for="outputFormat" class="input-label">Default Output Format</label>
244
+ <select id="outputFormat" class="radix-select-trigger">
245
+ <option value="mp4" selected class="radix-select-item">MP4 (Recommended)</option>
246
+ <option value="mov" class="radix-select-item">MOV</option>
247
+ <option value="webm" class="radix-select-item">WebM</option>
248
  </select>
249
  </div>
 
250
  </div>
251
+ <div class="mt-5 flex justify-start">
252
+ <button id="applySettingsButton" class="radix-button-apply"><i class="fas fa-check mr-2"></i> Apply Settings</button> <!-- Apply Settings Button -->
253
+ </div>
254
+ <p class="mt-4 text-sm text-gray-500">Basic settings for demonstration purposes only.</p>
255
  </section>
256
 
257
+ <!-- Help Section -->
258
  <section id="help-section" class="hidden">
259
  <h2 class="text-2xl">Help & Support</h2>
260
+ <p class="text-gray-700 mb-7">Guidance and support for Autotutorial.ai Desktop users.</p>
261
 
262
  <div class="help-section">
263
+ <p>Welcome to Autotutorial.ai Desktop! Generate tutorials with ease.</p>
264
  <p><strong>Getting Started:</strong></p>
265
+ <ol class="list-decimal pl-6 mb-5">
266
+ <li>Go to "Generate Tutorial" via the top navigation.</li>
267
+ <li>Enter your tutorial topic in the "Tutorial Topic" field.</li>
268
+ <li>Select the desired tutorial duration from "Desired Duration".</li>
269
+ <li>(Optional) Add API keys for enhanced AI tutorial generation.</li>
270
+ <li>Click "Generate Tutorial" to begin the process.</li>
271
+ <li>Monitor the "Status Updates" section for generation progress.</li>
272
+ <li>Preview and download your tutorial in the "Tutorial Preview".</li>
273
  </ol>
274
  <p><strong>Tutorial History:</strong></p>
275
+ <p>Access and manage your previously generated tutorials in "Tutorial History" (demo feature).</p>
276
  <p><strong>Settings:</strong></p>
277
+ <p>Customize default preferences like duration, video quality, and output format in the "Settings" section (basic demo settings).</p>
278
+ <p>For further assistance, contact support at <a href="mailto:[email protected]">[email protected]</a>.</p>
279
  </div>
280
  </section>
281
 
 
289
 
290
  <script>
291
  document.addEventListener('DOMContentLoaded', () => {
292
+ // Navigation functionality (same as before)
293
  const navLinks = document.querySelectorAll('nav a.nav-link');
294
  const sections = document.querySelectorAll('main > section');
295
 
296
  navLinks.forEach(link => {
297
  link.addEventListener('click', function(event) {
298
+ event.preventDefault();
299
  const sectionId = this.getAttribute('data-section');
300
 
 
301
  navLinks.forEach(nl => nl.classList.remove('active'));
302
  sections.forEach(sec => sec.classList.add('hidden'));
303
 
 
304
  this.classList.add('active');
305
  document.getElementById(`${sectionId}-section`).classList.remove('hidden');
306
+ if (sectionId === 'generate') {
307
+ document.getElementById('videoOutputSection').classList.add('hidden'); // Hide video output when going back to generate
308
+ document.getElementById('videoOutputSection').classList.remove('opacity-0'); // Reset opacity for next generation
309
+ }
310
  });
311
  });
 
 
312
  document.querySelector('nav a.nav-link[data-section="generate"]').classList.add('active');
313
  document.getElementById('generate-section').classList.remove('hidden');
314
+
315
+ // Tutorial History Item Click Simulation
316
+ const historyItems = document.querySelectorAll('.history-item');
317
+ const videoTitleSpan = document.getElementById('videoTitle');
318
+ const videoTitleOverlay = document.getElementById('videoTitleOverlay');
319
+ const videoOutputSection = document.getElementById('videoOutputSection');
320
+ historyItems.forEach(item => {
321
+ item.addEventListener('click', function() {
322
+ const title = this.getAttribute('data-video-title');
323
+ videoTitleSpan.textContent = title + " (Preview)";
324
+ videoTitleOverlay.textContent = title;
325
+ videoOutputSection.classList.remove('hidden');
326
+ videoOutputSection.classList.remove('opacity-0'); // Fade in video output if hidden
327
+ // Optionally, you could change the video source here if you had different demo videos
328
+ // document.getElementById('tutorialVideo').src = 'url_to_different_video.mp4';
329
+ // document.getElementById('tutorialVideo source').src = 'url_to_different_video.mp4';
330
+ // document.getElementById('tutorialVideo').load(); // Important to reload video source
331
+ // Show status message
332
+ const statusMessagesDiv = document.getElementById('statusMessages');
333
+ statusMessagesDiv.innerHTML = `<p class="text-gray-600"><i class="fas fa-video text-indigo-500 mr-1"></i> Loading tutorial from history: ${title}</p>`;
334
+ statusMessagesDiv.scrollTop = statusMessagesDiv.scrollHeight;
335
+ });
336
+ });
337
+
338
+ // Apply Settings Button Simulation
339
+ document.getElementById('applySettingsButton').addEventListener('click', function() {
340
+ const statusMessagesDiv = document.getElementById('statusMessages');
341
+ statusMessagesDiv.innerHTML = `<p class="text-green-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Settings Applied.</p>`;
342
+ statusMessagesDiv.scrollTop = statusMessagesDiv.scrollHeight;
343
+ });
344
  });
345
 
346
 
347
  document.getElementById('generateButton').addEventListener('click', function() {
348
+ const topic = document.getElementById('tutorialTopic').value;
 
349
  const duration = document.getElementById('desiredDuration').value;
350
  const openaiKey = document.getElementById('openaiApiKey').value;
351
  const videoGenKey = document.getElementById('videoGenApiKey').value;
 
356
  const statusSection = document.getElementById('statusSection');
357
  const videoOutputSection = document.getElementById('videoOutputSection');
358
  const videoTitleSpan = document.getElementById('videoTitle');
359
+ const videoTitleOverlay = document.getElementById('videoTitleOverlay');
360
+ const progressBar = document.getElementById('progressBar');
361
 
362
  // Reset status and hide video output
363
  statusMessagesDiv.innerHTML = '';
364
  errorMessageDiv.classList.add('hidden');
365
  videoOutputSection.classList.add('hidden');
366
+ videoOutputSection.classList.remove('opacity-0'); // Reset opacity for next generation
367
  resetButton.classList.add('hidden');
368
  generateButton.disabled = true;
369
  statusSection.querySelector('h3 i').classList.remove('fa-check-circle', 'text-green-500', 'fa-times-circle', 'text-red-500');
370
  statusSection.querySelector('h3 i').classList.add('fa-spinner', 'fa-spin', 'mr-2');
371
  statusSection.querySelector('h3').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Status Updates';
372
+ progressBar.style.transform = 'scaleX(0)'; // Reset progress bar
373
+ progressBar.classList.add('active'); // Start progress bar animation
374
+
375
+
376
+ const steps = [
377
+ { message: "Analyzing Tutorial Topic...", delay: 800 },
378
+ { message: "Generating Script Outline (AI)...", delay: 1500 },
379
+ { message: "Writing Script Content (AI)...", delay: 2200 },
380
+ { message: "Synthesizing Voiceover (AI)...", delay: 2000 },
381
+ { message: "Selecting Relevant Visuals...", delay: 1800 },
382
+ { message: "Assembling Video Scenes...", delay: 2500 },
383
+ { message: "Adding Transitions and Music...", delay: 1500 },
384
+ { message: "Rendering Final Video...", delay: 3000 }
385
+ ];
386
+
387
+ let currentStepIndex = 0;
388
+ function processStep() {
389
+ if (currentStepIndex < steps.length) {
390
+ simulateStep(statusMessagesDiv, steps[currentStepIndex].message, steps[currentStepIndex].delay, () => {
391
+ progressBar.style.transform = `scaleX(${((currentStepIndex + 1) / steps.length)})`; // Update progress bar
392
+ currentStepIndex++;
393
+ processStep();
394
+ }, true);
395
+ } else {
396
+ // Simulate success - after all steps
397
+ progressBar.classList.remove('active'); // Stop progress bar animation
398
+ statusMessagesDiv.innerHTML = '<p class="text-green-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Tutorial generation complete!</p>';
399
+ statusSection.querySelector('h3 i').classList.remove('fa-spinner', 'fa-spin', 'mr-2');
400
+ statusSection.querySelector('h3 i').classList.add('fa-check-circle', 'text-green-500', 'mr-2');
401
+ statusSection.querySelector('h3').innerHTML = '<i class="fas fa-check-circle text-green-500 mr-2"></i> Status Updates';
402
+
403
+ videoTitleSpan.textContent = topic + " in " + duration + " Minutes (Preview)";
404
+ videoTitleOverlay.textContent = topic + " - " + duration + " Minute Tutorial"; // Set video overlay title
405
+ videoOutputSection.classList.remove('hidden');
406
+ setTimeout(() => videoOutputSection.classList.remove('opacity-0'), 50); // Fade in video output
407
+ generateButton.disabled = false;
408
+ generateButton.classList.add('hidden');
409
+ resetButton.classList.remove('hidden');
410
+ }
411
+ }
412
+ processStep(); // Start the step processing
413
 
414
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
415
  });
416
 
417
  document.getElementById('resetButton').addEventListener('click', function() {
 
422
  const resetButton = document.getElementById('resetButton');
423
  const statusSection = document.getElementById('statusSection');
424
  const videoOutputSection = document.getElementById('videoOutputSection');
425
+ const progressBar = document.getElementById('progressBar');
426
 
427
  statusMessagesDiv.innerHTML = '<p class="text-gray-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Ready to generate tutorial. Please click "Generate Tutorial".</p>';
428
  errorMessageDiv.classList.add('hidden');
429
  videoOutputSection.classList.add('hidden');
430
+ videoOutputSection.classList.remove('opacity-0'); // Reset opacity for next generation
431
  generateButton.disabled = false;
432
  generateButton.classList.remove('hidden');
433
  resetButton.classList.add('hidden');
434
  statusSection.querySelector('h3 i').classList.remove('fa-times-circle', 'text-red-500', 'fa-spinner', 'fa-spin', 'mr-2');
435
  statusSection.querySelector('h3 i').classList.add('fa-check-circle', 'text-green-500', 'mr-2');
436
  statusSection.querySelector('h3').innerHTML = '<i class="fas fa-check-circle text-green-500 mr-2"></i> Status Updates';
437
+ progressBar.classList.remove('active'); // Stop progress bar animation if running
438
+ progressBar.style.transform = 'scaleX(0)'; // Reset progress bar
439
+
440
  });
441
 
442
 
443
  function simulateStep(statusDiv, message, delay, callback, isSuccess = true) {
444
+ setTimeout(function() {
 
445
  const messageElement = document.createElement('p');
446
  if (isSuccess) {
447
  messageElement.classList.add('text-gray-600');
448
+ messageElement.innerHTML = `<i class="fas fa-spinner fa-pulse text-indigo-500 mr-1"></i> ${message}`; // Use spinner for ongoing steps
449
  } else {
450
  messageElement.classList.add('text-red-500');
451
  messageElement.innerHTML = `<i class="fas fa-times-circle text-red-500 mr-1"></i> ${message}`;
 
457
  document.getElementById('generateButton').disabled = false;
458
  document.getElementById('generateButton').classList.add('hidden');
459
  document.getElementById('resetButton').classList.remove('hidden');
460
+ document.getElementById('progressBar').classList.remove('active'); // Stop progress bar on error
461
  }
462
  statusDiv.appendChild(messageElement);
463
+ statusDiv.scrollTop = statusDiv.scrollHeight;
464
  if (callback) callback();
465
+ }, delay + Math.random() * 500); // Add slight random delay variation
466
  }
467
  </script>
468