<html><base href="https://example.com">
<head>
  <meta charset="UTF-8">
  <title>Try To Crack Me!</title>
  <style>
    /* Modern Purple-Themed Style */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: "Verdana", sans-serif;
    }
    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(120deg, #7d00a3, #9b59b6, #8e44ad, #663399);
      background-size: 600% 600%;
      animation: purpleGlow 15s ease infinite;
      color: #fff;
    }
    @keyframes purpleGlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .container {
      background: rgba(30, 30, 60, 0.8);
      padding: 2rem;
      border-radius: 10px;
      text-align: center;
      max-width: 400px;
      width: 100%;
    }
    h1 {
      margin-bottom: 1rem;
      font-size: 1.8rem;
      text-transform: uppercase;
    }
    form {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    label {
      font-weight: bold;
      text-align: left;
      margin-left: 0.2rem;
      margin-bottom: 0.3rem;
      font-size: 0.9rem;
    }
    input[type="text"],
    input[type="password"] {
      padding: 0.6rem;
      border: none;
      border-radius: 5px;
      outline: none;
      font-size: 1rem;
    }
    button {
      padding: 0.8rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      background-color: #a333c8;
      color: #fff;
      font-size: 1rem;
      font-weight: bold;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #8a2dac;
    }
    .counter {
      margin-top: 1rem;
      font-size: 1rem;
      font-weight: bold;
    }
    .hint {
      font-size: 0.8rem;
      margin-top: 1rem;
      opacity: 0.8;
    }
    /* Inline SVG Lock Icon */
    .lock-icon {
      margin: 1rem auto;
      width: 100px;
      height: 100px;
    }
    .lock-icon svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: #fff;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .username-display {
      margin-top: 0.5rem;
      font-size: 1rem;
      font-weight: bold;
      opacity: 0.9;
    }
    .cracked-message {
      font-size: 2rem;
      margin-top: 1rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Try To Crack Me!</h1>
    <div class="lock-icon">
      <svg viewBox="0 0 64 64">
        <rect x="16" y="28" width="32" height="28" rx="4" ry="4" />
        <path d="M24 28v-8a8 8 0 0116 0v8" />
      </svg>
    </div>
    <div id="usernameDisplay" class="username-display">Welcome, Anonymous</div>
    <form onsubmit="event.preventDefault(); checkCode();" id="codeForm">
      <label for="codeInput">Enter Secret Code</label>
      <input type="password" id="codeInput" placeholder="Guess the code" required />
      <button type="submit">Crack it?</button>
    </form>
    <div class="counter" id="crackCounter">Cracked by 0 people so far</div>
    <div class="hint">Hint: Time to crack the code would be 2 million trillion trillion trillion trillion trillion trillion trillion trillion trillion trillion trillion trillion years.</div>
  </div>

  <script src="https://unpkg.com/websim-socket@latest/dist/websim-socket.umd.js"></script>
  <script>
    const secretCode = "LoremIpIpsumDorkerGarfieldKittySkyWeatherApp48434!38293*$&#@dosk3du834r%3di93ik2#93239(0394jf932j90KittenHODFOFDFOSd934u89fduj9g490u894eujt";
    const webhookUrl = "https://ptb.discord.com/api/webhooks/1325756117254668319/Pebi6gQUvf3J6xPvQNq7egfDYnFxQIS2OAswpNNq1bkSWZtBsrLv8wxK7KYlu3B8PAjC";
    const counterDisplay = document.getElementById("crackCounter");
    const usernameDisplay = document.getElementById("usernameDisplay");
    const codeForm = document.getElementById("codeForm");

    let globalCrackRecord = null;
    const room = new WebsimSocket();

    room.collection("crackCount").filter({ label: "global" }).subscribe(async (records) => {
      if (!records.length) {
        globalCrackRecord = await room.collection("crackCount").create({
          type: "crackCount",
          label: "global",
          count: 0,
          winner: null,
          incorrectCount: 0
        });
      } else {
        globalCrackRecord = records[0];
      }
      counterDisplay.textContent = "Cracked by " + (globalCrackRecord.count || 0) + " people so far, with " + (globalCrackRecord.incorrectCount || 0) + " incorrect attempts so far";
      if (globalCrackRecord.winner) {
        showCracked(globalCrackRecord.winner);
      }
    });

    room.party.subscribe((peers) => {
      const client = room.party.client;
      if (client && client.username) {
        usernameDisplay.textContent = "Welcome, @" + client.username;
      } else {
        usernameDisplay.textContent = "Welcome, Anonymous";
      }
    });

    async function postToWebhook(name) {
      await fetch(webhookUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          content: `@everyone ${name} has cracked the code oh mah god`
        })
      });
    }

    function checkCode() {
      if (!globalCrackRecord || globalCrackRecord.winner) {
        return;
      }
      const codeInput = document.getElementById("codeInput");
      if (codeInput.value === secretCode) {
        const client = room.party.client;
        const userNameValue = (client && client.username) ? client.username : "Anonymous";
        if (!globalCrackRecord.winner) {
          const newCount = (globalCrackRecord.count || 0) + 1;
          room.collection("crackCount").update(globalCrackRecord.id, {
            count: newCount,
            winner: userNameValue
          });
        }
        postToWebhook(userNameValue);
        alert("Congratulations! The code has been cracked!");
      } else {
        room.collection("crackCount").update(globalCrackRecord.id, {
          incorrectCount: (globalCrackRecord.incorrectCount || 0) + 1
        });
        alert("Incorrect code. Keep trying!");
      }
      codeInput.value = "";
    }

    function showCracked(username) {
      if (codeForm) {
        codeForm.style.display = "none";
      }
      const container = document.querySelector(".container");
      const bigText = document.createElement("div");
      bigText.classList.add("cracked-message");
      bigText.textContent = username + " GOT IT!";
      container.appendChild(bigText);
    }
  </script>
</body>
</html>