bytegeist-toolbox/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <!-- Makes the layout work correctly on phones and tablets. -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>ByteGeist Toolbox</title>

  <!-- Load the site stylesheet. -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="page-shell">
    <header class="site-header">
      <p class="eyebrow">BYTEGEIST TOOLBOX</p>
      <h1>Practical Website and Network Tools</h1>
      <p class="description">
        Check a website's current status, inspect its public DNS records,
        or review its SSL certificate.
      </p>
    </header>

    <nav class="tool-tabs" aria-label="Tool selection">
      <button
        id="status-tab"
        class="tool-tab active"
        type="button"
        data-tool="status-tool"
      >
        Website Status
      </button>

      <button
        id="dns-tab"
        class="tool-tab"
        type="button"
        data-tool="dns-tool"
      >
        DNS Lookup
      </button>

      <button
        id="ssl-tab"
        class="tool-tab"
        type="button"
        data-tool="ssl-tool"
      >
        SSL Certificate
      </button>
    </nav>

    <!-- Website Status Checker -->
    <section id="status-tool" class="tool-panel">
      <header class="tool-header">
        <h2>Website Status Checker</h2>
        <p class="tool-description">
          Check whether a public website is responding right now and view its
          status code, response time, redirects, and final destination.
        </p>
      </header>

      <form id="uptime-form" class="tool-form">
        <label for="url-input">Website URL</label>

        <div class="input-row">
          <input
            id="url-input"
            name="url"
            type="url"
            placeholder="https://example.com"
            autocomplete="url"
            required
          >

          <button id="check-button" type="submit">
            Check Website
          </button>
        </div>
      </form>

      <p id="status-message" class="status-message" aria-live="polite"></p>

      <section id="result-panel" class="result-panel" hidden>
        <div class="result-heading">
          <h3>Current Status</h3>
          <span id="online-badge" class="status-badge"></span>
        </div>

        <dl class="result-grid">
          <div>
            <dt>Status code</dt>
            <dd id="status-code">-</dd>
          </div>

          <div>
            <dt>Response time</dt>
            <dd id="response-time">-</dd>
          </div>

          <div>
            <dt>Redirects</dt>
            <dd id="redirect-count">-</dd>
          </div>

          <div>
            <dt>Checked at</dt>
            <dd id="checked-at">-</dd>
          </div>
        </dl>

        <div class="final-url-block">
          <span>Final URL</span>
          <a
            id="final-url"
            href="#"
            target="_blank"
            rel="noopener noreferrer"
          ></a>
        </div>
      </section>
    </section>

    <!-- DNS Lookup -->
    <section id="dns-tool" class="tool-panel" hidden>
      <header class="tool-header">
        <h2>DNS Lookup</h2>
        <p class="tool-description">
          Look up public A, AAAA, CNAME, MX, TXT, and NS records for a domain.
        </p>
      </header>

      <form id="dns-form" class="tool-form">
        <label for="hostname-input">Hostname or website URL</label>

        <div class="input-row">
          <input
            id="hostname-input"
            name="hostname"
            type="text"
            placeholder="example.com"
            autocomplete="off"
            required
          >

          <button id="dns-button" type="submit">
            Look Up DNS
          </button>
        </div>
      </form>

      <p id="dns-message" class="status-message" aria-live="polite"></p>

      <section id="dns-result-panel" class="result-panel" hidden>
        <div class="result-heading">
          <h3>DNS Records</h3>
          <span id="dns-hostname" class="hostname-badge"></span>
        </div>

        <div id="dns-records" class="dns-records"></div>

        <p id="dns-checked-at" class="dns-checked-at"></p>
      </section>
    </section>

    <!-- SSL Certificate Checker -->
    <section id="ssl-tool" class="tool-panel" hidden>
      <header class="tool-header">
        <h2>SSL Certificate Checker</h2>

        <p class="tool-description">
          Inspect the public TLS certificate for a website and view its issuer,
          expiration date, authorization status, protocol, cipher, and fingerprint.
        </p>
      </header>

      <form id="ssl-form" class="tool-form">
        <label for="ssl-hostname-input">Hostname or website URL</label>

        <div class="input-row">
          <input
            id="ssl-hostname-input"
            name="hostname"
            type="text"
            placeholder="example.com"
            autocomplete="off"
            required
          >

          <button id="ssl-button" type="submit">
            Check Certificate
          </button>
        </div>
      </form>

      <p
        id="ssl-message"
        class="status-message"
        aria-live="polite"
      ></p>

      <section id="ssl-result-panel" class="result-panel" hidden>
        <div class="result-heading">
          <h3>Certificate Details</h3>

          <span
            id="ssl-status-badge"
            class="status-badge"
          ></span>
        </div>

        <dl class="result-grid">
          <div>
            <dt>Hostname</dt>
            <dd id="ssl-hostname">-</dd>
          </div>

          <div>
            <dt>Days remaining</dt>
            <dd id="ssl-days-remaining">-</dd>
          </div>

          <div>
            <dt>Valid from</dt>
            <dd id="ssl-valid-from">-</dd>
          </div>

          <div>
            <dt>Expires</dt>
            <dd id="ssl-valid-to">-</dd>
          </div>

          <div>
            <dt>TLS protocol</dt>
            <dd id="ssl-protocol">-</dd>
          </div>

          <div>
            <dt>Cipher</dt>
            <dd id="ssl-cipher">-</dd>
          </div>

          <div>
            <dt>Resolved address</dt>
            <dd id="ssl-address">-</dd>
          </div>

          <div>
            <dt>Checked at</dt>
            <dd id="ssl-checked-at">-</dd>
          </div>
        </dl>

        <div class="certificate-detail-block">
          <span>Subject</span>
          <p id="ssl-subject">-</p>
        </div>

        <div class="certificate-detail-block">
          <span>Issuer</span>
          <p id="ssl-issuer">-</p>
        </div>

        <div class="certificate-detail-block">
          <span>SHA-256 fingerprint</span>
          <code id="ssl-fingerprint">-</code>
        </div>

        <div
          id="ssl-authorization-error-block"
          class="certificate-detail-block certificate-error"
          hidden
        >
          <span>Authorization error</span>
          <p id="ssl-authorization-error">-</p>
        </div>
      </section>
    </section>
  </main>

  <!-- Load browser JavaScript after the page elements exist. -->
  <script src="app.js"></script>
</body>
</html>