Mecha versi 2.6.4 sudah dirilis!

Password Overlay

Tabel Konten
  1. Demo 
  2. Referensi 

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

Lihat Demo


Referensi 

14 Komentar

Anonim

mantab + keren.

Niichan

mau tanya dong mas
kalo password overlay nya di pasang ke blogspot bisa ga?

Joko Raharjo

pasword diganti selain ' i love you ' kok tidak bisa mas taufik.

mohon pencerahannya. terima kasih

Joko Raharjo

sudah bisa diganti mas. terima kasih

Putra

mau tanya mas. Apa ada cara lain untuk protect-body selain di display:none? soalnya kalo di inspect masih bisa muncul mas :\

Putra

Nyari tutorial mbikin cms, udah dibaca tp blm jg paham2. Mungkin bisa dipost mas taufik hehe :)

Komentar telah ditutup.