    <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
        display: flex;
        min-height: 100vh;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        color: #e6e6e6;
        overflow: hidden;
    }

    /* 进度条样式 */
    .progress-container {
        width: 50px;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        position: relative;
        z-index: 100;
    }

    .progress-bar {
        width: 20px;
        height: 70vh;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .progress-fill {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: linear-gradient(to top, #ff416c, #ff4b2b);
        height: 0%;
        transition: height 0.3s ease;
        border-radius: 10px;
    }

    .progress-text {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        margin-top: 20px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        letter-spacing: 1px;
    }

    /* 内容区域样式 */
    .content {
        flex: 1;
        padding: 40px;
        position: relative;
    }

    h1 {
        font-size: 2.5rem;
        margin-bottom: 20px;
        color: #ff4b2b;
    }

    p {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 15px;
        max-width: 800px;
    }

    .warning {
        color: #ff416c;
        font-weight: bold;
    }

    /* 崩坏效果 */
    .corruption-effect {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 50;
    }

    .glitch-text {
        animation: glitch 1s infinite;
    }

    @keyframes glitch {
        0% {
            text-shadow: 2px 2px #ff416c, -2px -2px #2bffc2;
        }

        25% {
            text-shadow: -2px 2px #2bffc2, 2px -2px #ff416c;
        }

        50% {
            text-shadow: 2px -2px #2bffc2, -2px 2px #ff416c;
        }

        75% {
            text-shadow: -2px -2px #ff416c, 2px 2px #2bffc2;
        }

        100% {
            text-shadow: 2px 2px #2bffc2, -2px -2px #ff416c;
        }
    }
    /*内容消融 */
    .dissolve {
        animation: dissolve 3s forwards;
    }

    @keyframes dissolve {
        to {
            opacity: 0;
            transform: translateY(20px) rotate(5deg);
        }
    }

    /* 模态框样式 */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        padding: 30px;
        border-radius: 10px;
        text-align: center;
        max-width: 500px;
        width: 90%;
        border: 2px solid #ff416c;
        box-shadow: 0 0 25px #ff416c;
    }

    .modal h2 {
        color: #ff4b2b;
        margin-bottom: 20px;
        font-size: 2rem;
    }

    .modal p {
        margin-bottom: 25px;
        font-size: 1.2rem;
    }

    .btn {
        background: linear-gradient(to right, #ff416c, #ff4b2b);
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 30px;
        font-size: 1rem;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(255, 75, 43, 0.4);
    }
</style>
    <template>
        <!-- 进度条 -->
        <div class="progress-container">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <div class="progress-text">系统稳定性进度</div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <h1>系统稳定性控制面板</h1>
            <p>欢迎访问系统控制中心。本面板用于监控和维持系统稳定性。</p>
            <p class="warning">警告：系统目前处于高度不稳定状态。请勿进行任何关键操作。</p>
            <p>当前状态：<span id="statusText">监控中...</span></p>
            <p>系统完整性：<span id="integrityText">98%</span></p>
            <p>如果系统开始出现异常，请立即保存您的工作并准备撤离。</p>
            <p>倒计时直到可能的不稳定事件：<span id="countdown">00:30</span></p>
        </div>

        <!-- 崩坏效果层 -->
        <div class="corruption-effect" id="corruptionEffect"></div>

        <!-- 模态框 -->
        <div class="modal" id="modal">
            <div class="modal-content">
                <h2>系统崩溃</h2>
                <p>系统稳定性已降至临界水平。为防止数据丢失，系统将自动关闭。</p>
                <p>请返回主页并重新登录。</p>
                <button class="btn" id="homeBtn">返回主页</button>
            </div>
        </div>
    </template>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const progressFill = document.getElementById('progressFill');
    const statusText = document.getElementById('statusText');
    const integrityText = document.getElementById('integrityText');
    const countdown = document.getElementById('countdown');
    const corruptionEffect = document.getElementById('corruptionEffect');
    const modal = document.getElementById('modal');
    const homeBtn = document.getElementById('homeBtn');
    const content = document.querySelector('.content');

    let progress = 0;
    let countdownTime = 30;
    let corruptionActive = false;

    // 更新倒计时显示
    function updateCountdown() {
        const minutes = Math.floor(countdownTime / 60);
        const seconds = countdownTime % 60;
        countdown.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

        if (countdownTime > 0) {
            countdownTime--;
        }
    }

    // 初始化倒计时
    setInterval(updateCountdown, 1000);

    // 更新进度条
    const progressInterval = setInterval(() => {
        progress += 1;
        progressFill.style.height = `${progress}%`;

        if (progress >= 70) {
            statusText.textContent = "稳定性下降";
            statusText.classList.add('warning');
        }

        if (progress >= 85) {
            integrityText.textContent = "75%";
        }

        if (progress >= 100) {
            clearInterval(progressInterval);
            startCorruption();
        }
    }, 100);

    // 开始崩坏效果
    function startCorruption() {
        corruptionActive = true;
        statusText.textContent = "系统崩溃中!";
        integrityText.textContent = "23%";

        // 添加崩坏效果
        document.body.classList.add('glitch-text');

        // 文字颜色随机变化
        const textElements = document.querySelectorAll('p, h1, span');
        const colorInterval = setInterval(() => {
            textElements.forEach(el => {
                el.style.color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
            });
        }, 200);

        // 内容逐渐消融
        content.classList.add('dissolve');

        // 显示模态框
        setTimeout(() => {
            modal.style.display = 'flex';
            clearInterval(colorInterval);
        }, 3000);
    }

    // 返回主页按钮事件
    homeBtn.addEventListener('click', function () {
        alert('返回主页');
        // 实际应用中这里可能是 window.location.href = '/';
    });

    // 添加一些随机崩坏效果
    function addCorruptionEffects() {
        if (!corruptionActive) return;

        // 创建随机闪烁元素
        const effect = document.createElement('div');
        effect.style.position = 'absolute';
        effect.style.left = Math.random() * 100 + 'vw';
        effect.style.top = Math.random() * 100 + 'vh';
        effect.style.width = Math.random() * 100 + 50 + 'px';
        effect.style.height = Math.random() * 10 + 2 + 'px';
        effect.style.background = `linear-gradient(90deg, 
                    rgba(255, 75, 43, ${Math.random() * 0.7}), 
                    rgba(255, 65, 108, ${Math.random() * 0.5}))`;
        effect.style.boxShadow = '0 0 10px rgba(255, 65, 108, 0.7)';
        effect.style.opacity = Math.random() * 0.7;
        effect.style.transform = `rotate(${Math.random() * 360}deg)`;
        effect.style.pointerEvents = 'none';

        corruptionEffect.appendChild(effect);

        // 移除元素
        setTimeout(() => {
            if (effect.parentNode) {
                effect.parentNode.removeChild(effect);
            }
        }, 2000);
    }

    // 当崩坏激活时，定期添加效果
    setInterval(() => {
        if (corruptionActive) {
            for (let i = 0; i < 3; i++) {
                addCorruptionEffects();
            }
        }
    }, 300);
});
</script>