Make it work. It work be extremely advanced

components/footer.js

@@ -86,7 +86,6 @@ class CustomFooter extends HTMLElement {
                             <a href="#" class="social-link"><i data-feather="linkedin"></i></a>
                         </div>
                     </div>
-                    
                     <div class="footer-section">
                         <h3>Quick Links</h3>
                         <div class="footer-links">
@@ -96,8 +95,7 @@ class CustomFooter extends HTMLElement {
                             <a href="/templates" class="footer-link">Templates</a>
                         </div>
                     </div>
-                    
-                    <div class="footer-section">
+<div class="footer-section">
                         <h3>Resources</h3>
                         <div class="footer-links">
                             <a href="/blog" class="footer-link">Blog</a>

components/help-modal.js

@@ -0,0 +1,159 @@
+class HelpModal extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .modal {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(0, 0, 0, 0.7);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    z-index: 1000;
+                    opacity: 0;
+                    visibility: hidden;
+                    transition: all 0.3s ease;
+                }
+                
+                .modal.active {
+                    opacity: 1;
+                    visibility: visible;
+                }
+                
+                .modal-content {
+                    background: #1F2937;
+                    border-radius: 10px;
+                    width: 90%;
+                    max-width: 600px;
+                    max-height: 90vh;
+                    overflow-y: auto;
+                    transform: translateY(-20px);
+                    transition: transform 0.3s ease;
+                }
+                
+                .modal.active .modal-content {
+                    transform: translateY(0);
+                }
+                
+                .modal-header {
+                    padding: 1rem 1.5rem;
+                    border-bottom: 1px solid #374151;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .modal-body {
+                    padding: 1.5rem;
+                }
+                
+                .modal-footer {
+                    padding: 1rem 1.5rem;
+                    border-top: 1px solid #374151;
+                    display: flex;
+                    justify-content: flex-end;
+                }
+                
+                .close-btn {
+                    background: none;
+                    border: none;
+                    color: white;
+                    font-size: 1.5rem;
+                    cursor: pointer;
+                }
+                
+                h2 {
+                    margin-top: 0;
+                    color: white;
+                }
+                
+                h3 {
+                    color: #9CA3AF;
+                    margin-top: 1.5rem;
+                }
+                
+                ul {
+                    padding-left: 1.5rem;
+                }
+                
+                li {
+                    margin-bottom: 0.5rem;
+                    color: #D1D5DB;
+                }
+                
+                kbd {
+                    background: #374151;
+                    padding: 0.2rem 0.4rem;
+                    border-radius: 0.25rem;
+                    font-family: monospace;
+                }
+            </style>
+            
+            <div class="modal" id="help-modal">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h2>Teleprompter Help</h2>
+                        <button class="close-btn">&times;</button>
+                    </div>
+                    <div class="modal-body">
+                        <h3>Getting Started</h3>
+                        <p>Enter your script in the text area on the left. Adjust settings like scroll speed, text size, and theme using the controls.</p>
+                        
+                        <h3>Controls</h3>
+                        <ul>
+                            <li><strong>Start Scrolling:</strong> Begin the teleprompter scroll</li>
+                            <li><strong>Pause:</strong> Temporarily stop the scroll</li>
+                            <li><strong>Speed Slider:</strong> Adjust scrolling speed (0.1x - 5x)</li>
+                        </ul>
+                        
+                        <h3>Keyboard Shortcuts</h3>
+                        <ul>
+                            <li><kbd>Space</kbd> - Toggle scrolling</li>
+                            <li><kbd>Ctrl</kbd>+<kbd>S</kbd> - Save script</li>
+                            <li><kbd>Ctrl</kbd>+<kbd>O</kbd> - Load script</li>
+                            <li><kbd>Ctrl</kbd>+<kbd>E</kbd> - Export script</li>
+                            <li><kbd>↑</kbd> - Increase speed</li>
+                            <li><kbd>↓</kbd> - Decrease speed</li>
+                        </ul>
+                        
+                        <h3>Advanced Features</h3>
+                        <ul>
+                            <li><strong>Themes:</strong> Choose from 6 color themes</li>
+                            <li><strong>Text Formatting:</strong> Bold, italic, underline options</li>
+                            <li><strong>Mirror View:</strong> Flip text for teleprompter reflection</li>
+                            <li><strong>Preview Mode:</strong> Toggle between dark/light backgrounds</li>
+                        </ul>
+                    </div>
+                    <div class="modal-footer">
+                        <button id="close-help" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded">Close</button>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Add event listeners
+        this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => this.close());
+        this.shadowRoot.querySelector('#close-help').addEventListener('click', () => this.close());
+        
+        // Close modal when clicking outside
+        this.shadowRoot.querySelector('.modal').addEventListener('click', (e) => {
+            if (e.target.classList.contains('modal')) {
+                this.close();
+            }
+        });
+    }
+    
+    open() {
+        this.shadowRoot.querySelector('.modal').classList.add('active');
+    }
+    
+    close() {
+        this.shadowRoot.querySelector('.modal').classList.remove('active');
+    }
+}
+
+customElements.define('help-modal', HelpModal);

components/navbar.js

@@ -26,13 +26,11 @@ class CustomNavbar extends HTMLElement {
                     align-items: center;
                     gap: 0.5rem;
                 }
-                
                 .nav-links {
                     display: flex;
                     gap: 1.5rem;
                 }
-                
-                .nav-link {
+.nav-link {
                     color: rgba(255, 255, 255, 0.8);
                     text-decoration: none;
                     transition: color 0.2s;
@@ -63,7 +61,6 @@ class CustomNavbar extends HTMLElement {
                         <i data-feather="tv"></i>
                         Teleprompter Factory
                     </a>
-                    
                     <div class="nav-links">
                         <a href="/" class="nav-link">Home</a>
                         <a href="/templates" class="nav-link">Templates</a>
@@ -71,7 +68,7 @@ class CustomNavbar extends HTMLElement {
                         <a href="/pricing" class="nav-link">Pricing</a>
                         <a href="/contact" class="nav-link">Contact</a>
                     </div>
-                </div>
+</div>
             </nav>
         `;
     }

features.html

@@ -0,0 +1,125 @@
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Features | Teleprompter Factory</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#3B82F6',
+                        },
+                        secondary: {
+                            500: '#10B981',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-3xl font-bold mb-2">Powerful Features</h1>
+            <p class="text-gray-400 mb-12">Everything you need for professional teleprompting</p>
+            
+            <div class="space-y-12">
+                <!-- Feature 1 -->
+                <div class="flex flex-col md:flex-row gap-8 items-center">
+                    <div class="md:w-1/3">
+                        <div class="bg-gray-800 rounded-xl p-6 h-48 flex items-center justify-center">
+                            <i data-feather="sliders" class="w-16 h-16 text-primary-500"></i>
+                        </div>
+                    </div>
+                    <div class="md:w-2/3">
+                        <h3 class="text-2xl font-semibold mb-2">Precise Speed Control</h3>
+                        <p class="text-gray-400 mb-4">Adjust scrolling speed from 0.1x to 5x with precision controls. Perfect for matching your speaking pace exactly.</p>
+                        <ul class="text-gray-400 space-y-2">
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Real-time speed adjustment</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Keyboard shortcuts for quick changes</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Precision increments of 0.1x</li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <!-- Feature 2 -->
+                <div class="flex flex-col md:flex-row gap-8 items-center">
+                    <div class="md:w-2/3 order-2 md:order-1">
+                        <h3 class="text-2xl font-semibold mb-2">Multiple Themes & Customization</h3>
+                        <p class="text-gray-400 mb-4">Choose from 6 professionally designed themes or customize every aspect of your teleprompter interface.</p>
+                        <ul class="text-gray-400 space-y-2">
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>6 pre-designed color themes</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Text size and alignment options</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Font style selection</li>
+                        </ul>
+                    </div>
+                    <div class="md:w-1/3 order-1 md:order-2">
+                        <div class="bg-gray-800 rounded-xl p-6 h-48 flex items-center justify-center">
+                            <i data-feather="droplet" class="w-16 h-16 text-secondary-500"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Feature 3 -->
+                <div class="flex flex-col md:flex-row gap-8 items-center">
+                    <div class="md:w-1/3">
+                        <div class="bg-gray-800 rounded-xl p-6 h-48 flex items-center justify-center">
+                            <i data-feather="layers" class="w-16 h-16 text-primary-500"></i>
+                        </div>
+                    </div>
+                    <div class="md:w-2/3">
+                        <h3 class="text-2xl font-semibold mb-2">Advanced Text Formatting</h3>
+                        <p class="text-gray-400 mb-4">Apply formatting to emphasize key points or make your script easier to follow during presentation.</p>
+                        <ul class="text-gray-400 space-y-2">
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Bold, italic, underline options</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Text alignment controls</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Live preview of formatting</li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <!-- Feature 4 -->
+                <div class="flex flex-col md:flex-row gap-8 items-center">
+                    <div class="md:w-2/3 order-2 md:order-1">
+                        <h3 class="text-2xl font-semibold mb-2">Script Management</h3>
+                        <p class="text-gray-400 mb-4">Save, load, import, and export scripts with our comprehensive script management system.</p>
+                        <ul class="text-gray-400 space-y-2">
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Local storage for quick access</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Import from text files</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Export to share with team members</li>
+                        </ul>
+                    </div>
+                    <div class="md:w-1/3 order-1 md:order-2">
+                        <div class="bg-gray-800 rounded-xl p-6 h-48 flex items-center justify-center">
+                            <i data-feather="database" class="w-16 h-16 text-secondary-500"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Feature 5 -->
+                <div class="flex flex-col md:flex-row gap-8 items-center">
+                    <div class="md:w-1/3">
+                        <div class="bg-gray-800 rounded-xl p-6 h-48 flex items-center justify-center">
+                            <i data-feather="eye" class="w-16 h-16 text-primary-500"></i>
+                        </div>
+                    </div>
+                    <div class="md:w-2/3">
+                        <h3 class="text-2xl font-semibold mb-2">Mirror & Preview Modes</h3>
+                        <p class="text-gray-400 mb-4">Perfect for teleprompter setups with mirrors or for checking your script before presenting.</p>
+                        <ul class="text-gray-400 space-y-2">
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Mirror flip for reflective surfaces</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>Dark/light preview modes</li>
+                            <li class="flex items-center"><i data-feather="check-circle" class="w-5 h-5 text-green-50
+___METADATA_START___
+{"repoId":"CommandPrompt/scrollgenius-3000-pro-max-deluxe","isNew":false,"userName":"CommandPrompt"}
+___METADATA_END___

index.html

@@ -29,44 +29,45 @@
     <custom-navbar></custom-navbar>
     
     <main class="container mx-auto px-4 py-8">
-        <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl shadow-2xl overflow-hidden border border-gray-700">
+        <div class="max-w-6xl mx-auto bg-gray-800 rounded-xl shadow-2xl overflow-hidden border border-gray-700">
             <div class="p-6 bg-gradient-to-r from-primary-500 to-secondary-500 relative">
                 <div class="absolute top-4 right-4 flex gap-2">
-                    <button class="p-2 bg-white/10 rounded-full hover:bg-white/20 transition">
+                    <button id="minimize-btn" class="p-2 bg-white/10 rounded-full hover:bg-white/20 transition">
                         <i data-feather="minimize-2" class="w-4 h-4"></i>
                     </button>
-                    <button class="p-2 bg-white/10 rounded-full hover:bg-white/20 transition">
+                    <button id="maximize-btn" class="p-2 bg-white/10 rounded-full hover:bg-white/20 transition">
                         <i data-feather="maximize-2" class="w-4 h-4"></i>
                     </button>
-                    <button class="p-2 bg-red-500 rounded-full hover:bg-red-600 transition">
+                    <button id="close-btn" class="p-2 bg-red-500 rounded-full hover:bg-red-600 transition">
                         <i data-feather="x" class="w-4 h-4"></i>
                     </button>
                 </div>
                 <h1 class="text-3xl font-bold">ScrollGenius 3000</h1>
                 <p class="text-gray-200 mt-2">Professional Teleprompter Widget</p>
             </div>
-            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 relative">
+            <div class="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6 relative">
                 <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-500 to-secondary-500"></div>
-<div class="space-y-6">
+                <div class="lg:col-span-1 space-y-6">
                     <div>
                         <label class="block text-sm font-medium text-gray-300 mb-1 flex items-center justify-between">
                             <span>Script Title</span>
                             <span class="text-xs text-gray-400">Ctrl+T</span>
                         </label>
                         <div class="relative">
-                            <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition pr-10">
+                            <input type="text" id="script-title" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition pr-10" placeholder="My Presentation">
                             <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white">
                                 <i data-feather="edit-2" class="w-4 h-4"></i>
                             </button>
                         </div>
                     </div>
+                    
                     <div>
                         <label class="block text-sm font-medium text-gray-300 mb-1 flex items-center justify-between">
                             <span>Scroll Speed</span>
                             <span class="text-xs text-gray-400" id="speed-value">1.0x</span>
                         </label>
-                        <input type="range" min="0.5" max="3" step="0.1" value="1" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-500">
-<div class="flex justify-between text-xs text-gray-400 mt-1">
+                        <input type="range" id="speed-slider" min="0.1" max="5" step="0.1" value="1" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-500">
+                        <div class="flex justify-between text-xs text-gray-400 mt-1">
                             <span>Slow</span>
                             <span>Medium</span>
                             <span>Fast</span>
@@ -75,77 +76,146 @@
                     
                     <div>
                         <label class="block text-sm font-medium text-gray-300 mb-1">Text Size</label>
-                        <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition">
-                            <option>Small</option>
-                            <option selected>Medium</option>
-                            <option>Large</option>
-                            <option>Extra Large</option>
+                        <select id="text-size" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition">
+                            <option value="small">Small</option>
+                            <option value="medium" selected>Medium</option>
+                            <option value="large">Large</option>
+                            <option value="x-large">Extra Large</option>
                         </select>
                     </div>
                     
                     <div>
                         <label class="block text-sm font-medium text-gray-300 mb-1">Theme</label>
+                        <div class="grid grid-cols-3 gap-2 theme-selector">
+                            <button class="bg-blue-500 h-10 rounded-lg theme-btn active" data-theme="blue"></button>
+                            <button class="bg-green-500 h-10 rounded-lg theme-btn" data-theme="green"></button>
+                            <button class="bg-purple-500 h-10 rounded-lg theme-btn" data-theme="purple"></button>
+                            <button class="bg-red-500 h-10 rounded-lg theme-btn" data-theme="red"></button>
+                            <button class="bg-yellow-500 h-10 rounded-lg theme-btn" data-theme="yellow"></button>
+                            <button class="bg-pink-500 h-10 rounded-lg theme-btn" data-theme="pink"></button>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Text Alignment</label>
                         <div class="grid grid-cols-3 gap-2">
-                            <button class="bg-blue-500 h-10 rounded-lg"></button>
-                            <button class="bg-green-500 h-10 rounded-lg"></button>
-                            <button class="bg-purple-500 h-10 rounded-lg"></button>
-                            <button class="bg-red-500 h-10 rounded-lg"></button>
-                            <button class="bg-yellow-500 h-10 rounded-lg"></button>
-                            <button class="bg-pink-500 h-10 rounded-lg"></button>
+                            <button id="align-left" class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 flex items-center justify-center">
+                                <i data-feather="align-left" class="w-4 h-4"></i>
+                            </button>
+                            <button id="align-center" class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 flex items-center justify-center active">
+                                <i data-feather="align-center" class="w-4 h-4"></i>
+                            </button>
+                            <button id="align-right" class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 flex items-center justify-center">
+                                <i data-feather="align-right" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Font Style</label>
+                        <div class="grid grid-cols-2 gap-2">
+                            <button id="font-sans" class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 active">Sans Serif</button>
+                            <button id="font-serif" class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600">Serif</button>
                         </div>
                     </div>
                 </div>
-                <div class="bg-gray-700 rounded-lg p-4 h-64 overflow-y-auto relative group">
-                    <textarea class="w-full h-full bg-transparent resize-none outline-none text-gray-200 placeholder-gray-500" placeholder="Enter your script here..."></textarea>
-                    <div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition flex gap-2">
-                        <button class="p-2 bg-gray-600 rounded-lg hover:bg-gray-500" title="Format Text">
-                            <i data-feather="type" class="w-4 h-4"></i>
-                        </button>
-                        <button class="p-2 bg-gray-600 rounded-lg hover:bg-gray-500" title="Import Script">
-                            <i data-feather="upload" class="w-4 h-4"></i>
-                        </button>
-                        <button class="p-2 bg-gray-600 rounded-lg hover:bg-gray-500" title="Clear All">
-                            <i data-feather="trash-2" class="w-4 h-4"></i>
-                        </button>
+                
+                <div class="lg:col-span-2 flex flex-col gap-4">
+                    <div class="bg-gray-700 rounded-lg p-4 flex-grow relative group">
+                        <div class="absolute top-2 right-2 flex gap-1 z-10">
+                            <button id="format-bold" class="p-1 bg-gray-600 rounded hover:bg-gray-500" title="Bold">
+                                <i data-feather="bold" class="w-4 h-4"></i>
+                            </button>
+                            <button id="format-italic" class="p-1 bg-gray-600 rounded hover:bg-gray-500" title="Italic">
+                                <i data-feather="italic" class="w-4 h-4"></i>
+                            </button>
+                            <button id="format-underline" class="p-1 bg-gray-600 rounded hover:bg-gray-500" title="Underline">
+                                <i data-feather="underline" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                        <textarea id="script-textarea" class="w-full h-64 bg-transparent resize-none outline-none text-gray-200 placeholder-gray-500" placeholder="Enter your script here...">Welcome to ScrollGenius 3000!
+
+This is a professional teleprompter solution with advanced features:
+
+• Real-time scrolling control
+• Multiple themes and customization
+• Text formatting options
+• Keyboard shortcuts for efficiency
+• Script saving and loading
+
+Try adjusting the scroll speed to see how it works!</textarea>
+                        <div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition flex gap-2">
+                            <button id="import-script" class="p-2 bg-gray-600 rounded-lg hover:bg-gray-500" title="Import Script">
+                                <i data-feather="upload" class="w-4 h-4"></i>
+                            </button>
+                            <button id="clear-script" class="p-2 bg-gray-600 rounded-lg hover:bg-gray-500" title="Clear All">
+                                <i data-feather="trash-2" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-gray-700 rounded-lg p-4">
+                        <div class="flex justify-between items-center mb-2">
+                            <h3 class="font-medium">Preview</h3>
+                            <div class="flex gap-2">
+                                <button id="toggle-preview" class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm">Toggle View</button>
+                                <button id="mirror-preview" class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm">Mirror</button>
+                            </div>
+                        </div>
+                        <div id="preview-container" class="bg-black rounded p-4 h-40 overflow-hidden relative">
+                            <div id="preview-text" class="text-white text-center text-lg leading-relaxed">
+                                Welcome to ScrollGenius 3000! This is a professional teleprompter solution with advanced features.
+                            </div>
+                        </div>
                     </div>
                 </div>
-</div>
+            </div>
+            
             <div class="p-6 bg-gray-700 border-t border-gray-600 flex flex-wrap justify-between gap-4">
                 <div class="flex gap-2">
-                    <button class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition flex items-center gap-2 text-sm">
+                    <button id="save-script" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition flex items-center gap-2 text-sm">
                         <i data-feather="save" class="w-4 h-4"></i> Save
                     </button>
-                    <button class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition flex items-center gap-2 text-sm">
-                        <i data-feather="settings" class="w-4 h-4"></i> Settings
+                    <button id="load-script" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition flex items-center gap-2 text-sm">
+                        <i data-feather="folder" class="w-4 h-4"></i> Load
+                    </button>
+                    <button id="export-script" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition flex items-center gap-2 text-sm">
+                        <i data-feather="download" class="w-4 h-4"></i> Export
                     </button>
                 </div>
                 <div class="flex gap-2">
-                    <button class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition flex items-center gap-2 text-sm">
+                    <button id="help-btn" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition flex items-center gap-2 text-sm">
                         <i data-feather="help-circle" class="w-4 h-4"></i> Help
                     </button>
-                    <button class="px-6 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg font-medium transition flex items-center gap-2 text-sm glow">
-                        <i data-feather="play" class="w-4 h-4"></i> Start
+                    <button id="start-scroll" class="px-6 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg font-medium transition flex items-center gap-2 text-sm glow">
+                        <i data-feather="play" class="w-4 h-4"></i> Start Scrolling
                     </button>
                 </div>
             </div>
-</div>
+        </div>
     </main>
     
+    <!-- Hidden elements for export/import -->
+    <input type="file" id="file-input" accept=".txt,.doc,.docx" class="hidden">
     <custom-footer></custom-footer>
+    <help-modal></help-modal>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/help-modal.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
         
-        // Update speed value display
-        const speedSlider = document.querySelector('input[type="range"]');
-        const speedValue = document.getElementById('speed-value');
-        
-        speedSlider.addEventListener('input', function() {
-            speedValue.textContent = `${this.value}x`;
+        // Initialize all components when DOM is loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeComponents();
+            
+            // Add help modal functionality
+            document.getElementById('help-btn').addEventListener('click', function() {
+                document.querySelector('help-modal').open();
+            });
         });
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -1,61 +1,440 @@
 
-document.addEventListener('DOMContentLoaded', function() {
-    // Enhanced theme selection with local storage
-const themeButtons = document.querySelectorAll('.theme-selector button');
-    themeButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            // Remove active class from all buttons
-            themeButtons.forEach(btn => btn.classList.remove('glow'));
-            
-            // Add active class to clicked button
-            this.classList.add('glow');
-            
-            // Change the theme (this would be more complex in a real app)
-            console.log('Theme changed to: ', this.style.backgroundColor);
-        });
+// Global variables
+let isScrolling = false;
+let scrollInterval;
+let currentSpeed = 1;
+let currentTheme = 'blue';
+let currentTextSize = 'medium';
+let currentAlignment = 'center';
+let currentFont = 'sans';
+let mirroredView = false;
+
+// DOM Elements
+const elements = {
+    speedSlider: document.getElementById('speed-slider'),
+    speedValue: document.getElementById('speed-value'),
+    scriptTextarea: document.getElementById('script-textarea'),
+    previewText: document.getElementById('preview-text'),
+    previewContainer: document.getElementById('preview-container'),
+    textSizeSelect: document.getElementById('text-size'),
+    scriptTitle: document.getElementById('script-title'),
+    fileInput: document.getElementById('file-input')
+};
+
+// Initialize all components
+function initializeComponents() {
+    setupEventListeners();
+    loadSettings();
+    updatePreview();
+    setupKeyboardShortcuts();
+}
+
+// Set up event listeners
+function setupEventListeners() {
+    // Speed control
+    elements.speedSlider.addEventListener('input', handleSpeedChange);
+    
+    // Text area changes
+    elements.scriptTextarea.addEventListener('input', updatePreview);
+    
+    // Text size changes
+    elements.textSizeSelect.addEventListener('change', handleTextSizeChange);
+    
+    // Theme selection
+    document.querySelectorAll('.theme-btn').forEach(button => {
+        button.addEventListener('click', () => handleThemeChange(button.dataset.theme));
     });
-    // Advanced scroll speed handling
-    const speedSlider = document.querySelector('input[type="range"]');
-    
-    // Load saved speed if available
-    const savedSpeed = localStorage.getItem('teleprompterSpeed');
-    if (savedSpeed) {
-        speedSlider.value = savedSpeed;
-        document.getElementById('speed-value').textContent = `${savedSpeed}x`;
+    
+    // Text alignment
+    document.getElementById('align-left').addEventListener('click', () => handleAlignmentChange('left'));
+    document.getElementById('align-center').addEventListener('click', () => handleAlignmentChange('center'));
+    document.getElementById('align-right').addEventListener('click', () => handleAlignmentChange('right'));
+    
+    // Font style
+    document.getElementById('font-sans').addEventListener('click', () => handleFontChange('sans'));
+    document.getElementById('font-serif').addEventListener('click', () => handleFontChange('serif'));
+    
+    // Formatting buttons
+    document.getElementById('format-bold').addEventListener('click', () => toggleFormatting('bold'));
+    document.getElementById('format-italic').addEventListener('click', () => toggleFormatting('italic'));
+    document.getElementById('format-underline').addEventListener('click', () => toggleFormatting('underline'));
+    
+    // Control buttons
+    document.getElementById('start-scroll').addEventListener('click', toggleScrolling);
+    document.getElementById('save-script').addEventListener('click', saveScript);
+    document.getElementById('load-script').addEventListener('click', loadScript);
+    document.getElementById('export-script').addEventListener('click', exportScript);
+    document.getElementById('import-script').addEventListener('click', () => elements.fileInput.click());
+    document.getElementById('clear-script').addEventListener('click', clearScript);
+    document.getElementById('toggle-preview').addEventListener('click', togglePreviewMode);
+    document.getElementById('mirror-preview').addEventListener('click', toggleMirrorView);
+    
+    // File input
+    elements.fileInput.addEventListener('change', importScriptFromFile);
+    
+    // Window events
+    window.addEventListener('beforeunload', saveSettings);
+}
+
+// Handle speed change
+function handleSpeedChange() {
+    currentSpeed = parseFloat(elements.speedSlider.value);
+    elements.speedValue.textContent = `${currentSpeed.toFixed(1)}x`;
+    
+    if (isScrolling) {
+        clearInterval(scrollInterval);
+        startScrolling();
     }
+}
+
+// Handle text size change
+function handleTextSizeChange() {
+    currentTextSize = elements.textSizeSelect.value;
+    updatePreview();
+}
+
+// Handle theme change
+function handleThemeChange(theme) {
+    currentTheme = theme;
+    
+    // Update active button
+    document.querySelectorAll('.theme-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    document.querySelector(`.theme-btn[data-theme="${theme}"]`).classList.add('active');
+    
+    // Apply theme to preview
+    const themeColors = {
+        blue: 'from-blue-500 to-blue-700',
+        green: 'from-green-500 to-green-700',
+        purple: 'from-purple-500 to-purple-700',
+        red: 'from-red-500 to-red-700',
+        yellow: 'from-yellow-500 to-yellow-700',
+        pink: 'from-pink-500 to-pink-700'
+    };
+    
+    const gradientClass = themeColors[theme];
+    document.querySelector('.bg-gradient-to-r').className = `p-6 bg-gradient-to-r ${gradientClass} relative`;
+    
+    updatePreview();
+}
+
+// Handle alignment change
+function handleAlignmentChange(alignment) {
+    currentAlignment = alignment;
     
-    speedSlider.addEventListener('input', function() {
-        const speed = this.value;
-        document.getElementById('speed-value').textContent = `${speed}x`;
-        localStorage.setItem('teleprompterSpeed', speed);
+    // Update active button
+    document.querySelectorAll('#align-left, #align-center, #align-right').forEach(btn => {
+        btn.classList.remove('active');
     });
+    document.getElementById(`align-${alignment}`).classList.add('active');
+    
+    updatePreview();
+}
+
+// Handle font change
+function handleFontChange(font) {
+    currentFont = font;
+    
+    // Update active button
+    document.getElementById('font-sans').classList.toggle('active', font === 'sans');
+    document.getElementById('font-serif').classList.toggle('active', font === 'serif');
+    
+    updatePreview();
+}
+
+// Toggle text formatting
+function toggleFormatting(format) {
+    const button = document.getElementById(`format-${format}`);
+    button.classList.toggle('active');
+    
+    // In a real implementation, this would apply formatting to selected text
+    showToast(`Toggled ${format} formatting`);
+}
+
+// Update preview
+function updatePreview() {
+    const text = elements.scriptTextarea.value || "Your script will appear here...";
+    elements.previewText.textContent = text;
+    
+    // Apply text size
+    const sizeClasses = {
+        small: 'text-sm',
+        medium: 'text-base',
+        large: 'text-lg',
+        'x-large': 'text-xl'
+    };
+    
+    elements.previewText.className = sizeClasses[currentTextSize] || 'text-base';
+    
+    // Apply alignment
+    elements.previewText.classList.remove('text-left', 'text-center', 'text-right');
+    elements.previewText.classList.add(`text-${currentAlignment}`);
+    
+    // Apply font
+    elements.previewText.classList.toggle('font-serif', currentFont === 'serif');
+    
+    // Apply formatting classes
+    elements.previewText.classList.toggle('bold', document.getElementById('format-bold').classList.contains('active'));
+    elements.previewText.classList.toggle('italic', document.getElementById('format-italic').classList.contains('active'));
+    elements.previewText.classList.toggle('underline', document.getElementById('format-underline').classList.contains('active'));
+}
+
+// Toggle scrolling
+function toggleScrolling() {
+    const button = document.getElementById('start-scroll');
+    
+    if (isScrolling) {
+        stopScrolling();
+        button.innerHTML = '<i data-feather="play" class="w-4 h-4"></i> Start Scrolling';
+        feather.replace();
+    } else {
+        startScrolling();
+        button.innerHTML = '<i data-feather="pause" class="w-4 h-4"></i> Pause Scrolling';
+        feather.replace();
+    }
+}
+
+// Start scrolling animation
+function startScrolling() {
+    isScrolling = true;
+    
+    // Clear any existing interval
+    if (scrollInterval) {
+        clearInterval(scrollInterval);
+    }
+    
+    // Calculate duration based on speed (in seconds)
+    const baseDuration = 30; // Base duration for 1x speed
+    const duration = (baseDuration / currentSpeed) * 1000; // Convert to milliseconds
+    
+    // Reset animation
+    elements.previewText.style.animation = 'none';
+    void elements.previewText.offsetWidth; // Trigger reflow
+    
+    // Apply scrolling animation
+    elements.previewText.style.animation = `scroll ${duration}ms linear infinite`;
+    
+    // Add scrolling class for styling
+    elements.previewContainer.classList.add('scrolling');
+}
+
+// Stop scrolling animation
+function stopScrolling() {
+    isScrolling = false;
+    clearInterval(scrollInterval);
+    elements.previewText.style.animation = 'none';
+    elements.previewContainer.classList.remove('scrolling');
+}
+
+// Save script to localStorage
+function saveScript() {
+    const scriptData = {
+        title: elements.scriptTitle.value,
+        content: elements.scriptTextarea.value,
+        speed: currentSpeed,
+        theme: currentTheme,
+        textSize: currentTextSize,
+        alignment: currentAlignment,
+        font: currentFont
+    };
+    
+    localStorage.setItem('teleprompterScript', JSON.stringify(scriptData));
+    showToast('Script saved successfully!');
+}
+
+// Load script from localStorage
+function loadScript() {
+    const savedData = localStorage.getItem('teleprompterScript');
+    
+    if (savedData) {
+        const scriptData = JSON.parse(savedData);
+        
+        elements.scriptTitle.value = scriptData.title || '';
+        elements.scriptTextarea.value = scriptData.content || '';
+        elements.speedSlider.value = scriptData.speed || 1;
+        currentSpeed = scriptData.speed || 1;
+        elements.speedValue.textContent = `${currentSpeed.toFixed(1)}x`;
+        
+        handleThemeChange(scriptData.theme || 'blue');
+        elements.textSizeSelect.value = scriptData.textSize || 'medium';
+        currentTextSize = scriptData.textSize || 'medium';
+        
+        handleAlignmentChange(scriptData.alignment || 'center');
+        handleFontChange(scriptData.font || 'sans');
+        
+        updatePreview();
+        showToast('Script loaded successfully!');
+    } else {
+        showToast('No saved script found.');
+    }
+}
+
+// Export script as file
+function exportScript() {
+    const content = elements.scriptTextarea.value;
+    const title = elements.scriptTitle.value || 'teleprompter-script';
     
-    // Widget functionality
-    let isDragging = false;
-    const widget = document.querySelector('.max-w-4xl');
-    
-    widget.addEventListener('mousedown', function(e) {
-        if (e.target.closest('input, textarea, button, select')) return;
-        isDragging = true;
-        const offsetX = e.clientX - widget.getBoundingClientRect().left;
-        const offsetY = e.clientY - widget.getBoundingClientRect().top;
-        
-        function moveWidget(e) {
-            if (!isDragging) return;
-            widget.style.left = `${e.clientX - offsetX}px`;
-            widget.style.top = `${e.clientY - offsetY}px`;
-            widget.style.position = 'fixed';
-            widget.style.margin = '0';
-            widget.style.zIndex = '1000';
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${title}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    
+    setTimeout(() => {
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, 100);
+    
+    showToast('Script exported successfully!');
+}
+
+// Import script from file
+function importScriptFromFile(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+    
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        elements.scriptTextarea.value = e.target.result;
+        elements.scriptTitle.value = file.name.replace(/\.[^/.]+$/, ""); // Remove extension
+        updatePreview();
+        showToast('Script imported successfully!');
+    };
+    reader.readAsText(file);
+    
+    // Reset file input
+    elements.fileInput.value = '';
+}
+
+// Clear script
+function clearScript() {
+    if (confirm('Are you sure you want to clear the current script?')) {
+        elements.scriptTextarea.value = '';
+        elements.scriptTitle.value = '';
+        updatePreview();
+        showToast('Script cleared.');
+    }
+}
+
+// Toggle preview mode
+function togglePreviewMode() {
+    elements.previewContainer.classList.toggle('bg-black');
+    elements.previewContainer.classList.toggle('bg-gray-900');
+    showToast('Preview mode toggled.');
+}
+
+// Toggle mirror view
+function toggleMirrorView() {
+    mirroredView = !mirroredView;
+    elements.previewContainer.classList.toggle('mirror', mirroredView);
+    showToast(mirroredView ? 'Mirror view enabled.' : 'Mirror view disabled.');
+}
+
+// Setup keyboard shortcuts
+function setupKeyboardShortcuts() {
+    document.addEventListener('keydown', function(e) {
+        // Only trigger shortcuts when not in input fields
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+        
+        // Spacebar to toggle scrolling
+        if (e.code === 'Space') {
+            e.preventDefault();
+            toggleScrolling();
+        }
+        
+        // Ctrl+S to save
+        if (e.ctrlKey && e.code === 'KeyS') {
+            e.preventDefault();
+            saveScript();
         }
         
-        function stopDrag() {
-            isDragging = false;
-            document.removeEventListener('mousemove', moveWidget);
-            document.removeEventListener('mouseup', stopDrag);
+        // Ctrl+O to load
+        if (e.ctrlKey && e.code === 'KeyO') {
+            e.preventDefault();
+            loadScript();
         }
         
-        document.addEventListener('mousemove', moveWidget);
-        document.addEventListener('mouseup', stopDrag);
+        // Ctrl+E to export
+        if (e.ctrlKey && e.code === 'KeyE') {
+            e.preventDefault();
+            exportScript();
+        }
+        
+        // Up/Down arrows to adjust speed
+        if (e.code === 'ArrowUp') {
+            e.preventDefault();
+            const newValue = Math.min(5, parseFloat(elements.speedSlider.value) + 0.1);
+            elements.speedSlider.value = newValue.toFixed(1);
+            handleSpeedChange();
+        }
+        
+        if (e.code === 'ArrowDown') {
+            e.preventDefault();
+            const newValue = Math.max(0.1, parseFloat(elements.speedSlider.value) - 0.1);
+            elements.speedSlider.value = newValue.toFixed(1);
+            handleSpeedChange();
+        }
     });
-});
+}
+
+// Save settings to localStorage
+function saveSettings() {
+    const settings = {
+        speed: currentSpeed,
+        theme: currentTheme,
+        textSize: currentTextSize,
+        alignment: currentAlignment,
+        font: currentFont,
+        mirroredView: mirroredView
+    };
+    
+    localStorage.setItem('teleprompterSettings', JSON.stringify(settings));
+}
+
+// Load settings from localStorage
+function loadSettings() {
+    const savedSettings = localStorage.getItem('teleprompterSettings');
+    
+    if (savedSettings) {
+        const settings = JSON.parse(savedSettings);
+        
+        currentSpeed = settings.speed || 1;
+        elements.speedSlider.value = currentSpeed;
+        elements.speedValue.textContent = `${currentSpeed.toFixed(1)}x`;
+        
+        handleThemeChange(settings.theme || 'blue');
+        elements.textSizeSelect.value = settings.textSize || 'medium';
+        currentTextSize = settings.textSize || 'medium';
+        
+        handleAlignmentChange(settings.alignment || 'center');
+        handleFontChange(settings.font || 'sans');
+        
+        if (settings.mirroredView) {
+            mirroredView = true;
+            elements.previewContainer.classList.add('mirror');
+        }
+    }
+}
+
+// Show toast notification
+function showToast(message) {
+    const toast = document.createElement('div');
+    toast.className = 'toast show';
+    toast.textContent = message;
+    
+    document.body.appendChild(toast);
+    
+    setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => {
+            document.body.removeChild(toast);
+        }, 300);
+    }, 3000);
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', initializeComponents);

style.css

@@ -1,7 +1,14 @@
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');
 
 body {
     font-family: 'Inter', sans-serif;
+    overflow-x: hidden;
+}
+
+.font-serif {
+    font-family: 'Merriweather', serif;
 }
 
 /* Custom scrollbar */
@@ -22,6 +29,7 @@ body {
 ::-webkit-scrollbar-thumb:hover {
     background: #6B7280;
 }
+
 /* Animation for buttons */
 button {
     transition: all 0.2s ease;
@@ -32,6 +40,10 @@ button:hover {
     transform: translateY(-1px);
 }
 
+button.active {
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
 /* Custom range input styling */
 input[type="range"] {
     -webkit-appearance: none;
@@ -63,6 +75,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
 .widget-controls:hover {
     opacity: 1 !important;
 }
+
 /* Custom glow effect */
 .glow {
     box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
@@ -73,4 +86,167 @@ input[type="range"]::-webkit-slider-thumb:hover {
     background: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
-}
+}
+
+/* Preview container */
+#preview-container {
+    transition: all 0.3s ease;
+}
+
+.mirror {
+    transform: scaleX(-1);
+}
+
+/* Text alignment */
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+/* Text formatting */
+.bold {
+    font-weight: bold;
+}
+
+.italic {
+    font-style: italic;
+}
+
+.underline {
+    text-decoration: underline;
+}
+
+/* Animation for scrolling text */
+.scrolling-text {
+    animation: scroll linear infinite;
+}
+
+@keyframes scroll {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(-100%);
+    }
+}
+
+/* Modal styles */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.modal.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.modal-content {
+    background: #1F2937;
+    border-radius: 10px;
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    transform: translateY(-20px);
+    transition: transform 0.3s ease;
+}
+
+.modal.active .modal-content {
+    transform: translateY(0);
+}
+
+.modal-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid #374151;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+.modal-footer {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid #374151;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+
+/* Toast notifications */
+.toast {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: #1F2937;
+    color: white;
+    padding: 1rem 1.5rem;
+    border-radius: 5px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transform: translateX(150%);
+    transition: transform 0.3s ease;
+    z-index: 1001;
+}
+
+.toast.show {
+    transform: translateX(0);
+}
+
+/* Loading spinner */
+.spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 1s linear infinite;
+    display: inline-block;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+    .lg\:col-span-1, .lg\:col-span-2 {
+        grid-column: span 3 / span 3;
+    }
+}
+
+@media (max-width: 768px) {
+    .p-6 {
+        padding: 1rem;
+    }
+    
+    .gap-6 {
+        gap: 1rem;
+    }
+    
+    #preview-container {
+        height: 200px;
+    }
+}

templates.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Script Templates | Teleprompter Factory</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#3B82F6',
+                        },
+                        secondary: {
+                            500: '#10B981',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="max-w-6xl mx-auto">
+            <h1 class="text-3xl font-bold mb-2">Script Templates</h1>
+            <p class="text-gray-400 mb-8">Professional templates for various presentation types</p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Template Card 1 -->
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-primary-500 transition">
+                    <div class="flex items-start justify-between mb-4">
+                        <h3 class="text-xl font-semibold">Business Presentation</h3>
+                        <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">Popular</span>
+                    </div>
+                    <p class="text-gray-400 mb-4">Structured template for corporate presentations with introduction, key points, and conclusion.</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-gray-500">5 min read</span>
+                        <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-sm" onclick="loadTemplate('business')">Use Template</button>
+                    </div>
+                </div>
+                
+                <!-- Template Card 2 -->
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-primary-500 transition">
+                    <div class="flex items-start justify-between mb-4">
+                        <h3 class="text-xl font-semibold">Product Launch</h3>
+                        <span class="bg-green-500 text-white text-xs px-2 py-1 rounded">New</span>
+                    </div>
+                    <p class="text-gray-400 mb-4">Engaging script structure for unveiling new products with storytelling approach.</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-gray-500">7 min read</span>
+                        <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-sm" onclick="loadTemplate('product')">Use Template</button>
+                    </div>
+                </div>
+                
+                <!-- Template Card 3 -->
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-primary-500 transition">
+                    <div class="flex items-start justify-between mb-4">
+                        <h3 class="text-xl font-semibold">Educational Lecture</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">Academic-friendly template with clear sections for teaching complex topics.</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-gray-500">10 min read</span>
+                        <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-sm" onclick="loadTemplate('education')">Use Template</button>
+                    </div>
+                </div>
+                
+                <!-- Template Card 4 -->
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-primary-500 transition">
+                    <div class="flex items-start justify-between mb-4">
+                        <h3 class="text-xl font-semibold">Sales Pitch</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">Persuasive framework designed to convert prospects into customers effectively.</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-gray-500">4 min read</span>
+                        <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-sm" onclick="loadTemplate('sales')">Use Template</button>
+                    </div>
+                </div>
+                
+                <!-- Template Card 5 -->
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-primary-500 transition">
+                    <div class="flex items-start justify-between mb-4">
+                        <h3 class="text-xl font-semibold">Conference Keynote</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">High-impact structure for captivating large audiences at conferences.</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-gray-500">15 min read</span>
+                        <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-sm" onclick="loadTemplate('keynote')">Use Template</button>
+                    </div>
+                </div>
+                
+                <!-- Template Card 6 -->
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-primary-500 transition">
+                    <div class="flex items-start justify-between mb-4">
+                        <h3 class="text-xl font-semibold">Interview Script</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">Natural conversation flow for television or podcast interviews.</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-gray-500">8 min read</span>
+                        <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg text-sm" onclick="loadTemplate('interview')">Use Template</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script>
+        feather.replace();
+        
+        function loadTemplate(type) {
+            // In a real implementation, this would load the actual template
+            alert(`Loading ${type} template. In a full implementation, this would populate your script editor.`);
+        }
+    </script>
+</body>
+</html>