Password Overlay
Di sini, JavaScript btoa digunakan untuk menyembunyikan teks, sedangkan atob digunakan untuk mengembalikan teks yang tersembunyi tersebut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password Overlay Test</title>
<style>
.body {
padding:10% 0;
text-align:center;
}
.overlay {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background-color:black;
color:white;
padding:10% 0;
text-align:center;
}
</style>
</head>
<body>
<div id="protect-body" class="body">Content goes here…</div>
<div id="protect-overlay" class="overlay">
<form action="#">
<input name="answer" type="password" placeholder="Password?"/> <button type="submit">Open</button>
</form>
</div>
<script>
// https://developer.mozilla.org/En/DOM/Window.btoa
// https://developer.mozilla.org/en/DOM/window.atob
// to get the obfuscated text, use `console.log(btoa('your text goes here'))`
// `aSBsb3ZlIHlvdQ==` => `i love you`
(function() {
var o = document.getElementById('protect-overlay');
o.getElementsByTagName('form')[0].onsubmit = function() {
if (this.answer.value === atob('aSBsb3ZlIHlvdQ==')) {
o.style.display = "none"; // passed!
} else {
alert('Wrong password!');
}
return false;
};
})();
</script>
</body>
</html>Demo
Kata kunci: i love you
Referensi
Labels: Eksperimen, JavaScript, Potongan
14 Comments:
apabila ingin mengganti kata kunci nya apakah harus merubah bagian ini mas ?
aSBsb3ZlIHlvdQ==
→ http://jsfiddle.net/tovic/4djLpdby/1
diterapin di halaman posting masih ada erornya mas. Waktu enter habis ngisi passwordnya, gak ngilang2 overlaynya..
\o/
itu namanya kode apa ?
mantap mas,, :-bd
mantab + keren.
→ /2013/08/memahami-domcontentloaded.html
mau tanya dong mas
kalo password overlay nya di pasang ke blogspot bisa ga?
Kalau sudah paham cara kerjanya, bisa.
pasword diganti selain ' i love you ' kok tidak bisa mas taufik.
mohon pencerahannya. terima kasih
sudah bisa diganti mas. terima kasih
mau tanya mas. Apa ada cara lain untuk protect-body selain di display:none? soalnya kalo di inspect masih bisa muncul mas :\
Pindah ke CMS Mecha terus pasang plugin private post. Beres!
Nyari tutorial mbikin cms, udah dibaca tp blm jg paham2. Mungkin bisa dipost mas taufik hehe :)
Post a Comment
<< Home