Simulador de Roteiro Script Cinematografico
unknown
plain_text
9 months ago
6.8 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simulador de Roteiro Cinematográfico</title> <style> body { background-color: black; color: white; font-family: Arial, sans-serif; overflow: hidden; margin: 0; padding: 0; } .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .input-container { text-align: center; margin-bottom: 20px; width: 80%; /* Ajustei a largura para 80% */ } textarea { width: 100%; min-height: 250px; /* Altura mínima da textarea */ max-height: 60vh; /* Altura máxima da textarea */ resize: vertical; /* Permite redimensionamento vertical */ padding: 10px; font-size: 16px; line-height: 1.6; } .button-container { text-align: center; margin-bottom: 10px; } button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; font-size: 16px; transition: background-color 0.3s; margin-right: 10px; } button:hover { background-color: #45a049; } select { padding: 5px; font-size: 16px; } .script-container { width: 90%; /* Ajustei para ocupar 90% da largura total */ height: 80vh; /* Altura do container ajustada */ overflow-y: auto; /* Adicionado scroll caso ultrapasse a altura */ padding: 10vh 5%; /* Margem de 10% em cima e embaixo */ text-align: center; } .script-text { font-size: 24px; /* Aumentei o tamanho do texto */ line-height: 1.6; animation: scroll-up 180s linear infinite; /* Aumentei a duração da animação para 180s */ } @keyframes scroll-up { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } ::-webkit-scrollbar { display: none; /* Oculta a barra de rolagem */ } </style> </head> <body> <div class="container"> <div class="input-container"> <textarea id="roteiroInput" placeholder="Cole seu roteiro aqui..." spellcheck="false"></textarea> </div> <div class="button-container"> <button onclick="exibirRoteiro()">Exibir Roteiro</button> <button id="editBtn" onclick="editarRoteiro()">Editar Roteiro</button> <button id="pauseResumeBtn" onclick="pauseResume()">Pausar / Retomar</button> <label for="speedSelect">Velocidade:</label> <select id="speedSelect" onchange="alterarVelocidade()"> <option value="180">0.1x</option> <!-- 180 segundos por ciclo --> <option value="90">0.2x</option> <!-- 90 segundos por ciclo --> <option value="60">0.3x</option> <!-- 60 segundos por ciclo --> <option value="45">0.4x</option> <!-- 45 segundos por ciclo --> <option value="36">0.5x</option> <!-- 36 segundos por ciclo --> <option value="30">0.6x</option> <!-- 30 segundos por ciclo --> <option value="24">0.7x</option> <!-- 24 segundos por ciclo --> <option value="22.5">0.8x</option> <!-- 22.5 segundos por ciclo --> <option value="18">0.9x</option> <!-- 18 segundos por ciclo --> <option value="15">1x</option> <!-- 15 segundos por ciclo --> <option value="7.5">2x</option> <!-- 7.5 segundos por ciclo --> <option value="5">3x</option> <!-- 5 segundos por ciclo --> </select> <button onclick="toggleFullScreen()">Tela Cheia (F11)</button> </div> <div class="script-container"> <div class="script-text" id="scriptText"> <!-- Aqui será exibido o texto do roteiro --> </div> </div> </div> <script> let animationPaused = false; let originalRoteiro = ''; // Variável para armazenar o roteiro original function exibirRoteiro() { const roteiro = document.getElementById('roteiroInput').value; document.getElementById('scriptText').innerText = roteiro; originalRoteiro = roteiro; // Armazena o roteiro original document.getElementById('roteiroInput').style.display = 'none'; // Oculta a área de entrada de texto } function editarRoteiro() { const roteiroInput = document.getElementById('roteiroInput'); roteiroInput.style.display = 'block'; // Mostra a área de entrada de texto roteiroInput.value = originalRoteiro; // Preenche com o roteiro original document.getElementById('scriptText').innerText = ''; // Limpa o texto exibido pauseAnimation(); // Pausa a animação ao editar o roteiro } function alterarVelocidade() { const speedSelect = document.getElementById('speedSelect'); const scriptText = document.querySelector('.script-text'); scriptText.style.animationDuration = speedSelect.value + 's'; } function pauseResume() { const scriptText = document.querySelector('.script-text'); if (animationPaused) { scriptText.style.animationPlayState = 'running'; document.getElementById('pauseResumeBtn').innerText = 'Pausar'; } else { scriptText.style.animationPlayState = 'paused'; document.getElementById('pauseResumeBtn').innerText = 'Retomar'; } animationPaused = !animationPaused; } function toggleFullScreen() { const scriptContainer = document.querySelector('.script-container'); if (!document.fullscreenElement) { scriptContainer.requestFullscreen().catch(err => { alert(`Erro ao tentar entrar em tela cheia: ${err.message}`); }); } else { document.exitFullscreen(); } } function pauseAnimation() { const scriptText = document.querySelector('.script-text'); scriptText.style.animationPlayState = 'paused'; animationPaused = true; document.getElementById('pauseResumeBtn').innerText = 'Retomar'; } </script> </body> </html>
Editor is loading...
Leave a Comment