docs(website): 添加简记memo产品原型和UI设计规范文档
- 新增「简记memo」一体化小程序产品原型设计文档 - 新增简记memo完整版UI视觉设计规范和界面细节 - 添加IDEA项目配置文件.gitignore - 创建404页面HTML文件，包含响应式布局和错误提示 - 添加关于页面HTML文件，展示品牌介绍和团队信息 - 实现AES加解密工具函数，支持请求体加密 - 添加用户协议页面基础框架
This commit is contained in:
sunct
@@ -0,0 +1,238 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user