smokeping 美化
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xxxx for <##title##></title>
<style>
/* CSS 变量，便于全局修改风格 */
:root {
--primary-color: #007bff; /* 蓝色作为强调色，但侧边栏选中项将使用黑色系 */
--text-color: #212529; /* 深色文本，在白色背景下更清晰 */
--light-text-color: #495057; /* 浅色文本 */
--background-color: #ffffff; /* 主体背景改为白色 */
--surface-color: rgba(248, 249, 250, 0.8); /* 浅灰半透明表面，接近白色 */
--border-color: rgba(0, 0, 0, 0.1); /* 浅边框颜色 */
--transition-duration: 0.4s;
--box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.08); /* 调整阴影使其在白色背景下更明显 */
--box-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
--dark-selection-bg: #343a40; /* 黑色系选中背景 */
--dark-selection-text: #ffffff; /* 黑色系选中文字颜色 */
}
/* 通用样式重置 */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
height: 100%;
display: flex;
flex-direction: column;
overflow-x: hidden; /* 防止水平滚动条 */
transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-duration) ease;
}
a:hover {
color: #0056b3;
}
/* 移动端头部栏样式 */
.mobile-header {
display: none; /* 默认在桌面端隐藏 */
background-color: #ffffff; /* 顶栏主体改为白色 */
color: var(--text-color); /* 顶栏文字颜色 */
padding: 10px 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 调整阴影 */
align-items: center;
justify-content: space-between;
position: fixed; /* 固定在顶部 */
top: 0;
left: 0;
right: 0;
z-index: 999; /* 确保在内容之上，侧边栏之下 */
height: 60px; /* 固定高度 */
transition: background-color var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
}
.mobile-header .header-title {
font-size: 1.3rem;
font-weight: bold;
flex-grow: 1;
text-align: center;
padding-left: 20px; /* 为汉堡菜单图标留出空间 */
padding-right: 10px;
white-space: nowrap; /* 防止标题换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 溢出时显示省略号 */
}
/* 汉堡菜单按钮样式 (调整为在mobile-header中) */
.menu-toggle {
position: static; /* 不再是fixed定位 */
display: flex; /* 默认在桌面端隐藏，但在 mobile-header 中需 flex */
width: 30px;
height: 30px;
flex-direction: column;
justify-content: space-around;
padding: 0; /* 移除内边距 */
cursor: pointer;
background-color: transparent; /* 透明背景 */
border-radius: 8px;
box-shadow: none; /* 移除阴影 */
transition: transform var(--transition-duration) ease;
}
.menu-toggle:hover {
transform: scale(1.05);
}
.menu-toggle span {
display: block;
width: 100%;
height: 3px;
background-color: var(--text-color); /* 汉堡菜单条改为深色文本色 */
border-radius: 2px;
transition: all var(--transition-duration) ease;
}
/* 汉堡菜单打开时的动画效果 */
.menu-toggle.open span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* --- 顶部横幅样式 --- */
.top-banner {
display: none; /* 默认隐藏，只在桌面端显示 */
background-color: #343a40; /* 深灰色背景 */
color: #ffffff; /* 白色文字 */
text-align: center;
padding: 15px 20px;
font-size: 1.1rem;
font-weight: bold;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: sticky; /* 粘性定位 */
top: 0;
left: 0;
right: 0;
z-index: 990; /* 在内容之上，低于 mobile-header */
}
/* --- 布局容器 --- */
.container {
display: flex;
flex-grow: 1;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
gap: 20px;
width: 100%;
}
/* --- 侧边栏 --- */
.sidebar {
width: 280px;
background-color: var(--surface-color);
border-radius: 20px;
padding: 20px;
box-shadow: var(--box-shadow-light);
transition: all var(--transition-duration) ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
flex-shrink: 0;
will-change: transform, box-shadow;
}
.sidebar:hover {
box-shadow: var(--box-shadow-hover);
transform: translateY(-2px);
}
.sidebar-menu ul {
list-style: none;
}
/* 侧边栏每个菜单项的“玻璃卡片”效果 */
.sidebar-menu > ul > li {
background-color: rgba(255, 255, 255, 0.9); /* 更接近白色，减少透明度 */
border: 1px solid rgba(0, 0, 0, 0.08); /* 浅边框 */
border-radius: 12px;
padding: 10px;
margin-bottom: 12px;
backdrop-filter: blur(5px);
transition: all var(--transition-duration) ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* 调整阴影 */
will-change: transform, box-shadow;
}
.sidebar-menu > ul > li:hover {
background-color: rgba(250, 250, 250, 0.95); /* 悬停时略微变色 */
transform: scale(1.01); /* 轻微缩放 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.sidebar-menu a {
display: block;
padding: 8px 15px;
border-radius: 8px;
color: var(--light-text-color);
transition: all var(--transition-duration) ease;
}
/* 选中项的样式 - 黑色系主体 */
.menuactive > .menulinkactive {
background-color: var(--dark-selection-bg); /* 黑色系背景 */
color: var(--dark-selection-text); /* 白色文字 */
font-weight: bold;
border-radius: 8px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* 较强的阴影 */
transform: translateY(-2px);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 略微文字阴影 */
}
.menuactive > .menulinkactive:hover {
background-color: #495057; /* 悬停时略微变浅 */
color: white;
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
/* 子菜单调整 */
.sidebar-menu ul ul {
margin-top: 8px;
padding-left: 15px;
}
.sidebar-menu ul ul a {
font-size: 0.9em;
padding: 6px 10px;
}
/* --- 主内容区域 --- */
.main-content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.page-content {
flex-grow: 1;
padding: 30px;
background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9)); /* 更白的渐变背景 */
border-radius: 20px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--box-shadow-light);
border: 1px solid rgba(0, 0, 0, 0.1); /* 浅边框 */
transition: all var(--transition-duration) ease;
will-change: transform, box-shadow;
}
.page-content:hover {
box-shadow: var(--box-shadow-hover);
transform: translateY(-2px);
}
.page-content h1 {
font-size: 2.5rem;
margin-bottom: 10px;
color: var(--text-color);
}
.page-content h2 {
font-size: 1.2rem;
color: var(--light-text-color);
margin-bottom: 30px;
}
/* 面板间隔 */
.overview, .details {
margin-bottom: 20px;
}
/* 表格响应式容器 */
.table-responsive {
width: 100%;
overflow-x: auto; /* 允许水平滚动 */
-webkit-overflow-scrolling: touch; /* iOS 上的平滑滚动 */
}
/* 页脚 */
.footer {
padding: 20px 30px;
text-align: center;
color: var(--light-text-color);
font-size: 0.8rem;
border-top: 1px solid var(--border-color);
margin-top: 20px;
flex-shrink: 0;
transition: opacity var(--transition-duration) ease, border-color var(--transition-duration) ease;
will-change: opacity;
}
/* 隐藏 filter */
.filter {
display: none;
}
/* --- 响应式设计 --- */
/* 桌面端 (min-width: 993px) */
@media (min-width: 993px) {
.mobile-header {
display: none; /* 桌面端隐藏移动头部 */
}
.menu-toggle {
display: none; /* 桌面端隐藏汉堡菜单 */
}
.top-banner {
display: block; /* **桌面端显示顶部横幅** */
}
/* 桌面端 container 顶部间距根据横幅高度调整 */
.container {
padding-top: 20px; /* 现有顶部间距 */
/* 考虑到 top-banner 是 sticky，实际内容会从 banner 下方开始 */
/* 如果希望内容完全在 banner 下方，可以给 body 或 main-content 加上 margin-top */
}
body {
padding-top: 0; /* 确保 body 没有额外的顶部 padding */
}
}
/* 小于或等于 992px 的屏幕 */
@media (max-width: 992px) {
.mobile-header {
display: flex; /* 在小屏幕显示头部栏 */
}
.top-banner {
display: none; /* 移动端隐藏顶部横幅 */
}
/* 调整 container 顶部间距以避开固定头部栏 */
.container {
flex-direction: column;
padding: 10px;
gap: 10px;
padding-top: 70px; /* 为固定头部栏留出空间 (mobile-header 高度 60px + 10px 间距) */
}
.sidebar {
width: 100%;
margin-top: 0;
box-shadow: none;
transform: none;
position: static; /* 992px以下侧边栏不再是fixed，而是跟随文档流 */
padding-top: 0; /* 移除内边距调整 */
}
.sidebar-menu > ul > li {
transform: none;
}
.page-content:hover {
transform: none;
box-shadow: var(--box-shadow-light);
}
}
/* 小于或等于 768px 的屏幕 (真正的小型移动设备) */
@media (max-width: 768px) {
.sidebar {
position: fixed; /* 侧边栏固定定位，以便从左侧滑出 */
left: -250px; /* 默认隐藏在屏幕左侧，250px 与宽度一致 */
top: 0;
bottom: 0;
z-index: 1000; /* 在所有内容之上 */
width: 250px; /* 侧边栏宽度 */
padding: 15px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
background-color: rgba(255, 255, 255, 0.95);
border: none;
margin-top: 0;
padding-top: 70px; /* 为固定头部栏留出空间 */
overflow-y: auto; /* 侧边栏内容过多时允许滚动 */
transition: left var(--transition-duration) ease; /* 确保 left 属性有过渡效果 */
}
.sidebar.show {
left: 0; /* 当有 'show' 类时，滑入显示 */
}
/* 遮罩层样式 */
.overlay {
display: none; /* 默认隐藏 */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
z-index: 990; /* 在侧边栏之下，内容之上 */
transition: opacity var(--transition-duration) ease;
opacity: 0;
}
.overlay.show {
display: block; /* 当侧边栏显示时，显示遮罩 */
opacity: 1;
}
/* 当侧边栏打开时，禁用主页面的滚动 */
body.no-scroll {
overflow: hidden;
}
}
</style>
</head>
<body>
<header class="mobile-header" id="mobile-header">
<div class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</div>
<div class="header-title">
xxxxx for <##title##>
</div>
</header>
<div class="top-banner">
- xxxxx for SmokePing -
</div>
<div class="overlay" id="overlay"></div>
<div class="container">
<aside class="sidebar" id="sidebar">
<nav class="sidebar-menu">
<##menu##>
</nav>
</aside>
<div class="main-content">
<main class="page-content">
<h1><##title##></h1>
<h2><##remark##></h2>
<section class="overview">
<div class="table-responsive">
<##overview##>
</div>
</section>
<section class="details">
<div class="table-responsive">
<##body##>
</div>
</section>
</main>
<footer class="footer">
<p class="footer-right"><small>Running on <##smokeping##> by <##author##></small></p>
<p><small>Maintained by <a href="mailto:<##contact##>"><##owner##></a></small></p>
</footer>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.getElementById('menu-toggle');
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('overlay');
const body = document.body;
function toggleSidebar() {
sidebar.classList.toggle('show');
menuToggle.classList.toggle('open');
overlay.classList.toggle('show');
body.classList.toggle('no-scroll'); // 切换 body 的滚动状态
}
// 点击汉堡菜单时切换侧边栏
menuToggle.addEventListener('click', toggleSidebar);
// 点击遮罩层时关闭侧边栏
overlay.addEventListener('click', toggleSidebar);
// 可选：如果侧边栏内的链接被点击，也关闭侧边栏
const sidebarLinks = sidebar.querySelectorAll('a');
sidebarLinks.forEach(link => {
link.addEventListener('click', function(event) {
// 如果是移动端且侧边栏可见，则关闭
if (window.innerWidth <= 768 && sidebar.classList.contains('show')) {
toggleSidebar();
}
});
});
// 监听窗口大小变化，当从移动端变回桌面端时，确保侧边栏状态重置
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
sidebar.classList.remove('show');
menuToggle.classList.remove('open');
overlay.classList.remove('show');
body.classList.remove('no-scroll');
}
});
});
</script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous/scriptaculous.js?load=builder,effects,dragdrop" type="text/javascript"></script>
<script src="js/cropper/cropper.js" type="text/javascript"></script>
<script src="js/smokeping.js" type="text/javascript"></script>
</body>
</html>