chore(HTML): 添加 desktop-clock
This commit is contained in:
@@ -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] || "";
|
||||
}());
|
||||
@@ -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
|
||||
};
|
||||
}());
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
}());
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
}());
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}());
|
||||
@@ -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; }
|
||||
}
|
||||
Reference in New Issue
Block a user