<!-- Fake Password Guess Box -->
<div class="fake-password-box">
  <h2>Archive Login</h2>
  <input type="password" id="passwordInput" placeholder="Hint: It's On This Page" />
  <button onclick="checkPassword()">Submit</button>
  <p id="message"></p>
</div>

<!-- Corrupted error message style -->
<style>
  /* Center the fake-password-box on screen */
  .fake-password-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: white; /* White text for contrast */
    border: 2px solid white; /* White border */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Subtle white glow */
    text-align: center;
    font-family: 'Courier New', monospace;
    width: 300px;
  }

  .fake-password-box h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: white; /* Ensuring "Archive Login" is white */
  }

  .fake-password-box input, .fake-password-box button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1); /* Light transparent background */
    color: white;
    font-size: 16px;
  }

  .fake-password-box input::placeholder {
    color: rgba(255, 255, 255, 0.6); /* Light placeholder text */
  }

  /* Error Message Styling */
  .error-message {
    color: red;
    font-family: 'Courier New', monospace;
    display: inline;
    font-size: 20px;
    letter-spacing: 2px;
    animation: glitch 1.5s infinite, shake 0.5s ease-out;
  }

  /* Glitch Effect */
  @keyframes glitch {
    0% { text-shadow: 1px 0 red, -1px 0 blue; }
    25% { text-shadow: -1px 0 red, 1px 0 blue; }
    50% { text-shadow: 1px 0 red, 1px 0 blue; }
    75% { text-shadow: -1px 0 red, -1px 0 blue; }
    100% { text-shadow: 1px 0 red, -1px 0 blue; }
  }

  /* Shake Effect */
  @keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(5px); }
  }

  /* Screen Flicker */
  .flicker {
    animation: flicker 0.2s ease-in-out infinite;
  }

  @keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.1; }
    100% { opacity: 1; }
  }
</style>

<script>
  function checkPassword() {
    var password = document.getElementById("passwordInput").value.toLowerCase(); // Convert entered password to lowercase
    var message = document.getElementById("message");

    // Predefined passwords and their corresponding redirect URLs
    var passwords = {
      "on this page": "/vincent",            // Redirect for correct password
      "onthispage": "/vincent",        
      "gxdo": "/gxdo",  
      "cdfk elofvln": "/fakefaq",    
      "cdfkelofvln": "/fakefaq",    
      "irxa": "/woah",   
      "hfpzify ezxw": "/woah",    
      "hfpzifyezxw": "/woah"    
    };

    if (passwords[password]) {
      // If password matches, open new tab to the corresponding URL
      window.open(passwords[password], '_blank');
    } else if (password === "dual") {
      // If "dual" is entered, show the specific message
      message.textContent = "You need to use vincent's cypher on this word.";
      message.classList.add("error-message", "flicker"); // Apply glitch and flicker effect
      document.body.classList.add("flicker"); // Apply screen flicker effect
      setTimeout(function() {
        document.body.classList.remove("flicker"); // Remove flicker effect after some time
      }, 2000); // Flicker for 2 seconds
    } else if (password === "v1nc3ntx5*#" || password === "vincent") {
      // If password is the corrupted version, display a strong error message
      message.textContent = "I am no longer just a memory. I am the anomaly. The web trembles with my presence, and now, perhaps, so do you. There's no escaping what's already begun. Join me, if you dare, and know that time itself may never let us go.";
      message.classList.add("error-message", "flicker"); // Apply glitch and flicker effect
      document.body.classList.add("flicker"); // Apply screen flicker effect
      setTimeout(function() {
        document.body.classList.remove("flicker"); // Remove flicker effect after some time
      }, 2000); // Flicker for 2 seconds
    } else {
      message.textContent = "Incorrect password. Please try again.";
      message.style.color = "red";
    }
  }

  // Show the password box when the page loads
  window.onload = function() {
    document.querySelector('.fake-password-box').style.display = 'block';
  }
</script>