templates/index/metas_fluxos.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Painel de Fluxos Abertos</title>
  6.     <title>ArquivosGED</title>
  7.     <link rel="shortcut icon" href="{{ asset('./img/icon.png') }}">
  8.     <meta http-equiv="refresh" content="120">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  11.   </head>
  13.     <style>
  14.         .topo {
  15.             position: absolute;
  16.             top: 22px;
  17.             left: 0;
  18.             width: 100%;
  20.             display: flex;
  21.             align-items: flex-start; /* frase fica acima */
  23.             padding: 0 40px;
  24.             box-sizing: border-box;
  26.             pointer-events: none;
  27.         }
  29.         /* animação de piscar suave */
  30.         @keyframes piscarSuave {
  31.             0%   { opacity: 1; }
  32.             50%  { opacity: 0.35; }
  33.             100% { opacity: 1; }
  34.         }
  36.         /* aplica no logo */
  37.         .logo-area img {
  38.             max-height: 110px;
  39.             animation: piscarSuave 5s ease-in-out infinite;
  40.         }
  42.         /* aplica na frase */
  43.         .frase {
  44.             max-width: 150vw;
  45.             font-size: clamp(5rem, 5vw, 5rem);
  46.             font-weight: bold;
  47.             letter-spacing: 0.8px;
  48.             line-height: 1.25;
  49.             text-align: center;
  50.         }
  51.         /* FRASE */
  52.         .frase-area {
  53.             flex: 1;
  54.             margin-left: 26px;
  55.         }
  57.         .frase-centro {
  58.             position: absolute;
  59.             inset: 0; /* ocupa a tela inteira */
  60.             display: flex;
  61.             align-items: center;      /* vertical */
  62.             justify-content: center;  /* horizontal */
  63.         }
  66.         /* animação elegante */
  67.         @keyframes fadeSlide {
  68.             from {
  69.                 opacity: 0;
  70.                 transform: translateY(6px);
  71.             }
  72.             to {
  73.                 opacity: 1;
  74.                 transform: translateY(0);
  75.             }
  76.         }
  80.         thead i {
  81.             font-size: 4rem;
  82.             opacity: 0.85;
  83.             stroke-width: 1.5;
  84.         }
  85.         * {
  86.             box-sizing: border-box;
  87.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  88.             letter-spacing: 0.02em;
  89.             line-height: 1.6;
  91.         }
  93.         @keyframes gradient {
  94.             0% { background-position: 0% 50%; }
  95.             50% { background-position: 100% 50%; }
  96.             100% { background-position: 0% 50%; }
  97.         }
  99.         body {
  100.             margin: 0;
  101.             padding: 0;
  102.             height: 100vh;
  103.             background: #f1f1f1;
  104.             background-size: 400% 400%;
  105.             animation: gradient 6s ease infinite;
  106.             color: #245DAC;
  107.         }
  111.         /* TABELA */
  112.         table {
  113.             width: 100%;
  114.             border-collapse: collapse;
  115.             margin-top: 140px;
  116.         }
  117.         
  118.         /* Mantém cabeçalho fixo no topo */
  119.         thead th {
  120.             position: sticky;
  121.             top: 0;
  122.             background: #0e84ce38; /* mesma cor que já usa */
  123.             z-index: 2;
  124.         }
  126.         /* Mantém rodapé fixo no fim */
  127.         tfoot th {
  128.             position: sticky;
  129.             bottom: 0;
  130.             background: #0e84ce38; /* mesma cor que já usa */
  131.             z-index: 2;
  132.         }
  134.         /* Faz o corpo da tabela rolar */
  135.         tbody {
  136.             display: block;
  137.             max-height: 400px;   /* altura visível, ajuste conforme necessidade */
  138.             overflow-y: auto;
  139.         }
  141.         /* Garante alinhamento das colunas */
  142.         thead, tfoot, tbody tr {
  143.             display: table;
  144.             width: 100%;
  145.             table-layout: fixed;
  146.         }
  148.         th {
  149.             padding: 26px 30px;
  150.             font-size: 1.7rem;
  151.             text-align: left;
  152.             letter-spacing: 1px;
  153.             
  154.         }
  156.         td {
  157.             padding: 10px;
  158.             font-size: 1.5rem;
  159.             text-shadow: 1px 1px 2px rgb(238, 238, 238);
  161.             
  162.         }
  164.         .centro {
  165.             text-align: center;
  166.         }
  167.         tr{
  168.            border-bottom: #a7a7a7 solid 1px;  
  169.            font-weight: bold;
  170.            box-shadow: inset
  171.         }
  173.         /* STATUS LINHA INTEIRA */
  174.         tr.ok {
  175.             
  176.         }
  178.         tr.alerta {
  179.             background: rgb(255, 204, 0);
  180.         }
  182.         tr.vencido {
  183.             background: rgb(248, 45, 22);
  184.         }
  185.     </style>
  186. </head>
  188. <body>
  189.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  192. <div class="topo">
  193.     <div class="logo-area">
  194.         <img src="{{ asset('./img/logo_menu.png') }}" alt="Logo">
  195.     </div>
  197.     <div class="frase-centro">
  198.         <div id="frase" class="frase"></div>
  199.     </div>
  200. </div>
  202. <table>
  203.     <thead>
  204.         <tr> 
  205.             <th class="centro">
  206.                 <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-clock-fill" viewBox="0 0 16 16">
  207.                     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/>
  208.                     </svg>
  209.             </th>  
  210.             <th class="centro">
  211.              <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-stack-overflow" viewBox="0 0 16 16">
  212.                         <path d="M12.412 14.572V10.29h1.428V16H1v-5.71h1.428v4.282z"/>
  213.                         <path d="M3.857 13.145h7.137v-1.428H3.857zM10.254 0 9.108.852l4.26 5.727 1.146-.852zm-3.54 3.377 5.484 4.567.913-1.097L7.627 2.28l-.914 1.097zM4.922 6.55l6.47 3.013.603-1.294-6.47-3.013zm-.925 3.344 6.985 1.469.294-1.398-6.985-1.468z"/>
  214.                       </svg>
  215.             </th>   <!-- Fluxo -->
  216.             <th class="centro">
  217.               <svg xmlns="http://www.w3.org/2000/svg"  width="70" height="70" fill="currentColor" class="bi bi-cash-coin" viewBox="0 0 16 16">
  218.                   <path fill-rule="evenodd" d="M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/>
  219.                   <path d="M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1h-.003zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195l.054.012z"/>
  220.                   <path d="M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083c.058-.344.145-.678.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1H1z"/>
  221.                   <path d="M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 5.982 5.982 0 0 1 3.13-1.567z"/>
  222.                 </svg>
  223.             </th> 
  225.             <th class="centro">
  226.                  <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-image-fill" viewBox="0 0 16 16">
  227.                     <path d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>
  228.                 </svg>
  229.             </th>      
  230.             <th class="centro">
  231.                 <svg xmlns="http://www.w3.org/2000/svg"  width="70" height="70" fill="currentColor" class="bi bi-file-earmark-text-fill" viewBox="0 0 16 16">
  232.                     <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m.5 2.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z"/>
  233.                 </svg>
  234.             </th> <!-- Docs -->
  235.             <th class="centro">
  236.                 <svg xmlns="http://www.w3.org/2000/svg"  width="70" height="70" fill="currentColor" class="bi bi-box-fill" viewBox="0 0 16 16">
  237.                     <path fill-rule="evenodd" d="M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.004-.001.274-.11a.75.75 0 0 1 .558 0l.274.11.004.001zm-1.374.527L8 5.962 1.846 3.5 1 3.839v.4l6.5 2.6v7.922l.5.2.5-.2V6.84l6.5-2.6v-.4l-.846-.339Z"/>
  238.                     </svg>
  240.             </th>         <!-- Img -->
  241.                  <!-- Prazo -->
  244.         </tr>
  246.     </thead>
  248.     <tbody>
  249.     {% for item in data %}
  250.         {% set hoje = "now"|date("Y-m-d") %}
  251.         {% set prazo = item.prazo|date("Y-m-d") %}
  252.         {% set dias = (prazo|date("U") - hoje|date("U")) / 86400 %}
  254.         {% if dias < 0 %}
  255.             {% set status = 'vencido' %}
  256.         {% elseif dias <= 2 %}
  257.             {% set status = 'alerta' %}
  258.         {% else %}
  259.             {% set status = 'ok' %}
  260.         {% endif %}
  262.         <tr class="{{ status }}">
  263.             <td class="centro">{{ item.prazo|date("d/m/Y") }}</td>
  264.             <td class="centro">{{ item.fluxo }}</td>
  265.             <td class="centro">{{ item.cliente|upper }}</td>
  266.             <td class="centro">{{ item.imagens| number_format(0, ',', '.') }}</td>
  267.             <td class="centro">{{ item.documentos| number_format(0, ',', '.') }}</td>
  268.             <td class="centro">{{ item.caixas| number_format(0, ',', '.') }}</td>
  269.         </tr>
  272.     {% endfor %}
  273.     </tbody>
  274.     
  275.        <tfoot>
  276.     
  277.         <tr>
  278.             <th class="centro">{{ resumo.nomeMes}}</th>
  279.             <th class="centro">{{ resumo.fluxos| number_format(0, ',', '.') }}</th>
  280.             <th class="centro">{{ resumo.clientes| number_format(0, ',', '.') }}</th>
  281.             <th class="centro">{{ resumo.imagens| number_format(0, ',', '.') }}</th>
  282.             <th class="centro">{{ resumo.documentos| number_format(0, ',', '.') }}</th>
  283.             <th class="centro">{{ resumo.caixas| number_format(0, ',', '.') }}</th>
  284.             
  285.             
  286.         </tr>
  287.     </tfoot>
  288. </table>
  289. <script>
  290. document.addEventListener("DOMContentLoaded", function () {
  291.     const tbody = document.querySelector("tbody");
  293.     let velocidade = 100; // quanto menor, mais rápido
  294.     let direcao = 1;
  296.     setInterval(() => {
  297.         tbody.scrollTop += direcao;
  299.         // chegou no final
  300.         if (tbody.scrollTop + tbody.clientHeight >= tbody.scrollHeight) {
  301.             direcao = -1;
  302.         }
  304.         // voltou ao topo
  305.         if (tbody.scrollTop <= 0) {
  306.             direcao = 1;
  307.         }
  308.     }, velocidade);
  309. });
  310. </script>
  312. <script>
  314. fetch('frases.json')
  315.   .then(r => r.json())
  316.   .then(frases => {
  318.     const hoje = new Date().toISOString().split('T')[0];
  320.     let usadas = JSON.parse(localStorage.getItem('frasesUsadas')) || [];
  321.     let ultimaData = localStorage.getItem('dataFrase');
  323.     // só troca se for outro dia
  324.     if (ultimaData !== hoje) {
  326.       // reinicia se acabou
  327.       if (usadas.length >= frases.length) {
  328.         usadas = [];
  329.       }
  331.       // disponíveis
  332.       const disponiveis = frases.filter(f => !usadas.includes(f));
  334.       const fraseHoje =
  335.         disponiveis[Math.floor(Math.random() * disponiveis.length)];
  337.       usadas.push(fraseHoje);
  339.       localStorage.setItem('frasesUsadas', JSON.stringify(usadas));
  340.       localStorage.setItem('fraseHoje', fraseHoje);
  341.       localStorage.setItem('dataFrase', hoje);
  342.     }
  344.     document.getElementById('frase').innerText =
  345.       localStorage.getItem('fraseHoje');
  347.   });
  348. </script>
  349.  <script>
  350. function ajustarFonte() {
  351.   const frase = document.querySelector('.frase');
  352.   if (!frase) return;
  354.   let tamanho = 36; // px inicial
  355.   frase.style.fontSize = tamanho + 'px';
  357.   while (frase.scrollWidth > frase.clientWidth && tamanho > 14) {
  358.     tamanho--;
  359.     frase.style.fontSize = tamanho + 'px';
  360.   }
  361. }
  363. // chama ao carregar e quando trocar frase
  364. window.addEventListener('load', ajustarFonte);
  365. window.addEventListener('resize', ajustarFonte);
  366. </script>
  367. </body>
  368. </html>