Update code

CringeStudios · Oct 13, 2024 · 5694abc · 5694abc
1 parent 2e54c34
commit 5694abc
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -1 +1,22 @@
-Amogus
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Cringe Studios Status</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+	<header>
+		<h1>Cringe Studios Status</h1>
+		<p>Last Updated: <span id="last-updated"></span></p>
+	</header>
+	<main>
+		<ul id="services"></ul>
+	</main>
+	<script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,29 @@
+const statusEl = document.getElementById('services');
+const lastUpdatedEl = document.getElementById('last-updated');
+
+function updateStatus(data) {
+	lastUpdatedEl.textContent = new Date(data.time).toLocaleString();
+
+	statusEl.innerHTML = '';
+	data.services.forEach(service => {
+		const serviceItem = document.createElement('li');
+		serviceItem.classList.add('service');
+		serviceItem.classList.add(service.ok ? 'ok' : 'error');
+
+		const statusDot = document.createElement('div');
+		statusDot.classList.add('status');
+		serviceItem.appendChild(statusDot);
+
+		const serviceName = document.createElement('span');
+		serviceName.classList.add('name');
+		serviceName.textContent = service.name;
+		serviceItem.appendChild(serviceName);
+
+		statusEl.appendChild(serviceItem);
+	});
+}
+
+fetch('https://amogus.cringe-studios.com/api/status')
+	.then(response => response.json())
+	.then(data => updateStatus(data))
+	.catch(error => console.error('Error fetching status:', error));
diff --git a/style.css b/style.css
@@ -0,0 +1,50 @@
+body {
+	font-family: sans-serif;
+	margin: 0;
+	padding: 20px;
+}
+
+header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
+h1 {
+	font-size: 2em;
+	margin: 0;
+}
+
+.service {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10px;
+}
+
+.service .name {
+	flex-grow: 1;
+	font-weight: bold;
+}
+
+.service.ok .name {
+	color: green;
+}
+
+.service.error .name {
+	color: red;
+}
+
+.service .status {
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+}
+
+.service.ok .status {
+	background-color: green;
+}
+
+.service.error .status {
+	background-color: red;
+}