UI设计
This commit is contained in:
127
UI设计/个人信息编辑页面.html
Normal file
127
UI设计/个人信息编辑页面.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<!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>
|
||||
131
UI设计/我的个人资料.html
Normal file
131
UI设计/我的个人资料.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!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: {
|
||||
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); }
|
||||
</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 border border-gray-100 dark:border-warm-700">
|
||||
<i data-lucide="sun" class="block dark:hidden w-5 h-5"></i>
|
||||
<i data-lucide="moon" class="hidden dark:block w-5 h-5"></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">
|
||||
|
||||
<!-- 头部大卡片 -->
|
||||
<div class="bg-white dark:bg-warm-900 rounded-b-[40px] shadow-sm pb-8 pt-12 px-6 relative z-10 transition-colors duration-300">
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<span class="text-2xl font-extrabold text-gray-900 dark:text-warm-200">我的</span>
|
||||
<i data-lucide="settings" class="w-6 h-6 text-gray-400 dark:text-warm-200"></i>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-5 mb-8">
|
||||
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150" class="w-20 h-20 rounded-full border-4 border-gray-50 dark:border-warm-800 shadow-md">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-warm-200 mb-1">Kimi</h3>
|
||||
<p class="text-sm text-gray-400">账号: kimi_2024</p>
|
||||
</div>
|
||||
<i data-lucide="chevron-right" class="w-5 h-5 text-gray-300"></i>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between px-4">
|
||||
<div class="text-center">
|
||||
<div class="text-lg font-bold text-gray-900 dark:text-warm-200">12</div>
|
||||
<div class="text-xs text-gray-400 mt-1">动态</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-lg font-bold text-gray-900 dark:text-warm-200">85</div>
|
||||
<div class="text-xs text-gray-400 mt-1">好友</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-lg font-bold text-gray-900 dark:text-warm-200">3</div>
|
||||
<div class="text-xs text-gray-400 mt-1">收藏</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<div class="flex-1 bg-gray-50 dark:bg-[#0c0a09] px-5 pt-6 transition-colors duration-300">
|
||||
<div class="bg-white dark:bg-warm-900 rounded-2xl px-4 py-2 shadow-sm transition-colors duration-300">
|
||||
<div class="flex items-center py-4 border-b border-gray-50 dark:border-warm-800/50">
|
||||
<div class="w-9 h-9 rounded-lg bg-indigo-500 flex items-center justify-center mr-4 text-white">
|
||||
<i data-lucide="aperture" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-sm font-medium text-gray-900 dark:text-warm-200">我的动态</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
<div class="flex items-center py-4 border-b border-gray-50 dark:border-warm-800/50">
|
||||
<div class="w-9 h-9 rounded-lg bg-amber-500 flex items-center justify-center mr-4 text-white">
|
||||
<i data-lucide="star" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-sm font-medium text-gray-900 dark:text-warm-200">我的收藏</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
<div class="flex items-center py-4">
|
||||
<div class="w-9 h-9 rounded-lg bg-emerald-500 flex items-center justify-center mr-4 text-white">
|
||||
<i data-lucide="image" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-sm font-medium text-gray-900 dark:text-warm-200">相册</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div class="absolute bottom-0 w-full h-[84px] bg-white dark:bg-warm-900 border-t border-gray-100 dark:border-warm-800 flex items-center justify-around pb-6 smooth-transition z-20">
|
||||
<div class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500">
|
||||
<i data-lucide="message-circle" class="w-6 h-6"></i><span class="text-[10px] font-medium">消息</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500">
|
||||
<i data-lucide="users" class="w-6 h-6"></i><span class="text-[10px] font-medium">联系人</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500">
|
||||
<i data-lucide="compass" class="w-6 h-6"></i><span class="text-[10px] font-medium">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-indigo-600 dark:text-orange-500">
|
||||
<i data-lucide="user" class="w-6 h-6 fill-current"></i><span class="text-[10px] font-bold">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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";
|
||||
} 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 smooth-transition bg-white border-white ring-black/5";
|
||||
}
|
||||
setTimeout(() => lucide.createIcons(), 50);
|
||||
}
|
||||
window.onload = () => lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
154
UI设计/搜索页面.html
Normal file
154
UI设计/搜索页面.html
Normal file
@@ -0,0 +1,154 @@
|
||||
<!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', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
// 暖色调暗黑颜色 (Warm Stone)
|
||||
warm: {
|
||||
950: '#0c0a09', // 极深背景
|
||||
900: '#1c1917', // 手机背景
|
||||
800: '#292524', // 卡片/抽屉背景
|
||||
700: '#44403c', // 边框/分割线
|
||||
600: '#57534e', // 辅助图标
|
||||
200: '#e7e5e4', // 主要文字
|
||||
100: '#f5f5f4', // 亮色文字
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.custom-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.smooth-transition {
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
</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 hover:scale-110 active:scale-95 transition-all border border-gray-100 dark:border-warm-700 ring-1 ring-black/5 dark:ring-white/10" title="切换主题">
|
||||
<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-warm-900">
|
||||
|
||||
<!-- 搜索头 -->
|
||||
<div class="bg-white dark:bg-warm-900 px-4 pt-12 pb-3 flex items-center gap-3 border-b border-gray-50 dark:border-warm-800/50 z-10 transition-colors duration-300">
|
||||
<div class="flex-1 bg-gray-100 dark:bg-warm-800 rounded-xl h-9 flex items-center px-3 gap-2 transition-colors duration-300">
|
||||
<i data-lucide="search" class="w-4 h-4 text-gray-400"></i>
|
||||
<input type="text" placeholder="搜索" class="flex-1 bg-transparent text-sm text-gray-900 dark:text-warm-200 outline-none placeholder-gray-400" id="search-input" autofocus>
|
||||
<i data-lucide="x-circle" class="w-4 h-4 text-gray-400 hidden cursor-pointer" id="clear-btn"></i>
|
||||
</div>
|
||||
<span class="text-sm text-indigo-600 dark:text-orange-400 font-medium cursor-pointer" onclick="history.back()">取消</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-5 bg-[#F5F7FA] dark:bg-warm-900 transition-colors duration-300">
|
||||
|
||||
<!-- 历史记录 -->
|
||||
<div id="history-section">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-warm-100 transition-colors">搜索历史</span>
|
||||
<i data-lucide="trash-2" class="w-4 h-4 text-gray-400 cursor-pointer hover:text-red-500 transition-colors"></i>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1.5 bg-white dark:bg-warm-800 text-xs text-gray-600 dark:text-warm-300 rounded-lg shadow-sm border border-gray-100 dark:border-warm-800/50 cursor-pointer hover:bg-gray-50 dark:hover:bg-warm-700 transition-colors">林希</span>
|
||||
<span class="px-3 py-1.5 bg-white dark:bg-warm-800 text-xs text-gray-600 dark:text-warm-300 rounded-lg shadow-sm border border-gray-100 dark:border-warm-800/50 cursor-pointer hover:bg-gray-50 dark:hover:bg-warm-700 transition-colors">产品讨论组</span>
|
||||
<span class="px-3 py-1.5 bg-white dark:bg-warm-800 text-xs text-gray-600 dark:text-warm-300 rounded-lg shadow-sm border border-gray-100 dark:border-warm-800/50 cursor-pointer hover:bg-gray-50 dark:hover:bg-warm-700 transition-colors">文件助手</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索结果 (默认隐藏) -->
|
||||
<div id="result-section" class="hidden">
|
||||
<div class="text-xs text-gray-400 mb-3 ml-2">联系人</div>
|
||||
<div class="bg-white dark:bg-warm-800 rounded-2xl overflow-hidden shadow-sm border border-gray-50 dark:border-warm-800/50 transition-colors duration-300">
|
||||
<div class="flex items-center gap-3 p-3 hover:bg-gray-50 dark:hover:bg-warm-700 cursor-pointer transition-colors border-b border-gray-50 dark:border-warm-800/50">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100" class="w-10 h-10 rounded-lg bg-gray-200 dark:bg-warm-700 object-cover">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-warm-200"><span class="text-indigo-600 dark:text-orange-400">林</span>希</span>
|
||||
<span class="text-xs text-gray-400">ID: 2023433</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 hover:bg-gray-50 dark:hover:bg-warm-700 cursor-pointer transition-colors">
|
||||
<img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=100" class="w-10 h-10 rounded-lg bg-gray-200 dark:bg-warm-700 object-cover">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-warm-200">森<span class="text-indigo-600 dark:text-orange-400">林</span>公园小分队</span>
|
||||
<span class="text-xs text-gray-400">包含: 林希</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const input = document.getElementById('search-input');
|
||||
const clearBtn = document.getElementById('clear-btn');
|
||||
const historySec = document.getElementById('history-section');
|
||||
const resultSec = document.getElementById('result-section');
|
||||
|
||||
input.addEventListener('input', (e) => {
|
||||
if (e.target.value.trim().length > 0) {
|
||||
clearBtn.classList.remove('hidden');
|
||||
historySec.classList.add('hidden');
|
||||
resultSec.classList.remove('hidden');
|
||||
} else {
|
||||
clearBtn.classList.add('hidden');
|
||||
historySec.classList.remove('hidden');
|
||||
resultSec.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
clearBtn.addEventListener('click', () => {
|
||||
input.value = '';
|
||||
clearBtn.classList.add('hidden');
|
||||
historySec.classList.remove('hidden');
|
||||
resultSec.classList.add('hidden');
|
||||
});
|
||||
|
||||
// 添加主题切换逻辑
|
||||
let isDarkMode = false;
|
||||
function toggleTheme() {
|
||||
isDarkMode = !isDarkMode;
|
||||
const html = document.documentElement;
|
||||
const body = document.getElementById('body-bg');
|
||||
const phone = document.getElementById('phone-container');
|
||||
|
||||
if (isDarkMode) {
|
||||
html.classList.add('dark');
|
||||
// 使用 Warm 950 作为背景，Warm 900 作为手机壳
|
||||
body.className = "bg-warm-950 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-900 border-warm-800 ring-white/10 shadow-black/50";
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
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 smooth-transition bg-white border-white ring-black/5 bg-[#F5F7FA]";
|
||||
}
|
||||
setTimeout(() => lucide.createIcons(), 50);
|
||||
}
|
||||
|
||||
window.onload = () => lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
403
UI设计/朋友圈.html
Normal file
403
UI设计/朋友圈.html
Normal file
@@ -0,0 +1,403 @@
|
||||
<!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', 600: '#57534e', 500: '#78716c',
|
||||
200: '#e7e5e4', 100: '#f5f5f4',
|
||||
},
|
||||
// 朋友圈专用色
|
||||
link: { light: '#576b95', dark: '#7e95c5' },
|
||||
bgDetail: { light: '#f7f7f7', dark: '#292524' } // 评论区背景
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
|
||||
/* 图片九宫格布局 */
|
||||
.grid-1 { grid-template-columns: 1fr; }
|
||||
.grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); width: 66%; }
|
||||
.grid-3, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9 { grid-template-columns: repeat(3, 1fr); }
|
||||
|
||||
/* 评论区小三角 */
|
||||
.triangle-up {
|
||||
width: 0; height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #f7f7f7; /* Light mode color */
|
||||
position: absolute; top: -5px; left: 10px;
|
||||
}
|
||||
.dark .triangle-up { border-bottom-color: #292524; } /* Dark mode color */
|
||||
|
||||
/* 操作菜单动画 */
|
||||
.action-menu-enter { opacity: 0; transform: translateX(10px) scale(0.95); pointer-events: none; }
|
||||
.action-menu-active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
|
||||
</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 md:right-20 md:top-auto flex flex-col gap-2 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 hover:scale-110 active:scale-95 transition-all border border-gray-100 dark:border-warm-700 ring-1 ring-black/5 dark:ring-white/10">
|
||||
<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">
|
||||
|
||||
<!-- ================= 沉浸式导航栏 (Header) ================= -->
|
||||
<div id="nav-header" class="absolute top-0 left-0 w-full z-20 px-5 pt-12 pb-3 flex items-center justify-between transition-colors duration-300">
|
||||
<!-- 背景层 (通过JS控制透明度) -->
|
||||
<div id="nav-bg" class="absolute inset-0 bg-white dark:bg-warm-900 opacity-0 border-b border-gray-100 dark:border-warm-800 transition-opacity duration-300"></div>
|
||||
|
||||
<!-- 内容层 -->
|
||||
<div class="relative z-10 flex items-center gap-1 cursor-pointer group" onclick="alert('返回')">
|
||||
<i data-lucide="chevron-left" id="nav-icon-left" class="w-7 h-7 text-white transition-colors duration-300"></i>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<span id="nav-title" class="text-[17px] font-bold text-gray-900 dark:text-warm-100 opacity-0 transition-opacity duration-300">朋友圈</span>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 cursor-pointer" onclick="alert('跳转通知')">
|
||||
<i data-lucide="bell" id="nav-icon-right" class="w-6 h-6 text-white transition-colors duration-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= 滚动内容区域 ================= -->
|
||||
<div id="scroll-view" class="flex-1 overflow-y-auto custom-scrollbar bg-white dark:bg-warm-900 relative z-0">
|
||||
|
||||
<!-- 1. 封面图区域 -->
|
||||
<div class="relative h-[340px] mb-8 group cursor-pointer">
|
||||
<!-- 封面图 -->
|
||||
<img src="https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?w=800&q=80" class="w-full h-full object-cover">
|
||||
<!-- 底部阴影遮罩 -->
|
||||
<div class="absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-black/40 to-transparent"></div>
|
||||
|
||||
<!-- 用户信息 (悬挂在右下角) -->
|
||||
<div class="absolute bottom-[-30px] right-4 flex items-end gap-3">
|
||||
<span class="text-white font-bold text-lg mb-4 drop-shadow-md text-shadow">Kimi</span>
|
||||
<div class="w-20 h-20 rounded-xl overflow-hidden border-[3px] border-white dark:border-warm-800 shadow-md bg-gray-200">
|
||||
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150" class="w-full h-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 动态列表 -->
|
||||
<div id="feed-list" class="px-4 pb-24 space-y-8">
|
||||
<!-- 动态内容由 JS 生成 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ================= 悬浮发布按钮 (FAB) ================= -->
|
||||
<button onclick="alert('发布动态')" class="absolute bottom-[110px] right-5 w-14 h-14 bg-green-500 hover:bg-green-600 rounded-full shadow-xl shadow-green-500/30 flex items-center justify-center text-white active:scale-90 transition-transform z-30">
|
||||
<i data-lucide="camera" class="w-7 h-7"></i>
|
||||
</button>
|
||||
|
||||
<!-- ================= 底部 Tab Bar ================= -->
|
||||
<div class="absolute bottom-0 w-full h-[84px] bg-white dark:bg-warm-900 border-t border-gray-100 dark:border-warm-800 flex items-center justify-around pb-6 smooth-transition z-20">
|
||||
<div onclick="alert('跳转消息')" class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500 hover:text-gray-900 dark:hover:text-warm-200 cursor-pointer transition-colors">
|
||||
<i data-lucide="message-circle" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-medium">消息</span>
|
||||
</div>
|
||||
<div onclick="alert('跳转联系人')" class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500 hover:text-gray-900 dark:hover:text-warm-200 cursor-pointer transition-colors">
|
||||
<i data-lucide="users" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-medium">联系人</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-indigo-600 dark:text-orange-500 cursor-pointer">
|
||||
<i data-lucide="compass" class="w-6 h-6 fill-current"></i>
|
||||
<span class="text-[10px] font-bold">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500 hover:text-gray-900 dark:hover:text-warm-200 cursor-pointer transition-colors">
|
||||
<i data-lucide="user" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 逻辑脚本 -->
|
||||
<script>
|
||||
// --- 模拟数据 ---
|
||||
const moments = [
|
||||
{
|
||||
id: 1,
|
||||
user: { name: '林希', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150' },
|
||||
content: '周末的阳光真好，去爬山了！🏔️ 天气晴朗，心情舒畅。',
|
||||
images: [
|
||||
'https://images.unsplash.com/photo-1551632811-561732d1e306?w=400',
|
||||
'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=400',
|
||||
'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
|
||||
'https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?w=400'
|
||||
],
|
||||
time: '20分钟前',
|
||||
likes: ['张三', '李四', '王五'],
|
||||
comments: [
|
||||
{ user: '张三', content: '景色真不错啊！' },
|
||||
{ user: '李四', content: '下次带我一个' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
user: { name: '王经理', avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=150' },
|
||||
content: '项目终于上线了，大家辛苦了！今晚聚餐走起 🍻',
|
||||
images: ['https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=400'],
|
||||
time: '1小时前',
|
||||
likes: ['Kimi', '小赵', '老陈', '林希'],
|
||||
comments: []
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
user: { name: '陈晨', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150' },
|
||||
content: '分享一首好听的歌 🎵',
|
||||
type: 'music', // 模拟非图片内容
|
||||
time: '2小时前',
|
||||
likes: [],
|
||||
comments: []
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
user: { name: '韦雁', avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150' },
|
||||
content: '', // 纯图片
|
||||
images: [
|
||||
'https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=400',
|
||||
'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=400',
|
||||
'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?w=400'
|
||||
],
|
||||
time: '昨天',
|
||||
likes: ['Kimi'],
|
||||
comments: [
|
||||
{ user: 'Kimi', content: '看着就好吃 😋' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
let isDarkMode = false;
|
||||
let activeMenuId = null; // 当前打开的操作菜单ID
|
||||
|
||||
const els = {
|
||||
body: document.getElementById('body-bg'),
|
||||
phone: document.getElementById('phone-container'),
|
||||
scrollView: document.getElementById('scroll-view'),
|
||||
navHeader: document.getElementById('nav-header'),
|
||||
navBg: document.getElementById('nav-bg'),
|
||||
navTitle: document.getElementById('nav-title'),
|
||||
navIconLeft: document.getElementById('nav-icon-left'),
|
||||
navIconRight: document.getElementById('nav-icon-right'),
|
||||
feedList: document.getElementById('feed-list'),
|
||||
};
|
||||
|
||||
window.onload = () => {
|
||||
renderFeed();
|
||||
lucide.createIcons();
|
||||
|
||||
// 滚动监听
|
||||
els.scrollView.addEventListener('scroll', handleScroll);
|
||||
|
||||
// 点击外部关闭菜单
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.action-area')) {
|
||||
closeAllMenus();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// --- 滚动效果：沉浸式导航栏 ---
|
||||
function handleScroll() {
|
||||
const scrollTop = els.scrollView.scrollTop;
|
||||
const threshold = 200; // 滚动多少像素后变色
|
||||
let opacity = Math.min(scrollTop / threshold, 1);
|
||||
|
||||
// 1. 背景透明度
|
||||
els.navBg.style.opacity = opacity;
|
||||
|
||||
// 2. 标题透明度
|
||||
els.navTitle.style.opacity = opacity;
|
||||
|
||||
// 3. 图标颜色翻转 (白色 -> 黑色/暖白)
|
||||
if (opacity > 0.6) {
|
||||
// 变实色背景模式
|
||||
const iconColor = isDarkMode ? 'text-warm-100' : 'text-gray-900';
|
||||
els.navIconLeft.setAttribute('class', `w-7 h-7 transition-colors duration-300 ${iconColor}`);
|
||||
els.navIconRight.setAttribute('class', `w-6 h-6 transition-colors duration-300 ${iconColor}`);
|
||||
} else {
|
||||
// 透明背景模式 (白色图标)
|
||||
els.navIconLeft.setAttribute('class', `w-7 h-7 text-white transition-colors duration-300`);
|
||||
els.navIconRight.setAttribute('class', `w-6 h-6 text-white transition-colors duration-300`);
|
||||
}
|
||||
}
|
||||
|
||||
// --- 渲染列表 ---
|
||||
function renderFeed() {
|
||||
els.feedList.innerHTML = moments.map(item => {
|
||||
// 图片网格类名
|
||||
let gridClass = '';
|
||||
let imgSize = 'w-full h-full'; // 默认填满容器
|
||||
let containerSize = 'h-auto';
|
||||
|
||||
if (item.images && item.images.length > 0) {
|
||||
const count = item.images.length;
|
||||
if (count === 1) {
|
||||
gridClass = 'grid-1';
|
||||
containerSize = 'max-w-[70%]'; // 单图不占满
|
||||
} else if (count === 4) {
|
||||
gridClass = 'grid-2'; // 4张图显示为2x2
|
||||
} else {
|
||||
gridClass = `grid-3`; // 其他情况3列
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染图片 HTML
|
||||
const imagesHtml = item.images ? `
|
||||
<div class="grid gap-1.5 mt-2 ${gridClass} ${item.images.length === 1 ? 'max-w-[200px]' : ''}">
|
||||
${item.images.map(url => `
|
||||
<div class="aspect-square bg-gray-100 dark:bg-warm-800 rounded-lg overflow-hidden cursor-pointer">
|
||||
<img src="${url}" class="w-full h-full object-cover hover:opacity-90 transition-opacity">
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
// 渲染点赞评论区 HTML
|
||||
const hasInteraction = (item.likes && item.likes.length > 0) || (item.comments && item.comments.length > 0);
|
||||
const interactionHtml = hasInteraction ? `
|
||||
<div class="mt-3 bg-gray-100 dark:bg-warm-800/60 rounded-[4px] p-3 relative text-[13px] leading-5">
|
||||
<div class="triangle-up"></div>
|
||||
|
||||
${item.likes.length ? `
|
||||
<div class="flex items-start gap-2 mb-1 text-indigo-600 dark:text-blue-400 font-medium">
|
||||
<i data-lucide="heart" class="w-3.5 h-3.5 mt-1 fill-current stroke-none"></i>
|
||||
<span>${item.likes.join('，')}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${item.likes.length && item.comments.length ? `<div class="h-[1px] bg-black/5 dark:bg-white/5 my-1"></div>` : ''}
|
||||
|
||||
${item.comments.length ? `
|
||||
<div class="space-y-1">
|
||||
${item.comments.map(c => `
|
||||
<div>
|
||||
<span class="text-indigo-600 dark:text-blue-400 font-medium cursor-pointer">${c.user}</span>
|
||||
<span class="text-gray-800 dark:text-warm-200">：${c.content}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
return `
|
||||
<div class="flex gap-3 border-b border-gray-100 dark:border-warm-800/50 pb-6 last:border-0">
|
||||
<!-- 头像 -->
|
||||
<div class="shrink-0">
|
||||
<img src="${item.user.avatar}" class="w-[42px] h-[42px] rounded-lg bg-gray-200 object-cover cursor-pointer">
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="flex-1 min-w-0 pt-1">
|
||||
<div class="font-bold text-[15px] text-indigo-600 dark:text-blue-400 mb-1 cursor-pointer">${item.user.name}</div>
|
||||
${item.content ? `<div class="text-[15px] text-gray-900 dark:text-warm-100 leading-normal mb-1">${item.content}</div>` : ''}
|
||||
|
||||
${imagesHtml}
|
||||
|
||||
<!-- 底部栏 -->
|
||||
<div class="flex items-center justify-between mt-3 h-6 relative action-area">
|
||||
<span class="text-xs text-gray-400 dark:text-warm-500">${item.time}</span>
|
||||
|
||||
<!-- 两个点按钮 -->
|
||||
<div onclick="toggleActionMenu(${item.id})" class="w-8 h-5 bg-gray-100 dark:bg-warm-800/80 rounded-[4px] flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-warm-700 transition-colors">
|
||||
<div class="flex gap-[3px]">
|
||||
<div class="w-1 h-1 bg-indigo-600 dark:bg-blue-400 rounded-full"></div>
|
||||
<div class="w-1 h-1 bg-indigo-600 dark:bg-blue-400 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹出菜单 -->
|
||||
<div id="menu-${item.id}" class="absolute right-10 top-[-6px] bg-gray-800 dark:bg-warm-700 text-white rounded-[4px] flex items-center overflow-hidden shadow-lg transition-all duration-200 action-menu-enter">
|
||||
<div class="flex items-center gap-1 px-4 py-2.5 cursor-pointer hover:bg-white/10 active:bg-white/20 transition-colors border-r border-white/10">
|
||||
<i data-lucide="heart" class="w-4 h-4"></i>
|
||||
<span class="text-xs font-medium">赞</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 px-4 py-2.5 cursor-pointer hover:bg-white/10 active:bg-white/20 transition-colors">
|
||||
<i data-lucide="message-square" class="w-4 h-4"></i>
|
||||
<span class="text-xs font-medium">评论</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${interactionHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// --- 交互逻辑 ---
|
||||
function toggleActionMenu(id) {
|
||||
const menu = document.getElementById(`menu-${id}`);
|
||||
const isActive = menu.classList.contains('action-menu-active');
|
||||
|
||||
// 先关闭所有
|
||||
closeAllMenus();
|
||||
|
||||
if (!isActive) {
|
||||
menu.classList.remove('action-menu-enter');
|
||||
menu.classList.add('action-menu-active');
|
||||
activeMenuId = id;
|
||||
}
|
||||
lucide.createIcons(); // 刷新图标（如果菜单是动态生成的）
|
||||
}
|
||||
|
||||
function closeAllMenus() {
|
||||
document.querySelectorAll('[id^="menu-"]').forEach(el => {
|
||||
el.classList.remove('action-menu-active');
|
||||
el.classList.add('action-menu-enter');
|
||||
});
|
||||
activeMenuId = null;
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
isDarkMode = !isDarkMode;
|
||||
const html = document.documentElement;
|
||||
const body = document.getElementById('body-bg');
|
||||
const phone = document.getElementById('phone-container');
|
||||
|
||||
if (isDarkMode) {
|
||||
html.classList.add('dark');
|
||||
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-900 border-warm-800 ring-white/10 shadow-black/50";
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
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 smooth-transition bg-white border-white ring-black/5";
|
||||
}
|
||||
// 触发一次滚动以更新 Header 图标颜色
|
||||
handleScroll();
|
||||
setTimeout(() => lucide.createIcons(), 50);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
441
UI设计/添加好友.html
Normal file
441
UI设计/添加好友.html
Normal file
@@ -0,0 +1,441 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>添加好友 - 暖色暗黑版</title>
|
||||
|
||||
<!-- 1. 引入 Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- 2. 引入 Lucide 图标库 -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
|
||||
<!-- 3. 配置 Tailwind 主题颜色 -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
// 定义暖色调暗黑颜色 (Stone)
|
||||
warm: {
|
||||
950: '#0c0a09', // 极深背景
|
||||
900: '#1c1917', // 手机背景
|
||||
800: '#292524', // 卡片背景
|
||||
700: '#44403c', // 边框/分割线
|
||||
200: '#e7e5e4', // 主要文字
|
||||
400: '#a8a29e', // 次要文字
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 隐藏滚动条但保留功能 */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.custom-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.animate-spin-custom {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* 简单的淡入动画 */
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.5s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* 状态切换时的平滑过渡 */
|
||||
.smooth-transition {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-200 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 md:right-20 md:top-auto flex flex-col gap-2 z-50">
|
||||
<button
|
||||
onclick="toggleTheme()"
|
||||
class="w-14 h-14 bg-white dark:bg-warm-800 rounded-full shadow-xl flex items-center justify-center text-gray-600 dark:text-orange-300 hover:scale-110 active:scale-95 transition-all border-4 border-white dark:border-warm-700 ring-1 ring-black/5"
|
||||
title="切换日/夜模式"
|
||||
>
|
||||
<i data-lucide="sun" class="block dark:hidden w-6 h-6 text-orange-400"></i>
|
||||
<i data-lucide="moon" class="hidden dark:block w-6 h-6 text-orange-200"></i>
|
||||
</button>
|
||||
<span class="text-xs font-bold text-center text-gray-500 dark:text-warm-400 mt-1 uppercase tracking-wider">Theme</span>
|
||||
</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">
|
||||
|
||||
<!-- ================= 顶部背景区域 (Header) ================= -->
|
||||
<div class="relative w-full h-[360px] shrink-0 rounded-bl-[60px] rounded-br-[280px] overflow-hidden z-0 shadow-sm smooth-transition">
|
||||
|
||||
<!-- 1. 背景渐变：日间蓝紫 vs 夜间暖橙 -->
|
||||
<!-- Day: Blue/Purple, Night: Deep Warm Brown/Orange/Red -->
|
||||
<div id="header-gradient" class="absolute inset-0 bg-gradient-to-br from-[#4b6cb7] to-[#8E9EFE] smooth-transition opacity-100"></div>
|
||||
|
||||
<!-- 2. 梦幻光影 -->
|
||||
<div id="blob-1" class="absolute top-[-50px] left-[-50px] w-[350px] h-[350px] bg-[#3B4FA8] opacity-80 blur-[70px] rounded-full mix-blend-multiply smooth-transition"></div>
|
||||
<div id="blob-2" class="absolute top-[20px] right-[-60px] w-[300px] h-[300px] bg-[#82E1FF] opacity-40 blur-[60px] rounded-full mix-blend-overlay smooth-transition"></div>
|
||||
|
||||
<!-- 3. 装饰线条 -->
|
||||
<div class="absolute top-[20px] right-[-20px] w-[150px] h-[150px] border border-white/10 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- ================= 顶部内容层 (Foreground) ================= -->
|
||||
<div class="absolute top-0 left-0 w-full h-[360px] flex flex-col z-10 pointer-events-none">
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="px-6 pt-12 pb-2 flex justify-between items-center text-white pointer-events-auto">
|
||||
<button class="p-2 -ml-2 rounded-full hover:bg-white/10 transition active:scale-95">
|
||||
<i data-lucide="chevron-left" class="w-7 h-7"></i>
|
||||
</button>
|
||||
<span class="text-lg font-bold tracking-wide opacity-95">添加好友</span>
|
||||
<button class="p-2 -mr-2 rounded-full hover:bg-white/10 transition active:scale-95">
|
||||
<i data-lucide="more-horizontal" class="w-6 h-6"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 大标题 -->
|
||||
<div class="px-6 mt-8 flex-1">
|
||||
<h1 class="text-[36px] font-black italic tracking-wide mb-1 text-white drop-shadow-md smooth-transition"
|
||||
style="font-family: -apple-system, sans-serif;">
|
||||
发现新朋友
|
||||
</h1>
|
||||
<p id="subtitle" class="text-sm font-bold opacity-80 tracking-widest uppercase text-blue-50 smooth-transition">Expanding your circle</p>
|
||||
</div>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="px-6 pb-14 pointer-events-auto">
|
||||
<div id="search-box" class="relative flex items-center w-full h-12 rounded-full shadow-xl transition-all duration-300 active:scale-[0.99] border bg-white border-gray-50 shadow-blue-900/10 text-gray-700">
|
||||
<div id="search-icon-wrapper" class="pl-5 pr-3 text-gray-400 smooth-transition">
|
||||
<i data-lucide="search" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="search-input"
|
||||
class="w-full h-full bg-transparent outline-none placeholder-gray-400 text-base font-medium smooth-transition"
|
||||
placeholder="请输入账号/手机号"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<button
|
||||
id="clear-btn"
|
||||
onclick="clearSearch()"
|
||||
class="mr-3 p-1 rounded-full text-gray-400 hover:bg-gray-100 dark:hover:bg-warm-700 hover:text-gray-600 transition hidden"
|
||||
>
|
||||
<i data-lucide="x" class="w-4 h-4 fill-current"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= 下半部分内容列表 (Dynamic Content) ================= -->
|
||||
<div id="content-area" class="flex-1 overflow-y-auto custom-scrollbar relative z-0 mt-[-40px] pt-2 px-4">
|
||||
<!-- Content will be injected here by JS -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ==========================================
|
||||
JavaScript 逻辑
|
||||
========================================== -->
|
||||
<script>
|
||||
// --- 数据 ---
|
||||
const MOCK_USERS = [
|
||||
{ id: '3803408', name: '王权', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=150&q=80' },
|
||||
{ id: '2023433', name: '珊宋', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&q=80' },
|
||||
{ id: '2010001', name: '韦雁', avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?auto=format&fit=crop&w=150&q=80' },
|
||||
{ id: '2010333', name: '顾祢', avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=150&q=80' },
|
||||
{ id: '2011234', name: '林希', avatar: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&w=150&q=80' },
|
||||
{ id: '2015678', name: '陈晨', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80' },
|
||||
];
|
||||
|
||||
// --- 状态 ---
|
||||
let state = {
|
||||
view: 'initial', // initial, loading, empty, results
|
||||
query: '',
|
||||
addedIds: [],
|
||||
isDarkMode: false
|
||||
};
|
||||
|
||||
// --- DOM 元素引用 ---
|
||||
const els = {
|
||||
body: document.getElementById('body-bg'),
|
||||
phone: document.getElementById('phone-container'),
|
||||
headerGradient: document.getElementById('header-gradient'),
|
||||
blob1: document.getElementById('blob-1'),
|
||||
blob2: document.getElementById('blob-2'),
|
||||
subtitle: document.getElementById('subtitle'),
|
||||
searchBox: document.getElementById('search-box'),
|
||||
searchInput: document.getElementById('search-input'),
|
||||
searchIconWrapper: document.getElementById('search-icon-wrapper'),
|
||||
clearBtn: document.getElementById('clear-btn'),
|
||||
contentArea: document.getElementById('content-area'),
|
||||
};
|
||||
|
||||
// --- 初始化 ---
|
||||
window.onload = () => {
|
||||
renderContent();
|
||||
lucide.createIcons();
|
||||
|
||||
// 绑定输入事件
|
||||
els.searchInput.addEventListener('input', (e) => {
|
||||
const val = e.target.value.trim();
|
||||
state.query = val;
|
||||
|
||||
if (val.length > 0) {
|
||||
els.clearBtn.classList.remove('hidden');
|
||||
setState('loading');
|
||||
|
||||
// 模拟防抖搜索
|
||||
if (window.searchTimer) clearTimeout(window.searchTimer);
|
||||
window.searchTimer = setTimeout(() => {
|
||||
if (val === '0000') {
|
||||
setState('empty');
|
||||
} else {
|
||||
setState('results');
|
||||
}
|
||||
}, 1200);
|
||||
} else {
|
||||
els.clearBtn.classList.add('hidden');
|
||||
setState('initial');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// --- 核心功能函数 ---
|
||||
|
||||
function setState(view) {
|
||||
state.view = view;
|
||||
renderContent();
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
state.query = '';
|
||||
els.searchInput.value = '';
|
||||
els.clearBtn.classList.add('hidden');
|
||||
setState('initial');
|
||||
}
|
||||
|
||||
function toggleAdd(id) {
|
||||
if (!state.addedIds.includes(id)) {
|
||||
state.addedIds.push(id);
|
||||
// 重新渲染当前列表项的按钮状态
|
||||
const btn = document.getElementById(`btn-${id}`);
|
||||
if (btn) {
|
||||
btn.textContent = '已发送';
|
||||
if (state.isDarkMode) {
|
||||
btn.className = "px-5 py-1.5 rounded-full text-sm font-bold transition-all duration-300 bg-warm-700 text-warm-400 cursor-default";
|
||||
} else {
|
||||
btn.className = "px-5 py-1.5 rounded-full text-sm font-bold transition-all duration-300 bg-gray-100 text-gray-400 cursor-default";
|
||||
}
|
||||
btn.disabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
state.isDarkMode = !state.isDarkMode;
|
||||
const isDark = state.isDarkMode;
|
||||
const html = document.documentElement;
|
||||
|
||||
// 1. 切换 HTML class 以触发 Tailwind dark: 样式
|
||||
if (isDark) {
|
||||
html.classList.add('dark');
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
}
|
||||
|
||||
// 2. 切换外部背景
|
||||
els.body.className = isDark
|
||||
? "bg-[#0c0a09] flex items-center justify-center min-h-screen font-sans p-4 transition-colors duration-500 overflow-hidden relative"
|
||||
: "bg-gray-200 flex items-center justify-center min-h-screen font-sans p-4 transition-colors duration-500 overflow-hidden relative";
|
||||
|
||||
// 3. 切换手机容器样式 (Warm Stone vs White)
|
||||
els.phone.className = isDark
|
||||
? "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-900 border-warm-800 ring-white/10 shadow-black/50"
|
||||
: "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";
|
||||
|
||||
// 4. 切换头部渐变 (Warm Ember vs Cool Blue)
|
||||
// 暗色模式：使用 暖橙/深红/棕色 渐变
|
||||
els.headerGradient.className = isDark
|
||||
? "absolute inset-0 bg-gradient-to-br from-[#7c2d12] to-[#b45309] smooth-transition opacity-90" // Warm Ember
|
||||
: "absolute inset-0 bg-gradient-to-br from-[#4b6cb7] to-[#8E9EFE] smooth-transition opacity-100"; // Cool Blue
|
||||
|
||||
// 5. 切换光影 (Blob Colors)
|
||||
els.blob1.className = isDark
|
||||
? "absolute top-[-50px] left-[-50px] w-[350px] h-[350px] bg-[#451a03] opacity-80 blur-[70px] rounded-full mix-blend-multiply smooth-transition"
|
||||
: "absolute top-[-50px] left-[-50px] w-[350px] h-[350px] bg-[#3B4FA8] opacity-80 blur-[70px] rounded-full mix-blend-multiply smooth-transition";
|
||||
|
||||
els.blob2.className = isDark
|
||||
? "absolute top-[20px] right-[-60px] w-[300px] h-[300px] bg-[#fdba74] opacity-30 blur-[60px] rounded-full mix-blend-overlay smooth-transition"
|
||||
: "absolute top-[20px] right-[-60px] w-[300px] h-[300px] bg-[#82E1FF] opacity-40 blur-[60px] rounded-full mix-blend-overlay smooth-transition";
|
||||
|
||||
// 6. 切换副标题文字
|
||||
els.subtitle.className = isDark
|
||||
? "text-sm font-bold opacity-80 tracking-widest uppercase text-orange-100 smooth-transition"
|
||||
: "text-sm font-bold opacity-80 tracking-widest uppercase text-blue-50 smooth-transition";
|
||||
|
||||
// 7. 切换搜索框
|
||||
els.searchBox.className = isDark
|
||||
? "relative flex items-center w-full h-12 rounded-full shadow-xl transition-all duration-300 active:scale-[0.99] border bg-warm-800 border-warm-700 shadow-black/20 text-warm-200"
|
||||
: "relative flex items-center w-full h-12 rounded-full shadow-xl transition-all duration-300 active:scale-[0.99] border bg-white border-gray-50 shadow-blue-900/10 text-gray-700";
|
||||
|
||||
els.searchIconWrapper.className = isDark ? "pl-5 pr-3 text-warm-400 smooth-transition" : "pl-5 pr-3 text-gray-400 smooth-transition";
|
||||
els.searchInput.className = isDark
|
||||
? "w-full h-full bg-transparent outline-none placeholder-warm-500 text-base font-medium smooth-transition"
|
||||
: "w-full h-full bg-transparent outline-none placeholder-gray-400 text-base font-medium smooth-transition";
|
||||
|
||||
// 重新渲染内容区以更新列表样式
|
||||
renderContent();
|
||||
|
||||
// 刷新图标
|
||||
setTimeout(() => lucide.createIcons(), 50);
|
||||
}
|
||||
|
||||
// --- 渲染器 ---
|
||||
|
||||
function renderContent() {
|
||||
const isDark = state.isDarkMode;
|
||||
let html = '';
|
||||
|
||||
// 样式配置 helper
|
||||
const styles = {
|
||||
scanCard: isDark
|
||||
? "bg-gradient-to-r from-[#ea580c] to-[#f97316] shadow-lg shadow-orange-900/30 ring-white/10 hover:brightness-110"
|
||||
: "bg-gradient-to-r from-[#5B7FFF] to-[#8C9EFF] shadow-xl shadow-blue-500/20 ring-white/50 hover:brightness-105",
|
||||
scanIconBg: isDark ? "bg-black/20 border-white/20" : "bg-white/20 border-white/40",
|
||||
listTitle: isDark ? "text-warm-400" : "text-gray-400",
|
||||
cardBg: isDark ? "bg-warm-800 border-warm-700 shadow-none hover:bg-warm-700" : "bg-white border-gray-100 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07)] hover:shadow-lg",
|
||||
textMain: isDark ? "text-warm-200" : "text-gray-800",
|
||||
textSub: isDark ? "text-warm-400" : "text-gray-400",
|
||||
avatarBorder: isDark ? "border-warm-700" : "border-gray-100",
|
||||
btnAdd: isDark
|
||||
? "bg-gradient-to-r from-[#c2410c] to-[#ea580c] text-white shadow-md shadow-orange-900/40 active:scale-95 hover:shadow-orange-500/30"
|
||||
: "bg-gradient-to-r from-[#5B7FFF] to-[#748EFF] text-white shadow-md shadow-blue-500/30 active:scale-95 hover:shadow-blue-500/50",
|
||||
btnDisabled: isDark
|
||||
? "bg-warm-700 text-warm-400 cursor-default"
|
||||
: "bg-gray-100 text-gray-400 cursor-default",
|
||||
loadingBg: isDark ? "bg-warm-800 border-warm-700" : "bg-white border-gray-100 shadow-lg shadow-gray-200/50",
|
||||
loadingText: isDark ? "text-warm-400" : "text-gray-400",
|
||||
loadingSpinner: isDark ? "border-t-[#f97316]" : "border-t-[#5B7FFF]"
|
||||
};
|
||||
|
||||
// 生成用户列表 HTML 字符串
|
||||
const generateUserList = (users, delayBase = 0) => {
|
||||
return users.map((user, index) => {
|
||||
const isAdded = state.addedIds.includes(user.id);
|
||||
return `
|
||||
<div class="w-full rounded-[20px] p-4 flex items-center transition-all duration-300 border ${styles.cardBg} fade-in-up"
|
||||
style="animation-delay: ${(index + delayBase) * 50}ms">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden mr-4 shrink-0 border ${styles.avatarBorder}">
|
||||
<img src="${user.avatar}" class="w-full h-full object-cover" alt="${user.name}">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-base ${styles.textMain}">${user.name}</h3>
|
||||
<p class="text-xs mt-0.5 font-medium ${styles.textSub}">ID: ${user.id}</p>
|
||||
</div>
|
||||
<button
|
||||
id="btn-${user.id}"
|
||||
onclick="toggleAdd('${user.id}')"
|
||||
${isAdded ? 'disabled' : ''}
|
||||
class="px-5 py-1.5 rounded-full text-sm font-bold transition-all duration-300 ${isAdded ? styles.btnDisabled : styles.btnAdd}">
|
||||
${isAdded ? '已发送' : '添加'}
|
||||
</button>
|
||||
</div>`;
|
||||
}).join('');
|
||||
};
|
||||
|
||||
// --- 视图逻辑 ---
|
||||
|
||||
if (state.view === 'initial') {
|
||||
html = `
|
||||
<div class="fade-in-up duration-500">
|
||||
<!-- 扫一扫 -->
|
||||
<div class="w-full h-24 mb-6 rounded-[28px] flex items-center px-6 cursor-pointer transition-all duration-300 ring-1 ${styles.scanCard}">
|
||||
<div class="w-12 h-12 rounded-2xl flex items-center justify-center border mr-4 backdrop-blur-sm ${styles.scanIconBg}">
|
||||
<i data-lucide="scan-line" class="text-white w-6 h-6"></i>
|
||||
</div>
|
||||
<div class="flex-1 text-white">
|
||||
<h3 class="text-lg font-bold tracking-wide">扫一扫</h3>
|
||||
<p class="text-xs opacity-90 font-medium">扫描二维码名片</p>
|
||||
</div>
|
||||
<div class="opacity-80">
|
||||
<i data-lucide="chevron-left" class="rotate-180 text-white w-5 h-5"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 推荐列表 -->
|
||||
<div class="mb-2 pl-1">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider mb-3 transition-colors ${styles.listTitle}">为您推荐</h3>
|
||||
</div>
|
||||
<div class="w-full space-y-3 pb-8 px-1">
|
||||
${generateUserList(MOCK_USERS)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (state.view === 'loading') {
|
||||
html = `
|
||||
<div class="mt-8 mx-2 rounded-[24px] p-8 min-h-[200px] flex flex-col items-center justify-center fade-in-up duration-300 border ${styles.loadingBg}">
|
||||
<div class="w-10 h-10 border-4 rounded-full animate-spin-custom mb-3 border-opacity-30 ${styles.loadingSpinner}"></div>
|
||||
<p class="text-sm font-medium ${styles.loadingText}">正在搜索...</p>
|
||||
</div>
|
||||
`;
|
||||
} else if (state.view === 'empty') {
|
||||
html = `
|
||||
<div class="mt-8 mx-2 rounded-[24px] p-8 min-h-[200px] flex flex-col items-center justify-center fade-in-up duration-300 border ${styles.loadingBg}">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center mb-3 ${isDark ? 'bg-warm-900' : 'bg-gray-50'}">
|
||||
<i data-lucide="search" class="w-6 h-6 text-gray-400"></i>
|
||||
</div>
|
||||
<p class="text-sm font-medium ${styles.loadingText}">未找到该用户</p>
|
||||
</div>
|
||||
`;
|
||||
} else if (state.view === 'results') {
|
||||
html = `
|
||||
<div class="mt-4 fade-in-up duration-500">
|
||||
<div class="mb-2 pl-1">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider mb-3 ${styles.listTitle}">搜索结果</h3>
|
||||
</div>
|
||||
<div class="w-full space-y-3 pb-8 px-1">
|
||||
${generateUserList(MOCK_USERS.slice(0, 3), 1)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 更新 DOM
|
||||
els.contentArea.innerHTML = html;
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
350
UI设计/聊天列表.html
Normal file
350
UI设计/聊天列表.html
Normal file
@@ -0,0 +1,350 @@
|
||||
<!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>
|
||||
|
||||
<!-- 1. 引入 Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- 2. 引入 Lucide 图标库 -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
|
||||
<!-- 3. 配置 Tailwind 主题颜色 -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
// 暖色调暗黑颜色 (Stone/Warm)
|
||||
warm: {
|
||||
950: '#0c0a09', // 极深背景
|
||||
900: '#1c1917', // 手机背景
|
||||
800: '#292524', // 卡片/抽屉背景
|
||||
700: '#44403c', // 边框/分割线
|
||||
600: '#57534e', // 辅助图标
|
||||
500: '#78716c', // 文本
|
||||
200: '#e7e5e4', // 主要文字
|
||||
100: '#f5f5f4', // 亮色文字
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
.smooth-transition {
|
||||
transition-property: background-color, border-color, color, fill, stroke, transform, opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
/* 动画类 */
|
||||
.drawer-enter { transform: translateX(-100%); }
|
||||
.drawer-active { transform: translateX(0); }
|
||||
.mask-enter { opacity: 0; pointer-events: none; }
|
||||
.mask-active { opacity: 1; pointer-events: auto; }
|
||||
.menu-enter { opacity: 0; transform: scale(0.95) translateY(-10px); pointer-events: none; }
|
||||
.menu-active { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
|
||||
</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 md:right-20 md:top-auto flex flex-col gap-2 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 hover:scale-110 active:scale-95 transition-all border border-gray-100 dark:border-warm-700 ring-1 ring-black/5 dark:ring-white/10" title="切换主题">
|
||||
<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">
|
||||
|
||||
<!-- ================= 抽屉 (Drawer) ================= -->
|
||||
<div id="drawer-mask" onclick="closeDrawer()" class="absolute inset-0 bg-black/20 z-40 backdrop-blur-[2px] smooth-transition mask-enter"></div>
|
||||
<div id="drawer-content" class="absolute top-0 left-0 w-[75%] h-full z-50 flex flex-col smooth-transition drawer-enter bg-white dark:bg-warm-900 shadow-2xl border-r border-gray-100 dark:border-warm-800">
|
||||
<div class="p-8 pt-16 border-b border-gray-100 dark:border-warm-800">
|
||||
<div class="w-16 h-16 rounded-full border border-gray-200 dark:border-warm-700 overflow-hidden mb-4 shadow-sm">
|
||||
<img id="drawer-avatar" src="" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div id="drawer-name" class="text-xl font-bold text-gray-900 dark:text-warm-100"></div>
|
||||
<div id="drawer-bio" class="text-sm text-gray-500 dark:text-warm-400 mt-1"></div>
|
||||
</div>
|
||||
<div class="flex-1 p-4 space-y-1">
|
||||
<div class="p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-warm-800 flex items-center gap-3 cursor-pointer smooth-transition">
|
||||
<i data-lucide="user" class="w-5 h-5 text-gray-500 dark:text-warm-400"></i>
|
||||
<span class="text-sm text-gray-700 dark:text-warm-200">个人资料</span>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-warm-800 flex items-center gap-3 cursor-pointer smooth-transition">
|
||||
<i data-lucide="settings" class="w-5 h-5 text-gray-500 dark:text-warm-400"></i>
|
||||
<span class="text-sm text-gray-700 dark:text-warm-200">设置</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<button class="w-full py-2.5 rounded-lg bg-red-50 dark:bg-warm-800 text-red-500 text-sm font-medium hover:bg-red-100 dark:hover:bg-warm-700 transition-colors">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= 加号菜单 (已修复: 加回了添加好友) ================= -->
|
||||
<div id="plus-menu" class="absolute top-[90px] right-4 w-36 bg-white dark:bg-warm-800 rounded-xl shadow-xl z-30 transform origin-top-right transition-all duration-200 menu-enter ring-1 ring-black/5 dark:ring-white/10 overflow-hidden">
|
||||
<!-- 1. 创建群聊 -->
|
||||
<div class="flex items-center gap-3 p-3.5 hover:bg-gray-50 dark:hover:bg-warm-700 cursor-pointer border-b border-gray-50 dark:border-warm-700">
|
||||
<i data-lucide="message-square-plus" class="w-4 h-4 text-gray-600 dark:text-warm-200"></i>
|
||||
<span class="text-xs text-gray-700 dark:text-warm-200">创建群聊</span>
|
||||
</div>
|
||||
<!-- 2. 添加好友 (已恢复) -->
|
||||
<div class="flex items-center gap-3 p-3.5 hover:bg-gray-50 dark:hover:bg-warm-700 cursor-pointer border-b border-gray-50 dark:border-warm-700">
|
||||
<i data-lucide="user-plus" class="w-4 h-4 text-gray-600 dark:text-warm-200"></i>
|
||||
<span class="text-xs text-gray-700 dark:text-warm-200">添加好友</span>
|
||||
</div>
|
||||
<!-- 3. 扫一扫 -->
|
||||
<div class="flex items-center gap-3 p-3.5 hover:bg-gray-50 dark:hover:bg-warm-700 cursor-pointer">
|
||||
<i data-lucide="scan-line" class="w-4 h-4 text-gray-600 dark:text-warm-200"></i>
|
||||
<span class="text-xs text-gray-700 dark:text-warm-200">扫一扫</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= 顶部区域 (Header) - 极简风 ================= -->
|
||||
<div class="px-5 pt-12 pb-2 bg-white dark:bg-warm-900 smooth-transition z-10 shrink-0 border-b border-transparent dark:border-warm-800/50">
|
||||
|
||||
<!-- Navbar: 头像 + 标题 + 按钮 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3 active:opacity-70 transition-opacity" onclick="openDrawer()">
|
||||
<div class="relative">
|
||||
<img id="nav-avatar" src="" class="w-9 h-9 rounded-lg object-cover bg-gray-100 dark:bg-warm-800 cursor-pointer ring-1 ring-black/5 dark:ring-white/10">
|
||||
<div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-warm-900"></div>
|
||||
</div>
|
||||
<span id="nav-name" class="text-xl font-bold text-gray-900 dark:text-warm-100 tracking-tight"></span>
|
||||
</div>
|
||||
|
||||
<button onclick="togglePlusMenu()" class="w-9 h-9 rounded-full bg-gray-50 dark:bg-warm-800 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-warm-700 active:scale-95 transition-all text-gray-600 dark:text-warm-200">
|
||||
<i data-lucide="plus" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar: 扁平化设计 -->
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="w-4 h-4 text-gray-400 dark:text-warm-500 group-focus-within:text-indigo-500 dark:group-focus-within:text-orange-500 transition-colors"></i>
|
||||
</div>
|
||||
<input type="text" id="search-input"
|
||||
placeholder="搜索"
|
||||
class="w-full h-10 bg-gray-100 dark:bg-warm-800 text-gray-900 dark:text-warm-100 rounded-xl pl-9 pr-4 text-[15px] outline-none focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-orange-500/20 transition-all placeholder-gray-400 dark:placeholder-warm-600">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ================= 会话列表 (紧贴头部) ================= -->
|
||||
<div id="list-container" class="flex-1 overflow-y-auto custom-scrollbar bg-white dark:bg-warm-900 relative z-0">
|
||||
<!-- 列表内容由 JS 渲染 -->
|
||||
</div>
|
||||
|
||||
<!-- ================= 底部 Tab Bar ================= -->
|
||||
<div id="tab-bar" class="shrink-0 h-[84px] bg-white dark:bg-warm-900 border-t border-gray-100 dark:border-warm-800 flex items-center justify-around pb-6 smooth-transition z-20">
|
||||
<div class="flex flex-col items-center gap-1 text-indigo-600 dark:text-orange-500 cursor-pointer">
|
||||
<i data-lucide="message-circle" class="w-6 h-6 fill-current"></i>
|
||||
<span class="text-[10px] font-bold">消息</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500 hover:text-gray-900 dark:hover:text-warm-200 cursor-pointer transition-colors">
|
||||
<i data-lucide="users" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-medium">联系人</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500 hover:text-gray-900 dark:hover:text-warm-200 cursor-pointer transition-colors">
|
||||
<i data-lucide="compass" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-medium">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500 hover:text-gray-900 dark:hover:text-warm-200 cursor-pointer transition-colors">
|
||||
<i data-lucide="user" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 逻辑脚本 -->
|
||||
<script>
|
||||
// --- 模拟数据 ---
|
||||
const currentUser = {
|
||||
name: 'Kimi',
|
||||
avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=150&q=80',
|
||||
desc: 'Stay hungry, stay foolish.'
|
||||
};
|
||||
|
||||
const conversations = [
|
||||
{ id: 1, name: '产品讨论组', avatar: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=150&q=80', last_message: '王经理: 下周一要上线的新功能...', time: '10:45', unread: 3, is_top: true, is_group: true, is_muted: false },
|
||||
{ id: 2, name: '林希', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&q=80', last_message: '[图片] 周末去爬山吗？', time: '09:20', unread: 1, is_top: false, is_special_care: true, is_muted: false },
|
||||
{ id: 3, name: '技术交流群', avatar: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=150&q=80', last_message: 'Vue3 的这个新特性确实不错', time: '昨天', unread: 0, is_top: false, is_group: true, is_muted: true },
|
||||
{ id: 4, name: '陈晨', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80', last_message: '好的，没问题', time: '昨天', unread: 0, is_top: false, is_special_care: false, is_muted: false },
|
||||
{ id: 5, name: '韦雁', avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?auto=format&fit=crop&w=150&q=80', last_message: '文件已发送，请查收', time: '星期二', unread: 0, is_top: false, is_special_care: false, is_muted: false },
|
||||
{ id: 6, name: '家庭群', avatar: 'https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=150&q=80', last_message: '妈: 晚上回来吃饭吗？', time: '星期二', unread: 0, is_top: true, is_group: true, is_muted: false },
|
||||
{ id: 7, name: '订阅号消息', avatar: 'https://images.unsplash.com/photo-1560472355-536de3962603?auto=format&fit=crop&w=150&q=80', last_message: '早报：科技圈大事件汇总', time: '星期一', unread: 12, is_top: false, is_group: false, is_muted: true },
|
||||
{ id: 8, name: '文件传输助手', avatar: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=150&q=80', last_message: '[文件] data.xls', time: '星期一', unread: 0, is_top: false, is_group: false, is_muted: false },
|
||||
{ id: 9, name: '张三', avatar: 'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&w=150&q=80', last_message: '哈哈哈哈', time: '上周', unread: 0, is_top: false, is_group: false, is_muted: false },
|
||||
];
|
||||
|
||||
// --- 状态管理 ---
|
||||
let isDarkMode = false;
|
||||
let searchQuery = '';
|
||||
|
||||
// --- DOM ---
|
||||
const els = {
|
||||
body: document.getElementById('body-bg'),
|
||||
phone: document.getElementById('phone-container'),
|
||||
searchInput: document.getElementById('search-input'),
|
||||
listContainer: document.getElementById('list-container'),
|
||||
drawerContent: document.getElementById('drawer-content'),
|
||||
drawerMask: document.getElementById('drawer-mask'),
|
||||
plusMenu: document.getElementById('plus-menu'),
|
||||
navAvatar: document.getElementById('nav-avatar'),
|
||||
navName: document.getElementById('nav-name'),
|
||||
drawerAvatar: document.getElementById('drawer-avatar'),
|
||||
drawerName: document.getElementById('drawer-name'),
|
||||
drawerBio: document.getElementById('drawer-bio'),
|
||||
};
|
||||
|
||||
// --- 初始化 ---
|
||||
window.onload = () => {
|
||||
initUser();
|
||||
renderList();
|
||||
lucide.createIcons();
|
||||
|
||||
// 搜索监听
|
||||
els.searchInput.addEventListener('input', (e) => {
|
||||
searchQuery = e.target.value;
|
||||
renderList();
|
||||
});
|
||||
|
||||
// 点击外部关闭菜单
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('#plus-menu') && !e.target.closest('[onclick="togglePlusMenu()"]')) {
|
||||
els.plusMenu.classList.remove('menu-active');
|
||||
els.plusMenu.classList.add('menu-enter');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function initUser() {
|
||||
els.navAvatar.src = currentUser.avatar;
|
||||
els.navName.textContent = '消息';
|
||||
els.drawerAvatar.src = currentUser.avatar;
|
||||
els.drawerName.textContent = currentUser.name;
|
||||
els.drawerBio.textContent = currentUser.desc;
|
||||
}
|
||||
|
||||
// --- 核心渲染：会话列表 ---
|
||||
function renderList() {
|
||||
const filtered = conversations.filter(c => c.name.includes(searchQuery));
|
||||
// 排序：置顶优先
|
||||
filtered.sort((a, b) => (b.is_top ? 1 : 0) - (a.is_top ? 1 : 0));
|
||||
|
||||
let html = '';
|
||||
|
||||
if (filtered.length === 0) {
|
||||
html = `
|
||||
<div class="flex flex-col items-center justify-center pt-20 opacity-50">
|
||||
<i data-lucide="message-square-off" class="w-12 h-12 text-gray-400 dark:text-warm-600 mb-2"></i>
|
||||
<span class="text-sm text-gray-400 dark:text-warm-400">暂无相关消息</span>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
html = filtered.map((item, index) => {
|
||||
const isMuted = item.is_muted;
|
||||
const showBadge = !isMuted && item.unread > 0;
|
||||
const showRedDot = isMuted && item.unread > 0;
|
||||
|
||||
return `
|
||||
<div class="group relative px-5 py-3.5 flex items-center gap-3 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer ${item.is_top ? 'bg-gray-50/70 dark:bg-warm-800/30' : ''}"
|
||||
style="animation: fadeInUp 0.4s ease-out forwards; animation-delay: ${index * 30}ms; opacity: 0; transform: translateY(10px);">
|
||||
|
||||
<!-- Avatar -->
|
||||
<div class="relative shrink-0">
|
||||
<img src="${item.avatar}" class="w-[50px] h-[50px] rounded-[10px] object-cover bg-gray-200 dark:bg-warm-700 shadow-sm">
|
||||
${showBadge ? `<div class="absolute -top-1.5 -right-1.5 min-w-[16px] h-[16px] px-1 bg-red-500 rounded-full flex items-center justify-center text-[10px] text-white font-bold ring-2 ring-white dark:ring-warm-900">${item.unread}</div>` : ''}
|
||||
${showRedDot ? `<div class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full ring-2 ring-white dark:ring-warm-900"></div>` : ''}
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1 min-w-0 border-b border-gray-50 dark:border-warm-800/50 pb-3.5 ml-1 group-last:border-0">
|
||||
<div class="flex items-center justify-between mb-0.5">
|
||||
<span class="text-[16px] font-medium text-gray-900 dark:text-warm-100 truncate ${item.is_special_care ? 'text-pink-500 dark:text-pink-400' : ''}">${item.name}</span>
|
||||
<span class="text-[11px] text-gray-400 dark:text-warm-500 font-normal tracking-tight">${item.time}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[13px] text-gray-500 dark:text-warm-400 truncate pr-4 w-[200px]">${item.last_message}</span>
|
||||
${item.is_muted ? `<i data-lucide="bell-off" class="w-3.5 h-3.5 text-gray-300 dark:text-warm-600"></i>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}).join('');
|
||||
}
|
||||
|
||||
els.listContainer.innerHTML = html;
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// --- 交互逻辑 ---
|
||||
|
||||
function openDrawer() {
|
||||
els.drawerMask.classList.add('mask-active');
|
||||
els.drawerMask.classList.remove('mask-enter');
|
||||
els.drawerContent.classList.add('drawer-active');
|
||||
els.drawerContent.classList.remove('drawer-enter');
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
els.drawerMask.classList.remove('mask-active');
|
||||
els.drawerMask.classList.add('mask-enter');
|
||||
els.drawerContent.classList.remove('drawer-active');
|
||||
els.drawerContent.classList.add('drawer-enter');
|
||||
}
|
||||
|
||||
function togglePlusMenu() {
|
||||
if (els.plusMenu.classList.contains('menu-active')) {
|
||||
els.plusMenu.classList.remove('menu-active');
|
||||
els.plusMenu.classList.add('menu-enter');
|
||||
} else {
|
||||
els.plusMenu.classList.remove('menu-enter');
|
||||
els.plusMenu.classList.add('menu-active');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
isDarkMode = !isDarkMode;
|
||||
const html = document.documentElement;
|
||||
|
||||
if (isDarkMode) {
|
||||
html.classList.add('dark');
|
||||
els.body.className = "bg-[#0c0a09] flex items-center justify-center min-h-screen font-sans p-4 transition-colors duration-500 overflow-hidden relative";
|
||||
els.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-900 border-warm-800 ring-white/10 shadow-black/50";
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
els.body.className = "bg-gray-100 flex items-center justify-center min-h-screen font-sans p-4 transition-colors duration-500 overflow-hidden relative";
|
||||
els.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-white border-white ring-black/5";
|
||||
}
|
||||
setTimeout(() => lucide.createIcons(), 50);
|
||||
}
|
||||
|
||||
const styleSheet = document.createElement("style");
|
||||
styleSheet.innerText = `
|
||||
@keyframes fadeInUp {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleSheet);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
331
UI设计/聊天页面.html
Normal file
331
UI设计/聊天页面.html
Normal file
@@ -0,0 +1,331 @@
|
||||
<!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',
|
||||
850: '#262626', // 新增：用于提升层级
|
||||
800: '#292524',
|
||||
700: '#44403c',
|
||||
200: '#e7e5e4',
|
||||
100: '#f5f5f4'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.custom-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
|
||||
/* 气泡样式优化 */
|
||||
.bubble-self {
|
||||
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
|
||||
color: white;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
.bubble-other {
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
border-bottom-left-radius: 4px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
.dark .bubble-other {
|
||||
background: #262626; /* Warm 850 */
|
||||
color: #e7e5e4;
|
||||
border: 1px solid #44403c; /* Warm 700 */
|
||||
}
|
||||
|
||||
/* 语音播放动画 */
|
||||
.wave-bar {
|
||||
background-color: currentColor;
|
||||
border-radius: 99px;
|
||||
animation: none;
|
||||
}
|
||||
.playing .wave-bar {
|
||||
animation: wave 0.8s infinite ease-in-out;
|
||||
}
|
||||
.playing .wave-bar:nth-child(1) { animation-delay: 0.0s; }
|
||||
.playing .wave-bar:nth-child(2) { animation-delay: 0.1s; }
|
||||
.playing .wave-bar:nth-child(3) { animation-delay: 0.2s; }
|
||||
.playing .wave-bar:nth-child(4) { animation-delay: 0.3s; }
|
||||
|
||||
@keyframes wave {
|
||||
0%, 100% { height: 4px; }
|
||||
50% { height: 16px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#F5F7FA] flex items-center justify-center min-h-screen font-sans transition-colors duration-500 overflow-hidden relative" id="body-bg">
|
||||
|
||||
<!-- 顶部控制区 -->
|
||||
<div class="absolute right-6 top-6 z-50 flex flex-col gap-2">
|
||||
<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 hover:scale-105 active:scale-95">
|
||||
<i data-lucide="sun" class="block dark:hidden w-5 h-5"></i>
|
||||
<i data-lucide="moon" class="hidden dark:block w-5 h-5"></i>
|
||||
</button>
|
||||
<!-- 切换群聊/单聊 -->
|
||||
<button onclick="toggleChatMode()" class="w-12 h-12 bg-indigo-500 text-white rounded-full shadow-lg flex items-center justify-center font-bold text-xs border border-white/20 hover:bg-indigo-600 active:scale-95" title="切换模式">
|
||||
<span id="mode-text">Group</span>
|
||||
</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">
|
||||
|
||||
<!-- 1. 沉浸式导航栏 -->
|
||||
<div class="absolute top-0 w-full z-20 px-4 pt-12 pb-3 flex items-center justify-between bg-white/90 dark:bg-warm-900/90 backdrop-blur-md border-b border-gray-100 dark:border-warm-800 transition-all duration-300">
|
||||
<div class="flex items-center gap-1 cursor-pointer active:opacity-60" onclick="history.back()">
|
||||
<i data-lucide="chevron-left" class="w-7 h-7 text-gray-800 dark:text-warm-100"></i>
|
||||
<div class="flex flex-col">
|
||||
<span id="chat-title" class="text-[17px] font-bold text-gray-900 dark:text-warm-100 leading-tight transition-colors">林希</span>
|
||||
<div id="chat-status" class="flex items-center gap-1 transition-opacity duration-300">
|
||||
<div class="w-1.5 h-1.5 bg-green-500 rounded-full"></div>
|
||||
<span class="text-[10px] text-gray-400 dark:text-warm-400 font-medium">手机在线</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-5 pr-2">
|
||||
<i data-lucide="phone" class="w-6 h-6 text-gray-600 dark:text-warm-400 hover:text-indigo-600 dark:hover:text-orange-400 transition-colors cursor-pointer"></i>
|
||||
<i data-lucide="video" class="w-6 h-6 text-gray-600 dark:text-warm-400 hover:text-indigo-600 dark:hover:text-orange-400 transition-colors cursor-pointer"></i>
|
||||
<i data-lucide="more-horizontal" class="w-6 h-6 text-gray-600 dark:text-warm-400 cursor-pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 消息列表容器 -->
|
||||
<div id="chat-area" class="flex-1 bg-[#F5F7FA] dark:bg-[#121212] overflow-y-auto custom-scrollbar px-4 pt-28 pb-24 space-y-6 transition-colors duration-300">
|
||||
<!-- 动态内容由 JS 渲染 -->
|
||||
</div>
|
||||
|
||||
<!-- 3. 底部输入栏 -->
|
||||
<div class="absolute bottom-0 w-full bg-white dark:bg-warm-900 px-4 py-3 pb-8 border-t border-gray-100 dark:border-warm-800 flex items-end gap-3 transition-colors duration-300 z-20">
|
||||
<i data-lucide="mic" class="w-7 h-7 text-gray-500 dark:text-warm-400 mb-2 cursor-pointer hover:text-indigo-600 dark:hover:text-orange-400 transition-colors"></i>
|
||||
<div class="flex-1 bg-gray-100 dark:bg-warm-800 rounded-2xl px-4 py-2.5 min-h-[44px] border border-transparent dark:border-warm-700 transition-colors">
|
||||
<textarea placeholder="发送消息..." class="w-full bg-transparent outline-none text-sm text-gray-800 dark:text-warm-100 resize-none h-5 placeholder-gray-400 dark:placeholder-warm-500" rows="1"></textarea>
|
||||
</div>
|
||||
<i data-lucide="smile" class="w-7 h-7 text-gray-500 dark:text-warm-400 mb-2 cursor-pointer hover:text-indigo-600 dark:hover:text-orange-400 transition-colors"></i>
|
||||
<i data-lucide="plus-circle" class="w-7 h-7 text-gray-500 dark:text-warm-400 mb-2 cursor-pointer hover:text-indigo-600 dark:hover:text-orange-400 transition-colors"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- 数据配置 ---
|
||||
// 模拟用户数据
|
||||
const users = {
|
||||
me: { id: 'me', name: 'Kimi', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100' },
|
||||
linxi: { id: 'u1', name: '林希', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100' },
|
||||
weiyan: { id: 'u2', name: '韦雁', avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=100' },
|
||||
chenchen: { id: 'u3', name: '陈晨', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100' }
|
||||
};
|
||||
|
||||
// 单聊消息数据 (只有林希和自己)
|
||||
const p2pMessages = [
|
||||
{ type: 'time', content: '10:45' },
|
||||
{ type: 'text', from: 'linxi', content: '周末去爬山吗？我发现一个很棒的地方 🏔️' },
|
||||
{ type: 'text', from: 'me', content: '好啊！正好想出去透透气。具体在哪里？' },
|
||||
{ type: 'image', from: 'linxi', content: 'https://images.unsplash.com/photo-1551632811-561732d1e306?w=400' },
|
||||
{ type: 'audio', from: 'linxi', duration: 12 },
|
||||
{ type: 'file', from: 'linxi', fileName: '登山路线图.pdf', size: '2.4 MB' }
|
||||
];
|
||||
|
||||
// 群聊消息数据 (林希、韦雁、陈晨、自己)
|
||||
const groupMessages = [
|
||||
{ type: 'time', content: '11:20' },
|
||||
{ type: 'text', from: 'weiyan', content: '@所有人 本周五下午3点开会，请大家准时参加。' },
|
||||
{ type: 'text', from: 'chenchen', content: '收到，需要准备什么资料吗？' },
|
||||
{ type: 'video', from: 'linxi', cover: 'https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=400', duration: '00:15' },
|
||||
{ type: 'text', from: 'me', content: '好的，我会准时到。' },
|
||||
{ type: 'file', from: 'weiyan', fileName: '会议议程_v1.docx', size: '18 KB' }
|
||||
];
|
||||
|
||||
let isDarkMode = false;
|
||||
let isGroupMode = false;
|
||||
let playingAudioEl = null;
|
||||
|
||||
// --- 核心渲染逻辑 ---
|
||||
function renderMessages(data) {
|
||||
const container = document.getElementById('chat-area');
|
||||
let html = '';
|
||||
|
||||
data.forEach(msg => {
|
||||
if (msg.type === 'time') {
|
||||
html += `
|
||||
<div class="flex justify-center">
|
||||
<span class="text-xs text-gray-400 dark:text-warm-600 bg-gray-100 dark:bg-warm-800/50 px-2 py-1 rounded transition-colors">${msg.content}</span>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const isMe = msg.from === 'me';
|
||||
const user = users[msg.from];
|
||||
const alignClass = isMe ? 'flex-row-reverse' : '';
|
||||
const bubbleClass = isMe ? 'bubble-self' : 'bubble-other';
|
||||
|
||||
// 群聊显示昵称
|
||||
const nameHtml = (isGroupMode && !isMe)
|
||||
? `<span class="text-[10px] text-gray-400 dark:text-warm-500 mb-1 ml-1">${user.name}</span>`
|
||||
: '';
|
||||
|
||||
// 内容渲染
|
||||
let contentHtml = '';
|
||||
|
||||
// 1. 文本
|
||||
if (msg.type === 'text') {
|
||||
contentHtml = `<div class="${bubbleClass} p-3 rounded-2xl shadow-sm max-w-full text-[15px] leading-relaxed break-words border-transparent transition-colors">${msg.content}</div>`;
|
||||
}
|
||||
// 2. 图片
|
||||
else if (msg.type === 'image') {
|
||||
contentHtml = `<img src="${msg.content}" class="rounded-2xl shadow-sm border border-gray-100 dark:border-warm-700 w-48 bg-gray-200 dark:bg-warm-800 transition-colors">`;
|
||||
}
|
||||
// 3. 语音 (新增交互)
|
||||
else if (msg.type === 'audio') {
|
||||
const iconColor = isMe ? 'text-white/80' : 'text-gray-500 dark:text-warm-400';
|
||||
contentHtml = `
|
||||
<div onclick="playAudio(this)" class="${bubbleClass} p-3 rounded-2xl shadow-sm flex items-center gap-3 min-w-[100px] cursor-pointer active:opacity-80 transition-opacity border-transparent">
|
||||
<i data-lucide="rss" class="w-4 h-4 rotate-45 ${iconColor}"></i>
|
||||
<div class="flex items-end gap-1 h-3 visualizer">
|
||||
<div class="w-1 h-1 wave-bar ${isMe?'bg-white':'bg-gray-500 dark:bg-warm-400'}"></div>
|
||||
<div class="w-1 h-2 wave-bar ${isMe?'bg-white':'bg-gray-500 dark:bg-warm-400'}"></div>
|
||||
<div class="w-1 h-3 wave-bar ${isMe?'bg-white':'bg-gray-500 dark:bg-warm-400'}"></div>
|
||||
<div class="w-1 h-2 wave-bar ${isMe?'bg-white':'bg-gray-500 dark:bg-warm-400'}"></div>
|
||||
</div>
|
||||
<span class="text-sm font-medium ml-auto">${msg.duration}"</span>
|
||||
</div>`;
|
||||
}
|
||||
// 4. 视频
|
||||
else if (msg.type === 'video') {
|
||||
contentHtml = `
|
||||
<div class="relative rounded-2xl overflow-hidden shadow-sm border border-gray-100 dark:border-warm-700 group cursor-pointer w-48 aspect-video bg-black transition-colors">
|
||||
<img src="${msg.cover}" class="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/30">
|
||||
<i data-lucide="play" class="w-4 h-4 text-white fill-current ml-0.5"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="absolute bottom-2 right-2 text-[10px] text-white font-medium bg-black/50 px-1.5 py-0.5 rounded backdrop-blur-sm">${msg.duration}</span>
|
||||
</div>`;
|
||||
}
|
||||
// 5. 文件
|
||||
else if (msg.type === 'file') {
|
||||
const iconBg = isMe ? 'bg-white/20 text-white' : 'bg-orange-100 dark:bg-orange-900/30 text-orange-500';
|
||||
const textColor = isMe ? 'text-white' : 'text-gray-900 dark:text-warm-100';
|
||||
const subColor = isMe ? 'text-white/70' : 'text-gray-400 dark:text-warm-500';
|
||||
|
||||
contentHtml = `
|
||||
<div class="${bubbleClass} p-3 rounded-2xl shadow-md flex items-center gap-3 pr-4 border-transparent transition-colors min-w-[220px]">
|
||||
<div class="w-10 h-10 ${iconBg} rounded-lg flex items-center justify-center shrink-0">
|
||||
<i data-lucide="file-text" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<span class="text-sm font-medium truncate ${textColor}">${msg.fileName}</span>
|
||||
<span class="text-[10px] ${subColor}">${msg.size}</span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
html += `
|
||||
<div class="flex gap-3 msg-row ${alignClass}">
|
||||
<img src="${user.avatar}" class="w-10 h-10 rounded-xl object-cover shrink-0 bg-gray-200 dark:bg-warm-800">
|
||||
<div class="flex flex-col ${isMe ? 'items-end' : ''} max-w-[75%]">
|
||||
${nameHtml}
|
||||
${contentHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
lucide.createIcons();
|
||||
|
||||
// 自动滚动到底部
|
||||
setTimeout(() => container.scrollTop = container.scrollHeight, 100);
|
||||
}
|
||||
|
||||
// --- 交互功能 ---
|
||||
|
||||
function playAudio(el) {
|
||||
// 停止上一个播放
|
||||
if (playingAudioEl) {
|
||||
playingAudioEl.classList.remove('playing');
|
||||
}
|
||||
|
||||
// 如果是点击同一个，则停止
|
||||
if (playingAudioEl === el) {
|
||||
playingAudioEl = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// 开始播放新动画
|
||||
el.classList.add('playing');
|
||||
playingAudioEl = el;
|
||||
|
||||
// 模拟播放结束后停止 (3秒)
|
||||
setTimeout(() => {
|
||||
if (playingAudioEl === el) {
|
||||
el.classList.remove('playing');
|
||||
playingAudioEl = null;
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
isDarkMode = !isDarkMode;
|
||||
const html = document.documentElement;
|
||||
const body = document.getElementById('body-bg');
|
||||
const phone = document.getElementById('phone-container');
|
||||
|
||||
if (isDarkMode) {
|
||||
html.classList.add('dark');
|
||||
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";
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
body.className = "bg-[#F5F7FA] 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-white border-white ring-black/5";
|
||||
}
|
||||
setTimeout(() => lucide.createIcons(), 50);
|
||||
}
|
||||
|
||||
function toggleChatMode() {
|
||||
isGroupMode = !isGroupMode;
|
||||
const modeText = document.getElementById('mode-text');
|
||||
const title = document.getElementById('chat-title');
|
||||
const status = document.getElementById('chat-status');
|
||||
|
||||
if (isGroupMode) {
|
||||
modeText.textContent = 'P2P';
|
||||
title.textContent = '产品讨论组 (12)';
|
||||
status.classList.add('opacity-0'); // 群聊不显示在线状态
|
||||
renderMessages(groupMessages);
|
||||
} else {
|
||||
modeText.textContent = 'Group';
|
||||
title.textContent = '林希';
|
||||
status.classList.remove('opacity-0'); // 单聊显示在线状态
|
||||
renderMessages(p2pMessages);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
window.onload = () => {
|
||||
renderMessages(p2pMessages);
|
||||
lucide.createIcons();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
166
UI设计/联系人资料.html
Normal file
166
UI设计/联系人资料.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!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: { colors: { warm: { 950: '#0c0a09', 900: '#1c1917', 800: '#292524', 200: '#e7e5e4' } } } } }
|
||||
</script>
|
||||
<style> .smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } </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 flex flex-col gap-2">
|
||||
<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 border border-gray-100 dark:border-warm-700">
|
||||
<i data-lucide="sun" class="block dark:hidden w-5 h-5"></i>
|
||||
<i data-lucide="moon" class="hidden dark:block w-5 h-5"></i>
|
||||
</button>
|
||||
<!-- 模拟状态切换 -->
|
||||
<button onclick="toggleFriendStatus()" class="w-12 h-12 bg-indigo-500 text-white rounded-full shadow-lg flex items-center justify-center font-bold text-xs border border-white/20" title="切换好友状态">
|
||||
Status
|
||||
</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">
|
||||
|
||||
<!-- 视差背景 -->
|
||||
<div class="absolute top-0 w-full h-[300px] overflow-hidden z-0">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400" class="w-full h-full object-cover blur-xl scale-110 opacity-70">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-white dark:to-[#0c0a09]"></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航 -->
|
||||
<div class="relative z-10 px-4 pt-12 pb-2 flex justify-between">
|
||||
<i data-lucide="chevron-left" class="w-7 h-7 text-gray-800 dark:text-warm-200 cursor-pointer" onclick="history.back()"></i>
|
||||
<i data-lucide="more-horizontal" class="w-6 h-6 text-gray-800 dark:text-warm-200"></i>
|
||||
</div>
|
||||
|
||||
<!-- 内容主体 -->
|
||||
<div class="relative z-10 px-6 pt-8 flex-1 overflow-y-auto">
|
||||
<!-- 身份卡片 -->
|
||||
<div class="flex flex-col items-center mb-8">
|
||||
<div class="w-32 h-32 rounded-full border-[6px] border-white dark:border-warm-800 shadow-xl overflow-hidden mb-4">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-warm-100 mb-1">林希</h2>
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="text-xs bg-gray-100 dark:bg-warm-800 text-gray-500 dark:text-warm-400 px-2 py-0.5 rounded">ID: 2023433</span>
|
||||
<span class="text-xs bg-gray-100 dark:bg-warm-800 text-gray-500 dark:text-warm-400 px-2 py-0.5 rounded">北京</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 text-center leading-relaxed max-w-[200px]">周末喜欢去爬山 🏔️ 热爱摄影和前端技术。</p>
|
||||
</div>
|
||||
|
||||
<!-- 好友状态显示的信息 -->
|
||||
<div id="friend-info" class="bg-white dark:bg-warm-900 rounded-2xl shadow-sm border border-gray-50 dark:border-warm-800/50 overflow-hidden mb-6 transition-all duration-300">
|
||||
<div class="flex items-center justify-between p-4 border-b border-gray-50 dark:border-warm-800/50 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-warm-200">设置备注</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-400">林希</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 border-b border-gray-50 dark:border-warm-800/50">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-warm-200">置顶聊天</span>
|
||||
<div class="w-10 h-6 bg-gray-200 dark:bg-warm-700 rounded-full relative cursor-pointer"><div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full shadow-sm"></div></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-warm-200">消息免打扰</span>
|
||||
<div class="w-10 h-6 bg-indigo-500 rounded-full relative cursor-pointer"><div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full shadow-sm"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 非好友状态显示的信息 (简介) -->
|
||||
<div id="stranger-info" class="hidden bg-white dark:bg-warm-900 rounded-2xl shadow-sm border border-gray-50 dark:border-warm-800/50 overflow-hidden mb-6 p-5">
|
||||
<h3 class="text-sm font-bold text-gray-900 dark:text-warm-100 mb-3">个人简介</h3>
|
||||
<div class="flex gap-2 mb-2">
|
||||
<span class="text-xs text-gray-400 w-12">来源</span>
|
||||
<span class="text-xs text-gray-700 dark:text-warm-300">通过群聊"技术交流群"添加</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-xs text-gray-400 w-12">签名</span>
|
||||
<span class="text-xs text-gray-700 dark:text-warm-300">Stay hungry, stay foolish.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部悬浮操作栏 -->
|
||||
<div class="bg-white dark:bg-warm-900 border-t border-gray-100 dark:border-warm-800 px-6 py-4 pb-8 rounded-t-[32px] shadow-[0_-10px_40px_rgba(0,0,0,0.05)] relative z-20">
|
||||
|
||||
<!-- 场景 A: 是好友 -->
|
||||
<div id="dock-friend" class="transition-all duration-300">
|
||||
<div class="flex gap-4 mb-4">
|
||||
<button class="flex-1 h-12 rounded-2xl bg-gray-100 dark:bg-warm-800 text-gray-800 dark:text-warm-200 font-medium flex items-center justify-center gap-2 hover:bg-gray-200 dark:hover:bg-warm-700 transition-colors">
|
||||
<i data-lucide="phone" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<button class="flex-[2] h-12 rounded-2xl bg-indigo-600 dark:bg-orange-600 text-white font-bold flex items-center justify-center gap-2 shadow-lg shadow-indigo-500/30 dark:shadow-orange-900/30 hover:opacity-90 active:scale-95 transition-all">
|
||||
<i data-lucide="message-circle" class="w-5 h-5"></i>
|
||||
<span>发消息</span>
|
||||
</button>
|
||||
<button class="flex-1 h-12 rounded-2xl bg-gray-100 dark:bg-warm-800 text-gray-800 dark:text-warm-200 font-medium flex items-center justify-center gap-2 hover:bg-gray-200 dark:hover:bg-warm-700 transition-colors">
|
||||
<i data-lucide="video" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<span class="text-xs text-gray-400 underline cursor-pointer hover:text-red-500">删除好友</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景 B: 非好友 -->
|
||||
<div id="dock-stranger" class="hidden transition-all duration-300">
|
||||
<button class="w-full h-12 rounded-2xl bg-indigo-600 dark:bg-orange-600 text-white font-bold flex items-center justify-center gap-2 shadow-lg shadow-indigo-500/30 dark:shadow-orange-900/30 hover:opacity-90 active:scale-95 transition-all" onclick="alert('发送好友请求')">
|
||||
<i data-lucide="user-plus" class="w-5 h-5"></i>
|
||||
<span>添加到通讯录</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
let isDarkMode = false;
|
||||
let isFriend = true; // 默认是好友
|
||||
|
||||
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";
|
||||
} 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 smooth-transition bg-white border-white ring-black/5";
|
||||
}
|
||||
setTimeout(() => lucide.createIcons(), 50);
|
||||
}
|
||||
|
||||
function toggleFriendStatus() {
|
||||
isFriend = !isFriend;
|
||||
const friendInfo = document.getElementById('friend-info');
|
||||
const strangerInfo = document.getElementById('stranger-info');
|
||||
const dockFriend = document.getElementById('dock-friend');
|
||||
const dockStranger = document.getElementById('dock-stranger');
|
||||
|
||||
if (isFriend) {
|
||||
// 显示好友界面
|
||||
friendInfo.classList.remove('hidden');
|
||||
strangerInfo.classList.add('hidden');
|
||||
dockFriend.classList.remove('hidden');
|
||||
dockStranger.classList.add('hidden');
|
||||
} else {
|
||||
// 显示陌生人界面
|
||||
friendInfo.classList.add('hidden');
|
||||
strangerInfo.classList.remove('hidden');
|
||||
dockFriend.classList.add('hidden');
|
||||
dockStranger.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = () => lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
447
UI设计/联系人页面.html
Normal file
447
UI设计/联系人页面.html
Normal file
@@ -0,0 +1,447 @@
|
||||
<!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', 600: '#57534e', 500: '#78716c',
|
||||
200: '#e7e5e4', 100: '#f5f5f4',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
|
||||
/* 抽屉 & 模态框动画 */
|
||||
.drawer-enter { transform: translateX(-100%); }
|
||||
.drawer-active { transform: translateX(0); }
|
||||
.mask-enter { opacity: 0; pointer-events: none; }
|
||||
.mask-active { opacity: 1; pointer-events: auto; }
|
||||
.modal-enter { opacity: 0; transform: scale(0.95); pointer-events: none; }
|
||||
.modal-active { opacity: 1; transform: scale(1); pointer-events: auto; }
|
||||
.bottom-sheet-enter { transform: translateY(100%); }
|
||||
.bottom-sheet-active { transform: translateY(0); }
|
||||
</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 md:right-20 md:top-auto flex flex-col gap-2 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 hover:scale-110 active:scale-95 transition-all border border-gray-100 dark:border-warm-700 ring-1 ring-black/5 dark:ring-white/10">
|
||||
<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">
|
||||
|
||||
<!-- ================= 抽屉 (Drawer) - 已同步 ================= -->
|
||||
<div id="drawer-mask" onclick="closeDrawer()" class="absolute inset-0 bg-black/20 z-40 backdrop-blur-[2px] smooth-transition mask-enter"></div>
|
||||
<div id="drawer-content" class="absolute top-0 left-0 w-[75%] h-full z-50 flex flex-col smooth-transition drawer-enter bg-white dark:bg-warm-900 shadow-2xl border-r border-gray-100 dark:border-warm-800">
|
||||
<!-- 头部信息 -->
|
||||
<div class="p-8 pt-16 border-b border-gray-100 dark:border-warm-800">
|
||||
<div class="w-16 h-16 rounded-full border border-gray-200 dark:border-warm-700 overflow-hidden mb-4 shadow-sm">
|
||||
<img id="drawer-avatar" src="" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div id="drawer-name" class="text-xl font-bold text-gray-900 dark:text-warm-100"></div>
|
||||
<div id="drawer-bio" class="text-sm text-gray-500 dark:text-warm-400 mt-1"></div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 (修复：添加了这部分) -->
|
||||
<div class="flex-1 p-4 space-y-1">
|
||||
<div class="p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-warm-800 flex items-center gap-3 cursor-pointer smooth-transition">
|
||||
<i data-lucide="user" class="w-5 h-5 text-gray-500 dark:text-warm-400"></i>
|
||||
<span class="text-sm text-gray-700 dark:text-warm-200">个人资料</span>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-warm-800 flex items-center gap-3 cursor-pointer smooth-transition">
|
||||
<i data-lucide="settings" class="w-5 h-5 text-gray-500 dark:text-warm-400"></i>
|
||||
<span class="text-sm text-gray-700 dark:text-warm-200">设置</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部退出 -->
|
||||
<div class="p-6">
|
||||
<button class="w-full py-2.5 rounded-lg bg-red-50 dark:bg-warm-800 text-red-500 text-sm font-medium hover:bg-red-100 dark:hover:bg-warm-700 transition-colors">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= 顶部 Header (含 Tab 切换) ================= -->
|
||||
<div class="bg-white dark:bg-warm-900 smooth-transition z-10 shrink-0 border-b border-gray-100 dark:border-warm-800 flex flex-col">
|
||||
|
||||
<!-- Row 1: Navbar -->
|
||||
<div class="px-5 pt-12 pb-2 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 active:opacity-70 transition-opacity" onclick="openDrawer()">
|
||||
<div class="relative">
|
||||
<img id="nav-avatar" src="" class="w-8 h-8 rounded-lg object-cover bg-gray-100 dark:bg-warm-800 ring-1 ring-black/5 dark:ring-white/10">
|
||||
<div class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white dark:border-warm-900"></div>
|
||||
</div>
|
||||
<span class="text-xl font-bold text-gray-900 dark:text-warm-100 tracking-tight">通讯录</span>
|
||||
</div>
|
||||
<!-- 添加好友按钮 -->
|
||||
<button onclick="alert('跳转添加好友页面')" class="w-8 h-8 rounded-full bg-gray-50 dark:bg-warm-800 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-warm-700 active:scale-95 transition-all text-gray-600 dark:text-warm-200">
|
||||
<i data-lucide="user-plus" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Search Bar -->
|
||||
<div class="px-5 pb-3">
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="w-4 h-4 text-gray-400 dark:text-warm-500"></i>
|
||||
</div>
|
||||
<input type="text" id="search-input" placeholder="搜索联系人/群聊" class="w-full h-9 bg-gray-100 dark:bg-warm-800 text-gray-900 dark:text-warm-100 rounded-lg pl-9 pr-4 text-sm outline-none focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-orange-500/20 transition-all placeholder-gray-400 dark:placeholder-warm-600">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 3: Segmented Control (Tabs) -->
|
||||
<div class="px-5 pb-3">
|
||||
<div class="flex p-1 bg-gray-100 dark:bg-warm-800 rounded-lg relative h-9">
|
||||
<!-- Tab Background Slider -->
|
||||
<div id="tab-slider" class="absolute top-1 bottom-1 w-[32%] bg-white dark:bg-warm-700 rounded-md shadow-sm transition-all duration-300 ease-out left-1"></div>
|
||||
|
||||
<button onclick="switchTab('groups')" class="flex-1 relative z-10 text-xs font-medium text-gray-600 dark:text-warm-200 transition-colors" id="tab-btn-groups">分组</button>
|
||||
<button onclick="switchTab('friends')" class="flex-1 relative z-10 text-xs font-medium text-gray-500 dark:text-warm-500 transition-colors" id="tab-btn-friends">好友</button>
|
||||
<button onclick="switchTab('chats')" class="flex-1 relative z-10 text-xs font-medium text-gray-500 dark:text-warm-500 transition-colors" id="tab-btn-chats">群聊</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= 内容区域 (Tabs Content) ================= -->
|
||||
<div id="content-area" class="flex-1 overflow-y-auto custom-scrollbar bg-white dark:bg-warm-900 relative z-0">
|
||||
<!-- 动态内容 -->
|
||||
</div>
|
||||
|
||||
<!-- ================= 索引条 (仅好友Tab显示) ================= -->
|
||||
<div id="index-bar" class="fixed right-[20px] top-[55%] -translate-y-1/2 bg-gray-100/80 dark:bg-warm-800/80 backdrop-blur-sm rounded-full py-2 px-1 z-20 hidden flex-col gap-1 shadow-sm border border-gray-100 dark:border-warm-700/50">
|
||||
<!-- 索引由JS生成 -->
|
||||
</div>
|
||||
|
||||
<!-- ================= 底部操作弹窗 (Action Sheet) ================= -->
|
||||
<div id="action-sheet-mask" onclick="closeActionSheet()" class="absolute inset-0 bg-black/20 z-40 backdrop-blur-[1px] mask-enter smooth-transition"></div>
|
||||
<div id="action-sheet" class="absolute bottom-0 left-0 w-full bg-white dark:bg-warm-900 rounded-t-2xl z-50 bottom-sheet-enter smooth-transition overflow-hidden shadow-[0_-4px_20px_rgba(0,0,0,0.1)]">
|
||||
<div class="p-4 border-b border-gray-100 dark:border-warm-800 text-center text-sm font-medium text-gray-500 dark:text-warm-400">操作</div>
|
||||
<div id="action-items">
|
||||
<!-- 动态生成 -->
|
||||
</div>
|
||||
<div class="h-2 bg-gray-50 dark:bg-warm-950"></div>
|
||||
<button onclick="closeActionSheet()" class="w-full py-3.5 text-base font-medium text-gray-800 dark:text-warm-200 active:bg-gray-50 dark:active:bg-warm-800">取消</button>
|
||||
</div>
|
||||
|
||||
<!-- ================= 底部 Tab Bar ================= -->
|
||||
<div class="shrink-0 h-[84px] bg-white dark:bg-warm-900 border-t border-gray-100 dark:border-warm-800 flex items-center justify-around pb-6 smooth-transition z-20">
|
||||
<div onclick="alert('跳转消息')" class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500 hover:text-gray-900 dark:hover:text-warm-200 cursor-pointer transition-colors">
|
||||
<i data-lucide="message-circle" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-medium">消息</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-indigo-600 dark:text-orange-500 cursor-pointer">
|
||||
<i data-lucide="users" class="w-6 h-6 fill-current"></i>
|
||||
<span class="text-[10px] font-bold">联系人</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500 hover:text-gray-900 dark:hover:text-warm-200 cursor-pointer transition-colors">
|
||||
<i data-lucide="compass" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-medium">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 text-gray-400 dark:text-warm-500 hover:text-gray-900 dark:hover:text-warm-200 cursor-pointer transition-colors">
|
||||
<i data-lucide="user" class="w-6 h-6"></i>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 逻辑脚本 -->
|
||||
<script>
|
||||
// --- 模拟数据 ---
|
||||
const currentUser = { name: 'Kimi', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150', desc: 'Stay hungry.' };
|
||||
|
||||
// 分组数据
|
||||
const groupsData = [
|
||||
{ id: 0, name: '未分组', count: 2, contacts: [
|
||||
{ id: 101, name: '张三', desc: '前端开发', avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=150' },
|
||||
{ id: 102, name: '李四', desc: 'UI设计', avatar: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?w=150' }
|
||||
]},
|
||||
{ id: 1, name: '特别关心', count: 1, contacts: [
|
||||
{ id: 103, name: '林希', desc: '周末爬山', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150' }
|
||||
]},
|
||||
{ id: 2, name: '同事', count: 3, contacts: [
|
||||
{ id: 104, name: '王经理', desc: '项目负责人', avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=150' },
|
||||
{ id: 105, name: '小赵', desc: '后端', avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=150' },
|
||||
{ id: 106, name: '老陈', desc: '运维', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150' }
|
||||
]}
|
||||
];
|
||||
|
||||
// 好友A-Z数据
|
||||
const friendsData = [
|
||||
{ letter: 'A', contacts: [{ name: 'Alan', avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=150' }] },
|
||||
{ letter: 'C', contacts: [{ name: '陈晨', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150' }] },
|
||||
{ letter: 'L', contacts: [{ name: '林希', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150' }, { name: '李四', avatar: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?w=150' }] },
|
||||
{ letter: 'W', contacts: [{ name: '王经理', avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=150' }, { name: '韦雁', avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150' }] },
|
||||
{ letter: 'Z', contacts: [{ name: '张三', avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=150' }] },
|
||||
];
|
||||
|
||||
// 群聊数据
|
||||
const chatsData = [
|
||||
{ id: 'c1', name: '我创建的群', count: 1, list: [{ name: '家庭群', avatar: 'https://images.unsplash.com/photo-1511895426328-dc8714191300?w=150' }] },
|
||||
{ id: 'c2', name: '我加入的群', count: 2, list: [{ name: '产品讨论组', avatar: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=150' }, { name: '技术交流', avatar: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=150' }] }
|
||||
];
|
||||
|
||||
let state = {
|
||||
activeTab: 'groups',
|
||||
collapsedIds: [0], // 默认收起ID为0的分组
|
||||
isDarkMode: false
|
||||
};
|
||||
|
||||
const els = {
|
||||
contentArea: document.getElementById('content-area'),
|
||||
tabSlider: document.getElementById('tab-slider'),
|
||||
indexBar: document.getElementById('index-bar'),
|
||||
actionSheet: document.getElementById('action-sheet'),
|
||||
actionSheetMask: document.getElementById('action-sheet-mask'),
|
||||
actionItems: document.getElementById('action-items')
|
||||
};
|
||||
|
||||
window.onload = () => {
|
||||
initUser();
|
||||
renderContent();
|
||||
initIndexBar();
|
||||
lucide.createIcons();
|
||||
};
|
||||
|
||||
function initUser() {
|
||||
document.getElementById('nav-avatar').src = currentUser.avatar;
|
||||
document.getElementById('drawer-avatar').src = currentUser.avatar;
|
||||
document.getElementById('drawer-name').textContent = currentUser.name;
|
||||
document.getElementById('drawer-bio').textContent = currentUser.desc;
|
||||
}
|
||||
|
||||
// --- 标签页切换 ---
|
||||
function switchTab(tab) {
|
||||
state.activeTab = tab;
|
||||
|
||||
// 更新 Slider 位置
|
||||
const positions = { 'groups': '1%', 'friends': '34%', 'chats': '67%' };
|
||||
els.tabSlider.style.left = positions[tab];
|
||||
|
||||
// 更新文字颜色
|
||||
['groups', 'friends', 'chats'].forEach(t => {
|
||||
const btn = document.getElementById(`tab-btn-${t}`);
|
||||
if (t === tab) {
|
||||
btn.classList.remove('text-gray-500', 'dark:text-warm-500');
|
||||
btn.classList.add('text-gray-900', 'dark:text-warm-100', 'font-bold');
|
||||
} else {
|
||||
btn.classList.remove('text-gray-900', 'dark:text-warm-100', 'font-bold');
|
||||
btn.classList.add('text-gray-500', 'dark:text-warm-500');
|
||||
}
|
||||
});
|
||||
|
||||
// 控制索引条显示
|
||||
els.indexBar.style.display = tab === 'friends' ? 'flex' : 'none';
|
||||
|
||||
renderContent();
|
||||
}
|
||||
|
||||
// --- 内容渲染 ---
|
||||
function renderContent() {
|
||||
let html = '';
|
||||
|
||||
if (state.activeTab === 'groups') {
|
||||
// 1. 功能卡片
|
||||
html += `
|
||||
<div class="grid grid-cols-2 gap-3 px-4 pt-4 mb-2">
|
||||
<div class="bg-white dark:bg-warm-800 p-3 rounded-2xl flex items-center gap-3 shadow-sm border border-gray-50 dark:border-warm-800/50 active:scale-95 transition-transform cursor-pointer">
|
||||
<div class="w-10 h-10 rounded-xl bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-500">
|
||||
<i data-lucide="user-plus" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-800 dark:text-warm-100">新朋友</span>
|
||||
<span class="text-[10px] text-red-500 font-medium">3位请求</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-warm-800 p-3 rounded-2xl flex items-center gap-3 shadow-sm border border-gray-50 dark:border-warm-800/50 active:scale-95 transition-transform cursor-pointer">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-500">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-800 dark:text-warm-100">群通知</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分组标题 -->
|
||||
<div class="px-5 py-3 flex justify-between items-center">
|
||||
<span class="text-sm font-bold text-gray-400 dark:text-warm-500 uppercase tracking-wider">我的分组</span>
|
||||
<button class="text-xs bg-indigo-50 dark:bg-warm-800 text-indigo-600 dark:text-orange-400 px-2 py-1 rounded-md font-medium">新建</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 2. 分组列表
|
||||
groupsData.forEach(g => {
|
||||
const isCollapsed = state.collapsedIds.includes(g.id);
|
||||
html += `
|
||||
<div class="mb-2 mx-4 bg-gray-50 dark:bg-warm-800/40 rounded-xl overflow-hidden border border-gray-100 dark:border-warm-800/50">
|
||||
<div onclick="toggleCollapse(${g.id})" class="p-3 flex items-center gap-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-warm-800/80 transition-colors">
|
||||
<i data-lucide="${isCollapsed ? 'chevron-right' : 'chevron-down'}" class="w-4 h-4 text-gray-400"></i>
|
||||
<span class="flex-1 text-sm font-bold text-gray-700 dark:text-warm-200">${g.name}</span>
|
||||
<span class="text-xs text-gray-400">${g.count}</span>
|
||||
</div>
|
||||
${!isCollapsed ? `
|
||||
<div class="pl-2">
|
||||
${g.contacts.map(c => renderContactCell(c, true)).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
} else if (state.activeTab === 'friends') {
|
||||
friendsData.forEach(group => {
|
||||
html += `
|
||||
<div id="anchor-${group.letter}" class="px-5 py-2 text-xs font-bold text-indigo-500 dark:text-orange-500 bg-gray-50/50 dark:bg-warm-900 sticky top-0 backdrop-blur-sm z-10">${group.letter}</div>
|
||||
<div class="px-4">
|
||||
${group.contacts.map(c => renderContactCell(c)).join('')}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
} else if (state.activeTab === 'chats') {
|
||||
chatsData.forEach(g => {
|
||||
const isCollapsed = state.collapsedIds.includes(g.id);
|
||||
html += `
|
||||
<div class="mb-3 mx-4 bg-gray-50 dark:bg-warm-800/40 rounded-xl overflow-hidden border border-gray-100 dark:border-warm-800/50">
|
||||
<div onclick="toggleCollapse('${g.id}')" class="p-4 flex items-center gap-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-warm-800/80 transition-colors">
|
||||
<i data-lucide="${isCollapsed ? 'chevron-right' : 'chevron-down'}" class="w-4 h-4 text-gray-400"></i>
|
||||
<span class="flex-1 text-sm font-bold text-gray-700 dark:text-warm-200">${g.name}</span>
|
||||
<span class="text-xs text-gray-400">${g.count}</span>
|
||||
</div>
|
||||
${!isCollapsed ? `
|
||||
<div class="pl-2">
|
||||
${g.list.map(c => renderContactCell(c, true)).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
// 底部安全距离
|
||||
html += '<div class="h-20"></div>';
|
||||
|
||||
els.contentArea.innerHTML = html;
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// 渲染单行联系人/群组
|
||||
function renderContactCell(c, isNested = false) {
|
||||
return `
|
||||
<div oncontextmenu="openActionSheet('${c.name}'); return false;" class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-warm-700/50 cursor-pointer transition-colors active:scale-[0.99]">
|
||||
<img src="${c.avatar}" class="w-10 h-10 rounded-lg bg-gray-200 dark:bg-warm-700 object-cover shadow-sm">
|
||||
<div class="flex-1 min-w-0 ${isNested ? '' : 'border-b border-gray-50 dark:border-warm-800/50 pb-3'}">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-warm-100">${c.name}</div>
|
||||
${c.desc ? `<div class="text-xs text-gray-400 dark:text-warm-500 truncate mt-0.5">${c.desc}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function toggleCollapse(id) {
|
||||
const idx = state.collapsedIds.indexOf(id);
|
||||
if (idx === -1) state.collapsedIds.push(id);
|
||||
else state.collapsedIds.splice(idx, 1);
|
||||
renderContent();
|
||||
}
|
||||
|
||||
// --- 索引条 ---
|
||||
function initIndexBar() {
|
||||
const letters = friendsData.map(d => d.letter);
|
||||
els.indexBar.innerHTML = letters.map(l =>
|
||||
`<div onclick="scrollToAnchor('${l}')" class="w-4 h-4 rounded-full flex items-center justify-center text-[10px] font-bold text-gray-500 dark:text-warm-400 cursor-pointer hover:bg-indigo-100 dark:hover:bg-orange-900 hover:text-indigo-600 dark:hover:text-orange-400">${l}</div>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
function scrollToAnchor(id) {
|
||||
const el = document.getElementById(`anchor-${id}`);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
// --- 底部操作菜单 ---
|
||||
function openActionSheet(name) {
|
||||
const items = [
|
||||
{ name: `修改 ${name} 的备注`, color: 'text-gray-800 dark:text-warm-200' },
|
||||
{ name: '移动到分组', color: 'text-gray-800 dark:text-warm-200' },
|
||||
{ name: '删除联系人', color: 'text-red-500' }
|
||||
];
|
||||
|
||||
els.actionItems.innerHTML = items.map(item => `
|
||||
<button class="w-full py-3.5 text-sm font-medium ${item.color} active:bg-gray-50 dark:active:bg-warm-800 border-b border-gray-50 dark:border-warm-800/50 last:border-0">
|
||||
${item.name}
|
||||
</button>
|
||||
`).join('');
|
||||
|
||||
els.actionSheetMask.classList.remove('mask-enter');
|
||||
els.actionSheetMask.classList.add('mask-active');
|
||||
els.actionSheet.classList.remove('bottom-sheet-enter');
|
||||
els.actionSheet.classList.add('bottom-sheet-active');
|
||||
}
|
||||
|
||||
function closeActionSheet() {
|
||||
els.actionSheetMask.classList.remove('mask-active');
|
||||
els.actionSheetMask.classList.add('mask-enter');
|
||||
els.actionSheet.classList.remove('bottom-sheet-active');
|
||||
els.actionSheet.classList.add('bottom-sheet-enter');
|
||||
}
|
||||
|
||||
// --- 主题切换 ---
|
||||
function toggleTheme() {
|
||||
state.isDarkMode = !state.isDarkMode;
|
||||
const html = document.documentElement;
|
||||
const body = document.getElementById('body-bg');
|
||||
const phone = document.getElementById('phone-container');
|
||||
|
||||
if (state.isDarkMode) {
|
||||
html.classList.add('dark');
|
||||
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-900 border-warm-800 ring-white/10 shadow-black/50";
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
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 smooth-transition bg-white border-white ring-black/5";
|
||||
}
|
||||
renderContent(); // Re-render to update dynamic classes
|
||||
}
|
||||
|
||||
// 抽屉逻辑 (同之前)
|
||||
function openDrawer() {
|
||||
document.getElementById('drawer-mask').classList.remove('mask-enter');
|
||||
document.getElementById('drawer-mask').classList.add('mask-active');
|
||||
document.getElementById('drawer-content').classList.remove('drawer-enter');
|
||||
document.getElementById('drawer-content').classList.add('drawer-active');
|
||||
}
|
||||
function closeDrawer() {
|
||||
document.getElementById('drawer-mask').classList.remove('mask-active');
|
||||
document.getElementById('drawer-mask').classList.add('mask-enter');
|
||||
document.getElementById('drawer-content').classList.remove('drawer-active');
|
||||
document.getElementById('drawer-content').classList.add('drawer-enter');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
122
UI设计/设置.html
Normal file
122
UI设计/设置.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!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: { 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); } </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 border border-gray-100 dark:border-warm-700">
|
||||
<i data-lucide="sun" class="block dark:hidden w-5 h-5"></i>
|
||||
<i data-lucide="moon" class="hidden dark:block w-5 h-5"></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 px-4 pb-8 space-y-6">
|
||||
|
||||
<!-- 分组 1: 账号 -->
|
||||
<div>
|
||||
<div class="text-xs text-gray-400 dark:text-warm-500 ml-3 mb-2 font-medium">账号</div>
|
||||
<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 justify-between p-4 border-b border-gray-50 dark:border-warm-800/50 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer">
|
||||
<span class="text-sm font-medium text-gray-800 dark:text-warm-200">账号管理</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer">
|
||||
<span class="text-sm font-medium text-gray-800 dark:text-warm-200">隐私设置</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分组 2: 通用 -->
|
||||
<div>
|
||||
<div class="text-xs text-gray-400 dark:text-warm-500 ml-3 mb-2 font-medium">通用</div>
|
||||
<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 justify-between p-4 border-b border-gray-50 dark:border-warm-800/50 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer">
|
||||
<span class="text-sm font-medium text-gray-800 dark:text-warm-200">新消息通知</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
<!-- 跳转到主题设置 -->
|
||||
<div class="flex items-center justify-between p-4 border-b border-gray-50 dark:border-warm-800/50 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer" onclick="window.location.href='ThemeSetting.html'">
|
||||
<span class="text-sm font-medium text-gray-800 dark:text-warm-200">主题设置</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-400">自动</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 border-b border-gray-50 dark:border-warm-800/50 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer">
|
||||
<span class="text-sm font-medium text-gray-800 dark:text-warm-200">通用设置</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer" onclick="alert('清理完成')">
|
||||
<span class="text-sm font-medium text-gray-800 dark:text-warm-200">清理缓存</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-400">12.5MB</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分组 3: 关于 -->
|
||||
<div>
|
||||
<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 justify-between p-4 border-b border-gray-50 dark:border-warm-800/50 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer">
|
||||
<span class="text-sm font-medium text-gray-800 dark:text-warm-200">帮助与反馈</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-4 active:bg-gray-50 dark:active:bg-warm-800 transition-colors cursor-pointer">
|
||||
<span class="text-sm font-medium text-gray-800 dark:text-warm-200">关于我们</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-400">v1.0.0</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<button class="w-full py-3.5 bg-white dark:bg-warm-900 rounded-2xl text-red-500 font-bold text-sm shadow-sm border border-gray-50 dark:border-warm-800/50 active:bg-gray-50 dark:active:bg-warm-800 transition-colors">
|
||||
退出登录
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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 bg-[#121212]";
|
||||
} 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 smooth-transition bg-white border-white ring-black/5 bg-[#F5F7FA]";
|
||||
}
|
||||
setTimeout(() => lucide.createIcons(), 50);
|
||||
}
|
||||
window.onload = () => lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
127
UI设计/配色方案切换设置.html
Normal file
127
UI设计/配色方案切换设置.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<!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', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
// 统一暖色调暗黑颜色 (Warm Stone)
|
||||
warm: {
|
||||
950: '#0c0a09', // 极深背景
|
||||
900: '#1c1917', // 手机背景
|
||||
800: '#292524', // 卡片/组件背景
|
||||
700: '#44403c', // 边框
|
||||
600: '#57534e', // 辅助图标
|
||||
500: '#78716c', // 文本
|
||||
200: '#e7e5e4', // 主要文字
|
||||
100: '#f5f5f4', // 亮色文字
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style> .smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } </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 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-warm-900">
|
||||
|
||||
<!-- 导航 -->
|
||||
<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="p-5">
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
|
||||
<!-- 浅色模式 -->
|
||||
<div onclick="selectTheme('light')" id="card-light" class="bg-white dark:bg-warm-800 rounded-2xl p-4 flex flex-col items-center gap-3 border-[2px] border-indigo-500 relative cursor-pointer shadow-sm transition-all">
|
||||
<div class="w-16 h-20 rounded-lg border border-gray-100 overflow-hidden flex flex-col bg-white shadow-sm">
|
||||
<div class="h-4 bg-gray-50 border-b border-gray-100"></div>
|
||||
<div class="flex-1 bg-gray-50 m-1 rounded-sm"></div>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-warm-200">浅色模式</span>
|
||||
<div class="absolute top-3 right-3 text-indigo-500"><i data-lucide="check-circle-2" class="w-5 h-5 fill-current stroke-white"></i></div>
|
||||
</div>
|
||||
|
||||
<!-- 深色模式 -->
|
||||
<div onclick="selectTheme('dark')" id="card-dark" class="bg-white dark:bg-warm-800 rounded-2xl p-4 flex flex-col items-center gap-3 border-[2px] border-transparent relative cursor-pointer shadow-sm transition-all">
|
||||
<!-- 预览图也使用 Warm 色系 -->
|
||||
<div class="w-16 h-20 rounded-lg border border-warm-700 overflow-hidden flex flex-col bg-warm-900 shadow-inner">
|
||||
<div class="h-4 bg-warm-800 border-b border-warm-700"></div>
|
||||
<div class="flex-1 bg-warm-800 m-1 rounded-sm opacity-50"></div>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-warm-200">深色模式</span>
|
||||
<div class="absolute top-3 right-3 text-indigo-500 hidden" id="icon-dark"><i data-lucide="check-circle-2" class="w-5 h-5 fill-current stroke-white"></i></div>
|
||||
</div>
|
||||
|
||||
<!-- 跟随系统 -->
|
||||
<div onclick="selectTheme('system')" id="card-system" class="col-span-2 bg-white dark:bg-warm-800 rounded-2xl p-5 flex items-center gap-4 border-[2px] border-transparent relative cursor-pointer shadow-sm transition-all">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-100 dark:bg-warm-700 flex items-center justify-center text-gray-600 dark:text-warm-200">
|
||||
<i data-lucide="smartphone" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-warm-200">跟随系统</span>
|
||||
<div class="absolute right-5 text-indigo-500 hidden" id="icon-system"><i data-lucide="check-circle-2" class="w-5 h-5 fill-current stroke-white"></i></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-gray-400 dark:text-warm-500 px-2 leading-relaxed">
|
||||
「跟随系统」开启后，将根据系统显示设置自动切换深色或浅色模式。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentMode = 'light';
|
||||
|
||||
function selectTheme(mode) {
|
||||
currentMode = mode;
|
||||
const html = document.documentElement;
|
||||
const body = document.getElementById('body-bg');
|
||||
const phone = document.getElementById('phone-container');
|
||||
|
||||
// UI State Update
|
||||
document.querySelectorAll('[id^="card-"]').forEach(el => {
|
||||
el.classList.remove('border-indigo-500');
|
||||
el.classList.add('border-transparent');
|
||||
el.querySelector('.absolute')?.classList.add('hidden');
|
||||
});
|
||||
const activeCard = document.getElementById(`card-${mode}`);
|
||||
activeCard.classList.remove('border-transparent');
|
||||
activeCard.classList.add('border-indigo-500');
|
||||
activeCard.querySelector('.absolute')?.classList.remove('hidden');
|
||||
|
||||
// Theme Logic
|
||||
let isDark = false;
|
||||
if (mode === 'dark') isDark = true;
|
||||
else if (mode === 'system') isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
if (isDark) {
|
||||
html.classList.add('dark');
|
||||
// 使用 Warm 950 作为背景，Warm 900 作为手机壳
|
||||
body.className = "bg-warm-950 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-900 border-warm-800 ring-white/10 shadow-black/50";
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
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 smooth-transition bg-white border-white ring-black/5 bg-[#F5F7FA]";
|
||||
}
|
||||
}
|
||||
window.onload = () => lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user