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;
}
h1{
font-size:clamp(0.8rem, 2.5vw, 1.8rem);
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:clamp(0.8rem, 1.8vw, 1.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; }
.btn{
font-size:clamp(0.8rem, 1.5vw, 1rem);
}
.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:clamp(0.8rem, 1.5vw, 0.95rem);
opacity:0.9;
margin-top:8px;
}
/* responsivo */
@media (max-width:520px){
.header{
gap:8px;
}
.brand{
width:44px;
height:44px;
font-size:clamp(8px, 2vw, 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: clamp(8px, 1.2vw, 13px);
}
td{
padding:4px 6px;
border:none !important;
vertical-align:middle;
white-space:nowrap;
font-size: clamp(8px, 1vw, 13px);
}
/* 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: clamp(8px, 1vw, 13px);
}
.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;
}
td{
padding:3px;
}
.img-planilha{
max-width:40px;
max-height:40px;
}
.barra-container{
width:70px;
}
}
/* ==========================
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">ESC</div>
<div>
<h1>Consulta de Notas por Matrícula</h1>
<div class="smallnote">Digite a matrícula (ex.: 222345 ou 152345) — o sistema escolherá a aba conforme a matrícula.</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,
"<sup>$1</sup>"
);
// Texto subscrito (ex.: H₂O)
texto = texto.replace(
/\[sub\](.*?)\[\/sub\]/gis,
"<sub>$1</sub>"
);
// 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>