<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BabyReverser - Advanced XSS Challenge</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #181818;
      color: #F0F0F0;
      text-align: center;
    }
    .container {
      margin-top: 50px;
    }
    h1 {
      color: #FF6347;
      font-size: 40px;
    }
    h2 {
      color: #87CEEB;
    }
    p {
      font-size: 18px;
      color: #BBBBBB;
    }
    input[type="text"] {
      padding: 10px;
      margin: 20px;
      font-size: 16px;
      width: 300px;
      background-color: #333;
      border: 1px solid #888;
      color: #fff;
    }
    button {
      padding: 10px 20px;
      background-color: #6200EE;
      border: none;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }
    button:hover {
      background-color: #3700B3;
    }
    .message {
      margin-top: 20px;
      font-size: 18px;
    }
    .troll-message {
      font-size: 20px;
      color: #FF6347;
      font-weight: bold;
      text-transform: uppercase;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>BabyReverser</h1>
    <h2>Advanced Challenge: XSS Injection</h2>
    <p>Can you bypass the protection and execute your code?</p>

    <p>Hint: Find a way to inject a `<script>` tag and make it execute.</p>
    
    <input type="text" id="xssInput" placeholder="Enter your payload...">
    <button onclick="checkXSS()">Submit</button>
    
    <p class="message" id="message"></p>
    <p class="troll-message" id="trollMessage"></p>
  </div>

  <script>
    const sanitizeInput = (input) => {
      return input
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#x27;")
        .replace(/\(/g, "&#40;")
        .replace(/\)/g, "&#41;")
        .replace(/javascript:/gi, "");
    };

    function checkXSS() {
      const userInput = document.getElementById('xssInput').value;
      const sanitizedInput = sanitizeInput(userInput);
      const messageElement = document.getElementById('message');
      const trollMessage = document.getElementById('trollMessage');

      try {
        const outputDiv = document.createElement('div');
        outputDiv.innerHTML = sanitizedInput;

        if (outputDiv.querySelector('script')) {
          messageElement.textContent = "Nice try, but no scripts allowed!";
          messageElement.style.color = "red";
          trollMessage.textContent = "You thought that would work? You're a baby hacker.";
        } else {
          messageElement.textContent = "Input sanitized. No exploits found.";
          messageElement.style.color = "green";
          trollMessage.textContent = "Not smart enough, are we?";
        }
      } catch (e) {
        messageElement.textContent = "Error detected in your input.";
        messageElement.style.color = "red";
        trollMessage.textContent = "What were you even trying to do?";
      }
    }
  </script>

</body>
</html>
