Split into multiple files

2023-06-02 15:47:33 +02:00
parent f25e48d084
commit 8aa255b91a
5 changed files with 231 additions and 183 deletions
--- a/template.html
+++ b/template.html
@ -0,0 +1,125 @@
+<html>
+<head>
+	<title>Website Status</title>
+	<style>
+		body {
+			font-family: Arial, sans-serif;
+			background-color: #f3f3f3;
+			padding: 20px;
+			margin: 0;
+		}
+
+		h1 {
+			color: #333;
+			text-align: center;
+		}
+
+		.container {
+			max-width: 800px;
+			margin: 0 auto;
+			background-color: #fff;
+			padding: 20px;
+			border-radius: 5px;
+			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+		}
+
+		.website {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 10px;
+			padding: 10px;
+			border-radius: 5px;
+			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+			background-color: #f8f8f8;
+		}
+
+		.status {
+			display: inline-block;
+			width: 10px;
+			height: 10px;
+			border-radius: 2px;
+			margin-right: 5px;
+		}
+
+		.status-green {
+			background-color: #27ae60;
+		}
+
+		.status-red {
+			background-color: #e74c3c;
+		}
+
+		.website-text {
+			display: flex;
+			align-items: center;
+		}
+
+		.website-description {
+			margin-left: 10px;
+			font-weight: bold;
+		}
+
+		.website-url {
+			margin-left: 10px;
+			color: #333;
+			text-decoration: none;
+		}
+
+		.website-url:hover {
+			text-decoration: underline;
+		}
+
+		.icon {
+			width: 20px;
+			height: 20px;
+			margin-right: 5px;
+		}
+	</style>
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+	<script>
+	$(document).ready(function() {
+		$(".website").each(function() {
+			var website = $(this);
+			var url = website.find(".website-url").attr("href");
+			$.ajax({
+				url: "/check?url=" + encodeURIComponent(url),
+				success: function(response) {
+					var isUp = response.isUp;
+					var statusElement = website.find(".status");
+					statusElement.removeClass("status-green status-red");
+					statusElement.addClass(isUp ? "status-green" : "status-red");
+				},
+				error: function() {
+					var statusElement = website.find(".status");
+					statusElement.removeClass("status-green");
+					statusElement.addClass("status-red");
+				}
+			});
+		});
+	});
+</script>
+
+</head>
+<body>
+	<div class="container">
+		<h1>Ruby's Home Server Status</h1>
+		{{range .}}
+		<div class="website">
+			<div class="website-text">
+				<div class="status"></div>
+				<div class="website-description" href="{{.WebsiteURL}}">
+					{{.Description}}
+				</div>
+			</div>
+			<a class="website-url" href="{{.WebsiteURL}}" target="_blank">
+				{{.WebsiteURL}}
+				{{if .HasIcon}}
+					<img class="icon" src="/static/{{.IconURL}}" alt="Icon">
+				{{end}}
+			</a>
+		</div>
+		{{end}}
+	</div>
+</body>
+</html>