tdpeuter/down-message
tdpeuter/down-message
1
Fork 0
Code Issues 2 Pull requests Releases Activity

Add broken status message

Browse source
This commit is contained in:
Tibo De Peuter 2023-08-04 01:29:43 +02:00
parent f47c6fb355
commit 9873502b08
3 changed files with 93 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -1,16 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Service unavailable</title>
<html lang="en">
<head>
<title>Service unavailable</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="assets/icon.jpg">
<meta name="color-scheme" content="light dark">
<meta name="robots" content="noindex">
</head>
<body>
<h1>Oh no!</h1>
<h1>Oh, no!</h1>
<p>The website you are trying to reach is currently down. Your URL works, but the system is in maintenance and powered off temporarily.</p>
<p>Please come back later!</p>
<p>Kind regards, <a href="https://tibo.depeuter.dev">Tibo De Peuter</a></p>
<div id="checkContainer"></div>
<img src="/assets/oh-no-kitten.jpg" alt="kitten holding paw to forehead"/>
<script src="script.js"></script>
</body>
</html>

64
script.js Normal file
View file

@ -0,0 +1,64 @@
async function websiteUp(url) {
// TODO Fix CORS
try {
const response = await fetch(url, { method: 'head' });
console.log(response);
return false;
} catch (error) {
console.error(`An error occurred while checking the URL '${url}': ${error.message}`);
}
}
async function check(destination, container, dot, message, button) {
const destinationUp = await websiteUp(destination);
if (destinationUp) {
console.log('Destination is back up');
dot.className = 'dot green';
message.textContent = 'URL is back online.';
button.textContent = "Go to URL.";
button.onclick = function () {
window.location.href = destination;
};
} else {
dot.className = 'dot red';
message.textContent = 'URL is still down.';
button.textContent = "Check again.";
button.onclick = function () {
check(destination, container, dot, message, button);
};
}
button.style.visibility = 'visible';
}
function createCheckButton(destination) {
const dot = document.createElement('span');
dot.className = 'dot orange';
dot.id = 'checkDot';
const message = document.createElement('span');
message.textContent = 'Checking availability...';
const button = document.createElement('button');
button.style.visibility = 'hidden';
const container = document.getElementById('checkContainer');
container.appendChild(dot);
container.appendChild(message);
container.appendChild(button);
check(destination, container, dot, message, button);
}
function checkDestination() {
const url = window.location.search;
const searchParams = new URLSearchParams(url);
const destination = searchParams.get('destination');
if (destination) {
createCheckButton(destination);
}
}
checkDestination();

19
style.css Normal file
View file

@ -0,0 +1,19 @@
.dot {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.dot.green {
background-color: green;
}
.dot.orange {
background-color: orange;
}
.dot.red {
background-color: red;
}