272 lines
7.3 KiB
HTML
272 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>家庭系统 Pro Demo</title>
|
||
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<style>
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
|
||
.toast {
|
||
position: fixed;
|
||
bottom: 80px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 8px 14px;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-gray-100">
|
||
|
||
<div id="app" class="max-w-md mx-auto min-h-screen flex flex-col">
|
||
|
||
<!-- ================= LOGIN ================= -->
|
||
<div id="login" class="flex-1 flex items-center justify-center p-6">
|
||
<div class="bg-white p-6 rounded-2xl w-full shadow">
|
||
|
||
<h1 class="text-xl font-bold mb-1">欢迎回来</h1>
|
||
<p class="text-sm text-gray-400 mb-4">家庭系统登录</p>
|
||
|
||
<input id="username" class="w-full border p-2 rounded mb-3" placeholder="请输入名字">
|
||
|
||
<button onclick="login()" class="w-full bg-blue-500 text-white py-2 rounded">
|
||
登录
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= FAMILY ONBOARD ================= -->
|
||
<div id="onboard" class="hidden flex-1 p-6">
|
||
|
||
<div class="bg-white p-6 rounded-2xl shadow">
|
||
|
||
<h1 class="text-lg font-bold">创建你的家庭</h1>
|
||
<p class="text-sm text-gray-400 mb-4">你还没有加入任何家庭</p>
|
||
|
||
<input id="familyName" class="w-full border p-2 rounded mb-3" placeholder="家庭名称">
|
||
|
||
<button onclick="createFamily()" class="w-full bg-green-500 text-white py-2 rounded mb-2">
|
||
创建家庭
|
||
</button>
|
||
|
||
<button onclick="joinFamilyMock()" class="w-full bg-gray-200 py-2 rounded">
|
||
加入示例家庭
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ================= MAIN ================= -->
|
||
<div id="main" class="hidden flex-1 flex flex-col">
|
||
|
||
<!-- CONTENT -->
|
||
<div class="flex-1 p-4 space-y-3">
|
||
|
||
<!-- 家庭卡 -->
|
||
<div class="bg-white p-4 rounded-2xl shadow">
|
||
|
||
<div class="flex justify-between">
|
||
<div>
|
||
<h2 class="font-bold text-lg">🏠 <span id="familyTitle"></span></h2>
|
||
<p class="text-xs text-gray-400">邀请码：ABC123 · 3人</p>
|
||
</div>
|
||
|
||
<button onclick="openSettings()" class="text-xs bg-gray-100 px-3 py-1 rounded-lg">
|
||
设置
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 成员 -->
|
||
<div class="bg-white p-4 rounded-2xl shadow">
|
||
|
||
<div class="flex justify-between mb-3">
|
||
<div class="font-semibold">家庭成员</div>
|
||
<button class="text-blue-500 text-sm">邀请</button>
|
||
</div>
|
||
|
||
<div class="flex gap-4">
|
||
<div class="text-center">
|
||
<div class="w-10 h-10 bg-blue-200 rounded-full"></div>
|
||
<div class="text-xs mt-1">我</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<div class="w-10 h-10 bg-pink-200 rounded-full"></div>
|
||
<div class="text-xs mt-1">妈妈</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<div class="w-10 h-10 bg-yellow-200 rounded-full"></div>
|
||
<div class="text-xs mt-1">爸爸</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 子应用 -->
|
||
<div class="bg-white p-4 rounded-2xl shadow">
|
||
|
||
<div class="font-semibold mb-3">家庭工具</div>
|
||
|
||
<div class="grid grid-cols-3 gap-3">
|
||
|
||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('记账')">
|
||
📒<div class="text-xs mt-1">记账</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('清单')">
|
||
🛒<div class="text-xs mt-1">清单</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('日程')">
|
||
📅<div class="text-xs mt-1">日程</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('物品')">
|
||
📦<div class="text-xs mt-1">物品</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('待办')">
|
||
📝<div class="text-xs mt-1">待办</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-100 p-3 rounded-xl text-center text-gray-400">
|
||
➕<div class="text-xs mt-1">添加</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- TABBAR -->
|
||
<div class="flex border-t bg-white">
|
||
|
||
<button class="flex-1 py-2" onclick="switchTab('home')">🏠</button>
|
||
<button class="flex-1 py-2" onclick="switchTab('apps')">🧩</button>
|
||
<button class="flex-1 py-2" onclick="switchTab('me')">👤</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ================= SETTINGS ================= -->
|
||
<div id="settings" class="hidden flex-1 p-4">
|
||
|
||
<div class="bg-white p-4 rounded-2xl shadow">
|
||
|
||
<h2 class="font-bold mb-3">家庭设置</h2>
|
||
|
||
<div class="space-y-2 text-sm">
|
||
|
||
<div class="p-2 bg-gray-100 rounded">修改家庭名称</div>
|
||
<div class="p-2 bg-gray-100 rounded">成员管理</div>
|
||
<div class="p-2 bg-gray-100 rounded text-red-500">退出家庭</div>
|
||
|
||
</div>
|
||
|
||
<button onclick="backHome()" class="mt-4 w-full bg-blue-500 text-white py-2 rounded">
|
||
返回
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- toast -->
|
||
<div id="toast" class="toast hidden"></div>
|
||
|
||
<script>
|
||
|
||
let state = {
|
||
user: null,
|
||
family: null
|
||
}
|
||
|
||
function show(id) {
|
||
document.querySelectorAll('#app > div').forEach(v => v.classList.add('hidden'));
|
||
document.getElementById(id).classList.remove('hidden');
|
||
}
|
||
|
||
function toast(msg) {
|
||
const t = document.getElementById('toast');
|
||
t.innerText = msg;
|
||
t.classList.remove('hidden');
|
||
|
||
setTimeout(() => {
|
||
t.classList.add('hidden');
|
||
}, 1500);
|
||
}
|
||
|
||
/* ========== login ========== */
|
||
function login() {
|
||
const name = document.getElementById('username').value;
|
||
if (!name) return toast('请输入用户名');
|
||
|
||
state.user = name;
|
||
show('onboard');
|
||
}
|
||
|
||
/* ========== family ========== */
|
||
function createFamily() {
|
||
const name = document.getElementById('familyName').value;
|
||
if (!name) return toast('请输入家庭名称');
|
||
|
||
state.family = name;
|
||
enterApp();
|
||
}
|
||
|
||
function joinFamilyMock() {
|
||
state.family = "幸福家庭";
|
||
enterApp();
|
||
}
|
||
|
||
function enterApp() {
|
||
document.getElementById('familyTitle').innerText = state.family;
|
||
show('main');
|
||
switchTab('home');
|
||
}
|
||
|
||
/* ========== tab ========== */
|
||
function switchTab(tab) {
|
||
document.querySelectorAll('#main > div:nth-child(1) > div').forEach(v => {
|
||
v.style.display = 'none';
|
||
});
|
||
|
||
toast("切换：" + tab);
|
||
}
|
||
|
||
function openApp(name) {
|
||
toast("进入：" + name);
|
||
}
|
||
|
||
/* ========== settings ========== */
|
||
function openSettings() {
|
||
show('settings');
|
||
}
|
||
|
||
function backHome() {
|
||
show('main');
|
||
}
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |