I want it all in Spanish even more high tech and called simply >_teleprompter

components/footer.js

@@ -10,7 +10,6 @@ class CustomFooter extends HTMLElement {
                     padding: 2rem 0;
                     margin-top: 3rem;
                 }
-                
                 .footer-container {
                     max-width: 1200px;
                     margin: 0 auto;
@@ -63,21 +62,19 @@ class CustomFooter extends HTMLElement {
                     color: rgba(255, 255, 255, 0.4);
                     font-size: 0.9rem;
                 }
-                
-                @media (max-width: 768px) {
+@media (max-width: 768px) {
                     .footer-container {
                         grid-template-columns: 1fr;
                         padding: 0 1rem;
                     }
                 }
             </style>
-            
             <footer>
                 <div class="footer-container">
                     <div class="footer-section">
-                        <h3>Teleprompter Factory</h3>
+                        <h3>>_teleprompter</h3>
                         <p style="color: rgba(255, 255, 255, 0.6); line-height: 1.5;">
-                            Professional teleprompter software for presenters, broadcasters, and content creators.
+                            Software profesional de teleprompter para presentadores, emisoras y creadores de contenido.
                         </p>
                         <div class="social-links">
                             <a href="#" class="social-link"><i data-feather="twitter"></i></a>
@@ -87,20 +84,20 @@ class CustomFooter extends HTMLElement {
                         </div>
                     </div>
                     <div class="footer-section">
-                        <h3>Quick Links</h3>
+                        <h3>Enlaces Rápidos</h3>
                         <div class="footer-links">
-                            <a href="/" class="footer-link">Home</a>
-                            <a href="/features" class="footer-link">Features</a>
-                            <a href="/pricing" class="footer-link">Pricing</a>
-                            <a href="/templates" class="footer-link">Templates</a>
+                            <a href="/" class="footer-link">Inicio</a>
+                            <a href="/features" class="footer-link">Características</a>
+                            <a href="/pricing" class="footer-link">Precios</a>
+                            <a href="/templates" class="footer-link">Plantillas</a>
                         </div>
                     </div>
 <div class="footer-section">
-                        <h3>Resources</h3>
+                        <h3>Recursos</h3>
                         <div class="footer-links">
                             <a href="/blog" class="footer-link">Blog</a>
-                            <a href="/tutorials" class="footer-link">Tutorials</a>
-                            <a href="/support" class="footer-link">Support</a>
+                            <a href="/tutorials" class="footer-link">Tutoriales</a>
+                            <a href="/support" class="footer-link">Soporte</a>
                             <a href="/faq" class="footer-link">FAQ</a>
                         </div>
                     </div>
@@ -108,18 +105,18 @@ class CustomFooter extends HTMLElement {
                     <div class="footer-section">
                         <h3>Legal</h3>
                         <div class="footer-links">
-                            <a href="/privacy" class="footer-link">Privacy Policy</a>
-                            <a href="/terms" class="footer-link">Terms of Service</a>
-                            <a href="/cookies" class="footer-link">Cookie Policy</a>
+                            <a href="/privacy" class="footer-link">Política de Privacidad</a>
+                            <a href="/terms" class="footer-link">Términos de Servicio</a>
+                            <a href="/cookies" class="footer-link">Política de Cookies</a>
                         </div>
                     </div>
                 </div>
                 
                 <div class="copyright">
-                    &copy; ${new Date().getFullYear()} Teleprompter Factory Deluxe. All rights reserved.
+                    &copy; ${new Date().getFullYear()} >_teleprompter. Todos los derechos reservados.
                 </div>
             </footer>
-        `;
+`;
     }
 }
 

components/navbar.js

@@ -17,7 +17,6 @@ class CustomNavbar extends HTMLElement {
                     justify-content: space-between;
                     align-items: center;
                 }
-                
                 .logo {
                     font-weight: 700;
                     font-size: 1.25rem;
@@ -40,8 +39,7 @@ class CustomNavbar extends HTMLElement {
                 .nav-link:hover {
                     color: white;
                 }
-                
-                @media (max-width: 768px) {
+@media (max-width: 768px) {
                     .nav-container {
                         flex-direction: column;
                         padding: 1rem;
@@ -54,23 +52,22 @@ class CustomNavbar extends HTMLElement {
                     }
                 }
             </style>
-            
             <nav>
                 <div class="nav-container">
                     <a href="/" class="logo">
-                        <i data-feather="tv"></i>
-                        Teleprompter Factory
+                        <i data-feather="terminal"></i>
+                        >_teleprompter
                     </a>
                     <div class="nav-links">
-                        <a href="/" class="nav-link">Home</a>
-                        <a href="/templates" class="nav-link">Templates</a>
-                        <a href="/features" class="nav-link">Features</a>
-                        <a href="/pricing" class="nav-link">Pricing</a>
-                        <a href="/contact" class="nav-link">Contact</a>
+                        <a href="/" class="nav-link">Inicio</a>
+                        <a href="/templates" class="nav-link">Plantillas</a>
+                        <a href="/features" class="nav-link">Características</a>
+                        <a href="/pricing" class="nav-link">Precios</a>
+                        <a href="/contact" class="nav-link">Contacto</a>
                     </div>
 </div>
             </nav>
-        `;
+`;
     }
 }
 

index.html

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Teleprompter Factory Deluxe</title>
-    <link rel="stylesheet" href="style.css">
+    <title>>_teleprompter</title>
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -42,50 +42,47 @@
                         <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>
+                <h1 class="text-3xl font-bold">>_teleprompter</h1>
+                <p class="text-gray-200 mt-2">Sistema Profesional de Teleprompter</p>
             </div>
-            <div class="p-6 grid grid-cols-1 lg:grid-cols-3 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="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>Título del Script</span>
                             <span class="text-xs text-gray-400">Ctrl+T</span>
                         </label>
                         <div class="relative">
-                            <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">
+                            <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="Mi Presentación">
                             <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>Velocidad de Desplazamiento</span>
                             <span class="text-xs text-gray-400" id="speed-value">1.0x</span>
                         </label>
                         <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>
+                            <span>Lento</span>
+                            <span>Medio</span>
+                            <span>Rápido</span>
                         </div>
                     </div>
-                    
                     <div>
-                        <label class="block text-sm font-medium text-gray-300 mb-1">Text Size</label>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Tamaño del Texto</label>
                         <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>
+                            <option value="small">Pequeño</option>
+                            <option value="medium" selected>Mediano</option>
+                            <option value="large">Grande</option>
+                            <option value="x-large">Extra Grande</option>
                         </select>
                     </div>
-                    
                     <div>
-                        <label class="block text-sm font-medium text-gray-300 mb-1">Theme</label>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Tema</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>
@@ -95,9 +92,8 @@
                             <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>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Alineación del Texto</label>
                         <div class="grid grid-cols-3 gap-2">
                             <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>
@@ -110,88 +106,86 @@
                             </button>
                         </div>
                     </div>
-                    
                     <div>
-                        <label class="block text-sm font-medium text-gray-300 mb-1">Font Style</label>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Estilo de Fuente</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>
                 
                 <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">
+                            <button id="format-bold" class="p-1 bg-gray-600 rounded hover:bg-gray-500" title="Negrita">
                                 <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">
+                            <button id="format-italic" class="p-1 bg-gray-600 rounded hover:bg-gray-500" title="Cursiva">
                                 <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">
+                            <button id="format-underline" class="p-1 bg-gray-600 rounded hover:bg-gray-500" title="Subrayado">
                                 <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!
+                        <textarea id="script-textarea" class="w-full h-64 bg-transparent resize-none outline-none text-gray-200 placeholder-gray-500" placeholder="Ingrese su script aquí...">¡Bienvenido a >_teleprompter!
 
-This is a professional teleprompter solution with advanced features:
+Esta es una solución profesional de teleprompter con características avanzadas:
 
-• Real-time scrolling control
-• Multiple themes and customization
-• Text formatting options
-• Keyboard shortcuts for efficiency
-• Script saving and loading
+• Control de desplazamiento en tiempo real
+• Múltiples temas y personalización
+• Opciones de formato de texto
+• Atajos de teclado para eficiencia
+• Guardado y carga de scripts
 
-Try adjusting the scroll speed to see how it works!</textarea>
+¡Intenta ajustar la velocidad de desplazamiento para ver cómo funciona!</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">
+                            <button id="import-script" class="p-2 bg-gray-600 rounded-lg hover:bg-gray-500" title="Importar 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">
+                            <button id="clear-script" class="p-2 bg-gray-600 rounded-lg hover:bg-gray-500" title="Limpiar Todo">
                                 <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>
+                            <h3 class="font-medium">Vista Previa</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>
+                                <button id="toggle-preview" class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm">Alternar Vista</button>
+                                <button id="mirror-preview" class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm">Espejo</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.
+                                ¡Bienvenido a >_teleprompter! Esta es una solución profesional de teleprompter con características avanzadas.
                             </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 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
+                        <i data-feather="save" class="w-4 h-4"></i> Guardar
                     </button>
                     <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
+                        <i data-feather="folder" class="w-4 h-4"></i> Cargar
                     </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
+                        <i data-feather="download" class="w-4 h-4"></i> Exportar
                     </button>
                 </div>
                 <div class="flex gap-2">
                     <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
+                        <i data-feather="help-circle" class="w-4 h-4"></i> Ayuda
                     </button>
                     <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
+                        <i data-feather="play" class="w-4 h-4"></i> Iniciar Desplazamiento
                     </button>
                 </div>
-            </div>
+</div>
         </div>
     </main>
     
@@ -199,7 +193,7 @@ Try adjusting the scroll speed to see how it works!</textarea>
     <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/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/help-modal.js"></script>
     <script src="script.js"></script>

script.js

@@ -1,5 +1,5 @@
 
-// Global variables
+// Variables globales
 let isScrolling = false;
 let scrollInterval;
 let currentSpeed = 1;
@@ -9,7 +9,7 @@ let currentAlignment = 'center';
 let currentFont = 'sans';
 let mirroredView = false;
 
-// DOM Elements
+// Elementos DOM
 const elements = {
     speedSlider: document.getElementById('speed-slider'),
     speedValue: document.getElementById('speed-value'),
@@ -20,46 +20,44 @@ const elements = {
     scriptTitle: document.getElementById('script-title'),
     fileInput: document.getElementById('file-input')
 };
-
-// Initialize all components
+// Inicializar todos los componentes
 function initializeComponents() {
     setupEventListeners();
     loadSettings();
     updatePreview();
     setupKeyboardShortcuts();
 }
-
-// Set up event listeners
+// Configurar escuchadores de eventos
 function setupEventListeners() {
-    // Speed control
+    // Control de velocidad
     elements.speedSlider.addEventListener('input', handleSpeedChange);
     
-    // Text area changes
+    // Cambios en el área de texto
     elements.scriptTextarea.addEventListener('input', updatePreview);
     
-    // Text size changes
+    // Cambios en tamaño de texto
     elements.textSizeSelect.addEventListener('change', handleTextSizeChange);
     
-    // Theme selection
+    // Selección de tema
     document.querySelectorAll('.theme-btn').forEach(button => {
         button.addEventListener('click', () => handleThemeChange(button.dataset.theme));
     });
     
-    // Text alignment
+    // Alineación de texto
     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
+    // Estilo de fuente
     document.getElementById('font-sans').addEventListener('click', () => handleFontChange('sans'));
     document.getElementById('font-serif').addEventListener('click', () => handleFontChange('serif'));
     
-    // Formatting buttons
+    // Botones de formato
     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
+    // Botones de control
     document.getElementById('start-scroll').addEventListener('click', toggleScrolling);
     document.getElementById('save-script').addEventListener('click', saveScript);
     document.getElementById('load-script').addEventListener('click', loadScript);
@@ -69,14 +67,13 @@ function setupEventListeners() {
     document.getElementById('toggle-preview').addEventListener('click', togglePreviewMode);
     document.getElementById('mirror-preview').addEventListener('click', toggleMirrorView);
     
-    // File input
+    // Entrada de archivo
     elements.fileInput.addEventListener('change', importScriptFromFile);
     
-    // Window events
+    // Eventos de ventana
     window.addEventListener('beforeunload', saveSettings);
 }
-
-// Handle speed change
+// Manejar cambio de velocidad
 function handleSpeedChange() {
     currentSpeed = parseFloat(elements.speedSlider.value);
     elements.speedValue.textContent = `${currentSpeed.toFixed(1)}x`;
@@ -86,24 +83,22 @@ function handleSpeedChange() {
         startScrolling();
     }
 }
-
-// Handle text size change
+// Manejar cambio de tamaño de texto
 function handleTextSizeChange() {
     currentTextSize = elements.textSizeSelect.value;
     updatePreview();
 }
-
-// Handle theme change
+// Manejar cambio de tema
 function handleThemeChange(theme) {
     currentTheme = theme;
     
-    // Update active button
+    // Actualizar botón activo
     document.querySelectorAll('.theme-btn').forEach(btn => {
         btn.classList.remove('active');
     });
     document.querySelector(`.theme-btn[data-theme="${theme}"]`).classList.add('active');
     
-    // Apply theme to preview
+    // Aplicar tema a la vista previa
     const themeColors = {
         blue: 'from-blue-500 to-blue-700',
         green: 'from-green-500 to-green-700',
@@ -118,12 +113,11 @@ function handleThemeChange(theme) {
     
     updatePreview();
 }
-
-// Handle alignment change
+// Manejar cambio de alineación
 function handleAlignmentChange(alignment) {
     currentAlignment = alignment;
     
-    // Update active button
+    // Actualizar botón activo
     document.querySelectorAll('#align-left, #align-center, #align-right').forEach(btn => {
         btn.classList.remove('active');
     });
@@ -131,33 +125,30 @@ function handleAlignmentChange(alignment) {
     
     updatePreview();
 }
-
-// Handle font change
+// Manejar cambio de fuente
 function handleFontChange(font) {
     currentFont = font;
     
-    // Update active button
+    // Actualizar botón activo
     document.getElementById('font-sans').classList.toggle('active', font === 'sans');
     document.getElementById('font-serif').classList.toggle('active', font === 'serif');
     
     updatePreview();
 }
-
-// Toggle text formatting
+// Alternar formato de texto
 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`);
+    // En una implementación real, esto aplicaría formato al texto seleccionado
+    showToast(`Alternado formato ${format}`);
 }
-
-// Update preview
+// Actualizar vista previa
 function updatePreview() {
-    const text = elements.scriptTextarea.value || "Your script will appear here...";
+    const text = elements.scriptTextarea.value || "Su script aparecerá aquí...";
     elements.previewText.textContent = text;
     
-    // Apply text size
+    // Aplicar tamaño de texto
     const sizeClasses = {
         small: 'text-sm',
         medium: 'text-base',
@@ -167,67 +158,63 @@ function updatePreview() {
     
     elements.previewText.className = sizeClasses[currentTextSize] || 'text-base';
     
-    // Apply alignment
+    // Aplicar alineación
     elements.previewText.classList.remove('text-left', 'text-center', 'text-right');
     elements.previewText.classList.add(`text-${currentAlignment}`);
     
-    // Apply font
+    // Aplicar fuente
     elements.previewText.classList.toggle('font-serif', currentFont === 'serif');
     
-    // Apply formatting classes
+    // Aplicar clases de formato
     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
+// Alternar desplazamiento
 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';
+        button.innerHTML = '<i data-feather="play" class="w-4 h-4"></i> Iniciar Desplazamiento';
         feather.replace();
     } else {
         startScrolling();
-        button.innerHTML = '<i data-feather="pause" class="w-4 h-4"></i> Pause Scrolling';
+        button.innerHTML = '<i data-feather="pause" class="w-4 h-4"></i> Pausar Desplazamiento';
         feather.replace();
     }
 }
-
-// Start scrolling animation
+// Iniciar animación de desplazamiento
 function startScrolling() {
     isScrolling = true;
     
-    // Clear any existing interval
+    // Limpiar cualquier intervalo existente
     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
+    // Calcular duración basada en velocidad (en segundos)
+    const baseDuration = 30; // Duración base para velocidad 1x
+    const duration = (baseDuration / currentSpeed) * 1000; // Convertir a milisegundos
     
-    // Reset animation
+    // Reiniciar animación
     elements.previewText.style.animation = 'none';
-    void elements.previewText.offsetWidth; // Trigger reflow
+    void elements.previewText.offsetWidth; // Activar reflow
     
-    // Apply scrolling animation
+    // Aplicar animación de desplazamiento
     elements.previewText.style.animation = `scroll ${duration}ms linear infinite`;
     
-    // Add scrolling class for styling
+    // Agregar clase de desplazamiento para estilizar
     elements.previewContainer.classList.add('scrolling');
 }
-
-// Stop scrolling animation
+// Detener animación de desplazamiento
 function stopScrolling() {
     isScrolling = false;
     clearInterval(scrollInterval);
     elements.previewText.style.animation = 'none';
     elements.previewContainer.classList.remove('scrolling');
 }
-
-// Save script to localStorage
+// Guardar script en localStorage
 function saveScript() {
     const scriptData = {
         title: elements.scriptTitle.value,
@@ -240,10 +227,9 @@ function saveScript() {
     };
     
     localStorage.setItem('teleprompterScript', JSON.stringify(scriptData));
-    showToast('Script saved successfully!');
+    showToast('¡Script guardado exitosamente!');
 }
-
-// Load script from localStorage
+// Cargar script desde localStorage
 function loadScript() {
     const savedData = localStorage.getItem('teleprompterScript');
     
@@ -264,13 +250,12 @@ function loadScript() {
         handleFontChange(scriptData.font || 'sans');
         
         updatePreview();
-        showToast('Script loaded successfully!');
+        showToast('¡Script cargado exitosamente!');
     } else {
-        showToast('No saved script found.');
+        showToast('No se encontró script guardado.');
     }
 }
-
-// Export script as file
+// Exportar script como archivo
 function exportScript() {
     const content = elements.scriptTextarea.value;
     const title = elements.scriptTitle.value || 'teleprompter-script';
@@ -289,10 +274,9 @@ function exportScript() {
         URL.revokeObjectURL(url);
     }, 100);
     
-    showToast('Script exported successfully!');
+    showToast('¡Script exportado exitosamente!');
 }
-
-// Import script from file
+// Importar script desde archivo
 function importScriptFromFile(event) {
     const file = event.target.files[0];
     if (!file) return;
@@ -300,71 +284,67 @@ function importScriptFromFile(event) {
     const reader = new FileReader();
     reader.onload = function(e) {
         elements.scriptTextarea.value = e.target.result;
-        elements.scriptTitle.value = file.name.replace(/\.[^/.]+$/, ""); // Remove extension
+        elements.scriptTitle.value = file.name.replace(/\.[^/.]+$/, ""); // Eliminar extensión
         updatePreview();
-        showToast('Script imported successfully!');
+        showToast('¡Script importado exitosamente!');
     };
     reader.readAsText(file);
     
-    // Reset file input
+    // Reiniciar entrada de archivo
     elements.fileInput.value = '';
 }
-
-// Clear script
+// Limpiar script
 function clearScript() {
-    if (confirm('Are you sure you want to clear the current script?')) {
+    if (confirm('¿Está seguro de que desea limpiar el script actual?')) {
         elements.scriptTextarea.value = '';
         elements.scriptTitle.value = '';
         updatePreview();
-        showToast('Script cleared.');
+        showToast('Script limpiado.');
     }
 }
-
-// Toggle preview mode
+// Alternar modo de vista previa
 function togglePreviewMode() {
     elements.previewContainer.classList.toggle('bg-black');
     elements.previewContainer.classList.toggle('bg-gray-900');
-    showToast('Preview mode toggled.');
+    showToast('Modo de vista previa alternado.');
 }
-
-// Toggle mirror view
+// Alternar vista espejo
 function toggleMirrorView() {
     mirroredView = !mirroredView;
     elements.previewContainer.classList.toggle('mirror', mirroredView);
-    showToast(mirroredView ? 'Mirror view enabled.' : 'Mirror view disabled.');
+    showToast(mirroredView ? 'Vista espejo habilitada.' : 'Vista espejo deshabilitada.');
 }
-
-// Setup keyboard shortcuts
+// Configurar atajos de teclado
 function setupKeyboardShortcuts() {
     document.addEventListener('keydown', function(e) {
-        // Only trigger shortcuts when not in input fields
+        // Solo activar atajos cuando no esté en campos de entrada
         if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
         
-        // Spacebar to toggle scrolling
+        // Barra espaciadora para alternar desplazamiento
         if (e.code === 'Space') {
             e.preventDefault();
             toggleScrolling();
         }
         
-        // Ctrl+S to save
+        // Ctrl+S para guardar
         if (e.ctrlKey && e.code === 'KeyS') {
             e.preventDefault();
             saveScript();
         }
         
-        // Ctrl+O to load
+        // Ctrl+O para cargar
         if (e.ctrlKey && e.code === 'KeyO') {
             e.preventDefault();
             loadScript();
         }
         
-        // Ctrl+E to export
+        // Ctrl+E para exportar
         if (e.ctrlKey && e.code === 'KeyE') {
             e.preventDefault();
             exportScript();
         }
         
-        // Up/Down arrows to adjust speed
+        // Flechas Arriba/Abajo para ajustar velocidad
         if (e.code === 'ArrowUp') {
             e.preventDefault();
             const newValue = Math.min(5, parseFloat(elements.speedSlider.value) + 0.1);
@@ -380,8 +360,7 @@ function setupKeyboardShortcuts() {
         }
     });
 }
-
-// Save settings to localStorage
+// Guardar configuraciones en localStorage
 function saveSettings() {
     const settings = {
         speed: currentSpeed,
@@ -394,8 +373,7 @@ function saveSettings() {
     
     localStorage.setItem('teleprompterSettings', JSON.stringify(settings));
 }
-
-// Load settings from localStorage
+// Cargar configuraciones desde localStorage
 function loadSettings() {
     const savedSettings = localStorage.getItem('teleprompterSettings');
     
@@ -419,8 +397,7 @@ function loadSettings() {
         }
     }
 }
-
-// Show toast notification
+// Mostrar notificación toast
 function showToast(message) {
     const toast = document.createElement('div');
     toast.className = 'toast show';
@@ -435,6 +412,5 @@ function showToast(message) {
         }, 300);
     }, 3000);
 }
-
 // Initialize when DOM is loaded
 document.addEventListener('DOMContentLoaded', initializeComponents);