inicio do dia 06-04-26

css/custom.css

@@ -110,17 +110,18 @@ max-width: 74%;
 
 /* Question Screen */
 .question-box {
-    background-color: var(--cor-fundo-escuro);
+    background-color: #FFFFFF; /* Folhinha branca */
     border-radius: 4rem 1rem;
     padding: 1.5rem;
     line-height: 2.3rem;
     width: 90%;
     margin-bottom: 1.5rem;
-    box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
+    box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
+    z-index: 5;
 }
 
 .question-box p {
-    color: var(--cor-texto-principal);
+    color: var(--cor-texto-secundario); /* Fonte verde */
     font-family: 'General Sans' !important;
     font-size: 2.5rem;
     font-weight: 600;
@@ -157,8 +158,8 @@ max-width: 74%;
   justify-content: center;
   font-size: 3em;
   font-weight: bold;
-  color: #000;
+  color: var(--cor-texto-secundario); /* Fonte verde */
-  border-right: 0.1rem solid rgba(0,0,0,0.1);
+  border-right: 0.1rem solid rgba(0,0,0,0.05);
 }
 
 .text-box {
@@ -167,8 +168,8 @@ width: 80%;
     display: flex;
     align-items: center;
     font-size: 1.8rem;
-    color: #000;
+    color: var(--cor-texto-secundario); /* Fonte verde */
-    font-weight: 500;
+    font-weight: 600;
     line-height: 0.9em;
 }
 
@@ -193,14 +194,14 @@ width: 80%;
 }
 
 .result-title-box h1 {
-  color: var(--cor-fundo-escuro);
+  color: var(--cor-texto-secundario); /* Fonte verde */
   font-size: 4rem;
   font-weight: bold;
   margin: 0;
 }
 
 .score-box {
-  background-color: var(--cor-fundo-escuro);
+  background-color: #FFFFFF; /* Quadrado branco */
   border-radius: 1.5rem;
   padding: 2rem;
   width: 80%;
@@ -210,13 +211,13 @@ width: 80%;
 }
 
 .score-box p {
-  color: #fff;
+  color: var(--cor-texto-secundario); /* Fonte verde */
   font-size: 2rem;
   margin: 0;
 }
 
 .score-box h2 {
-  color: var(--cor-titulos);
+  color: var(--cor-fundo-resultado); /* Fonte verde escura */
   font-size: 8rem;
   font-weight: bold;
   margin: -0.5rem 0;
@@ -252,19 +253,29 @@ body {
   background-color: var(--cor-fundo-principal) !important;
 }
 
-/* --- Modo Debug (rotaciona -90deg e redimensiona para view) --- */
+/* --- Modo Debug (Simulação Real 1080x1920 em Monitor Horizontal) --- */
 html.debug-mode {
-    width: calc(100vh * 9 / 16);
+    /* Força o container em 9:16 baseado na altura total do monitor */
-    height: 100vh;
+    height: 100vh !important;
+    width: 56.25vh !important; /* (1080 / 1920 * 100) = 56.25vh */
+    
     position: fixed !important;
-    top: 50vh !important;
+    top: 50% !important;
-    left: 0;
+    left: 50% !important;
+    
+    /* Centraliza e rotaciona -90deg para teste em monitor widescreen */
     transform: translate(-50%, -50%) rotate(-90deg) !important;
     transform-origin: center center !important;
+    
+    /* Auxílio visual para delimitar a área da TV */
+    border: 1px solid rgba(255,255,255,0.2) !important;
+    box-shadow: 0 0 5rem rgba(0,0,0,0.8) !important;
+    background-color: #000 !important;
     overflow: hidden !important;
 }
 
 html.debug-mode body {
+  /* No Modo Debug, 1vh refere-se à altura desse container simulado */
   width: 100% !important;
   height: 100% !important;
   max-width: none !important;

dados/config.json

@@ -5,11 +5,16 @@
       "texto_botao_iniciar": "INICIAR",
       "texto_resultado_parabens": "Parabéns!",
       "texto_resultado_acertos": "Você acertou {{pontuacao}} perguntas",
-      "texto_resultado_derrota": "Você acertou apenas {{pontuacao}} perguntas. Tente novamente!"
+      "texto_resultado_derrota": "Você acertou apenas {{pontuacao}} perguntas. Tente novamente!",
+      "transitionDuration": 2000,
+      "transitionBackgroundColor": "#FFFFFF",
+      "feedbackDelay": 4500,
+      "initDelay": 1000
     },
     "imagens": {
+      "transitionLogo": "img/ius_logo_branco.jpg",
       "fundo_padrao": "img/quiz_patternBG.png",
-      "logo_tela_inicial": "img/quiz_LOGO_TITLE.png",
+      "logo_tela_inicial": "img/quiz_LOGO_GAME.png",
       "logo_tela_jogo": "img/quiz_LOGO_GAME.png",
       "logo_tela_resultado": "img/quiz_LOGO_END.png",
       "logo_patrocinador": "img/quiz_LOGO_TITLE.png",
@@ -17,20 +22,20 @@
     },
     "cores": {
       "fundoPrincipal": "#83B81A",
-      "fundoEscuro": "#1e294a",
+      "fundoEscuro": "#83B81A",
       "corFundoResultado": "#537813",
       "textoPrincipal": "#FFFFFF",
-      "textoSecundario": "#263D6B",
+      "textoSecundario": "#537813",
-      "tituloCor": "#A1C633",
+      "tituloCor": "#FFFFFF",
-      "btnIniciarFundo": "#A1C633",
+      "btnIniciarFundo": "#FFFFFF",
-      "btnIniciarTexto": "#FFFFFF",
+      "btnIniciarTexto": "#537813",
-      "corAcerto": "#20386f",
+      "corAcerto": "#537813",
       "corErro": "#702e21",
       "alternativas": {
-        "A": "#cfd6e2",
+        "A": "#FFFFFF",
-        "B": "#cfd6e2",
+        "B": "#FFFFFF",
-        "C": "#cfd6e2",
+        "C": "#FFFFFF",
-        "D": "#cfd6e2"
+        "D": "#FFFFFF"
       }
     }
   }

index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html class="play" ng-app="app">
+
 <head>
   <script>
     S = {}
@@ -38,25 +39,33 @@
     .platform-ios .manual-ios-statusbar-padding {
       padding-top: 20px;
     }
+
     .manual-remove-top-padding {
       padding-top: 0px;
     }
+
     .manual-remove-top-padding .scroll {
       padding-top: 0px !important;
     }
-      ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
+
+    ion-list.manual-list-fullwidth div.list,
+    .list.card.manual-card-fullwidth {
       margin-left: -10px;
       margin-right: -10px;
     }
-      ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
+
+    ion-list.manual-list-fullwidth div.list>.item,
+    .list.card.manual-card-fullwidth>.item {
       border-radius: 0px;
       border-left: 0px;
       border-right: 0px;
     }
+
     .show-list-numbers-and-dots ul {
       list-style-type: disc;
       padding-left: 40px;
     }
+
     .show-list-numbers-and-dots ol {
       list-style-type: decimal;
       padding-left: 40px;
@@ -83,19 +92,26 @@
     left: 0;
     width: 100%;
     height: 100%;
-      background-color: #000;
+    background-color: var(--cor-transition-bg);
     z-index: 9999;
     pointer-events: none;
-      opacity: 0;
+    clip-path: circle(125%);
-      transition: opacity 0.5s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-    #transition.active {
+  #transition img {
-      opacity: 1;
+    max-width: 50%;
+    height: auto;
   }
 </style>
+
 <body animation="slide-left-right-ios7">
-    <div class="custom-bg-pattern" ></div>
+  <div id="transition" transition-style=""> 
+    <img src="img/ius_logo_branco.jpg">
+  </div>
+
   <div>
     <div>
       <ion-nav-bar class="bar-stable">
@@ -106,4 +122,5 @@
   </div>
 
 </body>
+
 </html>

js/controllers.js

@@ -42,6 +42,9 @@ angular.module('app.controllers', [])
       // Carregar os dados de parametrização global e aplicar ao tema
       $http.get('dados/config.json').then(function (response) {
           S.themeConfig = response.data;
+          S.transitionDuration = S.themeConfig.tema.transitionDuration || 3500;
+          S.feedbackDelay = S.themeConfig.tema.feedbackDelay || 3000;
+          S.initDelay = S.themeConfig.tema.initDelay || 500;
           console.log(S.themeConfig)
           
           if (S.themeConfig.debug) {
@@ -95,6 +98,7 @@ angular.module('app.controllers', [])
           rootNode.style.setProperty('--cor-acerto', S.themeConfig.cores.corAcerto);
           rootNode.style.setProperty('--cor-erro', S.themeConfig.cores.corErro);
           rootNode.style.setProperty('--cor-fundo-resultado', S.themeConfig.cores.corFundoResultado);
+          rootNode.style.setProperty('--cor-transition-bg', S.themeConfig.tema.transitionBackgroundColor || '#000000');
           
           Object.keys(S.themeConfig.cores.alternativas).forEach(key => {
             rootNode.style.setProperty(`--cor-alt-${key.toLowerCase()}`, S.themeConfig.cores.alternativas[key]);
@@ -140,6 +144,10 @@ S.derrotas = 0;
         // Atribuir os dados ao escopo
         $scope.quizDataOriginal = response.data;
         
+        // Revelar a tela inicial após o carregamento completo
+        $timeout(() => {
+          S.setupTransitionOut();
+        }, S.initDelay);
 
       });
 
@@ -171,10 +179,14 @@ S.derrotas = 0;
         });
         S.correctList = S.generateNonRepeatingRandomNumbers(5, 5)
         S.wrongList = S.generateNonRepeatingRandomNumbers(5, 5)
-        S.showGame = true
-        S.setupTransitionOut(S.start)
         S.play('startgame', 0)
         
+        S.setupTransitionIn();
+        $timeout(() => {
+          S.showStart = false;
+          S.showGame = true;
+          S.setupTransitionOut();
+        }, S.transitionDuration);
       }
 
       // Função para configurar a transição de entrada
@@ -187,6 +199,7 @@ S.derrotas = 0;
         ];
         var i = Math.floor(Math.random() * inList.length);
         el.attr('transition-style', inList[i]);
+        el.css('--transition__duration', (S.transitionDuration / 1000) + 's');
       }
 
       // Função para configurar a transição de saída
@@ -199,6 +212,7 @@ S.derrotas = 0;
         ];
         var i = Math.floor(Math.random() * outList.length);
         el.attr('transition-style', outList[i]);
+        el.css('--transition__duration', (S.transitionDuration / 1000) + 's');
         S.botoesAtivos = true;
       }
 
@@ -258,6 +272,8 @@ S.derrotas = 0;
 
       S.chamaResultado = function () {
         if ($scope.quiz.pontuacao >= 3) {
+          $timeout(() => {
+            S.setupTransitionIn();
             $timeout(() => {
               S.vitorias++
               S.salvarDadosJogos();
@@ -270,19 +286,22 @@ S.derrotas = 0;
                 S.play("success1", 1)
                 S.v5by5 = false
               }
+              S.setupTransitionOut();
+            }, S.transitionDuration);
           }, 3000)
         } else {
           $timeout(_ => {
+            S.setupTransitionIn();
+            $timeout(() => {
               S.derrotas++
               S.salvarDadosJogos();
-            S.criarListaDinamica(10, '.circles2')
               S.victory = false
               S.showGame = false
               S.lose = true
               S.play('wawawa', 0.5)
+              S.setupTransitionOut();
+            }, S.transitionDuration);
           }, 3000)
-
-          // Adicione aqui qualquer outra lógica que você queira executar quando o jogador perder.
         }
       };
       
@@ -327,8 +346,6 @@ S.derrotas = 0;
         S.botoesAtivos = false
         S.respostaAtual = $scope.quiz.perguntas[$scope.quiz.perguntaAtual].respostas[indiceResposta];
         S.botaoClicado = angular.element($evento.currentTarget);
-
-        S.transition.removeClass('resposta-correta').removeClass('resposta-incorreta')
         // Verifica se a resposta está correta
         if (S.respostaAtual.correta) {
           // Se a resposta estiver correta, altera a classe para verde
@@ -336,7 +353,6 @@ S.derrotas = 0;
           var pontuacaoDaResposta = 1
           S.play('correct')
           S.botaoClicado.addClass('resposta-correta');
-          S.transition.addClass('resposta-correta')
 
 
         } else {
@@ -345,7 +361,6 @@ S.derrotas = 0;
           S.botaoClicado.addClass('resposta-incorreta');
           S.destacarRespostaCorreta()
           S.erros++
-          S.transition.addClass('resposta-incorreta')
           var pontuacaoDaResposta = 0
         }
 
@@ -354,26 +369,28 @@ S.derrotas = 0;
           S.chamaResultado()
 
         }
-        // Aguarda 4 segundos antes de passar para a próxima pergunta
+        // Aguarda o tempo de feedback antes de passar para a próxima pergunta
         $timeout(function () {
+          // Iniciar transição entre perguntas
+          S.setupTransitionIn();
+
+          $timeout(function () {
+            // No meio da transição (quando a tela estiver coberta), trocamos a pergunta
             // Remove a classe para garantir que ela seja aplicada corretamente na próxima vez
             S.botaoClicado.removeClass('resposta-correta').removeClass('resposta-incorreta');
 
-          // Atualizar pontuação
-
             // Passa para a próxima pergunta
             $scope.quiz.perguntaAtual++;
             $scope.quiz.perguntasRespondidas++;
 
+            // Reseta posições e alturas se necessário
+            S.checarAlturaResposta();
 
-        }, 3000);
+            // Retira a transição
-        $timeout(()=>{
+            S.setupTransitionOut();
-          S.checarAlturaResposta()
+          }, S.transitionDuration); // Tempo dinâmico baseado no config.json
-        },3100)
-        $timeout(() => S.setupTransitionIn(), 2000);
-
-        $timeout(() => S.setupTransitionOut(), 3250);
 
+        }, S.feedbackDelay);
       };
 
       

templates/page.html

@@ -61,6 +61,4 @@
   <audio id="wawawa" src="audio/wawawa.mp3"></audio>
   <audio id="startgame" src="audio/game-start.mp3"></audio>
 
-  <!-- Transition overlay básico -->
-  <div id="transition" transition-style="out:circle:bottom-right" style="pointer-events: none; opacity: 0;"></div>
 </ion-view>