|
|
<!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> |
|
|
|
