inicio do dia 06-04-26

2026-04-06 10:05:22 +00:00
parent 0687e194ad
commit 7b9fb34462
6 changed files with 211 additions and 163 deletions
--- a/css/custom.css
+++ b/css/custom.css
@@ -86,7 +86,7 @@ body, .pane, .view {
 }

 .logo-top-small {
-max-width: 74%;
+    max-width: 74%;
    position: fixed;
    top: 0;
    left: 50%;
@@ -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;
-  border-right: 0.1rem solid rgba(0,0,0,0.1);
+  color: var(--cor-texto-secundario); /* Fonte verde */
+  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;
-    font-weight: 500;
+    color: var(--cor-texto-secundario); /* Fonte verde */
+    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);
-    height: 100vh;
+    /* Força o container em 9:16 baseado na altura total do monitor */
+    height: 100vh !important;
+    width: 56.25vh !important; /* (1080 / 1920 * 100) = 56.25vh */
+    
    position: fixed !important;
-    top: 50vh !important;
-    left: 0;
+    top: 50% !important;
+    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;
--- a/dados/config.json
+++ b/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",
-      "tituloCor": "#A1C633",
-      "btnIniciarFundo": "#A1C633",
-      "btnIniciarTexto": "#FFFFFF",
-      "corAcerto": "#20386f",
+      "textoSecundario": "#537813",
+      "tituloCor": "#FFFFFF",
+      "btnIniciarFundo": "#FFFFFF",
+      "btnIniciarTexto": "#537813",
+      "corAcerto": "#537813",
      "corErro": "#702e21",
      "alternativas": {
-        "A": "#cfd6e2",
-        "B": "#cfd6e2",
-        "C": "#cfd6e2",
-        "D": "#cfd6e2"
+        "A": "#FFFFFF",
+        "B": "#FFFFFF",
+        "C": "#FFFFFF",
+        "D": "#FFFFFF"
      }
    }
  }
--- a/img/ius_logo_branco.jpg
+++ b/img/ius_logo_branco.jpg
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="play" ng-app="app">
-  <head>
+
+<head>
  <script>
    S = {}
  </script>
@@ -24,7 +25,7 @@
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
  <!-- jsDelivr  -->
-<!-- <script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
+  <!-- <script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>

 <script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script> -->

@@ -35,31 +36,39 @@
  <link href="css/custom.css" rel="stylesheet">
  <link rel="stylesheet" href="lib/ionic/css/transition-style.css">
  <style type="text/css">
-      .platform-ios .manual-ios-statusbar-padding{
-        padding-top:20px;
+    .platform-ios .manual-ios-statusbar-padding {
+      padding-top: 20px;
    }
-      .manual-remove-top-padding{
-        padding-top:0px; 
+
+    .manual-remove-top-padding {
+      padding-top: 0px;
    }
-      .manual-remove-top-padding .scroll{
-        padding-top:0px !important;
+
+    .manual-remove-top-padding .scroll {
+      padding-top: 0px !important;
    }
-      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,
+    .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 {
-        border-radius:0px;
-        border-left:0px;
+
+    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{
+
+    .show-list-numbers-and-dots ul {
      list-style-type: disc;
-        padding-left:40px;
+      padding-left: 40px;
    }
-      .show-list-numbers-and-dots ol{
+
+    .show-list-numbers-and-dots ol {
      list-style-type: decimal;
-        padding-left:40px;
+      padding-left: 40px;
    }
  </style>

@@ -74,8 +83,8 @@
    <script src="lib/ionicuirouter/ionicUIRouter.js"></script>
    -->

-  </head>
-  <style>
+</head>
+<style>
  /* Estilos para o overlay de transição */
  #transition {
    position: fixed;
@@ -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;
-      transition: opacity 0.5s ease-in-out;
+    clip-path: circle(125%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
  }

-    #transition.active {
-      opacity: 1;
+  #transition img {
+    max-width: 50%;
+    height: auto;
  }
-  </style>
-  <body animation="slide-left-right-ios7">
-    <div class="custom-bg-pattern" ></div>
+</style>
+
+<body animation="slide-left-right-ios7">
+  <div id="transition" transition-style=""> 
+    <img src="img/ius_logo_branco.jpg">
+  </div>
+
  <div>
    <div>
      <ion-nav-bar class="bar-stable">
@@ -103,7 +119,8 @@
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </div>
-</div>
+  </div>
+
+</body>

-  </body>
 </html>
--- a/js/controllers.js
+++ b/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);
-        $timeout(()=>{
-          S.checarAlturaResposta()
-        },3100)
-        $timeout(() => S.setupTransitionIn(), 2000);
-
-        $timeout(() => S.setupTransitionOut(), 3250);
+            // Retira a transição
+            S.setupTransitionOut();
+          }, S.transitionDuration); // Tempo dinâmico baseado no config.json

+        }, S.feedbackDelay);
      };

      
--- a/templates/page.html
+++ b/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>