sunct
3c3bf53ae4
- 新增「简记memo」一体化小程序产品原型设计文档 - 新增简记memo完整版UI视觉设计规范和界面细节 - 添加IDEA项目配置文件.gitignore - 创建404页面HTML文件，包含响应式布局和错误提示 - 添加关于页面HTML文件，展示品牌介绍和团队信息 - 实现AES加解密工具函数，支持请求体加密 - 添加用户协议页面基础框架
239 lines
7.6 KiB
HTML
239 lines
7.6 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>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
overflow: hidden;
|
|
}
|
|
.container {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
.error-code {
|
|
font-size: 120px;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #4F9EDE 0%, #3A8BC9 50%, #8b5cf6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
line-height: 1;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.error-code::after {
|
|
content: '404';
|
|
position: absolute;
|
|
left: 4px;
|
|
top: 4px;
|
|
background: linear-gradient(135deg, rgba(79, 158, 222, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
z-index: -1;
|
|
}
|
|
.memo-icon {
|
|
font-size: 80px;
|
|
margin-bottom: 24px;
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
.title {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
margin-bottom: 12px;
|
|
}
|
|
.subtitle {
|
|
font-size: 16px;
|
|
color: #64748b;
|
|
margin-bottom: 32px;
|
|
line-height: 1.6;
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.btn {
|
|
padding: 12px 28px;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #4F9EDE 0%, #3A8BC9 100%);
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(79, 158, 222, 0.3);
|
|
}
|
|
.btn-secondary {
|
|
background: #fff;
|
|
color: #475569;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
.btn-secondary:hover {
|
|
background: #f8fafc;
|
|
border-color: #cbd5e1;
|
|
}
|
|
.fun-fact {
|
|
margin-top: 40px;
|
|
padding: 16px 24px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.fun-fact strong {
|
|
color: #4F9EDE;
|
|
}
|
|
/* 装饰元素 */
|
|
.decoration {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
opacity: 0.1;
|
|
}
|
|
.decoration-1 {
|
|
top: 10%;
|
|
left: 10%;
|
|
font-size: 60px;
|
|
animation: spin 20s linear infinite;
|
|
}
|
|
.decoration-2 {
|
|
top: 20%;
|
|
right: 15%;
|
|
font-size: 40px;
|
|
animation: spin 15s linear infinite reverse;
|
|
}
|
|
.decoration-3 {
|
|
bottom: 20%;
|
|
left: 15%;
|
|
font-size: 50px;
|
|
animation: spin 25s linear infinite;
|
|
}
|
|
.decoration-4 {
|
|
bottom: 15%;
|
|
right: 10%;
|
|
font-size: 35px;
|
|
animation: spin 18s linear infinite reverse;
|
|
}
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.error-code {
|
|
font-size: 80px;
|
|
}
|
|
.memo-icon {
|
|
font-size: 60px;
|
|
}
|
|
.title {
|
|
font-size: 22px;
|
|
}
|
|
.subtitle {
|
|
font-size: 14px;
|
|
}
|
|
.actions {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.btn {
|
|
width: 100%;
|
|
max-width: 280px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 装饰元素 -->
|
|
<div class="decoration decoration-1">📝</div>
|
|
<div class="decoration decoration-2">✨</div>
|
|
<div class="decoration decoration-3">🎯</div>
|
|
<div class="decoration decoration-4">💡</div>
|
|
|
|
<div class="container">
|
|
<div class="memo-icon">📝</div>
|
|
<div class="error-code">404</div>
|
|
<h1 class="title">哎呀，页面走丢了！</h1>
|
|
<p class="subtitle">
|
|
这个页面可能被风吹走了，或者被外星人带走了...<br>
|
|
别担心，我们可以带你回到安全的地方！
|
|
</p>
|
|
<div class="actions">
|
|
<a href="/" class="btn btn-primary">
|
|
<svg style="width: 18px; height: 18px; fill: none; stroke: currentColor;" viewBox="0 0 24 24">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
<polyline points="9 22 9 12 15 12 15 22"/>
|
|
</svg>
|
|
返回首页
|
|
</a>
|
|
<a href="/web/calendar" class="btn btn-secondary">
|
|
<svg style="width: 18px; height: 18px; fill: none; stroke: currentColor;" viewBox="0 0 24 24">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
|
<line x1="16" y1="2" x2="16" y2="6"/>
|
|
<line x1="8" y1="2" x2="8" y2="6"/>
|
|
<line x1="3" y1="10" x2="21" y2="10"/>
|
|
</svg>
|
|
去日程
|
|
</a>
|
|
</div>
|
|
<div class="fun-fact">
|
|
💡 <strong>冷知识：</strong>404 错误代码源于 1990 年的 CERN，当时办公室在 4 楼 404 房间！
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 简单的鼠标跟随效果
|
|
document.addEventListener('mousemove', function(e) {
|
|
const decorations = document.querySelectorAll('.decoration');
|
|
const x = e.clientX / window.innerWidth;
|
|
const y = e.clientY / window.innerHeight;
|
|
|
|
decorations.forEach((dec, index) => {
|
|
const speed = (index + 1) * 10;
|
|
const xOffset = (x - 0.5) * speed;
|
|
const yOffset = (y - 0.5) * speed;
|
|
dec.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
|
|
});
|
|
});
|
|
|
|
// 键盘快捷键
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'h' || e.key === 'H') {
|
|
window.location.href = '/';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|