chore(HTML): 添加 desktop-clock

HTML/desktop-clock/app.js

@@ -0,0 +1,281 @@
+(function () {
+  "use strict";
+
+  var config = window.DesktopClock;
+  var background = window.DesktopClockBackground;
+  var settings = config.loadSettings();
+  var activeMode = "clock";
+  var wakeLock = null;
+
+  var clockTime = document.getElementById("clock-time");
+  var dateLine = document.getElementById("date-line");
+  var period = document.getElementById("period");
+  var timezone = document.getElementById("timezone");
+  var monthIndex = document.getElementById("month-index");
+  var dayIndex = document.getElementById("day-index");
+  var dayProgressBar = document.getElementById("day-progress-bar");
+  var dayProgressValue = document.getElementById("day-progress-value");
+  var statusText = document.getElementById("status-text");
+  var toast = document.getElementById("toast");
+
+  var stopwatch = { running: false, elapsed: 0, startedAt: 0, frame: 0 };
+  var stopwatchDisplay = document.getElementById("stopwatch-display");
+  var stopwatchToggle = document.getElementById("stopwatch-toggle");
+  var stopwatchReset = document.getElementById("stopwatch-reset");
+
+  var timer = { running: false, duration: 0, remaining: 0, endsAt: 0, frame: 0 };
+  var timerDisplay = document.getElementById("timer-display");
+  var timerEditor = document.getElementById("timer-editor");
+  var timerToggle = document.getElementById("timer-toggle");
+  var timerReset = document.getElementById("timer-reset");
+  var quickTimes = document.getElementById("quick-times");
+  var timerInputs = ["timer-hours", "timer-minutes", "timer-seconds"].map(function (id) {
+    return document.getElementById(id);
+  });
+
+  function pad(number, length) {
+    return String(number).padStart(length || 2, "0");
+  }
+
+  function renderClock() {
+    var now = new Date();
+    var hours = now.getHours();
+    var displayHours = hours;
+    var periodText = "";
+
+    if (settings.hourCycle === "12") {
+      periodText = hours >= 12 ? "下午" : "上午";
+      displayHours = hours % 12 || 12;
+    }
+
+    var secondsMarkup = settings.showSeconds ? '<span class="seconds">:' + pad(now.getSeconds()) + "</span>" : "";
+    clockTime.innerHTML = pad(displayHours) + ":" + pad(now.getMinutes()) + secondsMarkup;
+    clockTime.dateTime = now.toISOString();
+    period.textContent = periodText;
+    period.hidden = !periodText;
+    dateLine.hidden = !settings.showDate;
+    dateLine.textContent = new Intl.DateTimeFormat("zh-CN", {
+      weekday: "long", year: "numeric", month: "long", day: "numeric"
+    }).format(now);
+    timezone.textContent = Intl.DateTimeFormat().resolvedOptions().timeZone || "本地时间";
+    monthIndex.textContent = new Intl.DateTimeFormat("en", { month: "short" }).format(now).toUpperCase();
+    dayIndex.textContent = pad(now.getDate());
+    var elapsedToday = hours * 3600 + now.getMinutes() * 60 + now.getSeconds();
+    var dayPercent = elapsedToday / 86400 * 100;
+    dayProgressBar.style.height = dayPercent + "%";
+    dayProgressValue.textContent = Math.floor(dayPercent) + "%";
+  }
+
+  function formatCounter(milliseconds, showCentiseconds) {
+    var totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+    var hours = Math.floor(totalSeconds / 3600);
+    var minutes = Math.floor(totalSeconds % 3600 / 60);
+    var seconds = totalSeconds % 60;
+    var main = hours > 0 ? pad(hours) + ":" + pad(minutes) + ":" + pad(seconds) : pad(minutes) + ":" + pad(seconds);
+    return showCentiseconds ? main + "<span>." + pad(Math.floor(milliseconds % 1000 / 10)) + "</span>" : main;
+  }
+
+  function updateStopwatch() {
+    if (stopwatch.running) stopwatch.elapsed = performance.now() - stopwatch.startedAt;
+    stopwatchDisplay.innerHTML = formatCounter(stopwatch.elapsed, true);
+    if (stopwatch.running) stopwatch.frame = requestAnimationFrame(updateStopwatch);
+  }
+
+  function toggleStopwatch() {
+    stopwatch.running = !stopwatch.running;
+    if (stopwatch.running) {
+      stopwatch.startedAt = performance.now() - stopwatch.elapsed;
+      stopwatchToggle.textContent = "暂停";
+      stopwatchReset.disabled = true;
+      statusText.textContent = "秒表计时中";
+      updateStopwatch();
+    } else {
+      cancelAnimationFrame(stopwatch.frame);
+      stopwatchToggle.textContent = "继续";
+      stopwatchReset.disabled = false;
+      statusText.textContent = "秒表已暂停";
+    }
+  }
+
+  function resetStopwatch() {
+    stopwatch.elapsed = 0;
+    stopwatchToggle.textContent = "开始";
+    stopwatchReset.disabled = true;
+    stopwatchDisplay.innerHTML = "00:00<span>.00</span>";
+    statusText.textContent = "准备就绪";
+  }
+
+  function readTimerDuration() {
+    var values = timerInputs.map(function (input) {
+      var max = Number(input.max);
+      var value = Math.max(0, Math.min(max, Number(input.value) || 0));
+      input.value = value;
+      return value;
+    });
+    return (values[0] * 3600 + values[1] * 60 + values[2]) * 1000;
+  }
+
+  function renderTimer() {
+    timerDisplay.innerHTML = formatCounter(timer.remaining, false);
+  }
+
+  function updateTimer() {
+    if (!timer.running) return;
+    timer.remaining = Math.max(0, timer.endsAt - Date.now());
+    renderTimer();
+    if (timer.remaining <= 0) {
+      finishTimer();
+      return;
+    }
+    timer.frame = requestAnimationFrame(updateTimer);
+  }
+
+  function toggleTimer() {
+    if (!timer.running && timer.remaining <= 0) {
+      timer.duration = readTimerDuration();
+      timer.remaining = timer.duration;
+      if (!timer.duration) {
+        showToast("请先设置倒计时时长");
+        return;
+      }
+      timerEditor.hidden = true;
+      quickTimes.hidden = true;
+      timerDisplay.hidden = false;
+    }
+
+    timer.running = !timer.running;
+    if (timer.running) {
+      timer.endsAt = Date.now() + timer.remaining;
+      timerToggle.textContent = "暂停";
+      timerReset.disabled = true;
+      statusText.textContent = "倒计时进行中";
+      requestWakeLock();
+      updateTimer();
+    } else {
+      cancelAnimationFrame(timer.frame);
+      timerToggle.textContent = "继续";
+      timerReset.disabled = false;
+      statusText.textContent = "倒计时已暂停";
+      releaseWakeLock();
+    }
+  }
+
+  function resetTimer() {
+    cancelAnimationFrame(timer.frame);
+    timer.running = false;
+    timer.remaining = 0;
+    timerToggle.textContent = "开始";
+    timerReset.disabled = true;
+    timerDisplay.hidden = true;
+    timerEditor.hidden = false;
+    quickTimes.hidden = false;
+    statusText.textContent = "准备就绪";
+    releaseWakeLock();
+  }
+
+  function finishTimer() {
+    timer.running = false;
+    timer.remaining = 0;
+    timerToggle.textContent = "再次开始";
+    timerReset.disabled = false;
+    statusText.textContent = "倒计时已完成";
+    releaseWakeLock();
+    if (settings.soundEnabled) playAlarm();
+    showToast("倒计时结束");
+  }
+
+  function playAlarm() {
+    var AudioContext = window.AudioContext || window.webkitAudioContext;
+    if (!AudioContext) return;
+    var context = new AudioContext();
+    [0, 0.22, 0.44].forEach(function (delay) {
+      var oscillator = context.createOscillator();
+      var gain = context.createGain();
+      oscillator.frequency.value = 740;
+      gain.gain.setValueAtTime(0.001, context.currentTime + delay);
+      gain.gain.exponentialRampToValueAtTime(0.18, context.currentTime + delay + 0.02);
+      gain.gain.exponentialRampToValueAtTime(0.001, context.currentTime + delay + 0.15);
+      oscillator.connect(gain).connect(context.destination);
+      oscillator.start(context.currentTime + delay);
+      oscillator.stop(context.currentTime + delay + 0.16);
+    });
+  }
+
+  async function requestWakeLock() {
+    if (!settings.keepAwake || !("wakeLock" in navigator)) return;
+    try { wakeLock = await navigator.wakeLock.request("screen"); } catch (error) { wakeLock = null; }
+  }
+
+  function releaseWakeLock() {
+    if (wakeLock) wakeLock.release();
+    wakeLock = null;
+  }
+
+  function setMode(mode) {
+    activeMode = mode;
+    document.querySelectorAll("[data-mode]").forEach(function (button) {
+      var active = button.dataset.mode === mode;
+      button.classList.toggle("is-active", active);
+      button.setAttribute("aria-pressed", String(active));
+    });
+    document.querySelectorAll("[data-panel]").forEach(function (panel) {
+      var active = panel.dataset.panel === mode;
+      panel.hidden = !active;
+      panel.classList.toggle("is-active", active);
+    });
+    if (mode === "clock") statusText.textContent = "准备就绪";
+  }
+
+  function showToast(message) {
+    toast.textContent = message;
+    toast.classList.add("is-visible");
+    clearTimeout(showToast.timeout);
+    showToast.timeout = setTimeout(function () { toast.classList.remove("is-visible"); }, 2400);
+  }
+
+  document.querySelectorAll("[data-mode]").forEach(function (button) {
+    button.addEventListener("click", function () { setMode(button.dataset.mode); });
+  });
+  stopwatchToggle.addEventListener("click", toggleStopwatch);
+  stopwatchReset.addEventListener("click", resetStopwatch);
+  timerToggle.addEventListener("click", toggleTimer);
+  timerReset.addEventListener("click", resetTimer);
+  quickTimes.addEventListener("click", function (event) {
+    var button = event.target.closest("[data-minutes]");
+    if (!button) return;
+    timerInputs[0].value = 0;
+    timerInputs[1].value = button.dataset.minutes;
+    timerInputs[2].value = 0;
+    quickTimes.querySelectorAll("button").forEach(function (item) { item.classList.toggle("is-selected", item === button); });
+  });
+
+  document.getElementById("fullscreen-button").addEventListener("click", function () {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch(function () { showToast("当前浏览器不支持全屏"); });
+    } else document.exitFullscreen();
+  });
+
+  document.addEventListener("fullscreenchange", function () {
+    var button = document.getElementById("fullscreen-button");
+    button.setAttribute("aria-label", document.fullscreenElement ? "退出全屏" : "进入全屏");
+    button.title = button.getAttribute("aria-label");
+  });
+  document.addEventListener("visibilitychange", function () {
+    if (document.visibilityState === "visible" && timer.running) {
+      updateTimer();
+      requestWakeLock();
+    }
+  });
+  window.addEventListener("storage", function () {
+    settings = config.loadSettings();
+    config.applyTheme(settings.theme, settings.themeColors);
+    config.applyBackgroundColor(settings.backgroundColorEnabled, settings.backgroundColors, settings.theme);
+    background.apply(settings);
+    renderClock();
+  });
+
+  background.apply(settings);
+  renderClock();
+  setInterval(renderClock, 250);
+  timezone.title = new Date().toString().match(/\((.*)\)/)?.[1] || "";
+}());

HTML/desktop-clock/background.js

@@ -0,0 +1,87 @@
+(function () {
+  "use strict";
+
+  var DB_NAME = "desktop-clock-assets";
+  var STORE_NAME = "images";
+  var BACKGROUND_KEY = "background";
+  var activeUrl = "";
+
+  function openDatabase() {
+    return new Promise(function (resolve, reject) {
+      var request = indexedDB.open(DB_NAME, 1);
+      request.onupgradeneeded = function () { request.result.createObjectStore(STORE_NAME); };
+      request.onsuccess = function () { resolve(request.result); };
+      request.onerror = function () { reject(request.error); };
+    });
+  }
+
+  async function useStore(mode, action) {
+    var database = await openDatabase();
+    return new Promise(function (resolve, reject) {
+      var transaction = database.transaction(STORE_NAME, mode);
+      var request = action(transaction.objectStore(STORE_NAME));
+      request.onsuccess = function () { resolve(request.result); };
+      request.onerror = function () { reject(request.error); };
+      transaction.oncomplete = function () { database.close(); };
+    });
+  }
+
+  function save(file) {
+    return useStore("readwrite", function (store) { return store.put(file, BACKGROUND_KEY); });
+  }
+
+  function remove() {
+    clearActiveUrl();
+    return useStore("readwrite", function (store) { return store.delete(BACKGROUND_KEY); });
+  }
+
+  function getBlob() {
+    return useStore("readonly", function (store) { return store.get(BACKGROUND_KEY); });
+  }
+
+  function clearActiveUrl() {
+    if (activeUrl) URL.revokeObjectURL(activeUrl);
+    activeUrl = "";
+  }
+
+  async function getUrl() {
+    var blob = await getBlob();
+    clearActiveUrl();
+    if (!blob) return "";
+    activeUrl = URL.createObjectURL(blob);
+    return activeUrl;
+  }
+
+  function setEffects(target, settings) {
+    target.style.setProperty("--background-blur", settings.backgroundBlur + "px");
+    target.style.setProperty("--background-brightness", settings.backgroundBrightness + "%");
+  }
+
+  async function apply(settings) {
+    var root = document.documentElement;
+    setEffects(root, settings);
+    if (!settings.backgroundEnabled) {
+      root.classList.remove("has-custom-background");
+      root.style.removeProperty("--background-image");
+      return false;
+    }
+
+    try {
+      var url = await getUrl();
+      root.classList.toggle("has-custom-background", Boolean(url));
+      if (url) root.style.setProperty("--background-image", 'url("' + url + '")');
+      return Boolean(url);
+    } catch (error) {
+      root.classList.remove("has-custom-background");
+      return false;
+    }
+  }
+
+  window.DesktopClockBackground = {
+    apply: apply,
+    getUrl: getUrl,
+    remove: remove,
+    save: save,
+    setEffects: setEffects
+  };
+}());

HTML/desktop-clock/config.js

@@ -0,0 +1,112 @@
+(function () {
+  "use strict";
+
+  var STORAGE_KEY = "desktop-clock-settings-v1";
+  var defaults = {
+    hourCycle: "24",
+    showSeconds: true,
+    showDate: true,
+    theme: "dark",
+    themeColors: {
+      dark: { primary: "#b9f46a", secondary: "#ff9b74" },
+      light: { primary: "#547d1c", secondary: "#c34f2d" }
+    },
+    backgroundColorEnabled: false,
+    backgroundColors: {
+      dark: "#101311",
+      light: "#f3f4ef"
+    },
+    backgroundEnabled: false,
+    backgroundBlur: 0,
+    backgroundBrightness: 65,
+    soundEnabled: true,
+    keepAwake: false
+  };
+
+  function load() {
+    try {
+      var saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+      var settings = Object.assign({}, defaults, saved);
+      settings.themeColors = Object.assign({}, defaults.themeColors, saved.themeColors || {});
+      ["dark", "light"].forEach(function (mode) {
+        settings.themeColors[mode] = Object.assign({}, defaults.themeColors[mode], settings.themeColors[mode] || {});
+      });
+      settings.backgroundColors = Object.assign({}, defaults.backgroundColors, saved.backgroundColors || {});
+      if (saved.accentColor && !saved.themeColors) {
+        settings.themeColors.dark.primary = saved.accentColor;
+        settings.themeColors.light.primary = saved.accentColor;
+      }
+      if (saved.backgroundColor && !saved.backgroundColors) {
+        settings.backgroundColors.dark = saved.backgroundColor;
+        settings.backgroundColors.light = saved.backgroundColor;
+      }
+      return settings;
+    } catch (error) {
+      return Object.assign({}, defaults);
+    }
+  }
+
+  function save(settings) {
+    var next = Object.assign({}, defaults, settings);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    window.dispatchEvent(new CustomEvent("clocksettingschange", { detail: next }));
+    return next;
+  }
+
+  function normalizeColor(color, fallback) {
+    return /^#[0-9a-f]{6}$/i.test(color || "") ? color : fallback;
+  }
+
+  function getContrastColor(hex) {
+    var red = parseInt(hex.slice(1, 3), 16);
+    var green = parseInt(hex.slice(3, 5), 16);
+    var blue = parseInt(hex.slice(5, 7), 16);
+    return red * 0.299 + green * 0.587 + blue * 0.114 > 156 ? "#17200d" : "#ffffff";
+  }
+
+  function getEffectiveTheme(theme) {
+    return theme === "system" && window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : theme === "light" ? "light" : "dark";
+  }
+
+  function applyTheme(theme, themeColors) {
+    var activeTheme = getEffectiveTheme(theme || load().theme);
+    var colors = (themeColors || load().themeColors)[activeTheme];
+    var primary = normalizeColor(colors.primary, defaults.themeColors[activeTheme].primary);
+    var secondary = normalizeColor(colors.secondary, defaults.themeColors[activeTheme].secondary);
+    document.documentElement.dataset.theme = theme || load().theme;
+    document.documentElement.style.setProperty("--accent", primary);
+    document.documentElement.style.setProperty("--accent-text", getContrastColor(primary));
+    document.documentElement.style.setProperty("--warm", secondary);
+  }
+
+  function applyBackgroundColor(enabled, backgroundColors, theme) {
+    var root = document.documentElement;
+    if (!enabled) {
+      root.style.removeProperty("--bg");
+      return;
+    }
+    var activeTheme = getEffectiveTheme(theme || load().theme);
+    var colors = backgroundColors || load().backgroundColors;
+    root.style.setProperty("--bg", normalizeColor(colors[activeTheme], defaults.backgroundColors[activeTheme]));
+  }
+
+  window.DesktopClock = {
+    defaults: defaults,
+    loadSettings: load,
+    saveSettings: save,
+    applyTheme: applyTheme,
+    applyBackgroundColor: applyBackgroundColor,
+    getEffectiveTheme: getEffectiveTheme
+  };
+
+  var initialSettings = load();
+  applyTheme(initialSettings.theme, initialSettings.themeColors);
+  applyBackgroundColor(initialSettings.backgroundColorEnabled, initialSettings.backgroundColors, initialSettings.theme);
+  window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", function () {
+    var settings = load();
+    if (settings.theme === "system") {
+      applyTheme(settings.theme, settings.themeColors);
+      applyBackgroundColor(settings.backgroundColorEnabled, settings.backgroundColors, settings.theme);
+    }
+  });
+}());

HTML/desktop-clock/index.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#101311">
+  <title>桌面时钟</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body class="clock-page">
+  <main class="app-shell" data-scale-layout="fit" data-base-width="960" data-base-height="600">
+    <header class="topbar">
+      <a class="brand" href="index.html" aria-label="桌面时钟首页">
+        <span class="brand-mark" aria-hidden="true"></span>
+        <span>桌面时钟</span>
+      </a>
+      <div class="topbar-actions">
+        <button class="icon-button" id="fullscreen-button" type="button" aria-label="进入全屏" title="进入全屏">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
+        </button>
+        <a class="icon-button" href="settings.html" aria-label="打开设置" title="设置">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06a1.7 1.7 0 0 0-1.88-.34 1.7 1.7 0 0 0-1.03 1.56V21h-4v-.08A1.7 1.7 0 0 0 8.95 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.56-1.03H3v-4h.08A1.7 1.7 0 0 0 4.6 8.95a1.7 1.7 0 0 0-.34-1.88L4.2 7l2.83-2.83.06.06A1.7 1.7 0 0 0 8.95 4.6 1.7 1.7 0 0 0 9.98 3H10V3h4v.08a1.7 1.7 0 0 0 1.03 1.53 1.7 1.7 0 0 0 1.88-.34l.06-.06L19.8 7l-.06.06a1.7 1.7 0 0 0-.34 1.88A1.7 1.7 0 0 0 21 9.97h.04v4H21A1.7 1.7 0 0 0 19.4 15Z"/></svg>
+        </a>
+      </div>
+    </header>
+
+    <nav class="mode-switcher" aria-label="时钟模式">
+      <button class="mode-button is-active" type="button" data-mode="clock" aria-pressed="true">时钟</button>
+      <button class="mode-button" type="button" data-mode="stopwatch" aria-pressed="false">秒表</button>
+      <button class="mode-button" type="button" data-mode="timer" aria-pressed="false">倒计时</button>
+    </nav>
+
+    <section class="mode-panel is-active clock-panel" id="clock-panel" data-panel="clock" aria-label="当前时间">
+      <div class="clock-stage">
+        <div class="calendar-index" aria-hidden="true">
+          <span id="month-index">JAN</span>
+          <strong id="day-index">01</strong>
+        </div>
+        <div class="clock-main">
+          <p class="date-line" id="date-line"></p>
+          <div class="clock-row">
+            <span class="period" id="period"></span>
+            <time class="hero-time" id="clock-time" datetime="">00:00<span class="seconds">:00</span></time>
+          </div>
+          <p class="timezone" id="timezone"></p>
+        </div>
+        <div class="day-progress" aria-label="当日进度">
+          <span>DAY</span>
+          <div><i id="day-progress-bar"></i></div>
+          <output id="day-progress-value">0%</output>
+        </div>
+      </div>
+    </section>
+
+    <section class="mode-panel timer-panel" id="stopwatch-panel" data-panel="stopwatch" aria-label="秒表" hidden>
+      <p class="panel-kicker">经过时间</p>
+      <output class="counter" id="stopwatch-display">00:00<span>.00</span></output>
+      <div class="control-row">
+        <button class="secondary-button" id="stopwatch-reset" type="button" disabled>归零</button>
+        <button class="primary-button" id="stopwatch-toggle" type="button">开始</button>
+      </div>
+    </section>
+
+    <section class="mode-panel timer-panel" id="timer-panel" data-panel="timer" aria-label="倒计时" hidden>
+      <p class="panel-kicker">剩余时间</p>
+      <div class="timer-editor" id="timer-editor" aria-label="设置倒计时时长">
+        <label><input id="timer-hours" type="number" min="0" max="99" value="0" inputmode="numeric"><span>时</span></label>
+        <b>:</b>
+        <label><input id="timer-minutes" type="number" min="0" max="59" value="5" inputmode="numeric"><span>分</span></label>
+        <b>:</b>
+        <label><input id="timer-seconds" type="number" min="0" max="59" value="0" inputmode="numeric"><span>秒</span></label>
+      </div>
+      <output class="counter" id="timer-display" hidden>05:00</output>
+      <div class="quick-times" id="quick-times" aria-label="快捷时长">
+        <button type="button" data-minutes="1">1 分钟</button>
+        <button type="button" data-minutes="5">5 分钟</button>
+        <button type="button" data-minutes="15">15 分钟</button>
+        <button type="button" data-minutes="25">25 分钟</button>
+      </div>
+      <div class="control-row">
+        <button class="secondary-button" id="timer-reset" type="button" disabled>重置</button>
+        <button class="primary-button" id="timer-toggle" type="button">开始</button>
+      </div>
+    </section>
+
+    <footer class="statusbar">
+      <span id="status-text">准备就绪</span>
+      <span class="status-dot"><i></i>本地运行</span>
+    </footer>
+    <div class="toast" id="toast" role="status" aria-live="polite"></div>
+  </main>
+  <script src="config.js"></script>
+  <script src="background.js"></script>
+  <script src="app.js"></script>
+  <script src="layout.js"></script>
+</body>
+</html>

HTML/desktop-clock/layout.js

@@ -0,0 +1,32 @@
+(function () {
+  "use strict";
+
+  var layout = document.querySelector("[data-scale-layout]");
+  if (!layout) return;
+
+  var mode = layout.dataset.scaleLayout;
+  var baseWidth = Number(layout.dataset.baseWidth);
+  var baseHeight = Number(layout.dataset.baseHeight || 0);
+
+  function resizeLayout() {
+    var scale;
+    if (mode === "fit") {
+      scale = Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeight, 1.35);
+    } else {
+      scale = Math.min(window.innerWidth / baseWidth, 1.35);
+    }
+
+    scale = Math.max(scale, 0.1);
+    layout.style.setProperty("--page-scale", scale);
+
+    if (mode === "width") {
+      document.body.style.height = Math.max(window.innerHeight, layout.scrollHeight * scale) + "px";
+    }
+  }
+
+  window.addEventListener("resize", resizeLayout);
+  if (window.ResizeObserver && mode === "width") {
+    new ResizeObserver(resizeLayout).observe(layout);
+  }
+  resizeLayout();
+}());

HTML/desktop-clock/settings.html

@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#101311">
+  <title>设置 - 桌面时钟</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body class="settings-page">
+  <main class="settings-shell" data-scale-layout="width" data-base-width="800">
+    <header class="settings-header">
+      <a class="icon-button" href="index.html" aria-label="返回时钟" title="返回">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
+      </a>
+      <div>
+        <p>桌面时钟</p>
+        <h1>设置</h1>
+      </div>
+    </header>
+
+    <form id="settings-form">
+      <section class="settings-section" aria-labelledby="display-title">
+        <div class="section-heading">
+          <span>01</span>
+          <div><h2 id="display-title">时间显示</h2><p>调整时间与日期的呈现方式</p></div>
+        </div>
+        <div class="settings-list">
+          <label class="setting-row">
+            <span><strong>时间格式</strong><small>选择 24 小时制或 12 小时制</small></span>
+            <select name="hourCycle" aria-label="时间格式">
+              <option value="24">24 小时</option>
+              <option value="12">12 小时</option>
+            </select>
+          </label>
+          <label class="setting-row">
+            <span><strong>显示秒数</strong><small>在主时钟中显示实时秒数</small></span>
+            <input class="switch-input" name="showSeconds" type="checkbox">
+            <span class="switch" aria-hidden="true"></span>
+          </label>
+          <label class="setting-row">
+            <span><strong>显示日期</strong><small>在时间上方显示星期与完整日期</small></span>
+            <input class="switch-input" name="showDate" type="checkbox">
+            <span class="switch" aria-hidden="true"></span>
+          </label>
+        </div>
+      </section>
+
+      <section class="settings-section" aria-labelledby="appearance-title">
+        <div class="section-heading">
+          <span>02</span>
+          <div><h2 id="appearance-title">外观</h2><p>选择适合当前环境的界面风格</p></div>
+        </div>
+        <fieldset class="theme-options">
+          <legend>主题</legend>
+          <label class="theme-card theme-dark">
+            <input type="radio" name="theme" value="dark">
+            <span class="theme-preview"><i></i><b>12:48</b><em></em></span>
+            <span>深色</span>
+          </label>
+          <label class="theme-card theme-light">
+            <input type="radio" name="theme" value="light">
+            <span class="theme-preview"><i></i><b>12:48</b><em></em></span>
+            <span>浅色</span>
+          </label>
+          <label class="theme-card theme-system">
+            <input type="radio" name="theme" value="system">
+            <span class="theme-preview"><i></i><b>12:48</b><em></em></span>
+            <span>跟随系统</span>
+          </label>
+        </fieldset>
+        <div class="palette-settings">
+          <div class="accent-heading"><strong>主题色</strong><small>为深色与浅色界面分别设置主色和次色</small></div>
+          <div class="palette-switcher" role="tablist" aria-label="编辑配色模式">
+            <button class="palette-tab is-active" type="button" data-palette="dark" role="tab" aria-selected="true">深色配色</button>
+            <button class="palette-tab" type="button" data-palette="light" role="tab" aria-selected="false">浅色配色</button>
+          </div>
+          <div class="theme-presets" aria-label="主题配色预设">
+            <button class="theme-preset" type="button" aria-label="主题配色预设 1"></button>
+            <button class="theme-preset" type="button" aria-label="主题配色预设 2"></button>
+            <button class="theme-preset" type="button" aria-label="主题配色预设 3"></button>
+            <button class="theme-preset" type="button" aria-label="主题配色预设 4"></button>
+            <button class="theme-preset" type="button" aria-label="主题配色预设 5"></button>
+          </div>
+          <div class="palette-colors">
+            <label class="color-picker" title="设置主色调">
+              <span><strong>主色调</strong><small>按钮与进度</small></span>
+              <input name="primaryColor" type="color" value="#b9f46a" aria-label="主色调">
+            </label>
+            <label class="color-picker" title="设置次色调">
+              <span><strong>次色调</strong><small>日期与计时强调</small></span>
+              <input name="secondaryColor" type="color" value="#ff9b74" aria-label="次色调">
+            </label>
+          </div>
+        </div>
+        <div class="background-color-settings">
+          <div class="accent-heading"><strong>背景颜色</strong><small>覆盖当前主题的纯色背景</small></div>
+          <div class="palette-switcher background-palette-switcher" role="tablist" aria-label="编辑背景颜色模式">
+            <button class="palette-tab is-active" type="button" data-background-palette="dark" role="tab" aria-selected="true">深色背景</button>
+            <button class="palette-tab" type="button" data-background-palette="light" role="tab" aria-selected="false">浅色背景</button>
+          </div>
+          <div class="background-color-controls">
+            <label class="setting-row background-color-enabled-row">
+              <span><strong>启用自定义背景颜色</strong></span>
+              <input class="switch-input" name="backgroundColorEnabled" type="checkbox">
+              <span class="switch" aria-hidden="true"></span>
+            </label>
+          </div>
+          <div class="background-color-picker-row">
+            <div class="background-swatches" aria-label="背景色预设">
+              <button class="background-swatch" type="button" aria-label="背景色预设 1"></button>
+              <button class="background-swatch" type="button" aria-label="背景色预设 2"></button>
+              <button class="background-swatch" type="button" aria-label="背景色预设 3"></button>
+              <button class="background-swatch" type="button" aria-label="背景色预设 4"></button>
+              <button class="background-swatch" type="button" aria-label="背景色预设 5"></button>
+            </div>
+            <label class="color-picker" title="自定义背景颜色">
+              <span>自定义颜色</span>
+              <input name="backgroundColor" type="color" value="#101311" aria-label="自定义背景颜色">
+            </label>
+          </div>
+        </div>
+      </section>
+
+      <section class="settings-section" aria-labelledby="background-title">
+        <div class="section-heading">
+          <span>03</span>
+          <div><h2 id="background-title">自定义背景</h2><p>使用本地图片营造专属的时钟氛围</p></div>
+        </div>
+        <div class="background-settings">
+          <div class="background-preview" id="background-preview">
+            <img id="background-preview-image" alt="自定义背景预览" hidden>
+            <span id="background-empty">尚未选择背景图片</span>
+            <b>12:48</b>
+          </div>
+          <div class="background-toolbar">
+            <label class="secondary-button file-button">
+              选择图片
+              <input id="background-file" type="file" accept="image/jpeg,image/png,image/webp,image/avif">
+            </label>
+            <button class="text-button danger-button" id="remove-background" type="button" disabled>移除背景</button>
+          </div>
+          <label class="setting-row background-enabled-row">
+            <span><strong>启用自定义背景</strong><small>保留图片并临时切换回纯色背景</small></span>
+            <input class="switch-input" name="backgroundEnabled" type="checkbox">
+            <span class="switch" aria-hidden="true"></span>
+          </label>
+          <div class="range-settings">
+            <label>
+              <span><strong>模糊</strong><output id="blur-value">0 px</output></span>
+              <input name="backgroundBlur" type="range" min="0" max="30" step="1">
+            </label>
+            <label>
+              <span><strong>亮度</strong><output id="brightness-value">65%</output></span>
+              <input name="backgroundBrightness" type="range" min="20" max="100" step="1">
+            </label>
+          </div>
+        </div>
+      </section>
+
+      <section class="settings-section" aria-labelledby="timer-title">
+        <div class="section-heading">
+          <span>04</span>
+          <div><h2 id="timer-title">计时器</h2><p>配置倒计时完成时的反馈</p></div>
+        </div>
+        <div class="settings-list">
+          <label class="setting-row">
+            <span><strong>完成提示音</strong><small>倒计时结束时播放提示音</small></span>
+            <input class="switch-input" name="soundEnabled" type="checkbox">
+            <span class="switch" aria-hidden="true"></span>
+          </label>
+          <label class="setting-row">
+            <span><strong>保持屏幕常亮</strong><small>运行计时器时尝试阻止屏幕休眠</small></span>
+            <input class="switch-input" name="keepAwake" type="checkbox">
+            <span class="switch" aria-hidden="true"></span>
+          </label>
+        </div>
+      </section>
+
+      <div class="settings-actions">
+        <button class="text-button" id="reset-settings" type="button">恢复默认</button>
+        <a class="primary-button" href="index.html">完成</a>
+      </div>
+    </form>
+    <div class="toast" id="toast" role="status" aria-live="polite"></div>
+  </main>
+  <script src="config.js"></script>
+  <script src="background.js"></script>
+  <script src="settings.js"></script>
+  <script src="layout.js"></script>
+</body>
+</html>

HTML/desktop-clock/settings.js

@@ -0,0 +1,274 @@
+(function () {
+  "use strict";
+
+  var config = window.DesktopClock;
+  var background = window.DesktopClockBackground;
+  var form = document.getElementById("settings-form");
+  var toast = document.getElementById("toast");
+  var preview = document.getElementById("background-preview");
+  var previewImage = document.getElementById("background-preview-image");
+  var backgroundEmpty = document.getElementById("background-empty");
+  var backgroundFile = document.getElementById("background-file");
+  var removeBackground = document.getElementById("remove-background");
+  var primaryColorInput = form.elements.primaryColor;
+  var secondaryColorInput = form.elements.secondaryColor;
+  var backgroundColorInput = form.elements.backgroundColor;
+  var paletteMode = "dark";
+  var backgroundPaletteMode = "dark";
+  var settingsState = config.loadSettings();
+  var backgroundPresets = {
+    dark: ["#101311", "#14242a", "#211925", "#2a2017", "#18271d"],
+    light: ["#f3f4ef", "#eaf2f4", "#f4edf2", "#f8f0e4", "#ebf3e8"]
+  };
+  var themePresets = {
+    dark: [
+      { name: "青柠晨光", primary: "#b9f46a", secondary: "#ff9b74" },
+      { name: "冰川薄荷", primary: "#58d6c0", secondary: "#79aaff" },
+      { name: "莓果夜色", primary: "#e68ac0", secondary: "#f4b36a" },
+      { name: "琥珀余晖", primary: "#f3b25f", secondary: "#df755e" },
+      { name: "月光蓝", primary: "#91b5ff", secondary: "#c5a5ed" }
+    ],
+    light: [
+      { name: "林地绿", primary: "#547d1c", secondary: "#c34f2d" },
+      { name: "湖岸青", primary: "#167e76", secondary: "#3777bb" },
+      { name: "玫瑰红", primary: "#aa4a80", secondary: "#b46d26" },
+      { name: "陶土橙", primary: "#a85d16", secondary: "#a9403d" },
+      { name: "深海蓝", primary: "#3869a9", secondary: "#765aa3" }
+    ]
+  };
+
+  function cloneThemeColors(colors) {
+    return {
+      dark: Object.assign({}, colors.dark),
+      light: Object.assign({}, colors.light)
+    };
+  }
+
+  function cloneBackgroundColors(colors) {
+    return { dark: colors.dark, light: colors.light };
+  }
+
+  function fillForm(settings) {
+    Object.keys(settings).forEach(function (key) {
+      var field = form.elements[key];
+      if (!field) return;
+      if (field instanceof RadioNodeList) field.value = settings[key];
+      else if (field.type === "checkbox") field.checked = settings[key];
+      else field.value = settings[key];
+    });
+  }
+
+  function readForm() {
+    var themeColors = cloneThemeColors(settingsState.themeColors);
+    var backgroundColors = cloneBackgroundColors(settingsState.backgroundColors);
+    themeColors[paletteMode] = {
+      primary: primaryColorInput.value,
+      secondary: secondaryColorInput.value
+    };
+    backgroundColors[backgroundPaletteMode] = backgroundColorInput.value;
+    return {
+      hourCycle: form.elements.hourCycle.value,
+      showSeconds: form.elements.showSeconds.checked,
+      showDate: form.elements.showDate.checked,
+      theme: form.elements.theme.value,
+      themeColors: themeColors,
+      backgroundColorEnabled: form.elements.backgroundColorEnabled.checked,
+      backgroundColors: backgroundColors,
+      backgroundEnabled: form.elements.backgroundEnabled.checked,
+      backgroundBlur: Number(form.elements.backgroundBlur.value),
+      backgroundBrightness: Number(form.elements.backgroundBrightness.value),
+      soundEnabled: form.elements.soundEnabled.checked,
+      keepAwake: form.elements.keepAwake.checked
+    };
+  }
+
+  function applySettings(settings) {
+    config.applyTheme(settings.theme, settings.themeColors);
+    config.applyBackgroundColor(settings.backgroundColorEnabled, settings.backgroundColors, settings.theme);
+  }
+
+  function showMessage(message) {
+    toast.textContent = message;
+    toast.classList.add("is-visible");
+    clearTimeout(showMessage.timeout);
+    showMessage.timeout = setTimeout(function () { toast.classList.remove("is-visible"); }, 1400);
+  }
+
+  function updatePaletteEditor() {
+    var colors = settingsState.themeColors[paletteMode];
+    primaryColorInput.value = colors.primary;
+    secondaryColorInput.value = colors.secondary;
+    document.querySelectorAll("[data-palette]").forEach(function (tab) {
+      var selected = tab.dataset.palette === paletteMode;
+      tab.classList.toggle("is-active", selected);
+      tab.setAttribute("aria-selected", String(selected));
+    });
+    document.querySelectorAll(".theme-preset").forEach(function (swatch, index) {
+      var preset = themePresets[paletteMode][index];
+      swatch.style.setProperty("--primary", preset.primary);
+      swatch.style.setProperty("--secondary", preset.secondary);
+      swatch.title = preset.name;
+      swatch.setAttribute("aria-label", preset.name);
+      swatch.classList.toggle("is-selected", preset.primary === colors.primary && preset.secondary === colors.secondary);
+    });
+  }
+
+  function updateBackgroundColorEditor() {
+    var color = settingsState.backgroundColors[backgroundPaletteMode];
+    backgroundColorInput.value = color;
+    document.querySelectorAll("[data-background-palette]").forEach(function (tab) {
+      var selected = tab.dataset.backgroundPalette === backgroundPaletteMode;
+      tab.classList.toggle("is-active", selected);
+      tab.setAttribute("aria-selected", String(selected));
+    });
+    document.querySelectorAll(".background-swatch").forEach(function (swatch, index) {
+      var preset = backgroundPresets[backgroundPaletteMode][index];
+      swatch.style.setProperty("--swatch", preset);
+      swatch.title = preset;
+      swatch.classList.toggle("is-selected", preset.toLowerCase() === color.toLowerCase());
+    });
+  }
+
+  function updateRangeLabels(settings) {
+    document.getElementById("blur-value").textContent = settings.backgroundBlur + " px";
+    document.getElementById("brightness-value").textContent = settings.backgroundBrightness + "%";
+    background.setEffects(preview, settings);
+  }
+
+  async function loadBackgroundPreview(settings) {
+    try {
+      var url = await background.getUrl();
+      var hasImage = Boolean(url);
+      previewImage.src = url;
+      previewImage.hidden = !hasImage;
+      backgroundEmpty.hidden = hasImage;
+      removeBackground.disabled = !hasImage;
+      updateRangeLabels(settings);
+    } catch (error) {
+      backgroundEmpty.textContent = "无法读取背景图片";
+    }
+  }
+
+  form.addEventListener("change", function (event) {
+    if (event.target === backgroundFile) return;
+    settingsState = config.saveSettings(readForm());
+    applySettings(settingsState);
+    if (event.target.name === "theme") {
+      paletteMode = config.getEffectiveTheme(settingsState.theme);
+      backgroundPaletteMode = paletteMode;
+    }
+    updatePaletteEditor();
+    updateBackgroundColorEditor();
+    showMessage("设置已保存");
+  });
+
+  form.addEventListener("input", function (event) {
+    if (event.target.type === "range") updateRangeLabels(readForm());
+    if (event.target === primaryColorInput || event.target === secondaryColorInput) {
+      applySettings(readForm());
+    }
+    if (event.target === backgroundColorInput) {
+      form.elements.backgroundColorEnabled.checked = true;
+      var backgroundSettings = readForm();
+      applySettings(backgroundSettings);
+    }
+  });
+
+  document.querySelectorAll("[data-palette]").forEach(function (tab) {
+    tab.addEventListener("click", function () {
+      var pendingSettings = readForm();
+      settingsState.themeColors = pendingSettings.themeColors;
+      paletteMode = tab.dataset.palette;
+      updatePaletteEditor();
+    });
+  });
+
+  document.querySelectorAll(".theme-preset").forEach(function (swatch, index) {
+    swatch.addEventListener("click", function () {
+      var preset = themePresets[paletteMode][index];
+      primaryColorInput.value = preset.primary;
+      secondaryColorInput.value = preset.secondary;
+      settingsState = config.saveSettings(readForm());
+      applySettings(settingsState);
+      updatePaletteEditor();
+      showMessage("主题配色已更新");
+    });
+  });
+
+  document.querySelectorAll("[data-background-palette]").forEach(function (tab) {
+    tab.addEventListener("click", function () {
+      var pendingSettings = readForm();
+      settingsState.backgroundColors = pendingSettings.backgroundColors;
+      backgroundPaletteMode = tab.dataset.backgroundPalette;
+      updateBackgroundColorEditor();
+    });
+  });
+
+  document.querySelectorAll(".background-swatch").forEach(function (swatch, index) {
+    swatch.addEventListener("click", function () {
+      backgroundColorInput.value = backgroundPresets[backgroundPaletteMode][index];
+      form.elements.backgroundColorEnabled.checked = true;
+      settingsState = config.saveSettings(readForm());
+      applySettings(settingsState);
+      updateBackgroundColorEditor();
+      showMessage("背景颜色已更新");
+    });
+  });
+
+  backgroundFile.addEventListener("change", async function () {
+    var file = backgroundFile.files[0];
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      showMessage("请选择有效的图片文件");
+      backgroundFile.value = "";
+      return;
+    }
+    if (file.size > 20 * 1024 * 1024) {
+      showMessage("图片不能超过 20 MB");
+      backgroundFile.value = "";
+      return;
+    }
+    try {
+      await background.save(file);
+      form.elements.backgroundEnabled.checked = true;
+      settingsState = config.saveSettings(readForm());
+      await loadBackgroundPreview(settingsState);
+      showMessage("背景已更新");
+    } catch (error) {
+      showMessage("无法保存背景图片");
+    }
+    backgroundFile.value = "";
+  });
+
+  removeBackground.addEventListener("click", async function () {
+    try {
+      await background.remove();
+      form.elements.backgroundEnabled.checked = false;
+      settingsState = config.saveSettings(readForm());
+      await loadBackgroundPreview(settingsState);
+      showMessage("背景已移除");
+    } catch (error) {
+      showMessage("无法移除背景图片");
+    }
+  });
+
+  document.getElementById("reset-settings").addEventListener("click", function () {
+    settingsState = config.saveSettings(config.defaults);
+    fillForm(settingsState);
+    paletteMode = config.getEffectiveTheme(settingsState.theme);
+    backgroundPaletteMode = paletteMode;
+    applySettings(settingsState);
+    updatePaletteEditor();
+    updateBackgroundColorEditor();
+    updateRangeLabels(settingsState);
+    showMessage("设置已恢复");
+  });
+
+  fillForm(settingsState);
+  paletteMode = config.getEffectiveTheme(settingsState.theme);
+  backgroundPaletteMode = paletteMode;
+  applySettings(settingsState);
+  updatePaletteEditor();
+  updateBackgroundColorEditor();
+  loadBackgroundPreview(settingsState);
+}());

HTML/desktop-clock/styles.css

@@ -0,0 +1,347 @@
+:root {
+  color-scheme: dark;
+  --bg: #101311;
+  --surface: #171b18;
+  --surface-strong: #202621;
+  --line: #303831;
+  --text: #f3f6f1;
+  --muted: #929b94;
+  --accent: #b9f46a;
+  --accent-text: #17200d;
+  --warm: #ff9b74;
+  --danger: #ff8e7c;
+  --shadow: rgba(0, 0, 0, .28);
+  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
+  font-size: 17px;
+  font-synthesis: none;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+  --bg: #f3f4ef;
+  --surface: #fff;
+  --surface-strong: #e8ebe4;
+  --line: #d4d9d1;
+  --text: #151914;
+  --muted: #667066;
+  --accent: #547d1c;
+  --accent-text: #fff;
+  --warm: #c34f2d;
+  --shadow: rgba(28, 37, 25, .12);
+}
+
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] {
+    color-scheme: light;
+    --bg: #f3f4ef;
+    --surface: #fff;
+    --surface-strong: #e8ebe4;
+    --line: #d4d9d1;
+    --text: #151914;
+    --muted: #667066;
+    --accent: #547d1c;
+    --accent-text: #fff;
+    --warm: #c34f2d;
+    --shadow: rgba(28, 37, 25, .12);
+  }
+}
+
+* { box-sizing: border-box; }
+html, body { min-height: 100%; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  -webkit-tap-highlight-color: transparent;
+  isolation: isolate;
+}
+.has-custom-background {
+  --surface: rgba(18, 22, 19, .78);
+  --surface-strong: rgba(34, 40, 35, .82);
+  --line: rgba(255, 255, 255, .22);
+  --text: #fff;
+  --muted: rgba(255, 255, 255, .68);
+  --accent: #c3fa79;
+  --accent-text: #17200d;
+  --warm: #ffad89;
+  color-scheme: dark;
+}
+.has-custom-background body { background: var(--bg); }
+.has-custom-background body::before,
+.has-custom-background body::after {
+  content: "";
+  position: fixed;
+  pointer-events: none;
+}
+.has-custom-background body::before {
+  z-index: -2;
+  inset: -45px;
+  background-image: var(--background-image);
+  background-position: center;
+  background-size: cover;
+  filter: blur(var(--background-blur)) brightness(var(--background-brightness));
+  transform: scale(1.06);
+}
+.has-custom-background body::after {
+  z-index: -1;
+  inset: 0;
+  background: rgba(5, 8, 6, .22);
+}
+button, input, select { font: inherit; }
+button, a { touch-action: manipulation; }
+.clock-page { overflow: hidden; }
+.settings-page { overflow-x: hidden; }
+button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--accent), transparent 45%);
+  outline-offset: 3px;
+}
+
+.app-shell {
+  width: 960px;
+  height: 600px;
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  padding: 18px 24px 14px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(var(--page-scale, 1));
+  transform-origin: center;
+  overflow: hidden;
+}
+.app-shell::before, .app-shell::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+.app-shell::before { inset: 76px 24px auto; border-top: 1px solid color-mix(in srgb, var(--line), transparent 35%); }
+.app-shell::after { right: 7%; bottom: -170px; width: 340px; height: 340px; border: 1px solid color-mix(in srgb, var(--warm), transparent 88%); border-radius: 50%; }
+
+.topbar, .statusbar, .settings-header, .settings-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 18px; font-weight: 650; }
+.brand-mark { width: 20px; height: 20px; border: 2px solid var(--accent); border-radius: 50%; position: relative; }
+.brand-mark::before { content: ""; position: absolute; width: 1px; height: 5px; left: 7px; top: 3px; background: var(--accent); transform-origin: bottom; transform: rotate(40deg); }
+.topbar-actions { display: flex; gap: 8px; }
+.icon-button {
+  width: 48px; height: 48px; display: inline-grid; place-items: center;
+  border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--text); cursor: pointer;
+}
+.icon-button:hover { background: var(--surface-strong); }
+.icon-button svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+
+.mode-switcher {
+  justify-self: center;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(88px, 1fr));
+  margin-top: 18px;
+  border-bottom: 1px solid var(--line);
+}
+.mode-button {
+  min-height: 46px; padding: 0 24px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
+  color: var(--muted); background: transparent; font-size: 17px; font-weight: 600; cursor: pointer;
+}
+.mode-button:hover { color: var(--text); }
+.mode-button.is-active { color: var(--text); border-bottom-color: var(--accent); }
+
+.mode-panel { align-self: center; justify-self: stretch; text-align: center; animation: enter .24s ease-out; }
+.mode-panel[hidden] { display: none; }
+@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
+.clock-stage {
+  width: 850px;
+  min-height: 390px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr) 62px;
+  align-items: center;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+.clock-main { min-width: 0; padding: 32px 16px; }
+.calendar-index { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 20px 0; color: var(--muted); border-right: 1px solid var(--line); text-align: left; }
+.calendar-index span { font: 700 12px monospace; color: var(--warm); }
+.calendar-index strong { font: 300 38px/1 "Segoe UI", sans-serif; }
+.day-progress { align-self: stretch; display: grid; grid-template-rows: auto 1fr auto; justify-items: end; gap: 12px; padding: 20px 0; border-left: 1px solid var(--line); color: var(--muted); font: 700 11px monospace; }
+.day-progress > div { width: 2px; height: 100%; min-height: 120px; position: relative; background: var(--surface-strong); }
+.day-progress i { position: absolute; left: 0; bottom: 0; width: 100%; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 25%); transition: height .4s ease; }
+.day-progress output { color: var(--text); writing-mode: vertical-rl; }
+.date-line { margin: 0 0 16px; color: var(--muted); font-size: 21px; }
+.clock-row { display: flex; align-items: baseline; justify-content: center; gap: 18px; }
+.period { color: var(--accent); font-size: 19px; font-weight: 700; }
+.hero-time, .counter {
+  display: inline-block; color: var(--text); font-family: "Segoe UI", Arial, sans-serif; font-variant-numeric: tabular-nums;
+  font-weight: 260; line-height: .9; letter-spacing: 0;
+}
+.hero-time { font-size: 164px; text-shadow: 0 14px 50px var(--shadow); }
+.hero-time .seconds { color: var(--accent); font-size: .42em; vertical-align: .13em; }
+.timezone { width: fit-content; margin: 20px auto 0; padding: 8px 14px; border: 1px solid var(--line); color: var(--muted); font: 600 13px monospace; text-transform: uppercase; }
+.panel-kicker { margin: 0 0 30px; color: var(--muted); font-size: 14px; text-transform: uppercase; }
+.counter { font-size: 140px; }
+.counter span { color: var(--warm); font-size: .42em; }
+
+.timer-panel { padding: 18px 0; }
+.control-row { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
+.primary-button, .secondary-button, .text-button {
+  min-width: 136px; min-height: 54px; padding: 0 24px; border-radius: 6px; font-size: 16px; font-weight: 650; cursor: pointer; text-decoration: none;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.primary-button { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); }
+.secondary-button { border: 1px solid var(--line); background: transparent; color: var(--text); }
+.text-button { border: 0; background: transparent; color: var(--muted); }
+.secondary-button:disabled { opacity: .38; cursor: not-allowed; }
+.primary-button:hover { filter: brightness(1.08); }
+.secondary-button:hover:not(:disabled), .text-button:hover { background: var(--surface-strong); color: var(--text); }
+
+.timer-editor { display: flex; justify-content: center; align-items: center; gap: 20px; }
+.timer-editor label { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: .72rem; }
+.timer-editor input {
+  width: 126px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
+  background: transparent; color: var(--text); text-align: center; font-size: 92px; font-variant-numeric: tabular-nums;
+}
+.timer-editor input::-webkit-inner-spin-button { display: none; }
+.timer-editor b { color: var(--warm); font-size: 64px; font-weight: 300; transform: translateY(-10px); }
+.quick-times { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
+.quick-times button { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 22px; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
+.quick-times button:hover, .quick-times button.is-selected { border-color: var(--accent); color: var(--text); }
+
+#timer-panel { padding: 4px 0; }
+#timer-panel .panel-kicker { margin-bottom: 12px; }
+#timer-panel .timer-editor { gap: 14px; }
+#timer-panel .timer-editor label { gap: 4px; }
+#timer-panel .timer-editor input { width: 108px; padding: 6px 4px; font-size: 72px; line-height: 1; }
+#timer-panel .timer-editor b { font-size: 50px; transform: translateY(-8px); }
+#timer-panel .quick-times { flex-wrap: nowrap; margin-top: 14px; }
+#timer-panel .quick-times button { min-height: 40px; padding: 0 15px; white-space: nowrap; }
+#timer-panel .control-row { margin-top: 18px; }
+
+.statusbar { color: var(--muted); font-size: 13px; text-transform: uppercase; }
+.status-dot { display: flex; align-items: center; gap: 8px; }
+.status-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
+.toast {
+  position: fixed; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 10; transform: translate(-50%, 20px);
+  padding: 11px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-strong); color: var(--text);
+  box-shadow: 0 10px 30px var(--shadow); opacity: 0; pointer-events: none; transition: .2s ease;
+}
+.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
+
+.settings-shell {
+  width: 800px;
+  padding: 34px 28px 48px;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%) scale(var(--page-scale, 1));
+  transform-origin: top center;
+}
+.settings-header { justify-content: flex-start; gap: 20px; padding-bottom: 34px; border-bottom: 1px solid var(--line); position: relative; }
+.settings-header::after { content: ""; position: absolute; left: 64px; bottom: -1px; width: 54px; height: 2px; background: var(--warm); }
+.settings-header p { margin: 0 0 4px; color: var(--accent); font-size: .7rem; text-transform: uppercase; }
+.settings-header h1 { margin: 0; font-size: 1.75rem; letter-spacing: 0; }
+.settings-section { padding: 40px 0; border-bottom: 1px solid var(--line); }
+.section-heading { display: grid; grid-template-columns: 38px 1fr; gap: 12px; margin-bottom: 24px; }
+.section-heading > span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent), transparent 45%); font: 700 .66rem monospace; }
+.section-heading h2 { margin: 0 0 5px; font-size: 1.12rem; letter-spacing: 0; }
+.section-heading p { margin: 0; color: var(--muted); font-size: .82rem; }
+.settings-list { margin-left: 50px; }
+.setting-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); cursor: pointer; }
+.setting-row:first-child { border-top: 0; }
+.setting-row > span:first-child { display: flex; flex-direction: column; gap: 5px; }
+.setting-row strong { font-size: 16px; }
+.setting-row small { color: var(--muted); font-size: 14px; line-height: 1.45; }
+.setting-row select { min-width: 138px; padding: 9px 34px 9px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); }
+.switch-input { position: absolute; opacity: 0; pointer-events: none; }
+.switch { flex: 0 0 auto; width: 44px; height: 24px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); transition: .2s; }
+.switch::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: .2s; }
+.switch-input:checked + .switch { border-color: var(--accent); background: var(--accent); }
+.switch-input:checked + .switch::after { transform: translateX(20px); background: var(--accent-text); }
+.switch-input:focus-visible + .switch { outline: 3px solid color-mix(in srgb, var(--accent), transparent 45%); outline-offset: 3px; }
+
+.theme-options { margin: 0 0 0 50px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border: 0; }
+.theme-options legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+.theme-card { position: relative; cursor: pointer; color: var(--muted); font-size: 14px; }
+.theme-card input { position: absolute; opacity: 0; }
+.theme-preview { height: 106px; display: grid; place-items: center; position: relative; margin-bottom: 10px; border: 2px solid transparent; border-radius: 6px; overflow: hidden; }
+.theme-preview b { font-size: 1.2rem; letter-spacing: 0; }
+.theme-preview i { position: absolute; left: 12px; top: 12px; width: 32px; height: 4px; border-radius: 2px; }
+.theme-preview em { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 1px; }
+.theme-dark .theme-preview { background: #151916; color: #f3f6f1; }
+.theme-light .theme-preview { background: #fafbf8; color: #151914; }
+.theme-system .theme-preview { background: linear-gradient(110deg, #151916 50%, #fafbf8 50%); color: #b9f46a; }
+.theme-dark i, .theme-dark em { background: #384038; }
+.theme-light i, .theme-light em { background: #d3d9d0; }
+.theme-system i, .theme-system em { background: #799b4b; }
+.theme-card:has(input:checked) { color: var(--text); }
+.theme-card:has(input:checked) .theme-preview { border-color: var(--accent); }
+.theme-card:has(input:checked)::after { content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm), transparent 78%); }
+.theme-card input:focus-visible + .theme-preview { outline: 3px solid color-mix(in srgb, var(--accent), transparent 45%); outline-offset: 3px; }
+.palette-settings { margin: 28px 0 0 50px; padding-top: 24px; border-top: 1px solid var(--line); }
+.accent-heading { display: flex; flex-direction: column; gap: 5px; }
+.accent-heading strong { font-size: 16px; }
+.accent-heading small { color: var(--muted); font-size: 14px; }
+.palette-switcher { width: fit-content; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 18px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
+.palette-tab { min-width: 112px; min-height: 38px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; }
+.palette-tab:first-child { border-left: 0; }
+.palette-tab.is-active { background: var(--surface-strong); color: var(--text); box-shadow: inset 0 -2px var(--accent); }
+.theme-presets { display: flex; gap: 12px; margin-top: 16px; }
+.theme-preset { width: 30px; height: 30px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 50%, var(--secondary) 50%); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
+.theme-preset.is-selected { border-color: var(--text); box-shadow: 0 0 0 3px var(--accent), inset 0 0 0 1px rgba(0, 0, 0, .16); }
+.theme-preset:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent), transparent 45%); outline-offset: 3px; }
+.palette-colors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
+.color-picker { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 14px; cursor: pointer; }
+.color-picker > span { display: flex; flex-direction: column; gap: 2px; }
+.color-picker strong { color: var(--text); font-size: 14px; }
+.color-picker small { color: var(--muted); font-size: 12px; }
+.color-picker input { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }
+.color-picker input::-webkit-color-swatch-wrapper { padding: 0; }
+.color-picker input::-webkit-color-swatch { border: 0; border-radius: 3px; }
+.color-picker:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent), transparent 45%); outline-offset: 3px; }
+.background-color-settings { margin: 24px 0 0 50px; padding-top: 24px; border-top: 1px solid var(--line); }
+.background-palette-switcher { margin-top: 16px; }
+.background-color-controls { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
+.background-color-enabled-row { flex: 1; min-height: 58px; border: 0; }
+.background-color-enabled-row > span:first-child { flex-direction: row; }
+.background-color-enabled-row small { display: none; }
+.background-color-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 12px; border-top: 1px solid var(--line); }
+.background-swatches { display: flex; gap: 12px; }
+.background-swatch { width: 30px; height: 30px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
+.background-swatch.is-selected { border-color: var(--text); box-shadow: 0 0 0 3px var(--accent), inset 0 0 0 1px rgba(0, 0, 0, .16); }
+.background-swatch:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent), transparent 45%); outline-offset: 3px; }
+.settings-actions { padding-top: 32px; }
+
+.background-settings { margin-left: 50px; }
+.background-preview {
+  --background-blur: 0px;
+  --background-brightness: 65%;
+  height: 250px;
+  position: relative;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+}
+.background-preview::after { content: ""; position: absolute; inset: 0; background: rgba(5, 8, 6, .2); pointer-events: none; }
+.background-preview img { position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); object-fit: cover; filter: blur(var(--background-blur)) brightness(var(--background-brightness)); }
+.background-preview > span { z-index: 1; color: var(--muted); font-size: 14px; }
+.background-preview b { z-index: 2; position: absolute; color: #fff; font: 300 84px/1 "Segoe UI", sans-serif; letter-spacing: 0; text-shadow: 0 5px 24px rgba(0, 0, 0, .55); }
+.background-preview > span:not([hidden]) + b { display: none; }
+.background-toolbar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
+.file-button { min-width: 124px; min-height: 46px; font-size: 15px; }
+.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
+.file-button:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent), transparent 45%); outline-offset: 3px; }
+.danger-button { min-width: auto; min-height: 46px; color: var(--danger); font-size: 14px; }
+.danger-button:disabled { opacity: .35; cursor: not-allowed; }
+.background-enabled-row { border-top: 0; border-bottom: 1px solid var(--line); }
+.range-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 24px; }
+.range-settings label > span { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 15px; }
+.range-settings output { color: var(--muted); font: 600 13px monospace; }
+.range-settings input { width: 100%; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}

README.md

@@ -15,3 +15,7 @@
 - [9.html](./HTML/audio-visualization/9.html)
 - [10.html](./HTML/audio-visualization/10.html)
 - [viewer.html](./HTML/audio-visualization/viewer.html)
+
+### 桌面时钟
+
+- [index.html](./HTML/desktop-clock/index.html)