Add SSL certificate checker and tests

public/index.html

@@ -17,7 +17,8 @@
       <p class="eyebrow">BYTEGEIST TOOLBOX</p>
       <h1>Practical Website and Network Tools</h1>
       <p class="description">
-        Check a website's current status or inspect its public DNS records.
+        Check a website's current status, inspect its public DNS records,
+        or review its SSL certificate.
       </p>
     </header>
 
@@ -39,6 +40,15 @@
       >
         DNS Lookup
       </button>
+
+      <button
+        id="ssl-tab"
+        class="tool-tab"
+        type="button"
+        data-tool="ssl-tool"
+      >
+        SSL Certificate
+      </button>
     </nav>
 
     <!-- Website Status Checker -->
@@ -153,9 +163,123 @@
         <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>
+</html>