Pasang passcode untuk blog

Adzril MediaOne

 Walaupun blogspot ada fungsi invite readers only, tapi kita boleh set letak passcode untuk sesiapa yang nak akses blog kita.

Ini scriptnya

<script type="text/javascript"> var passcode = "YOUR_PASSCODE_HERE"; var accessDuration = 60 * 60 * 1000; // 1 hour in milliseconds function passCheck() { var enteredPasscode = document.getElementById('pass').value; var errorMessage = document.getElementById('errorMessage'); if (enteredPasscode === passcode) { var expirationTime = new Date().getTime() + accessDuration; localStorage.setItem('passcode', enteredPasscode); localStorage.setItem('expirationTime', expirationTime); document.getElementById('passDiv').style.display = 'none'; document.getElementsByTagName('body')[0].style.overflow = 'auto'; errorMessage.textContent = ''; } else { errorMessage.textContent = 'Invalid passcode. Please try again.'; } return false; } window.onload = function() { var storedPasscode = localStorage.getItem('passcode'); var expirationTime = localStorage.getItem('expirationTime'); var currentTime = new Date().getTime(); if (storedPasscode !== passcode || currentTime > expirationTime) { localStorage.removeItem('passcode'); localStorage.removeItem('expirationTime'); document.getElementById('passDiv').style.display = 'flex'; document.getElementsByTagName('body')[0].style.overflow = 'hidden'; } }; </script> <div id='passDiv'> <form onsubmit='return passCheck()'> <div class='logo'> <img alt='Logo' src='https://blogger.googleusercontent.com/img/a/AVvXsEhoquAr0U2kpwFKS3Qg8dCdyzkhbhYv9TodUNazISe8jEwcqBmisDQUrJhhvMW54IOA1pdMmJq-LR5zSaBvntWfTj40DZEUf4SZhCOKLuLxonJPWF5LGKJK9HxZSksyryH_EJAss1MBT5BINRgrFZ4_IxInlx-wIduZFj85mLVF5WNpgpXYAowcKULS63s=w150'/> </div> <h2>Protected Content</h2> <p>Please enter the passcode to unlock the content.</p> <div class='input-group'> <input id='pass' name='pass' placeholder='Enter passcode' required='required' type='password'/> <button type='submit'>Unlock</button> </div> <p class='contact-text'>Contact Adzril for the passcode.</p> <p id='errorMessage'/> </form> </div> <style> #passDiv { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f7f7f7; z-index: 9999; display: none; justify-content: center; align-items: center; } #passDiv form { background-color: #ffffff; padding: 40px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); text-align: center; max-width: 400px; width: 100%; } .logo { margin-bottom: 30px; } .logo img { max-width: 150px; height: auto; } #passDiv h2 { font-size: 28px; margin-bottom: 20px; color: #333333; } #passDiv p { font-size: 18px; margin-bottom: 30px; color: #666666; } .input-group { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } .input-group input { padding: 12px; border: 1px solid #dddddd; border-radius: 6px; font-size: 18px; width: 100%; max-width: 300px; } .input-group button { padding: 12px 24px; background-color: #ff6b6b; color: #ffffff; border: none; border-radius: 6px; font-size: 18px; margin-left: 15px; cursor: pointer; transition: background-color 0.3s ease; } .input-group button:hover { background-color: #ff4f4f; } .contact-text { font-size: 16px; color: #999999; margin-bottom: 10px; } #errorMessage { color: #ff6b6b; font-size: 16px; margin-top: 15px; } </style>

Paparan lebih simple. Dengan passcode ini user tak boleh akses blog anda. Kalau dia ada passcodenya, dia boleh akses blog anda dalam 1 jam je. lepas tu akan lock balik. 


Letak code ini dalam tag body. Atau sebelum </body>

Ini untuk paparan passcode yang lebih minimalist.

 <script>

  // Define the passcode and access duration

  var passcode = "a";

  var accessDuration = 60 * 60 * 1000; // 1 hour in milliseconds


  // Function to handle passcode check

  function passCheck() {

    // Get the entered passcode and error message element

    var enteredPasscode = document.getElementById('pass').value;

    var errorMessage = document.getElementById('errorMessage');


    // Check if the entered passcode is correct

    if (enteredPasscode === passcode) {

      // Calculate the expiration time

      var expirationTime = new Date().getTime() + accessDuration;


      // Store the passcode and expiration time in local storage

      localStorage.setItem('passcode', enteredPasscode);

      localStorage.setItem('expirationTime', expirationTime);


      // Hide the passcode input div and set the body's overflow to auto

      document.getElementById('passDiv').style.display = 'none';

      document.getElementsByTagName('body')[0].style.overflow = 'auto';


      // Clear the error message

      errorMessage.textContent = '';

    } else {

      // Set the error message

      errorMessage.textContent = 'Invalid passcode. Please try again.';

    }


    // Prevent the form from submitting

    return false;

  }


  // Function to handle page load

  window.onload = function() {

    // Get the stored passcode and expiration time from local storage

    var storedPasscode = localStorage.getItem('passcode');

    var expirationTime = localStorage.getItem('expirationTime');

    var currentTime = new Date().getTime();


    // Check if the stored passcode is valid or if the expiration time has passed

    if (storedPasscode !== passcode || currentTime > expirationTime) {

      // Remove the stored passcode and expiration time from local storage

      localStorage.removeItem('passcode');

      localStorage.removeItem('expirationTime');


      // Display the passcode input div and set the body's overflow to hidden

      document.getElementById('passDiv').style.display = 'flex';

      document.getElementsByTagName('body')[0].style.overflow = 'hidden';

    }

  };

</script>


<div id='passDiv'>

  <form onsubmit='return passCheck()'>

    <div class='logo-container'>

      <img alt='Logo' src='path/to/your/logo.png'/>

    </div>

    <label for='pass'>Enter Passcode:</label>

    <input id='pass' name='pass' type='password'/>

    <input type='submit' value='Submit'/>

    <p>Please contact Adzril to get the passcode.</p>

    <p id='errorMessage' style='color: red;'/>

  </form>

</div>


<style>

  #passDiv {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

    z-index: 9999;

    display: none;

    justify-content: center;

    align-items: center;

  }


  #passDiv form {

    background-color: #f1f1f1;

    padding: 20px;

    border-radius: 5px;

    text-align: center;

  }


  .logo-container {

    text-align: center;

    margin-bottom: 20px;

  }


  .logo-container img {

    width: 200px;

    height: 200px;

  }

</style>