Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <!-- iOS viewport settings --> | |
| <title>Autotutorial.ai - iOS Demo</title> <!-- iOS Style Title --> | |
| <link rel="manifest" href="manifest.json"> <!-- PWA manifest (placeholder - create manifest.json for full PWA) --> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> <!-- iOS PWA meta --> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="default"> <!-- iOS status bar style --> | |
| <!-- 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 & SF Pro Display Fonts (SF Pro Display approximation) --> | |
| <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=SF+Pro+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> <!-- SF Pro Display approximation --> | |
| <style> | |
| /* iOS App Reset and Base Styles */ | |
| body { | |
| font-family: 'Inter', sans-serif; /* Default to Inter, fallback if SF Pro Display doesn't load perfectly */ | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| background-color: var(--gray-100); /* Lighter iOS-like background */ | |
| color: var(--gray-900); | |
| margin: 0; /* Reset margins */ | |
| padding-bottom: 50px; /* Padding for bottom tab bar */ | |
| } | |
| /* Use SF Pro Display if available, for headings and key UI text - approximation */ | |
| @font-face { | |
| font-family: 'SF Pro Display'; /* Name to use in CSS */ | |
| src: url('https://cdn.jsdelivr.net/gh/fontsource/fontsource-sf-pro-display@latest/files/sf-pro-display-latin-400-normal.woff2') format('woff2'), /* Example CDN - consider hosting or local */ | |
| url('https://cdn.jsdelivr.net/gh/fontsource/fontsource-sf-pro-display@latest/files/sf-pro-display-latin-400-normal.woff') format('woff'); | |
| /* Add other weights as needed */ | |
| font-weight: 400; | |
| font-style: normal; | |
| font-display: swap; /* or optional */ | |
| } | |
| h1, h2, h3, h4, h5, h6, .ios-title-font { font-family: 'SF Pro Display', sans-serif; } /* Apply to titles and key text */ | |
| .app-container { | |
| max-width: 768px; /* Mobile-first max width */ | |
| margin: 0 auto; /* Center on larger screens */ | |
| background-color: var(--gray-50); /* Even lighter background, closer to iOS */ | |
| border-radius: 0px; /* No border radius for full-screen app feel */ | |
| overflow: hidden; | |
| box-shadow: none; /* Remove shadow for flatter iOS style */ | |
| min-height: 100vh; /* Full viewport height */ | |
| display: flex; | |
| flex-direction: column; /* Vertical flex layout */ | |
| } | |
| header { | |
| background-color: var(--gray-50); /* White header background */ | |
| padding: 2rem 1.5rem 1rem 1.5rem; /* Adjusted header padding - less top, more bottom */ | |
| color: var(--gray-900); | |
| border-bottom: 1px solid var(--gray-200); /* iOS-style separator */ | |
| } | |
| header h1 { | |
| font-size: 2.25rem; /* Large iOS title size */ | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 0.25rem; /* Reduced bottom margin */ | |
| text-align: left; /* Left-align iOS style */ | |
| } | |
| header p { | |
| font-size: 1.1rem; /* Slightly smaller subtitle */ | |
| color: var(--gray-600); /* Muted subtitle color */ | |
| font-weight: 400; | |
| } | |
| main { | |
| padding: 1.5rem; /* Reduced main padding for mobile */ | |
| flex-grow: 1; /* Main content takes up remaining space */ | |
| } | |
| section { | |
| margin-bottom: 2rem; /* Reduced section margin */ | |
| } | |
| section h2 { | |
| font-size: 1.7rem; /* Section title size */ | |
| font-weight: 600; | |
| color: var(--gray-800); | |
| margin-bottom: 1.25rem; /* Reduced section title margin */ | |
| letter-spacing: -0.015em; | |
| text-align: left; /* Left-align section titles */ | |
| } | |
| section h3 { | |
| font-size: 1.3rem; /* Subtitle size */ | |
| font-weight: 500; | |
| color: var(--gray-700); | |
| margin-bottom: 0.8rem; /* Reduced subtitle margin */ | |
| letter-spacing: -0.01em; | |
| text-align: left; /* Left-align subtitles */ | |
| } | |
| .input-label { @apply block text-gray-700 text-sm font-semibold mb-1; } /* Smaller label margin */ | |
| .status-box { @apply border rounded-md p-4 mb-3 bg-gray-50 border-gray-200 relative overflow-hidden; } /* Reduced status box margin */ | |
| .error-text { @apply text-red-500 mt-1 text-sm; } /* Smaller error text margin */ | |
| .video-player-container { @apply rounded-md overflow-hidden shadow-md; } /* Keep shadow for video player */ | |
| .video-overlay-title { position: absolute; bottom: 15px; left: 15px; color: white; font-size: 1.5rem; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); } /* Smaller video overlay title */ | |
| footer { | |
| background-color: var(--gray-50); /* White footer */ | |
| border-top: 1px solid var(--gray-200); /* iOS footer separator */ | |
| padding: 1.25rem 1.5rem; /* Reduced footer padding */ | |
| 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-3.5 rounded-md shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-200 cursor-pointer mb-2; } /* Reduced tutorial item padding and margin */ | |
| .tutorial-item h3 { @apply font-semibold text-gray-800 mb-1; font-size: 1.1rem; } /* Smaller tutorial item title */ | |
| .tutorial-item p { @apply text-gray-600 text-sm; } | |
| .tutorial-list-section { display: flex; flex-direction: column; gap: 0.75rem; } /* Vertical tutorial list */ | |
| .settings-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } /* Single column settings on mobile */ | |
| @media (min-width: 768px) { /* Medium screens and up */ | |
| .settings-grid { grid-template-columns: 1fr 1fr; } /* Two-column settings on larger screens */ | |
| } | |
| .help-section p { line-height: 1.6; margin-bottom: 1rem; } | |
| /* Radix UI Button Styling - iOS Style Refinements */ | |
| .radix-button { | |
| @apply inline-flex items-center justify-center rounded-md px-4 py-2 font-semibold text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors duration-200; /* Reduced button padding */ | |
| -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */ | |
| } | |
| .radix-button-primary { @apply radix-button bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white shadow-sm hover:shadow-md; } | |
| .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; } | |
| .radix-button-apply { @apply radix-button bg-green-500 hover:bg-green-600 active:bg-green-700 text-white shadow-sm hover:shadow-md; } | |
| /* Radix UI Input Styling - iOS Style Refinements */ | |
| .radix-input { | |
| @apply appearance-none border rounded-md w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-shadow duration-200; /* Reduced input padding */ | |
| border-color: var(--gray-300); | |
| background-color: var(--gray-50); /* Light gray input background */ | |
| color: var(--gray-900); | |
| box-shadow: inset 0 0 0 1px var(--gray-300); /* iOS-like border shadow */ | |
| } | |
| .radix-input:focus { @apply shadow-none border-indigo-500; box-shadow: inset 0 0 0 2px var(--indigo-500); } /* iOS-like focus */ | |
| /* Radix UI Select Styling - iOS Style - Needs more JS for true iOS Picker */ | |
| .radix-select-trigger { | |
| @apply radix-button radix-button-secondary w-full justify-between; | |
| border-radius: 8px; /* More rounded select */ | |
| padding-left: 1rem; padding-right: 1rem; /* Adjust select padding */ | |
| } | |
| .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 - iOS Style - Thinner */ | |
| .status-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background-color: var(--indigo-500); 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; } | |
| /* Bottom Tab Bar Navigation - iOS Style */ | |
| .bottom-tab-bar { | |
| position: fixed; bottom: 0; left: 0; right: 0; | |
| background-color: var(--gray-50); /* White tab bar background */ | |
| border-top: 1px solid var(--gray-200); /* iOS tab bar border */ | |
| padding-top: 0.5rem; padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem); /* Safe area padding for iOS */ | |
| display: flex; justify-content: space-around; | |
| z-index: 100; /* Ensure it's on top */ | |
| } | |
| .bottom-tab-button { | |
| display: flex; flex-direction: column; align-items: center; | |
| color: var(--gray-500); /* Inactive tab color */ | |
| text-decoration: none; | |
| font-size: 0.85rem; /* Smaller tab label */ | |
| padding: 0.5rem 1rem; border-radius: 8px; /* Tab button padding and rounded corners */ | |
| -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */ | |
| } | |
| .bottom-tab-button.active, .bottom-tab-button:active, .bottom-tab-button:hover { | |
| color: var(--indigo-600); /* Active/tapped tab color */ | |
| background-color: var(--gray-100); /* Slightly highlight active tab */ | |
| } | |
| .bottom-tab-icon { | |
| font-size: 1.3rem; /* Tab icon size */ | |
| margin-bottom: 0.25rem; | |
| } | |
| /* Scrollbar - minimal for mobile */ | |
| ::-webkit-scrollbar { width: 4px; height: 4px; } | |
| ::-webkit-scrollbar-track { background: transparent; } /* Transparent track */ | |
| ::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 2px; } /* Thinner, lighter thumb */ | |
| ::-webkit-scrollbar-thumb:hover { background: var(--gray-500); } | |
| * { scrollbar-width: thin; scrollbar-color: var(--gray-400) transparent; } /* Firefox scrollbar */ | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> <!-- Body background for overscroll effect --> | |
| <div class="app-container"> | |
| <!-- Header Section (iOS Style - Large Title) --> | |
| <header> | |
| <h1 class="ios-title-font">Autotutorial.ai</h1> | |
| <p>Generate Video Tutorials</p> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main> | |
| <!-- Generate Tutorial Section --> | |
| <section id="generate-section"> | |
| <h2 class="text-xl">New Tutorial</h2> | |
| <p class="text-gray-700 mb-6">Set topic and duration to begin.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5"> | |
| <div> | |
| <label for="tutorialTopic" class="input-label">Topic <span class="text-gray-500">(e.g., "React Forms")</span></label> | |
| <input type="text" id="tutorialTopic" class="radix-input" placeholder="Enter topic" value="Vue.js Teleport Feature" required> | |
| </div> | |
| <div> | |
| <label for="desiredDuration" class="input-label">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-5"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-800">API Keys <span class="text-gray-500">(Optional)</span></h3> | |
| <div class="settings-grid"> | |
| <div> | |
| <label for="openaiApiKey" class="input-label">OpenAI Key <span class="text-gray-500">(Script AI)</span></label> | |
| <input type="text" id="openaiApiKey" class="radix-input" placeholder="OpenAI API Key (Optional)" value="sk-DEMO_OPENAI_KEY"> | |
| </div> | |
| <div> | |
| <label for="videoGenApiKey" class="input-label">Video Key <span class="text-gray-500">(Video AI)</span></label> | |
| <input type="text" id="videoGenApiKey" class="radix-input" placeholder="Video API Key (Optional)" value="vg-DEMO_VIDEO_GEN_KEY"> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-2">For enhanced AI features.</p> | |
| </section> | |
| <section class="mb-5 flex justify-start gap-3"> | |
| <button id="generateButton" class="radix-button-primary"><i class="fas fa-magic mr-2"></i> Generate</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-2"><i class="fas fa-info-circle mr-2"></i> Status</h3> | |
| <div id="statusMessages"> | |
| <p class="text-gray-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Ready. Tap "Generate".</p> | |
| </div> | |
| <p id="errorMessage" class="error-text hidden"></p> | |
| <div id="progressBar" class="status-progress-bar"></div> | |
| </section> | |
| <section id="videoOutputSection" class="hidden transition-opacity opacity-0 duration-200"> | |
| <h2 class="text-lg font-semibold mb-3 text-gray-800"><i class="fas fa-film mr-2"></i> 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"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div id="videoTitleOverlay" class="video-overlay-title"></div> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-700 text-sm"><strong>Title:</strong> <span id="videoTitle"></span></p> | |
| </div> | |
| <div> | |
| <a href="#" id="downloadButton" class="radix-button-primary" download="tutorial.mp4"><i class="fas fa-download mr-2"></i> Download</a> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| <!-- Tutorial History Section --> | |
| <section id="history-section" class="hidden"> | |
| <h2 class="text-xl">History</h2> | |
| <p class="text-gray-700 mb-6">Past tutorials.</p> | |
| <div class="tutorial-list-section"> | |
| <div class="tutorial-item history-item" data-video-title="Mastering JavaScript Promises"> | |
| <h3>JavaScript Promises</h3> | |
| <p>Oct 26, 2023</p> | |
| </div> | |
| <div class="tutorial-item history-item" data-video-title="Introduction to Python for Data Science"> | |
| <h3>Python for Data Science</h3> | |
| <p>Oct 25, 2023</p> | |
| </div> | |
| <div class="tutorial-item history-item" data-video-title="Building a REST API with Express.js"> | |
| <h3>REST API with Express.js</h3> | |
| <p>Oct 20, 2023</p> | |
| </div> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-500">Demo history.</p> | |
| </section> | |
| <!-- Settings Section --> | |
| <section id="settings-section" class="hidden"> | |
| <h2 class="text-xl">Settings</h2> | |
| <p class="text-gray-700 mb-6">App preferences.</p> | |
| <div class="settings-grid"> | |
| <div> | |
| <label for="defaultDurationSetting" class="input-label">Default 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">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</option> | |
| <option value="fr-FR" class="radix-select-item">French</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="outputFormat" class="input-label">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-4 flex justify-start"> | |
| <button id="applySettingsButton" class="radix-button-apply"><i class="fas fa-check mr-2"></i> Apply</button> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-500">Demo settings.</p> | |
| </section> | |
| <!-- Help Section --> | |
| <section id="help-section" class="hidden"> | |
| <h2 class="text-xl">Help</h2> | |
| <p class="text-gray-700 mb-6">App guidance.</p> | |
| <div class="help-section"> | |
| <p>Welcome to Autotutorial.ai! Generate videos easily.</p> | |
| <p><strong>Getting Started:</strong></p> | |
| <ol class="list-decimal pl-5 mb-4"> | |
| <li>Go to "Generate" tab.</li> | |
| <li>Enter tutorial topic.</li> | |
| <li>Select duration.</li> | |
| <li>(Optional) Add API keys.</li> | |
| <li>Tap "Generate".</li> | |
| <li>See "Status" for progress.</li> | |
| <li>Preview in "Preview" section.</li> | |
| </ol> | |
| <p><strong>History:</strong></p> | |
| <p>Access past tutorials in "History" (demo).</p> | |
| <p><strong>Settings:</strong></p> | |
| <p>Customize preferences in "Settings" (demo).</p> | |
| <p>For support, contact <a href="mailto:[email protected]">[email protected]</a>.</p> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Bottom Tab Bar Navigation --> | |
| <nav class="bottom-tab-bar"> | |
| <a href="#generate" class="bottom-tab-button active" data-section="generate"> | |
| <i class="fas fa-magic bottom-tab-icon"></i> | |
| Generate | |
| </a> | |
| <a href="#history" class="bottom-tab-button" data-section="history"> | |
| <i class="fas fa-history bottom-tab-icon"></i> | |
| History | |
| </a> | |
| <a href="#settings" class="bottom-tab-button" data-section="settings"> | |
| <i class="fas fa-cog bottom-tab-icon"></i> | |
| Settings | |
| </a> | |
| <a href="#help" class="bottom-tab-button" data-section="help"> | |
| <i class="fas fa-question-circle bottom-tab-icon"></i> | |
| Help | |
| </a> | |
| </nav> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Bottom Tab Navigation functionality | |
| const tabButtons = document.querySelectorAll('.bottom-tab-button'); | |
| const sections = document.querySelectorAll('main > section'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', function(event) { | |
| event.preventDefault(); | |
| const sectionId = this.getAttribute('data-section'); | |
| tabButtons.forEach(btn => btn.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'); | |
| document.getElementById('videoOutputSection').classList.remove('opacity-0'); | |
| } | |
| }); | |
| }); | |
| document.querySelector('.bottom-tab-button[data-section="generate"]').classList.add('active'); | |
| document.getElementById('generate-section').classList.remove('hidden'); | |
| // Tutorial History Item Click Simulation (same as before) | |
| 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'); | |
| const statusMessagesDiv = document.getElementById('statusMessages'); | |
| statusMessagesDiv.innerHTML = `<p class="text-gray-600"><i class="fas fa-video text-indigo-500 mr-1"></i> Loading: ${title}</p>`; | |
| statusMessagesDiv.scrollTop = statusMessagesDiv.scrollHeight; | |
| }); | |
| }); | |
| // Apply Settings Button Simulation (same as before) | |
| 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() { | |
| // ... (same generateButton event listener logic as before) ... | |
| 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'); | |
| 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'; | |
| progressBar.style.transform = 'scaleX(0)'; | |
| progressBar.classList.add('active'); | |
| const steps = [ | |
| { message: "Analyzing Topic...", delay: 800 }, | |
| { message: "Generating Script...", delay: 1500 }, | |
| { message: "Creating Voiceover...", delay: 2200 }, | |
| { message: "Synthesizing Scenes...", delay: 2000 }, | |
| { message: "Selecting Visuals...", delay: 1800 }, | |
| { message: "Assembling Video...", delay: 2500 }, | |
| { message: "Adding Effects...", delay: 1500 }, | |
| { message: "Rendering 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)})`; | |
| currentStepIndex++; | |
| processStep(); | |
| }, true); | |
| } else { | |
| progressBar.classList.remove('active'); | |
| statusMessagesDiv.innerHTML = '<p class="text-green-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> 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'; | |
| videoTitleSpan.textContent = topic + " (" + duration + "min Preview)"; | |
| videoTitleOverlay.textContent = topic; | |
| videoOutputSection.classList.remove('hidden'); | |
| setTimeout(() => videoOutputSection.classList.remove('opacity-0'), 50); | |
| generateButton.disabled = false; | |
| generateButton.classList.add('hidden'); | |
| resetButton.classList.remove('hidden'); | |
| } | |
| } | |
| processStep(); | |
| }); | |
| 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. Tap "Generate".</p>'; | |
| errorMessageDiv.classList.add('hidden'); | |
| videoOutputSection.classList.add('hidden'); | |
| videoOutputSection.classList.remove('opacity-0'); | |
| 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'; | |
| progressBar.classList.remove('active'); | |
| progressBar.style.transform = 'scaleX(0)'; | |
| }); | |
| 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}`; | |
| } 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 generating tutorial. Check API keys."; | |
| 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'; | |
| document.getElementById('generateButton').disabled = false; | |
| document.getElementById('generateButton').classList.add('hidden'); | |
| document.getElementById('resetButton').classList.remove('hidden'); | |
| document.getElementById('progressBar').classList.remove('active'); | |
| } | |
| statusDiv.appendChild(messageElement); | |
| statusDiv.scrollTop = statusDiv.scrollHeight; | |
| if (callback) callback(); | |
| }, delay + Math.random() * 500); | |
| } | |
| </script> | |
| </body> | |
| </html> |