|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Conversor Avançado de Texto para SRT com Terminação em Pontos</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); } |
|
|
to { transform: translateX(0); } |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
@keyframes rotate { |
|
|
from { transform: rotate(0deg); } |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
} |
|
|
.slide-in { |
|
|
animation: slideIn 0.3s ease-out forwards; |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
.rotate { |
|
|
animation: rotate 2s linear infinite; |
|
|
} |
|
|
.text-area-container { |
|
|
position: relative; |
|
|
} |
|
|
.char-count { |
|
|
position: absolute; |
|
|
right: 10px; |
|
|
bottom: 10px; |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
padding: 2px 8px; |
|
|
border-radius: 10px; |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
.dark .char-count { |
|
|
background: rgba(31, 41, 55, 0.8); |
|
|
color: white; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 4px; |
|
|
background: #e2e8f0; |
|
|
border-radius: 2px; |
|
|
overflow: hidden; |
|
|
} |
|
|
.dark .progress-bar { |
|
|
background: #374151; |
|
|
} |
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background: #3b82f6; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.srt-block { |
|
|
border-left: 4px solid #3b82f6; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.dark .srt-block { |
|
|
background-color: #1f2937; |
|
|
border-left-color: #60a5fa; |
|
|
} |
|
|
.srt-block:hover { |
|
|
transform: translateX(5px); |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
.dark .srt-block:hover { |
|
|
background-color: #374151; |
|
|
} |
|
|
.copy-btn { |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
.srt-block:hover .copy-btn { |
|
|
opacity: 1; |
|
|
} |
|
|
.tooltip { |
|
|
position: relative; |
|
|
} |
|
|
.tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 120px; |
|
|
background-color: #333; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -60px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.dark .tooltip-text { |
|
|
background-color: #111827; |
|
|
} |
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.5s ease-out; |
|
|
} |
|
|
.image-block { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.image-block:hover { |
|
|
transform: scale(1.02); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.dark .image-block:hover { |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.clock { |
|
|
font-family: 'Courier New', monospace; |
|
|
letter-spacing: 2px; |
|
|
} |
|
|
.dark { |
|
|
background-color: #111827; |
|
|
color: #f3f4f6; |
|
|
} |
|
|
.dark .bg-white { |
|
|
background-color: #1f2937; |
|
|
} |
|
|
.dark .text-gray-800 { |
|
|
color: #f3f4f6; |
|
|
} |
|
|
.dark .text-gray-600 { |
|
|
color: #d1d5db; |
|
|
} |
|
|
.dark .border-gray-300 { |
|
|
border-color: #4b5563; |
|
|
} |
|
|
.dark .bg-gray-200 { |
|
|
background-color: #374151; |
|
|
color: #f3f4f6; |
|
|
} |
|
|
.dark .bg-gray-50 { |
|
|
background-color: #1f2937; |
|
|
} |
|
|
.dark .border-gray-200 { |
|
|
border-color: #374151; |
|
|
} |
|
|
.dark .shadow-md { |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.dark .shadow-inner { |
|
|
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen flex flex-col dark:bg-gray-900 transition-colors duration-300"> |
|
|
<div class="container mx-auto px-4 py-8 flex-grow"> |
|
|
<div class="max-w-5xl mx-auto"> |
|
|
|
|
|
<header class="text-center mb-8 fade-in relative"> |
|
|
<div class="absolute top-0 right-0 flex items-center space-x-4"> |
|
|
<div class="clock bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-md text-sm font-mono"> |
|
|
<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span> |
|
|
</div> |
|
|
<button id="darkModeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200"> |
|
|
<i class="fas fa-moon dark:hidden"></i> |
|
|
<i class="fas fa-sun hidden dark:inline"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-2"> |
|
|
<i class="fas fa-closed-captioning text-blue-500 mr-2"></i> |
|
|
Conversor de Texto para SRT com Terminação em Pontos |
|
|
</h1> |
|
|
<p class="text-gray-600 dark:text-gray-300">Transforme texto em legendas SRT respeitando a pontuação</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden mb-8"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-white"> |
|
|
<i class="fas fa-edit text-blue-500 mr-2"></i> |
|
|
Insira seu texto |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="sampleBtn" type="button" class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition"> |
|
|
<i class="fas fa-lightbulb mr-1"></i> Exemplo |
|
|
</button> |
|
|
<button id="clearInputBtn" type="button" class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition"> |
|
|
<i class="fas fa-trash-alt mr-1"></i> Limpar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-area-container mb-2"> |
|
|
<textarea id="textoInput" class="w-full h-64 p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none dark:bg-gray-700 dark:text-white" placeholder="Cole ou digite o texto que deseja converter para formato SRT..."></textarea> |
|
|
<div class="char-count dark:bg-gray-700 dark:text-gray-300"> |
|
|
<span id="charCount">0</span> caracteres | |
|
|
<span id="wordCount">0</span> palavras |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="progress-bar mb-4"> |
|
|
<div id="progressFill" class="progress-fill" style="width: 0%"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<label for="charsPerBlock" class="mr-2 text-sm text-gray-600 dark:text-gray-300">Caracteres/bloco:</label> |
|
|
<input type="number" id="charsPerBlock" value="490" min="50" max="1000" class="w-20 p-1 border border-gray-300 dark:border-gray-600 rounded text-sm dark:bg-gray-700 dark:text-white"> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<label for="blockDuration" class="mr-2 text-sm text-gray-600 dark:text-gray-300">Duração (s):</label> |
|
|
<input type="number" id="blockDuration" value="50" min="1" max="120" class="w-16 p-1 border border-gray-300 dark:border-gray-600 rounded text-sm dark:bg-gray-700 dark:text-white"> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="endOnPeriod" checked class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> |
|
|
<label for="endOnPeriod" class="ml-2 text-sm text-gray-600 dark:text-gray-300">Terminar em pontos</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button id="convertBtn" type="button" class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition flex items-center"> |
|
|
<i class="fas fa-exchange-alt mr-2"></i> Converter para SRT |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="resultsSection" class="hidden"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-white"> |
|
|
<i class="fas fa-file-alt text-green-500 mr-2"></i> |
|
|
Legendas SRT Geradas |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="downloadBtn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center"> |
|
|
<i class="fas fa-download mr-2"></i> Baixar SRT |
|
|
</button> |
|
|
<button id="copyAllBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center"> |
|
|
<i class="fas fa-copy mr-2"></i> Copiar Tudo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 mb-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<div class="text-sm text-gray-600 dark:text-gray-300"> |
|
|
<span id="blockCount">0</span> blocos gerados | |
|
|
<span id="totalDuration">00:00:00</span> de duração total | |
|
|
<span id="totalWords">0</span> palavras |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<label for="fontSize" class="mr-2 text-sm text-gray-600 dark:text-gray-300">Tamanho:</label> |
|
|
<select id="fontSize" class="p-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-700 dark:text-white"> |
|
|
<option value="text-sm">Pequeno</option> |
|
|
<option value="text-base" selected>Normal</option> |
|
|
<option value="text-lg">Grande</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="resultado" class="space-y-4"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-white dark:bg-gray-800 py-4 shadow-inner"> |
|
|
<div class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-300 text-sm"> |
|
|
<p>© 2023 Conversor SRT Avançado | Desenvolvido por <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Renatim Dark</a></p> |
|
|
<div class="flex justify-center space-x-4 mt-2"> |
|
|
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400"><i class="fab fa-github"></i></a> |
|
|
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400"><i class="fab fa-linkedin"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const textoInput = document.getElementById('textoInput'); |
|
|
const convertBtn = document.getElementById('convertBtn'); |
|
|
const resultado = document.getElementById('resultado'); |
|
|
const downloadBtn = document.getElementById('downloadBtn'); |
|
|
const clearInputBtn = document.getElementById('clearInputBtn'); |
|
|
const sampleBtn = document.getElementById('sampleBtn'); |
|
|
const copyAllBtn = document.getElementById('copyAllBtn'); |
|
|
const resultsSection = document.getElementById('resultsSection'); |
|
|
const charCount = document.getElementById('charCount'); |
|
|
const wordCount = document.getElementById('wordCount'); |
|
|
const blockCount = document.getElementById('blockCount'); |
|
|
const totalDuration = document.getElementById('totalDuration'); |
|
|
const totalWords = document.getElementById('totalWords'); |
|
|
const progressFill = document.getElementById('progressFill'); |
|
|
const charsPerBlock = document.getElementById('charsPerBlock'); |
|
|
const blockDuration = document.getElementById('blockDuration'); |
|
|
const fontSize = document.getElementById('fontSize'); |
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
const endOnPeriod = document.getElementById('endOnPeriod'); |
|
|
const hoursElement = document.getElementById('hours'); |
|
|
const minutesElement = document.getElementById('minutes'); |
|
|
const secondsElement = document.getElementById('seconds'); |
|
|
|
|
|
|
|
|
const sampleText = `Este é um exemplo de texto que será convertido para o formato SRT. O formato SRT é usado para legendas em vídeos e cada bloco contém: |
|
|
|
|
|
1. Um número sequencial |
|
|
2. O tempo de início e fim no formato HH:MM:SS,mmm |
|
|
3. O texto da legenda |
|
|
4. Uma linha em branco para separar os blocos |
|
|
|
|
|
Você pode editar este texto ou apagá-lo para inserir o seu próprio conteúdo. O conversor irá dividir automaticamente o texto em blocos de acordo com as configurações de caracteres por bloco e duração. Cada bloco será terminado no ponto final mais próximo do limite de caracteres, garantindo que as frases não sejam cortadas no meio.`; |
|
|
|
|
|
|
|
|
updateCounts(); |
|
|
updateClock(); |
|
|
setInterval(updateClock, 1000); |
|
|
checkDarkModePreference(); |
|
|
|
|
|
|
|
|
textoInput.addEventListener('input', updateCounts); |
|
|
sampleBtn.addEventListener('click', insertSampleText); |
|
|
clearInputBtn.addEventListener('click', clearInput); |
|
|
convertBtn.addEventListener('click', convertToSRT); |
|
|
downloadBtn.addEventListener('click', downloadSRT); |
|
|
copyAllBtn.addEventListener('click', copyAllSRT); |
|
|
fontSize.addEventListener('change', changeFontSize); |
|
|
darkModeToggle.addEventListener('click', toggleDarkMode); |
|
|
|
|
|
|
|
|
function updateClock() { |
|
|
const now = new Date(); |
|
|
hoursElement.textContent = now.getHours().toString().padStart(2, '0'); |
|
|
minutesElement.textContent = now.getMinutes().toString().padStart(2, '0'); |
|
|
secondsElement.textContent = now.getSeconds().toString().padStart(2, '0'); |
|
|
} |
|
|
|
|
|
function checkDarkModePreference() { |
|
|
if (localStorage.getItem('darkMode') === 'enabled' || |
|
|
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.body.classList.add('dark'); |
|
|
} |
|
|
} |
|
|
|
|
|
function toggleDarkMode() { |
|
|
document.body.classList.toggle('dark'); |
|
|
|
|
|
if (document.body.classList.contains('dark')) { |
|
|
localStorage.setItem('darkMode', 'enabled'); |
|
|
} else { |
|
|
localStorage.setItem('darkMode', 'disabled'); |
|
|
} |
|
|
} |
|
|
|
|
|
function countWords(text) { |
|
|
if (!text.trim()) return 0; |
|
|
return text.trim().split(/\s+/).length; |
|
|
} |
|
|
|
|
|
function updateCounts() { |
|
|
const text = textoInput.value; |
|
|
const charCountValue = text.length; |
|
|
const wordCountValue = countWords(text); |
|
|
|
|
|
charCount.textContent = charCountValue.toLocaleString(); |
|
|
wordCount.textContent = wordCountValue.toLocaleString(); |
|
|
|
|
|
|
|
|
const maxChars = 1000000; |
|
|
const percentage = Math.min((charCountValue / maxChars) * 100, 100); |
|
|
progressFill.style.width = `${percentage}%`; |
|
|
|
|
|
|
|
|
if (percentage > 90) { |
|
|
progressFill.style.backgroundColor = '#ef4444'; |
|
|
} else if (percentage > 70) { |
|
|
progressFill.style.backgroundColor = '#f59e0b'; |
|
|
} else { |
|
|
progressFill.style.backgroundColor = '#3b82f6'; |
|
|
} |
|
|
} |
|
|
|
|
|
function insertSampleText() { |
|
|
textoInput.value = sampleText; |
|
|
updateCounts(); |
|
|
animateButton(sampleBtn); |
|
|
} |
|
|
|
|
|
function clearInput() { |
|
|
textoInput.value = ''; |
|
|
updateCounts(); |
|
|
resultsSection.classList.add('hidden'); |
|
|
animateButton(clearInputBtn); |
|
|
} |
|
|
|
|
|
function formatTime(seconds) { |
|
|
const date = new Date(seconds * 1000); |
|
|
const hours = date.getUTCHours().toString().padStart(2, '0'); |
|
|
const minutes = date.getUTCMinutes().toString().padStart(2, '0'); |
|
|
const secs = date.getUTCSeconds().toString().padStart(2, '0'); |
|
|
const ms = date.getUTCMilliseconds().toString().padStart(3, '0').substring(0, 3); |
|
|
return `${hours}:${minutes}:${secs},${ms}`; |
|
|
} |
|
|
|
|
|
function formatBlockSRT(counter, start, text) { |
|
|
return `${counter}\n${formatTime(start)} --> ${formatTime(start + parseInt(blockDuration.value))}\n${text.trim()}\n\n`; |
|
|
} |
|
|
|
|
|
function convertToSRT() { |
|
|
const text = textoInput.value.trim(); |
|
|
if (!text) { |
|
|
showAlert('Por favor, insira algum texto para converter.', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
animateButton(convertBtn); |
|
|
|
|
|
|
|
|
convertBtn.disabled = true; |
|
|
convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processando...'; |
|
|
|
|
|
setTimeout(() => { |
|
|
try { |
|
|
const srtBlocks = []; |
|
|
let counter = 1; |
|
|
let startTime = 0; |
|
|
const intervalBetweenBlocks = 5; |
|
|
const maxChars = parseInt(charsPerBlock.value) || 490; |
|
|
const duration = parseInt(blockDuration.value) || 50; |
|
|
const shouldEndOnPeriod = endOnPeriod.checked; |
|
|
|
|
|
if (shouldEndOnPeriod) { |
|
|
|
|
|
const sentences = splitIntoSentences(text); |
|
|
|
|
|
|
|
|
let currentBlock = ''; |
|
|
let currentBlockLength = 0; |
|
|
|
|
|
for (const sentence of sentences) { |
|
|
if (currentBlockLength + sentence.length <= maxChars) { |
|
|
currentBlock += sentence + ' '; |
|
|
currentBlockLength += sentence.length + 1; |
|
|
} else { |
|
|
if (currentBlock.trim()) { |
|
|
srtBlocks.push({ |
|
|
counter, |
|
|
startTime, |
|
|
text: currentBlock.trim(), |
|
|
html: formatBlockSRT(counter, startTime, currentBlock.trim()) |
|
|
}); |
|
|
counter++; |
|
|
startTime += duration + intervalBetweenBlocks; |
|
|
} |
|
|
|
|
|
currentBlock = sentence + ' '; |
|
|
currentBlockLength = sentence.length + 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (currentBlock.trim()) { |
|
|
srtBlocks.push({ |
|
|
counter, |
|
|
startTime, |
|
|
text: currentBlock.trim(), |
|
|
html: formatBlockSRT(counter, startTime, currentBlock.trim()) |
|
|
}); |
|
|
} |
|
|
} else { |
|
|
|
|
|
const words = text.split(/\s+/); |
|
|
let block = ''; |
|
|
let blockLength = 0; |
|
|
|
|
|
for (const word of words) { |
|
|
if (blockLength + word.length <= maxChars) { |
|
|
block += word + ' '; |
|
|
blockLength += word.length + 1; |
|
|
} else { |
|
|
if (block.trim()) { |
|
|
srtBlocks.push({ |
|
|
counter, |
|
|
startTime, |
|
|
text: block.trim(), |
|
|
html: formatBlockSRT(counter, startTime, block.trim()) |
|
|
}); |
|
|
counter++; |
|
|
startTime += duration + intervalBetweenBlocks; |
|
|
} |
|
|
|
|
|
block = word + ' '; |
|
|
blockLength = word.length + 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (block.trim()) { |
|
|
srtBlocks.push({ |
|
|
counter, |
|
|
startTime, |
|
|
text: block.trim(), |
|
|
html: formatBlockSRT(counter, startTime, block.trim()) |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
displaySRTResults(srtBlocks, countWords(text)); |
|
|
} catch (error) { |
|
|
console.error('Error during conversion:', error); |
|
|
showAlert('Ocorreu um erro durante a conversão.', 'error'); |
|
|
} finally { |
|
|
convertBtn.disabled = false; |
|
|
convertBtn.innerHTML = '<i class="fas fa-exchange-alt mr-2"></i> Converter para SRT'; |
|
|
} |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
function splitIntoSentences(text) { |
|
|
|
|
|
const sentenceRegex = /[^.!?]*[.!?](?:\s|$)/g; |
|
|
const sentences = []; |
|
|
let match; |
|
|
|
|
|
while ((match = sentenceRegex.exec(text)) !== null) { |
|
|
sentences.push(match[0].trim()); |
|
|
} |
|
|
|
|
|
|
|
|
const remainingText = text.substring(sentenceRegex.lastIndex).trim(); |
|
|
if (remainingText) { |
|
|
sentences.push(remainingText); |
|
|
} |
|
|
|
|
|
return sentences; |
|
|
} |
|
|
|
|
|
function displaySRTResults(blocks, totalWordCount) { |
|
|
resultado.innerHTML = ''; |
|
|
blockCount.textContent = blocks.length; |
|
|
totalWords.textContent = totalWordCount.toLocaleString(); |
|
|
|
|
|
|
|
|
const lastBlock = blocks[blocks.length - 1]; |
|
|
const totalSecs = lastBlock.startTime + parseInt(blockDuration.value); |
|
|
totalDuration.textContent = formatTime(totalSecs).split(',')[0]; |
|
|
|
|
|
blocks.forEach(block => { |
|
|
const blockElement = document.createElement('div'); |
|
|
blockElement.className = `srt-block bg-white dark:bg-gray-700 p-4 rounded-lg shadow-sm ${fontSize.value}`; |
|
|
blockElement.innerHTML = ` |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<span class="font-mono text-sm text-gray-500 dark:text-gray-400">Bloco ${block.counter} | ${formatTime(block.startTime)} → ${formatTime(block.startTime + parseInt(blockDuration.value))} | ${countWords(block.text)} palavras</span> |
|
|
<button class="copy-btn px-2 py-1 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded text-sm hover:bg-gray-200 dark:hover:bg-gray-500 tooltip" data-text="${escapeHtml(block.text)}"> |
|
|
<i class="fas fa-copy"></i> |
|
|
<span class="tooltip-text">Copiar bloco</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="whitespace-pre-wrap dark:text-gray-300">${block.text}</div> |
|
|
`; |
|
|
resultado.appendChild(blockElement); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.copy-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const text = this.getAttribute('data-text'); |
|
|
copyToClipboard(text); |
|
|
showAlert('Bloco copiado!', 'success'); |
|
|
animateButton(this); |
|
|
}); |
|
|
}); |
|
|
|
|
|
resultsSection.classList.remove('hidden'); |
|
|
window.scrollTo({ |
|
|
top: resultsSection.offsetTop - 20, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
|
|
|
function downloadSRT() { |
|
|
const allBlocks = Array.from(document.querySelectorAll('.srt-block')); |
|
|
let srtContent = ''; |
|
|
|
|
|
allBlocks.forEach((block, index) => { |
|
|
const timeInfo = block.querySelector('span').textContent; |
|
|
const text = block.querySelector('div:last-child').textContent; |
|
|
srtContent += `${index + 1}\n${timeInfo.split(' | ')[1].replace(' → ', ' --> ')}\n${text}\n\n`; |
|
|
}); |
|
|
|
|
|
const blob = new Blob([srtContent], { type: 'text/plain' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = 'legendas.srt'; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
showAlert('Arquivo SRT baixado!', 'success'); |
|
|
animateButton(downloadBtn); |
|
|
} |
|
|
|
|
|
function copyAllSRT() { |
|
|
const allBlocks = Array.from(document.querySelectorAll('.srt-block')); |
|
|
let srtContent = ''; |
|
|
|
|
|
allBlocks.forEach((block, index) => { |
|
|
const timeInfo = block.querySelector('span').textContent; |
|
|
const text = block.querySelector('div:last-child').textContent; |
|
|
srtContent += `${index + 1}\n${timeInfo.split(' | ')[1].replace(' → ', ' --> ')}\n${text}\n\n`; |
|
|
}); |
|
|
|
|
|
copyToClipboard(srtContent); |
|
|
showAlert('Todo o conteúdo SRT copiado!', 'success'); |
|
|
animateButton(copyAllBtn); |
|
|
} |
|
|
|
|
|
function changeFontSize() { |
|
|
const blocks = document.querySelectorAll('.srt-block'); |
|
|
blocks.forEach(block => { |
|
|
block.classList.remove('text-sm', 'text-base', 'text-lg'); |
|
|
block.classList.add(fontSize.value); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function escapeHtml(unsafe) { |
|
|
return unsafe |
|
|
.replace(/&/g, "&") |
|
|
.replace(/</g, "<") |
|
|
.replace(/>/g, ">") |
|
|
.replace(/"/g, """) |
|
|
.replace(/'/g, "'"); |
|
|
} |
|
|
|
|
|
function copyToClipboard(text) { |
|
|
const textarea = document.createElement('textarea'); |
|
|
textarea.value = text; |
|
|
document.body.appendChild(textarea); |
|
|
textarea.select(); |
|
|
document.execCommand('copy'); |
|
|
document.body.removeChild(textarea); |
|
|
} |
|
|
|
|
|
function showAlert(message, type) { |
|
|
const alert = document.createElement('div'); |
|
|
alert.className = `fixed top-4 right-4 px-4 py-2 rounded-md shadow-lg text-white ${ |
|
|
type === 'error' ? 'bg-red-500' : 'bg-green-500' |
|
|
} animate-bounce`; |
|
|
alert.textContent = message; |
|
|
document.body.appendChild(alert); |
|
|
|
|
|
setTimeout(() => { |
|
|
alert.style.opacity = '0'; |
|
|
setTimeout(() => { |
|
|
document.body.removeChild(alert); |
|
|
}, 300); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
function animateButton(button) { |
|
|
button.classList.add('animate-pulse'); |
|
|
setTimeout(() => { |
|
|
button.classList.remove('animate-pulse'); |
|
|
}, 300); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hiojo/srt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
