mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-18 19:50:58 -04:00
144 lines
4.9 KiB
JavaScript
144 lines
4.9 KiB
JavaScript
/////////////
|
|
// IMPORTS //
|
|
/////////////
|
|
|
|
dayjs.extend(window.dayjs_plugin_utc);
|
|
dayjs.extend(window.dayjs_plugin_timezone);
|
|
dayjs.extend(window.dayjs_plugin_advancedFormat);
|
|
|
|
////////////////////
|
|
// URL PARAMETERS //
|
|
////////////////////
|
|
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
|
|
///////////////////
|
|
// PAGE ELEMENTS //
|
|
///////////////////
|
|
|
|
const mainContainer = document.getElementById('main-container');
|
|
const line1 = document.getElementById('line1');
|
|
const line2 = document.getElementById('line2');
|
|
const line3 = document.getElementById('line3');
|
|
|
|
/////////////
|
|
// OPTIONS //
|
|
/////////////
|
|
|
|
const font = urlParams.get("font") || "";
|
|
const language = urlParams.get("language") || "en";
|
|
const timezone = urlParams.get("timezone") || "";
|
|
|
|
const enableLine1 = GetBooleanParam("enableLine1", true);
|
|
const line1Format = urlParams.get("line1Format") || "hh:mm:ss A";
|
|
const line1FontSize = GetIntParam("line1FontSize", 50);
|
|
const line1FontWeight = urlParams.get("line1FontWeight") || "700";
|
|
const line1FontColor = urlParams.get("line1FontColor") || "#ffffff";
|
|
const line1FontOpacity = urlParams.get("line1FontOpacity") || "1";
|
|
const line1TextTransform = urlParams.get("line1TextTransform") || "none";
|
|
const line1TextAlignment = urlParams.get("line1TextAlignment") || "center";
|
|
|
|
const enableLine2 = GetBooleanParam("enableLine2", true);
|
|
const line2Format = urlParams.get("line2Format") || "ddd, MMM D";
|
|
const line2FontSize = GetIntParam("line2FontSize", 40);
|
|
const line2FontWeight = urlParams.get("line2FontWeight") || "400";
|
|
const line2FontColor = urlParams.get("line2FontColor") || "#ffffff";
|
|
const line2FontOpacity = urlParams.get("line2FontOpacity") || "0.7";
|
|
const line2TextTransform = urlParams.get("line2TextTransform") || "none";
|
|
const line2TextAlignment = urlParams.get("line2TextAlignment") || "center";
|
|
|
|
const enableLine3 = GetBooleanParam("enableLine3", false);
|
|
const line3Format = urlParams.get("line3Format") || "ddd DD MMM YYYY hh:mm:ss A z";
|
|
const line3FontSize = GetIntParam("line3FontSize", 30);
|
|
const line3FontWeight = urlParams.get("line3FontWeight") || "600";
|
|
const line3FontColor = urlParams.get("line3FontColor") || "#ffffff";
|
|
const line3FontOpacity = urlParams.get("line3FontOpacity") || "1";
|
|
const line3TextTransform = urlParams.get("line3TextTransform") || "none";
|
|
const line3TextAlignment = urlParams.get("line3TextAlignment") || "center";
|
|
|
|
|
|
|
|
////////////////
|
|
// PAGE SETUP //
|
|
////////////////
|
|
|
|
// Set the font for the entire page if specified
|
|
if (font)
|
|
document.body.style.fontFamily = `'${font}'`;
|
|
|
|
// Hide lines that are not enabled
|
|
if (!enableLine1)
|
|
line1.style.display = "none";
|
|
if (!enableLine2)
|
|
line2.style.display = "none";
|
|
if (!enableLine3)
|
|
line3.style.display = "none";
|
|
|
|
|
|
|
|
////////////////
|
|
// CLOCKO //
|
|
////////////////
|
|
|
|
// Helper function to start the clock loop
|
|
function StartClock() {
|
|
// Check if any active format string includes milliseconds (e.g., 'S', 'SS', 'SSS')
|
|
const usesMilliseconds =
|
|
(enableLine1 && line1Format.includes('S')) ||
|
|
(enableLine2 && line2Format.includes('S')) ||
|
|
(enableLine3 && line3Format.includes('S'));
|
|
|
|
UpdateTime();
|
|
|
|
if (usesMilliseconds) {
|
|
function updateFrame() {
|
|
UpdateTime();
|
|
requestAnimationFrame(updateFrame);
|
|
}
|
|
requestAnimationFrame(updateFrame);
|
|
} else {
|
|
setInterval(UpdateTime, 1000);
|
|
}
|
|
}
|
|
|
|
function UpdateTime() {
|
|
const activeTimezone = timezone ? timezone : dayjs.tz.guess();
|
|
const now = dayjs().tz(activeTimezone);
|
|
|
|
if (enableLine1) line1.textContent = now.format(line1Format);
|
|
if (enableLine2) line2.textContent = now.format(line2Format);
|
|
if (enableLine3) line3.textContent = now.format(line3Format);
|
|
}
|
|
|
|
// Set the language and start the clock only after it's loaded
|
|
const script = document.createElement('script');
|
|
script.src = `https://cdn.jsdelivr.net/npm/dayjs@1/locale/${language}.js`;
|
|
script.onload = () => {
|
|
dayjs.locale(language);
|
|
StartClock();
|
|
};
|
|
script.onerror = () => {
|
|
console.warn(`Locale '${language}' failed to load. Falling back to English.`);
|
|
dayjs.locale('en');
|
|
StartClock();
|
|
};
|
|
document.head.appendChild(script);
|
|
|
|
|
|
/////////////
|
|
// STYLING //
|
|
/////////////
|
|
|
|
function ApplyStyling(el, fontSize, fontWeight, fontColor, fontOpacity, textTransform, textAlignment) {
|
|
el.style.fontSize = fontSize + "px";
|
|
el.style.fontWeight = fontWeight;
|
|
el.style.color = fontColor;
|
|
el.style.opacity = fontOpacity;
|
|
el.style.textTransform = textTransform;
|
|
el.style.textAlign = textAlignment;
|
|
}
|
|
|
|
ApplyStyling(line1, line1FontSize, line1FontWeight, line1FontColor, line1FontOpacity, line1TextTransform, line1TextAlignment);
|
|
ApplyStyling(line2, line2FontSize, line2FontWeight, line2FontColor, line2FontOpacity, line2TextTransform, line2TextAlignment);
|
|
ApplyStyling(line3, line3FontSize, line3FontWeight, line3FontColor, line3FontOpacity, line3TextTransform, line3TextAlignment); |