Hasil silahkan mengisi identitas untuk melihat hasil TKA
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
background: #f4f6f8;
}
.container {
width: 420px;
margin: 40px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px #ccc;
}
input, button {
width: 100%;
padding: 10px;
margin-top: 10px;
}
table {
width: 100%;
margin-top: 15px;
border-collapse: collapse;
}
td {
border: 1px solid #ddd;
padding: 6px;
}
.lulus {
color: green;
font-weight: bold;
}
.tidak {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h3>Pengumuman Hasil TKA</h3>
<input type="text" id="nisn" placeholder="Masukkan NISN">
<input type="password" id="password" placeholder="Masukkan Password">
<button onclick="cek()">Lihat Hasil</button>
<div id="hasil"></div>
</div>
<script>
function cek() {
const nisn = document.getElementById("nisn").value;
const password = document.getElementById("password").value;
google.script.run.withSuccessHandler(function(res) {
if (!res.found) {
document.getElementById("hasil").innerHTML =
"<p style='color:red'>NISN atau Password salah</p>";
return;
}
document.getElementById("hasil").innerHTML = `
<table>
<tr><td>Nama</td><td>${res.nama}</td></tr>
<tr><td>TTL</td><td>${res.ttl}</td></tr>
<tr><td>Bahasa Indonesia</td><td>${res.indo}</td></tr>
<tr><td>Matematika</td><td>${res.mtk}</td></tr>
<tr><td>Bahasa Inggris</td><td>${res.ing}</td></tr>
<tr><td>${res.pil1}</td><td>${res.n_pil1}</td></tr>
<tr><td>${res.pil2}</td><td>${res.n_pil2}</td></tr>
<tr>
<td>Keterangan</td>
<td class="${res.ket === 'LULUS' ? 'lulus' : 'tidak'}">
${res.ket}
<a href="https://forms.gle/xykoAv1doj3QfCBi9">Verifikasi TKA</a>
</td>
</tr>
</table>
`;
}).getHasilTKA(nisn, password);
}
</script>
</body>
</html>