Added Spanish; new URL encoding scheme

static/css/styles.css

@@ -144,6 +144,36 @@ button:hover, .share a:hover, .share button:hover {
   margin-top: 0.5rem;
 }
 
+.language-selector {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+}
+
+.language-selector a {
+  padding: 0.4rem 0.75rem;
+  border-radius: calc(var(--radius) - 10px);
+  border: 1px solid color-mix(in oklab, var(--bg), white 20%);
+  background: color-mix(in oklab, var(--bg), white 7%);
+  color: inherit;
+  text-decoration: none;
+  font-size: 0.85rem;
+  font-weight: 500;
+  opacity: 0.7;
+  transition: opacity 0.2s, border-color 0.2s;
+}
+
+.language-selector a:hover {
+  opacity: 1;
+}
+
+.language-selector a.active {
+  opacity: 1;
+  border-color: var(--accent);
+  background: color-mix(in oklab, var(--accent), transparent 90%);
+}
+
 @media (max-width: 720px) {
   .grid { grid-template-columns: 1fr; }
   .countdown { grid-template-columns: repeat(2, minmax(0,1fr)); }

static/js/countdown.js

@@ -3,9 +3,33 @@
   const $ = (sel) => document.querySelector(sel);
   const qs = new URLSearchParams(location.search);
 
-  const targetISO = qs.get("target") || ($("#countdown")?.dataset.target || "");
-  const showMillis = (qs.get("millis") ?? ($("#countdown")?.dataset.showMillis || "0")) === "1";
-  const roundedUnit = qs.get("rounded_unit") || ($("#countdown")?.dataset.roundedUnit || "none");
+  // 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");
@@ -15,17 +39,17 @@
   // 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", qs.get("accent"));
-  setVar("--radius", (qs.get("radius") || "16") + "px");
-  setVar("--bg", qs.get("bg"));
-  setVar("--fg", qs.get("fg"));
-  const scheme = qs.get("scheme");
+  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 = qs.get("font");
+  const font = getParam("font", "f");
   if (font) root.style.setProperty("--font", font.includes(" ") ? `"${font}"` : font);
 
   if (!targetDate || isNaN(targetDate.valueOf())) {
-    statusEl.textContent = "Invalid or missing target date. Use the Edit link to set one.";
+    statusEl.textContent = t("invalid_date");
     return;
   }
 
@@ -57,7 +81,7 @@
       $("#m").textContent = "0";
       $("#s").textContent = "0";
       if (showMillis) $("#ms").textContent = "000";
-      statusEl.textContent = "🎉 It's time!";
+      statusEl.textContent = t("time_reached");
       return;
     }
 
@@ -83,8 +107,8 @@
     copyBtn.addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(location.href);
-        copyBtn.textContent = "Link copied!";
-        setTimeout(() => copyBtn.textContent = "Copy sharable link", 1500);
+        copyBtn.textContent = t("link_copied");
+        setTimeout(() => copyBtn.textContent = t("copy_link"), 1500);
       } catch (e) {
         alert("Copy failed: " + e);
       }