Simulador de Roteiro Script Cinematografico

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