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

  • Unknown

    apabila ingin mengganti kata kunci nya apakah harus merubah bagian ini mas ?

    aSBsb3ZlIHlvdQ==
  • Putra

    diterapin di halaman posting masih ada erornya mas. Waktu enter habis ngisi passwordnya, gak ngilang2 overlaynya..

  • Unknown

    mantap mas,, :-bd

  • 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.