Spaces:

samihalawa
/

Autotutorial

Running

App Files Files Community

Luigi commited on Feb 11

Commit

fb531d5

verified ·

1 Parent(s): 16ec358

Update index.html

Browse files

Files changed (1) hide show

index.html +248 -65

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Autotutorial.ai - Create Video Tutorials Effortlessly</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 -->
@@ -13,34 +13,97 @@
     <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; }
-        .btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200; }
-        .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 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50 transition-colors duration-200; }
-        .input-field { @apply shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline; }
         .input-label { @apply block text-gray-700 text-sm font-bold mb-2; }
-        .status-box { @apply border rounded p-4 mb-4; }
         .error-text { @apply text-red-500 mt-2 text-sm; }
-        .video-player-container { @apply rounded overflow-hidden shadow-xl; }
     </style>
 </head>
-<body class="bg-gray-100 p-8">
-    <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
         <!-- Header Section -->
-        <header class="bg-blue-700 p-6 text-white">
-            <h1 class="text-2xl font-bold"><i class="fas fa-video mr-2"></i> Autotutorial.ai</h1>
-            <p class="text-sm mt-1">Effortlessly Generate Professional Video Tutorials</p>
         </header>
         <!-- Main Content Area -->
-        <div class="p-8">
-            <!-- Tutorial Input Section -->
-            <section class="mb-6">
-                <h2 class="text-xl font-semibold mb-4 text-gray-800">Tutorial Settings</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div>
-                        <label for="tutorialTopic" class="input-label">Tutorial Topic <span class="text-gray-500">(e.g., "Getting Started with React")</span></label>
-                        <input type="text" id="tutorialTopic" class="input-field" placeholder="Enter tutorial topic" value="Mastering Asynchronous JavaScript" required>
                     </div>
                     <div>
                         <label for="desiredDuration" class="input-label">Desired Duration (Minutes)</label>
@@ -52,69 +115,189 @@
                         </select>
                     </div>
                 </div>
-            </section>
-            <!-- API Keys Section -->
-            <section class="mb-6">
-                <h2 class="text-xl font-semibold mb-4 text-gray-800">API Keys <span class="text-gray-500">(Optional, for advanced features)</span></h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <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-YOUR_OPENAI_API_KEY_DEMO" >
                     </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-YOUR_VIDEO_GEN_API_KEY_DEMO">
                     </div>
-                </div>
-                <p class="text-sm text-gray-500 mt-2">These API keys are optional and enhance the tutorial generation process. You can still generate basic tutorials without them.</p>
-            </section>
-            <!-- Action Buttons -->
-            <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>
-            <!-- Status and Error Area -->
-            <section id="statusSection" class="status-box bg-gray-50">
-                <h3 class="font-semibold text-gray-700 mb-2"><i class="fas fa-spinner fa-spin 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 tutorial. Please click "Generate Tutorial".</p>
                 </div>
-                <p id="errorMessage" class="error-text hidden"></p>
             </section>
-            <!-- Video Output 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> Generated Tutorial Preview</h2>
-                <div class="video-player-container">
-                    <video id="tutorialVideo" controls width="100%">
-                        <source src="https://archive.org/download/ElephantsDream/ed_1024_512.mp4" type="video/mp4">
-                        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">Mastering Asynchronous JavaScript in 10 Minutes</span></p>
-                        <p class="text-gray-500 text-sm">Generated based on your topic input.</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>
-        </div>
         <!-- Footer Section -->
-        <footer class="bg-gray-200 p-4 text-center text-gray-600 text-sm">
-            © 2023 Autotutorial.ai. All rights reserved. | <a href="#" class="hover:underline">Terms of Service</a> | <a href="#" class="hover:underline">Privacy Policy</a>
         </footer>
     </div>
     <script>
         document.getElementById('generateButton').addEventListener('click', function() {
-            const topic = document.getElementById('tutorialTopic').value;
             const duration = document.getElementById('desiredDuration').value;
             const openaiKey = document.getElementById('openaiApiKey').value;
             const videoGenKey = document.getElementById('videoGenApiKey').value;
@@ -157,12 +340,11 @@
                     }, false);
                 }, false);
             }, false);
         });
         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');
@@ -182,7 +364,8 @@
         function simulateStep(statusDiv, message, delay, callback, isSuccess = true) {
-            setTimeout(function() {
                 const messageElement = document.createElement('p');
                 if (isSuccess) {
                     messageElement.classList.add('text-gray-600');

 <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="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>
                     </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;
                     }, 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');
         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');