diff --git a/notification/index.html b/notification/index.html index d8ec2c9..4bb2528 100644 --- a/notification/index.html +++ b/notification/index.html @@ -17,6 +17,7 @@ +
diff --git a/notification/scripts/script.js b/notification/scripts/script.js index 68c8805..9c954ab 100644 --- a/notification/scripts/script.js +++ b/notification/scripts/script.js @@ -199,4 +199,21 @@ function init() { window.onbeforeunload = function () { if (timer) clearTimeout(timer); }; + +function goBack() { + window.history.back(); // 返回上一页 +} + +// 监听主题切换 +document.getElementById('theme-toggle').addEventListener('change', function () { + const body = document.body; + if (this.checked) { + body.classList.remove('light-mode'); + body.classList.add('dark-mode'); + } else { + body.classList.remove('dark-mode'); + body.classList.add('light-mode'); + } +}); + init(); \ No newline at end of file diff --git a/notification/styles/dark-mode.css b/notification/styles/dark-mode.css index f6258ad..b62e5ff 100644 --- a/notification/styles/dark-mode.css +++ b/notification/styles/dark-mode.css @@ -104,3 +104,35 @@ body.dark-mode .action-btn { body.dark-mode .action-btn:hover { box-shadow: 0 6px 16px rgba(39, 174, 96, 0.35); } + +#return-btn { + position: absolute; /* 绝对定位 */ + top: 20px; /* 距离顶部 20px */ + left: 20px; /* 距离左侧 20px */ + background-color: #f5f7fa; /* 默认亮色模式背景颜色 */ + color: #333333; /* 默认亮色模式文字颜色 */ + border: 1px solid #cccccc; /* 默认亮色模式边框颜色 */ + border-radius: 16px; /* 按钮圆角大小 */ + padding: 10px 18px; /* 按钮内边距 */ + font-size: 14px; /* 按钮字体大小 */ + cursor: pointer; /* 鼠标悬停时显示为手型 */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */ + transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */ + z-index: 1001; /* 按钮层级 */ +} + +#return-btn:hover { + background-color: #e0e4e8; /* 默认亮色模式悬停背景颜色 */ + transform: scale(1.05); /* 悬停时放大 5% */ +} + +/* 暗色模式 */ +body.dark-mode #return-btn { + background-color: #4a4f55; /* 更浅的暗色模式背景颜色 */ + color: #e0e0e0; /* 暗色模式文字颜色 */ + border: 1px solid #555555; /* 更浅的暗色模式边框颜色 */ +} + +body.dark-mode #return-btn:hover { + background-color: #3b4046; /* 更浅的暗色模式悬停背景颜色 */ +} \ No newline at end of file