无障碍三大工具 · 红绿灯识别 · 万能遥控 · 导航
/* ---------- 全局重置 · 无障碍友好 ---------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, "PingFang SC", "Helvetica Neue", Roboto, "Noto Sans", sans-serif;
background: #f2f5f9;
color: #1a1a2e;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 16px 40px;
-webkit-tap-highlight-color: transparent;
}
.app-container {
max-width: 480px;
width: 100%;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 28px;
padding: 0 4px;
}
.header h1 {
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
color: #0b2545;
line-height: 1.2;
}
.header .sub {
font-size: 15px;
font-weight: 400;
color: #4a5568;
margin-top: 6px;
letter-spacing: 0.3px;
background: rgba(255, 255, 255, 0.7);
display: inline-block;
padding: 4px 16px;
border-radius: 20px;
backdrop-filter: blur(2px);
}
.tool-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.tool-card {
background: #ffffff;
border-radius: 28px;
padding: 24px 22px 26px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03);
transition: transform 0.2s ease, box-shadow 0.25s ease;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
border: 2px solid transparent;
outline: none;
position: relative;
}
.tool-card:focus-visible {
border-color: #2b6cb0;
box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.25);
}
.tool-card:active {
transform: scale(0.97);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.tool-card .double-tap-hint {
position: absolute;
top: 12px;
right: 16px;
font-size: 11px;
font-weight: 500;
color: #8b9dc0;
background: #f0f4fc;
padding: 2px 12px;
border-radius: 30px;
letter-spacing: 0.3px;
border: 1px solid #dce5f0;
pointer-events: none;
}
.card-icon {
font-size: 44px;
line-height: 1;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.card-icon .emoji-big {
font-size: 48px;
}
.card-title {
font-size: 22px;
font-weight: 680;
color: #0b2545;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.card-title .badge {
font-size: 13px;
font-weight: 500;
background: #eef2f7;
color: #2c3e50;
padding: 2px 14px;
border-radius: 40px;
border: 1px solid #d0dae8;
}
.card-desc {
font-size: 15px;
color: #3d4a5c;
margin-top: 8px;
line-height: 1.5;
padding-right: 10px;
}
.tool-card.traffic {
border-left: 6px solid #e53e3e;
}
.tool-card.traffic .card-icon .emoji-big {
color: #e53e3e;
}
.tool-card.remote {
border-left: 6px solid #3182ce;
}
.tool-card.remote .card-icon .emoji-big {
color: #3182ce;
}
.tool-card.nav {
border-left: 6px solid #38a169;
}
.tool-card.nav .card-icon .emoji-big {
color: #38a169;
}
.footer-note {
margin-top: 32px;
padding: 18px 16px 10px;
text-align: center;
font-size: 13px;
color: #5e6f8d;
border-top: 1px solid #dfe6f0;
width: 100%;
max-width: 480px;
}
.footer-note .accessibility-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #e9eef6;
padding: 6px 18px;
border-radius: 60px;
font-weight: 500;
font-size: 13px;
color: #1f2a44;
margin-bottom: 10px;
border: 1px solid #cbd5e0;
}
.footer-note p {
margin-top: 6px;
opacity: 0.8;
}
.toast-message {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) scale(0.9);
background: #1a202c;
color: #f0f4ff;
padding: 12px 28px;
border-radius: 60px;
font-size: 16px;
font-weight: 500;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 999;
max-width: 90%;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(2px);
}
.toast-message.show {
opacity: 1;
transform: translateX(-50%) scale(1);
}
@media (max-width: 420px) {
.header h1 {
font-size: 24px;
}
.tool-card {
padding: 20px 16px 22px;
}
.card-title {
font-size: 20px;
}
.card-icon .emoji-big {
font-size: 40px;
}
.tool-card .double-tap-hint {
font-size: 10px;
top: 8px;
right: 10px;
padding: 1px 10px;
}
}
.tool-card .card-inner {
pointer-events: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
🛠️ 无障碍工具
双击启动 · 专为便捷打造
双击任意卡片即可快速启动工具 · 单击同样响应
红绿灯识别 · 万能遥控 · 导航 — 三大场景全覆盖
(function() {
'use strict';
const cards = document.querySelectorAll('.tool-card');
const toast = document.getElementById('toast');
const toolNames = {
traffic: '🚦 红绿灯识别',
remote: '📡 万能遥控',
nav: '🧭 导航'
};
let toastTimer = null;
function showToast(message, duration = 2000) {
if (!toast) return;
toast.textContent = message;
toast.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(() => {
toast.classList.remove('show');
}, duration);
}
function activateTool(toolId) {
const name = toolNames[toolId] || '工具';
showToast(`✅ 正在启动 ${name} …`, 2200);
console.log(`[无障碍工具] 激活: ${toolId}`);
}
const lastClickMap = new Map();
function handleCardInteraction(e, card) {
const toolId = card.getAttribute('data-tool');
if (!toolId) return;
const now = Date.now();
const last = lastClickMap.get(card) || 0;
const interval = now - last;
lastClickMap.set(card, now);
if (interval > 0 && interval <= 400) {
activateTool(toolId);
lastClickMap.set(card, 0);
e.preventDefault();
return;
}
if (card._pendingSingleTimer) {
clearTimeout(card._pendingSingleTimer);
card._pendingSingleTimer = null;
return;
}
card._pendingSingleTimer = setTimeout(() => {
if (lastClickMap.get(card) === 0) {
card._pendingSingleTimer = null;
return;
}
activateTool(toolId);
card._pendingSingleTimer = null;
}, 420);
}
cards.forEach((card) => {
card.addEventListener('touchstart', function(e) {
handleCardInteraction(e, this);
}, { passive: true });
card.addEventListener('click', function(e) {
if (this._touchHandled) {
this._touchHandled = false;
return;
}
handleCardInteraction(e, this);
});
card.addEventListener('touchend', function() {
this._touchHandled = true;
});
card.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
const toolId = this.getAttribute('data-tool');
if (toolId) {
activateTool(toolId);
}
}
});
card.setAttribute('role', 'button');
});
setTimeout(() => {
showToast('👆 双击任意卡片快速启动', 2500);
}, 600);
document.addEventListener('dblclick', function(e) {
if (e.target.closest('.tool-card')) {
e.preventDefault();
}
}, { passive: false });
console.log('无障碍三大工具已加载 · 专为便捷与包容设计');
window.__toolbox = {
activate: activateTool,
showToast: showToast
};
})();
无障碍三大工具 · 红绿灯识别 · 万能遥控 · 导航
/* ---------- 全局重置 · 无障碍友好 ---------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, "PingFang SC", "Helvetica Neue", Roboto, "Noto Sans", sans-serif;
background: #f2f5f9;
color: #1a1a2e;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 16px 40px;
-webkit-tap-highlight-color: transparent;
/* 移动端点击高亮去除 */;
}
/* 主容器 — 最大宽度 480px,适合单手操作 */
.app-container {
max-width: 480px;
width: 100%;
margin: 0 auto;
}
/* ---------- 头部 ---------- */
.header {
text-align: center;
margin-bottom: 28px;
padding: 0 4px;
}
.header h1 {
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
color: #0b2545;
line-height: 1.2;
}
.header .sub {
font-size: 15px;
font-weight: 400;
color: #4a5568;
margin-top: 6px;
letter-spacing: 0.3px;
background: rgba(255, 255, 255, 0.7);
display: inline-block;
padding: 4px 16px;
border-radius: 20px;
backdrop-filter: blur(2px);
}
/* ---------- 工具卡片网格 ---------- */
.tool-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
/* 卡片 — 大点击区域 · 无障碍友好 */
.tool-card {
background: #ffffff;
border-radius: 28px;
padding: 24px 22px 26px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03);
transition: transform 0.2s ease, box-shadow 0.25s ease;
cursor: pointer;
/* 双击 / 单击均触发 */
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
border: 2px solid transparent;
/* 焦点高亮 — 键盘 / 屏幕阅读器 */
outline: none;
position: relative;
}
.tool-card:focus-visible {
border-color: #2b6cb0;
box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.25);
}
/* 卡片激活反馈 (单击/双击) */
.tool-card:active {
transform: scale(0.97);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* 双击指示器 — 视觉提示 */
.tool-card .double-tap-hint {
position: absolute;
top: 12px;
right: 16px;
font-size: 11px;
font-weight: 500;
color: #8b9dc0;
background: #f0f4fc;
padding: 2px 12px;
border-radius: 30px;
letter-spacing: 0.3px;
border: 1px solid #dce5f0;
pointer-events: none;
}
/* 卡片图标区 */
.card-icon {
font-size: 44px;
line-height: 1;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.card-icon .emoji-big {
font-size: 48px;
}
.card-title {
font-size: 22px;
font-weight: 680;
color: #0b2545;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.card-title .badge {
font-size: 13px;
font-weight: 500;
background: #eef2f7;
color: #2c3e50;
padding: 2px 14px;
border-radius: 40px;
border: 1px solid #d0dae8;
}
.card-desc {
font-size: 15px;
color: #3d4a5c;
margin-top: 8px;
line-height: 1.5;
padding-right: 10px;
}
/* 卡片特色颜色 — 区分三大工具 */
.tool-card.traffic {
border-left: 6px solid #e53e3e;
}
.tool-card.traffic .card-icon .emoji-big {
color: #e53e3e;
}
.tool-card.remote {
border-left: 6px solid #3182ce;
}
.tool-card.remote .card-icon .emoji-big {
color: #3182ce;
}
.tool-card.nav {
border-left: 6px solid #38a169;
}
.tool-card.nav .card-icon .emoji-big {
color: #38a169;
}
/* ---------- 底部无障碍声明 ---------- */
.footer-note {
margin-top: 32px;
padding: 18px 16px 10px;
text-align: center;
font-size: 13px;
color: #5e6f8d;
border-top: 1px solid #dfe6f0;
width: 100%;
max-width: 480px;
}
.footer-note .accessibility-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #e9eef6;
padding: 6px 18px;
border-radius: 60px;
font-weight: 500;
font-size: 13px;
color: #1f2a44;
margin-bottom: 10px;
border: 1px solid #cbd5e0;
}
.footer-note p {
margin-top: 6px;
opacity: 0.8;
}
/* ---------- 双击 toast 反馈 (轻提示) ---------- */
.toast-message {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) scale(0.9);
background: #1a202c;
color: #f0f4ff;
padding: 12px 28px;
border-radius: 60px;
font-size: 16px;
font-weight: 500;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 999;
max-width: 90%;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(2px);
}
.toast-message.show {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* ---------- 响应式微调 ---------- */
@media (max-width: 420px) {
.header h1 {
font-size: 24px;
}
.tool-card {
padding: 20px 16px 22px;
}
.card-title {
font-size: 20px;
}
.card-icon .emoji-big {
font-size: 40px;
}
.tool-card .double-tap-hint {
font-size: 10px;
top: 8px;
right: 10px;
padding: 1px 10px;
}
}
/* 大点击区域 — 整张卡片可点,但内部不再有干扰 */
.tool-card .card-inner {
pointer-events: none;
}
/* 屏幕阅读器专用隐藏 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
🛠️ 无障碍工具
双击启动 · 专为便捷打造
双击任意卡片即可快速启动工具 · 单击同样响应
红绿灯识别 · 万能遥控 · 导航 — 三大场景全覆盖
(function() {
'use strict';
// ---------- DOM 引用 ----------
const cards = document.querySelectorAll('.tool-card');
const toast = document.getElementById('toast');
// 工具名称映射
const toolNames = {
traffic: '🚦 红绿灯识别',
remote: '📡 万能遥控',
nav: '🧭 导航'
};
const toolEmoji = {
traffic: '🚦',
remote: '📡',
nav: '🧭'
};
// ---------- Toast 显示 ----------
let toastTimer = null;
function showToast(message, duration = 2000) {
if (!toast) return;
toast.textContent = message;
toast.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(() => {
toast.classList.remove('show');
}, duration);
}
// ---------- 工具激活处理 ----------
function activateTool(toolId) {
const name = toolNames[toolId] || '工具';
const emoji = toolEmoji[toolId] || '🔧';
// 模拟启动反馈 — 在实际场景可跳转或调起原生功能
showToast(`✅ 正在启动 ${name} …`, 2200);
// 此处可扩展: window.location.href = 或 触发自定义事件
console.log(`[无障碍工具] 激活: ${toolId}`);
}
// ---------- 双击检测逻辑 ----------
// 为每个卡片维护点击时间戳
const lastClickMap = new Map();
function handleCardInteraction(e, card) {
const toolId = card.getAttribute('data-tool');
if (!toolId) return;
// 双击检测:两次点击间隔 ≤ 400ms 视为双击
const now = Date.now();
const last = lastClickMap.get(card) || 0;
const interval = now - last;
lastClickMap.set(card, now);
if (interval > 0 && interval <= 400) {
// ✅ 双击成功
activateTool(toolId);
// 重置,防止连续三次点击再次触发
lastClickMap.set(card, 0);
// 防止浏览器默认行为(如文本选择)
e.preventDefault();
return;
}
// 如果是单击(且非双击),延迟一小段时间判断是否变成双击
// 但这里我们不阻塞单击,如果超过 400ms 没有第二次点击,可视为单击启动
// 为了更好的无障碍,单击也立刻启动(与双击同样效果),但为了强调「双击」特色,
// 我们让单击也启动,但提示略有不同。
// 但为了符合"双击支持"需求,我们保留双击特殊反馈,但同时单击也可用。
// 更合理:单击也触发,但 toast 提示 "单击启动"
// 但为了避免混淆,我们采用:单击立即启动,双击同样启动(双击时不会重复启动两次)
// 由于双击时第一次单击会触发启动,第二次单击又会触发,因此需要防抖。
// 方案:双击时取消第一次的启动,仅第二次生效。
// 我们用 setTimeout 延迟执行单击,若在延迟期间发生双击则取消。
// 取消之前的单击延迟任务
const pendingKey = 'pendingSingle_' + toolId;
if (card._pendingSingleTimer) {
clearTimeout(card._pendingSingleTimer);
card._pendingSingleTimer = null;
// 如果之前有延迟,说明这是第二次点击(双击),不执行任何单击动作
return;
}
// 设置 420ms 延迟执行单击(如果在此期间没有第二次点击,则执行单击启动)
card._pendingSingleTimer = setTimeout(() => {
// 检查是否已经被双击重置
if (lastClickMap.get(card) === 0) {
// 已被双击处理,跳过
card._pendingSingleTimer = null;
return;
}
// 执行单击启动
activateTool(toolId);
card._pendingSingleTimer = null;
// 显示轻提示表明是单击启动
// 但 toast 已在 activateTool 中显示,这里不再重复
}, 420);
}
// ---------- 事件绑定:单击 / 双击 (触屏 + 鼠标) ----------
cards.forEach((card) => {
// 触屏事件 (移动端优先)
card.addEventListener('touchstart', function(e) {
// 不阻止默认,保留滚动能力;但防止双击缩放
// 记录时间并处理
handleCardInteraction(e, this);
}, { passive: true });
// 鼠标/键盘点击 (桌面辅助)
card.addEventListener('click', function(e) {
// 如果已经通过 touchstart 处理过,避免重复
// 但 click 在 touch 后会触发,所以需要防重。
// 使用标志量控制
if (this._touchHandled) {
this._touchHandled = false;
return;
}
handleCardInteraction(e, this);
});
// 标记 touch 已处理,阻止 click 重复
card.addEventListener('touchend', function() {
// 在 touchend 中设置标志,让接下来的 click 被忽略
this._touchHandled = true;
// 但注意:如果双击判定在 touchstart 已完成,click 不再需要
});
// 键盘 Enter / Space 触发 (无障碍)
card.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
// 模拟单击启动
const toolId = this.getAttribute('data-tool');
if (toolId) {
activateTool(toolId);
}
}
});
// 保证无障碍 A11Y
card.setAttribute('role', 'button');
});
// ---------- 额外:全局说明 (首次访问提示) ----------
// 延迟显示欢迎提示
setTimeout(() => {
showToast('👆 双击任意卡片快速启动', 2500);
}, 600);
// ---------- 防止双击页面缩放 (移动端) ----------
document.addEventListener('dblclick', function(e) {
// 仅阻止卡片区域外的双击缩放,卡片内已自行处理
if (e.target.closest('.tool-card')) {
e.preventDefault();
}
}, { passive: false });
// ---------- 窗口自适应 & 安全区 ----------
console.log('无障碍三大工具已加载 · 专为便捷与包容设计');
// 暴露全局方法(便于调试)
window.__toolbox = {
activate: activateTool,
showToast: showToast
};
})();
手机工具箱 · 亮度 & 通知
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
background: #f5f5f5;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
transition: background 0.3s, color 0.3s;
}
body.dark {
background: #1a1a1a;
color: #eee;
}
body.dark .card { background: #2a2a2a; box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
body.dark .slider { background: #555; }
body.dark .slider::-webkit-slider-thumb { background: #007aff; }
body.dark .btn { background: #007aff; color: white; }
body.dark .btn:active { background: #0060cc; }
body.dark .shortcut-hint { background: #333; color: #ccc; }
body.dark .status-badge { background: #1a3a5c; color: #8ab4f8; }
.container { width: 100%; max-width: 400px; margin: 0 auto; }
.card {
background: white;
border-radius: 24px;
padding: 24px 20px 30px;
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
transition: background 0.3s;
position: relative;
}
h1 { font-size: 22px; font-weight: 600; margin-bottom: 20px; text-align: center; }
.section { margin-bottom: 24px; }
.section-title { font-size: 15px; font-weight: 500; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.slider-wrap { display: flex; align-items: center; gap: 12px; }
.slider-wrap .icon { font-size: 20px; width: 24px; text-align: center; }
input[type="range"] {
-webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: 3px; background: #ddd; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #007aff;
cursor: pointer; box-shadow: 0 2px 6px rgba(0,122,255,0.3);
}
.value-label { min-width: 44px; text-align: right; font-weight: 500; font-size: 16px; }
.toggle-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.btn {
flex: 1; min-width: 80px; padding: 12px 0; border: none; border-radius: 40px;
background: #007aff; color: white; font-size: 16px; font-weight: 500; cursor: pointer;
transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,122,255,0.2);
-webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.96); background: #005bbf; }
.btn.outline { background: transparent; border: 2px solid #007aff; color: #007aff; box-shadow: none; }
body.dark .btn.outline { border-color: #007aff; color: #007aff; }
.btn.outline:active { background: rgba(0,122,255,0.1); }
.shortcut-hint {
margin-top: 16px; padding: 14px; background: #f0f4ff; border-radius: 16px;
font-size: 13px; line-height: 1.6; color: #333;
}
.shortcut-hint strong { color: #007aff; }
.status-badge {
display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px;
font-weight: 500; background: #e6f0ff; color: #007aff; margin-left: 6px;
}
footer { margin-top: 20px; font-size: 12px; color: #999; text-align: center; }
/* 气泡通知样式 */
.bubble-container {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
pointer-events: none;
display: flex;
flex-direction: column-reverse;
gap: 8px;
width: 90%;
max-width: 360px;
}
.bubble {
background: #333;
color: white;
padding: 12px 18px;
border-radius: 50px;
font-size: 14px;
box-shadow: 0 4px 14px rgba(0,0,0,0.3);
animation: slideUp 0.35s ease-out, fadeOut 0.4s 2.6s forwards;
pointer-events: auto;
cursor: pointer;
text-align: center;
backdrop-filter: blur(8px);
}
.bubble.success { background: #34c759; }
.bubble.warning { background: #ff9500; }
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
to { opacity: 0; transform: translateY(-10px); }
}
🔧 手机工具箱
💬 点击弹出通知
快捷键: D 深色 | B/S 亮度±10 | R 重置 | N 页面气泡 | M 系统通知
(function() {
// ---------- 亮度 ----------
const slider = document.getElementById('brightnessSlider');
const brightnessValue = document.getElementById('brightnessValue');
const overlay = document.getElementById('brightnessOverlay');
function updateBrightness(value) {
let percent = parseInt(value, 10);
let opacity = percent < 100 ? (100 - percent) / 100 : 0;
overlay.style.opacity = opacity;
brightnessValue.textContent = percent + '%';
}
slider.addEventListener('input', function() { updateBrightness(this.value); });
updateBrightness(slider.value);
// ---------- 深色模式 ----------
const body = document.body;
const darkStatus = document.getElementById('darkStatus');
const toggleDarkBtn = document.getElementById('toggleDark');
const toggleAutoBtn = document.getElementById('toggleDarkAuto');
let isDark = false;
let followSystem = false;
function applyDark(dark) {
isDark = dark;
body.classList.toggle('dark', dark);
darkStatus.textContent = dark ? '开启' : '关闭';
darkStatus.style.background = dark ? '#1a3a5c' : '#e6f0ff';
darkStatus.style.color = dark ? '#8ab4f8' : '#007aff';
}
toggleDarkBtn.addEventListener('click', function() {
followSystem = false;
toggleAutoBtn.textContent = '自动跟随';
toggleAutoBtn.style.borderColor = '#007aff';
toggleAutoBtn.style.color = '#007aff';
applyDark(!isDark);
});
toggleAutoBtn.addEventListener('click', function() {
followSystem = !followSystem;
if (followSystem) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
applyDark(prefersDark);
toggleAutoBtn.textContent = '跟随系统 ✓';
toggleAutoBtn.style.borderColor = '#34c759';
toggleAutoBtn.style.color = '#34c759';
} else {
toggleAutoBtn.textContent = '自动跟随';
toggleAutoBtn.style.borderColor = '#007aff';
toggleAutoBtn.style.color = '#007aff';
}
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
if (followSystem) applyDark(e.matches);
});
// ---------- 气泡通知 ----------
const bubbleContainer = document.getElementById('bubbleContainer');
function showBubble(text, type) {
const bubble = document.createElement('div');
bubble.className = 'bubble' + (type ? ' ' + type : '');
bubble.textContent = text;
bubbleContainer.appendChild(bubble);
// 点击熄灭火泡
bubble.addEventListener('click', function() {
bubble.style.animation = 'none';
bubble.style.opacity = '0';
setTimeout(() => bubble.remove(), 100);
});
// 自动移除
setTimeout(() => {
if (bubble.parentNode) bubble.remove();
}, 3000);
}
document.getElementById('notifyBubble').addEventListener('click', function() {
showBubble('💡 这是一个页面气泡通知!', 'warning');
});
// ---------- 系统通知 ----------
document.getElementById('notifySystem').addEventListener('click', function() {
if (!('Notification' in window)) {
showBubble('❌ 您的浏览器不支持系统通知', 'warning');
return;
}
if (Notification.permission === 'granted') {
new Notification('工具箱通知', {
body: '这是来自手机工具箱的系统通知',
icon: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3Ccircle cx="32" cy="32" r="30" fill="%23007aff"/%3E%3Ctext x="32" y="44" font-size="28" text-anchor="middle" fill="white"%3E🔧%3C/text%3E%3C/svg%3E',
requireInteraction: true
});
showBubble('📬 系统通知已发送', 'success');
} else if (Notification.permission === 'denied') {
showBubble('⚠️ 通知已被拒绝,请在系统设置中开启', 'warning');
} else {
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
new Notification('工具箱通知', {
body: '感谢允许通知!',
});
showBubble('✅ 已开启通知权限', 'success');
} else {
showBubble('❌ 用户拒绝了通知', 'warning');
}
});
}
});
// ---------- 快捷键 ----------
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
const key = e.key.toUpperCase();
switch(key) {
case 'D':
e.preventDefault(); followSystem = false;
toggleAutoBtn.textContent = '自动跟随'; toggleAutoBtn.style.borderColor = '#007aff'; toggleAutoBtn.style.color = '#007aff';
applyDark(!isDark);
break;
case 'B': e.preventDefault(); slider.value = Math.min(150, parseInt(slider.value,10)+10); updateBrightness(slider.value); break;
case 'S': e.preventDefault(); slider.value = Math.max(30, parseInt(slider.value,10)-10); updateBrightness(slider.value); break;
case 'R': e.preventDefault(); slider.value=100; updateBrightness(100); break;
case 'N': e.preventDefault(); document.getElementById('notifyBubble').click(); break;
case 'M': e.preventDefault(); document.getElementById('notifySystem').click(); break;
}
});
// 初始化
applyDark(false);
// ---------- Service Worker (PWA 支持) ----------
if ('serviceWorker' in navigator) {
// 内联注册一个简单的 Service Worker(实际需要单独文件,此处略)
// 为了演示,只提示用户可安装
console.log('Service Worker 支持(如需离线功能,请配置真实 sw.js)');
}
// 监听 beforeinstallprompt(Chrome 安装提示)
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
// 可以显示一个自定义安装按钮,这里简单在控制台记录
console.log('可安装状态,点击主屏幕菜单添加');
});
})();
OK OK就到这里
无障碍三大工具 · 红绿灯识别 · 万能遥控 · 导航