blok user hotspot

kode 1 : taruh di bagian bawah sebelum </body>

<div id="blocked" class="modal">
<div class="modal-content">
<p>Anda diblokir hingga <span id="waktu_blokir"></span> lagi</p>
</div>
</div>

kode 2: taruh dibawah kode 1

<!-- SCRIPT BLOCK LIMIT LOGIN ATTEMPTS -->
<script type="text/javascript">
/* cek dulu status user sedang diblock atau nggak */
if (localStorage.getItem("status_blokir") === null) {
//do nothing
}
else {
var sekarang = new Date();
var waktu_blokir = localStorage.getItem("status_blokir");
if (sekarang - waktu_blokir > 0) {
// waktu blokir sudah lewat
console.log("bebas");
localStorage.removeItem("status_blokir"); //hapus_penanda
}
else {
console.log("masih diblock");
document.getElementById("blocked").style.display = "block";
var seconds = (waktu_blokir - sekarang)/1000;
document.getElementById("waktu_blokir").innerHTML = detik_ke_jam(seconds) ;
}
}

function detik_ke_jam(d) {
d = Number(d);
var h = Math.floor(d / 3600);
var m = Math.floor(d % 3600 / 60);
var s = Math.floor(d % 3600 % 60);
var hDisplay = h > 0 ? h + (h == 1 ? " jam, " : " jam, ") : "";
var mDisplay = m > 0 ? m + (m == 1 ? " menit, " : " menit, ") : "";
var sDisplay = s > 0 ? s + (s == 1 ? " detik" : " detik") : "";
return hDisplay + mDisplay + sDisplay;
}

/* Counter Login Attempts */
var n = sessionStorage.getItem('login_attempt');
if (n === null) {
n = 0;
}
n++;
sessionStorage.setItem("login_attempt", n);
</script>

<!-- START IF ERROR-->
$(if error)
<script type="text/javascript">
var message = "$(error)";
var coba = n;
if (message == "Kode Voucher Anda Salah" && coba > 3) {
/* Sesuaikan kata "Kode Voucher Anda Salah" dengan pesan error anda */
var sekarang = new Date();
var waktu_blokir = new Date().setHours(new Date().getHours()+2); //ganti angka dua sesuai selera anda
localStorage.setItem("status_blokir",waktu_blokir);
document.getElementById("blocked").style.display = "block";
var seconds = (waktu_blokir - sekarang)/1000;
document.getElementById("waktu_blokir").innerHTML = detik_ke_jam(seconds) ;
}
</script>
$(endif)
<!-- END IF ERROR PART -->

kode 3 : taruh di bagian atas sebelum </style>,
atau copy paste di file css jika menggunakan css external

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.7);
}

.modal-content {
background-color: #fefefe; color:red;box-shadow:0 0 15px #000;
margin: 25% auto;
padding: 20px;
width: 80%;
}