| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <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> |
| <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 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 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 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 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">>_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="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>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="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>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>Lento</span> |
| <span>Medio</span> |
| <span>Rápido</span> |
| </div> |
| </div> |
| <div> |
| <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">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">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> |
| <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">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> |
| </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">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 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="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="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="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="Ingrese su script aquí...">¡Bienvenido a >_teleprompter! |
|
|
| Esta es una solución profesional de teleprompter con características avanzadas: |
|
|
| • 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 |
|
|
| ¡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="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="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">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">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"> |
| ¡Bienvenido a >_teleprompter! Esta es una solución profesional de teleprompter con características avanzadas. |
| </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> 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> 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> 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> 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> Iniciar Desplazamiento |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| |
| <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(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| initializeComponents(); |
| |
| |
| 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> |
|
|
