File size: 13,164 Bytes
b4ad052 6917ab6 b4ad052 67f6005 b4ad052 67f6005 b4ad052 67f6005 b4ad052 67f6005 b4ad052 6917ab6 b4ad052 6917ab6 b4ad052 67f6005 b4ad052 6917ab6 b4ad052 6917ab6 b4ad052 6917ab6 b4ad052 67f6005 6917ab6 b4ad052 6917ab6 67f6005 6917ab6 b4ad052 6917ab6 67f6005 6917ab6 b4ad052 67f6005 6917ab6 67f6005 b4ad052 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 6917ab6 67f6005 b4ad052 6917ab6 67f6005 b4ad052 67f6005 6917ab6 b4ad052 67f6005 6917ab6 67f6005 6917ab6 b4ad052 67f6005 6917ab6 b4ad052 67f6005 6917ab6 b4ad052 6917ab6 67f6005 b4ad052 67f6005 b4ad052 67f6005 6917ab6 b4ad052 67f6005 b4ad052 67f6005 b4ad052 67f6005 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 |
<!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>
<!-- 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();
// 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>
|