<br />
<b>Warning</b>:  mkdir(): No space left on device in <b>/www/wwwroot/T3.COM/func.php</b> on line <b>127</b><br />
<br />
<b>Warning</b>:  file_put_contents(./cachefile_yuan/ntdoor.com/img/f9/2c488/51083.css): failed to open stream: No such file or directory in <b>/www/wwwroot/T3.COM/func.php</b> on line <b>115</b><br />
﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面不见啦 · 404</title>
    <!-- 简洁重置 + 柔和平滑字体 -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(145deg, #f8f9fe 0%, #eef0f5 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
            padding: 1.5rem;
        }

        /* 主卡片 —— 让404内容与动画融合成一个优雅模块 */
        .error-card {
            max-width: 780px;
            width: 100%;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 56px 56px 48px 48px;
            box-shadow: 0 30px 50px -20px rgba(0, 20, 40, 0.25),
                        inset 0 1px 2px rgba(255,255,255,0.6);
            padding: 2.5rem 2.5rem 3rem 2.5rem;
            border: 1px solid rgba(255,255,255,0.5);
        }

        /* 继承原文案区域 + 微调 */
        .module-error .error-main {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            margin-bottom: 2rem;
        }

        /* 左边保留「标签」装饰 —— 让它变得可爱 */
        .label {
            width: 140px;
            height: 140px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="46" fill="%23FFD966" stroke="%23FFB347" stroke-width="3"/><text x="50" y="70" font-size="48" font-weight="bold" text-anchor="middle" fill="%23A64D2E" font-family="Arial, sans-serif">404</text><circle cx="30" cy="35" r="6" fill="%23FFFFFF"/><circle cx="70" cy="35" r="6" fill="%23FFFFFF"/></svg>') no-repeat center/contain;
            background-size: contain;
            filter: drop-shadow(0 8px 10px rgba(0,0,0,0.05));
        }

        /* 右侧信息 */
        .info {
            flex: 1;
            min-width: 240px;
        }

        .title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1a2639;
            letter-spacing: -0.02em;
            line-height: 1.2;
            margin-bottom: 1.2rem;
            text-shadow: 2px 2px 0 rgba(255,255,255,0.6);
        }

        .reason {
            background: rgba(255, 255, 240, 0.6);
            border-radius: 30px;
            padding: 1.2rem 1.8rem;
            margin: 1.5rem 0;
            border-left: 6px solid #fe8320;
            box-shadow: inset 0 1px 4px #ffeecc;
            color: #3a2c1b;
            font-size: 1.15rem;
        }

        .reason p {
            margin: 0.4rem 0;
        }

        .oper a {
            display: inline-block;
            background: #1a2639;
            color: white;
            text-decoration: none;
            padding: 0.75rem 2rem;
            border-radius: 40px;
            font-weight: 600;
            font-size: 1.2rem;
            border: 2px solid #ffb444;
            box-shadow: 0 8px 0 #0f172a, 0 10px 20px rgba(0,0,0,0.1);
            transition: all 0.15s ease;
            margin-top: 0.5rem;
        }

        .oper a:hover {
            transform: translateY(4px);
            box-shadow: 0 4px 0 #0f172a, 0 12px 24px rgba(0,0,0,0.1);
            background: #2d3b55;
            border-color: #ffa01c;
        }

        /* 酷炫边框动画按钮 —— 保留原demo精髓，但尺寸更协调，放在卡片下方 */
        .demo {
            position: relative;
            display: block;
            width: 260px;
            height: 260px;
            margin: 0 auto 1rem auto;
            text-decoration: none;
            overflow: hidden;
            border-radius: 50% 30% 50% 30% / 40% 50% 40% 50%;
            background: #fff2db;
            box-shadow: 0 25px 35px -10px rgba(255, 120, 0, 0.3);
            transition: border-radius 0.3s;
        }

        .demo:hover {
            border-radius: 40% 50% 40% 50% / 50% 30% 50% 30%;
        }

        .text {
            background: #fe8320;
            width: 100%;
            height: 100%;
            line-height: 260px;
            text-align: center;
            color: white;
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: 2px;
            text-shadow: 2px 2px 0 #b85b00;
            text-transform: uppercase;
            border-radius: inherit;
            box-shadow: inset 0 -5px 15px rgba(0,0,0,0.1);
        }

        /* 四个滑动边框 (原bor1~bor4) */
        .demo span {
            position: absolute;
            display: block;
            background: #c5283d;  /* 更醒目的红 */
            box-shadow: 0 0 8px #ff7b7b;
            transition: all 0.4s ease-in-out;
        }

        .demo .bor1 { left: 10px; top: 0; width: 0; height: 5px; }
        .demo .bor2 { right: 0; top: 10px; width: 5px; height: 0; }
        .demo .bor3 { right: 10px; bottom: 0; width: 0; height: 5px; }
        .demo .bor4 { left: 0; bottom: 10px; width: 5px; height: 0; }

        .demo:hover .bor1,
        .demo:hover .bor3 { width: calc(100% - 20px); }  /* 左右留边距 */
        .demo:hover .bor2,
        .demo:hover .bor4 { height: calc(100% - 20px); }

        /* 可选的斜角p标签动画（原注释掉，但我重新启用并美化一点点） 
           为了保留原设计的“双重边框动画”，取消注释并微调颜色 */
        .bor_l, .bor_r {
            position: absolute;
            top: 0;
            width: 130px;  /* 稍窄一点让斜线更明显 */
            height: 260px;
            overflow: hidden;
            pointer-events: none;  /* 不影响点击 */
        }
        .bor_l { left: 0; }
        .bor_r { right: 0; }

        .demo p {
            border: 6px solid #ffbb77;
            width: 260px;
            height: 260px;
            transform: rotate(-45deg);
            border-radius: 30% 50% 30% 50%;
            opacity: 0.9;
            box-sizing: border-box;
        }

        .bor_l p {
            border-left-color: #cc561e;
            border-top-color: #cc561e;
            border-right-color: transparent;
            border-bottom-color: transparent;
            transition: all 0.5s 0s linear;
        }

        .bor_r p {
            border-right-color: #cc561e;
            border-bottom-color: #cc561e;
            border-left-color: transparent;
            border-top-color: transparent;
            float: right;
            transition: all 0.5s 0.5s linear;
        }

        .demo:hover p { transform: rotate(135deg); }
        .demo:hover .bor_l p { transition: all 0.5s 0.5s linear; }
        .demo:hover .bor_r p { transition: all 0.5s 0s linear; }

        /* 底部小幽默 */
        .footnote {
            text-align: center;
            margin-top: 2rem;
            color: #4f4f5e;
            font-size: 0.95rem;
            opacity: 0.7;
        }

        /* 手机适配 */
        @media (max-width: 600px) {
            .error-card { padding: 1.8rem; border-radius: 40px; }
            .title { font-size: 1.8rem; }
            .label { width: 100px; height: 100px; }
            .demo { width: 200px; height: 200px; }
            .text { line-height: 200px; font-size: 1.6rem; }
            .bor_l, .bor_r { width: 100px; height: 200px; }
            .demo p { width: 200px; height: 200px; }
        }
    </style>
</head>
<body>
    <div class="error-card">
        <!-- 原本的 .bd .module-error 结构，稍加润色 -->
        <section class="bd clearfix">
            <div class="module-error">
                <div class="error-main clearfix">
                    <!-- 标签左: 原本空div.label 加上内嵌404图形(已通过背景实现) 同时保留原类名 -->
                    <div class="label" title="404 炸了"></div>
                    <div class="info">
                        <h3 class="title">啊哦，你所访问的页面不存在了，<br>可能是炸了</h3>
                        <div class="reason">
                            <p style="font-weight:600;">🔍 可能的原因：</p>
                            <p>💥 1. 手抖打错了。</p>
                            <p>⏳ 2. 链接过了保质期。</p>
                            <p>🍳 3. 服务器偷吃了页面。</p>   <!-- 偷偷加一条可爱理由 -->
                        </div>
                        <div class="oper">
                            <p><a href="javascript:history.go(-1);">↻ 返回上一级页面</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 原demo动画 —— 美化并保留两条斜边框动画（以前注释的现在解放） -->
        <a href="http://www.ntdoor.com" class="demo" aria-label="返回首页">
            <div class="text">返回首页</div>
            <!-- 斜边框动画元素 (之前被注释，现在启用并微调) -->
            <div class="bor_l"><p></p></div>
            <div class="bor_r"><p></p></div>
            <!-- 四边扫描线 -->
            <span class="bor1"></span>
            <span class="bor2"></span>
            <span class="bor3"></span>
            <span class="bor4"></span>
        </a>

        <div class="footnote">
            ⚡ 页面丢了，但创意还在 · 试试返回上一页吧
        </div>
    </div>
</body>
</html>