Files
pit-router/app/templates/errors/404.html

105 lines
4.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - 页面未找到 | 智队中枢</title>
{# Tailwind CSS #}
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
}
}
}
}
</script>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
</style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
<div class="text-center px-4">
{# 404 数字 #}
<div class="text-[150px] font-bold text-gray-200 dark:text-gray-700 leading-none select-none">
404
</div>
{# 错误信息 #}
<div class="mt-[-20px] mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">页面未找到</h1>
<p class="text-gray-500 dark:text-gray-400">抱歉,您访问的页面不存在或已被移除</p>
</div>
{# 操作按钮 #}
<div class="flex items-center justify-center gap-4">
<a href="javascript:history.back()" class="btn btn-secondary flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
返回上一页
</a>
<a href="/" class="btn btn-primary flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
返回首页
</a>
</div>
{# 建议 #}
<div class="mt-12 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm max-w-md mx-auto">
<h3 class="font-semibold text-gray-900 dark:text-white mb-3">您可以尝试</h3>
<ul class="text-sm text-gray-600 dark:text-gray-400 space-y-2 text-left">
<li class="flex items-start gap-2">
<svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>检查 URL 是否正确</span>
</li>
<li class="flex items-start gap-2">
<svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>刷新页面</span>
</li>
<li class="flex items-start gap-2">
<svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>联系管理员</span>
</li>
</ul>
</div>
{# 页脚 #}
<div class="mt-8 text-sm text-gray-400 dark:text-gray-500">
智队中枢 v0.7.0 | <a href="https://github.com/yunxiafei/pit-router" class="hover:text-primary-500">GitHub</a>
</div>
</div>
<script>
// 初始化主题
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
</script>
</body>
</html>