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>
|