Initial ByteGeist Toolbox uptime checker

2026-07-23 00:54:01 -04:00
commit db1c3b5f19
15 changed files with 2147 additions and 0 deletions
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+
+  <!-- Makes the page scale 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. -->
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <main class="page-shell">
+    <section class="tool-panel">
+      <header class="tool-header">
+        <p class="eyebrow">BYTEGEIST TOOLBOX</p>
+        <h1>Website Uptime Checker</h1>
+        <p class="description">
+          Check whether a public website is reachable and see its status code,
+          response time, redirects, and final destination.
+        </p>
+      </header>
+
+      <form id="uptime-form" class="uptime-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>
+
+      <!-- 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>Check Result</h2>
+          <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>
+  </main>
+
+  <!-- Load the browser JavaScript after the HTML is available. -->
+  <script src="app.js"></script>
+</body>
+</html>