
<!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>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .fade-in {
            animation: fadeIn 1s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-gray-50 h-screen flex items-center justify-center">

    <div class="text-center fade-in p-8 max-w-lg w-full">
        <!-- 插图区域 -->
        <div class="mb-8">
            <svg class="w-48 h-48 mx-auto text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
        </div>

        <!-- 文字内容 -->
	<h2 class="text-2xl font-semibold text-gray-600 mb-4">页面走丢了</h2>
        <h1 class="text-2xl font-semibold text-gray-600 mb-4">请检查网址是否正确</h1>
        <p class="text-gray-500 mb-8 leading-relaxed">
            抱歉，您访问的页面不存在或已被移除。<br>
            请检查网址是否正确，或返回首页继续浏览。
        </p>

        <!-- 按钮组 -->
        <div class="flex flex-col sm:flex-row justify-center gap-4">
            <button onclick="window.location.href='/'" class="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow-md hover:bg-indigo-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
                返回首页
            </button>
        </div>
        
        <!-- 底部链接 -->
        <div class="mt-8 text-sm text-gray-400">
        </div>
    </div>

</body>
</html>
