<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🤖 Ivax Puzzle</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: black;
      color: lime;
      font-family: "Courier New", Courier, monospace;
    }
    .terminal {
      width: 80%;
      max-width: 600px;
      background: black;
      border: 2px solid lime;
      padding: 20px;
      box-sizing: border-box;
      font-size: 16px;
      line-height: 1.5;
    }
    .output {
      white-space: pre-wrap;
    }
    .input-line {
      display: flex;
      align-items: center;
    }
    .blinking-cursor {
      width: 10px;
      height: 20px;
      background-color: lime;
      animation: blink 1s step-start infinite;
      margin-left: 5px;
    }
    @keyframes blink {
      50% {
        opacity: 0;
      }
    }
    input {
      background: black;
      border: none;
      color: lime;
      font-family: "Courier New", Courier, monospace;
      font-size: 16px;
      width: 100%;
      outline: none;
      caret-color: lime;
    }
    .success {
      background-color: pink !important;
      color: black !important;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      font-weight: bold;
      text-align: center;
      flex-direction: column;
    }
    .link {
      color: black;
      text-decoration: none;
      font-weight: bold;
      animation: colorBlink 1s infinite;
    }
    @keyframes colorBlink {
      0% { color: red; }
      25% { color: blue; }
      50% { color: green; }
      75% { color: orange; }
      100% { color: purple; }
    }
  </style>
</head>
<body>
  <div class="terminal" id="a">
    <div class="output" id="b">
      Hello Mònica.<br>
      I am Ivax, and I want to understand "philosophy", but I only speak ASCII, can you help me?<br>
      Type your answer below and press Enter.
    </div>
    <div class="input-line" id="c">
      <input type="text" id="d" onkeydown="e(event)">
      <div class="blinking-cursor"></div>
    </div>
  </div>

  <script>
    const _0x98b7=["aHR0cHM6Ly9tb25pY2FyaWtpYy5jb20v"];const _0x5d9a=[1103];const _0xd9f7=()=>atob(_0x98b7[0]);

    function e(i) {
      if (i.key === "Enter") {
        const j = document.getElementById("d");
        const k = document.getElementById("b");
        const l = parseInt(j.value);
        
        if (l === _0x5d9a[0]) {
          document.body.innerHTML = `
            <div class="success">
              my <a href="${_0xd9f7()}" class="link" target="_blank">crush</a> is a robot
            </div>
          `;
        } else {
          k.innerHTML += `\n> ${j.value}\nIncorrect. Keep trying!`;
        }
        
        j.value = ""; // Clear input
      }
    }

    window.onload = () => {
      document.getElementById("d").focus();
    };
  </script>
</body>
</html>
