| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Gerador VSL Ultra</title> |
| |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> |
| <style> |
| * { box-sizing: border-box; } |
| body { |
| margin: 0; padding: 0; |
| font-family: 'Open Sans', sans-serif; |
| background-color: #f9fafb; |
| color: #111; |
| } |
| header { |
| background: linear-gradient(135deg, #111827, #1f2937); |
| color: white; |
| padding: 25px; |
| font-size: 28px; |
| font-weight: bold; |
| text-align: center; |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| } |
| .container { |
| max-width: 1200px; |
| margin: 40px auto; |
| padding: 40px; |
| background: white; |
| border-radius: 16px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.08); |
| } |
| .input-group { |
| margin-bottom: 25px; |
| transition: all 0.3s ease; |
| } |
| .input-group:hover { transform: translateY(-2px); } |
| label { |
| font-weight: 600; |
| display: block; |
| margin-bottom: 8px; |
| color: #374151; |
| } |
| input, button, audio { |
| width: 100%; |
| padding: 12px; |
| font-size: 16px; |
| border-radius: 8px; |
| border: 2px solid #e5e7eb; |
| transition: all 0.3s ease; |
| } |
| input:hover, input:focus { border-color: #2563eb; outline: none; } |
| button { |
| background: linear-gradient(135deg, #2563eb, #1d4ed8); |
| color: white; |
| border: none; |
| cursor: pointer; |
| margin-top: 10px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| transition: all 0.3s ease; |
| } |
| button:hover:not(:disabled) { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); |
| } |
| button:disabled { opacity: 0.5; cursor: not-allowed; } |
| .preview { |
| margin-top: 40px; |
| border: 2px dashed #cbd5e1; |
| border-radius: 12px; |
| padding: 60px 40px; |
| font-size: 42px; |
| font-family: 'Open Sans', sans-serif; |
| text-align: center; |
| white-space: pre-line; |
| min-height: 600px; |
| background: white; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| line-height: 1.4; |
| transition: all 0.3s ease; |
| position: relative; |
| } |
| |
| .preview p { max-width: 1000px; margin: 0 auto; animation: fadeIn 0.3s ease-in-out; } |
| |
| .preview.fullscreen { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100vw; |
| height: 100vh; |
| margin: 0; |
| padding: 40px; |
| border: none; |
| border-radius: 0; |
| background: white; |
| color: black; |
| font-size: 64px; |
| z-index: 9999; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .preview.fullscreen p { max-width: 1600px; line-height: 1.4; white-space: pre-line; } |
| |
| .preview.fullscreen.hd { width: 1920px; height: 1080px; transform-origin: top left; } |
| .preview.fullscreen.hd p { max-width: 1720px; } |
| |
| .bold-black { font-weight: 700; color: black; } |
| .bold-red { font-weight: 700; color: #dc2626; } |
| |
| .button-group { display: flex; gap: 15px; } |
| .button-group button { flex: 1; padding: 15px; } |
| |
| |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
| |
| |
| .status-bar { |
| display: flex; |
| gap: 20px; |
| margin-top: 20px; |
| padding: 15px; |
| background: #f8fafc; |
| border-radius: 8px; |
| font-size: 14px; |
| } |
| .status-item { display: flex; align-items: center; gap: 8px; } |
| .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; } |
| .status-dot.active { background: #22c55e; } |
| |
| |
| .slide-counter { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| background: rgba(0,0,0,0.7); |
| color: white; |
| padding: 8px 16px; |
| border-radius: 20px; |
| font-size: 14px; |
| font-weight: 600; |
| } |
| |
| .preview.fullscreen .slide-counter { display: none !important; } |
| </style> |
| </head> |
| <body> |
| <header>Gerador de VSL Ultra Profissional</header> |
| <div class="container"> |
| <div class="input-group"> |
| <label for="jsonFile">📄 Importar Transcrição (JSON):</label> |
| <input type="file" id="jsonFile" accept=".json" /> |
| </div> |
| <div class="input-group"> |
| <label for="audio">🎤 Importar Narração (Áudio):</label> |
| <input type="file" id="audio" accept="audio/*" /> |
| </div> |
| <div class="input-group"> |
| <audio controls id="player"></audio> |
| </div> |
| <div class="status-bar"> |
| <div class="status-item"> |
| <div id="transcriptionStatus" class="status-dot"></div> |
| <span>Transcrição</span> |
| </div> |
| <div class="status-item"> |
| <div id="audioStatus" class="status-dot"></div> |
| <span>Áudio</span> |
| </div> |
| <div class="status-item"> |
| <div id="syncStatus" class="status-dot"></div> |
| <span>Sincronização</span> |
| </div> |
| </div> |
| <div class="input-group"> |
| <div class="button-group"> |
| <button onclick="startSync()" id="startButton" disabled>▶️ Iniciar Apresentação</button> |
| <button onclick="toggleFullscreen()" id="fullscreenButton">🔲 Modo Tela Cheia</button> |
| <button onclick="toggle1080p()" id="hdButton">📺 Modo 1080p</button> |
| </div> |
| </div> |
| <div class="preview" id="slidePreview"> |
| <p>Carregue a transcrição e o áudio para começar...</p> |
| <div class="slide-counter" id="slideCounter" style="display: none;">1 / 1</div> |
| </div> |
| </div> |
|
|
| <script> |
| const player = document.getElementById("player"); |
| const preview = document.getElementById("slidePreview").querySelector("p"); |
| const slideCounter = document.getElementById("slideCounter"); |
| const transcriptionStatus = document.getElementById("transcriptionStatus"); |
| const audioStatus = document.getElementById("audioStatus"); |
| const syncStatus = document.getElementById("syncStatus"); |
| const startButton = document.getElementById("startButton"); |
| let slides = []; |
| let audioReady = false; |
| let isPlaying = false; |
| let hasStarted = false; |
| let currentSlideIndex = 0; |
| |
| |
| function escapeHtml(str) { |
| return String(str).replace(/[&<>"']/g, (m) => ({ |
| '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' |
| })[m]); |
| } |
| |
| const importantWords = new Set([ |
| 'DOR','PESO','VERGONHA','TRISTEZA','SOFRIMENTO','CULPA','FRACASSO','LIMITE','BALANÇA','FOME','FRACA','TRANCAR','ROUBEI','FUGIR','TRISTE','COMPULSÃO','AUTOESTIMA','REALIDADE','ESCONDER','MENTIRA','DIETAS','EFEITO SANFONA','EXCESSO','RESULTADO','ESFORÇO','ENERGIA','MUDANÇA','ESCOLHA','RENASCIMENTO','ESPERANÇA','CONQUISTA','TRANSFORMAÇÃO','CORAGEM','SOLUÇÃO','FUNCIONA','EMAGRECER','ALIMENTAR','VIDA','SAÚDE','LIBERDADE','VERDADE','MILAGRE','EMOÇÃO','SUPORTE','JEJUM','PERSONAL','METABOLISMO','SAUDÁVEL','LEVE','SE OLHAR','VER','SORRIR','ORGULHO','MERECE','BRASILEIRA','REAL','CAMINHO','PASSO','PLANO','REFEIÇÕES','PRAIA','ESCONDERIJO','CONSCIÊNCIA','RESPOSTA','DESAFIO','COBRIR','RECOMEÇO','REJEIÇÃO','RECOMPENSA','DECISÃO','ACEITAÇÃO','VITÓRIA','SUPERAÇÃO','MOTIVAÇÃO','PROGRESSO','MUDOU MINHA VIDA','TRANSFORMOU MEU CORPO','NADA DAVA CERTO','DESISTIR','SOZINHA','ANSIEDADE','INSEGURANÇA','35 ANOS','9,3 QUILOS','20 QUILOS','2 QUILOS','55 CENTAVOS','53 CENTAVOS','R$55','R$197','PARABÉNS','CETOX','PERDER','QUEIMANDO','DELICIOSAS','EXTREMAMENTE','RESPONSABILIDADE','ATENÇÃO','URGENTE','INDISPONÍVEL','MANTER','PERDER','DESCOBRI','ÚNICA','ARMADURA','EFEITO','SANFONA','CERTEZA','GARANTIR','PESO','SEMPRE','FESTAS','VIAJANDO','CAÓTICAS','MÃOS','SEU','PARA','SEMPRE','COMER','ANIVERSÁRIOS','SABOTAR','TUDO','ATERRORIZAVA','NOITES','PROCESSO','EMAGRECIMENTO','ADIANTARIA','RECUPERAR','MESES','MULHERES','BRASILEIRAS','DIETA','PESQUISA','UNIVERSIDADE','SÃO','PAULO','BALANÇA','SUBIR','RESISTIR','MOMENTOS','CONTROLE','TPM','ESTRESSE','VIAGENS','ALMOÇOS','FAMÍLIA','RESPOSTA','DURA','MAIORIA','DIETAS','FRACASSA','AGORA','EMAGRECER','CORPO','LUTAR','NOVO','DIMINUI','HORMÔNIOS','SACIEDADE','AUMENTA','FOME','DERRUBA','ENERGIA','SABOTA','SILENCIOSAMENTE','NOME','HORMONAL','HISTÓRIA','MUDAR','PERSPECTIVA','CELEBRANDO','PRIMEIRA','CONQUISTA','HAVIA','PERDIDO','PREOCUPAR','ASSUSTADOR','ENGORDAR','MAIS','PESO','SENSAÇÃO','FRACASSO','ESPELHO','TRANSFORMAÇÃO','VERGONHA','31','12,3','QUILOS','18','97%' |
| ]); |
| |
| const veryImportantWords = new Set([ |
| 'NUNCA MAIS','DEFINITIVAMENTE','LIBERTAR','INSUPORTÁVEL','INSEGURANÇA','TRANSFORMAÇÃO','MUDAR TUDO','A VERDADE','É AGORA','MOMENTO','DECISÃO','A RESPOSTA','ME LIBERTAR','O COMEÇO','TUDO','NADA','MUDA','CULPA','MERECE','SIMPLES','ACESSÍVEL','HOJE','ÚLTIMA','AGORA','NOVA','LIBERDADE','CAMINHO CERTO','NUNCA MAIS VOU VIVER ASSIM','EU ROUBEI','GORDA','TRAVEI','GORDINHA','PAZ','SÓ QUEM SENTE SABE','NÃO AGUENTO MAIS','CHEGA','ACORDEI','EU DECIDI','FOI NAQUELE MOMENTO','SONHO','ALÉM','POSSÍVEL','REAL','ME VI NO ESPELHO','EMOCIONEI','MUDOU','VIREI','NUNCA','MAIS','PERDER','TUDO','ATERRORIZAVA','FRACASSA','REPROGRAMAR','ATERRORIZANTE','ENGANAR','MEMÓRIA','EXCLUSIVA','VIDA','ESTILO','DOERAM','DOR','SOCO','SEMPRE','CERTEZA','ABSOLUTA','CONTROLE','TOTAL','LIBERDADE','SEGURANÇA','CONFIANÇA','PAZ','TRANSFORMAÇÃO','BLINDADA','PROMESSA','CHANCE','ÚNICA','DECIDE','AGORA','HOJE','GARANTIA','GRATUITOS','INVESTIR','URGENTE','INDISPONÍVEL','RESPONSABILIDADE','EXTREMAMENTE','MANTER','SEU','ATENÇÃO','REALIDADE','FRACASSO','JUREI','OUTRA','PESSOA','ENGANAR','DESCOBRI','BÔNUS','GRATUITO','ECONOMIZANDO','PAGANDO','REALIDADES','DIFERENTES','INTELIGENTE','HESITAR','ARRISCAR','CONTADOR','EXPIRA','TEMPO','DEIXE','CLIQUE','ESPERO','LADO','DECISÃO','INTELIGENTE','BEM-VINDA','VIDA','NOVA','COMEÇA' |
| ]); |
| |
| function marcarPalavras(texto) { |
| return texto.split(/(\s+)/).map(token => { |
| const clean = token.normalize('NFD').replace(/\p{Diacritic}/gu, '').replace(/[.,!?;:\"\"\”\“]/g, '').toUpperCase(); |
| const safe = escapeHtml(token); |
| if (veryImportantWords.has(clean)) return `<span class='bold-red'>${safe}</span>`; |
| if (importantWords.has(clean)) return `<span class='bold-black'>${safe}</span>`; |
| return safe; |
| }).join(''); |
| } |
| |
| function updateSlideDisplay(slideIndex) { |
| if (slides.length === 0) return; |
| currentSlideIndex = Math.max(0, Math.min(slideIndex, slides.length - 1)); |
| preview.innerHTML = slides[currentSlideIndex].text; |
| slideCounter.textContent = `${currentSlideIndex + 1} / ${slides.length}`; |
| } |
| |
| function findCurrentSlideIndex(currentTime) { |
| let index = 0; |
| for (let i = 0; i < slides.length; i++) { |
| if (currentTime >= slides[i].start) { |
| index = i; |
| } else { break; } |
| } |
| return index; |
| } |
| |
| document.getElementById("jsonFile").addEventListener("change", function () { |
| const reader = new FileReader(); |
| reader.onload = function () { |
| try { |
| const data = JSON.parse(reader.result); |
| slides = []; |
| let bloco = [], lastStart = 0; |
| |
| for (let i = 0; i < data.words.length; i++) { |
| const w = data.words[i]; |
| const word = { start: w.start, end: w.end, word: escapeHtml(w.word) }; |
| if (bloco.length === 0) lastStart = word.start; |
| bloco.push(word); |
| const isLast = i === data.words.length - 1; |
| const nextWord = i < data.words.length - 1 ? data.words[i + 1] : null; |
| const longPause = nextWord && (nextWord.start - w.end > 0.7); |
| const isEnd = /[.!?]/.test(w.word); |
| const isPausaIntencional = longPause || isEnd; |
| const criarNovoSlide = isLast || (isPausaIntencional && bloco.length >= 1) || (!isPausaIntencional && bloco.length >= 12); |
| |
| if (criarNovoSlide) { |
| if (bloco.length === 1 && !isPausaIntencional && !isLast) continue; |
| const palavras = bloco.map(b => b.word); |
| if (palavras.length > 0) { |
| const first = palavras[0]; |
| palavras[0] = first.charAt(0).toUpperCase() + first.slice(1); |
| } |
| slides.push({ text: marcarPalavras(palavras.join(" ").trim()) + '...', start: lastStart }); |
| bloco = []; |
| } |
| } |
| if (slides.length > 0) { |
| updateSlideDisplay(0); |
| slideCounter.style.display = 'block'; |
| transcriptionStatus.classList.add("active"); |
| } |
| updateStartButton(); |
| } catch (error) { |
| alert("Erro ao processar o arquivo JSON. Verifique se o formato está correto."); |
| console.error(error); |
| } |
| } |
| reader.readAsText(this.files[0]); |
| }); |
| |
| document.getElementById("audio").addEventListener("change", function () { |
| player.src = URL.createObjectURL(this.files[0]); |
| audioReady = true; |
| audioStatus.classList.add("active"); |
| updateStartButton(); |
| }); |
| |
| function updateStartButton() { |
| const canStart = audioReady && slides.length > 0; |
| startButton.disabled = !canStart; |
| if (canStart && !syncStatus.classList.contains("active")) { |
| syncStatus.classList.add("active"); |
| } |
| } |
| |
| function toggleFullscreen() { |
| const previewEl = document.getElementById("slidePreview"); |
| previewEl.classList.toggle("fullscreen"); |
| previewEl.classList.remove("hd"); |
| if (document.fullscreenElement) { |
| document.exitFullscreen(); |
| } else { |
| previewEl.requestFullscreen(); |
| } |
| } |
| |
| function toggle1080p() { |
| const previewEl = document.getElementById("slidePreview"); |
| previewEl.classList.add("fullscreen"); |
| previewEl.classList.toggle("hd"); |
| if (!document.fullscreenElement) { |
| previewEl.requestFullscreen(); |
| } |
| } |
| |
| function startSync() { |
| if (!audioReady || slides.length === 0) { |
| alert("Por favor, importe o áudio e a transcrição primeiro."); |
| return; |
| } |
| |
| |
| if (hasStarted) { |
| if (player.paused) { player.play(); } else { player.pause(); } |
| return; |
| } |
| |
| |
| const countdown = 5; |
| let timeLeft = countdown; |
| preview.innerHTML = `Iniciando em ${timeLeft}...`; |
| startButton.disabled = true; |
| |
| const timer = setInterval(() => { |
| timeLeft--; |
| if (timeLeft > 0) { |
| preview.innerHTML = `Iniciando em ${timeLeft}...`; |
| } else { |
| clearInterval(timer); |
| player.currentTime = 0; |
| player.playbackRate = 1.08; |
| hasStarted = true; |
| player.play(); |
| } |
| }, 1000); |
| } |
| |
| function syncSlides() { |
| if (!isPlaying || slides.length === 0) return; |
| const newSlideIndex = findCurrentSlideIndex(player.currentTime); |
| if (newSlideIndex !== currentSlideIndex) { |
| updateSlideDisplay(newSlideIndex); |
| } |
| requestAnimationFrame(syncSlides); |
| } |
| |
| |
| player.addEventListener('play', function() { |
| if (slides.length > 0) { |
| isPlaying = true; |
| startButton.innerHTML = "⏸️ Pausar Apresentação"; |
| startButton.disabled = false; |
| syncSlides(); |
| } |
| }); |
| |
| player.addEventListener('pause', function() { |
| isPlaying = false; |
| startButton.innerHTML = "▶️ Continuar Apresentação"; |
| }); |
| |
| player.addEventListener('ended', function() { |
| isPlaying = false; |
| hasStarted = false; |
| startButton.innerHTML = "▶️ Iniciar Apresentação"; |
| }); |
| |
| |
| player.addEventListener('seeked', function() { |
| if (slides.length > 0) { |
| const newSlideIndex = findCurrentSlideIndex(player.currentTime); |
| updateSlideDisplay(newSlideIndex); |
| } |
| }); |
| |
| |
| document.addEventListener('keydown', function(e) { |
| if (e.key === 'Escape') { |
| const previewEl = document.getElementById("slidePreview"); |
| previewEl.classList.remove("fullscreen", "hd"); |
| if (document.fullscreenElement) { document.exitFullscreen(); } |
| } else if (e.key === ' ') { |
| |
| if (audioReady && slides.length > 0) { |
| e.preventDefault(); |
| if (!hasStarted) { startSync(); } else { if (player.paused) player.play(); else player.pause(); } |
| } |
| } else if (e.key === 'ArrowLeft' && slides.length > 0) { |
| e.preventDefault(); |
| if (player.currentTime > 1) { player.currentTime = Math.max(0, player.currentTime - 5); } |
| } else if (e.key === 'ArrowRight' && slides.length > 0) { |
| e.preventDefault(); |
| player.currentTime = Math.min(player.duration || player.currentTime + 5, player.currentTime + 5); |
| } |
| }, { capture: true }); |
| |
| |
| updateStartButton(); |
| </script> |
| </body> |
| </html> |
|
|
