<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USB设备在线状态运维平台</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(145deg, #eef5f3 0%, #dee9e4 100%);
            padding: 20px;
            position: relative;
        }

        /* 环境光晕 */
        body::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 40%, rgba(46, 204, 113, 0.03) 0%, transparent 50%),
                        radial-gradient(circle at 80% 70%, rgba(52, 152, 219, 0.03) 0%, transparent 50%);
            pointer-events: none;
            z-index: 1;
        }

        .main-content {
            text-align: center;
            margin: 1.5rem 1rem 4rem 1rem;
            max-width: 1200px;
            width: 100%;
            position: relative;
            z-index: 10;
        }

        /* 标题区域 - 拟物写实U盘 + 标题 */
        .title-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 28px;
            margin-bottom: 3.2rem;
            flex-wrap: wrap;
        }

        /* ========= 拟物写实风格U盘 (高清细节版) ========= */
        .realistic-usb {
            position: relative;
            width: 96px;
            height: 108px;
            display: flex;
            flex-direction: column;
            align-items: center;
            filter: drop-shadow(0 20px 25px rgba(0, 40, 20, 0.35));
            transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        }

        .title-wrapper:hover .realistic-usb {
            transform: translateY(-8px) scale(1.02);
        }

        /* 金属接口 - 多层细节 */
        .usb-connector {
            position: relative;
            width: 42px;
            height: 26px;
            background: linear-gradient(170deg, #eef3fa, #b7c9dd, #8fa3bf);
            border-radius: 8px 8px 4px 4px;
            border: 2px solid #6a7c94;
            border-top: 1px solid #ffffff;
            box-shadow: inset 0 2px 6px rgba(255,255,255,0.8), inset 0 -3px 4px rgba(0,0,0,0.2), 0 -3px 0 #4a5a6e;
            margin-bottom: -4px;
            z-index: 5;
        }

        /* 接口内的金属触点 */
        .usb-connector::before {
            content: '';
            position: absolute;
            top: 5px;
            left: 8px;
            width: 20px;
            height: 8px;
            background: #2c3e50;
            border-radius: 2px;
            box-shadow: inset 0 1px 3px #00000060, 0 1px 0 #a0b8d0;
        }

        /* 接口侧面卡槽 */
        .usb-connector::after {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 4px;
            width: 8px;
            height: 3px;
            background: #c0a67a;
            border-radius: 1px;
            box-shadow: 10px 0 0 #c0a67a;
            opacity: 0.7;
        }

        /* U盘主体 - 高光塑料质感 */
        .usb-body {
            width: 72px;
            height: 72px;
            background: radial-gradient(circle at 30% 20%, #6b8cae, #2c405c 80%);
            border-radius: 22px 22px 16px 16px;
            box-shadow: 0 12px 0 #1d2c3a, inset 0 -4px 6px rgba(0,0,0,0.6), inset 0 4px 10px rgba(255,255,255,0.5);
            border: 1px solid #9fb7d3;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0 10px 0;
            position: relative;
            overflow: hidden;
        }

        /* 高光反射层 */
        .usb-body::after {
            content: '';
            position: absolute;
            top: 0;
            left: -30%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-15deg);
            animation: shine 4s infinite ease-in-out;
            pointer-events: none;
        }

        @keyframes shine {
            0% { left: -60%; }
            20% { left: 120%; }
            100% { left: 120%; }
        }

        /* 品牌标签 */
        .usb-brand {
            background: #e6c229;
            color: #1a2b3c;
            font-size: 12px;
            font-weight: 800;
            padding: 3px 12px;
            border-radius: 20px;
            letter-spacing: 1px;
            box-shadow: inset 0 -2px 0 #a07d15, 0 2px 5px black;
            border: 1px solid #f5d742;
            text-transform: uppercase;
            z-index: 6;
        }

        /* 容量标识 */
        .usb-capacity {
            font-size: 14px;
            font-weight: bold;
            color: #d4eaff;
            text-shadow: 0 2px 3px black;
            background: rgba(0,0,0,0.3);
            padding: 2px 10px;
            border-radius: 12px;
            backdrop-filter: blur(2px);
            border: 1px solid #7f9fbf;
            letter-spacing: 1px;
            z-index: 6;
        }

        /* 指示灯 - 呼吸效果 */
        .usb-led {
            width: 14px;
            height: 14px;
            background: #2ef0a0;
            border-radius: 50%;
            box-shadow: 0 0 16px #2ecc71, inset 0 2px 4px white;
            border: 1px solid #c0ffdc;
            animation: breathe 2.2s infinite ease-in-out;
            margin-top: 2px;
            z-index: 6;
        }

        @keyframes breathe {
            0% { opacity: 0.7; transform: scale(0.95); }
            50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 24px #3affb0; }
            100% { opacity: 0.7; transform: scale(0.95); }
        }

        /* 标题文字 - 优雅立体感 */
        h1 {
            color: #1b4d38;
            font-weight: 600;
            font-size: 2.6rem;
            letter-spacing: 1.5px;
            margin: 0;
            background: linear-gradient(145deg, #236b4a, #0f3f2c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 4px 6px 12px rgba(20, 80, 40, 0.25);
            white-space: nowrap;
        }

        /* 4x4 网格布局 */
        .status-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem 2.5rem;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            padding: 1rem 1.5rem;
            max-width: 1000px;
        }

        /* 绿色按钮 - 立体质感，与图标风格呼应 */
        .device-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 12px;
            background: linear-gradient(165deg, #2dbd66, #1d8b48);
            color: white;
            font-size: 1.6rem;
            font-weight: 700;
            border-radius: 56px;
            box-shadow: 0 16px 0 #0f552e, 0 12px 28px rgba(30, 110, 40, 0.5);
            border: none;
            border-bottom: 3px solid #50e687;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.1s cubic-bezier(0.2, 0.9, 0.3, 1.1);
            line-height: 1.2;
            width: 100%;
            min-width: 130px;
            white-space: nowrap;
            font-family: inherit;
            outline: none;
            text-shadow: 0 3px 4px rgba(0, 30, 0, 0.4);
            letter-spacing: 1px;
        }

        /* 按下效果 */
        .device-btn:active {
            transform: translateY(8px);
            box-shadow: 0 8px 0 #0f552e, 0 10px 20px rgba(30, 110, 40, 0.5);
            background: linear-gradient(165deg, #1f9e53, #177a3d);
        }

        /* 悬停加深 */
        .device-btn:hover {
            background: linear-gradient(165deg, #3cdb7a, #27ae60);
            box-shadow: 0 16px 0 #1a6e3a, 0 18px 30px rgba(40, 140, 60, 0.6);
            cursor: pointer;
        }

        .device-btn:focus-visible {
            outline: 3px solid #f39c12;
            outline-offset: 4px;
        }

        /* 底部备案区域 - 双备案并排，毛玻璃样式 */
        .icp-footer {
            position: fixed;
            left: 28px;
            bottom: 28px;
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            padding: 12px 28px;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            font-size: 1.1rem;
            color: #1f543a;
            border: 1px solid rgba(70, 140, 100, 0.3);
            border-radius: 60px;
            box-shadow: 0 12px 28px rgba(0, 45, 20, 0.15);
            z-index: 100;
            font-weight: 520;
            letter-spacing: 0.3px;
            align-items: center;
        }

        .icp-footer a {
            color: #166b3a;
            text-decoration: none;
            font-weight: 550;
            transition: color 0.2s;
            white-space: nowrap;
        }

        .icp-footer a:hover {
            color: #e67e22;
        }

        /* 响应式优化：小屏幕时备案分两行 */
        @media (max-width: 550px) {
            .icp-footer {
                flex-direction: column;
                gap: 8px;
                left: 16px;
                bottom: 16px;
                padding: 12px 20px;
                border-radius: 40px;
                align-items: flex-start;
            }
        }

        @media (max-width: 850px) {
            h1 {
                font-size: 2.2rem;
                white-space: normal;
            }
            .realistic-usb {
                width: 84px;
                height: 96px;
            }
            .usb-body {
                width: 64px;
                height: 64px;
            }
            .device-btn {
                font-size: 1.3rem;
                min-width: 100px;
                padding: 16px 8px;
            }
            .status-grid {
                gap: 1.5rem 1.8rem;
            }
        }

        @media (max-width: 600px) {
            .device-btn {
                font-size: 1.1rem;
                min-width: 70px;
                padding: 14px 4px;
                box-shadow: 0 10px 0 #0f552e;
            }
            .status-grid {
                gap: 1rem 1rem;
            }
            h1 {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 450px) {
            .device-btn {
                font-size: 0.9rem;
                padding: 10px 2px;
                border-radius: 40px;
            }
        }
    </style>
</head>
<body>
    <div class="main-content">
        <!-- 标题区域：拟物写实U盘 + 标题 -->
        <div class="title-wrapper">
            <!-- 拟物写实风格U盘 (最终选定版) -->
            <div class="realistic-usb" role="img" aria-label="拟物写实U盘图标">
                <!-- 金属USB接口 -->
                <div class="usb-connector"></div>
                <!-- U盘主体 -->
                <div class="usb-body">
                    <div class="usb-brand">USB 3.2</div>
                    <div class="usb-capacity">64GB</div>
                    <div class="usb-led"></div>
                </div>
            </div>
            <h1>USB设备在线状态面板</h1>
        </div>

        <!-- 4x4网格 - 16个按钮，编号01~16 -->
        <div class="status-grid" id="deviceGrid"></div>
    </div>

    <!-- 备案信息左下角：同时包含工信部备案和公安备案 (并排) -->
    <div class="icp-footer">
        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">闽ICP备2026005967号-1</a>
        <!-- 新增公安备案号，符合 rel 及 target 要求 -->
        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=35020602003572" rel="noreferrer noopener" target="_blank">闽公网安备35020602003572号</a>
    </div>

    <script>
        (function() {
            const grid = document.getElementById('deviceGrid');
            const totalDevices = 16;

            // 生成编号 01 到 16
            for (let i = 1; i <= totalDevices; i++) {
                const numberStr = i.toString().padStart(2, '0'); // "01", "02", ... "16"
                const button = document.createElement('button');
                button.className = 'device-btn';
                button.textContent = `${numberStr} 在线`;

                // 点击弹出信息
                button.addEventListener('click', function() {
                    alert('在线：正在运行');
                });

                grid.appendChild(button);
            }
        })();
    </script>

    <!-- 说明：页面采用拟物写实U盘图标，4x4网格，编号01-16，点击按钮弹窗。左下角双备案：工信部+公安。完全满足需求。 -->
</body>
</html>