waylon/simplesites
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
Waylon S. Walker 2025-05-24 17:58:54 -05:00
commit 8631733274
14 changed files with 1719 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
timer/favicon.ico Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

163
timer/index.html Normal file
View file

@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Countdown Timer</title>
<description>A simple large display countdown timer, its just counts down</description>
<meta property="og:title" content="Countdown Timer" />
<meta property="og:image" content="http://shots.wayl.one/shot/?url=https://timer.wayl.one/&height=630&width=1200&scaled_width=1200&scaled_height=630&selectors=" />
<meta property="og:description" content="A simple large display countdown timer, its just counts down" />
<meta property="og:url" content="https://timer.wayl.one/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Countdown Timer" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Countdown Timer" />
<meta name="twitter:description" content="A simple large display countdown timer, its just counts down" />
<meta name="twitter:image" content="http://shots.wayl.one/shot/?url=https://timer.wayl.one/&height=630&width=1200&scaled_width=1200&scaled_height=640&selectors=" />
<style>
html, body {
margin: 0;
padding: 0;
background: black;
color: lime;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: monospace;
user-select: none;
}
#title {
font-size: 4vw;
margin-bottom: 2vh;
outline: none;
text-align: center;
}
#countdown {
font-size: 20vw;
padding: 0 5vw;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
</style>
</head>
<body>
<div id="title" contenteditable="true">Click to Edit Title</div>
<div id="countdown" contenteditable="true">00:05:00</div>
<script>
const countdownEl = document.getElementById("countdown");
let endTime = null;
let timerRunning = false;
let wakeLock = null;
function parseTime(text) {
const parts = text.split(":").map(p => parseInt(p, 10));
if (parts.length === 3) {
const [h, m, s] = parts;
return (h * 3600 + m * 60 + s) * 1000;
} else if (parts.length === 2) {
const [m, s] = parts;
return (m * 60 + s) * 1000;
}
return 0;
}
function formatTime(ms) {
let totalSeconds = Math.floor(ms / 1000);
const h = Math.floor(totalSeconds / 3600);
const m = Math.floor((totalSeconds % 3600) / 60);
const s = totalSeconds % 60;
return (
String(h).padStart(2, "0") + ":" +
String(m).padStart(2, "0") + ":" +
String(s).padStart(2, "0")
);
}
function startCountdown(durationMs) {
const now = Date.now();
endTime = now + durationMs;
timerRunning = true;
updateCountdown();
}
function updateCountdown() {
if (!timerRunning) return;
const now = Date.now();
const remaining = endTime - now;
if (remaining <= 0) {
countdownEl.textContent = "00:00:00";
timerRunning = false;
return;
}
countdownEl.textContent = formatTime(remaining);
requestAnimationFrame(updateCountdown);
}
countdownEl.addEventListener("blur", () => {
const text = countdownEl.textContent.trim();
const ms = parseTime(text);
if (ms > 0) {
startCountdown(ms);
}
});
countdownEl.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
countdownEl.blur();
e.preventDefault();
}
});
// Support query params (e.g. ?min=3&sec=30)
function getInitialTimeFromQuery(urlParams) {
const hr = parseInt(urlParams.get("hr") || "0", 10);
const min = parseInt(urlParams.get("min") || "0", 10);
const sec = parseInt(urlParams.get("sec") || "0", 10);
const totalMs = (hr * 3600 + min * 60 + sec) * 1000;
return totalMs > 0 ? totalMs : 5 * 60 * 1000; // default to 5 min
}
// Keep screen awake
async function requestWakeLock() {
try {
if ("wakeLock" in navigator) {
wakeLock = await navigator.wakeLock.request("screen");
console.log("Wake lock acquired");
}
} catch (err) {
console.warn("Wake lock not available:", err);
}
}
document.addEventListener("visibilitychange", () => {
if (wakeLock && document.visibilityState === "visible") {
requestWakeLock();
}
});
// Start
const urlParams = new URLSearchParams(window.location.search);
const initialMs = getInitialTimeFromQuery(urlParams);
countdownEl.textContent = formatTime(initialMs);
const title = urlParams.get("title");
if (title) {
document.getElementById("title").textContent = title;
}
startCountdown(initialMs);
requestWakeLock();
</script>
</body>
</html>