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> <!-- More Desktop-App Like Title --> | |
| <!-- Tailwind CSS CDN for styling --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <!-- Font Awesome CDN for icons --> | |
| <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> | |
| body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; } /* Lighter background */ | |
| .app-container { max-width: 1200px; margin: 2rem auto; background-color: #fff; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.08); } /* Increased max-width and shadow */ | |
| header { background-image: linear-gradient(to right, #4f46e5, #6366f1); padding: 2rem 2.5rem; color: white; } /* Gradient header */ | |
| header h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; } /* Larger title */ | |
| header p { font-size: 1.125rem; color: #d1d5db; } /* Subtitle styling */ | |
| nav { background-color: #e5e7eb; border-bottom: 1px solid #d2d6da; } /* Navigation bar */ | |
| nav ul { display: flex; padding-left: 2.5rem; } | |
| nav li { margin-right: 2rem; } | |
| nav a { display: block; padding: 1rem 0; color: #4b5563; font-weight: 500; transition: color 0.2s; border-bottom: 2px solid transparent; } | |
| nav a:hover, nav a.active { color: #374151; border-bottom-color: #4f46e5; } /* Active state and hover */ | |
| nav a.active { color: #4f46e5; } | |
| main { padding: 2.5rem; } | |
| section { margin-bottom: 2.5rem; } /* Increased section spacing */ | |
| section h2 { font-size: 1.75rem; font-weight: 600; color: #374151; margin-bottom: 1.5rem; } /* Section title styling */ | |
| .input-label { @apply block text-gray-700 text-sm font-bold mb-2; } | |
| .input-field { @apply shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500; } /* Shadow on inputs */ | |
| .btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 px-5 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200; } /* Rounded-md buttons and padding */ | |
| .btn-primary:disabled { @apply bg-blue-300 cursor-not-allowed hover:bg-blue-300 focus:ring-0; } | |
| .btn-secondary { @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2.5 px-5 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50 transition-colors duration-200; } /* Rounded-md buttons and padding */ | |
| .status-box { @apply border rounded-md p-4 mb-4 bg-gray-50 border-gray-200; } /* Rounded status box */ | |
| .error-text { @apply text-red-500 mt-2 text-sm; } | |
| .video-player-container { @apply rounded-md overflow-hidden shadow-md; } /* Rounded video player */ | |
| footer { background-color: #f9fafb; border-top: 1px solid #e5e7eb; padding: 1.5rem 2.5rem; text-center text-gray-500 text-sm; } /* Lighter footer */ | |
| footer a { color: #6b7280; text-decoration: none; } | |
| footer a:hover { text-decoration: underline; } | |
| .tutorial-item { @apply bg-white p-4 rounded-md shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-200 cursor-pointer; } /* Tutorial list item */ | |
| .tutorial-item h3 { @apply font-semibold text-gray-800 mb-1; } | |
| .tutorial-item p { @apply text-gray-600 text-sm; } | |
| .tutorial-list-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } /* Responsive tutorial list */ | |
| .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } /* Settings grid layout */ | |
| .help-section p { line-height: 1.6; margin-bottom: 1rem; } /* Help section text */ | |
| /* Basic animation for button clicks */ | |
| .btn-primary:active, .btn-secondary:active { | |
| transform: scale(0.98); | |
| } | |
| /* Custom Scrollbar (Webkit - Chrome, Safari) - Make it look less default */ | |
| ::-webkit-scrollbar { | |
| width: 8px; /* Thin scrollbar */ | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; /* Light track background */ | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #a8a8a8; /* Gray thumb */ | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #888; /* Darker gray on hover */ | |
| } | |
| /* For Firefox - using CSS only, simpler customization */ | |
| /* No need for complex selectors, just set properties */ | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: #a8a8a8 #f1f1f1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="app-container"> | |
| <!-- Header Section --> | |
| <header> | |
| <h1 class="text-3xl">Autotutorial.ai Desktop</h1> <!-- Desktop App Title --> | |
| <p class="text-lg">Effortlessly Generate Professional Video Tutorials</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 (Initially Active) --> | |
| <section id="generate-section"> | |
| <h2 class="text-2xl">Generate New Tutorial</h2> | |
| <p class="text-gray-700 mb-6">Enter the topic and duration for your new video tutorial.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="tutorialTopic" class="input-label">Tutorial Topic <span class="text-gray-500">(e.g., "Getting Started with React Hooks")</span></label> | |
| <input type="text" id="tutorialTopic" class="input-field" placeholder="Enter tutorial topic" value="Advanced CSS Animations and Transitions" required> | |
| </div> | |
| <div> | |
| <label for="desiredDuration" class="input-label">Desired Duration (Minutes)</label> | |
| <select id="desiredDuration" class="input-field"> | |
| <option value="5">5 Minutes</option> | |
| <option value="10" selected>10 Minutes</option> | |
| <option value="15">15 Minutes</option> | |
| <option value="20">20 Minutes</option> | |
| </select> | |
| </div> | |
| </div> | |
| <section class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">API Keys <span class="text-gray-500">(Optional, for enhanced features)</span></h3> | |
| <div class="settings-grid"> | |
| <div> | |
| <label for="openaiApiKey" class="input-label">OpenAI API Key <span class="text-gray-500">(For script generation)</span></label> | |
| <input type="text" id="openaiApiKey" class="input-field" placeholder="Enter your 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">(For advanced video synthesis)</span></label> | |
| <input type="text" id="videoGenApiKey" class="input-field" 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 enhance tutorial quality. Basic tutorials work without them.</p> | |
| </section> | |
| <section class="mb-6 flex justify-between"> | |
| <button id="generateButton" class="btn-primary"><i class="fas fa-magic mr-2"></i> Generate Tutorial</button> | |
| <button id="resetButton" class="btn-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 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> | |
| </section> | |
| <section id="videoOutputSection" class="hidden"> | |
| <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://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4"> <!-- More Engaging Demo Video --> | |
| Your browser does not support the video tag. | |
| </video> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-700"><strong>Tutorial Title:</strong> <span id="videoTitle">Advanced CSS Animations and Transitions in 10 Minutes</span></p> | |
| <p class="text-gray-500 text-sm">Generated tutorial preview.</p> | |
| </div> | |
| <div> | |
| <a href="#" id="downloadButton" class="btn-primary" download="tutorial.mp4"><i class="fas fa-download mr-2"></i> Download Video</a> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| <!-- Tutorial History Section (Initially Hidden) --> | |
| <section id="history-section" class="hidden"> | |
| <h2 class="text-2xl">Tutorial History</h2> | |
| <p class="text-gray-700 mb-6">Access your previously generated tutorials.</p> | |
| <div class="tutorial-list-section"> | |
| <div class="tutorial-item"> | |
| <h3>Mastering JavaScript Promises</h3> | |
| <p>Generated: October 26, 2023</p> | |
| <p class="text-blue-600 font-semibold">View Tutorial</p> | |
| </div> | |
| <div class="tutorial-item"> | |
| <h3>Introduction to Python for Beginners</h3> | |
| <p>Generated: October 25, 2023</p> | |
| <p class="text-blue-600 font-semibold">View Tutorial</p> | |
| </div> | |
| <div class="tutorial-item"> | |
| <h3>Building a Simple REST API with Node.js</h3> | |
| <p>Generated: October 20, 2023</p> | |
| <p class="text-blue-600 font-semibold">View Tutorial</p> | |
| </div> | |
| <!-- Add more tutorial items here --> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-500">History is simulated for demo purposes.</p> | |
| </section> | |
| <!-- Settings Section (Initially Hidden) --> | |
| <section id="settings-section" class="hidden"> | |
| <h2 class="text-2xl">Settings</h2> | |
| <p class="text-gray-700 mb-6">Customize your Autotutorial.ai experience.</p> | |
| <div class="settings-grid"> | |
| <div> | |
| <label for="defaultDurationSetting" class="input-label">Default Tutorial Duration</label> | |
| <select id="defaultDurationSetting" class="input-field"> | |
| <option value="5">5 Minutes</option> | |
| <option value="10" selected>10 Minutes</option> | |
| <option value="15">15 Minutes</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="videoQualitySetting" class="input-label">Default Video Quality</label> | |
| <select id="videoQualitySetting" class="input-field"> | |
| <option value="720p" selected>720p (HD)</option> | |
| <option value="1080p">1080p (Full HD)</option> | |
| <option value="4k">4K (Ultra HD) - Premium</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="voiceoverLanguage" class="input-label">Voiceover Language</label> | |
| <select id="voiceoverLanguage" class="input-field"> | |
| <option value="en-US" selected>English (US)</option> | |
| <option value="en-GB">English (UK)</option> | |
| <option value="es-ES">Spanish (ES)</option> | |
| <option value="fr-FR">French (FR)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="outputFormat" class="input-label">Default Output Format</label> | |
| <select id="outputFormat" class="input-field"> | |
| <option value="mp4" selected>MP4 (Recommended)</option> | |
| <option value="mov">MOV</option> | |
| <option value="webm">WebM</option> | |
| </select> | |
| </div> | |
| <!-- Add more settings as needed --> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-500">Basic settings for demo purposes.</p> | |
| </section> | |
| <!-- Help Section (Initially Hidden) --> | |
| <section id="help-section" class="hidden"> | |
| <h2 class="text-2xl">Help & Support</h2> | |
| <p class="text-gray-700 mb-6">Get assistance and learn how to use Autotutorial.ai Desktop.</p> | |
| <div class="help-section"> | |
| <p>Welcome to Autotutorial.ai Desktop! This application helps you automatically generate professional video tutorials quickly and easily.</p> | |
| <p><strong>Getting Started:</strong></p> | |
| <ol class="list-decimal pl-5 mb-4"> | |
| <li>Navigate to the "Generate Tutorial" section using the top navigation.</li> | |
| <li>Enter the topic you want to create a tutorial about in the "Tutorial Topic" field.</li> | |
| <li>Select your desired tutorial duration from the "Desired Duration" dropdown.</li> | |
| <li>(Optional) Enter your OpenAI and Video Generation API keys for enhanced tutorial generation. These are not required for basic functionality.</li> | |
| <li>Click the "Generate Tutorial" button.</li> | |
| <li>Monitor the "Status Updates" section for progress.</li> | |
| <li>Once generation is complete, preview your tutorial in the "Tutorial Preview" section and download it.</li> | |
| </ol> | |
| <p><strong>Tutorial History:</strong></p> | |
| <p>The "Tutorial History" section allows you to view and access your previously generated tutorials. (This is a simulated demo feature).</p> | |
| <p><strong>Settings:</strong></p> | |
| <p>In the "Settings" section, you can customize default preferences such as tutorial duration, video quality, and output format. (These are basic settings for demonstration).</p> | |
| <p>For further assistance or to report issues, please contact our support team 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 | |
| const navLinks = document.querySelectorAll('nav a.nav-link'); | |
| const sections = document.querySelectorAll('main > section'); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(event) { | |
| event.preventDefault(); // Prevent default link behavior | |
| const sectionId = this.getAttribute('data-section'); | |
| // Deactivate all nav links and hide all sections | |
| navLinks.forEach(nl => nl.classList.remove('active')); | |
| sections.forEach(sec => sec.classList.add('hidden')); | |
| // Activate the clicked nav link and show the corresponding section | |
| this.classList.add('active'); | |
| document.getElementById(`${sectionId}-section`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Keep "Generate Tutorial" section active on initial load | |
| document.querySelector('nav a.nav-link[data-section="generate"]').classList.add('active'); | |
| document.getElementById('generate-section').classList.remove('hidden'); | |
| }); | |
| document.getElementById('generateButton').addEventListener('click', function() { | |
| // ... (same generateButton event listener logic as before, but with updated IDs if needed) ... | |
| 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'); | |
| // Reset status and hide video output | |
| statusMessagesDiv.innerHTML = ''; | |
| errorMessageDiv.classList.add('hidden'); | |
| videoOutputSection.classList.add('hidden'); | |
| 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'; | |
| // Simulate tutorial generation process with delays | |
| simulateStep(statusMessagesDiv, "Generating tutorial script...", 1000, () => { | |
| simulateStep(statusMessagesDiv, "Creating voiceover...", 2000, () => { | |
| simulateStep(statusMessagesDiv, "Synthesizing video scenes...", 3000, () => { | |
| simulateStep(statusMessagesDiv, "Finalizing and rendering...", 2500, () => { | |
| // Simulate success | |
| 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"; | |
| videoOutputSection.classList.remove('hidden'); | |
| generateButton.disabled = false; | |
| generateButton.classList.add('hidden'); | |
| resetButton.classList.remove('hidden'); | |
| }, false); | |
| }, false); | |
| }, false); | |
| }, false); | |
| }); | |
| 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'); | |
| 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'); | |
| 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'; | |
| }); | |
| function simulateStep(statusDiv, message, delay, callback, isSuccess = true) { | |
| // ... (same simulateStep function as before) ... | |
| setTimeout(function() { | |
| const messageElement = document.createElement('p'); | |
| if (isSuccess) { | |
| messageElement.classList.add('text-gray-600'); | |
| messageElement.innerHTML = `<i class="fas fa-check-circle text-green-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 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'); | |
| } | |
| statusDiv.appendChild(messageElement); | |
| statusDiv.scrollTop = statusDiv.scrollHeight; // Auto scroll to bottom | |
| if (callback) callback(); | |
| }, delay); | |
| } | |
| </script> | |
| </body> | |
| </html> |