
<!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>
        :root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --text-main: #1f2937;
            --text-sub: #6b7280;
            --bg-color: #f3f4f6;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .container {
            text-align: center;
            padding: 2rem;
            max-width: 600px;
            width: 100%;
        }

        /* 纯CSS绘制的商务图标 */
        .icon-wrapper {
            width: 120px;
            height: 120px;
            margin: 0 auto 2rem;
            position: relative;
        }

        .doc-shape {
            width: 80px;
            height: 100px;
            background: white;
            border: 4px solid var(--primary-color);
            border-radius: 8px;
            position: absolute;
            left: 20px;
            top: 10px;
            box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
        }

        .doc-shape::before {
            content: '';
            position: absolute;
            top: -4px;
            right: -4px;
            width: 24px;
            height: 24px;
            background: var(--bg-color);
            border-bottom-left-radius: 16px;
            box-shadow: -4px 4px 0 var(--primary-color);
        }

        .cross-mark {
            position: absolute;
            bottom: -10px;
            right: -10px;
            width: 40px;
            height: 40px;
            background: #ef4444;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 24px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .cross-mark::after {
            content: '×';
        }

        h1 {
            font-size: 3rem;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 1rem;
            letter-spacing: -0.025em;
        }

        p {
            font-size: 1.125rem;
            color: var(--text-sub);
            margin-bottom: 2.5rem;
            line-height: 1.6;
        }

        .btn-group {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            border-radius: 0.5rem;
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
            min-width: 120px;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            border: 1px solid transparent;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
        }

        .btn-secondary {
            background-color: white;
            color: var(--text-main);
            border: 1px solid #d1d5db;
        }

        .btn-secondary:hover {
            background-color: #f9fafb;
            border-color: #9ca3af;
            transform: translateY(-1px);
        }

        @media (max-width: 640px) {
            h1 {
                font-size: 2.5rem;
            }
            .icon-wrapper {
                transform: scale(0.9);
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 纯CSS图形，无外部图片依赖 -->
        <div class="icon-wrapper">
            <div class="doc-shape"></div>
            <div class="cross-mark"></div>
        </div>

        <h1>404 Not Found</h1>
        <p>抱歉，您访问的页面不存在或已移动。<br>请检查网址是否正确，或返回首页继续浏览。</p>

        <div class="btn-group">
            <a href="http://3jm.com.cn" class="btn btn-primary">杰精主页</a>
            <button id="backBtn" onclick="history.back()" class="btn btn-secondary">返回上一页</button>
        </div>
    </div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var backBtn = document.getElementById('backBtn');
    
    // 如果历史记录长度小于等于1，说明没有上一页可返回
    if (history.length <= 1) {
      backBtn.style.display = 'none';
    }
  });
</script>
</body>
</html>
