Initial ByteGeist Toolbox uptime checker
This commit is contained in:
Keith Casko
@@ -0,0 +1,76 @@
|
||||
// Get references to the page elements we need to update.
|
||||
const form = document.getElementById("uptime-form");
|
||||
const urlInput = document.getElementById("url-input");
|
||||
const checkButton = document.getElementById("check-button");
|
||||
const statusMessage = document.getElementById("status-message");
|
||||
const resultPanel = document.getElementById("result-panel");
|
||||
|
||||
const onlineBadge = document.getElementById("online-badge");
|
||||
const statusCode = document.getElementById("status-code");
|
||||
const responseTime = document.getElementById("response-time");
|
||||
const redirectCount = document.getElementById("redirect-count");
|
||||
const checkedAt = document.getElementById("checked-at");
|
||||
const finalUrl = document.getElementById("final-url");
|
||||
|
||||
// Listen for the form submission.
|
||||
form.addEventListener("submit", async (event) => {
|
||||
// Prevent the browser from reloading the page.
|
||||
event.preventDefault();
|
||||
|
||||
const url = urlInput.value.trim();
|
||||
|
||||
// Reset the interface before starting a new check.
|
||||
statusMessage.textContent = "Checking website...";
|
||||
statusMessage.className = "status-message";
|
||||
resultPanel.hidden = true;
|
||||
checkButton.disabled = true;
|
||||
checkButton.textContent = "Checking...";
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/uptime", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ url }),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// Handle API-level errors.
|
||||
if (!response.ok) {
|
||||
throw new Error(result.error || "The request failed.");
|
||||
}
|
||||
|
||||
// Handle unreachable or blocked destinations.
|
||||
if (!result.online) {
|
||||
throw new Error(result.error || "The website could not be reached.");
|
||||
}
|
||||
|
||||
// Fill in the successful result.
|
||||
onlineBadge.textContent = "Online";
|
||||
onlineBadge.className = "status-badge online";
|
||||
|
||||
statusCode.textContent = result.statusCode;
|
||||
responseTime.textContent = `${result.responseTimeMs} ms`;
|
||||
redirectCount.textContent = result.redirectCount;
|
||||
checkedAt.textContent = new Date(result.checkedAt).toLocaleString();
|
||||
|
||||
finalUrl.textContent = result.finalUrl;
|
||||
finalUrl.href = result.finalUrl;
|
||||
|
||||
statusMessage.textContent = "Website check completed.";
|
||||
resultPanel.hidden = false;
|
||||
} catch (error) {
|
||||
// Show a safe, readable message to the user.
|
||||
statusMessage.textContent = error.message;
|
||||
statusMessage.className = "status-message error";
|
||||
|
||||
onlineBadge.textContent = "Offline";
|
||||
onlineBadge.className = "status-badge offline";
|
||||
} finally {
|
||||
// Restore the button whether the request succeeded or failed.
|
||||
checkButton.disabled = false;
|
||||
checkButton.textContent = "Check Website";
|
||||
}
|
||||
});
|
||||
@@ -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>
|
||||
@@ -0,0 +1,236 @@
|
||||
/* Use predictable sizing for every element. */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
|
||||
--background: #080c14;
|
||||
--surface: #111827;
|
||||
--surface-light: #182235;
|
||||
--border: #2b3952;
|
||||
--text: #edf4ff;
|
||||
--muted: #9eabc0;
|
||||
--accent: #4ca6ff;
|
||||
--accent-hover: #78bcff;
|
||||
--success: #49d17d;
|
||||
--danger: #ff6b73;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top, #17253b 0%, var(--background) 42%);
|
||||
color: var(--text);
|
||||
font-family:
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.tool-panel {
|
||||
width: min(760px, 100%);
|
||||
padding: 32px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: rgba(17, 24, 39, 0.96);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: var(--accent);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 12px;
|
||||
font-size: clamp(2rem, 5vw, 3.25rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 62ch;
|
||||
margin-bottom: 28px;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.uptime-form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
input {
|
||||
min-width: 0;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #0b1220;
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(76, 166, 255, 0.16);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 13px 18px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: var(--accent);
|
||||
color: #04101c;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
min-height: 24px;
|
||||
margin: 18px 0 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.result-panel {
|
||||
margin-top: 24px;
|
||||
padding: 22px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--surface-light);
|
||||
}
|
||||
|
||||
.result-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.result-heading h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.status-badge.online {
|
||||
background: rgba(73, 209, 125, 0.14);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.status-badge.offline {
|
||||
background: rgba(255, 107, 115, 0.14);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-grid div {
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #0d1523;
|
||||
}
|
||||
|
||||
.result-grid dt,
|
||||
.final-url-block span {
|
||||
margin-bottom: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.result-grid dd {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.final-url-block {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
margin-top: 14px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #0d1523;
|
||||
}
|
||||
|
||||
.final-url-block a {
|
||||
color: var(--accent);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.tool-panel {
|
||||
padding: 24px 18px;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user