m.giller/giller.dev
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Initial status homepage

Browse source
This commit is contained in:
Maximilian Giller 2023-02-25 03:37:45 +01:00
commit c9f0a03c12
1 changed files with 100 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
index.html Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Giller</title>
<style>
body {
background-color: #1a1a1a;
color: #aaa;
font-family: "Fira Code", "Fira Mono", "Roboto Mono", "Lucida Console", "Courier New", monospace;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
.info {
color: #fff;
}
#sleep {
margin-top: 2em;
}
#container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
#vertical-center {
display: flex;
flex-direction: column;
width: 100vw;
}
#vertical-center,
#vertical-center>* {
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="vertical-center">
Currently:
<span id="status" class="info">...</span>
<div id="sleep"></div>
</div>
</div>
<script>
const url = "https://giller.dev/g/my-status";
function setText(id, text) {
document.getElementById(id).innerHTML = text;
}
function formatRemainingTime(totalSeconds) {
if (totalSeconds <= 0) {
return "should wake up anytime now"
}
const hours = Math.floor(totalSeconds / 3600);
if (hours > 24) {
return "over a day";
} else if (hours > 0) {
return hours + " hours remaining";
}
const minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
if (minutes > 0) {
return minutes + " minutes remaining";
}
const seconds = totalSeconds - (hours * 3600) - (minutes * 60);
return seconds + " seconds remaining";
}
fetch(url)
.then(response => response.json())
.then(data => {
setText("status", data.status);
if (data.status.toLowerCase() === "sleeping") {
const remainingText = formatRemainingTime(data.time_until_wake);
setText("sleep", "Time until wake up:<br><span class='info'>" + remainingText + "</span>");
}
});
</script>
</body>
</html>