init
This commit is contained in:
Waylon S. Walker
commit
8631733274
14 changed files with 1719 additions and 0 deletions
BIN
clock/favicon.ico
Executable file
BIN
clock/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
87
clock/index.html
Normal file
87
clock/index.html
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Large Web Clock</title>
|
||||
<meta property="og:title" content="Large Web Clock" />
|
||||
<meta property="og:image" content="http://shots.wayl.one/shot/?url=https://clock.wayl.one/&height=630&width=1200&scaled_width=1200&scaled_height=630&selectors=" />
|
||||
<meta property="og:description" content="A large display clock, it just shows the time." />
|
||||
<meta property="og:url" content="https://clock.wayl.one/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Large Web Clock" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Large Web Clock" />
|
||||
<meta name="twitter:description" content="A large display clock, it just shows the time." />
|
||||
<meta name="twitter:image" content="http://shots.wayl.one/shot/?url=https://clock.wayl.one/&height=630&width=1200&scaled_width=1200&scaled_height=640&selectors=" />
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: black;
|
||||
|
||||
background: black url('/triangles.svg') center/cover;
|
||||
color: lime;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: monospace;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#clock {
|
||||
font-size: 10vw;
|
||||
padding: 0 5vw;
|
||||
text-align: center;
|
||||
white-space: nowrap; /* Prevent line breaks */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="clock">12:00:00 AM</div>
|
||||
|
||||
<script>
|
||||
const clock = document.getElementById("clock");
|
||||
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
let hours = now.getHours();
|
||||
const minutes = String(now.getMinutes()).padStart(2, "0");
|
||||
const seconds = String(now.getSeconds()).padStart(2, "0");
|
||||
const ampm = hours >= 12 ? "PM" : "AM";
|
||||
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // Convert 0 to 12
|
||||
|
||||
const formatted = `${String(hours).padStart(2, "0")}:${minutes}:${seconds} ${ampm}`;
|
||||
clock.innerHTML = formatted; // innerHTML to support
|
||||
}
|
||||
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
// Wake Lock support
|
||||
let wakeLock = null;
|
||||
async function requestWakeLock() {
|
||||
try {
|
||||
if ('wakeLock' in navigator) {
|
||||
wakeLock = await navigator.wakeLock.request('screen');
|
||||
console.log("Wake lock acquired");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Wake lock error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (wakeLock !== null && document.visibilityState === "visible") {
|
||||
requestWakeLock();
|
||||
}
|
||||
});
|
||||
|
||||
requestWakeLock();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
clock/triangles.svg
Normal file
1
clock/triangles.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 160 80'><rect fill='#000000' width='160' height='80'/><g fill='#E416FF' fill-opacity='0.04'><polygon points='0 10 0 0 10 0'/><polygon points='0 40 0 30 10 30'/><polygon points='0 30 0 20 10 20'/><polygon points='0 70 0 60 10 60'/><polygon points='0 80 0 70 10 70'/><polygon points='50 80 50 70 60 70'/><polygon points='10 20 10 10 20 10'/><polygon points='10 40 10 30 20 30'/><polygon points='20 10 20 0 30 0'/><polygon points='10 10 10 0 20 0'/><polygon points='30 20 30 10 40 10'/><polygon points='20 20 20 40 40 20'/><polygon points='40 10 40 0 50 0'/><polygon points='40 20 40 10 50 10'/><polygon points='40 40 40 30 50 30'/><polygon points='30 40 30 30 40 30'/><polygon points='40 60 40 50 50 50'/><polygon points='50 30 50 20 60 20'/><polygon points='40 60 40 80 60 60'/><polygon points='50 40 50 60 70 40'/><polygon points='60 0 60 20 80 0'/><polygon points='70 30 70 20 80 20'/><polygon points='70 40 70 30 80 30'/><polygon points='60 60 60 80 80 60'/><polygon points='80 10 80 0 90 0'/><polygon points='70 40 70 60 90 40'/><polygon points='80 60 80 50 90 50'/><polygon points='60 30 60 20 70 20'/><polygon points='80 70 80 80 90 80 100 70'/><polygon points='80 10 80 40 110 10'/><polygon points='110 40 110 30 120 30'/><polygon points='90 40 90 70 120 40'/><polygon points='10 50 10 80 40 50'/><polygon points='110 60 110 50 120 50'/><polygon points='100 60 100 80 120 60'/><polygon points='110 0 110 20 130 0'/><polygon points='120 30 120 20 130 20'/><polygon points='130 10 130 0 140 0'/><polygon points='130 30 130 20 140 20'/><polygon points='120 40 120 30 130 30'/><polygon points='130 50 130 40 140 40'/><polygon points='120 50 120 70 140 50'/><polygon points='110 70 110 80 130 80 140 70'/><polygon points='140 10 140 0 150 0'/><polygon points='140 20 140 10 150 10'/><polygon points='140 40 140 30 150 30'/><polygon points='140 50 140 40 150 40'/><polygon points='140 70 140 60 150 60'/><polygon points='150 20 150 40 160 30 160 20'/><polygon points='150 60 150 50 160 50'/><polygon points='140 70 140 80 150 80 160 70'/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Add table
Add a link
Reference in a new issue