Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Intelligence Suite</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      margin: 0;
      padding: 0;
    }
    header {
      background: #0078D7;
      color: white;
      padding: 1rem 2rem;
      text-align: center;
    }
    .container {
      max-width: 900px;
      margin: 2rem auto;
      background: #fff;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    h2 {
      margin-bottom: 1rem;
    }
    form {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    input {
      padding: 0.5rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    button {
      padding: 0.5rem 1rem;
      font-size: 1rem;
      background: #0078D7;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background: #005fa1;
    }
    pre {
      background: #eef;
      padding: 1rem;
      margin-top: 1rem;
      border-radius: 4px;
      white-space: pre-wrap;
    }
    section {
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Email Intelligence Suite</h1>
    <p>Search for business emails by name, domain, or company</p>
  </header>
  <div class="container">
    <section>
      <h2>🔎 Find a Person’s Email</h2>
      <form id="person-form">
        <input type="text" id="domain-input" placeholder="Domain (e.g., company.com)" required />
        <input type="text" id="first-name-input" placeholder="First Name" required />
        <input type="text" id="last-name-input" placeholder="Last Name" required />
        <button type="submit">Find Email</button>
      </form>
      <pre id="person-result"></pre>
    </section>

    <section>
      <h2>🏢 Search Company Emails</h2>
      <form id="domain-form">
        <input type="text" id="company-domain-input" placeholder="Company Domain (e.g., example.com)" required />
        <button type="submit">Search Emails</button>
      </form>
      <pre id="domain-result"></pre>
    </section>

    <section>
      <h2>✔️ Verify Email</h2>
      <form id="verify-form">
        <input type="email" id="verify-email-input" placeholder="Email address (e.g., john@company.com)" required />
        <button type="submit">Verify</button>
      </form>
      <pre id="verify-result"></pre>
    </section>

    <section>
      <h2>🏢 Company Enrichment</h2>
      <form id="enrich-form">
        <input type="text" id="enrich-domain-input" placeholder="Company Domain (e.g., stripe.com)" required />
        <button type="submit">Enrich Company</button>
      </form>
      <pre id="enrich-result"></pre>
    </section>

    <section>
      <h2>👤 Person Enrichment</h2>
      <form id="person-enrich-form">
        <input type="email" id="person-enrich-email-input" placeholder="Email (e.g., patrick@stripe.com)" required />
        <button type="submit">Enrich Person</button>
      </form>
      <pre id="person-enrich-result"></pre>
    </section>
  </div>

  <script>
    const API_KEY = '33e722a2e0f68329697a21c508f50694a9c6bd26';

    async function fetchData(url, resultBox, transform) {
      resultBox.textContent = 'Searching...';
      try {
        const resp = await fetch(url);
        const data = await resp.json();
        resultBox.textContent = transform(data);
      } catch (err) {
        resultBox.textContent = 'Request failed.';
      }
    }

    document.getElementById('person-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const domain = document.getElementById('domain-input').value.trim();
      const first = document.getElementById('first-name-input').value.trim();
      const last = document.getElementById('last-name-input').value.trim();
      const resultBox = document.getElementById('person-result');
      const url = `https://api.hunter.io/v2/email-finder?domain=${domain}&first_name=${first}&last_name=${last}&api_key=${API_KEY}`;
      fetchData(url, resultBox, data => data.data?.email ? `✅ Found: ${data.data.email}` : '❌ No email found');
    });

    document.getElementById('domain-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const domain = document.getElementById('company-domain-input').value.trim();
      const resultBox = document.getElementById('domain-result');
      const url = `https://api.hunter.io/v2/domain-search?domain=${domain}&api_key=${API_KEY}`;
      fetchData(url, resultBox, data =>
        data.data?.emails?.length ?
          data.data.emails.map(e => `📧 ${e.value} | ${e.first_name} ${e.last_name} (${e.position || 'N/A'})`).join('\n') :
          '❌ No emails found'
      );
    });

    document.getElementById('verify-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const email = document.getElementById('verify-email-input').value.trim();
      const resultBox = document.getElementById('verify-result');
      const url = `https://api.hunter.io/v2/email-verifier?email=${email}&api_key=${API_KEY}`;
      fetchData(url, resultBox, data => JSON.stringify(data.data, null, 2));
    });

    document.getElementById('enrich-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const domain = document.getElementById('enrich-domain-input').value.trim();
      const resultBox = document.getElementById('enrich-result');
      const url = `https://api.hunter.io/v2/companies/find?domain=${domain}&api_key=${API_KEY}`;
      fetchData(url, resultBox, data => JSON.stringify(data.data || data, null, 2));
    });

    document.getElementById('person-enrich-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const email = document.getElementById('person-enrich-email-input').value.trim();
      const resultBox = document.getElementById('person-enrich-result');
      const url = `https://api.hunter.io/v2/people/find?email=${email}&api_key=${API_KEY}`;
      fetchData(url, resultBox, data => JSON.stringify(data.data || data, null, 2));
    });
  </script>
</body>
</html>
