Add DNS lookup tool and tests

public/index.html

@@ -3,27 +3,55 @@
 <head>
   <meta charset="UTF-8">
 
-  <!-- Makes the page scale correctly on phones and tablets. -->
+  <!-- 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 stylesheet from the public folder. -->
+  <!-- Load the site stylesheet. -->
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <main class="page-shell">
-    <section class="tool-panel">
+    <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 or inspect its public DNS records.
+      </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>
+    </nav>
+
+    <!-- Website Status Checker -->
+    <section id="status-tool" class="tool-panel">
       <header class="tool-header">
-        <p class="eyebrow">BYTEGEIST TOOLBOX</p>
-        <h1>Website Status Checker</h1>
-        <p class="description">
-          Check whether a public website is responding right now and view its status code,
-          response time, redirects, and final destination.
+        <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="uptime-form">
+      <form id="uptime-form" class="tool-form">
         <label for="url-input">Website URL</label>
 
         <div class="input-row">
@@ -42,13 +70,11 @@
         </div>
       </form>
 
-      <!-- JavaScript updates this message during loading and errors. -->
       <p id="status-message" class="status-message" aria-live="polite"></p>
 
-      <!-- Hidden until a result is returned. -->
       <section id="result-panel" class="result-panel" hidden>
         <div class="result-heading">
-          <h2>Current Status</h2>
+          <h3>Current Status</h3>
           <span id="online-badge" class="status-badge"></span>
         </div>
 
@@ -85,9 +111,51 @@
         </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>
   </main>
 
-  <!-- Load the browser JavaScript after the HTML is available. -->
+  <!-- Load browser JavaScript after the page elements exist. -->
   <script src="app.js"></script>
 </body>
-</html>
+</html>