121 lines
3.9 KiB
JavaScript
121 lines
3.9 KiB
JavaScript
|
|
(function() {
|
|
const $ = (sel) => document.querySelector(sel);
|
|
const qs = new URLSearchParams(location.search);
|
|
|
|
// Helper to get parameter from either long or short name
|
|
const getParam = (longName, shortName, defaultValue = "") => {
|
|
return qs.get(longName) || qs.get(shortName) || ($("#countdown")?.dataset[longName.replace('_', '')] || defaultValue);
|
|
};
|
|
|
|
const targetISO = getParam("target", "dt", "");
|
|
const showMillis = (getParam("millis", "m", "0") === "1");
|
|
const roundedUnit = getParam("rounded_unit", "ru", "none");
|
|
const lang = getParam("lang", "l", "en");
|
|
|
|
// Translations
|
|
const translations = {
|
|
en: {
|
|
time_reached: "🎉 It's time!",
|
|
invalid_date: "Invalid or missing target date. Use the Edit link to set one.",
|
|
copy_link: "Copy sharable link",
|
|
link_copied: "Link copied!"
|
|
},
|
|
es: {
|
|
time_reached: "🎉 ¡Es hora!",
|
|
invalid_date: "Fecha objetivo inválida o faltante. Usa el enlace Editar para establecer una.",
|
|
copy_link: "Copiar enlace compartible",
|
|
link_copied: "¡Enlace copiado!"
|
|
}
|
|
};
|
|
|
|
const t = (key) => translations[lang]?.[key] || translations.en[key] || key;
|
|
|
|
const targetDate = targetISO ? new Date(targetISO) : null;
|
|
const targetText = $("#targetText");
|
|
const statusEl = $("#status");
|
|
const msWrap = $("#millisWrap");
|
|
|
|
// Reflect chosen colors into CSS variables if passed via query
|
|
const root = document.documentElement;
|
|
const setVar = (k, v) => { if (v) root.style.setProperty(k, v); };
|
|
setVar("--accent", getParam("accent", "a"));
|
|
setVar("--radius", (getParam("radius", "r", "16")) + "px");
|
|
setVar("--bg", getParam("bg", "bg"));
|
|
setVar("--fg", getParam("fg", "fg"));
|
|
const scheme = getParam("scheme", "s");
|
|
if (scheme) root.setAttribute("data-scheme", scheme);
|
|
const font = getParam("font", "f");
|
|
if (font) root.style.setProperty("--font", font.includes(" ") ? `"${font}"` : font);
|
|
|
|
if (!targetDate || isNaN(targetDate.valueOf())) {
|
|
statusEl.textContent = t("invalid_date");
|
|
return;
|
|
}
|
|
|
|
targetText.textContent = targetDate.toString();
|
|
|
|
msWrap.hidden = !showMillis;
|
|
if (!showMillis && msWrap.parentNode) { msWrap.parentNode.removeChild(msWrap); }
|
|
|
|
function roundToUnit(ms, unit) {
|
|
if (unit === "none") return ms;
|
|
const map = {
|
|
minutes: 60_000,
|
|
hours: 3_600_000,
|
|
days: 86_400_000,
|
|
};
|
|
const size = map[unit] || 1;
|
|
return Math.round(ms / size) * size;
|
|
}
|
|
|
|
function tick() {
|
|
const now = new Date();
|
|
let diff = targetDate - now;
|
|
if (roundedUnit !== "none") {
|
|
diff = roundToUnit(diff, roundedUnit);
|
|
}
|
|
if (diff <= 0) {
|
|
$("#d").textContent = "0";
|
|
$("#h").textContent = "0";
|
|
$("#m").textContent = "0";
|
|
$("#s").textContent = "0";
|
|
if (showMillis) $("#ms").textContent = "000";
|
|
statusEl.textContent = t("time_reached");
|
|
return;
|
|
}
|
|
|
|
const totalSeconds = Math.floor(diff / 1000);
|
|
const days = Math.floor(totalSeconds / (3600*24));
|
|
const hours = Math.floor((totalSeconds % (3600*24)) / 3600);
|
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
|
const seconds = totalSeconds % 60;
|
|
const millis = diff % 1000;
|
|
|
|
$("#d").textContent = String(days);
|
|
$("#h").textContent = String(hours).padStart(2, "0");
|
|
$("#m").textContent = String(minutes).padStart(2, "0");
|
|
$("#s").textContent = String(seconds).padStart(2, "0");
|
|
if (showMillis) $("#ms").textContent = String(millis).padStart(3, "0");
|
|
|
|
requestAnimationFrame(tick);
|
|
}
|
|
|
|
// Shareable link
|
|
const copyBtn = $("#copyLink");
|
|
if (copyBtn) {
|
|
copyBtn.addEventListener("click", async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(location.href);
|
|
copyBtn.textContent = t("link_copied");
|
|
setTimeout(() => copyBtn.textContent = t("copy_link"), 1500);
|
|
} catch (e) {
|
|
alert("Copy failed: " + e);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Start
|
|
requestAnimationFrame(tick);
|
|
})();
|