Spaces:

samihalawa
/

Autotutorial

Running

App Files Files Community

Luigi commited on Feb 11

Commit

a4cda04

verified ·

1 Parent(s): bf4a5d3

Update index.html

Browse files

Files changed (1) hide show

index.html +282 -430

index.html CHANGED Viewed

@@ -2,276 +2,130 @@
 <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">
@@ -279,160 +133,175 @@
                         </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');
@@ -442,25 +311,24 @@
                     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;
@@ -477,16 +345,13 @@
             // 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 = [
@@ -504,24 +369,21 @@
             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();
@@ -530,28 +392,21 @@
         });
         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)';
         });
@@ -559,20 +414,17 @@
             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;

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Autotutorial.ai - Ionic Demo</title>
+    <link rel="manifest" href="manifest.json">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <!-- Ionic CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@latest/css/ionic.bundle.css">
     <!-- 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 Font from Google 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&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --ion-font-family: 'Inter', sans-serif;
         }
+        body {
+            font-family: var(--ion-font-family);
         }
+        .video-player-container {
+            border-radius: 8px;
             overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            position: relative; /* For video overlay */
         }
+        .video-overlay-title {
+            position: absolute;
+            bottom: 16px;
+            left: 16px;
+            color: white;
+            font-size: 1.5em;
             font-weight: 600;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
         }
+        .status-box {
+            border-radius: 8px;
+            border: 1px solid var(--ion-color-light);
+            background-color: var(--ion-color-light-contrast);
+            padding: 16px;
+            margin-bottom: 16px;
         }
+        .status-progress-bar {
+            margin-top: 8px;
         }
     </style>
 </head>
+<body>
+    <ion-app>
+        <ion-header translucent="true">
+            <ion-toolbar>
+                <ion-title>Autotutorial.ai</ion-title>
+            </ion-toolbar>
+        </ion-header>
+        <ion-content fullscreen="true">
+            <ion-card>
+                <ion-card-header>
+                    <ion-card-title>Generate Tutorial</ion-card-title>
+                    <ion-card-subtitle>Create a new video tutorial</ion-card-subtitle>
+                </ion-card-header>
+                <ion-card-content>
+                    <ion-list lines="full">
+                        <ion-item>
+                            <ion-label position="floating">Tutorial Topic</ion-label>
+                            <ion-input type="text" id="tutorialTopic" value="React State Management Best Practices"></ion-input>
+                        </ion-item>
+                        <ion-item>
+                            <ion-label>Desired Duration</ion-label>
+                            <ion-select value="10" id="desiredDuration">
+                                <ion-select-option value="5">5 Minutes</ion-select-option>
+                                <ion-select-option value="10">10 Minutes</ion-select-option>
+                                <ion-select-option value="15">15 Minutes</ion-select-option>
+                                <ion-select-option value="20">20 Minutes</ion-select-option>
+                            </ion-select>
+                        </ion-item>
+                        <ion-item>
+                            <ion-label position="floating">OpenAI API Key (Optional)</ion-label>
+                            <ion-input type="text" id="openaiApiKey" value="sk-DEMO_OPENAI_KEY" placeholder="For enhanced script generation"></ion-input>
+                        </ion-item>
+                        <ion-item>
+                            <ion-label position="floating">Video Generation API Key (Optional)</ion-label>
+                            <ion-input type="text" id="videoGenApiKey" value="vg-DEMO_VIDEO_GEN_KEY" placeholder="For advanced video synthesis"></ion-input>
+                        </ion-item>
+                    </ion-list>
+                    <div style="margin-top: 20px; display: flex; gap: 10px;">
+                        <ion-button id="generateButton" expand="block"><ion-icon slot="start" icon="magic"></ion-icon>Generate Tutorial</ion-button>
+                        <ion-button id="resetButton" expand="block" color="secondary" class="ion-hide"><ion-icon slot="start" icon="refresh"></ion-icon>Reset</ion-button>
                     </div>
+                </ion-card-content>
+            </ion-card>
+            <ion-card id="statusSection" class="status-box">
+                <ion-card-header>
+                    <ion-card-title><ion-icon icon="information-circle" style="margin-right: 8px;"></ion-icon>Status Updates</ion-card-title>
+                </ion-card-header>
+                <ion-card-content>
                     <div id="statusMessages">
+                        <p class="ion-text-color-secondary"><ion-icon icon="checkmark-circle" color="success" style="margin-right: 4px;"></ion-icon>Ready to generate. Click "Generate Tutorial".</p>
                     </div>
+                    <p id="errorMessage" class="ion-text-color-danger ion-hide" style="margin-top: 8px;"></p>
+                    <ion-progress-bar value="0" buffer="0" reversed="false" class="status-progress-bar" id="progressBar"></ion-progress-bar>
+                </ion-card-content>
+            </ion-card>
+            <ion-card id="videoOutputSection" class="ion-hide">
+                <ion-card-header>
+                    <ion-card-title><ion-icon icon="film" style="margin-right: 8px;"></ion-icon>Tutorial Preview</ion-card-title>
+                </ion-card-header>
+                <ion-card-content>
                     <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">
                         </video>
                         <div id="videoTitleOverlay" class="video-overlay-title"></div>
                     </div>
+                    <div style="margin-top: 16px; display: flex; justify-content: space-between; align-items: center;">
                         <div>
+                            <p><strong id="videoTitle"></strong></p>
+                            <ion-text color="secondary"><p>Generated tutorial preview</p></ion-text>
                         </div>
+                        <ion-button id="downloadButton" download="tutorial.mp4"><ion-icon slot="start" icon="download"></ion-icon>Download</ion-button>
                     </div>
+                </ion-card-content>
+            </ion-card>
+            <ion-card id="history-section" class="ion-hide">
+                <ion-card-header>
+                    <ion-card-title><ion-icon icon="time" style="margin-right: 8px;"></ion-icon>Tutorial History</ion-card-title>
+                    <ion-card-subtitle>Access past tutorials</ion-card-subtitle>
+                </ion-card-header>
+                <ion-card-content>
+                    <ion-list id="historyList">
+                        <ion-item button class="history-item" data-video-title="Mastering JavaScript Promises">
+                            <ion-label>
+                                <h3>Mastering JavaScript Promises</h3>
+                                <p>Generated: Oct 26, 2023</p>
+                            </ion-label>
+                        </ion-item>
+                        <ion-item button class="history-item" data-video-title="Introduction to Python for Data Science">
+                            <ion-label>
+                                <h3>Introduction to Python for Data Science</h3>
+                                <p>Generated: Oct 25, 2023</p>
+                            </ion-label>
+                        </ion-item>
+                        <ion-item button class="history-item" data-video-title="Building a REST API with Express.js">
+                            <ion-label>
+                                <h3>Building a REST API with Express.js</h3>
+                                <p>Generated: Oct 20, 2023</p>
+                            </ion-label>
+                        </ion-item>
+                    </ion-list>
+                    <ion-text color="secondary"><p style="margin-top: 16px;">Demo history is simulated.</p></ion-text>
+                </ion-card-content>
+            </ion-card>
+            <ion-card id="settings-section" class="ion-hide">
+                <ion-card-header>
+                    <ion-card-title><ion-icon icon="settings" style="margin-right: 8px;"></ion-icon>Settings</ion-card-title>
+                    <ion-card-subtitle>Customize preferences</ion-card-subtitle>
+                </ion-card-header>
+                <ion-card-content>
+                    <ion-list lines="full">
+                        <ion-item>
+                            <ion-label>Default Duration</ion-label>
+                            <ion-select value="10" id="defaultDurationSetting">
+                                <ion-select-option value="5">5 Minutes</ion-select-option>
+                                <ion-select-option value="10">10 Minutes</ion-select-option>
+                                <ion-select-option value="15">15 Minutes</ion-select-option>
+                            </ion-select>
+                        </ion-item>
+                        <ion-item>
+                            <ion-label>Video Quality</ion-label>
+                            <ion-select value="720p" id="videoQualitySetting">
+                                <ion-select-option value="720p">720p HD</ion-select-option>
+                                <ion-select-option value="1080p">1080p Full HD</ion-select-option>
+                                <ion-select-option value="4k">4K Ultra HD (Premium)</ion-select-option>
+                            </ion-select>
+                        </ion-item>
+                        <ion-item>
+                            <ion-label>Voiceover Language</ion-label>
+                            <ion-select value="en-US" id="voiceoverLanguage">
+                                <ion-select-option value="en-US">English (US)</ion-select-option>
+                                <ion-select-option value="en-GB">English (UK)</ion-select-option>
+                                <ion-select-option value="es-ES">Spanish</ion-select-option>
+                                <ion-select-option value="fr-FR">French</ion-select-option>
+                            </ion-select>
+                        </ion-item>
+                        <ion-item>
+                            <ion-label>Output Format</ion-label>
+                            <ion-select value="mp4" id="outputFormat">
+                                <ion-select-option value="mp4">MP4 (Recommended)</ion-select-option>
+                                <ion-select-option value="mov">MOV</ion-select-option>
+                                <ion-select-option value="webm">WebM</ion-select-option>
+                            </ion-select>
+                        </ion-item>
+                    </ion-list>
+                    <div style="margin-top: 20px;">
+                        <ion-button id="applySettingsButton" expand="block" color="success"><ion-icon slot="start" icon="checkmark"></ion-icon>Apply Settings</ion-button>
                     </div>
+                    <ion-text color="secondary"><p style="margin-top: 16px;">Demo settings only.</p></ion-text>
+                </ion-card-content>
+            </ion-card>
+            <ion-card id="help-section" class="ion-hide">
+                <ion-card-header>
+                    <ion-card-title><ion-icon icon="help-circle" style="margin-right: 8px;"></ion-icon>Help & Support</ion-card-title>
+                    <ion-card-subtitle>Guidance and resources</ion-card-subtitle>
+                </ion-card-header>
+                <ion-card-content>
+                    <p>Welcome to Autotutorial.ai! Generate tutorials with ease.</p>
                     <p><strong>Getting Started:</strong></p>
+                    <ol>
+                        <li>Go to "Generate Tutorial" tab.</li>
+                        <li>Enter your tutorial topic.</li>
+                        <li>Select desired duration.</li>
+                        <li>(Optional) Add API keys for enhanced features.</li>
+                        <li>Tap "Generate Tutorial" to start.</li>
+                        <li>Monitor "Status Updates" for progress.</li>
+                        <li>Preview tutorial in "Tutorial Preview" section.</li>
                     </ol>
+                    <p><strong>Tutorial History:</strong></p>
+                    <p>Access and manage past tutorials in "Tutorial History" (demo feature).</p>
                     <p><strong>Settings:</strong></p>
+                    <p>Customize default preferences in "Settings" (basic demo settings).</p>
+                    <p>For further assistance, contact support at <a href="mailto:[email protected]">[email protected]</a>.</p>
+                </ion-card-content>
+            </ion-card>
+        </ion-content>
+        <ion-tabs>
+            <ion-tab-bar slot="bottom">
+                <ion-tab-button tab="generate" data-section="generate" class="tab-button-link active">
+                    <ion-icon icon="magic"></ion-icon>
+                    <ion-label>Generate</ion-label>
+                </ion-tab-button>
+                <ion-tab-button tab="history" data-section="history" class="tab-button-link">
+                    <ion-icon icon="time"></ion-icon>
+                    <ion-label>History</ion-label>
+                </ion-tab-button>
+                <ion-tab-button tab="settings" data-section="settings" class="tab-button-link">
+                    <ion-icon icon="settings"></ion-icon>
+                    <ion-label>Settings</ion-label>
+                </ion-tab-button>
+                <ion-tab-button tab="help" data-section="help" class="tab-button-link">
+                    <ion-icon icon="help-circle"></ion-icon>
+                    <ion-label>Help</ion-label>
+                </ion-tab-button>
+            </ion-tab-bar>
+        </ion-tabs>
+    </ion-app>
+    <!-- Ionic Scripts -->
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
+            // Tab Navigation
+            const tabButtons = document.querySelectorAll('.tab-button-link');
+            const sections = ['generate-section', 'history-section', 'settings-section', 'help-section'];
             tabButtons.forEach(button => {
                 button.addEventListener('click', function(event) {
                     event.preventDefault();
+                    const sectionId = this.getAttribute('data-section') + '-section';
                     tabButtons.forEach(btn => btn.classList.remove('active'));
+                    sections.forEach(sec => document.getElementById(sec).classList.add('ion-hide'));
                     this.classList.add('active');
+                    document.getElementById(sectionId).classList.remove('ion-hide');
+                    if (sectionId === 'generate-section') {
+                        document.getElementById('videoOutputSection').classList.add('ion-hide');
                         document.getElementById('videoOutputSection').classList.remove('opacity-0');
                     }
                 });
             });
+            document.querySelector('.tab-button-link[data-section="generate"]').classList.add('active');
+            sections.filter(sec => sec !== 'generate-section').forEach(sec => document.getElementById(sec).classList.add('ion-hide'));
+            // Tutorial History Item Click Simulation
             const historyItems = document.querySelectorAll('.history-item');
             const videoTitleSpan = document.getElementById('videoTitle');
             const videoTitleOverlay = document.getElementById('videoTitleOverlay');
                     const title = this.getAttribute('data-video-title');
                     videoTitleSpan.textContent = title + " (Preview)";
                     videoTitleOverlay.textContent = title;
+                    videoOutputSection.classList.remove('ion-hide');
                     videoOutputSection.classList.remove('opacity-0');
                     const statusMessagesDiv = document.getElementById('statusMessages');
+                    statusMessagesDiv.innerHTML = `<p class="ion-text-color-secondary"><ion-icon icon="video" color="primary" style="margin-right: 4px;"></ion-icon>Loading: ${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="ion-text-color-success"><ion-icon icon="checkmark-circle" color="success" style="margin-right: 4px;"></ion-icon>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;
             // Reset status and hide video output
             statusMessagesDiv.innerHTML = '';
+            errorMessageDiv.classList.add('ion-hide');
+            videoOutputSection.classList.add('ion-hide');
             videoOutputSection.classList.remove('opacity-0');
+            resetButton.classList.remove('ion-hide');
+            generateButton.classList.add('ion-hide'); // Hide generate, show reset
+            resetButton.classList.remove('ion-hide');
+            progressBar.value = 0;
             const steps = [
             function processStep() {
                 if (currentStepIndex < steps.length) {
                     simulateStep(statusMessagesDiv, steps[currentStepIndex].message, steps[currentStepIndex].delay, () => {
+                        progressBar.value = ((currentStepIndex + 1) / steps.length);
                         currentStepIndex++;
                         processStep();
                     }, true);
                 } else {
+                    progressBar.value = 1;
+                    statusMessagesDiv.innerHTML = '<p class="ion-text-color-success"><ion-icon icon="checkmark-circle" color="success" style="margin-right: 4px;"></ion-icon>Generation Complete!</p>';
                     videoTitleSpan.textContent = topic + " (" + duration + "min Preview)";
                     videoTitleOverlay.textContent = topic;
+                    videoOutputSection.classList.remove('ion-hide');
                     setTimeout(() => videoOutputSection.classList.remove('opacity-0'), 50);
+                    generateButton.classList.remove('ion-hide'); // Show generate, hide reset
+                    generateButton.classList.add('ion-hide');
+                    resetButton.classList.remove('ion-hide');
                 }
             }
             processStep();
         });
         document.getElementById('resetButton').addEventListener('click', function() {
             const statusMessagesDiv = document.getElementById('statusMessages');
             const errorMessageDiv = document.getElementById('errorMessage');
             const generateButton = document.getElementById('generateButton');
             const resetButton = document.getElementById('resetButton');
             const videoOutputSection = document.getElementById('videoOutputSection');
             const progressBar = document.getElementById('progressBar');
+            statusMessagesDiv.innerHTML = '<p class="ion-text-color-secondary"><ion-icon icon="checkmark-circle" color="success" style="margin-right: 4px;"></ion-icon>Ready to generate. Click "Generate Tutorial".</p>';
+            errorMessageDiv.classList.add('ion-hide');
+            videoOutputSection.classList.add('ion-hide');
             videoOutputSection.classList.remove('opacity-0');
+            generateButton.classList.remove('ion-hide'); // Show generate, hide reset
+            generateButton.classList.remove('ion-hide');
+            resetButton.classList.add('ion-hide');
+            progressBar.value = 0;
         });
             setTimeout(function() {
                 const messageElement = document.createElement('p');
                 if (isSuccess) {
+                    messageElement.classList.add('ion-text-color-secondary');
+                    messageElement.innerHTML = `<ion-icon icon="radio-button-on" color="primary" style="margin-right: 4px;"></ion-icon> ${message}`;
                 } else {
+                    messageElement.classList.add('ion-text-color-danger');
+                    messageElement.innerHTML = `<ion-icon icon="close-circle" color="danger" style="margin-right: 4px;"></ion-icon> ${message}`;
                     document.getElementById('errorMessage').textContent = "Error generating tutorial. Check API keys.";
+                    document.getElementById('errorMessage').classList.remove('ion-hide');
+                    generateButton.classList.remove('ion-hide'); // Show generate, hide reset
+                    generateButton.classList.add('ion-hide');
+                    resetButton.classList.remove('ion-hide');
+                    document.getElementById('progressBar').value = 0;
                 }
                 statusDiv.appendChild(messageElement);
                 statusDiv.scrollTop = statusDiv.scrollHeight;