https://script.google.com/macros/s/AKfycbyjob6DnAjCTEYYFS0cQFcSMfl-Gn0EOLX7BTf9TCL9gE3pk2nRxnQTUN9TH0rbViCL4w/exec

https://script.google.com/home/projects/17aRKiNhDk9t0qUdCKosBWvc4z-W3lXbxvWukIkunv23T9Y8COCGOpiGL/edit

Código.gs

function doGet() {

  var form = HtmlService.createTemplateFromFile("Principal");

  return form.evaluate()

    .setTitle("Consulta de Notas")

    .setSandboxMode(HtmlService.SandboxMode.IFRAME);

}

function Chamar(Arquivo){

  return HtmlService

    .createHtmlOutputFromFile(Arquivo)

    .getContent();

}

Principal.html

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8"/>

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>Consulta de Notas</title>

  <style>

    :root{

      --bg1:#004d7a;

      --bg2:#008793;

      --bg3:#00bf72;

      --card-bg:rgba(255,255,255,0.12);

      --glass:rgba(255,255,255,0.15);

    }

    html,body{height:100%;margin:0;font-family:"Segoe UI", Roboto, Arial, sans-serif;}

    body{

      margin:0;

      color:#fff;

      background:#ffffff;

    }

    .container{

      width:100%;

      min-height:100vh;

      box-sizing:border-box;

      background:linear-gradient(

        135deg,

        #004d7a,

        #008793,

        #00bf72

      );

      padding:20px;

    }

    .header{

      display:flex;

      align-items:center;

      gap:12px;

      margin-bottom:12px;

    }

    .brand {

      width:56px;

      height:56px;

      border-radius:8px;

      background:rgba(255,255,255,0.12);

      display:flex;

      align-items:center;

      justify-content:center;

      font-weight:bold;

      font-size:18px;

      overflow:hidden;

    }

    h1{font-size:1.2rem;margin:0;}

    .form-row{

      display:flex;

      gap:10px;

      margin-top:12px;

      align-items:center;

    }

    input[type="text"]{

      flex:1;

      padding:12px 14px;

      border-radius:10px;

      border:none;

      font-size:1rem;

      outline:none;

      background:#ffffffdd;

      color:#111;

    }

    .btn {

      padding:11px 14px;

      border-radius:10px;

      border:none;

      font-weight:700;

      cursor:pointer;

      min-width:120px;

    }

    .btn-primary{background:#00bf72;color:#fff; }

    .btn-secondary{background:#f5f5f5;color:#111; }

    .resultado{

      margin-top:18px;

    }

    .disciplina{display:flex;justify-content:space-between;gap:10px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,0.06); }

    .disciplina:last-child{ border-bottom: none; }

    .smallnote{font-size:0.85rem;opacity:0.9; margin-top:8px; }

    /* responsivo */

    @media (max-width:520px){

      .header{ gap:8px; }

      .brand{width:44px; height:44px;font-size:16px;}

      h1{ font-size:1rem; }

      .form-row{flex-direction:column;align-items:stretch;}

      .btn{width:100%; min-width:unset;}

    }

    .btn-link {

      background:#ffd700;/* Fundo amarelo para destacar */

      border:1px solid #e6c200;/* Borda para contraste */

      color:#333;/* Texto escuro para legibilidade */

      cursor:pointer;

      font-size:0.9rem;/* Proporcional à fonte do texto circundante */

      padding:4px 8px;/* Tamanho ajustado para retangular e proporcional */

      border-radius:4px;/* Cantos ligeiramente arredondados */

      margin-left:6px;

      height:24px;/* Altura fixa para consistência */

      display:flex;

      align-items:center;

      justify-content:center;

    }

    /* Container para permitir scroll lateral na tabela em celulares */

    .table-responsive {

      width: 100%;

      overflow-x: auto;

      -webkit-overflow-scrolling: touch;

      margin-top: 10px;

      border-radius: 8px;

    }

    /* Ajustes na tabela para não esmagar o texto */

    table{

      width:100%;

      border-collapse:collapse;

      min-width:500px;

      background:#ffffff;

      color:#111;

      font-size:13px;

    }

    td{

      padding:4px 6px;

      border:none!important;

      vertical-align:middle;

      white-space:nowrap;

    }

    /* Linhas suaves */

    tr:nth-child(even){

      background:#f7f7f7;

    }

    /* Imagem da planilha */

    .img-planilha{

      max-width:55px;

      max-height:55px;

      border-radius:4px;

      object-fit:cover;

    }

    /* Botão amarelo */

    .btn-tabela{

      background:#ffd400;

      color:#111!important;

      text-decoration:none!important;

      padding:3px 8px;

      border-radius:3px;

      font-weight:bold;

      display:inline-block;

      font-size:11px;

      border:1px solid #c7a800;

    }

    /* Estilo para os links dentro da tabela */

    .btn-tabela {

      background: #ffd700;

      color: #111 !important;

      text-decoration: none !important;

      padding: 4px 8px;

      border-radius: 4px;

      font-weight: bold;

      display: inline-block;

      font-size: 0.8rem;

    }

    .barra-container{

      width:100px;

      height:14px;

      background:#e0e0e0;

      border-radius:20px;

      overflow:hidden;

    }

    .barra-nota{

      height:100%;

      border-radius:20px;

      box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);

      transition:0.3s;

    }

    .grupo{

      cursor:pointer;

      font-weight:bold;

      background:#dff5ff!important;

    }

    .item{

      display:none;

    }

    .seta{

      color:#1e88e5;

      font-weight:bold;

      margin-right:8px;

    }

    .bb-merge{

      white-space:nowrap!important;

      position:absolute;

      left:6px;

      top:50%;

      transform:translateY(-50%);

      z-index:999;

      pointer-events:none;

    }

    .bb-merge-cell{

      position:relative;

      overflow:visible!important;

      width:1px;

    }

    .bb-tooltip{

      position:relative;

      cursor:help;

      color:#1565c0;

      border-bottom:1px dotted #1565c0;

    }

    .bb-tooltip:hover::after{

      content:attr(data-tooltip);

      position:absolute;

      left:0;

      top:120%;

      background:#222;

      color:#fff;

      padding:6px 10px;

      border-radius:6px;

      white-space:nowrap;

      z-index:9999;

      font-size:12px;

    }

    .bb-alert{

      background:#fff3cd;

      color:#856404;

      border-left:5px solid #ffc107;

      padding:10px;

      margin:5px 0;

      border-radius:4px;

      font-weight:bold;

      animation:pulsarAlerta 1.2s infinite;

    }

    @keyframes pulsarAlerta{

      0%{

        box-shadow:0 0 0 0 rgba(255,193,7,0.8);

      }

      70%{

        box-shadow:0 0 15px 8px rgba(255,193,7,0);

      }

      100%{

        box-shadow:0 0 0 0 rgba(255,193,7,0);

      }

    }

    @media (max-width:768px){

      .container{

        padding:10px;

      }

      table{

        font-size:11px;

      }

      td{

        padding:3px;

      }

      .img-planilha{

        max-width:40px;

        max-height:40px;

      }

      .barra-container{

        width:70px;

      }

      .btn-tabela{

        font-size:10px;

        padding:2px 5px;

      }

    }

    /* VISUALIZADOR DE IMAGEM */

    .lightbox{

      display:none;

      position:fixed;

      inset:0;

      background:rgba(0,0,0,0.85);

      backdrop-filter: blur(4px);

      z-index:99999;

      justify-content:center;

      align-items:center;

      animation:fadeIn .25s;

    }

    .imagem-grande{

      max-width:90%;

      max-height:90%;

      border-radius:8px;

      box-shadow:0 0 20px rgba(255,255,255,0.3);

      cursor:zoom-out;

      animation:zoomIn .25s;

    }

    @keyframes zoomIn{

      from{

        transform:scale(.85);

        opacity:0;

      }

      to{

        transform:scale(1);

        opacity:1;

      }

    }

    .fechar-imagem{

      position:absolute;

      top:20px;

      right:25px;

      color:#fff;

      font-size:32px;

      font-weight:bold;

      cursor:pointer;

      background:rgba(0,0,0,0.5);

      width:45px;

      height:45px;

      border-radius:50%;

      display:flex;

      align-items:center;

      justify-content:center;

      z-index:100000;

    }

    .fechar-imagem:hover{

      background:#e53935;

    }

    .img-planilha{

      cursor:pointer;

      transition:.25s;

    }

    .img-planilha:hover{

      transform:scale(1.08);

      box-shadow:0 0 10px rgba(30,136,229,.5);

    }

    @keyframes fadeIn{

      from{

        opacity:0;

      }

      to{

        opacity:1;

      }

    }

  </style>

</head>

<body>

  <div class="container">

    <div class="header">

      <div class="brand"><img src="https://i.imgur.com/t15D4yL.png" alt="Logo ESC" style="width:100%; height:100%; object-fit:contain; border-radius:8px;"></div>

      <div>

        <h1>Sinaqi</h1>

        <div class="smallnote">Acompanhe seus estudos no Mapa da Jornada.</div>

      </div>

    </div>

    <div class="form-row">

      <input id="matricula" type="text" placeholder="Digite a matrícula" autocomplete="off" />

      <button id="btnPesquisar" class="btn btn-primary">PESQUISAR</button>

      <button id="btnLimpar" class="btn btn-secondary">LIMPAR</button>

    </div>

    <div id="mensagem" style="margin-top:12px; color:#ffdddd;"></div>

    <div id="resultado" class="resultado" style="display:none;"></div>

  <script>

const btnPesquisar = document.getElementById('btnPesquisar');

const btnLimpar = document.getElementById('btnLimpar');

const mensagem = document.getElementById('mensagem');

const resultado = document.getElementById('resultado');

btnPesquisar.addEventListener('click',function(){

  mensagem.textContent = "";

  resultado.style.display = "none";

  const matricula = document.getElementById('matricula').value.trim().replace(/\s/g, "");

  if(!matricula){

    mensagem.textContent = "Por favor, digite a matrícula.";

    return;

  }

  google.script.run.withSuccessHandler(function(res){

    if(!res || res === "Não encontrado!"){

      mensagem.textContent = "Matrícula não encontrada!";

      return;

    }

    // 🔥 Adicionamos a div 'table-responsive' em volta da tabela

    let html = "<div class='table-responsive'><table>";

    let grupoAtual = -1;

res.forEach((linha,i)=>{

  if(linha.tipo === "G"){

  grupoAtual = i;

  html += `

  <tr

    class="grupo"

    onclick="toggleGrupo(${grupoAtual}, this)">

`;

}else if(linha.tipo === "I"){

  html += `

    <tr

      class="item grupo-${grupoAtual}">

  `;

}else{

  html += `

    <tr>

  `;

}

  linha.dados.forEach((celula,j)=>{

    const temMerge =

  /\[merge\]/i.test(

    celula.texto || ""

  );

html += temMerge

  ? "<td class='bb-merge-cell'>"

  : "<td>";

    if(j === 0 && linha.tipo === "G"){

      html += `

        <span class="seta">

          ▶

        </span>

      `;

    }

if(celula.link){

  // VERIFICA SE É IMAGEM

  const isImage =

    celula.imagem ||

    celula.link.match(/\.(jpeg|jpg|png|gif|webp)$/i) ||

    celula.link.includes("imgur.com") ||

    celula.link.includes("googleusercontent");

  if(isImage){

    html += `

  <img

    src="${celula.link}"

    class="img-planilha"

    onclick="abrirImagem('${celula.link}')"

  >

`;

  }else{

    html += `

      <a href="${celula.link}"

         target="_blank"

         class="btn-tabela">

         ${celula.texto || "CLIQUE AQUI"}

      </a>

    `;

  }

}else{

  const valor = parseFloat(

    String(celula.texto).replace(",",".")

  );

  /*

    E = índice 3

    (porque agora a coluna A foi removida do HTML)

  */

  if(j === 3 && !isNaN(valor)){

    const porcentagem = valor * 10;

    let corBarra = "";

    if(valor < 5){

      corBarra = "#e53935";

    }else if(valor < 8){

      corBarra = "#f9a825";

    }else{

      corBarra = "#1e88e5";

    }

    html += `

      <div class="barra-container">

        <div

          class="barra-nota"

          style="

            width:${porcentagem}%;

            background:${corBarra};

          ">

        </div>

      </div>

    `;

  }else{

  html += interpretarBBCode(

    celula.texto || ""

  );

}

}

    html += "</td>";

  });

  html += "</tr>";

});

    html += "</table></div>"; // Fechamos a div e a tabela

    resultado.innerHTML = html;

    resultado.style.display = "block";

}).PesquisarNotas(matricula);

}); //🔴 FECHAMENTO CORRETO

btnLimpar.addEventListener('click',function(){

  document.getElementById('matricula').value = "";

  mensagem.textContent = "";

  resultado.style.display = "none";

  resultado.innerHTML = ""; // 🔴 limpa também o conteúdo

});

</script>

<script>

function interpretarBBCode(texto){

  if(!texto){

    return"";

  }

  // Negrito

  texto = texto.replace(

    /\[b\](.*?)\[\/b\]/gis,

    "<strong>$1</strong>"

  );

  // Itálico

  texto = texto.replace(

    /\[i\](.*?)\[\/i\]/gis,

    "<em>$1</em>"

  );

  // Sublinhado

  texto = texto.replace(

    /\[u\](.*?)\[\/u\]/gis,

    "<span style='text-decoration:underline'>$1</span>"

  );

  // Tamanho da fonte

  texto = texto.replace(

    /\[fs=(\d+)\](.*?)\[\/fs\]/gis,

    "<span style='font-size:$1px'>$2</span>"

  );

  // Cor da fonte

  texto = texto.replace(

    /\[color=(.*?)\](.*?)\[\/color\]/gis,

    "<span style='color:$1'>$2</span>"

  );

  // Cor de fundo

  texto = texto.replace(

    /\[bg=(.*?)\](.*?)\[\/bg\]/gis,

    "<span style='background:$1;padding:2px 4px;border-radius:3px'>$2</span>"

  );

  // Centralizar

  texto = texto.replace(

    /\[center\](.*?)\[\/center\]/gis,

    "<div style='text-align:center'>$1</div>"

  );

  // Direita

  texto = texto.replace(

    /\[right\](.*?)\[\/right\]/gis,

    "<div style='text-align:right'>$1</div>"

  );

// Marca-texto (realce amarelo)

texto = texto.replace(

  /\[mark\](.*?)\[\/mark\]/gis,

  "<mark>$1</mark>"

);

// Texto pequeno

texto = texto.replace(

  /\[small\](.*?)\[\/small\]/gis,

  "<small>$1</small>"

);

// Texto sobrescrito (ex.: X²)

texto = texto.replace(

  /\[sup\](.*?)\[\/sup\]/gis,

  "^$1"

);

// Texto subscrito (ex.: H₂O)

texto = texto.replace(

  /\[sub\](.*?)\[\/sub\]/gis,

  "_$1"

);

// Mesclar visualmente (não quebra linha e não aumenta coluna)

texto = texto.replace(

  /\[merge\](.*?)\[\/merge\]/gis,

  "<span class='bb-merge'>$1</span>"

);

// Tooltip

texto = texto.replace(

/\[tooltip=(.*?)\](.*?)\[\/tooltip\]/gis,

"<span class='bb-tooltip' data-tooltip='$1'>$2</span>"

);

// Alerta

texto = texto.replace(

  /\[alert\](.*?)\[\/alert\]/gis,

  "<div class='bb-alert'>$1</div>"

);

// Quebra de linha

  texto = texto.replace(

    /\[br\]/gi,

    "<br>"

  );

  return texto;

}

function toggleGrupo(id, elemento){

  const linhas =

    document.querySelectorAll(

      ".grupo-" + id

    );

  let aberto = false;

  linhas.forEach(linha => {

    if(

      linha.style.display === "table-row"

    ){

      linha.style.display = "none";

    }else{

      linha.style.display = "table-row";

      aberto = true;

    }

  });

  const seta =

    elemento.querySelector(".seta");

  if(seta){

    seta.textContent = aberto ? "▼" : "▶";

  }

}

function abrirImagem(src){

  document.getElementById(

    "imagemGrande"

  ).src = src;

  document.getElementById(

    "lightbox"

  ).style.display = "flex";

}

function fecharImagem(){

  document.getElementById(

    "lightbox"

  ).style.display = "none";

}

document.addEventListener(

  "keydown",

  function(e){

    if(

      e.key === "Escape"

    ){

      fecharImagem();

    }

  }

);

</script>

<!-- VISUALIZADOR DE IMAGEM -->

<div id="lightbox" class="lightbox" onclick="fecharImagem()">

  <span

    class="fechar-imagem"

    onclick="fecharImagem()"

  >

    ✖

  </span>

  <img

    id="imagemGrande"

    class="imagem-grande"

    src=""

    onclick="event.stopPropagation()"

  >

</div>

</body>

</html>