index.html

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pengumuman Kelulusan SMK</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<style>
/* general styling */
:root {
--smaller: .75;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
margin: 0;
}
body {
margin: 70px 0;
align-items: center;
background-color: green;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
input{padding:5px;margin:5px;width:80%}
.container {
color: white;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1em;
list-style-type: none;
padding: 0.5em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 3.5rem;
}
@media all and (max-width: 768px) {
h1 {font-size: calc(1.7rem * var(--smaller));}
li {font-size: calc(1.3rem * var(--smaller));}
li span {font-size: calc(4rem * var(--smaller));}
#borderHitungMundur{width:90%}
#borderHasil{width:90%}
}
.tombol{
color: black;
padding: 0px 10px;
font-size: 1.2em;
background: #FFB43D;
cursor: pointer;
width: fit-content;
margin: 5px auto;
}
#loading{
width:100%;
height:100%;
z-index:999;
background:black;
opacity:0.5;
top:0px;
position:fixed;
text-align: center;
color:white;
display:none;
}
.loadingText{
position:relative;
top:70%;
}
.sekolah{
color:#FFB43D;
}
#cpr a{
color:white;
text-decoration: none;
font-weight:bold;
}
</style>
</head>
<body>
<div id="loading">
<span class="loadingText"><img
src="https://i.gifer.com/origin/34/34338d26023e5515f6cc8969aa027bca_w200.gif"
height="50px"/><br/>Loading Data ... </span>
</div>
<div class="container">
<img
src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Kementerian_Agama_new_logo
.png" height="100px"></img>
<div id="hitungmundur" style="display:none">

<h1 id="judul1"></h1>
<h2 class="sekolah"></h2>
<div id="borderHitungMundur" style="margin:20px auto;padding:10px;max-
width:440px;border:1px solid white;border-radius:5px;">
<ul>
<li><span id="hari"></span>hari</li>
<li><span id="jam"></span>jam</li>
<li><span id="menit"></span>menit</li>
<li><span id="detik"></span>detik</li>
</ul>
</div>
</div>
<div id="konten" style="display:none;">

<div id="login" style="margin:10px auto;padding:20px 5px;max-
width:440px;border:1px solid white;border-radius:5px;">
<h3 id="peringatan" style="color:yellow"></h3>
<div class="row">
<i class="fas fa-user"></i>
<input onclick="hapusPeringatan()" id="nis" type="text"
placeholder="NISN" required>
</div>
<div class="row">
<i class="fas fa-key"></i>
<input onclick="hapusPeringatan()" id="pass"
type="password" placeholder="Password" required>
</div>
<div class="tombol" onclick="login()">LOGIN</div>
</div>
</div>
<div id="pengumuman" style="display:none;">

<div id="borderHasil" style="margin:20px auto;padding:20px 10px;max-
width:440px;border:1px solid white;border-radius:5px;background:white;color:black">
<div id="tampilFoto"></div>
<h2>Nama: <span id="tampilNama"></span></h2>
<h3>NISN: <span id="tampilNis"></span></h3>
<h3>Kelas: <span id="tampilKelas"></span></h3>
<h2>Hasil Kelulusan: <span id="tampilLulus"></span></h2>
<h3><span id="tampilLink"></span></h3>
<div class="tombol" onclick="awal();">LOGOUT</div>
</div>
</div>
<div id="cpr" style="display:none"></div>
</div>
<script>
// SETTING (SILAKAN EDIT)
var namaSekolah = "SMK INDONESIA MERDEKA";
var judul1 = "MENUJU PENGUMUMAN KELULUSAN";
var judul2 = "PENGUMUMAN KELULUSAN";
var judul3 = "HASIL PENGUMUMAN KELULUSAN";
var waktuAkhir = new Date("May 24, 2023 20:36:00").getTime();
// Mulai baris ini ke bawah, jangan diedit

document.getElementsByClassName("sekolah")[0].innerHTML = namaSekolah;
document.getElementById("judul1").innerHTML = judul1;
document.getElementById("cpr").innerHTML =
window.atob("djIuMCCpIDIwMjMgfCBTdWJzY3JpYmUgQ2hhbm5lbCA8Yj5UdWdhcyBFbnRlbmc8L2I+IH
lhIQ==")
document.getElementById("nis").value = "";
document.getElementById("pass").value = "";
// cek sudah login atau belum

if(bacaCookie('status')=="login" && bacaCookie("us") != ""){
document.getElementById("loading").style.display="block";
google.script.run.withSuccessHandler(hasilLogin).login(bacaCookie('us'),
bacaCookie('pw'));
}else{
//document.getElementById("peringatan").innerHTML = "Silakan Login dengan NIS dan
Password";
//document.getElementById("konten").style.display="block";
//document.getElementById("cpr").style.display="block";
// Fungsi menghitung mundur
var x = setInterval(function() {
// Catat waktu sekarang

var sekarang = new Date().getTime();
// Mencari selisih
var selisih = waktuAkhir - sekarang;
// Time calculations for days, hours, minutes and seconds

var hari = Math.floor(selisih / (1000 * 60 * 60 * 24));
var jam = Math.floor((selisih % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var menit = Math.floor((selisih % (1000 * 60 * 60)) / (1000 * 60));
var detik = Math.floor((selisih % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"

document.getElementById("hari").innerHTML = hari;
document.getElementById("jam").innerHTML = jam;
document.getElementById("menit").innerHTML = menit;
document.getElementById("detik").innerHTML = detik;
// If the count down is over, write some text

if (selisih < 0) {
clearInterval(x);
document.getElementById("hitungmundur").style.display="none";
document.getElementById("peringatan").innerHTML = "Silakan Login dengan NIS
dan Password";
document.getElementById("konten").style.display="block";
document.getElementById("cpr").style.display="block";
}else{
document.getElementById("hitungmundur").style.display="block";
document.getElementById("konten").style.display="none";
}
}, 1000);
}
var expiration = "09/09/2023 23:59:59";

function tulisCookie(namaCookie, isiCookie){
expiration = new Date(expiration).toUTCString();
document.cookie =
namaCookie+"="+isiCookie+";path=/;expires="+expiration+";SameSite=None;secure";
}
function bacaCookie(namaCookie) {
var name = namaCookie + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function login(){
document.getElementById("loading").style.display="block";
nis = document.getElementById("nis").value;
pass = document.getElementById("pass").value;
if(nis == "" || pass == ""){
document.getElementById("loading").style.display="none";
document.getElementById("peringatan").innerHTML = "TIDAK BOLEH KOSONG";
}else{
//alert("NIS: "+nis+" Pass: "+pass)
google.script.run.withSuccessHandler(hasilLogin).login(nis, pass);
}
}
function hasilLogin(status){
//document.getElementById("peringatan").innerHTML = status;
if(status == "NOUSER"){
document.getElementById("peringatan").innerHTML = "USER TIDAK DITEMUKAN";
}else if(status == "FAILED"){
document.getElementById("peringatan").innerHTML = "PASTIKAN USER & PASSWORD
BENAR";
}else{
// split status
data = status.split("#");
brs = data[1];
google.script.run.withSuccessHandler(tampilHasil).baca(brs);
//document.getElementById("peringatan").innerHTML = "BERHASIL";
//document.getElementById("loading").style.display="none";
tulisCookie("status","login");
if(bacaCookie("us")==""){
tulisCookie("us",document.getElementById("nis").value);
}
if(bacaCookie("pw")==""){
tulisCookie("pw",document.getElementById("pass").value);
}
}
}
function tampilHasil(status){
document.getElementById("konten").style.display="none";
document.getElementById("pengumuman").style.display="block";
data = status.split("#");
if(data[4] == "" || data[4]===null){
document.getElementById("tampilFoto").innerHTML = '';
}else{
document.getElementById("tampilFoto").innerHTML = '<img src='+data[4]+'
width="200px">';
}
document.getElementById("tampilNama").innerHTML = data[1];
document.getElementById("tampilNis").innerHTML = data[0];
document.getElementById("tampilKelas").innerHTML = data[2];
document.getElementById("tampilLulus").innerHTML = data[3];
if(data[5] == "" || data[5]===null){

document.getElementById("tampilLink").innerHTML = '';
}else{
document.getElementById("tampilLink").innerHTML = 'Download Surat Keterangan:
<a href='+data[5]+' target="_blank">Download Pengumuman</a>';
}
}
function hapusPeringatan(){
document.getElementById("peringatan").innerHTML = "";
}
function awal(){
document.getElementById("konten").style.display="block";
document.getElementById("pengumuman").style.display="none";
tulisCookie("status","logout");
tulisCookie("us","");
tulisCookie("pw","");
document.getElementById("peringatan").innerHTML = "Anda sudah logout.";
}
</script>
</body>
</html>

index.html

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

index.html

Uploaded by

Copyright:

Available Formats

<html>

<div id="hitungmundur" style="display:none">

<div id="konten" style="display:none;">

<div id="pengumuman" style="display:none;">

// Mulai baris ini ke bawah, jangan diedit

// cek sudah login atau belum

// Catat waktu sekarang

// Time calculations for days, hours, minutes and seconds

// Output the result in an element with id="demo"

// If the count down is over, write some text

var expiration = "09/09/2023 23:59:59";

if(data[5] == "" || data[5]===null){

You might also like