🎀 🌸

【推荐】404页面 系统维护页面

【推荐】404页面 系统维护页面

【推荐】404页面 系统维护页面插图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统维护中 - 程序员正在拼命</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B6B',
                        secondary: '#4ECDC4',
                        coffee: '#6F4E37',
                        pizza: '#F4A261',
                        panic: '#FF2E63',
                        nap: '#83C5BE',
                        debug: '#FFD166'
                    },
                    fontFamily: {
                        comic: ['"Comic Sans MS"', 'cursive', 'sans-serif'],
                        marker: ['"Permanent Marker"', 'cursive'],
                        silly: ['"Fredoka One"', 'cursive']
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .wiggle {
                animation: wiggle 0.5s ease-in-out infinite alternate;
            }
            .jump {
                animation: jump 0.8s ease-in-out infinite;
            }
            .spin {
                animation: spin 2s linear infinite;
            }
            .shake {
                animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
            }
            .float {
                animation: float 3s ease-in-out infinite;
            }
            .pulse {
                animation: pulse 1.5s ease-in-out infinite;
            }
            .typing {
                animation: typing 3.5s steps(40, end) infinite;
                overflow: hidden;
                white-space: nowrap;
                border-right: 3px solid;
            }
        }

        @keyframes wiggle {
            from { transform: rotate(-5deg); }
            to { transform: rotate(5deg); }
        }

        @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        @keyframes typing {
            0% { width: 0 }
            50% { width: 100% }
            100% { width: 0 }
        }

        .coffee-stain {
            position: absolute;
            background-color: rgba(111, 78, 55, 0.2);
            border-radius: 50%;
        }

        .pizza-slice {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 50px solid #F4A261;
            transform: rotate(45deg);
            position: absolute;
        }
    </style>
</head>
<body class="tuc-2ea177b2-758e23-0 font-comic bg-gradient-to-br from-yellow-50 to-blue-50 min-h-screen flex flex-col items-center justify-center text-gray-800 p-4 tuc-2ea177b2-758e23-0">
    <!-- 咖啡渍装饰 -->
    <div class="tuc-2ea177b2-758e23-0 coffee-stain top-20 left-10 w-24 h-24 tuc-2ea177b2-758e23-0"></div>
    <div class="tuc-2ea177b2-758e23-0 coffee-stain bottom-20 right-10 w-32 h-32 tuc-2ea177b2-758e23-0"></div>
    <div class="tuc-2ea177b2-758e23-0 coffee-stain top-1/3 right-1/4 w-16 h-16 tuc-2ea177b2-758e23-0"></div>
    
    <!-- 披萨片装饰 -->
    <div class="tuc-2ea177b2-758e23-0 pizza-slice top-10 right-20 tuc-2ea177b2-758e23-0"></div>
    <div class="tuc-2ea177b2-758e23-0 pizza-slice bottom-10 left-20 tuc-2ea177b2-758e23-0"></div>

    <div class="tuc-2ea177b2-758e23-0 container max-w-4xl mx-auto px-4 py-8 md:py-12 bg-white rounded-3xl shadow-2xl relative overflow-hidden border-4 border-dashed border-primary tuc-2ea177b2-758e23-0">
        <!-- 紧急条幅 -->
        <div class="tuc-2ea177b2-758e23-0 absolute top-0 left-0 right-0 bg-panic text-white text-center py-2 font-bold wiggle tuc-2ea177b2-758e23-0">
            <i class="tuc-2ea177b2-758e23-0 fa-solid fa-triangle-exclamation mr-2 tuc-2ea177b2-758e23-0"></i> 紧急维护中!程序员已崩溃 <i class="tuc-2ea177b2-758e23-0 fa-solid fa-triangle-exclamation ml-2 tuc-2ea177b2-758e23-0"></i>
        </div>

        <!-- 标志区域 -->
        <div class="tuc-2ea177b2-758e23-0 text-center mb-8 mt-12 tuc-2ea177b2-758e23-0">
            <div class="tuc-2ea177b2-758e23-0 inline-flex items-center justify-center w-24 h-24 rounded-full bg-primary/10 mb-4 jump tuc-2ea177b2-758e23-0">
                <i class="tuc-2ea177b2-758e23-0 fa-solid fa-bug text-panic text-5xl tuc-2ea177b2-758e23-0"></i>
            </div>
            <h1 class="tuc-2ea177b2-758e23-0 text-4xl md:text-5xl font-bold mb-2 font-marker text-transparent bg-clip-text bg-gradient-to-r from-panic to-primary tuc-2ea177b2-758e23-0">
                <span class="tuc-2ea177b2-758e23-0 typing tuc-2ea177b2-758e23-0">系统正在抢救中...</span>
            </h1>
            <p class="tuc-2ea177b2-758e23-0 text-xl text-gray-600 max-w-2xl mx-auto tuc-2ea177b2-758e23-0">
                我们的程序员正在与代码恶魔搏斗 <i class="tuc-2ea177b2-758e23-0 fa-solid fa-hand-fist text-panic tuc-2ea177b2-758e23-0"></i>
            </p>
        </div>

        <!-- 维护信息卡片 -->
        <div class="tuc-2ea177b2-758e23-0 bg-white rounded-2xl border-2 border-primary p-6 md:p-8 mb-8 pulse tuc-2ea177b2-758e23-0">
            <div class="tuc-2ea177b2-758e23-0 flex items-center justify-between mb-6 tuc-2ea177b2-758e23-0">
                <h2 class="tuc-2ea177b2-758e23-0 text-2xl md:text-3xl font-bold font-marker text-primary tuc-2ea177b2-758e23-0">
                    <i class="tuc-2ea177b2-758e23-0 fa-solid fa-file-circle-exclamation mr-2 tuc-2ea177b2-758e23-0"></i> 
                    维护实况直播
                </h2>
                <span class="tuc-2ea177b2-758e23-0 bg-panic text-white px-3 py-1 rounded-full text-sm font-bold shake tuc-2ea177b2-758e23-0">
                    <i class="tuc-2ea177b2-758e23-0 fa-solid fa-fire mr-1 tuc-2ea177b2-758e23-0"></i> 代码着火了!
                </span>
            </div>
            
            <!-- 程序员状态 -->
            <div class="tuc-2ea177b2-758e23-0 mb-8 bg-yellow-50 p-4 rounded-xl border-2 border-dashed border-debug tuc-2ea177b2-758e23-0">
                <h3 class="tuc-2ea177b2-758e23-0 text-xl font-semibold mb-3 flex items-center tuc-2ea177b2-758e23-0">
                    <i class="tuc-2ea177b2-758e23-0 fa-solid fa-user-ninja text-panic mr-2 tuc-2ea177b2-758e23-0"></i> 
                    <span>程序员当前状态</span>
                </h3>
                <div class="tuc-2ea177b2-758e23-0 flex flex-wrap gap-4 tuc-2ea177b2-758e23-0">
                    <div class="tuc-2ea177b2-758e23-0 flex items-center tuc-2ea177b2-758e23-0">
                        <span class="tuc-2ea177b2-758e23-0 w-3 h-3 rounded-full bg-red-500 mr-2 pulse tuc-2ea177b2-758e23-0"></span>
                        <span>咖啡因水平: <span class="tuc-2ea177b2-758e23-0 font-bold text-coffee tuc-2ea177b2-758e23-0">危险高</span></span>
                    </div>
                    <div class="tuc-2ea177b2-758e23-0 flex items-center tuc-2ea177b2-758e23-0">
                        <span class="tuc-2ea177b2-758e23-0 w-3 h-3 rounded-full bg-yellow-500 mr-2 pulse tuc-2ea177b2-758e23-0"></span>
                        <span>压力指数: <span class="tuc-2ea177b2-758e23-0 font-bold text-panic tuc-2ea177b2-758e23-0">爆表</span></span>
                    </div>
                    <div class="tuc-2ea177b2-758e23-0 flex items-center tuc-2ea177b2-758e23-0">
                        <span class="tuc-2ea177b2-758e23-0 w-3 h-3 rounded-full bg-green-500 mr-2 tuc-2ea177b2-758e23-0"></span>
                        <span>键盘磨损度: <span class="tuc-2ea177b2-758e23-0 font-bold tuc-2ea177b2-758e23-0">+37%</span></span>
                    </div>
                    <div class="tuc-2ea177b2-758e23-0 flex items-center tuc-2ea177b2-758e23-0">
                        <span class="tuc-2ea177b2-758e23-0 w-3 h-3 rounded-full bg-blue-500 mr-2 tuc-2ea177b2-758e23-0"></span>
                        <span>StackOverflow 标签页: <span class="tuc-2ea177b2-758e23-0 font-bold tuc-2ea177b2-758e23-0">42个</span></span>
                    </div>
                </div>
            </div>

            <!-- 维护进度 -->
            <div class="tuc-2ea177b2-758e23-0 mb-8 tuc-2ea177b2-758e23-0">
                <h3 class="tuc-2ea177b2-758e23-0 text-xl font-semibold mb-3 flex items-center tuc-2ea177b2-758e23-0">
                    <i class="tuc-2ea177b2-758e23-0 fa-solid fa-screwdriver-wrench text-primary mr-2 spin tuc-2ea177b2-758e23-0"></i> 
                    <span>维护进度</span>
                </h3>
                
                <!-- 搞笑进度条 -->
                <div class="tuc-2ea177b2-758e23-0 mb-4 tuc-2ea177b2-758e23-0">
                    <div class="tuc-2ea177b2-758e23-0 flex justify-between mb-2 tuc-2ea177b2-758e23-0">
                        <span class="tuc-2ea177b2-758e23-0 text-sm font-bold tuc-2ea177b2-758e23-0">修复进度</span>
                        <span class="tuc-2ea177b2-758e23-0 text-sm font-bold text-primary tuc-2ea177b2-758e23-0">37% <span class="tuc-2ea177b2-758e23-0 text-xs tuc-2ea177b2-758e23-0">(可能更低)</span></span>
                    </div>
                    <div class="tuc-2ea177b2-758e23-0 w-full bg-gray-200 rounded-full h-4 tuc-2ea177b2-758e23-0">
                        <div class="tuc-2ea177b2-758e23-0 bg-gradient-to-r from-primary to-panic h-4 rounded-full relative tuc-2ea177b2-758e23-0" style="width: 37%">
                            <div class="tuc-2ea177b2-758e23-0 absolute right-0 top-0 h-4 w-4 bg-panic rounded-full shake tuc-2ea177b2-758e23-0"></div>
                        </div>
                    </div>
                    <div class="tuc-2ea177b2-758e23-0 text-xs text-gray-500 mt-1 text-right tuc-2ea177b2-758e23-0">预计完成时间: 当猪会飞的时候</div>
                </div>
                
                <!-- 维护步骤 -->
                <div class="tuc-2ea177b2-758e23-0 grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 tuc-2ea177b2-758e23-0">
                    <!-- 第一步 -->
                    <div class="tuc-2ea177b2-758e23-0 flex flex-col items-center p-4 bg-yellow-50 rounded-xl border-2 border-debug tuc-2ea177b2-758e23-0">
                        <div class="tuc-2ea177b2-758e23-0 w-12 h-12 rounded-full bg-debug/20 flex items-center justify-center mb-3 spin tuc-2ea177b2-758e23-0">
                            <i class="tuc-2ea177b2-758e23-0 fa-solid fa-mug-hot text-coffee tuc-2ea177b2-758e23-0"></i>
                        </div>
                        <h4 class="tuc-2ea177b2-758e23-0 font-bold text-gray-800 tuc-2ea177b2-758e23-0">喝咖啡提神</h4>
                        <div class="tuc-2ea177b2-758e23-0 text-xs font-medium mt-1 text-green-600 tuc-2ea177b2-758e23-0">已完成 (第8杯)</div>
                    </div>
                    
                    <!-- 第二步 -->
                    <div class="tuc-2ea177b2-758e23-0 flex flex-col items-center p-4 bg-yellow-50 rounded-xl border-2 border-debug tuc-2ea177b2-758e23-0">
                        <div class="tuc-2ea177b2-758e23-0 w-12 h-12 rounded-full bg-debug/20 flex items-center justify-center mb-3 wiggle tuc-2ea177b2-758e23-0">
                            <i class="tuc-2ea177b2-758e23-0 fa-solid fa-keyboard text-primary tuc-2ea177b2-758e23-0"></i>
                        </div>
                        <h4 class="tuc-2ea177b2-758e23-0 font-bold text-gray-800 tuc-2ea177b2-758e23-0">疯狂敲键盘</h4>
                        <div class="tuc-2ea177b2-758e23-0 text-xs font-medium mt-1 text-primary tuc-2ea177b2-758e23-0">进行中 (手已抽筋)</div>
                    </div>
                    
                    <!-- 第三步 -->
                    <div class="tuc-2ea177b2-758e23-0 flex flex-col items-center p-4 bg-yellow-50 rounded-xl border-2 border-debug opacity-50 tuc-2ea177b2-758e23-0">
                        <div class="tuc-2ea177b2-758e23-0 w-12 h-12 rounded-full bg-debug/20 flex items-center justify-center mb-3 tuc-2ea177b2-758e23-0">
                            <i class="tuc-2ea177b2-758e23-0 fa-solid fa-face-scream text-panic tuc-2ea177b2-758e23-0"></i>
                        </div>
                        <h4 class="tuc-2ea177b2-758e23-0 font-bold text-gray-800 tuc-2ea177b2-758e23-0">崩溃尖叫</h4>
                        <div class="tuc-2ea177b2-758e23-0 text-xs font-medium mt-1 text-gray-500 tuc-2ea177b2-758e23-0">等待中</div>
                    </div>
                </div>
            </div>

            <!-- 倒计时区域 -->
            <div class="tuc-2ea177b2-758e23-0 bg-primary/5 rounded-xl p-6 mb-8 border border-primary/20 tuc-2ea177b2-758e23-0">
                <h3 class="tuc-2ea177b2-758e23-0 text-xl font-semibold mb-4 text-center font-marker text-primary tuc-2ea177b2-758e23-0">
                    <i class="tuc-2ea177b2-758e23-0 fa-solid fa-hourglass-end mr-2 float tuc-2ea177b2-758e23-0"></i> 
                    <span>预计恢复时间</span>
                </h3>
                <div class="tuc-2ea177b2-758e23-0 grid grid-cols-4 gap-2 md:gap-4 tuc-2ea177b2-758e23-0">
                    <div class="tuc-2ea177b2-758e23-0 text-center tuc-2ea177b2-758e23-0">
                        <div class="tuc-2ea177b2-758e23-0 bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-panic tuc-2ea177b2-758e23-0">??</div>
                        <div class="tuc-2ea177b2-758e23-0 text-xs md:text-sm text-gray-500 mt-2 tuc-2ea177b2-758e23-0">天</div>
                    </div>
                    <div class="tuc-2ea177b2-758e23-0 text-center tuc-2ea177b2-758e23-0">
                        <div class="tuc-2ea177b2-758e23-0 bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-panic tuc-2ea177b2-758e23-0">??</div>
                        <div class="tuc-2ea177b2-758e23-0 text-xs md:text-sm text-gray-500 mt-2 tuc-2ea177b2-758e23-0">小时</div>
                    </div>
                    <div class="tuc-2ea177b2-758e23-0 text-center tuc-2ea177b2-758e23-0">
                        <div class="tuc-2ea177b2-758e23-0 bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-panic tuc-2ea177b2-758e23-0">??</div>
                        <div class="tuc-2ea177b2-758e23-0 text-xs md:text-sm text-gray-500 mt-2 tuc-2ea177b2-758e23-0">分钟</div>
                    </div>
                    <div class="tuc-2ea177b2-758e23-0 text-center tuc-2ea177b2-758e23-0">
                        <div class="tuc-2ea177b2-758e23-0 bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-panic tuc-2ea177b2-758e23-0">??</div>
                        <div class="tuc-2ea177b2-758e23-0 text-xs md:text-sm text-gray-500 mt-2 tuc-2ea177b2-758e23-0">秒</div>
                    </div>
                </div>
                <div class="tuc-2ea177b2-758e23-0 text-center mt-4 text-sm text-gray-600 tuc-2ea177b2-758e23-0">
                    <i class="tuc-2ea177b2-758e23-0 fa-solid fa-circle-info mr-1 tuc-2ea177b2-758e23-0"></i> 
                    时间仅供参考,程序员也不知道要多久
                </div>
            </div>

            <!-- 搞笑提示 -->
            <div class="tuc-2ea177b2-758e23-0 bg-secondary/10 rounded-xl p-6 mb-8 border-2 border-dashed border-secondary tuc-2ea177b2-758e23-0">
                <h3 class="tuc-2ea177b2-758e23-0 text-xl font-semibold mb-3 flex items-center text-secondary tuc-2ea177b2-758e23-0">
                    <i class="tuc-2ea177b2-758e23-0 fa-solid fa-lightbulb mr-2 tuc-2ea177b2-758e23-0"></i> 
                    <span>打发时间小贴士</span>
                </h3>
                <ul class="tuc-2ea177b2-758e23-0 list-disc pl-5 text-gray-700 space-y-2 tuc-2ea177b2-758e23-0">
                    <li>数一数页面上的咖啡渍有几个</li>
                    <li>尝试模仿程序员抓头发的动作</li>
                    <li>给自己倒杯咖啡,假装一起debug</li>
                    <li>刷新页面 (虽然没用,但大家都爱这么干)</li>
                    <li>思考人生意义 (反正现在也上不了网)</li>
                </ul>
            </div>

            <!-- 联系信息 -->
            <div class="tuc-2ea177b2-758e23-0 text-center mt-6 p-4 bg-coffee/5 rounded-xl border border-coffee/20 tuc-2ea177b2-758e23-0">
                <h3 class="tuc-2ea177b2-758e23-0 text-lg font-semibold mb-3 flex items-center justify-center text-coffee tuc-2ea177b2-758e23-0">
                    <i class="tuc-2ea177b2-758e23-0 fa-solid fa-heart-crack mr-2 tuc-2ea177b2-758e23-0"></i> 心理支持热线
                </h3>
                <p class="tuc-2ea177b2-758e23-0 text-gray-600 mb-4 tuc-2ea177b2-758e23-0">如果您因无法上网而感到焦虑...</p>
                <div class="tuc-2ea177b2-758e23-0 flex justify-center gap-4 tuc-2ea177b2-758e23-0">
                    <a href="javascript:void(0)" class="tuc-2ea177b2-758e23-0 inline-flex items-center justify-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-300 wiggle tuc-2ea177b2-758e23-0">
                        <i class="tuc-2ea177b2-758e23-0 fa-solid fa-praying-hands mr-2 tuc-2ea177b2-758e23-0"></i> 为程序员祈祷
                    </a>
                    <a href="javascript:void(0)" class="tuc-2ea177b2-758e23-0 inline-flex items-center justify-center px-4 py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-colors duration-300 jump tuc-2ea177b2-758e23-0">
                        <i class="tuc-2ea177b2-758e23-0 fa-solid fa-pizza-slice mr-2 tuc-2ea177b2-758e23-0"></i> 送披萨加油
                    </a>
                </div>
            </div>
        </div>

        <!-- 页脚 - 添加了联系方式和网站信息 -->
        <footer class="tuc-2ea177b2-758e23-0 mt-6 text-center text-gray-500 text-sm tuc-2ea177b2-758e23-0">
            <p>© 2023 代码抢救中心 | 技术支持: 咖啡因和绝望</p>
            <p class="tuc-2ea177b2-758e23-0 mt-1 tuc-2ea177b2-758e23-0">联系QQ: 2469329338 | 诺言源码网: <a href="https:/zy.nuoyo.cn" target="_blank" class="tuc-2ea177b2-758e23-0 text-primary hover:underline tuc-2ea177b2-758e23-0">zy.nuoyo.cn</a></p>
            <p class="tuc-2ea177b2-758e23-0 text-xs mt-1 tuc-2ea177b2-758e23-0">免责声明: 没有任何程序员在制作本页面时受到伤害...大概</p>
        </footer>
    </div>

    <!-- 随机出现的搞笑弹窗 -->
    <div id="funny-popup" class="tuc-2ea177b2-758e23-0 fixed bottom-4 right-4 bg-panic text-white p-4 rounded-lg shadow-xl max-w-xs hidden border-2 border-white tuc-2ea177b2-758e23-0">
        <div class="tuc-2ea177b2-758e23-0 flex items-start tuc-2ea177b2-758e23-0">
            <div class="tuc-2ea177b2-758e23-0 flex-shrink-0 mr-3 text-2xl tuc-2ea177b2-758e23-0">
                <i class="tuc-2ea177b2-758e23-0 fa-solid fa-comment-dots tuc-2ea177b2-758e23-0"></i>
            </div>
            <div>
                <p class="tuc-2ea177b2-758e23-0 text-sm font-bold tuc-2ea177b2-758e23-0" id="popup-message">你知道刷新页面其实没用,对吧?</p>
            </div>
            <button onclick="closePopup()" class="tuc-2ea177b2-758e23-0 ml-2 text-white hover:text-gray-200 tuc-2ea177b2-758e23-0">
                <i class="tuc-2ea177b2-758e23-0 fa-solid fa-times tuc-2ea177b2-758e23-0"></i>
            </button>
        </div>
    </div>

<script>
    // 搞笑弹窗消息列表
    const popupMessages = [
        "你知道刷新页面其实没用,对吧?",
        "别担心,程序员只是去厕所哭了",
        "404: 耐心未找到",
        "我们的服务器被猫踩了",
        "程序员说:'在我机器上能运行啊'",
        "正在尝试第47种解决方案...",
        "这不是bug,这是特性!",
        "我们可能需要更多的咖啡",
        "Error: 幽默感加载失败",
        "请稍候,正在重启程序员的脑细胞"
    ];

    // 显示随机弹窗
    function showRandomPopup() {
        const popup = document.getElementById('funny-popup');
        const message = document.getElementById('popup-message');
        
        // 随机选择一条消息
        const randomMessage = popupMessages[Math.floor(Math.random() * popupMessages.length)];
        message.textContent = randomMessage;
        
        // 随机位置 (避免总是在右下角)
        const positions = ['bottom-4 right-4', 'bottom-4 left-4', 'top-4 right-4', 'top-4 left-4'];
        const randomPosition = positions[Math.floor(Math.random() * positions.length)];
        
        // 移除所有位置类
        popup.classList.remove('bottom-4', 'right-4', 'left-4', 'top-4');
        // 添加随机位置类
        randomPosition.split('
本站资源均为网友推荐收集整理而来,请勿商业运营,仅供学习和研究,请在下载后24小时内删除!!
© 版权声明
THE END
点赞10
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容