Gemini撸出来的

手机端适配

预览图

<!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>