Fungsi : Mengamankan sebuah div atau elemen atau teks dengan memberi Password untuk menyembunyikan elemen tersebut dengan menggunakan fungsi btoa dari Javascript.
Tingkat Kesulitan : Mudah.
Penggunaan : Manual.
Bahasa Pemrograman : HTML, CSS, dan Javascript.
File Eksternal : -
Source Code : DTE Website.
HTML
<div id="protect-body" class="body" style="margin:3em 0;">
<a href="https://moccatory.blogspot.com/">Taruh element yang ingin disembunyikan disini. </a>
</div>
<div id="protect-overlay" class="overlay" style="margin:3em 0;">
<form action="a()" method="GET">
<input name="answer" id="password" type="password" placeholder="Password"/>
<button type="submit">Unlock Items</button>
<div class="toggle-wrapper"><input id="togglepassword" type="checkbox" onclick="x()" value="Show Password"><lable>Show Password</lable></div>
</form>
</div>CSS
#protect-overlay input{width:75%;margin:0 5px .5em 0;padding:12px;border:0;outline:0;background:#ddd;border-radius:3px;transition:.3s all}
#protect-overlay input:focus, #protect-overlay input:active{border:2px solid #9c88ff;background:#fff;color:#222;}
#protect-overlay button{width:unset;margin:.5em 0 .5em 5px;padding:10px 15px;background:#9c88ff;border:2px solid transparent;outline:0;color:#fff;border-radius:3px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.3);transition:.3s all;}
#protect-overlay button:hover{background:#fff;border:2px solid #9c88ff;color:#9c88ff}
#protect-overlay input#togglepassword{margin:10px 5px 0 0;padding:0;width:unset;}
.toggle-wrapper{display:block;}
@media only screen and (max-width: 728px) {
#protect-overlay button{margin-left:0}
#protect-overlay input{margin-right:0}
}Javascript
<script type='text/javascript'>
(function() {
var o = document.getElementById('protect-overlay');
var s = document.getElementById('protect-body');
s.style.display = "none";
o.getElementsByTagName('form')[0].onsubmit = function() {
if (this.answer.value === atob('TW9jY2F0b3J5')) {
alert('Password Benar!');
o.style.display = "none"; // passed!
s.style.display = "block";
} else {
alert('Wrong password!');
}
return false;
};
})();
function x() {
var x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
function a() {
var a = document.getElementById("password");
if (x.type === "text") {
x.type = "password";
} else {
x.type = "password";
}
}
</script>Live Preview
Taruh apapun disini, bisa teks biasa, bisa juga code html atau mungkin tombol download file dengan timer?
Password : Moccatory
