JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
!!Onde os Caminhos se Cruzam //Thales Del Comune// Ao longo do dia, fazemos inúmeras escolhas. A maioria não muda nada, mas ainda assim gastamos muito tempo decidindo. Essa música funciona da mesma forma: ao compor, podemos demorar para escolher entre duas notas. Mas, no final, será que o caminho fez realmente diferença? ''Você fará escolhas que definirão como a música deve ser executada.'' Essa música foi escrita para os instrumentos abaixo. Escolha um deles e tome decisões para a obra toda. [[Flautim ->Página 1]] [[Flauta em dó ->Página 1]] [[Flauta em sol ->Página 1]] Suas escolhas serão somadas com as dos demais participantes.
!!Página 1: O Tempo que passa <!-- PASSO 1: Seleção de Tonalidades (Visível no início) --> <div id="passo-1"> <p>Essa é uma peça aleatória e você fará escolhas para cada página da partitura. Primeiro decida a tonalidade de seu instrumento a partir deste relógio. </p> <div class="relogio-container" style="text-align: center; margin: 25px 0;"> <img src="https://thalesdelcomune.com/wp-content/uploads/2026/07/Captura-de-tela-2026-07-13-205308.png" alt="Relógio de Tonalidades da Partitura" style="max-width: 450px; width: 100%; height: auto; border: 1px dashed #ccc; padding: 10px; background: #fff;" /> </div> <div id="tonalidades-grupo" style="margin: 20px 0;"> <span style="font-size: 0.9em; font-weight: bold; display: block; margin-bottom: 10px; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px;">Escolha uma das Tonalidades:</span> <div class="grade-botoes"> <button class="botao-relogio" onclick="selecionarHora(this, 'I')">I</button> <button class="botao-relogio" onclick="selecionarHora(this, 'II')">II</button> <button class="botao-relogio" onclick="selecionarHora(this, 'III')">III</button> <button class="botao-relogio" onclick="selecionarHora(this, 'IV')">IV</button> <button class="botao-relogio" onclick="selecionarHora(this, 'V')">V</button> <button class="botao-relogio" onclick="selecionarHora(this, 'VI')">VI</button> <button class="botao-relogio" onclick="selecionarHora(this, 'VII')">VII</button> <button class="botao-relogio" onclick="selecionarHora(this, 'VIII')">VIII</button> <button class="botao-relogio" onclick="selecionarHora(this, 'IX')">IX</button> <button class="botao-relogio" onclick="selecionarHora(this, 'X')">X</button> <button class="botao-relogio" onclick="selecionarHora(this, 'XI')">XI</button> <button class="botao-relogio" onclick="selecionarHora(this, 'XII')">XII</button> </div> </div> </div> <!-- PASSO 2: Pergunta do Pudim (Substitui o Passo 1) --> <div id="passo-2" style="display: none; animation: fadeIn 0.4s ease-in-out;"> <div id="direcao-grupo" style="margin: 35px 0 25px 0; padding-top: 20px; text-align: center;"> <span style="font-size: 1.1em; font-weight: bold; display: block; margin-bottom: 20px; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px;">Você gosta de pudim?</span> <div style="display: flex; gap: 15px; justify-content: center;"> <button class="botao-direcao" onclick="selecionarDirecao(this)">Sim</button> <button class="botao-direcao" onclick="selecionarDirecao(this)">Não</button> </div> </div> </div> <!-- PASSO 3: Início da Música (Substitui o Passo 2) --> <div id="passo-3" style="display: none; animation: fadeIn 0.4s ease-in-out;"> <div id="inicio-musica-grupo" style="padding-top: 25px; margin-top: 30px; text-align: center;"> <span style="font-size: 1.1em; font-weight: bold; display: block; margin-bottom: 20px; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px;">Como a música deve começar?</span> <div style="display: flex; gap: 15px; justify-content: center;"> <button class="botao-opcao" onclick="selecionarInicio(this)">As flautas iniciam separadas</button> <button class="botao-opcao" onclick="selecionarInicio(this)">As flautas iniciam juntas</button> </div> </div> </div> <!-- PASSO 4: Partitura e Avanço (Substitui o Passo 3) --> <div id="passo-4" style="display: none; padding-top: 25px; margin-top: 30px; text-align: center; animation: fadeIn 0.4s ease-in-out;"> <div style="margin: 20px 0;"> <img src="https://thalesdelcomune.com/wp-content/uploads/2026/08/A-musica-comeca-aqui_1.jpg" alt="A música começa aqui" style="max-width: 100%; height: auto; border: 1px solid #eee; padding: 5px; background: #fff;" /> </div> <div class="links-finais" style="margin-top: 25px;"> [[Seguir para a próxima página -> Pagina 2]] </div> </div> <!-- Script para trocar as seções progressivamente --> <script> function selecionarHora(botaoClicado, hora) { document.getElementById('passo-1').style.display = 'none'; document.getElementById('passo-2').style.display = 'block'; } function selecionarDirecao(botaoClicado) { document.getElementById('passo-2').style.display = 'none'; document.getElementById('passo-3').style.display = 'block'; } function selecionarInicio(botaoClicado) { document.getElementById('passo-3').style.display = 'none'; document.getElementById('passo-4').style.display = 'block'; } </script>
!!Página 2: Aqueles que levamos conosco <!-- Imagem Principal da Página 2 --> <div style="text-align: center; margin: 30px 0;"> <img src="https://thalesdelcomune.com/wp-content/uploads/2026/08/Onde-os-caminh-1_1.jpg" alt="Página 2 da Partitura" style="max-width: 100%; border: 1px solid #f0f0f0; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);" /> </div> <p style="text-align: center;">Acima está a página 2, você deseja que as flautas toquem ao mesmo tempo (harmonia) ou entrem uma copiando a outra (cânone)?</p> <!-- PASSO 1: Escolha das Flautas (Lado a lado e estilizado) --> <div id="passo-1" style="display: flex; gap: 15px; justify-content: center; margin: 25px 0;"> <button class="botao-opcao" onclick="definirFlautas(this, 'harmonia')" style="padding: 10px 24px; cursor: pointer; transition: all 0.2s ease;">Harmonia</button> <button class="botao-opcao" onclick="definirFlautas(this, 'canone')" style="padding: 10px 24px; cursor: pointer; transition: all 0.2s ease;">Cânone</button> </div> <!-- PASSO 2: Pergunta da Fofoca --> <div id="passo-2" style="display: none; text-align: center; margin: 35px auto 20px auto; max-width: 480px; padding: 20px 0; border-top: 1px solid #f0f0f0; animation: fadeIn 0.4s ease-in-out;"> <span style="font-size: 1em; color: #444; font-family: sans-serif; display: block; margin-bottom: 15px;">Você gosta de fofocas?</span> <span id="links-fofoca-container"> <a href="javascript:void(0)" class="link-fofoca" onclick="mostrarFofoca(this, true)">Sim</a> <span style="color: #ccc; margin: 0 8px;">|</span> <a href="javascript:void(0)" class="link-fofoca" onclick="mostrarFofoca(this, false)">Não</a> </span> <div id="resultado-fofoca" style="margin-top: 15px; font-size: 0.85em; font-style: italic; color: #666; line-height: 1.4;"></div> </div> <!-- PASSO 3: Percurso dos Músicos --> <div id="passo-3" style="display: none; text-align: center; margin-top: 30px; border-top: 1px solid #f0f0f0; padding-top: 25px; animation: fadeIn 0.4s ease-in-out;"> <p style="margin-bottom: 20px; font-weight: bold; font-family: sans-serif; font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px;">Qual percurso os músicos devem seguir de agora em diante?</p> <div style="display: flex; gap: 15px; justify-content: center;"> <button class="botao-opcao" onclick="selecionarPercurso(this, 'Melodias tradicionais')" style="padding: 10px 20px; cursor: pointer; transition: all 0.2s ease;">Melodias tradicionais</button> <button class="botao-opcao" onclick="selecionarPercurso(this, 'Texturas radicais')" style="padding: 10px 20px; cursor: pointer; transition: all 0.2s ease;">Texturas radicais</button> </div> </div> <!-- PASSO 4: Botão Final para Prosseguir --> <div id="passo-4" style="display: none; text-align: center; margin-top: 30px; padding-top: 15px; animation: fadeIn 0.4s ease-in-out;"> <div class="links-finais"> [[Seguir para a próxima página -> Pagina 3]] </div> </div> <!-- Script de Controle de Escolhas Únicas e Revelação do Botão Final --> <script> function definirFlautas(btnClicado, tipo) { var botoes = btnClicado.parentElement.querySelectorAll('.botao-opcao'); botoes.forEach(function(b) { b.disabled = true; b.style.cursor = 'default'; if (b !== btnClicado) { b.style.opacity = '0.3'; } }); btnClicado.style.backgroundColor = '#000000'; btnClicado.style.color = '#ffffff'; document.getElementById('passo-2').style.display = 'block'; } function mostrarFofoca(linkClicado, gosta) { var containerLinks = document.getElementById('links-fofoca-container'); var links = containerLinks.querySelectorAll('.link-fofoca'); links.forEach(function(a) { a.removeAttribute('onclick'); a.style.cursor = 'default'; if (a !== linkClicado) { a.style.opacity = '0.3'; a.style.textDecoration = 'none'; } }); var container = document.getElementById('resultado-fofoca'); if (gosta) { container.innerHTML = "Beethoven tomava 60 grãos de café, sempre que preparava uma xícara. Curiosamente, teve vários problemas gástricos por boa parte da vida."; } else { container.innerHTML = "Que pena."; } document.getElementById('passo-3').style.display = 'block'; } function selecionarPercurso(btnClicado, opcao) { var botoes = btnClicado.parentElement.querySelectorAll('.botao-opcao'); botoes.forEach(function(b) { b.disabled = true; b.style.cursor = 'default'; if (b !== btnClicado) { b.style.opacity = '0.3'; } }); btnClicado.style.backgroundColor = '#000000'; btnClicado.style.color = '#ffffff'; document.getElementById('passo-4').style.display = 'block'; } </script>
!!Página 3: Encontros e Acasos <!-- BLOCO SUPERIOR: Ocultado após completar as 6 cores --> <div id="bloco-topo"> <!-- Imagem da Obra de Sol LeWitt --> <div style="text-align: center; margin: 15px 0 10px 0;"> <img src="https://thalesdelcomune.com/wp-content/uploads/2026/07/122_1_post_war_contemporary_art_november_2024_sol_lewitt_squiggly_brushstrokes__rago_auction.jpg" alt="Sol LeWitt, Squiggly Brushstrokes" style="max-width: 100%; border: 1px solid #f0f0f0; padding: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);" /> <p style="font-size: 0.7em; color: #888; font-family: monospace; margin-top: 4px; letter-spacing: 1px; text-transform: uppercase;">Sol LeWitt, Squiggly Brushstrokes</p> </div> <p style="margin-bottom: 10px;">Assim como o quadro acima, o som se torna um emaranhado de linhas que parecem conversar entre si. Os músicos terão sequências de 6 cores que ditarão o percurso das notas.</p> <!-- Imagem da Partitura --> <div style="text-align: center; margin: 10px 0;"> <img src="https://thalesdelcomune.com/wp-content/uploads/2026/07/Slice-5-down-1.png" alt="Partitura de Cores" style="max-width: 100%; border: 1px solid #f0f0f0; padding: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);" /> </div> <!-- PASSO 1: Painel Interativo de Cores --> <div style="text-align: center; margin: 15px auto; max-width: 500px; padding: 12px; border: 1px solid #eee;"> <span style="font-size: 0.85em; font-weight: bold; display: block; margin-bottom: 2px; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px;"> Selecione a sequência de notas: </span> <span style="font-size: 0.8em; font-style: italic; font-family: Georgia, serif; color: #666; display: block; margin-bottom: 10px;"> Notas? Que notas? Escolha sua sequência de cores favorita!🌈 </span> <div class="grade-cores"> <button class="botao-cor vermelho" onclick="registrarCor(this, 'Vermelho')">Vermelho</button> <button class="botao-cor azul" onclick="registrarCor(this, 'Azul')">Azul</button> <button class="botao-cor amarelo" onclick="registrarCor(this, 'Amarelo')">Amarelo</button> <button class="botao-cor verde" onclick="registrarCor(this, 'Verde')">Verde</button> <button class="botao-cor laranja" onclick="registrarCor(this, 'Laranja')">Laranja</button> <button class="botao-cor roxo" onclick="registrarCor(this, 'Roxo')">Roxo</button> </div> <div id="sequencia-escolhida" style="margin-top: 10px; font-family: monospace; font-size: 0.8em; color: #555; min-height: 18px; word-wrap: break-word;"> Caminho das notas: nenhum </div> <div id="aviso-tendinite" style="margin-top: 8px; font-family: sans-serif; font-size: 0.85em; font-weight: bold; color: #000; transition: all 0.3s ease;"></div> </div> </div> <!-- PASSO 2: Seleção da Capa de Disco (Foco Exclusivo) --> <div id="passo-capas" style="display: none; margin-top: 20px; text-align: center; animation: fadeIn 0.4s ease-in-out;"> <p style="font-size: 0.85em; font-weight: bold; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;"> Diagnóstico de Psicose </p> <p style="font-size: 0.8em; color: #666; font-style: italic; margin-bottom: 15px;"> A flauta é um instrumento capaz de nos transportar para outros mundos. Escolha a capa que melhor reflete o lugar que deseja ir: </p> <div class="grade-capas" style="display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto;"> <div class="card-capa" onclick="selecionarCapa(this, 1)" style="cursor: pointer; width: 45%; border: 1px solid #eee; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: all 0.2s ease;"> <img src="https://thalesdelcomune.com/wp-content/uploads/2026/08/ad5372a25d5eff2c9a01c295eda0d1bc.jpg" alt="Capa 1" style="width: 100%; height: auto; display: block;" /> </div> <div class="card-capa" onclick="selecionarCapa(this, 2)" style="cursor: pointer; width: 45%; border: 1px solid #eee; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: all 0.2s ease;"> <img src="https://thalesdelcomune.com/wp-content/uploads/2026/08/61ynA8g83CS.jpg" alt="Capa 2" style="width: 100%; height: auto; display: block;" /> </div> <div class="card-capa" onclick="selecionarCapa(this, 3)" style="cursor: pointer; width: 45%; border: 1px solid #eee; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: all 0.2s ease;"> <img src="https://thalesdelcomune.com/wp-content/uploads/2026/08/mysterykind_kindaichi_101b.jpg" alt="Capa 3" style="width: 100%; height: auto; display: block;" /> </div> <div class="card-capa" onclick="selecionarCapa(this, 4)" style="cursor: pointer; width: 45%; border: 1px solid #eee; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: all 0.2s ease;"> <img src="https://thalesdelcomune.com/wp-content/uploads/2026/08/images.jpg" alt="Capa 4" style="width: 100%; height: auto; display: block;" /> </div> </div> <div id="resposta-humor" style="margin-top: 15px; font-family: Georgia, serif; font-style: italic; font-size: 0.9em; color: #333; min-height: 20px; line-height: 1.4;"></div> </div> <!-- PASSO 3: Botão de Seguir Adiante --> <div id="continuacao-grupo" style="display: none; margin-top: 20px; border-top: 1px solid #f0f0f0; padding-top: 15px; text-align: center; animation: fadeIn 0.4s ease-in-out;"> <div class="links-finais"> [[Seguir para a próxima página -> Pagina 4]] </div> </div> <!-- Script de Fluxo e Respostas Personalizadas --> <script> window.contagemCliques = 0; window.coresSelecionadas = []; function registrarCor(botao, nomeCor) { if (window.contagemCliques >= 6) return; window.contagemCliques++; window.coresSelecionadas.push(nomeCor); document.getElementById('sequencia-escolhida').innerText = "Caminho das notas: " + window.coresSelecionadas.join(" ➔ "); if (window.contagemCliques === 6) { setTimeout(function() { document.getElementById('bloco-topo').style.display = 'none'; document.getElementById('passo-capas').style.display = 'block'; }, 400); } } function selecionarCapa(cardClicado, indice) { var capas = document.querySelectorAll('.card-capa'); capas.forEach(function(c) { c.onclick = null; c.style.cursor = 'default'; if (c !== cardClicado) { c.style.opacity = '0.3'; } }); cardClicado.style.borderColor = '#000000'; cardClicado.style.boxShadow = '0 0 0 2px #000000'; var mensagens = { 1: "Escolhido. Deus sabe o que faz.", 2: "Toda escolha tem consequências.", 3: "Eu escolho, eu sofro.", 4: "Decisão 100% inquestionável." }; document.getElementById('resposta-humor').innerText = mensagens[indice] || "Eu te entendo."; document.getElementById('continuacao-grupo').style.display = 'block'; } </script>
!!Página 4: A Grande Copa Sonora <p>Os músicos possuem diretrizes para um disputa estética em um torneio de eliminação direta. Quem vencer ditará o espírito e os temas ouvidos nessa página.</p> <div class="torneio-container" style="margin: 30px auto; max-width: 550px; min-height: 180px;"> <!-- JOGO 1 (QUARTAS) --> <div id="painel-jogo-1" class="bloco-jogo-ativo"> <p class="fase-tag">Quartas de Final • Jogo 1 de 4</p> <p class="titulo-pergunta">Quem avança para a semifinal?</p> <div class="botoes-lado-a-lado"> <button class="botao-opcao-interna" onclick="votarQuartas(1, 'Raul Seixas', 'painel-jogo-1', 'painel-jogo-2')">Raul Seixas</button> <button class="botao-opcao-interna" onclick="votarQuartas(1, 'F. Chopin', 'painel-jogo-1', 'painel-jogo-2')">F. Chopin</button> </div> </div> <!-- JOGO 2 (QUARTAS) --> <div id="painel-jogo-2" class="bloco-jogo-ativo" style="display: none;"> <p class="fase-tag">Quartas de Final • Jogo 2 de 4</p> <p class="titulo-pergunta">Quem avança para a semifinal?</p> <div class="botoes-lado-a-lado"> <button class="botao-opcao-interna" onclick="votarQuartas(2, 'Djavan', 'painel-jogo-2', 'painel-jogo-3')">Djavan</button> <button class="botao-opcao-interna" onclick="votarQuartas(2, 'M. Carey', 'painel-jogo-2', 'painel-jogo-3')">Mariah Carey</button> </div> </div> <!-- JOGO 3 (QUARTAS) --> <div id="painel-jogo-3" class="bloco-jogo-ativo" style="display: none;"> <p class="fase-tag">Quartas de Final • Jogo 3 de 4</p> <p class="titulo-pergunta">Quem avança para a semifinal?</p> <div class="botoes-lado-a-lado"> <button class="botao-opcao-interna" onclick="votarQuartas(3, 'D. Mercury', 'painel-jogo-3', 'painel-jogo-4')">Daniela Mercury</button> <button class="botao-opcao-interna" onclick="votarQuartas(3, 'Debussy', 'painel-jogo-3', 'painel-jogo-4')">Claude Debussy</button> </div> </div> <!-- JOGO 4 (QUARTAS) --> <div id="painel-jogo-4" class="bloco-jogo-ativo" style="display: none;"> <p class="fase-tag">Quartas de Final • Jogo 4 de 4</p> <p class="titulo-pergunta">Quem avança para a semifinal?</p> <div class="botoes-lado-a-lado"> <button class="botao-opcao-interna" onclick="votarQuartas(4, 'Fábio Jr.', 'painel-jogo-4', 'painel-semi-1')">Fábio Júnior</button> <button class="botao-opcao-interna" onclick="votarQuartas(4, 'Wagner', 'painel-jogo-4', 'painel-semi-1')">Richard Wagner</button> </div> </div> <!-- SEMIFINAL 1 --> <div id="painel-semi-1" class="bloco-jogo-ativo" style="display: none;"> <p class="fase-tag" style="color: #d9534f;">Semifinal 1</p> <p class="titulo-pergunta">Quem garante vaga na grande final?</p> <div class="botoes-lado-a-lado"> <button id="btn-semi1-o1" class="botao-opcao-interna" onclick="votarSemis(1, this.innerText, 'painel-semi-1', 'painel-semi-2')"></button> <button id="btn-semi1-o2" class="botao-opcao-interna" onclick="votarSemis(1, this.innerText, 'painel-semi-1', 'painel-semi-2')"></button> </div> </div> <!-- SEMIFINAL 2 --> <div id="painel-semi-2" class="bloco-jogo-ativo" style="display: none;"> <p class="fase-tag" style="color: #d9534f;">Semifinal 2</p> <p class="titulo-pergunta">Quem garante vaga na grande final?</p> <div class="botoes-lado-a-lado"> <button id="btn-semi2-o1" class="botao-opcao-interna" onclick="votarSemis(2, this.innerText, 'painel-semi-2', 'painel-final')"></button> <button id="btn-semi2-o2" class="botao-opcao-interna" onclick="votarSemis(2, this.innerText, 'painel-semi-2', 'painel-final')"></button> </div> </div> <!-- GRANDE FINAL --> <div id="painel-final" class="bloco-jogo-ativo" style="display: none; border-color: #000; border-width: 1.5px;"> <p class="fase-tag" style="color: #000; font-weight: bold; letter-spacing: 2px;">⚡ GRANDE FINAL ⚡</p> <p class="titulo-pergunta" style="font-size: 1.1em;">Quem é o supremo campeão?</p> <div class="botoes-lado-a-lado"> <button id="btn-final-o1" class="botao-opcao-interna" onclick="votarFinal(this.innerText, 'painel-final')"></button> <button id="btn-final-o2" class="botao-opcao-interna" onclick="votarFinal(this.innerText, 'painel-final')"></button> </div> </div> <!-- TELA DE FIM DO TORNEIO --> <div id="painel-campeao-anuncio" class="bloco-jogo-ativo" style="display: none; border: 2px solid #000; background-color: #000; color: #fff;"> <p class="fase-tag" style="color: #fff; letter-spacing: 2px;">🏆 TORNEIO CONCLUÍDO</p> <h3 id="texto-campeao" style="font-family: sans-serif; text-transform: uppercase; margin: 10px 0; font-size: 1.3em;"></h3> <p style="font-size: 0.85em; opacity: 0.8; font-style: italic;">A estética e os contornos dessa página foram definidos.</p> </div> </div> <!-- CHAVE DO TORNEIO (VISUALIZAÇÃO EM TABELA) --> <div class="tabela-chave-container"> <h3>Chave do Torneio (Resultados)</h3> <table class="tabela-chave"> <thead> <tr> <th>Quartas</th> <th>Semifinais</th> <th>Final</th> <th>Campeão</th> </tr> </thead> <tbody> <tr> <td id="td-q1">Jogo 1: --</td> <td rowspan="2" id="td-s1" class="celula-destaque">Semi 1: --</td> <td rowspan="4" id="td-f" class="celula-destaque">Final: --</td> <td rowspan="4" id="td-campeao" class="celula-campeao">🏆 --</td> </tr> <tr> <td id="td-q2">Jogo 2: --</td> </tr> <tr> <td id="td-q3">Jogo 3: --</td> <td rowspan="2" id="td-s2" class="celula-destaque">Semi 2: --</td> </tr> <tr> <td id="td-q4">Jogo 4: --</td> </tr> </tbody> </table> </div> <!-- LINKS FINAIS PARA A PÁGINA 5 (LIBERADOS NO FIM) --> <div id="secao-proxima-pagina" style="display: none; margin-top: 40px; border-top: 1.5px solid #000; padding-top: 30px; text-align: center;"> <p style="font-family: sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85em; margin-bottom: 20px;"> Siga para a próxima página: </p> <div class="links-finais"> [[Avançar para a Página 5 -> Pagina 5]] </div> </div> <script> // Inicialização das variáveis de estado globais do torneio window.torneio = { q1: null, q2: null, q3: null, q4: null, s1: null, s2: null, campeao: null }; function avancarPainel(atualId, proximoId) { document.getElementById(atualId).style.display = 'none'; document.getElementById(proximoId).style.display = 'block'; } function votarQuartas(jogo, vencedor, atualId, proximoId) { window.torneio['q' + jogo] = vencedor; // Atualiza a tabela de resultados var celula = document.getElementById('td-q' + jogo); celula.innerText = vencedor; celula.classList.add('vencedor-passo'); // Prepara as opções da semifinal correspondente conforme as escolhas vão ocorrendo if (window.torneio.q1 && window.torneio.q2) { document.getElementById('btn-semi1-o1').innerText = window.torneio.q1; document.getElementById('btn-semi1-o2').innerText = window.torneio.q2; } if (window.torneio.q3 && window.torneio.q4) { document.getElementById('btn-semi2-o1').innerText = window.torneio.q3; document.getElementById('btn-semi2-o2').innerText = window.torneio.q4; } // Transiciona para a próxima pergunta da fila avancarPainel(atualId, proximoId); } function votarSemis(semi, vencedor, atualId, proximoId) { window.torneio['s' + semi] = vencedor; // Atualiza a tabela de resultados var celula = document.getElementById('td-s' + semi); celula.innerText = vencedor; celula.classList.add('vencedor-passo'); // Prepara as opções da final se ambas as semifinais já estiverem resolvidas if (window.torneio.s1 && window.torneio.s2) { document.getElementById('btn-final-o1').innerText = window.torneio.s1; document.getElementById('btn-final-o2').innerText = window.torneio.s2; } // Transiciona avancarPainel(atualId, proximoId); } function votarFinal(campeao, atualId) { window.torneio.campeao = campeao; // Atualiza a tabela final var celulaFinal = document.getElementById('td-f'); celulaFinal.innerText = campeao; celulaFinal.classList.add('vencedor-passo'); var celulaCampeao = document.getElementById('td-campeao'); celulaCampeao.innerText = "🏆 " + campeao; celulaCampeao.classList.add('vencedor-ouro'); // Salva a decisão na variável do Twine if (typeof State !== 'undefined' && State.variables) { State.variables.estetica = campeao.toLowerCase(); } else { sessionStorage.setItem('estetica', campeao.toLowerCase()); } // Mostra o anúncio do vencedor e exibe o link para prosseguir document.getElementById('texto-campeao').innerText = "Vencedor: " + campeao; avancarPainel(atualId, 'painel-campeao-anuncio'); document.getElementById('secao-proxima-pagina').style.display = 'block'; } </script>
!!Página 5: A Arquitetura do Som <p>Sob a influência do mestre consagrado no torneio anterior, chegou a hora de definir os acordes e a pulsação da sua obra. Você ditará a harmonia e o ritmo que os músicos vão executar.</p> <div class="painel-construcao" style="margin: 30px auto; max-width: 550px; min-height: 220px;"> <!-- ETAPA 1: ESCOLHA DOS ACORDES --> <div id="etapa-acordes"> <p class="fase-tag">Passo 1 de 2 • Harmonia</p> <p class="titulo-pergunta">Monte sua progressão escolhendo exatamente 5 acordes:</p> <div class="grade-botoes-leves"> <button class="btn-escolha-som" onclick="adicionarAcorde('Eb7M')">Acorde de domingo à tarde</button> <button class="btn-escolha-som" onclick="adicionarAcorde('Dó')">Acorde proibido</button> <button class="btn-escolha-som" onclick="adicionarAcorde('Dsus4/9')">Acorde para pessoas lindas</button> <button class="btn-escolha-som" onclick="adicionarAcorde('E5')">'Acorde' para guitarristas</button> <button class="btn-escolha-som" onclick="adicionarAcorde('A7')">Acorde de milionário</button> <button class="btn-escolha-som" onclick="adicionarAcorde('Dm7M')">Acorde de novela</button> <button class="btn-escolha-som" onclick="adicionarAcorde('F6')">Acorde "alguma hora desafina"</button> <button class="btn-escolha-som" onclick="adicionarAcorde('Sibø')">Acorde que não precisava existir</button> <button class="btn-escolha-som" onclick="adicionarAcorde('Mib7M')">Acorde de quem sabe das coisas</button> <button class="btn-escolha-som" onclick="adicionarAcorde('Mib7M')">Acorde de quem finje saber das coisas</button> </div> <div class="visor-sequencia"> <strong>Sua Progressão:</strong> <span id="visor-acordes">Nenhum acorde selecionado</span> </div> </div> <!-- ETAPA 2: ESCOLHA DOS RITMOS (OCULTA INICIALMENTE) --> <div id="etapa-ritmos" style="display: none;"> <p class="fase-tag" style="color: #d9534f;">Passo 2 de 2 • Ritmo</p> <p class="titulo-pergunta">Após os acordes teremos uma seção rítimica. Escolha 5 padrões que ouvimos no dia a dia:</p> <div class="grade-botoes-leves"> <button class="btn-escolha-som" onclick="adicionarRitmo('Síncopa')">New MPB da Livraria da Vila</button> <button class="btn-escolha-som" onclick="adicionarRitmo('Mínima')">Pop torto dos alunos de violão</button> <button class="btn-escolha-som" onclick="adicionarRitmo('Contratempo')">Pagode no ônibus de Cotia</button> <button class="btn-escolha-som" onclick="adicionarRitmo('Tercina')">Synthwave da Augusta às 23h</button> <button class="btn-escolha-som" onclick="adicionarRitmo('Semínima')">Ritmo que nosso amigo 'Não ouço música pop' mais gosta </button> <button class="btn-escolha-som" onclick="adicionarRitmo('Ostinato')">Seção 'mais vendidos' da Tok&Stok</button> <button class="btn-escolha-som" onclick="adicionarRitmo('Swing')">Jazz de cafeteria</button> <button class="btn-escolha-som" onclick="adicionarRitmo('Semicolcheia')">Música de IA na Renner</button> <button class="btn-escolha-som" onclick="adicionarRitmo('Ponto de Aumento')">Funk executivo</button> <button class="btn-escolha-som" onclick="adicionarRitmo('Célula Bartók')">Vinheta da JovemPan no Uber</button> </div> <div class="visor-sequencia"> <strong>Sua Linha Rítmica:</strong> <span id="visor-ritmos">Nenhum ritmo selecionado</span> </div> </div> <!-- ETAPA FINAL: EXIBIÇÃO DA ESTRUTURA COMPLETA --> <div id="etapa-final-som" style="display: none; border: 1.5px solid #000; padding: 20px; background-color: #fafafa;"> <p class="fase-tag" style="color: #000; font-weight: bold;">✓ ESTRUTURA CONCLUÍDA</p> <p style="font-size: 0.9em; margin-bottom: 15px; font-family: sans-serif;">Sua partitura híbrida foi gerada com sucesso e enviada aos músicos.</p> <div style="font-size: 0.8em; text-align: left; font-family: monospace; background: #fff; padding: 10px; border: 1px solid #ddd; margin-bottom: 20px;"> <div><strong>[HARM]</strong> <span id="resumo-acordes"></span></div> <div style="margin-top: 5px;"><strong>[RITMO]</strong> <span id="resumo-ritmos"></span></div> </div> </div> </div> <!-- BOTÃO SEGUIR EM FRENTE (SÓ APARECE NO FINAL) --> <div id="secao-proxima-pagina" style="display: none; text-align: center; margin-top: 30px;"> <div class="links-finais"> [[Seguir em frente ->Pagina 6]] </div> </div> <script> // Inicialização das variáveis de memória locais window.escolhasSom = { acordes: [], ritmos: [] }; function adicionarAcorde(acorde) { if (window.escolhasSom.acordes.length >= 5) return; window.escolhasSom.acordes.push(acorde); document.getElementById('visor-acordes').innerText = window.escolhasSom.acordes.join(" ➔ "); if (window.escolhasSom.acordes.length === 5) { // Bloqueia cliques extras e avança para os ritmos após 800ms setTimeout(function() { document.getElementById('etapa-acordes').style.display = 'none'; document.getElementById('etapa-ritmos').style.display = 'block'; }, 800); } } function adicionarRitmo(ritmo) { if (window.escolhasSom.ritmos.length >= 5) return; window.escolhasSom.ritmos.push(ritmo); document.getElementById('visor-ritmos').innerText = window.escolhasSom.ritmos.join(" ➔ "); if (window.escolhasSom.ritmos.length === 5) { // Conclui o processo e exibe o resumo final setTimeout(function() { document.getElementById('etapa-ritmos').style.display = 'none'; document.getElementById('resumo-acordes').innerText = window.escolhasSom.acordes.join(" - "); document.getElementById('resumo-ritmos').innerText = window.escolhasSom.ritmos.join(" - "); document.getElementById('etapa-final-som').style.display = 'block'; document.getElementById('secao-proxima-pagina').style.display = 'block'; }, 800); } } </script>
!!Página 6: O Desfecho da Obra <div class="painel-construcao" style="margin: 15px auto; max-width: 550px;"> <!-- SELEÇÃO DE SENTIMENTO (DESAPARECE APÓS A ESCOLHA) --> <div id="etapa-sentimento"> <p class="fase-tag">Conclusão • Coda</p> <p class="titulo-pergunta">Para terminar a música, escolha um sentimento apropriado para o seu dia:</p> <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;"> <button class="btn-escolha-som" style="padding: 10px;" onclick="finalizarObra('Tristeza', 'https://thalesdelcomune.com/wp-content/uploads/2026/07/batch_1_1.jpg')">Tristeza</button> <button class="btn-escolha-som" style="padding: 10px;" onclick="finalizarObra('Alegria', 'https://thalesdelcomune.com/wp-content/uploads/2026/07/batch_2_1.jpg')">Alegria</button> <button class="btn-escolha-som" style="padding: 10px;" onclick="finalizarObra('Tanto faz', 'https://thalesdelcomune.com/wp-content/uploads/2026/07/batch_3_1.jpg')">Tanto faz</button> </div> </div> <!-- EXIBIÇÃO DA IMAGEM E CONCLUSÃO --> <div id="resultado-final" style="display: none; animation: fadeIn 0.4s ease-in-out; text-align: center;"> <p class="fase-tag" style="color: #000; font-weight: bold; letter-spacing: 2px;">✓ OBRA CONCLUÍDA</p> <div style="margin: 10px 0; background: #eee; line-height: 0;"> <img id="imagem-sentimento" src="" alt="Cenário Final" style="width: 100%; height: auto; border: 1px solid #000;" /> </div> <p style="font-family: sans-serif; font-size: 0.95em; margin-top: 10px; font-weight: bold;"> Obrigado por participar desta experiência. </p> </div> </div> <!-- SEÇÃO FINAL COMPACTA: RECOMENDAÇÃO + REINICIAR --> <div id="secao-final" style="display: none; text-align: center; margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; animation: fadeIn 0.4s ease-in-out;"> <p style="font-family: Georgia, serif; font-style: italic; font-size: 0.85em; color: #555; margin-bottom: 10px;"> Você fez suas escolhas. Agora, que tal ouvir outra música, onde as escolhas já foram feitas? </p> <a href="https://open.spotify.com/intl-pt/album/2bg5YSnnW5JzlKVLDOBG2L?si=npnhle2ISSuaKHZQFfggNQ" target="_blank" rel="noopener noreferrer" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; background-color: #121212; color: #ffffff; text-decoration: none; font-family: sans-serif; font-size: 0.75em; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; padding: 10px 18px; border-radius: 4px; border: 1px solid #000; margin-bottom: 15px;"> <svg width="16" height="16" viewBox="0 0 24 24" fill="#1DB954" xmlns="http://www.w3.org/2000/svg"> <path d="M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0zm5.521 17.341c-.218.358-.684.473-1.042.253-2.859-1.748-6.458-2.143-10.692-1.176-.405.093-.812-.161-.905-.566-.093-.404.162-.812.566-.905 4.632-1.06 8.607-.61 11.82 1.353.359.219.474.685.253 1.041zm1.472-3.275c-.274.446-.86.588-1.306.314-3.272-2.011-8.261-2.595-12.132-1.42-.505.153-1.037-.133-1.19-.638-.153-.505.133-1.037.638-1.19 4.42-1.342 9.914-.69 13.676 1.628.446.274.588.86.314 1.306zm.135-3.41c-3.924-2.33-10.386-2.545-14.15-1.402-.614.186-1.263-.162-1.449-.777-.186-.615.162-1.264.777-1.45 4.318-1.31 11.45-1.05 15.962 1.628.552.328.736 1.043.408 1.595-.328.552-1.043.736-1.548.406z"/> </svg> Descubra outras músicas para flauta </a> <div class="links-finais" style="margin-top: 5px;"> [[Trilhar um novo caminho (Reiniciar) -> Start]] </div> </div> <script> function finalizarObra(sentimento, urlImagem) { var imgElement = document.getElementById('imagem-sentimento'); imgElement.src = urlImagem; imgElement.alt = "Cenário representando o sentimento: " + sentimento; if (typeof State !== 'undefined' && State.variables) { State.variables.sentimentoFinal = sentimento; } document.getElementById('etapa-sentimento').style.display = 'none'; document.getElementById('resultado-final').style.display = 'block'; document.getElementById('secao-final').style.display = 'block'; } </script>