u
This commit is contained in:
oneao committed
1 parent
b6415c0d65
commit
89aaef1d6b
29 files changed
+1118
-277
No files matched your search
@@ -0,0 +1,272 @@
|
||||
<!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>
|
||||
Reference in new issue
Block a user