Upload files to "/"

2026-01-18 11:51:52 +00:00
commit 1c2e8c41d1
4 changed files with 235 additions and 0 deletions
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 CJ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,22 @@
+# Status-Page <a href='https://ko-fi.com/cjgameslive' target='_blank'><img height='35' align='right' style='border:0px;height:46px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
+
+A simple webpage to keep an eye on Uptime Kuma's [overall status](https://github.com/louislam/uptime-kuma/pull/2574). The page also displays the full date which refreshes at midnight, the current time which updates every second, and how long until the status refreshes.
+
+![Simple Dashboard](https://gitea.cjgameslive.com/CJ/Uptime-Kuma-Status-Page/raw/branch/main/img/Simple%20Dash.PNG)
+
+## Things you can personalise
+
+### Fonts
+You can set any font on line 13 `font-family: 'Play', sans-serif;`, the Play font is imported from Google on line 7 `<link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet">`.
+
+### Badges
+On lines 93 and 98 you will want to update the URL `http://..../api/status-page/{slug}/badge?label=Containers%20are` 
+
+- `...` will be the IP address or domain of your Uptime Kuma (e.g., `http://192.168.1.5:3001`).
+- `{slug}` being the status page (mine is just set to `all` to monitor all).
+- `?label=Containers%20are` can be changed to any label you want to appear on the badge, or can be dropped for a badge which will just display `Up`, `Down`, `Degraded`, or `Maintenance`.
+
+In this exaple the API call would be to `http://192.168.1.5:3000/api/status-page/all/badge?label=Containers%20are`
+
+### Refresh interval
+Unless you are going completely custom, the only other change I would reccomend is to line 164 and 168. `300000` sets the refresh interval for the badges to 5 minutes by default, and `300` sets the next update tomer to 5 minutes by default.
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Pi Status Dashboard</title>
+<link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet">
+<style>
+body {
+  background-color: #121212;
+  color: #fff;
+  margin: 0;
+  font-family: 'Play', sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+
+.badge-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 20px; /* Adjust margin as needed */
+}
+
+.badge {
+  font-size: 36px;
+  padding: 20px; /* Increased padding */
+  background-color: #444;
+  border-radius: 10px; /* Increased border radius */
+}
+
+.title {
+  font-size: 30px; /* Increased font size */
+  margin-bottom: 10px; /* Increased margin */
+}
+
+.divider {
+  width: 2px;
+  height: 150px; /* Increased height */
+  background-color: #777;
+  margin: 0 40px; /* Adjusted margin */
+}
+
+.clock {
+  font-size: 50px; /* Increased font size */
+  margin-top: 30px; /* Increased margin */
+}
+
+.date {
+  font-size: 45px; /* Increased font size */
+  margin-top: 30px; /* Increased margin */
+}
+
+.timer {
+  position: fixed;
+  bottom: 10px; /* Adjust this value to set the distance from the bottom */
+  right: 10px; /* Adjust this value to set the distance from the right */
+  font-size: 25px;
+  color: gray;
+}
+
+/* Ensure dark mode */
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: #121212;
+    color: #fff;
+  }
+
+  .badge {
+    background-color: #444;
+  }
+}
+</style>
+</head>
+<body>
+
+<div class="date" id="date"></div>
+<p>
+
+<div class="container">
+  <div class="badge-container">
+    <div class="title">Pi 4</div>
+    <img class="badge" id="badgeImage1" src="http://..../api/status-page/{slug}/badge?label=Containers%20arelabel=Containers%20are" alt="Pi 4 Status" width="250" height="40">
+  </div>
+  <div class="divider"></div>
+  <div class="badge-container">
+    <div class="title">Pi 5</div>
+    <img class="badge" id="badgeImage2" src="http://..../api/status-page/{slug}/badge?label=Containers%20are" alt="Pi 5 Status" width="250" height="40">
+  </div>
+</div>
+
+<div class="clock" id="clock"></div>
+
+<span id="timer" class="timer"></span>
+
+<script>
+// function to diplay the date
+function displayDate() {
+  var currentDate = new Date();
+  var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+  var dateString = currentDate.toLocaleDateString('en-GB', options);
+  document.getElementById('date').innerText = dateString;
+}
+
+// Function to update date every day
+function refreshAtMidnight() {
+  var now = new Date();
+  var night = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate() + 1, // the next day, midnight
+    0, 0, 0 // midnight
+  );
+  var timeToMidnight = night - now;
+  setTimeout(function () {
+    location.reload();
+  }, timeToMidnight);
+}
+
+// Initial call to update date at midnight
+displayDate();
+refreshAtMidnight();
+  
+// Function to update clock
+function updateClock() {
+  var now = new Date();
+  var hours = now.getHours().toString().padStart(2, '0');
+  var minutes = now.getMinutes().toString().padStart(2, '0');
+  var seconds = now.getSeconds().toString().padStart(2, '0');
+  var timeString = hours + ":" + minutes + ":" + seconds;
+  document.getElementById('clock').textContent = timeString;
+  setTimeout(updateClock, 1000); // Update every second
+}
+
+// Function to refresh badges every 5 minutes
+function refreshBadges() {
+  // Badge 1
+  var badgeImage1 = document.getElementById('badgeImage1');
+  var url1 = badgeImage1.src;
+  badgeImage1.src = "";
+  setTimeout(function() {
+    badgeImage1.src = url1;
+  }, 100);
+
+  // Badge 2
+  var badgeImage2 = document.getElementById('badgeImage2');
+  var url2 = badgeImage2.src;
+  badgeImage2.src = "";
+  setTimeout(function() {
+    badgeImage2.src = url2;
+  }, 100);
+
+  // Restart timer
+  updateTimer(300); // Restart the timer for 5 minutes
+}
+
+// Call refreshBadges() function every 5 minutes
+setInterval(refreshBadges, 300000); // 5 minutes
+
+// Function to update the countdown timer
+function updateTimer(seconds) {
+  let timerElement = document.getElementById('timer');
+  if (!timerElement) {
+    const newTimerElement = document.createElement('span');
+    newTimerElement.id = 'timer';
+    newTimerElement.className = 'timer';
+    document.body.appendChild(newTimerElement);
+    timerElement = newTimerElement;
+  }
+
+  let countdown = seconds;
+  const timerInterval = setInterval(() => {
+    const minutes = Math.floor(countdown / 60);
+    const remainingSeconds = countdown % 60;
+
+    if (countdown <= 0) {
+      clearInterval(timerInterval);
+      timerElement.textContent = ''; // Clear timer text
+      // Call any additional function needed after countdown reaches 0
+    } else {
+      timerElement.textContent = 'Next update in ' + minutes + ' min ' + remainingSeconds + ' sec';
+    }
+    countdown--;
+  }, 1000);
+}
+
+// Call updateTimer(seconds) with the desired time interval (in seconds)
+updateTimer(300); // This example sets the timer to 5 minutes (300 seconds)
+
+// Initial call to update clock
+updateClock();
+</script>
+</body>
+</html>