sec commit
This commit is contained in:
281
shared/code/frontend/Login.vue
Normal file
281
shared/code/frontend/Login.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<!-- 登录页面组件 - 前端代码 -->
|
||||
<!-- 文件位置: shared/code/frontend/Login.vue -->
|
||||
<!-- 创建时间: 2026-03-31 20:57 -->
|
||||
<!-- 开发者: 前端工程师 (FE) -->
|
||||
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h2 class="login-title">用户登录</h2>
|
||||
|
||||
<form @submit.prevent="handleLogin" class="login-form">
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
type="text"
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="captcha">验证码</label>
|
||||
<div class="captcha-container">
|
||||
<input
|
||||
id="captcha"
|
||||
v-model="form.captcha"
|
||||
type="text"
|
||||
placeholder="请输入验证码"
|
||||
required
|
||||
:disabled="loading"
|
||||
/>
|
||||
<img
|
||||
:src="captchaImage"
|
||||
alt="验证码"
|
||||
class="captcha-image"
|
||||
@click="refreshCaptcha"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-options">
|
||||
<label class="remember-me">
|
||||
<input type="checkbox" v-model="form.rememberMe" />
|
||||
记住我
|
||||
</label>
|
||||
<a href="#" class="forgot-password">忘记密码？</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="login-button"
|
||||
:disabled="loading"
|
||||
:class="{ 'loading': loading }"
|
||||
>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
|
||||
<div class="register-link">
|
||||
还没有账号？<a href="/register">立即注册</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LoginPage',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
password: '',
|
||||
captcha: '',
|
||||
rememberMe: false
|
||||
},
|
||||
captchaImage: '/api/captcha',
|
||||
loading: false,
|
||||
error: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async handleLogin() {
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const response = await this.$axios.post('/api/auth/login', this.form);
|
||||
|
||||
if (response.data.success) {
|
||||
// 保存token
|
||||
localStorage.setItem('token', response.data.token);
|
||||
localStorage.setItem('user', JSON.stringify(response.data.user));
|
||||
|
||||
// 跳转到首页
|
||||
this.$router.push('/dashboard');
|
||||
|
||||
// 显示成功消息
|
||||
this.$notify({
|
||||
title: '登录成功',
|
||||
message: '欢迎回来！',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
this.error = response.data.error || '登录失败';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
this.error = error.response?.data?.error || '网络错误，请稍后重试';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
refreshCaptcha() {
|
||||
this.captchaImage = `/api/captcha?t=${Date.now()}`;
|
||||
this.form.captcha = '';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载时刷新验证码
|
||||
this.refreshCaptcha();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.captcha-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.captcha-image {
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.forgot-password:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.login-button:hover:not(:disabled) {
|
||||
background: #5a67d8;
|
||||
}
|
||||
|
||||
.login-button:disabled {
|
||||
background: #a0aec0;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-button.loading {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.register-link a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.register-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
background: #fed7d7;
|
||||
color: #c53030;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
216
shared/code/frontend/change-password.html
Normal file
216
shared/code/frontend/change-password.html
Normal file
@@ -0,0 +1,216 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>修改密码 - 用户认证</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
||||
.container { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 40px 36px; width: 400px; }
|
||||
.logo { text-align: center; margin-bottom: 28px; }
|
||||
.logo h1 { font-size: 24px; color: #1a1a2e; font-weight: 600; }
|
||||
.logo p { font-size: 13px; color: #888; margin-top: 4px; }
|
||||
.form-group { margin-bottom: 16px; }
|
||||
label { display: block; font-size: 14px; color: #333; margin-bottom: 6px; font-weight: 500; }
|
||||
input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; outline: none; transition: border-color 0.2s; }
|
||||
input:focus { border-color: #4f46e5; }
|
||||
.sms-row { display: flex; gap: 10px; }
|
||||
.sms-row input { flex: 1; }
|
||||
.btn-sms { height: 44px; padding: 0 16px; background: #e8e7ff; color: #4f46e5; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
|
||||
.btn-sms:hover { background: #dddbf0; }
|
||||
.btn-sms:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
|
||||
.btn { width: 100%; height: 46px; background: #4f46e5; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 10px; }
|
||||
.btn:hover { background: #4338ca; }
|
||||
.btn:disabled { background: #a5a6f6; cursor: not-allowed; }
|
||||
.links { text-align: center; margin-top: 16px; font-size: 13px; }
|
||||
.links a { color: #4f46e5; text-decoration: none; }
|
||||
.links a:hover { text-decoration: underline; }
|
||||
.msg { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; }
|
||||
.msg.error { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; display: block; }
|
||||
.msg.success { background: #f0fdf4; color: #16a34a; border: 1px solid #86efac; display: block; }
|
||||
.loading { display: none; text-align: center; margin-top: 10px; font-size: 13px; color: #888; }
|
||||
.tip { font-size: 12px; color: #888; margin-top: 4px; }
|
||||
.step-indicator { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px; }
|
||||
.step { width: 28px; height: 28px; border-radius: 50%; background: #e8e7ff; color: #4f46e5; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
|
||||
.step.active { background: #4f46e5; color: #fff; }
|
||||
.step.done { background: #16a34a; color: #fff; }
|
||||
.step-line { width: 40px; height: 2px; background: #e8e7ff; }
|
||||
.step-line.done { background: #16a34a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<h1>修改密码</h1>
|
||||
<p>通过短信验证码验证身份</p>
|
||||
</div>
|
||||
<div class="step-indicator">
|
||||
<div class="step active" id="step1">1</div>
|
||||
<div class="step-line" id="line1"></div>
|
||||
<div class="step" id="step2">2</div>
|
||||
<div class="step-line" id="line2"></div>
|
||||
<div class="step" id="step3">3</div>
|
||||
</div>
|
||||
<div id="msg" class="msg"></div>
|
||||
<form id="form">
|
||||
<!-- Step 1: verify phone & sms -->
|
||||
<div id="step1Content">
|
||||
<div class="form-group">
|
||||
<label for="phone">手机号</label>
|
||||
<input type="tel" id="phone" placeholder="请输入注册手机号" maxlength="11" required autocomplete="tel">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="smsCode">短信验证码</label>
|
||||
<div class="sms-row">
|
||||
<input type="text" id="smsCode" placeholder="请输入验证码" maxlength="6" required>
|
||||
<button type="button" class="btn-sms" id="sendBtn">发送验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn" id="verifyBtn">验证</button>
|
||||
</div>
|
||||
<!-- Step 2: set new password -->
|
||||
<div id="step2Content" style="display:none">
|
||||
<div class="form-group">
|
||||
<label for="newPassword">新密码</label>
|
||||
<input type="password" id="newPassword" placeholder="6位及以上密码" minlength="6" required>
|
||||
<p class="tip">建议混合字母和数字</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirmPassword">确认密码</label>
|
||||
<input type="password" id="confirmPassword" placeholder="再次输入新密码" minlength="6" required>
|
||||
</div>
|
||||
<button type="submit" class="btn" id="submitBtn">确认修改</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="links">
|
||||
<a href="login.html">返回登录</a>
|
||||
</div>
|
||||
<div id="loading" class="loading">处理中...</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API = 'http://localhost:3000/api/auth';
|
||||
let verified = false;
|
||||
let smsCountdown = 0;
|
||||
let smsTimer = null;
|
||||
let currentPhone = '';
|
||||
|
||||
const msg = document.getElementById('msg');
|
||||
const sendBtn = document.getElementById('sendBtn');
|
||||
const verifyBtn = document.getElementById('verifyBtn');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const form = document.getElementById('form');
|
||||
const step1 = document.getElementById('step1Content');
|
||||
const step2 = document.getElementById('step2Content');
|
||||
const stepEls = [
|
||||
document.getElementById('step1'),
|
||||
document.getElementById('step2'),
|
||||
document.getElementById('step3')
|
||||
];
|
||||
const lineEls = [document.getElementById('line1'), document.getElementById('line2')];
|
||||
|
||||
function showMsg(text, type) {
|
||||
msg.textContent = text;
|
||||
msg.className = 'msg ' + type;
|
||||
msg.style.display = 'block';
|
||||
}
|
||||
function hideMsg() { msg.style.display = 'none'; }
|
||||
|
||||
function setStep(n) {
|
||||
stepEls.forEach((el, i) => {
|
||||
el.className = 'step' + (i < n ? ' done' : (i === n ? ' active' : ''));
|
||||
});
|
||||
lineEls.forEach((el, i) => {
|
||||
el.className = 'step-line' + (i < n ? ' done' : '');
|
||||
});
|
||||
}
|
||||
|
||||
sendBtn.addEventListener('click', async () => {
|
||||
if (smsCountdown > 0) return;
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) { showMsg('请输入正确的手机号', 'error'); return; }
|
||||
currentPhone = phone;
|
||||
sendBtn.disabled = true;
|
||||
sendBtn.textContent = '发送中...';
|
||||
try {
|
||||
// Send code - simplified without captcha for password change flow
|
||||
const res = await fetch(API + '/send-code', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ phone, captchaKey: 'change-pwd', captchaCode: '0000' })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
showMsg('验证码已发送', 'success');
|
||||
smsCountdown = 60;
|
||||
smsTimer = setInterval(() => {
|
||||
smsCountdown--;
|
||||
if (smsCountdown <= 0) {
|
||||
clearInterval(smsTimer);
|
||||
sendBtn.textContent = '发送验证码';
|
||||
sendBtn.disabled = false;
|
||||
} else {
|
||||
sendBtn.textContent = smsCountdown + '秒后重试';
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
showMsg(data.message || '发送失败', 'error');
|
||||
sendBtn.textContent = '发送验证码';
|
||||
sendBtn.disabled = false;
|
||||
}
|
||||
} catch {
|
||||
showMsg('网络错误，请检查服务器', 'error');
|
||||
sendBtn.textContent = '发送验证码';
|
||||
sendBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
verifyBtn.addEventListener('click', async () => {
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
const code = document.getElementById('smsCode').value.trim();
|
||||
if (!phone) { showMsg('请输入手机号', 'error'); return; }
|
||||
if (!/^\d{4,6}$/.test(code)) { showMsg('请输入验证码', 'error'); return; }
|
||||
verified = true;
|
||||
currentPhone = phone;
|
||||
step1.style.display = 'none';
|
||||
step2.style.display = 'block';
|
||||
setStep(1);
|
||||
showMsg('身份验证通过，请设置新密码', 'success');
|
||||
});
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
if (!verified) return;
|
||||
hideMsg();
|
||||
const newPwd = document.getElementById('newPassword').value;
|
||||
const confirmPwd = document.getElementById('confirmPassword').value;
|
||||
if (newPwd.length < 6) { showMsg('密码至少6位', 'error'); return; }
|
||||
if (newPwd !== confirmPwd) { showMsg('两次输入的密码不一致', 'error'); return; }
|
||||
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = '修改中...';
|
||||
try {
|
||||
const res = await fetch(API + '/change-password', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ phone: currentPhone, code: document.getElementById('smsCode').value.trim(), newPassword: newPwd })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
setStep(2);
|
||||
showMsg('密码修改成功！即将跳转到登录页...', 'success');
|
||||
setTimeout(() => { window.location.href = 'login.html'; }, 1500);
|
||||
} else {
|
||||
showMsg(data.message || '修改失败', 'error');
|
||||
}
|
||||
} catch {
|
||||
showMsg('网络错误，请检查服务器是否启动', 'error');
|
||||
} finally {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = '确认修改';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
shared/code/frontend/devices.html
Normal file
200
shared/code/frontend/devices.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设备管理 - 用户认证</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; min-height: 100vh; }
|
||||
.header { background: #4f46e5; color: #fff; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.header h1 { font-size: 18px; font-weight: 600; }
|
||||
.header-right { display: flex; align-items: center; gap: 12px; }
|
||||
.user-info { font-size: 14px; opacity: 0.9; }
|
||||
.btn-logout { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
|
||||
.btn-logout:hover { background: rgba(255,255,255,0.3); }
|
||||
.main { max-width: 640px; margin: 32px auto; padding: 0 16px; }
|
||||
.card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; margin-bottom: 16px; }
|
||||
.card-header { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; }
|
||||
.card-header h2 { font-size: 16px; color: #1a1a2e; }
|
||||
.device-limit { font-size: 12px; color: #888; background: #f5f5f5; padding: 2px 8px; border-radius: 10px; }
|
||||
.card-body { padding: 8px 0; }
|
||||
.device-item { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid #f9f9f9; gap: 14px; }
|
||||
.device-item:last-child { border-bottom: none; }
|
||||
.device-icon { font-size: 28px; flex-shrink: 0; }
|
||||
.device-info { flex: 1; min-width: 0; }
|
||||
.device-name { font-size: 14px; color: #1a1a2e; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.device-meta { font-size: 12px; color: #888; margin-top: 3px; }
|
||||
.device-current { display: inline-block; background: #dcfce7; color: #16a34a; font-size: 11px; padding: 1px 7px; border-radius: 8px; margin-left: 6px; font-weight: 600; }
|
||||
.device-actions { flex-shrink: 0; }
|
||||
.btn-remove { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
|
||||
.btn-remove:hover { background: #fee2e2; }
|
||||
.btn-remove:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.empty { text-align: center; padding: 40px 20px; color: #888; font-size: 14px; }
|
||||
.loading { text-align: center; padding: 40px; color: #888; }
|
||||
.msg { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; }
|
||||
.msg.error { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; display: block; }
|
||||
.msg.success { background: #f0fdf4; color: #16a34a; border: 1px solid #86efac; display: block; }
|
||||
.user-card { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
|
||||
.avatar { width: 44px; height: 44px; border-radius: 50%; background: #e8e7ff; color: #4f46e5; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
|
||||
.user-details h3 { font-size: 15px; color: #1a1a2e; }
|
||||
.user-details p { font-size: 12px; color: #888; margin-top: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>设备管理</h1>
|
||||
<div class="header-right">
|
||||
<span class="user-info" id="userPhone"></span>
|
||||
<button class="btn-logout" id="logoutBtn">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div id="msg" class="msg"></div>
|
||||
|
||||
<!-- 当前用户信息 -->
|
||||
<div class="card">
|
||||
<div class="user-card" id="userCard">
|
||||
<div class="avatar" id="avatar">?</div>
|
||||
<div class="user-details">
|
||||
<h3 id="displayName">加载中...</h3>
|
||||
<p id="displayPhone"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>已登录设备</h2>
|
||||
<span class="device-limit" id="deviceCount">0 / 3 台</span>
|
||||
</div>
|
||||
<div class="card-body" id="deviceList">
|
||||
<div class="loading" id="loadingTip">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API = 'http://localhost:3000/api/auth';
|
||||
const token = localStorage.getItem('auth_token');
|
||||
const user = JSON.parse(localStorage.getItem('auth_user') || '{}');
|
||||
|
||||
if (!token) {
|
||||
alert('未登录，正在跳转到登录页');
|
||||
location.href = 'login.html';
|
||||
}
|
||||
|
||||
document.getElementById('userPhone').textContent = user.phone || '';
|
||||
document.getElementById('displayName').textContent = '用户 ' + (user.phone || '未知');
|
||||
document.getElementById('displayPhone').textContent = user.phone ? '手机号: ' + user.phone : '';
|
||||
document.getElementById('avatar').textContent = user.phone ? user.phone.slice(-2) : '?';
|
||||
|
||||
function showMsg(text, type) {
|
||||
const el = document.getElementById('msg');
|
||||
el.textContent = text;
|
||||
el.className = 'msg ' + type;
|
||||
el.style.display = 'block';
|
||||
if (type === 'success') setTimeout(() => { el.style.display = 'none'; }, 3000);
|
||||
}
|
||||
|
||||
function formatTime(dateStr) {
|
||||
if (!dateStr) return '未知时间';
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
function getDeviceIcon(name) {
|
||||
const n = (name || '').toLowerCase();
|
||||
if (n.includes('iphone') || n.includes('ipad')) return '📱';
|
||||
if (n.includes('android')) return '📱';
|
||||
if (n.includes('mac') || n.includes('iphone')) return '💻';
|
||||
if (n.includes('windows')) return '🖥️';
|
||||
if (n.includes('linux')) return '🖥️';
|
||||
return '💻';
|
||||
}
|
||||
|
||||
async function loadDevices() {
|
||||
try {
|
||||
const res = await fetch(API + '/devices', {
|
||||
headers: { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
renderDevices(data.devices || []);
|
||||
} else if (res.status === 401 || data.code === 401) {
|
||||
logout('登录已过期，请重新登录');
|
||||
} else {
|
||||
showMsg(data.message || '加载设备列表失败', 'error');
|
||||
}
|
||||
} catch {
|
||||
showMsg('网络错误，无法加载设备列表', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function renderDevices(devices) {
|
||||
const list = document.getElementById('deviceList');
|
||||
document.getElementById('deviceCount').textContent = devices.length + ' / 3 台';
|
||||
|
||||
if (devices.length === 0) {
|
||||
list.innerHTML = '<div class="empty">暂无已登录设备</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 当前设备标识（简单用 userId 判断）
|
||||
const currentId = user.id;
|
||||
list.innerHTML = devices.map(dev => {
|
||||
const isCurrent = dev.userId === currentId || dev.isCurrent;
|
||||
return '<div class="device-item">' +
|
||||
'<div class="device-icon">' + getDeviceIcon(dev.deviceName) + '</div>' +
|
||||
'<div class="device-info">' +
|
||||
'<div class="device-name">' + escapeHtml(dev.deviceName || '未知设备') +
|
||||
(isCurrent ? '<span class="device-current">当前设备</span>' : '') + '</div>' +
|
||||
'<div class="device-meta">最后活跃: ' + formatTime(dev.lastActiveAt) + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="device-actions">' +
|
||||
(!isCurrent ? '<button class="btn-remove" onclick="removeDevice(\'' + dev.id + '\')">下线</button>' : '') +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
async function removeDevice(deviceId) {
|
||||
if (!confirm('确定要将该设备强制下线吗？')) return;
|
||||
try {
|
||||
const res = await fetch(API + '/devices/' + deviceId, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
showMsg('设备已下线', 'success');
|
||||
loadDevices();
|
||||
} else {
|
||||
showMsg(data.message || '下线失败', 'error');
|
||||
}
|
||||
} catch {
|
||||
showMsg('网络错误', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function logout(reason) {
|
||||
localStorage.removeItem('auth_token');
|
||||
localStorage.removeItem('auth_user');
|
||||
location.href = 'login.html';
|
||||
}
|
||||
|
||||
document.getElementById('logoutBtn').addEventListener('click', () => {
|
||||
if (confirm('确定要退出登录吗？')) logout();
|
||||
});
|
||||
|
||||
loadDevices();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
42
shared/code/frontend/hello.html
Normal file
42
shared/code/frontend/hello.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hello World</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
background-color: #fafafa;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, OpenClaw!</h1>
|
||||
</body>
|
||||
</html>
|
||||
116
shared/code/frontend/login.html
Normal file
116
shared/code/frontend/login.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录 - 用户认证</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
||||
.container { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 40px 36px; width: 380px; }
|
||||
.logo { text-align: center; margin-bottom: 28px; }
|
||||
.logo h1 { font-size: 24px; color: #1a1a2e; font-weight: 600; }
|
||||
.logo p { font-size: 13px; color: #888; margin-top: 4px; }
|
||||
.form-group { margin-bottom: 18px; }
|
||||
label { display: block; font-size: 14px; color: #333; margin-bottom: 6px; font-weight: 500; }
|
||||
input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; outline: none; transition: border-color 0.2s; }
|
||||
input:focus { border-color: #4f46e5; }
|
||||
.btn { width: 100%; height: 46px; background: #4f46e5; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 8px; }
|
||||
.btn:hover { background: #4338ca; }
|
||||
.btn:disabled { background: #a5a6f6; cursor: not-allowed; }
|
||||
.links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; }
|
||||
.links a { color: #4f46e5; text-decoration: none; }
|
||||
.links a:hover { text-decoration: underline; }
|
||||
.msg { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; }
|
||||
.msg.error { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; display: block; }
|
||||
.msg.success { background: #f0fdf4; color: #16a34a; border: 1px solid #86efac; display: block; }
|
||||
.loading { display: none; text-align: center; margin-top: 10px; font-size: 13px; color: #888; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<h1>欢迎回来</h1>
|
||||
<p>登录您的账户</p>
|
||||
</div>
|
||||
<div id="msg" class="msg"></div>
|
||||
<form id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="phone">手机号</label>
|
||||
<input type="tel" id="phone" placeholder="请输入手机号" maxlength="11" required autocomplete="tel">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" id="password" placeholder="请输入密码" required autocomplete="current-password">
|
||||
</div>
|
||||
<button type="submit" class="btn" id="submitBtn">登录</button>
|
||||
</form>
|
||||
<div class="links">
|
||||
<a href="register.html">注册账号</a>
|
||||
<a href="change-password.html">忘记密码？</a>
|
||||
</div>
|
||||
<div id="loading" class="loading">登录中...</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('loginForm');
|
||||
const msg = document.getElementById('msg');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const loading = document.getElementById('loading');
|
||||
|
||||
function showMsg(text, type) {
|
||||
msg.textContent = text;
|
||||
msg.className = 'msg ' + type;
|
||||
msg.style.display = 'block';
|
||||
}
|
||||
|
||||
function hideMsg() {
|
||||
msg.style.display = 'none';
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideMsg();
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) {
|
||||
showMsg('请输入正确的手机号', 'error');
|
||||
return;
|
||||
}
|
||||
if (password.length < 6) {
|
||||
showMsg('密码不能少于6位', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = '登录中...';
|
||||
loading.style.display = 'block';
|
||||
|
||||
try {
|
||||
const res = await fetch('http://localhost:3000/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ phone, password })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.code === 0) {
|
||||
localStorage.setItem('auth_token', data.token);
|
||||
localStorage.setItem('auth_user', JSON.stringify(data.user));
|
||||
showMsg('登录成功！正在跳转...', 'success');
|
||||
setTimeout(() => { window.location.href = 'devices.html'; }, 800);
|
||||
} else {
|
||||
showMsg(data.message || '登录失败，请检查手机号和密码', 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showMsg('网络错误，请检查服务器是否启动', 'error');
|
||||
} finally {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = '登录';
|
||||
loading.style.display = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
398
shared/code/frontend/portfolio/css/responsive.css
Normal file
398
shared/code/frontend/portfolio/css/responsive.css
Normal file
@@ -0,0 +1,398 @@
|
||||
/* 响应式样式文件 */
|
||||
/* 文件位置: portfolio/css/responsive.css */
|
||||
/* 创建时间: 2026-03-31 */
|
||||
|
||||
/* 大桌面设备 (1200px以上) */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 桌面设备 (1024px - 1199px) */
|
||||
@media (max-width: 1199px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.skills-grid,
|
||||
.projects-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板设备 (768px - 1023px) */
|
||||
@media (max-width: 1023px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
/* 导航栏响应式 */
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-primary);
|
||||
padding: var(--spacing-lg);
|
||||
transition: var(--transition-normal);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menu-toggle.active .bar:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 5px);
|
||||
}
|
||||
|
||||
.menu-toggle.active .bar:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.menu-toggle.active .bar:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(7px, -6px);
|
||||
}
|
||||
|
||||
/* Hero 部分响应式 */
|
||||
.hero .container {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
order: -1;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
/* 关于部分响应式 */
|
||||
.about-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 5rem;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* 联系部分响应式 */
|
||||
.contact-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* 页脚响应式 */
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动设备 (576px - 767px) */
|
||||
@media (max-width: 767px) {
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.skills-grid,
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.experience {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
/* 小移动设备 (575px以下) */
|
||||
@media (max-width: 575px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.about-text h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.project-content {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.navbar,
|
||||
.hero-buttons,
|
||||
.contact-form,
|
||||
.footer,
|
||||
.back-to-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.about,
|
||||
.skills,
|
||||
.projects,
|
||||
.contact {
|
||||
padding: 1rem 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高对比度模式支持 */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--color-text: #000000;
|
||||
--color-text-light: #333333;
|
||||
--color-primary: #ffffff;
|
||||
--color-secondary: #f0f0f0;
|
||||
--color-bg-light: #e0e0e0;
|
||||
--color-border: #000000;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #0000ff;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0000ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
background: #0000ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 黑暗模式支持（系统级） */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* 我们的主题已经是深色，所以不需要额外调整 */
|
||||
/* 这里可以添加针对系统黑暗模式的微调 */
|
||||
}
|
||||
|
||||
/* 横屏模式 */
|
||||
@media (orientation: landscape) and (max-height: 500px) {
|
||||
.hero {
|
||||
min-height: auto;
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超大屏幕支持 */
|
||||
@media (min-width: 1600px) {
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 触摸设备优化 */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.nav-link:hover::after {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.social-link:hover,
|
||||
.project-link:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* 增加触摸目标大小 */
|
||||
.nav-link {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.project-link {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 性能优化：在低端设备上减少特效 */
|
||||
@media (max-width: 1024px) and (prefers-reduced-data: reduce) {
|
||||
.hero {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.image-placeholder,
|
||||
.avatar-placeholder {
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
background: var(--color-accent);
|
||||
}
|
||||
}
|
||||
706
shared/code/frontend/portfolio/css/style.css
Normal file
706
shared/code/frontend/portfolio/css/style.css
Normal file
@@ -0,0 +1,706 @@
|
||||
/* 个人作品展示网站 - 主样式文件 */
|
||||
/* 文件位置: portfolio/css/style.css */
|
||||
/* 创建时间: 2026-03-31 */
|
||||
|
||||
/* CSS变量 - 深色主题 */
|
||||
:root {
|
||||
/* 颜色方案 */
|
||||
--color-primary: #1a1a2e;
|
||||
--color-secondary: #16213e;
|
||||
--color-accent: #0f3460;
|
||||
--color-highlight: #e94560;
|
||||
--color-text: #ffffff;
|
||||
--color-text-light: #b8b8b8;
|
||||
--color-border: #2d3748;
|
||||
--color-bg-light: #2a2a3e;
|
||||
|
||||
/* 字体 */
|
||||
--font-heading: 'Montserrat', sans-serif;
|
||||
--font-body: 'Open Sans', sans-serif;
|
||||
|
||||
/* 间距 */
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 2rem;
|
||||
--spacing-lg: 3rem;
|
||||
--spacing-xl: 4rem;
|
||||
|
||||
/* 边框半径 */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 16px;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* 过渡 */
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
}
|
||||
|
||||
/* 重置和基础样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.highlight {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background-color: var(--color-highlight);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-normal);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-highlight);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #ff2e4f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
border: 2px solid var(--color-highlight);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--color-highlight);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 8px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(26, 26, 46, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
padding: var(--spacing-sm) 0;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--color-text-light);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: var(--color-highlight);
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
margin: 5px 0;
|
||||
background-color: var(--color-text);
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
/* Hero 部分 */
|
||||
.hero {
|
||||
padding: calc(var(--spacing-xl) * 2) 0 var(--spacing-xl);
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text-light);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-highlight) 100%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 8rem;
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* 关于部分 */
|
||||
.about {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-highlight) 100%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 6rem;
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.about-text h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.experience {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.exp-item {
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
background-color: var(--color-bg-light);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.exp-item h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2rem;
|
||||
color: var(--color-highlight);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.exp-item p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
/* 技能部分 */
|
||||
.skills {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
background-color: var(--color-secondary);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.skill-category h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.skill-category h3 i {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.skill-bar {
|
||||
height: 8px;
|
||||
background-color: var(--color-bg-light);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-highlight) 100%);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
.skill-percent {
|
||||
float: right;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.skill-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.skill-tag {
|
||||
background-color: var(--color-bg-light);
|
||||
color: var(--color-text-light);
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.skill-tag:hover {
|
||||
background-color: var(--color-highlight);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* 项目部分 */
|
||||
.projects {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background-color: var(--color-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
height: 200px;
|
||||
background-color: var(--color-accent);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-image .image-placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.project-content {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.project-content h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.project-content p {
|
||||
color: var(--color-text-light);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.project-tech {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
background-color: var(--color-bg-light);
|
||||
color: var(--color-text-light);
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.project-link {
|
||||
color: var(--color-highlight);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.project-link:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* 联系部分 */
|
||||
.contact {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.contact-info h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.contact-info p {
|
||||
color: var(--color-text-light);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-highlight);
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.contact-item h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.contact-item p {
|
||||
margin: 0;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background-color: var(--color-highlight);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: var(--color-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-highlight);
|
||||
box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* 页脚 */
|
||||
.footer {
|
||||
background-color: var(--color-secondary);
|
||||
padding: var(--spacing-xl) 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.footer-logo p {
|
||||
color: var(--color-text-light);
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.footer-links h4,
|
||||
.footer-newsletter h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.footer-links ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--color-text-light);
|
||||
text-decoration: none;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--color-text);
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.footer-newsletter p {
|
||||
color: var(--color-text-light);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.newsletter-form input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
background-color: var(--color-primary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--color-text-light);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 返回顶部按钮 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: var(--color-highlight
|
||||
413
shared/code/frontend/portfolio/index.html
Normal file
413
shared/code/frontend/portfolio/index.html
Normal file
@@ -0,0 +1,413 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>张三 - 个人作品展示</title>
|
||||
<meta name="description" content="张三的个人作品展示网站，展示前端开发技能和项目经验">
|
||||
<meta name="keywords" content="前端开发, 个人作品, 网页设计, 响应式网站">
|
||||
<meta name="author" content="张三">
|
||||
|
||||
<!-- Open Graph 标签 -->
|
||||
<meta property="og:title" content="张三 - 个人作品展示">
|
||||
<meta property="og:description" content="专业前端开发工程师的个人作品展示">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://zhangsan-portfolio.com">
|
||||
|
||||
<!-- 字体 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- 图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- 样式 -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/responsive.css">
|
||||
|
||||
<!-- 网站图标 -->
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<a href="#" class="logo">张三<span class="highlight">.</span></a>
|
||||
|
||||
<button class="menu-toggle" aria-label="切换菜单">
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li><a href="#home" class="nav-link active">首页</a></li>
|
||||
<li><a href="#about" class="nav-link">关于</a></li>
|
||||
<li><a href="#skills" class="nav-link">技能</a></li>
|
||||
<li><a href="#projects" class="nav-link">项目</a></li>
|
||||
<li><a href="#contact" class="nav-link">联系</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero 部分 -->
|
||||
<section id="home" class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">你好，我是 <span class="highlight">张三</span></h1>
|
||||
<h2 class="hero-subtitle">前端开发工程师 & UI设计师</h2>
|
||||
<p class="hero-description">
|
||||
我专注于创建美观、高效、用户友好的网页应用。
|
||||
拥有5年+的前端开发经验，擅长React、Vue和现代CSS技术。
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#projects" class="btn btn-primary">查看作品</a>
|
||||
<a href="#contact" class="btn btn-secondary">联系我</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<div class="image-placeholder">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 关于部分 -->
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
<h2 class="section-title">关于我</h2>
|
||||
<div class="about-content">
|
||||
<div class="about-image">
|
||||
<div class="avatar-placeholder">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-text">
|
||||
<h3>热情的前端开发者</h3>
|
||||
<p>
|
||||
我是一名充满热情的前端开发工程师，专注于创建优秀的用户体验。
|
||||
我相信好的设计不仅仅是美观，更重要的是功能性和易用性。
|
||||
</p>
|
||||
<p>
|
||||
在过去的5年里，我参与了多个大型项目，从企业级应用到创意个人项目。
|
||||
我热爱学习新技术，并享受将想法转化为现实的过程。
|
||||
</p>
|
||||
|
||||
<div class="experience">
|
||||
<div class="exp-item">
|
||||
<h4>5+ 年</h4>
|
||||
<p>开发经验</p>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<h4>50+ 项目</h4>
|
||||
<p>成功交付</p>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<h4>100%</h4>
|
||||
<p>客户满意度</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 技能部分 -->
|
||||
<section id="skills" class="skills">
|
||||
<div class="container">
|
||||
<h2 class="section-title">我的技能</h2>
|
||||
|
||||
<div class="skills-grid">
|
||||
<!-- 前端技能 -->
|
||||
<div class="skill-category">
|
||||
<h3><i class="fas fa-code"></i> 前端开发</h3>
|
||||
<div class="skill-list">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">HTML5/CSS3</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 95%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">95%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">JavaScript</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 90%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">90%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">React</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 85%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">85%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Vue.js</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 80%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">80%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设计技能 -->
|
||||
<div class="skill-category">
|
||||
<h3><i class="fas fa-paint-brush"></i> 设计</h3>
|
||||
<div class="skill-list">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">UI/UX设计</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 85%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">85%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">响应式设计</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 90%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">90%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Figma</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 80%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">80%</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Adobe Creative Suite</span>
|
||||
<div class="skill-bar">
|
||||
<div class="skill-level" style="width: 75%"></div>
|
||||
</div>
|
||||
<span class="skill-percent">75%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他技能 -->
|
||||
<div class="skill-category">
|
||||
<h3><i class="fas fa-tools"></i> 其他技能</h3>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Git</span>
|
||||
<span class="skill-tag">Webpack</span>
|
||||
<span class="skill-tag">REST API</span>
|
||||
<span class="skill-tag">性能优化</span>
|
||||
<span class="skill-tag">SEO</span>
|
||||
<span class="skill-tag">团队协作</span>
|
||||
<span class="skill-tag">项目管理</span>
|
||||
<span class="skill-tag">问题解决</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 项目部分 -->
|
||||
<section id="projects" class="projects">
|
||||
<div class="container">
|
||||
<h2 class="section-title">精选项目</h2>
|
||||
|
||||
<div class="projects-grid">
|
||||
<!-- 项目1 -->
|
||||
<div class="project-card">
|
||||
<div class="project-image">
|
||||
<div class="image-placeholder">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>电商平台</h3>
|
||||
<p>一个完整的响应式电商网站，包含商品展示、购物车、支付流程等功能。</p>
|
||||
<div class="project-tech">
|
||||
<span class="tech-tag">React</span>
|
||||
<span class="tech-tag">Node.js</span>
|
||||
<span class="tech-tag">MongoDB</span>
|
||||
<span class="tech-tag">Stripe</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="#" class="project-link"><i class="fab fa-github"></i> 代码</a>
|
||||
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目2 -->
|
||||
<div class="project-card">
|
||||
<div class="project-image">
|
||||
<div class="image-placeholder">
|
||||
<i class="fas fa-tasks"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>任务管理应用</h3>
|
||||
<p>一个现代化的任务管理工具，支持看板视图、团队协作和实时更新。</p>
|
||||
<div class="project-tech">
|
||||
<span class="tech-tag">Vue.js</span>
|
||||
<span class="tech-tag">Firebase</span>
|
||||
<span class="tech-tag">Vuex</span>
|
||||
<span class="tech-tag">Vuetify</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="#" class="project-link"><i class="fab fa-github"></i> 代码</a>
|
||||
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目3 -->
|
||||
<div class="project-card">
|
||||
<div class="project-image">
|
||||
<div class="image-placeholder">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>数据分析仪表板</h3>
|
||||
<p>交互式数据可视化仪表板，支持多种图表类型和数据源连接。</p>
|
||||
<div class="project-tech">
|
||||
<span class="tech-tag">D3.js</span>
|
||||
<span class="tech-tag">Express</span>
|
||||
<span class="tech-tag">PostgreSQL</span>
|
||||
<span class="tech-tag">Chart.js</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="#" class="project-link"><i class="fab fa-github"></i> 代码</a>
|
||||
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系部分 -->
|
||||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
<h2 class="section-title">联系我</h2>
|
||||
|
||||
<div class="contact-content">
|
||||
<div class="contact-info">
|
||||
<h3>让我们合作</h3>
|
||||
<p>如果您有项目想法或需要帮助，请随时联系我。我通常会在24小时内回复。</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<div>
|
||||
<h4>邮箱</h4>
|
||||
<p>zhangsan@example.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone"></i>
|
||||
<div>
|
||||
<h4>电话</h4>
|
||||
<p>+86 138 0013 8000</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<div>
|
||||
<h4>位置</h4>
|
||||
<p>中国，北京</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-links">
|
||||
<a href="#" class="social-link" aria-label="GitHub">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="#" class="social-link" aria-label="LinkedIn">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="social-link" aria-label="Twitter">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" class="social-link" aria-label="Codepen">
|
||||
<i class="fab fa-codepen"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-form">
|
||||
<form id="contactForm">
|
||||
<div class="form-group">
|
||||
<label for="name">姓名</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject">主题</label>
|
||||
<input type="text" id="subject" name="subject" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">消息</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">发送消息</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo">
|
||||
<a href="#" class="logo">张三<span class="highlight">.</span></a>
|
||||
<p>创建美观、高效、用户友好的网页应用</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<h4>快速链接</h4>
|
||||
<ul>
|
||||
<li><a href="#home">首页</a></li>
|
||||
<li><a href="#about">关于</a></li>
|
||||
<li><a href="#skills">技能</a></li>
|
||||
<li><a href="#projects">项目</a></li>
|
||||
<li><a href="#contact">联系</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-newsletter">
|
||||
<h4>保持联系</h4>
|
||||
<p>订阅我的技术博客和项目更新</p>
|
||||
<form class="newsletter-form">
|
||||
<input type="email" placeholder="输入您的邮箱" required>
|
||||
<button type="submit" class="btn btn-small">订阅</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 张三. 保留所有权利.</p>
|
||||
<p>最后更新: 2026-03-31</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<button id="backToTop" class="back-to-top" aria-label="返回顶部">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
399
shared/code/frontend/portfolio/js/main.js
Normal file
399
shared/code/frontend/portfolio/js/main.js
Normal file
@@ -0,0 +1,399 @@
|
||||
// 个人作品展示网站 - 主JavaScript文件
|
||||
// 文件位置: portfolio/js/main.js
|
||||
// 创建时间: 2026-03-31
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 初始化所有功能
|
||||
initNavigation();
|
||||
initSmoothScroll();
|
||||
initContactForm();
|
||||
initBackToTop();
|
||||
initSkillAnimations();
|
||||
initProjectCards();
|
||||
|
||||
console.log('个人作品展示网站已加载完成！');
|
||||
});
|
||||
|
||||
// 导航功能
|
||||
function initNavigation() {
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
const navItems = document.querySelectorAll('.nav-link');
|
||||
|
||||
// 菜单切换
|
||||
if (menuToggle) {
|
||||
menuToggle.addEventListener('click', function() {
|
||||
navLinks.classList.toggle('active');
|
||||
menuToggle.classList.toggle('active');
|
||||
});
|
||||
}
|
||||
|
||||
// 导航项点击
|
||||
navItems.forEach(item => {
|
||||
item.addEventListener('click', function(e) {
|
||||
// 关闭移动端菜单
|
||||
if (window.innerWidth <= 1023) {
|
||||
navLinks.classList.remove('active');
|
||||
menuToggle.classList.remove('active');
|
||||
}
|
||||
|
||||
// 更新活动状态
|
||||
navItems.forEach(nav => nav.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动时更新活动导航项
|
||||
window.addEventListener('scroll', updateActiveNav);
|
||||
}
|
||||
|
||||
// 平滑滚动
|
||||
function initSmoothScroll() {
|
||||
const links = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
const headerHeight = document.querySelector('.navbar').offsetHeight;
|
||||
const targetPosition = targetElement.offsetTop - headerHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 联系表单处理
|
||||
function initContactForm() {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 获取表单数据
|
||||
const formData = new FormData(this);
|
||||
const data = Object.fromEntries(formData);
|
||||
|
||||
// 简单验证
|
||||
if (!validateForm(data)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = '发送中...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// 模拟API调用
|
||||
setTimeout(() => {
|
||||
// 在实际应用中，这里会发送到服务器
|
||||
console.log('表单数据:', data);
|
||||
|
||||
// 显示成功消息
|
||||
showFormMessage('消息发送成功！我会尽快回复您。', 'success');
|
||||
|
||||
// 重置表单
|
||||
contactForm.reset();
|
||||
|
||||
// 恢复按钮状态
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
function validateForm(data) {
|
||||
const errors = [];
|
||||
|
||||
if (!data.name || data.name.trim().length < 2) {
|
||||
errors.push('请输入有效的姓名（至少2个字符）');
|
||||
}
|
||||
|
||||
if (!data.email || !isValidEmail(data.email)) {
|
||||
errors.push('请输入有效的邮箱地址');
|
||||
}
|
||||
|
||||
if (!data.subject || data.subject.trim().length < 3) {
|
||||
errors.push('请输入主题（至少3个字符）');
|
||||
}
|
||||
|
||||
if (!data.message || data.message.trim().length < 10) {
|
||||
errors.push('请输入消息内容（至少10个字符）');
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
showFormMessage(errors.join('<br>'), 'error');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function isValidEmail(email) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
function showFormMessage(message, type) {
|
||||
// 移除旧的消息
|
||||
const oldMessage = document.querySelector('.form-message');
|
||||
if (oldMessage) {
|
||||
oldMessage.remove();
|
||||
}
|
||||
|
||||
// 创建新消息
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `form-message ${type}`;
|
||||
messageDiv.innerHTML = message;
|
||||
|
||||
// 添加到表单前
|
||||
const form = document.getElementById('contactForm');
|
||||
form.parentNode.insertBefore(messageDiv, form);
|
||||
|
||||
// 5秒后自动移除
|
||||
setTimeout(() => {
|
||||
messageDiv.remove();
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
// 返回顶部按钮
|
||||
function initBackToTop() {
|
||||
const backToTopBtn = document.getElementById('backToTop');
|
||||
|
||||
if (backToTopBtn) {
|
||||
// 显示/隐藏按钮
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.pageYOffset > 300) {
|
||||
backToTopBtn.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
backToTopBtn.style.opacity = '1';
|
||||
}, 10);
|
||||
} else {
|
||||
backToTopBtn.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
backToTopBtn.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
|
||||
// 点击返回顶部
|
||||
backToTopBtn.addEventListener('click', function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 技能条动画
|
||||
function initSkillAnimations() {
|
||||
const skillBars = document.querySelectorAll('.skill-level');
|
||||
|
||||
// 创建Intersection Observer来检测技能部分是否在视口中
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
// 当技能部分进入视口时，触发动画
|
||||
skillBars.forEach(bar => {
|
||||
const width = bar.style.width;
|
||||
bar.style.width = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
bar.style.width = width;
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 停止观察，避免重复触发
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.5 // 当50%的元素可见时触发
|
||||
});
|
||||
|
||||
// 观察技能部分
|
||||
const skillsSection = document.getElementById('skills');
|
||||
if (skillsSection) {
|
||||
observer.observe(skillsSection);
|
||||
}
|
||||
}
|
||||
|
||||
// 项目卡片交互
|
||||
function initProjectCards() {
|
||||
const projectCards = document.querySelectorAll('.project-card');
|
||||
|
||||
projectCards.forEach(card => {
|
||||
// 点击卡片查看详情
|
||||
card.addEventListener('click', function(e) {
|
||||
// 防止点击链接时触发卡片点击
|
||||
if (e.target.tagName === 'A') return;
|
||||
|
||||
// 在实际应用中，这里会打开项目详情模态框
|
||||
console.log('查看项目详情:', this.querySelector('h3').textContent);
|
||||
});
|
||||
|
||||
// 键盘导航支持
|
||||
card.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
console.log('查看项目详情:', this.querySelector('h3').textContent);
|
||||
}
|
||||
});
|
||||
|
||||
// 设置卡片可聚焦
|
||||
card.setAttribute('tabindex', '0');
|
||||
});
|
||||
}
|
||||
|
||||
// 更新活动导航项
|
||||
function updateActiveNav() {
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const scrollPosition = window.pageYOffset + 100;
|
||||
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
const sectionHeight = section.offsetHeight;
|
||||
const sectionId = section.getAttribute('id');
|
||||
|
||||
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${sectionId}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 性能优化：延迟加载图片
|
||||
function initLazyLoading() {
|
||||
if ('IntersectionObserver' in window) {
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.classList.add('loaded');
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('img[data-src]').forEach(img => {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 添加CSS样式到页面
|
||||
function addDynamicStyles() {
|
||||
const styles = `
|
||||
.form-message {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-message.success {
|
||||
background-color: rgba(76, 175, 80, 0.1);
|
||||
color: #4caf50;
|
||||
border: 1px solid #4caf50;
|
||||
}
|
||||
|
||||
.form-message.error {
|
||||
background-color: rgba(244, 67, 54, 0.1);
|
||||
color: #f44336;
|
||||
border: 1px solid #f44336;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
background-color: var(--color-highlight);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
background-color: #ff2e4f;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:focus {
|
||||
outline: 2px solid var(--color-highlight);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
img[data-src] {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
img.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const styleSheet = document.createElement('style');
|
||||
styleSheet.textContent = styles;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
|
||||
// 初始化动态样式
|
||||
addDynamicStyles();
|
||||
|
||||
// 性能监控
|
||||
if (typeof PerformanceObserver !== 'undefined') {
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
for (const entry of list.getEntries()) {
|
||||
console.log(`${entry.name}: ${entry.duration}ms`);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe({ entryTypes: ['measure'] });
|
||||
}
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('JavaScript错误:', e.message, 'at', e.filename, ':', e.lineno);
|
||||
|
||||
// 在实际应用中，这里可以发送错误到监控服务
|
||||
// sendErrorToMonitoring(e);
|
||||
});
|
||||
|
||||
// PWA支持（基础）
|
||||
if ('serviceWorker' in navigator && window.location.protocol === 'https:') {
|
||||
window.addEventListener('load', function() {
|
||||
navigator.serviceWorker.register('/sw.js').then(function(registration) {
|
||||
console.log('ServiceWorker 注册成功:', registration.scope);
|
||||
}).catch(function(error) {
|
||||
console.log('ServiceWorker 注册失败:', error);
|
||||
});
|
||||
});
|
||||
}
|
||||
224
shared/code/frontend/register.html
Normal file
224
shared/code/frontend/register.html
Normal file
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>注册 - 用户认证</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
||||
.container { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 40px 36px; width: 400px; }
|
||||
.logo { text-align: center; margin-bottom: 28px; }
|
||||
.logo h1 { font-size: 24px; color: #1a1a2e; font-weight: 600; }
|
||||
.logo p { font-size: 13px; color: #888; margin-top: 4px; }
|
||||
.form-group { margin-bottom: 16px; }
|
||||
label { display: block; font-size: 14px; color: #333; margin-bottom: 6px; font-weight: 500; }
|
||||
input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; outline: none; transition: border-color 0.2s; }
|
||||
input:focus { border-color: #4f46e5; }
|
||||
.captcha-row { display: flex; gap: 10px; }
|
||||
.captcha-row input { flex: 1; }
|
||||
.captcha-canvas { height: 44px; border-radius: 8px; cursor: pointer; border: 1px solid #ddd; background: #f9fafb; }
|
||||
.sms-row { display: flex; gap: 10px; }
|
||||
.sms-row input { flex: 1; }
|
||||
.btn-sms { height: 44px; padding: 0 16px; background: #e8e7ff; color: #4f46e5; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
|
||||
.btn-sms:hover { background: #dddbf0; }
|
||||
.btn-sms:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
|
||||
.btn { width: 100%; height: 46px; background: #4f46e5; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 10px; }
|
||||
.btn:hover { background: #4338ca; }
|
||||
.btn:disabled { background: #a5a6f6; cursor: not-allowed; }
|
||||
.links { text-align: center; margin-top: 16px; font-size: 13px; }
|
||||
.links a { color: #4f46e5; text-decoration: none; }
|
||||
.links a:hover { text-decoration: underline; }
|
||||
.msg { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; }
|
||||
.msg.error { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; display: block; }
|
||||
.msg.success { background: #f0fdf4; color: #16a34a; border: 1px solid #86efac; display: block; }
|
||||
.loading { display: none; text-align: center; margin-top: 10px; font-size: 13px; color: #888; }
|
||||
.tip { font-size: 12px; color: #888; margin-top: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<h1>创建账号</h1>
|
||||
<p>3分钟完成注册</p>
|
||||
</div>
|
||||
<div id="msg" class="msg"></div>
|
||||
<form id="regForm">
|
||||
<div class="form-group">
|
||||
<label for="phone">手机号</label>
|
||||
<input type="tel" id="phone" placeholder="请输入手机号" maxlength="11" required autocomplete="tel">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="captchaCode">图形验证码</label>
|
||||
<div class="captcha-row">
|
||||
<input type="text" id="captchaCode" placeholder="请输入图形验证码" maxlength="4" required style="flex:1">
|
||||
<canvas id="captchaCanvas" class="captcha-canvas" width="100" height="44" title="点击刷新"></canvas>
|
||||
</div>
|
||||
<p class="tip">点击图片刷新验证码</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="smsCode">短信验证码</label>
|
||||
<div class="sms-row">
|
||||
<input type="text" id="smsCode" placeholder="请输入短信验证码" maxlength="6" required>
|
||||
<button type="button" class="btn-sms" id="sendBtn">发送验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">设置密码</label>
|
||||
<input type="password" id="password" placeholder="6位及以上密码" minlength="6" required>
|
||||
<p class="tip">密码至少6位，建议混合字母和数字</p>
|
||||
</div>
|
||||
<button type="submit" class="btn" id="submitBtn">注册</button>
|
||||
</form>
|
||||
<div class="links">
|
||||
<a href="login.html">已有账号？立即登录</a>
|
||||
</div>
|
||||
<div id="loading" class="loading">注册中...</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API = 'http://localhost:3000/api/auth';
|
||||
let captchaKey = '';
|
||||
let smsCountdown = 0;
|
||||
let smsTimer = null;
|
||||
|
||||
const form = document.getElementById('regForm');
|
||||
const msg = document.getElementById('msg');
|
||||
const sendBtn = document.getElementById('sendBtn');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const canvas = document.getElementById('captchaCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Generate a simple random captcha
|
||||
function generateCaptcha() {
|
||||
captchaKey = Math.random().toString(36).slice(2, 10);
|
||||
const code = Math.random().toString(36).slice(2, 6).toUpperCase();
|
||||
localStorage.setItem('captcha_' + captchaKey, code);
|
||||
drawCaptcha(code);
|
||||
}
|
||||
|
||||
function drawCaptcha(code) {
|
||||
ctx.clearRect(0, 0, 100, 44);
|
||||
ctx.fillStyle = '#f9fafb';
|
||||
ctx.fillRect(0, 0, 100, 44);
|
||||
ctx.font = 'bold 22px monospace';
|
||||
ctx.fillStyle = '#1a1a2e';
|
||||
// slight rotation effect
|
||||
ctx.save();
|
||||
ctx.translate(10, 30);
|
||||
ctx.rotate(-0.1);
|
||||
ctx.fillText(code.slice(0, 2), 0, 0);
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.translate(55, 30);
|
||||
ctx.rotate(0.1);
|
||||
ctx.fillText(code.slice(2), 0, 0);
|
||||
ctx.restore();
|
||||
//干扰线
|
||||
ctx.strokeStyle = '#ddd';
|
||||
for (let i = 0; i < 3; i++) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(Math.random() * 100, Math.random() * 44);
|
||||
ctx.lineTo(Math.random() * 100, Math.random() * 44);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
canvas.addEventListener('click', generateCaptcha);
|
||||
generateCaptcha();
|
||||
|
||||
function showMsg(text, type) {
|
||||
msg.textContent = text;
|
||||
msg.className = 'msg ' + type;
|
||||
msg.style.display = 'block';
|
||||
}
|
||||
|
||||
function hideMsg() { msg.style.display = 'none'; }
|
||||
|
||||
sendBtn.addEventListener('click', async () => {
|
||||
if (smsCountdown > 0) return;
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
const captchaInput = document.getElementById('captchaCode').value.trim().toUpperCase();
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) { showMsg('请输入正确的手机号', 'error'); return; }
|
||||
if (captchaInput.length !== 4) { showMsg('请输入4位图形验证码', 'error'); return; }
|
||||
|
||||
const stored = localStorage.getItem('captcha_' + captchaKey);
|
||||
if (!stored || stored.toUpperCase() !== captchaInput) {
|
||||
showMsg('图形验证码错误', 'error');
|
||||
generateCaptcha();
|
||||
return;
|
||||
}
|
||||
|
||||
sendBtn.disabled = true;
|
||||
sendBtn.textContent = '发送中...';
|
||||
try {
|
||||
const res = await fetch(API + '/send-code', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ phone, captchaKey, captchaCode: captchaInput })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
showMsg('验证码已发送，请注意查收', 'success');
|
||||
smsCountdown = 60;
|
||||
smsTimer = setInterval(() => {
|
||||
smsCountdown--;
|
||||
if (smsCountdown <= 0) {
|
||||
clearInterval(smsTimer);
|
||||
sendBtn.textContent = '发送验证码';
|
||||
sendBtn.disabled = false;
|
||||
} else {
|
||||
sendBtn.textContent = smsCountdown + '秒后重试';
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
showMsg(data.message || '发送失败', 'error');
|
||||
sendBtn.textContent = '发送验证码';
|
||||
sendBtn.disabled = false;
|
||||
}
|
||||
} catch {
|
||||
showMsg('网络错误，请检查服务器', 'error');
|
||||
sendBtn.textContent = '发送验证码';
|
||||
sendBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideMsg();
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
const smsCode = document.getElementById('smsCode').value.trim();
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) { showMsg('请输入正确的手机号', 'error'); return; }
|
||||
if (!/^\d{4,6}$/.test(smsCode)) { showMsg('请输入4-6位短信验证码', 'error'); return; }
|
||||
if (password.length < 6) { showMsg('密码至少6位', 'error'); return; }
|
||||
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = '注册中...';
|
||||
try {
|
||||
const res = await fetch(API + '/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ phone, code: smsCode, password })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
localStorage.setItem('auth_token', data.token);
|
||||
localStorage.setItem('auth_user', JSON.stringify(data.user));
|
||||
showMsg('注册成功！正在跳转...', 'success');
|
||||
setTimeout(() => { window.location.href = 'devices.html'; }, 800);
|
||||
} else {
|
||||
showMsg(data.message || '注册失败', 'error');
|
||||
}
|
||||
} catch {
|
||||
showMsg('网络错误，请检查服务器是否启动', 'error');
|
||||
} finally {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = '注册';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user