<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        body { background: #0a0806; color: #d4c8b0; font-family: 'Source Han Sans CN', sans-serif; margin: 0; padding: 0; }
        .monitor { width: 100%; height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
        
        /* 顶部标题栏 */
        .header { height: 60px; border-bottom: 2px solid #3a3028; display: flex; align-items: center; padding: 0 20px; background: rgba(0,0,0,0.8); }
        .header-title { font-size: 24px; color: #d4a373; letter-spacing: 4px; font-weight: bold; }

        /* 状态栏区块 */
        .status-bar { 
            position: absolute; bottom: 0; width: 100%; height: 90px; 
            background: rgba(10,8,6,0.9); border-top: 2px solid #3a3028;
            display: flex; align-items: center; justify-content: space-around;
            backdrop-filter: blur(10px); z-index: 100;
        }
        .data-item { min-width: 80px; text-align: center; border-right: 1px solid #3a3028; padding: 0 10px; cursor: pointer; }
        .data-item:hover { background: rgba(212,163,115,0.12); }
        .label { font-size: 10px; color: #7a6a58; display: block; margin-bottom: 5px; }
        .value { font-size: 18px; font-family: monospace; font-weight: bold; }
        
        /* 颜色逻辑 */
        .val-danger { color: #ff3d1a; animation: flicker 0.5s infinite; }
        .val-warning { color: #e8a838; }
        .val-safe { color: #3a8a5a; }

        /* 警示覆盖层 */
        #alert-layer { 
            position: absolute; bottom: 90px; width: 100%; height: 30px; 
            background: linear-gradient(90deg, #8b0000, #ff3d1a);
            color: white; font-weight: bold; text-align: center; line-height: 30px;
            transform: translateY(100%); transition: 0.5s;
        }

        @keyframes flicker { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
    </style>
</head>
<body>
    <div class="monitor">
        <div class="header"><div class="header-title">KK PARK / GLOBAL SURVEILLANCE</div></div>
        
        <!-- 中央监控区域 (可放背景图预览) -->
        <div style="flex:1; background: radial-gradient(circle, #1a0e0a 0%, #0a0806 100%);"></div>

        <div id="alert-layer">⚠️ 高度警戒 — 建议收缩防线</div>

        <div class="status-bar">
            <div class="data-item"><span class="label">🩸 存活天数</span><span id="days" class="value">1</span></div>
            <div class="data-item"><span class="label">⚔️ 警戒度</span><span id="alert" class="value">15%</span></div>
            <div class="data-item"><span class="label">💰 资金储备</span><span id="funds" class="value">3200W</span></div>
            <div class="data-item"><span class="label">🧠 忠诚指数</span><span id="loyalty" class="value">72%</span></div>
            <div class="data-item"><span class="label">📡 外部压力</span><span id="pressure" class="value">45%</span></div>
            <div class="data-item"><span class="label">🔫 武装力量</span><span id="force" class="value">98</span></div>
            <div class="data-item"><span class="label">🕳️ 内部叛徒</span><span id="traitor" class="value">0</span></div>
        </div>
    </div>

    <script>
        // 动态更新函数示例
        function updateStatus(key, val) {
            const el = document.getElementById(key);
            el.innerText = val;
            
            // 紧急状态触发逻辑
            if(key === 'alert' && parseInt(val) > 70) {
                document.getElementById('alert-layer').style.transform = 'translateY(0)';
                el.classList.add('val-danger');
            }
        }

        // 初始化模拟
        setTimeout(() => updateStatus('alert', '85%'), 3000);
    </script>
</body>
</html>