196 lines
5.5 KiB
HTML
196 lines
5.5 KiB
HTML
<!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 {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
width: 100%;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.error-code {
|
||
font-size: 120px;
|
||
font-weight: 800;
|
||
margin-bottom: 20px;
|
||
text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
|
||
color: #fff;
|
||
line-height: 1;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
.error-title {
|
||
font-size: 32px;
|
||
margin-bottom: 20px;
|
||
color: #fff;
|
||
}
|
||
|
||
.error-message {
|
||
font-size: 18px;
|
||
margin-bottom: 30px;
|
||
line-height: 1.6;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
max-width: 500px;
|
||
margin: 0 auto 30px;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
padding: 15px 20px;
|
||
border: none;
|
||
border-radius: 50px 0 0 50px;
|
||
font-size: 16px;
|
||
outline: none;
|
||
}
|
||
|
||
.search-button {
|
||
padding: 15px 25px;
|
||
background: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 0 50px 50px 0;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.search-button:hover {
|
||
background: #3e8e41;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 25px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 50px;
|
||
transition: all 0.3s;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.btn:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.nginx-brand {
|
||
margin-top: 40px;
|
||
opacity: 0.7;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 动画效果 */
|
||
@keyframes pulse {
|
||
0% { transform: scale(1); }
|
||
50% { transform: scale(1.05); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 600px) {
|
||
.error-code {
|
||
font-size: 80px;
|
||
}
|
||
|
||
.error-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.error-message {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.container {
|
||
padding: 30px 20px;
|
||
}
|
||
|
||
.search-box {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.search-input {
|
||
border-radius: 50px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.search-button {
|
||
border-radius: 50px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1 class="error-code">404</h1>
|
||
<h2 class="error-title">哎呀！页面找不到啦</h2>
|
||
<p class="error-message">您访问的页面可能已被移除、更名或暂时不可用。请检查URL是否正确，或使用搜索功能查找您需要的内容。</p>
|
||
|
||
<!-- <div class="search-box">
|
||
<input type="text" class="search-input" placeholder="搜索网站内容...">
|
||
<button class="search-button">搜索</button>
|
||
</div> -->
|
||
|
||
<div class="action-buttons">
|
||
<a href="/" class="btn">返回首页</a>
|
||
<a href="javascript:history.back()" class="btn">返回上一页</a>
|
||
<a href="/sitemap" class="btn">网站地图</a>
|
||
<a href="/contact" class="btn">联系支持</a>
|
||
</div>
|
||
|
||
<div class="nginx-brand">Nginx</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.querySelector('.search-button').addEventListener('click', function() {
|
||
const query = document.querySelector('.search-input').value;
|
||
if(query.trim() !== '') {
|
||
alert('执行搜索: ' + query);
|
||
}
|
||
});
|
||
|
||
document.querySelector('.search-input').addEventListener('keypress', function(e) {
|
||
if(e.key === 'Enter') {
|
||
document.querySelector('.search-button').click();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |