<!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>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B5A2B', // 土黄色主色调，象征丝路文化
                        secondary: '#1E90FF', // 蓝色辅助色，呼应祁连雪山
                        accent: '#B22222', // 红色强调色
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen flex flex-col">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-map-marker text-primary text-2xl mr-2"></i>
                <h1 class="text-xl font-bold text-primary">中国张掖网</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="http://www.zgzyw.com.cn" class="font-medium hover:text-primary">首页</a>
            </nav>
            <button class="md:hidden text-neutral-800" id="menuToggle">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 移动端菜单 (默认隐藏) -->
    <div class="md:hidden hidden bg-white px-4 py-2 shadow-lg" id="mobileMenu">
        <a href="http://www.zgzyw.com.cn" class="block py-2 hover:bg-neutral-100">首页</a>
    </div>

    <!-- 主要内容 -->
    <main class="flex-grow flex items-center justify-center py-12 px-4">
        <div class="max-w-4xl w-full mx-auto text-center">
            <!-- 404 错误图标 -->
            <div class="mb-8">
                <i class="fa fa-map-o text-primary text-8xl md:text-9xl animate-float"></i>
            </div>
            
            <!-- 错误信息 -->
            <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-neutral-800 mb-4">404</h2>
            <p class="text-xl md:text-2xl text-neutral-600 mb-6">抱歉，您访问的页面不存在</p>
            <p class="text-neutral-500 mb-8 max-w-2xl mx-auto">可能是因为链接已过期、地址输入错误或页面已被删除。您可以返回首页或使用搜索功能查找相关内容。</p>
            
            <!-- 返回按钮 -->
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <button id="backBtn" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors shadow-md">
                    <i class="fa fa-arrow-left mr-2"></i>返回上一页
                </button>
                <button id="homeBtn" class="px-6 py-3 bg-white hover:bg-neutral-50 text-primary border border-primary rounded-lg transition-colors shadow-md">
                    <i class="fa fa-home mr-2"></i>返回首页
                </button>
            </div>
        </div>
    </main>

    <!-- 底部信息 -->
    <footer class="bg-neutral-800 text-white py-6">
        <div class="container mx-auto px-4 text-center">
            <p class="mb-2">© 2025 中国张掖网 版权所有</p>
            <p class="text-sm text-neutral-400">联系方式: 0936-8687575</p>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('menuToggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });

        // 返回上一页
        document.getElementById('backBtn').addEventListener('click', function() {
            window.history.back();
        });

        // 返回首页 (模拟)
        document.getElementById('homeBtn').addEventListener('click', function() {
             window.location.href = 'http://www.zgzyw.com.cn';
        });
    </script>
</body>
</html>