No google planilhas ABA 15: https://docs.google.com/spreadsheets/d/1ktIfJBBAqgMpXq5YNOFjMIlufGwJOqebQWUvYJgYD3Q/edit?gid=1505666915#gid=1505666915

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

Pasta: estudos/computação programação/testes/Synapi/Boletim dashboard responsivo link

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>

<head>

<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{

display:flex;

justify-content:center; /* Mantém o alinhamento horizontal central */

background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));

color:#fff;

padding:20px;

box-sizing:border-box;

}

.container{

width:100%;

max-width:720px;

background:var(--card-bg);

border-radius:14px;

padding:18px;

box-shadow: 0 8px 30px rgba(0,0,0,0.35);

backdrop-filter: blur(6px);

}

.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: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;

background:var(--glass);

border-radius:10px;

padding:14px;

color:#fff;

}

.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;

}

</style>

</head>

<body>

<div>

<h1>Consulta de Notas por Matrícula</h1>

<div class="smallnote">Digite a matrícula (ex.: 132345 ou 152345) — o sistema escolherá a aba conforme a matrícula.</div>

</div>

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

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

</div>

<div class="disciplina"><div>Biologia</div><div><span id="bio13"></span><button id="linkBio" class="btn-link" style="display:none;">Liberado</button></div></div>

<div class="disciplina"><div>Química</div><div><span id="qui13"></span><button id="linkQui" class="btn-link" style="display:none;">Liberado</button></div></div>

<div class="disciplina"><div>Física</div><div><span id="fis13"></span><button id="linkFis" class="btn-link" style="display:none;">Liberado</button></div></div>

<div class="disciplina"><div>Matemática</div><div><span id="mat13"></span><button id="linkMat" class="btn-link" style="display:none;">Liberado</button></div></div>

<div class="disciplina"><div>Português</div><div><span id="por13"></span><button id="linkPor" class="btn-link" style="display:none;">Liberado</button></div></div>

</div>

<div class="disciplina"><div>Geografia</div><div><span id="geo15"></span><button id="linkGeo" class="btn-link" style="display:none;">Liberado</button></div></div>

<div class="disciplina"><div>História</div><div><span id="his15"></span><button id="linkHis" class="btn-link" style="display:none;">Liberado</button></div></div>

<div class="disciplina"><div>Sociologia</div><div><span id="soc15"></span><button id="linkSoc" class="btn-link" style="display:none;">Liberado</button></div></div>

<div class="disciplina"><div>Filosofia</div><div><span id="fil15"></span><button id="linkFil" class="btn-link" style="display:none;">Liberado</button></div></div>

</div>

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();

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;

}

// Notas

document.getElementById('bio13').textContent = res.Biologia || "";

document.getElementById('qui13').textContent = res.Quimica || "";

document.getElementById('fis13').textContent = res.Fisica || "";

document.getElementById('mat13').textContent = res.Matematica || "";

document.getElementById('por13').textContent = res.Portugues || "";

document.getElementById('geo15').textContent = res.Geografia || "";

document.getElementById('his15').textContent = res.Historia || "";

document.getElementById('soc15').textContent = res.Sociologia || "";

document.getElementById('fil15').textContent = res.Filosofia || "";

// Links (exibidos apenas se a nota correspondente não estiver vazia)

const linkMappings = [

{id: 'linkBio', url: res.LinkBio, nota: res.Biologia},

{id: 'linkQui', url: res.LinkQui, nota: res.Quimica},

{id: 'linkFis', url: res.LinkFis, nota: res.Fisica},

{id: 'linkMat', url: res.LinkMat, nota: res.Matematica},

{id: 'linkPor', url: res.LinkPor, nota: res.Portugues},

{id: 'linkGeo', url: res.LinkGeo, nota: res.Geografia},

{id: 'linkHis', url: res.LinkHis, nota: res.Historia},

{id: 'linkSoc', url: res.LinkSoc, nota: res.Sociologia},

{id: 'linkFil', url: res.LinkFil, nota: res.Filosofia}

];

linkMappings.forEach(function(mapping){

const btn = document.getElementById(mapping.id);

if(mapping.url && mapping.nota && mapping.nota.toString().trim() !== ""){ // Verifica se há URL e nota não vazia

btn.style.display = "inline";

btn.onclick = function(){ window.open(mapping.url, '_blank'); };

} else {

btn.style.display = "none";

}

});

resultado.style.display = "block";

}).PesquisarNotas(matricula);

});

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

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

mensagem.textContent = "";

resultado.style.display = "none";

['bio13','qui13','fis13','mat13','por13','geo15','his15','soc15','fil15'].forEach(id => {

const el = document.getElementById(id);

if(el) el.textContent = "";

});

['linkBio','linkQui','linkFis','linkMat','linkPor','linkGeo','linkHis','linkSoc','linkFil'].forEach(id => {

const btn = document.getElementById(id);

if(btn) btn.style.display = "none";

});

</script>

</body>

</html>

Macro.gs

var url = "https://docs.google.com/spreadsheets/d/1ktIfJBBAqgMpXq5YNOFjMIlufGwJOqebQWUvYJgYD3Q/edit?usp=sharing";

function PesquisarNotas(matricula) {

try {

var planilha = SpreadsheetApp.openByUrl(url);

var aba = "";

if (matricula.startsWith("13")) {

aba = "Página13";

} else if (matricula.startsWith("15")) {

aba = "Página15";

} else {

return "Não encontrado!";

}

var guia = planilha.getSheetByName(aba);

var notas = {

Biologia: guia.getRange("B18").getValue(),

Quimica: guia.getRange("B19").getValue(),

Fisica: guia.getRange("B20").getValue(),

Matematica: guia.getRange("B21").getValue(),

Portugues: guia.getRange("B22").getValue(),

Geografia: guia.getRange("B23").getValue(),

Historia: guia.getRange("B24").getValue(),

Sociologia: guia.getRange("B25").getValue(),

Filosofia: guia.getRange("B26").getValue(),

// Links para cada disciplina

LinkBio: guia.getRange("E18").getRichTextValue()?.getLinkUrl(),

LinkQui: guia.getRange("E19").getRichTextValue()?.getLinkUrl(),

LinkFis: guia.getRange("E20").getRichTextValue()?.getLinkUrl(),

LinkMat: guia.getRange("E21").getRichTextValue()?.getLinkUrl(),

LinkPor: guia.getRange("E22").getRichTextValue()?.getLinkUrl(),

LinkGeo: guia.getRange("E23").getRichTextValue()?.getLinkUrl(),

LinkHis: guia.getRange("E24").getRichTextValue()?.getLinkUrl(),

LinkSoc: guia.getRange("E25").getRichTextValue()?.getLinkUrl(),

LinkFil: guia.getRange("E26").getRichTextValue()?.getLinkUrl() };

return notas;

} catch (e) {

return "Não encontrado!";

}