128 lines
7.3 KiB
HTML
128 lines
7.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
|
|
<title>编辑资料 - 极简版</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: 'class',
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
fontFamily: { sans: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'] },
|
||
|
|
colors: {
|
||
|
|
warm: { 950: '#0c0a09', 900: '#1c1917', 800: '#292524', 700: '#44403c', 200: '#e7e5e4' }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
||
|
|
.avatar-mask { background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-gray-100 flex items-center justify-center min-h-screen font-sans p-4 transition-colors duration-500 overflow-hidden relative" id="body-bg">
|
||
|
|
|
||
|
|
<!-- 主题切换 (已补全) -->
|
||
|
|
<div class="absolute right-6 top-6 z-50">
|
||
|
|
<button onclick="toggleTheme()" class="w-12 h-12 bg-white dark:bg-warm-800 rounded-full shadow-lg flex items-center justify-center text-gray-600 dark:text-orange-300 transition-all border border-gray-100 dark:border-warm-700">
|
||
|
|
<i data-lucide="sun" class="block dark:hidden w-5 h-5 text-orange-400"></i>
|
||
|
|
<i data-lucide="moon" class="hidden dark:block w-5 h-5 text-orange-200"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="phone-container" class="relative w-full max-w-[375px] h-[812px] rounded-[40px] shadow-2xl overflow-hidden border-[8px] box-content ring-1 flex flex-col smooth-transition bg-white border-white ring-black/5 bg-[#F5F7FA] dark:bg-[#121212]">
|
||
|
|
|
||
|
|
<!-- 导航 -->
|
||
|
|
<div class="px-4 pt-12 pb-4 flex items-center gap-2 bg-transparent relative z-10">
|
||
|
|
<i data-lucide="chevron-left" class="w-6 h-6 text-gray-800 dark:text-warm-200 cursor-pointer" onclick="history.back()"></i>
|
||
|
|
<span class="text-lg font-bold text-gray-900 dark:text-warm-100">编辑资料</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex-1 overflow-y-auto custom-scrollbar p-5 pb-8 space-y-6">
|
||
|
|
|
||
|
|
<!-- 1. 头像编辑区 -->
|
||
|
|
<div class="flex flex-col items-center justify-center mt-2">
|
||
|
|
<div class="relative w-24 h-24 rounded-full cursor-pointer group" onclick="alert('触发选择图片')">
|
||
|
|
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200" class="w-full h-full rounded-full object-cover border-4 border-white dark:border-warm-800 shadow-md">
|
||
|
|
<div class="absolute inset-0 rounded-full avatar-mask flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||
|
|
<i data-lucide="camera" class="w-8 h-8 text-white"></i>
|
||
|
|
</div>
|
||
|
|
<div class="absolute bottom-0 right-0 bg-indigo-500 text-white rounded-full p-1.5 border-2 border-white dark:border-warm-900 shadow-sm">
|
||
|
|
<i data-lucide="edit-2" class="w-3 h-3"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-gray-400 mt-3">点击更换头像</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 2. 基础信息 (昵称/地区) -->
|
||
|
|
<div class="bg-white dark:bg-warm-900 rounded-2xl overflow-hidden shadow-sm border border-gray-50 dark:border-warm-800/50">
|
||
|
|
<!-- 昵称 -->
|
||
|
|
<div class="flex items-center p-4 border-b border-gray-50 dark:border-warm-800/50 group focus-within:bg-gray-50 dark:focus-within:bg-warm-800/30 transition-colors">
|
||
|
|
<span class="w-14 text-sm font-medium text-gray-500 dark:text-warm-400">昵称</span>
|
||
|
|
<input type="text" value="Kimi" class="flex-1 bg-transparent text-sm text-gray-900 dark:text-warm-200 outline-none font-medium placeholder-gray-300">
|
||
|
|
<i data-lucide="x-circle" class="w-4 h-4 text-gray-300 hidden group-focus-within:block cursor-pointer"></i>
|
||
|
|
</div>
|
||
|
|
<!-- 地区 -->
|
||
|
|
<div class="flex items-center p-4 group focus-within:bg-gray-50 dark:focus-within:bg-warm-800/30 transition-colors">
|
||
|
|
<span class="w-14 text-sm font-medium text-gray-500 dark:text-warm-400">地区</span>
|
||
|
|
<input type="text" value="北京" class="flex-1 bg-transparent text-sm text-gray-900 dark:text-warm-200 outline-none font-medium placeholder-gray-300">
|
||
|
|
<i data-lucide="map-pin" class="w-4 h-4 text-gray-300"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 3. 个性签名 -->
|
||
|
|
<div class="bg-white dark:bg-warm-900 rounded-2xl p-4 shadow-sm border border-gray-50 dark:border-warm-800/50 relative group focus-within:border-indigo-500/30 dark:focus-within:border-orange-500/30 transition-colors">
|
||
|
|
<div class="mb-3 flex justify-between items-center">
|
||
|
|
<span class="text-sm font-medium text-gray-500 dark:text-warm-400">个性签名</span>
|
||
|
|
</div>
|
||
|
|
<textarea
|
||
|
|
class="w-full h-24 bg-transparent outline-none text-sm text-gray-900 dark:text-warm-200 resize-none placeholder-gray-400 leading-relaxed"
|
||
|
|
placeholder="介绍一下自己吧..."
|
||
|
|
maxlength="100"
|
||
|
|
id="input-area"
|
||
|
|
>Stay hungry, stay foolish.</textarea>
|
||
|
|
<div class="text-right text-xs text-gray-400 mt-1 font-mono" id="counter">25/100</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 4. 保存按钮 -->
|
||
|
|
<button class="w-full mt-4 py-3.5 bg-indigo-600 dark:bg-orange-600 text-white rounded-2xl font-bold shadow-lg shadow-indigo-500/30 dark:shadow-orange-500/30 active:scale-[0.98] transition-all hover:shadow-indigo-500/40" onclick="alert('保存成功')">
|
||
|
|
保存修改
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const input = document.getElementById('input-area');
|
||
|
|
const counter = document.getElementById('counter');
|
||
|
|
input.addEventListener('input', (e) => {
|
||
|
|
counter.textContent = `${e.target.value.length}/100`;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 补全暗色模式切换逻辑
|
||
|
|
let isDarkMode = false;
|
||
|
|
function toggleTheme() {
|
||
|
|
isDarkMode = !isDarkMode;
|
||
|
|
document.documentElement.classList.toggle('dark');
|
||
|
|
const body = document.getElementById('body-bg');
|
||
|
|
const phone = document.getElementById('phone-container');
|
||
|
|
|
||
|
|
if (isDarkMode) {
|
||
|
|
body.className = "bg-[#0c0a09] flex items-center justify-center min-h-screen font-sans p-4 transition-colors duration-500 overflow-hidden relative";
|
||
|
|
phone.className = "relative w-full max-w-[375px] h-[812px] rounded-[40px] shadow-2xl overflow-hidden border-[8px] box-content ring-1 flex flex-col smooth-transition bg-warm-950 border-warm-800 ring-white/10 shadow-black/50 transition-colors duration-500";
|
||
|
|
} else {
|
||
|
|
body.className = "bg-gray-100 flex items-center justify-center min-h-screen font-sans p-4 transition-colors duration-500 overflow-hidden relative";
|
||
|
|
phone.className = "relative w-full max-w-[375px] h-[812px] rounded-[40px] shadow-2xl overflow-hidden border-[8px] box-content ring-1 flex flex-col bg-white border-white ring-black/5 transition-colors duration-500";
|
||
|
|
}
|
||
|
|
setTimeout(() => lucide.createIcons(), 50);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = () => lucide.createIcons();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|