Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Autotutorial.ai Desktop - Video Tutorial Generator</title> | |
| <!-- Radix UI Styles --> | |
| <link rel="stylesheet" href="https://unpkg.com/@radix-ui/[email protected]/dist/index.css"> | |
| <!-- Tailwind CSS CDN --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <!-- Font Awesome CDN --> | |
| <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" /> | |
| <!-- Inter & Poppins Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; background-color: var(--gray-50); color: var(--gray-900); } | |
| .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 */ } | |
| 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 */ } | |
| 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 */ | |
| header h1 { font-family: 'Poppins', sans-serif; font-size: 2.75rem; font-weight: 700; margin-bottom: 0.75rem; letter-spacing: -0.025em; } | |
| header p { font-size: 1.25rem; color: var(--indigo-200); font-weight: 500; } | |
| nav { background-color: var(--gray-100); border-bottom: 1px solid var(--gray-200); } | |
| nav ul { display: flex; padding-left: 3rem; } | |
| nav li { margin-right: 2.5rem; } | |
| 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; } | |
| nav a:hover, nav a.active { color: var(--gray-900); border-bottom-color: var(--indigo-500); } | |
| nav a.active { color: var(--indigo-600); } | |
| main { padding: 3rem; } | |
| section { margin-bottom: 3rem; } | |
| 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; } | |
| 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; } | |
| .input-label { @apply block text-gray-700 text-sm font-semibold mb-2; } | |
| .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 */ | |
| .error-text { @apply text-red-500 mt-2 text-sm; } | |
| .video-player-container { @apply rounded-md overflow-hidden shadow-xl relative; } /* Relative for video overlay */ | |
| .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 */ | |
| footer { background-color: var(--gray-100); border-top: 1px solid var(--gray-200); padding: 2rem 3rem; text-center text-gray-500 text-sm; } | |
| footer a { color: var(--gray-600); text-decoration: none; } | |
| footer a:hover { text-decoration: underline; } | |
| .tutorial-item { @apply bg-white p-5 rounded-md shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-200 cursor-pointer; } | |
| .tutorial-item h3 { @apply font-semibold text-gray-800 mb-2; } | |
| .tutorial-item p { @apply text-gray-600 text-sm; } | |
| .tutorial-list-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } | |
| .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } | |
| .help-section p { line-height: 1.7; margin-bottom: 1.25rem; } | |
| /* Radix UI Button Styling */ | |
| .radix-button { | |
| @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; | |
| } | |
| .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 */ | |
| .radix-button-primary:disabled { @apply bg-indigo-300 cursor-not-allowed hover:bg-indigo-300 focus:ring-0 shadow-none; } | |
| .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 */ | |
| .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 */ | |
| /* Radix UI Input Styling */ | |
| .radix-input { | |
| @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; | |
| border-color: var(--gray-300); | |
| background-color: var(--white); | |
| color: var(--gray-900); | |
| } | |
| .radix-input:focus { @apply shadow-md border-indigo-500; } /* Clearer focus effect */ | |
| /* Radix UI Select Styling (Trigger only - see JS for full select in React) */ | |
| .radix-select-trigger { | |
| @apply radix-button radix-button-secondary w-full justify-between; | |
| } | |
| .radix-select-content { | |
| @apply rounded-md shadow-md bg-white border border-gray-200 overflow-hidden; | |
| } | |
| .radix-select-item { | |
| @apply px-3.5 py-2 text-sm text-gray-700 cursor-pointer hover:bg-gray-100 focus:outline-none focus:bg-gray-100; | |
| } | |
| .radix-select-item[data-highlighted] { @apply bg-indigo-50 text-indigo-900; } | |
| /* Progress Bar */ | |
| .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; } | |
| .status-progress-bar.active { transform: scaleX(1); } | |
| /* Transitions */ | |
| .transition-opacity { transition-property: opacity; transition-timing-function: ease-out; transition-duration: 200ms; } | |
| /* Scrollbar Styles */ | |
| ::-webkit-scrollbar { width: 8px; height: 8px; } | |
| ::-webkit-scrollbar-track { background: #f1f1f1; } | |
| ::-webkit-scrollbar-thumb { background: #a8a8a8; border-radius: 4px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #888; } | |
| * { scrollbar-width: thin; scrollbar-color: #a8a8a8 #f1f1f1; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="app-container"> | |
| <!-- Header Section --> | |
| <header> | |
| <h1 class="text-3xl">Autotutorial.ai Desktop</h1> | |
| <p class="text-lg">Video Tutorial Generator</p> | |
| </header> | |
| <!-- Navigation Bar --> | |
| <nav> | |
| <ul> | |
| <li><a href="#generate" class="nav-link active" data-section="generate">Generate Tutorial</a></li> | |
| <li><a href="#history" class="nav-link" data-section="history">Tutorial History</a></li> | |
| <li><a href="#settings" class="nav-link" data-section="settings">Settings</a></li> | |
| <li><a href="#help" class="nav-link" data-section="help">Help</a></li> | |
| </ul> | |
| </nav> | |
| <!-- Main Content Area --> | |
| <main> | |
| <!-- Generate Tutorial Section --> | |
| <section id="generate-section"> | |
| <h2 class="text-2xl">Generate New Tutorial</h2> | |
| <p class="text-gray-700 mb-7">Topic and duration for your next tutorial video.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-7 mb-7"> | |
| <div> | |
| <label for="tutorialTopic" class="input-label">Tutorial Topic <span class="text-gray-500">(e.g., "Vue.js Composition API")</span></label> | |
| <input type="text" id="tutorialTopic" class="radix-input" placeholder="Enter tutorial topic" value="Advanced React Context API Patterns" required> | |
| </div> | |
| <div> | |
| <label for="desiredDuration" class="input-label">Desired Duration (Minutes)</label> | |
| <select id="desiredDuration" class="radix-select-trigger"> | |
| <option value="5" class="radix-select-item">5 Minutes</option> | |
| <option value="10" selected class="radix-select-item">10 Minutes</option> | |
| <option value="15" class="radix-select-item">15 Minutes</option> | |
| <option value="20" class="radix-select-item">20 Minutes</option> | |
| </select> | |
| </div> | |
| </div> | |
| <section class="mb-7"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">API Keys <span class="text-gray-500">(Optional, Enhanced Features)</span></h3> | |
| <div class="settings-grid"> | |
| <div> | |
| <label for="openaiApiKey" class="input-label">OpenAI API Key <span class="text-gray-500">(AI Script Generation)</span></label> | |
| <input type="text" id="openaiApiKey" class="radix-input" placeholder="Enter OpenAI API Key (Optional)" value="sk-DEMO_OPENAI_KEY"> | |
| </div> | |
| <div> | |
| <label for="videoGenApiKey" class="input-label">Video Generation API Key <span class="text-gray-500">(AI Video Synthesis)</span></label> | |
| <input type="text" id="videoGenApiKey" class="radix-input" placeholder="Enter Video API Key (Optional)" value="vg-DEMO_VIDEO_GEN_KEY"> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-2">Optional API keys for advanced AI features. Basic tutorials work without them.</p> | |
| </section> | |
| <section class="mb-7 flex justify-start gap-4"> | |
| <button id="generateButton" class="radix-button-primary"><i class="fas fa-magic mr-2"></i> Generate Tutorial</button> | |
| <button id="resetButton" class="radix-button-secondary hidden"><i class="fas fa-redo mr-2"></i> Reset</button> | |
| </section> | |
| <section id="statusSection" class="status-box"> | |
| <h3 class="font-semibold text-gray-700 mb-3"><i class="fas fa-info-circle mr-2"></i> Status Updates</h3> | |
| <div id="statusMessages"> | |
| <p class="text-gray-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Ready to generate. Click "Generate Tutorial".</p> | |
| </div> | |
| <p id="errorMessage" class="error-text hidden"></p> | |
| <div id="progressBar" class="status-progress-bar"></div> <!-- Progress Bar --> | |
| </section> | |
| <section id="videoOutputSection" class="hidden transition-opacity opacity-0 duration-200"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800"><i class="fas fa-film mr-2"></i> Tutorial Preview</h2> | |
| <div class="video-player-container"> | |
| <video id="tutorialVideo" controls width="100%"> | |
| <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 --> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div id="videoTitleOverlay" class="video-overlay-title"></div> <!-- Video Title Overlay --> | |
| </div> | |
| <div class="mt-5 flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-700"><strong>Tutorial Title:</strong> <span id="videoTitle"></span></p> | |
| <p class="text-gray-500 text-sm">Generated tutorial preview.</p> | |
| </div> | |
| <div> | |
| <a href="#" id="downloadButton" class="radix-button-primary" download="tutorial.mp4"><i class="fas fa-download mr-2"></i> Download Video</a> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| <!-- Tutorial History Section --> | |
| <section id="history-section" class="hidden"> | |
| <h2 class="text-2xl">Tutorial History</h2> | |
| <p class="text-gray-700 mb-7">Access and manage past tutorial videos.</p> | |
| <div class="tutorial-list-section"> | |
| <div class="tutorial-item history-item" data-video-title="Mastering JavaScript Promises"> | |
| <h3>Mastering JavaScript Promises</h3> | |
| <p>Generated: October 26, 2023</p> | |
| <p class="text-indigo-600 font-semibold">View Tutorial</p> | |
| </div> | |
| <div class="tutorial-item history-item" data-video-title="Introduction to Python for Data Science"> | |
| <h3>Introduction to Python for Data Science</h3> | |
| <p>Generated: October 25, 2023</p> | |
| <p class="text-indigo-600 font-semibold">View Tutorial</p> | |
| </div> | |
| <div class="tutorial-item history-item" data-video-title="Building a REST API with Express.js"> | |
| <h3>Building a REST API with Express.js</h3> | |
| <p>Generated: October 20, 2023</p> | |
| <p class="text-indigo-600 font-semibold">View Tutorial</p> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-500">Tutorial history is simulated for demonstration.</p> | |
| </section> | |
| <!-- Settings Section --> | |
| <section id="settings-section" class="hidden"> | |
| <h2 class="text-2xl">Settings</h2> | |
| <p class="text-gray-700 mb-7">Customize your Autotutorial.ai Desktop preferences.</p> | |
| <div class="settings-grid"> | |
| <div> | |
| <label for="defaultDurationSetting" class="input-label">Default Tutorial Duration</label> | |
| <select id="defaultDurationSetting" class="radix-select-trigger"> | |
| <option value="5" class="radix-select-item">5 Minutes</option> | |
| <option value="10" selected class="radix-select-item">10 Minutes</option> | |
| <option value="15" class="radix-select-item">15 Minutes</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="videoQualitySetting" class="input-label">Default Video Quality</label> | |
| <select id="videoQualitySetting" class="radix-select-trigger"> | |
| <option value="720p" selected class="radix-select-item">720p (HD)</option> | |
| <option value="1080p" class="radix-select-item">1080p (Full HD)</option> | |
| <option value="4k" class="radix-select-item">4K (Ultra HD) - Premium</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="voiceoverLanguage" class="input-label">Voiceover Language</label> | |
| <select id="voiceoverLanguage" class="radix-select-trigger"> | |
| <option value="en-US" selected class="radix-select-item">English (US)</option> | |
| <option value="en-GB" class="radix-select-item">English (UK)</option> | |
| <option value="es-ES" class="radix-select-item">Spanish (ES)</option> | |
| <option value="fr-FR" class="radix-select-item">French (FR)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="outputFormat" class="input-label">Default Output Format</label> | |
| <select id="outputFormat" class="radix-select-trigger"> | |
| <option value="mp4" selected class="radix-select-item">MP4 (Recommended)</option> | |
| <option value="mov" class="radix-select-item">MOV</option> | |
| <option value="webm" class="radix-select-item">WebM</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-5 flex justify-start"> | |
| <button id="applySettingsButton" class="radix-button-apply"><i class="fas fa-check mr-2"></i> Apply Settings</button> <!-- Apply Settings Button --> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-500">Basic settings for demonstration purposes only.</p> | |
| </section> | |
| <!-- Help Section --> | |
| <section id="help-section" class="hidden"> | |
| <h2 class="text-2xl">Help & Support</h2> | |
| <p class="text-gray-700 mb-7">Guidance and support for Autotutorial.ai Desktop users.</p> | |
| <div class="help-section"> | |
| <p>Welcome to Autotutorial.ai Desktop! Generate tutorials with ease.</p> | |
| <p><strong>Getting Started:</strong></p> | |
| <ol class="list-decimal pl-6 mb-5"> | |
| <li>Go to "Generate Tutorial" via the top navigation.</li> | |
| <li>Enter your tutorial topic in the "Tutorial Topic" field.</li> | |
| <li>Select the desired tutorial duration from "Desired Duration".</li> | |
| <li>(Optional) Add API keys for enhanced AI tutorial generation.</li> | |
| <li>Click "Generate Tutorial" to begin the process.</li> | |
| <li>Monitor the "Status Updates" section for generation progress.</li> | |
| <li>Preview and download your tutorial in the "Tutorial Preview".</li> | |
| </ol> | |
| <p><strong>Tutorial History:</strong></p> | |
| <p>Access and manage your previously generated tutorials in "Tutorial History" (demo feature).</p> | |
| <p><strong>Settings:</strong></p> | |
| <p>Customize default preferences like duration, video quality, and output format in the "Settings" section (basic demo settings).</p> | |
| <p>For further assistance, contact support at <a href="mailto:[email protected]">[email protected]</a>.</p> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer Section --> | |
| <footer> | |
| © 2023 Autotutorial.ai Desktop. All rights reserved. | <a href="#">Terms of Service</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Navigation functionality (same as before) | |
| const navLinks = document.querySelectorAll('nav a.nav-link'); | |
| const sections = document.querySelectorAll('main > section'); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(event) { | |
| event.preventDefault(); | |
| const sectionId = this.getAttribute('data-section'); | |
| navLinks.forEach(nl => nl.classList.remove('active')); | |
| sections.forEach(sec => sec.classList.add('hidden')); | |
| this.classList.add('active'); | |
| document.getElementById(`${sectionId}-section`).classList.remove('hidden'); | |
| if (sectionId === 'generate') { | |
| document.getElementById('videoOutputSection').classList.add('hidden'); // Hide video output when going back to generate | |
| document.getElementById('videoOutputSection').classList.remove('opacity-0'); // Reset opacity for next generation | |
| } | |
| }); | |
| }); | |
| document.querySelector('nav a.nav-link[data-section="generate"]').classList.add('active'); | |
| document.getElementById('generate-section').classList.remove('hidden'); | |
| // Tutorial History Item Click Simulation | |
| const historyItems = document.querySelectorAll('.history-item'); | |
| const videoTitleSpan = document.getElementById('videoTitle'); | |
| const videoTitleOverlay = document.getElementById('videoTitleOverlay'); | |
| const videoOutputSection = document.getElementById('videoOutputSection'); | |
| historyItems.forEach(item => { | |
| item.addEventListener('click', function() { | |
| const title = this.getAttribute('data-video-title'); | |
| videoTitleSpan.textContent = title + " (Preview)"; | |
| videoTitleOverlay.textContent = title; | |
| videoOutputSection.classList.remove('hidden'); | |
| videoOutputSection.classList.remove('opacity-0'); // Fade in video output if hidden | |
| // Optionally, you could change the video source here if you had different demo videos | |
| // document.getElementById('tutorialVideo').src = 'url_to_different_video.mp4'; | |
| // document.getElementById('tutorialVideo source').src = 'url_to_different_video.mp4'; | |
| // document.getElementById('tutorialVideo').load(); // Important to reload video source | |
| // Show status message | |
| const statusMessagesDiv = document.getElementById('statusMessages'); | |
| statusMessagesDiv.innerHTML = `<p class="text-gray-600"><i class="fas fa-video text-indigo-500 mr-1"></i> Loading tutorial from history: ${title}</p>`; | |
| statusMessagesDiv.scrollTop = statusMessagesDiv.scrollHeight; | |
| }); | |
| }); | |
| // Apply Settings Button Simulation | |
| document.getElementById('applySettingsButton').addEventListener('click', function() { | |
| const statusMessagesDiv = document.getElementById('statusMessages'); | |
| statusMessagesDiv.innerHTML = `<p class="text-green-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Settings Applied.</p>`; | |
| statusMessagesDiv.scrollTop = statusMessagesDiv.scrollHeight; | |
| }); | |
| }); | |
| document.getElementById('generateButton').addEventListener('click', function() { | |
| const topic = document.getElementById('tutorialTopic').value; | |
| const duration = document.getElementById('desiredDuration').value; | |
| const openaiKey = document.getElementById('openaiApiKey').value; | |
| const videoGenKey = document.getElementById('videoGenApiKey').value; | |
| const statusMessagesDiv = document.getElementById('statusMessages'); | |
| const errorMessageDiv = document.getElementById('errorMessage'); | |
| const generateButton = document.getElementById('generateButton'); | |
| const resetButton = document.getElementById('resetButton'); | |
| const statusSection = document.getElementById('statusSection'); | |
| const videoOutputSection = document.getElementById('videoOutputSection'); | |
| const videoTitleSpan = document.getElementById('videoTitle'); | |
| const videoTitleOverlay = document.getElementById('videoTitleOverlay'); | |
| const progressBar = document.getElementById('progressBar'); | |
| // Reset status and hide video output | |
| statusMessagesDiv.innerHTML = ''; | |
| errorMessageDiv.classList.add('hidden'); | |
| videoOutputSection.classList.add('hidden'); | |
| videoOutputSection.classList.remove('opacity-0'); // Reset opacity for next generation | |
| resetButton.classList.add('hidden'); | |
| generateButton.disabled = true; | |
| statusSection.querySelector('h3 i').classList.remove('fa-check-circle', 'text-green-500', 'fa-times-circle', 'text-red-500'); | |
| statusSection.querySelector('h3 i').classList.add('fa-spinner', 'fa-spin', 'mr-2'); | |
| statusSection.querySelector('h3').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Status Updates'; | |
| progressBar.style.transform = 'scaleX(0)'; // Reset progress bar | |
| progressBar.classList.add('active'); // Start progress bar animation | |
| const steps = [ | |
| { message: "Analyzing Tutorial Topic...", delay: 800 }, | |
| { message: "Generating Script Outline (AI)...", delay: 1500 }, | |
| { message: "Writing Script Content (AI)...", delay: 2200 }, | |
| { message: "Synthesizing Voiceover (AI)...", delay: 2000 }, | |
| { message: "Selecting Relevant Visuals...", delay: 1800 }, | |
| { message: "Assembling Video Scenes...", delay: 2500 }, | |
| { message: "Adding Transitions and Music...", delay: 1500 }, | |
| { message: "Rendering Final Video...", delay: 3000 } | |
| ]; | |
| let currentStepIndex = 0; | |
| function processStep() { | |
| if (currentStepIndex < steps.length) { | |
| simulateStep(statusMessagesDiv, steps[currentStepIndex].message, steps[currentStepIndex].delay, () => { | |
| progressBar.style.transform = `scaleX(${((currentStepIndex + 1) / steps.length)})`; // Update progress bar | |
| currentStepIndex++; | |
| processStep(); | |
| }, true); | |
| } else { | |
| // Simulate success - after all steps | |
| progressBar.classList.remove('active'); // Stop progress bar animation | |
| statusMessagesDiv.innerHTML = '<p class="text-green-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Tutorial generation complete!</p>'; | |
| statusSection.querySelector('h3 i').classList.remove('fa-spinner', 'fa-spin', 'mr-2'); | |
| statusSection.querySelector('h3 i').classList.add('fa-check-circle', 'text-green-500', 'mr-2'); | |
| statusSection.querySelector('h3').innerHTML = '<i class="fas fa-check-circle text-green-500 mr-2"></i> Status Updates'; | |
| videoTitleSpan.textContent = topic + " in " + duration + " Minutes (Preview)"; | |
| videoTitleOverlay.textContent = topic + " - " + duration + " Minute Tutorial"; // Set video overlay title | |
| videoOutputSection.classList.remove('hidden'); | |
| setTimeout(() => videoOutputSection.classList.remove('opacity-0'), 50); // Fade in video output | |
| generateButton.disabled = false; | |
| generateButton.classList.add('hidden'); | |
| resetButton.classList.remove('hidden'); | |
| } | |
| } | |
| processStep(); // Start the step processing | |
| }); | |
| document.getElementById('resetButton').addEventListener('click', function() { | |
| // ... (same resetButton event listener logic as before) ... | |
| const statusMessagesDiv = document.getElementById('statusMessages'); | |
| const errorMessageDiv = document.getElementById('errorMessage'); | |
| const generateButton = document.getElementById('generateButton'); | |
| const resetButton = document.getElementById('resetButton'); | |
| const statusSection = document.getElementById('statusSection'); | |
| const videoOutputSection = document.getElementById('videoOutputSection'); | |
| const progressBar = document.getElementById('progressBar'); | |
| 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>'; | |
| errorMessageDiv.classList.add('hidden'); | |
| videoOutputSection.classList.add('hidden'); | |
| videoOutputSection.classList.remove('opacity-0'); // Reset opacity for next generation | |
| generateButton.disabled = false; | |
| generateButton.classList.remove('hidden'); | |
| resetButton.classList.add('hidden'); | |
| statusSection.querySelector('h3 i').classList.remove('fa-times-circle', 'text-red-500', 'fa-spinner', 'fa-spin', 'mr-2'); | |
| statusSection.querySelector('h3 i').classList.add('fa-check-circle', 'text-green-500', 'mr-2'); | |
| statusSection.querySelector('h3').innerHTML = '<i class="fas fa-check-circle text-green-500 mr-2"></i> Status Updates'; | |
| progressBar.classList.remove('active'); // Stop progress bar animation if running | |
| progressBar.style.transform = 'scaleX(0)'; // Reset progress bar | |
| }); | |
| function simulateStep(statusDiv, message, delay, callback, isSuccess = true) { | |
| setTimeout(function() { | |
| const messageElement = document.createElement('p'); | |
| if (isSuccess) { | |
| messageElement.classList.add('text-gray-600'); | |
| messageElement.innerHTML = `<i class="fas fa-spinner fa-pulse text-indigo-500 mr-1"></i> ${message}`; // Use spinner for ongoing steps | |
| } else { | |
| messageElement.classList.add('text-red-500'); | |
| messageElement.innerHTML = `<i class="fas fa-times-circle text-red-500 mr-1"></i> ${message}`; | |
| document.getElementById('errorMessage').textContent = "Error during tutorial generation. Please check API keys and try again."; | |
| document.getElementById('errorMessage').classList.remove('hidden'); | |
| document.getElementById('statusSection').querySelector('h3 i').classList.remove('fa-spinner', 'fa-spin', 'mr-2'); | |
| document.getElementById('statusSection').querySelector('h3 i').classList.add('fa-times-circle', 'text-red-500', 'mr-2'); | |
| document.getElementById('statusSection').querySelector('h3').innerHTML = '<i class="fas fa-times-circle text-red-500 mr-2"></i> Status Updates'; | |
| document.getElementById('generateButton').disabled = false; | |
| document.getElementById('generateButton').classList.add('hidden'); | |
| document.getElementById('resetButton').classList.remove('hidden'); | |
| document.getElementById('progressBar').classList.remove('active'); // Stop progress bar on error | |
| } | |
| statusDiv.appendChild(messageElement); | |
| statusDiv.scrollTop = statusDiv.scrollHeight; | |
| if (callback) callback(); | |
| }, delay + Math.random() * 500); // Add slight random delay variation | |
| } | |
| </script> | |
| </body> | |
| </html> |