second.html

<style>
  .t4s-header__wrapper.t4s-pr.t4s-header-layout_logo_left,
  footer#t4s-footer {
    display: none;
  }
  .section {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(180deg, #0a1a2f 0%, #15325c 100%);
    font-family: "Inter", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 32px 16px;
    background: transparent;
  }
  h1 {
    color: #fff;
    font-size: 6.5rem;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.15;
  }
  .subtitle {
    color: #c9d6e3;
    font-size: 2.7rem;
    font-weight: 400;
    margin-bottom: 32px;
    line-height: 1.3;
  }
  .scan-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
  }
  .input-wrapper {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 2px 8px rgba(10, 26, 47, 0.05);
  }
  .input-wrapper .emoji {
    font-size: 2rem;
    margin-right: 8px;
  }
  .scan-form input[type="email"] {
    border: none;
    outline: none;
    font-size: 2.3rem;
    font-family: inherit;
    padding: 10px 0;
    background: transparent;
    flex: 1;
    color: #1a2a3c;
  }
  .scan-form button {
    background: #3971f7;
    color: #fff;
    font-size: 2.1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 25px 0;
    cursor: pointer;
    transition: ease-in-out 0.2s;
  }
  .scan-form button:hover {
    background: #2656c7;
  }
  .note {
    color: #c9d6e3;
    font-size: 2rem;
    margin-top: 8px;
  }
  #result {
    margin-top: 18px;
    font-size: 1.05rem;
    min-height: 32px;
  }
  .navbar {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    padding: 10px 0;
  }
  .navbar-text {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    font-style: italic;
    text-align: center;
  }
  @media (max-width: 500px) {
    .container {
      max-width: 95vw;
      padding: 24px 4vw;
    }
    h1 {
      font-size: 2rem;
    }
    .subtitle {
      font-size: 1rem;
    }
  }
  .btn-loader {
    font-size: 2.1rem;
    color: #fff;
    letter-spacing: 2px;
    animation: blink 1s infinite steps(1, end);
  }
  @keyframes blink {
    50% {
      opacity: 0.5;
    }
  }
</style>
<div class="section">
  <div class="navbar">
    <a
      href="https://whynotprivacy.com"
      target="_blank"
      rel="noopener noreferrer"
    >
      <p class="navbar-text">WhyNotPrivacy</p>
    </a>
  </div>
  <div class="container">
    <h1>See What Hackers<br />Know About You</h1>
    <p class="subtitle">
      Check if your email, passwords, or other<br />
      personal data were leaked online.
    </p>
    <form class="scan-form" id="scanForm">
      <div class="input-wrapper">
        <span class="emoji">👋</span>
        <input
          type="email"
          id="emailInput"
          placeholder="Email address"
          required
        />
      </div>
      <button type="submit" id="scanBtn">
        <span class="btn-text">Scan Now</span>
        <span class="btn-loader" style="display: none"
          >&#9679;&#9679;&#9679; Running...</span
        >
      </button>
    </form>
    <p class="note">Instant and free. No account required</p>
    <div id="result"></div>
  </div>
</div>
<script>
  const form = document.getElementById("scanForm");
  const emailInput = document.getElementById("emailInput");
  const resultDiv = document.getElementById("result");
  const scanBtn = document.getElementById("scanBtn");
  const btnText = scanBtn.querySelector(".btn-text");
  const btnLoader = scanBtn.querySelector(".btn-loader");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();

    const email = emailInput.value.trim();
    if (!email) return;

    // UI: Show loading state
    resultDiv.innerHTML = "";
    btnText.style.display = "none";
    btnLoader.style.display = "inline";
    scanBtn.disabled = true;

    try {
      const res = await fetch(
        `https://data-breach-production.up.railway.app/scan?email=${encodeURIComponent(
          email
        )}`
        // For local testing, use: `http://localhost:3000/scan?email=${encodeURIComponent(email)}`
      );

      const data = await res.json();

      if (res.ok) {
        // Show the searched email
        let html = `<div style="color:#fff;font-size:1.1rem;margin-bottom:8px;">Results for: <strong>${data.email}</strong></div>`;
        if (Array.isArray(data.data) && data.data.length > 0) {
          html += data.data
            .map(
              (breach) => `
                <div class="breach-item" style="background:#fff;padding:12px;margin-bottom:12px;border-radius:8px;text-align:left;">
                  <strong style="font-size:1.2rem;color:#0a1a2f;">${
                    breach.Name
                  }</strong><br/>
                  <span style="color:#3b4c66;">Domain:</span> ${
                    breach.Domain || "N/A"
                  }<br/>
                  <span style="color:#3b4c66;">Breach Date:</span> ${
                    breach.BreachDate || "Unknown"
                  }
                </div>
              `
            )
            .join("");
        } else {
          html += `<div class="no-breaches" style="color:#fff;font-size:1.1rem;margin-top:8px;">🎉 No breaches found!</div>`;
        }
        resultDiv.innerHTML = html;
      } else {
        resultDiv.innerHTML = `<span style="color:red;font-weight:bold;">⚠️ ${
          data.error || "Something went wrong."
        }</span>`;
      }
    } catch (err) {
      console.error(err);
      resultDiv.innerHTML = `<span style="color:red;font-weight:bold;">⚠️ Something went wrong. Please try again later.</span>`;
    }

    // Reset UI
    btnText.style.display = "inline";
    btnLoader.style.display = "none";
    scanBtn.disabled = false;
  });
</script>