825 lines
60 KiB
HTML
825 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>汪圈 · 遛狗小程序原型 V1</title>
|
||
<style>
|
||
:root {
|
||
--bg: #F2EDE6;
|
||
--surface: #FBF8F3;
|
||
--surface-glass: rgba(251, 248, 243, 0.72);
|
||
--surface-2: #EDE6DC;
|
||
--ink: #2E2A24;
|
||
--ink-2: #6E665B;
|
||
--ink-3: #A89F92;
|
||
--accent: #E8A04B;
|
||
--accent-deep: #C77E2E;
|
||
--accent-soft: #F7E5CC;
|
||
--success: #6B8E5A;
|
||
--success-soft: #E2EBD9;
|
||
--warn: #D98A4E;
|
||
--danger: #C25A4E;
|
||
--danger-soft: #F2DDD8;
|
||
--line: rgba(46, 42, 36, 0.10);
|
||
--line-2: rgba(46, 42, 36, 0.16);
|
||
--radius: 18px;
|
||
--radius-sm: 12px;
|
||
--radius-pill: 999px;
|
||
--shadow: 0 1px 2px rgba(46,42,36,0.04), 0 8px 24px rgba(46,42,36,0.06);
|
||
--font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||
body {
|
||
font-family: var(--font);
|
||
background: #DED6CA;
|
||
color: var(--ink);
|
||
padding: 32px 16px 64px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.page-head { max-width: 1180px; margin: 0 auto 28px; }
|
||
.page-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
|
||
.page-head p { font-size: 14px; color: #6b6357; margin-top: 6px; max-width: 640px; }
|
||
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 12.5px; color: #6b6357; }
|
||
.legend span { display: inline-flex; align-items: center; gap: 6px; }
|
||
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
|
||
|
||
.stage {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 40px 28px;
|
||
align-items: start;
|
||
}
|
||
.frame-wrap { display: flex; flex-direction: column; gap: 12px; }
|
||
.frame-label { font-size: 13px; font-weight: 600; color: #4a4339; display: flex; align-items: center; gap: 8px; }
|
||
.frame-label .num {
|
||
width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff;
|
||
font-size: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
|
||
}
|
||
.frame-note { font-size: 12px; color: #756c5f; line-height: 1.5; }
|
||
|
||
.phone {
|
||
width: 300px;
|
||
height: 620px;
|
||
background: var(--bg);
|
||
border-radius: 36px;
|
||
border: 7px solid #2E2A24;
|
||
overflow: hidden;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.statusbar {
|
||
height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 18px 0 22px; font-size: 12px; font-weight: 600; color: var(--ink); padding-top: 6px;
|
||
}
|
||
.statusbar .right { display: flex; gap: 5px; align-items: center; font-size: 11px; }
|
||
.navbar {
|
||
height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
|
||
position: relative; font-size: 15px; font-weight: 600;
|
||
}
|
||
.navbar .nav-left, .navbar .nav-right {
|
||
position: absolute; top: 50%; transform: translateY(-50%); color: var(--ink-2);
|
||
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer;
|
||
}
|
||
.navbar .nav-left { left: 12px; }
|
||
.navbar .nav-right { right: 12px; }
|
||
.screen-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
|
||
.screen-body::-webkit-scrollbar { display: none; }
|
||
|
||
.tabbar {
|
||
height: 64px; flex-shrink: 0; background: var(--surface-glass);
|
||
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
|
||
border-top: 0.5px solid var(--line); display: flex; align-items: flex-start;
|
||
justify-content: space-around; padding-top: 8px; position: relative;
|
||
}
|
||
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-3); font-size: 10.5px; cursor: pointer; flex: 1; }
|
||
.tab.active { color: var(--accent-deep); }
|
||
.tab svg { width: 22px; height: 22px; }
|
||
.tab-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
|
||
.tab-fab {
|
||
width: 54px; height: 54px; border-radius: 50%; background: var(--accent);
|
||
display: flex; align-items: center; justify-content: center; margin-top: -26px;
|
||
border: 4px solid var(--bg); box-shadow: 0 4px 12px rgba(200,126,46,0.35); cursor: pointer;
|
||
}
|
||
.tab-fab svg { width: 26px; height: 26px; stroke: #fff; }
|
||
.tab-center span { font-size: 10.5px; color: var(--ink-2); }
|
||
|
||
svg.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
||
|
||
/* generic blocks */
|
||
.pad { padding: 16px; }
|
||
.card {
|
||
background: var(--surface); border-radius: var(--radius); border: 0.5px solid var(--line);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.row { display: flex; align-items: center; gap: 12px; }
|
||
.muted { color: var(--ink-2); }
|
||
.tiny { font-size: 11px; }
|
||
.center { text-align: center; }
|
||
|
||
.avatar {
|
||
border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center;
|
||
color: var(--ink-3); flex-shrink: 0;
|
||
}
|
||
|
||
/* map placeholder */
|
||
.mapfill {
|
||
height: 132px; background:
|
||
repeating-linear-gradient(45deg, rgba(46,42,36,0.04), rgba(46,42,36,0.04) 10px, transparent 10px, transparent 20px);
|
||
border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line);
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-3);
|
||
}
|
||
|
||
.timer { font-size: 46px; font-weight: 600; letter-spacing: 1px; line-height: 1.05; font-variant-numeric: tabular-nums; }
|
||
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||
.statgrid.three { grid-template-columns: repeat(3,1fr); }
|
||
.stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 11px 8px; text-align: center; }
|
||
.stat .v { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
|
||
.stat .k { font-size: 11px; color: var(--ink-2); margin-top: 1px; }
|
||
|
||
.btn {
|
||
height: 46px; border-radius: var(--radius-pill); border: 0.5px solid var(--line-2);
|
||
background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; font-family: var(--font);
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; width: 100%;
|
||
}
|
||
.btn:active { transform: scale(0.98); }
|
||
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
|
||
.btn.danger { color: var(--danger); border-color: var(--danger-soft); }
|
||
.btn.ghost { background: transparent; }
|
||
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
||
|
||
.toggle { width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--line-2); position: relative; transition: background .2s; flex-shrink: 0; cursor: pointer; }
|
||
.toggle::after { content:""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
|
||
.toggle.on { background: var(--success); }
|
||
.toggle.on::after { transform: translateX(16px); }
|
||
|
||
.listrow { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 0.5px solid var(--line); cursor: pointer; }
|
||
.listrow:last-child { border-bottom: none; }
|
||
.listrow .ti { color: var(--ink-2); }
|
||
.listrow .lbl { flex: 1; font-size: 14px; }
|
||
.listrow .chev { color: var(--ink-3); }
|
||
|
||
.badge { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); color: var(--accent-deep); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); }
|
||
.pill-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
|
||
|
||
.ach-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
|
||
.ach { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
|
||
.ach .medal { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
|
||
.ach .medal svg { width: 21px; height: 21px; }
|
||
.ach.locked .medal { background: var(--surface-2); opacity: 0.55; }
|
||
.ach .nm { font-size: 10px; color: var(--ink-2); }
|
||
.ach.locked .nm { color: var(--ink-3); }
|
||
|
||
/* modal / sheet */
|
||
.overlay {
|
||
position: absolute; inset: 0; background: rgba(46,42,36,0.42);
|
||
display: flex; align-items: flex-end; justify-content: center; z-index: 20;
|
||
opacity: 0; pointer-events: none; transition: opacity .22s;
|
||
}
|
||
.overlay.show { opacity: 1; pointer-events: auto; }
|
||
.sheet {
|
||
width: 100%; background: var(--surface); border-radius: 22px 22px 0 0; padding: 8px 16px 18px;
|
||
transform: translateY(20px); transition: transform .26s; max-height: 92%; overflow-y: auto;
|
||
}
|
||
.overlay.show .sheet { transform: translateY(0); }
|
||
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 6px auto 14px; }
|
||
|
||
.confirm {
|
||
width: 240px; background: var(--surface); border-radius: 18px; padding: 22px 18px 16px; text-align: center;
|
||
transform: scale(0.94); transition: transform .2s;
|
||
}
|
||
.overlay.center { align-items: center; }
|
||
.overlay.center.show .confirm { transform: scale(1); }
|
||
.confirm h4 { font-size: 16px; font-weight: 600; }
|
||
.confirm p { font-size: 13px; color: var(--ink-2); margin: 6px 0 18px; }
|
||
.confirm .btns { display: flex; gap: 10px; }
|
||
.confirm .btn { height: 42px; }
|
||
|
||
/* annotations for devs */
|
||
.anno {
|
||
background: #FFF7E8; border: 1px dashed var(--accent); border-radius: 10px;
|
||
padding: 9px 11px; font-size: 11.5px; color: #7a5a1e; line-height: 1.5;
|
||
}
|
||
.anno b { color: #5e4615; }
|
||
|
||
.section-title { font-size: 12px; color: var(--ink-2); padding: 14px 16px 6px; }
|
||
.field { padding: 11px 16px; border-bottom: 0.5px solid var(--line); }
|
||
.field .flabel { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
|
||
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.chip { font-size: 12.5px; padding: 6px 12px; border-radius: var(--radius-pill); border: 0.5px solid var(--line-2); background: var(--surface-2); cursor: pointer; }
|
||
.chip.sel { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); font-weight: 600; }
|
||
.photo-add { width: 64px; height: 64px; border-radius: 12px; border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--ink-3); cursor: pointer; }
|
||
.input-fake { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-3); }
|
||
|
||
.hist-row { display: flex; align-items: center; gap: 10px; padding: 11px; background: var(--surface-2); border-radius: var(--radius-sm); cursor: pointer; }
|
||
.hist-row .ti { color: var(--ink-2); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-head">
|
||
<h1>汪圈 · 遛狗小程序 — 可交互原型 V1</h1>
|
||
<p>首版聚焦遛狗单机闭环，覆盖从「打开小程序」到「第一次遛狗」的完整路径。点击屏幕内的按钮可真实跳转、切换状态。橙色虚线框是给开发的交互/逻辑注释，不属于界面本身。完整流程：登录(0a) → 建档(0b) → 首页(1) → 遛狗(2) → 成果卡(3) → 沉淀(4)。底部导航「记录 + 遛狗 + 我的」三 Tab；广场、附近、排行榜、信息站均为 pending。</p>
|
||
<div class="legend">
|
||
<span><i class="dot" style="background:var(--accent)"></i>主行为入口</span>
|
||
<span><i class="dot" style="background:var(--success)"></i>进行中状态</span>
|
||
<span><i class="dot" style="background:var(--warn)"></i>暂停状态</span>
|
||
<span><i class="dot" style="background:var(--danger)"></i>危险/二次确认</span>
|
||
<span><i class="dot" style="background:var(--accent);border:2px dashed var(--accent-deep)"></i>开发注释</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stage">
|
||
|
||
<!-- ============ FRAME 0a: 登录/欢迎 ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">0a</span>欢迎 / 微信授权登录</div>
|
||
<div class="phone" id="screen-login">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar"></div>
|
||
<div class="screen-body" style="display:flex;flex-direction:column;">
|
||
<div class="center" style="padding:48px 28px 24px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;">
|
||
<div style="width:88px;height:88px;border-radius:26px;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 6px 18px rgba(200,126,46,0.3);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:42px;height:42px;"><use href="#i-walk"/></svg>
|
||
</div>
|
||
<div style="font-size:22px;font-weight:600;letter-spacing:1px;">汪圈</div>
|
||
<div class="muted" style="font-size:13px;margin-top:6px;line-height:1.6;max-width:200px;">每一次遛狗，都值得被记录</div>
|
||
</div>
|
||
<div class="pad" style="padding-bottom:14px;">
|
||
<button class="btn primary" onclick="go('screen-create-dog')"><svg><use href="#i-wechat"/></svg>微信一键登录</button>
|
||
<div class="tiny muted center" style="margin-top:14px;line-height:1.5;">登录即代表同意 <span style="color:var(--accent-deep)">用户协议</span> 与 <span style="color:var(--accent-deep)">隐私政策</span></div>
|
||
</div>
|
||
<div class="pad" style="padding-top:0;"><div class="anno"><b>注释：</b>首次打开的第一屏。微信授权登录后，<b>若用户尚未建档任何狗狗 → 直接进建档页（0b）</b>；已建档老用户 → 跳过，直接进首页。协议/隐私为必须的合规要素。</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">登录 → 新用户进建档页；老用户直接进首页。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 0b: 建档 / 编辑狗狗 ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">0b</span>建档 / 编辑狗狗（同一表单）</div>
|
||
<div class="phone" id="screen-create-dog">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar"><div class="nav-left" onclick="go('screen-login')"><svg class="ic" style="width:18px;height:18px;"><use href="#i-chev-l"/></svg></div>认识你的狗狗</div>
|
||
<div class="screen-body">
|
||
<div class="center" style="padding:18px 16px 10px;">
|
||
<div style="position:relative;width:78px;margin:0 auto;cursor:pointer;">
|
||
<div class="avatar" style="width:78px;height:78px;border:0.5px solid var(--line);"><svg class="ic" style="width:36px;height:36px;"><use href="#i-dog"/></svg></div>
|
||
<div style="position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" style="width:14px;height:14px;"><use href="#i-camera-plus"/></svg></div>
|
||
</div>
|
||
<div class="tiny muted" style="margin-top:8px;">点击上传头像（可选）</div>
|
||
</div>
|
||
|
||
<div class="field" style="border-top:0.5px solid var(--line);">
|
||
<div class="flabel">名字 <span style="color:var(--danger)">*</span></div>
|
||
<div class="input-fake" style="color:var(--ink);">豆豆</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flabel">犬种 <span style="color:var(--danger)">*</span></div>
|
||
<div class="input-fake row" style="justify-content:space-between;"><span style="color:var(--ink);">柯基</span><svg class="ic" style="width:16px;height:16px;color:var(--ink-3)"><use href="#i-chev-r"/></svg></div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flabel">性别</div>
|
||
<div class="chips"><span class="chip sel">公</span><span class="chip">母</span></div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flabel">年龄（可选）</div>
|
||
<div class="chips"><span class="chip">幼犬</span><span class="chip sel">成犬 3 岁</span><span class="chip">老年犬</span></div>
|
||
</div>
|
||
<div class="field" style="border-bottom:none;">
|
||
<div class="flabel">体重（可选，用于估算狗步）</div>
|
||
<div class="input-fake">12 kg</div>
|
||
</div>
|
||
|
||
<div class="pad">
|
||
<button class="btn primary" onclick="go('screen-home')"><svg><use href="#i-check"/></svg>完成，开始遛狗</button>
|
||
</div>
|
||
<div class="pad" style="padding-top:0;"><div class="anno"><b>注释：</b>建档与编辑<b>复用此表单</b>（编辑时预填已有值，标题改「编辑资料」）。仅名字、犬种必填——降低首次门槛。犬种用于狗步换算系数；体重可选做二次校准。完成后进首页，首页即出现这只狗。</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">完成 → 首页（狗狗已建档）。狗狗主页右上「编辑」也进此页（预填）。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 0c: 多狗选择弹层 ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">0c</span>多狗选择（点遛狗时）</div>
|
||
<div class="phone" id="screen-multidog">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar">我的</div>
|
||
<div class="screen-body" style="filter:brightness(0.96);">
|
||
<div class="pad row" style="padding-bottom:16px;opacity:0.5;">
|
||
<div class="avatar" style="width:50px;height:50px;"><svg class="ic" style="width:26px;height:26px;"><use href="#i-user"/></svg></div>
|
||
<div style="flex:1;"><div style="font-size:15px;font-weight:600;">铲屎官小J</div><div class="tiny muted">遛狗 87 次 · 加入 92 天</div></div>
|
||
</div>
|
||
<div class="section-title" style="opacity:0.5;">我的狗狗</div>
|
||
<div class="pad" style="opacity:0.5;"><div class="card row" style="padding:12px;"><div class="avatar" style="width:44px;height:44px;"><svg class="ic" style="width:22px;height:22px;"><use href="#i-dog"/></svg></div><div style="flex:1;"><div style="font-size:14px;font-weight:600;">豆豆</div><div class="tiny muted">柯基</div></div></div></div>
|
||
</div>
|
||
|
||
<div class="overlay show" style="position:absolute;">
|
||
<div class="sheet" style="transform:translateY(0);">
|
||
<div class="sheet-handle"></div>
|
||
<div style="font-size:16px;font-weight:600;text-align:center;margin-bottom:4px;">今天遛哪只？</div>
|
||
<div class="tiny muted center" style="margin-bottom:16px;">可多选，一起遛</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||
<div class="card row" style="padding:12px;border:2px solid var(--accent);"><div class="avatar" style="width:42px;height:42px;"><svg class="ic" style="width:21px;height:21px;"><use href="#i-dog"/></svg></div><div style="flex:1;"><div style="font-size:14px;font-weight:600;">豆豆</div><div class="tiny muted">柯基 · 连续 7 天</div></div><div style="width:24px;height:24px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" style="width:14px;height:14px;"><use href="#i-check"/></svg></div></div>
|
||
<div class="card row" style="padding:12px;"><div class="avatar" style="width:42px;height:42px;"><svg class="ic" style="width:21px;height:21px;"><use href="#i-dog"/></svg></div><div style="flex:1;"><div style="font-size:14px;font-weight:600;">奶糖</div><div class="tiny muted">比熊 · 连续 2 天</div></div><div style="width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);"></div></div>
|
||
</div>
|
||
<div style="margin-top:16px;"><button class="btn primary" onclick="go('screen-walking')"><svg><use href="#i-walk"/></svg>开始遛狗</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">仅多狗用户出现；单狗用户点遛狗直接进遛狗中。选定 → 遛狗中。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 1: 我的（首页/入口） ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">1</span>我的（启动后默认页）</div>
|
||
<div class="phone" id="screen-home">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar">我的</div>
|
||
<div class="screen-body">
|
||
<div class="pad row" style="border-bottom:0.5px solid var(--line);padding-bottom:16px;">
|
||
<div class="avatar" style="width:50px;height:50px;"><svg class="ic" style="width:26px;height:26px;"><use href="#i-user"/></svg></div>
|
||
<div style="flex:1;">
|
||
<div style="font-size:15px;font-weight:600;">铲屎官小J</div>
|
||
<div class="tiny muted" style="margin-top:2px;">遛狗 87 次 · 加入 92 天</div>
|
||
</div>
|
||
<svg class="ic" style="color:var(--ink-3)"><use href="#i-chev-r"/></svg>
|
||
</div>
|
||
|
||
<div class="section-title">我的狗狗</div>
|
||
<div class="pad" style="padding-top:0;">
|
||
<div class="card row" style="padding:12px;cursor:pointer;" onclick="go('screen-dog')">
|
||
<div class="avatar" style="width:44px;height:44px;"><svg class="ic" style="width:22px;height:22px;"><use href="#i-dog"/></svg></div>
|
||
<div style="flex:1;">
|
||
<div style="font-size:14px;font-weight:600;">豆豆</div>
|
||
<div class="tiny" style="margin-top:2px;"><span class="pill-status" style="color:var(--success)"><i class="dot" style="background:var(--success)"></i>连续 7 天</span> · 柯基</div>
|
||
</div>
|
||
<svg class="ic" style="color:var(--ink-3)"><use href="#i-chev-r"/></svg>
|
||
</div>
|
||
<div style="margin-top:10px;border:1px dashed var(--line-2);border-radius:var(--radius);padding:12px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink-2);font-size:13px;cursor:pointer;">
|
||
<svg class="ic"><use href="#i-plus"/></svg> 添加狗狗
|
||
</div>
|
||
</div>
|
||
|
||
<div style="border-top:0.5px solid var(--line);">
|
||
<div class="listrow" onclick="go('screen-history')"><svg class="ic ti"><use href="#i-history"/></svg><span class="lbl">遛狗历史</span><svg class="ic chev"><use href="#i-chev-r"/></svg></div>
|
||
<div class="listrow" onclick="go('screen-achievements')"><svg class="ic ti"><use href="#i-medal"/></svg><span class="lbl">成就</span><svg class="ic chev"><use href="#i-chev-r"/></svg></div>
|
||
<div class="listrow"><svg class="ic ti"><use href="#i-settings"/></svg><span class="lbl">设置</span><svg class="ic chev"><use href="#i-chev-r"/></svg></div>
|
||
</div>
|
||
|
||
<div class="pad"><div class="anno"><b>注释：</b>启动后默认进此页。单只狗时点中央「遛狗」按钮直接开始；多只狗弹出选择。「添加狗狗」为多狗预留。</div></div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab" onclick="go('screen-records')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-list"/></svg><span>记录</span></div>
|
||
<div class="tab-center">
|
||
<div class="tab-fab" onclick="go('screen-walking')"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-walk"/></svg></div>
|
||
<span>遛狗</span>
|
||
</div>
|
||
<div class="tab active"><svg class="ic" style="width:22px;height:22px;"><use href="#i-user"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">点豆豆卡片或「成就」→ 狗狗主页；点中央橙色按钮 → 开始遛狗。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 2: 遛狗中（正常态） ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">2</span>遛狗中 · 进行态</div>
|
||
<div class="phone" id="screen-walking">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar" style="font-size:13px;color:var(--ink-2);">
|
||
<span class="pill-status" style="color:var(--success)"><i class="dot" style="background:var(--success)"></i>遛狗中</span>
|
||
</div>
|
||
<div class="screen-body">
|
||
<div class="mapfill"><svg class="ic" style="width:26px;height:26px;"><use href="#i-map"/></svg><span class="tiny">地图轨迹（首版可后置）</span></div>
|
||
<div class="center" style="padding:18px 16px 8px;">
|
||
<div class="tiny muted">已遛时长</div>
|
||
<div class="timer" id="live-timer">12:34</div>
|
||
</div>
|
||
<div class="pad statgrid" style="padding-top:6px;padding-bottom:10px;">
|
||
<div class="stat"><div class="v">1.2<span style="font-size:12px;"> km</span></div><div class="k">距离</div></div>
|
||
<div class="stat"><div class="v">3,480</div><div class="k">狗步</div></div>
|
||
</div>
|
||
<div class="row" style="padding:0 16px 12px;justify-content:space-between;">
|
||
<span class="row" style="font-size:13px;gap:7px;"><svg class="ic" style="color:var(--ink-2)"><use href="#i-poo"/></svg>便便打卡</span>
|
||
<span class="toggle" onclick="this.classList.toggle('on')"></span>
|
||
</div>
|
||
<div class="pad row" style="gap:10px;padding-top:0;">
|
||
<button class="btn ghost" onclick="go('screen-paused')"><svg><use href="#i-pause"/></svg>暂停</button>
|
||
<button class="btn danger" onclick="openConfirm()"><svg><use href="#i-stop"/></svg>结束</button>
|
||
</div>
|
||
<div class="row" style="border-top:0.5px solid var(--line);padding:10px 16px;font-size:12px;color:var(--ink-2);gap:8px;cursor:pointer;">
|
||
<svg class="ic" style="width:16px;height:16px;"><use href="#i-dog"/></svg>豆豆 · 柯基 <svg class="ic" style="width:14px;height:14px;margin-left:auto;color:var(--ink-3)"><use href="#i-chev-d"/></svg>
|
||
</div>
|
||
<div class="pad" style="padding-top:0;"><div class="anno"><b>注释：</b>计时器每秒自增（演示中模拟）。便便打卡为行内开关，遛狗中即时记录。底部可切换当前遛的是哪只狗（单狗不显示箭头）。距离/狗步在未授权定位时降级隐藏。</div></div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab" onclick="go('screen-records')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-list"/></svg><span>记录</span></div>
|
||
<div class="tab-center"><div class="tab-fab" style="background:var(--success);box-shadow:0 4px 12px rgba(107,142,90,0.35);"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-walk"/></svg></div><span style="color:var(--success)">遛狗中</span></div>
|
||
<div class="tab"><svg class="ic" style="width:22px;height:22px;"><use href="#i-user"/></svg><span>我的</span></div>
|
||
</div>
|
||
|
||
<!-- 结束二次确认 -->
|
||
<div class="overlay center" id="confirm-end">
|
||
<div class="confirm">
|
||
<h4>结束这次遛狗？</h4>
|
||
<p>豆豆已经走了 12 分钟，<br>确认结束并生成成果卡。</p>
|
||
<div class="btns">
|
||
<button class="btn ghost" onclick="closeConfirm()">再遛会</button>
|
||
<button class="btn primary" onclick="closeConfirm();go('screen-summary')">结束</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">「暂停」→ 暂停态；「结束」→ 二次确认 → 成果卡。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 2b: 暂停态 ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">2b</span>遛狗中 · 暂停态</div>
|
||
<div class="phone" id="screen-paused">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar" style="font-size:13px;color:var(--warn);">
|
||
<span class="pill-status" style="color:var(--warn)"><i class="dot" style="background:var(--warn)"></i>已暂停</span>
|
||
</div>
|
||
<div class="screen-body">
|
||
<div class="mapfill" style="background:var(--surface-2);"><svg class="ic" style="width:26px;height:26px;"><use href="#i-pause"/></svg><span class="tiny">计时已停止</span></div>
|
||
<div class="center" style="padding:18px 16px 8px;opacity:0.45;">
|
||
<div class="tiny muted">已遛时长</div>
|
||
<div class="timer">12:34</div>
|
||
</div>
|
||
<div class="pad statgrid" style="padding-top:6px;padding-bottom:10px;opacity:0.45;">
|
||
<div class="stat"><div class="v">1.2<span style="font-size:12px;"> km</span></div><div class="k">距离</div></div>
|
||
<div class="stat"><div class="v">3,480</div><div class="k">狗步</div></div>
|
||
</div>
|
||
<div class="pad row" style="gap:10px;padding-top:8px;">
|
||
<button class="btn primary" onclick="go('screen-walking')"><svg><use href="#i-play"/></svg>继续</button>
|
||
<button class="btn danger" onclick="go('screen-summary')"><svg><use href="#i-stop"/></svg>结束</button>
|
||
</div>
|
||
<div class="row" style="border-top:0.5px solid var(--line);padding:10px 16px;font-size:12px;color:var(--ink-2);gap:8px;margin-top:8px;">
|
||
<svg class="ic" style="width:16px;height:16px;"><use href="#i-dog"/></svg>豆豆 · 柯基
|
||
</div>
|
||
<div class="pad" style="padding-top:0;"><div class="anno"><b>注释：</b>暂停时停止计时，时长/数据置灰，避免误以为仍在记录。主按钮变「继续」（提示恢复）。遛狗常有等狗、捡便便的停顿，暂停防止污染数据。</div></div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab" onclick="go('screen-records')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-list"/></svg><span>记录</span></div>
|
||
<div class="tab-center"><div class="tab-fab" style="background:var(--warn);box-shadow:none;"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pause"/></svg></div><span style="color:var(--warn)">已暂停</span></div>
|
||
<div class="tab"><svg class="ic" style="width:22px;height:22px;"><use href="#i-user"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">「继续」→ 回到进行态；「结束」→ 成果卡。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 3: 成果卡 ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">3</span>成果卡（遛完总结）</div>
|
||
<div class="phone" id="screen-summary">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar">今日成果<div class="nav-right" onclick="go('screen-home')"><svg class="ic" style="width:18px;height:18px;"><use href="#i-x"/></svg></div></div>
|
||
<div class="screen-body">
|
||
<div class="center" style="padding:18px 16px 14px;border-bottom:0.5px solid var(--line);">
|
||
<div class="avatar" style="width:58px;height:58px;margin:0 auto 8px;border:0.5px solid var(--line);"><svg class="ic" style="width:28px;height:28px;"><use href="#i-dog"/></svg></div>
|
||
<div style="font-size:15px;font-weight:600;">豆豆今天走了</div>
|
||
<div style="margin:2px 0;"><span style="font-size:36px;font-weight:600;letter-spacing:1px;font-variant-numeric:tabular-nums;">3,480</span> <span class="muted" style="font-size:15px;">狗步</span></div>
|
||
<div class="tiny" style="color:var(--success);font-weight:600;">超过了昨天的 2,900 步</div>
|
||
</div>
|
||
<div class="statgrid three center" style="padding:14px 12px;">
|
||
<div><div style="font-size:18px;font-weight:600;">12:34</div><div class="tiny muted">时长</div></div>
|
||
<div><div style="font-size:18px;font-weight:600;">1.2</div><div class="tiny muted">公里</div></div>
|
||
<div><div style="font-size:18px;font-weight:600;color:var(--success);">第7天</div><div class="tiny muted">连续</div></div>
|
||
</div>
|
||
<div style="margin:0 16px 14px;padding:11px 12px;background:var(--accent-soft);border-radius:var(--radius-sm);display:flex;align-items:center;gap:10px;">
|
||
<svg class="ic" style="width:22px;height:22px;color:var(--accent-deep)"><use href="#i-medal"/></svg>
|
||
<div><div style="font-size:13px;font-weight:600;color:var(--accent-deep)">解锁成就 · 一周不断</div><div class="tiny" style="color:var(--accent-deep);opacity:.8;">连续遛狗满 7 天</div></div>
|
||
</div>
|
||
|
||
<!-- 选填补充信息 -->
|
||
<div class="section-title">补充（可选，跳过也能保存）</div>
|
||
<div class="pad" style="padding-top:4px;padding-bottom:8px;">
|
||
<div class="row" style="gap:8px;">
|
||
<div class="photo-add"><svg class="ic"><use href="#i-camera"/></svg></div>
|
||
<div class="input-fake" style="flex:1;">给这次遛狗写点什么…</div>
|
||
</div>
|
||
</div>
|
||
<div class="field" style="border-top:0.5px solid var(--line);">
|
||
<div class="flabel"><svg class="ic" style="width:14px;height:14px;"><use href="#i-sun"/></svg>天气</div>
|
||
<div class="chips">
|
||
<span class="chip sel">☀️ 晴</span><span class="chip">☁️ 阴</span><span class="chip">🌧️ 雨</span>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flabel"><svg class="ic" style="width:14px;height:14px;"><use href="#i-heart"/></svg>状态</div>
|
||
<div class="chips">
|
||
<span class="chip sel">遛得开心</span><span class="chip">有点累</span><span class="chip">很兴奋</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pad" style="display:flex;flex-direction:column;gap:10px;">
|
||
<button class="btn primary"><svg><use href="#i-share"/></svg>生成图片分享到朋友圈</button>
|
||
<button class="btn ghost" onclick="go('screen-dog')">完成</button>
|
||
</div>
|
||
<div class="pad" style="padding-top:0;"><div class="anno"><b>注释：</b>所有需要输入的字段集中在此页且全部选填——遛狗时用户腾不出手。视角是「豆豆走了」非「你遛了」。分享为首选项（拉新入口）。「完成」后记录沉淀进狗狗主页。</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">「完成」或「分享」→ 沉淀进狗狗主页近期记录。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 4: 狗狗主页 ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">4</span>狗狗主页</div>
|
||
<div class="phone" id="screen-dog">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar"><div class="nav-left" onclick="go('screen-home')"><svg class="ic" style="width:18px;height:18px;"><use href="#i-chev-l"/></svg></div>豆豆<div class="nav-right" onclick="go('screen-create-dog')"><svg class="ic" style="width:16px;height:16px;"><use href="#i-edit"/></svg></div></div>
|
||
<div class="screen-body">
|
||
<div class="center" style="padding:16px;border-bottom:0.5px solid var(--line);">
|
||
<div class="avatar" style="width:62px;height:62px;margin:0 auto 8px;border:0.5px solid var(--line);"><svg class="ic" style="width:30px;height:30px;"><use href="#i-dog"/></svg></div>
|
||
<div style="font-size:16px;font-weight:600;">豆豆</div>
|
||
<div class="tiny muted">柯基 · 3 岁 · 公</div>
|
||
</div>
|
||
<div class="statgrid three center" style="padding:14px 12px;border-bottom:0.5px solid var(--line);">
|
||
<div><div style="font-size:20px;font-weight:600;">87</div><div class="tiny muted">总次数</div></div>
|
||
<div><div style="font-size:20px;font-weight:600;">142</div><div class="tiny muted">总公里</div></div>
|
||
<div><div style="font-size:20px;font-weight:600;color:var(--success);">7</div><div class="tiny muted">连续天数</div></div>
|
||
</div>
|
||
|
||
<div class="row" style="padding:14px 16px 8px;justify-content:space-between;">
|
||
<span style="font-size:13px;font-weight:600;">成就墙</span><span class="tiny" style="color:var(--ink-3)">3 / 12</span>
|
||
</div>
|
||
<div class="pad ach-grid" style="padding-top:0;padding-bottom:14px;border-bottom:0.5px solid var(--line);">
|
||
<div class="ach"><div class="medal"><svg class="ic" style="color:var(--accent)"><use href="#i-medal"/></svg></div><span class="nm">一周不断</span></div>
|
||
<div class="ach"><div class="medal"><svg class="ic" style="color:#5b86b3"><use href="#i-rain"/></svg></div><span class="nm">雨天战士</span></div>
|
||
<div class="ach"><div class="medal"><svg class="ic" style="color:var(--success)"><use href="#i-flag"/></svg></div><span class="nm">首遛</span></div>
|
||
<div class="ach locked"><div class="medal"><svg class="ic" style="color:var(--ink-3)"><use href="#i-lock"/></svg></div><span class="nm">未解锁</span></div>
|
||
</div>
|
||
|
||
<div style="font-size:13px;font-weight:600;padding:14px 16px 8px;">近期记录</div>
|
||
<div class="pad" style="padding-top:0;display:flex;flex-direction:column;gap:8px;">
|
||
<div class="hist-row" onclick="go('screen-summary')"><svg class="ic ti"><use href="#i-walk"/></svg><div style="flex:1;"><div style="font-size:13px;">今天 早上</div><div class="tiny muted">12分34秒 · 1.2km · 3480狗步</div></div></div>
|
||
<div class="hist-row"><svg class="ic ti"><use href="#i-walk"/></svg><div style="flex:1;"><div style="font-size:13px;">昨天 傍晚</div><div class="tiny muted">18分02秒 · 1.8km · 5100狗步</div></div></div>
|
||
</div>
|
||
<div class="pad"><div class="anno"><b>注释：</b>累计选「次数/公里/连续天数」，不要配速/卡路里——记录陪伴厚度而非运动表现。成就墙露灰锁制造收集欲。点近期记录可回看成果卡。</div></div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab" onclick="go('screen-records')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-list"/></svg><span>记录</span></div>
|
||
<div class="tab-center"><div class="tab-fab" onclick="go('screen-walking')"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-walk"/></svg></div><span>遛狗</span></div>
|
||
<div class="tab active"><svg class="ic" style="width:22px;height:22px;"><use href="#i-user"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">返回 → 我的页；近期记录 → 回看成果卡。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 5: 遛狗历史 + 手动补记 ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">5</span>遛狗历史 + 手动补记</div>
|
||
<div class="phone" id="screen-history">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar"><div class="nav-left" onclick="go('screen-home')"><svg class="ic" style="width:18px;height:18px;"><use href="#i-chev-l"/></svg></div>遛狗历史<div class="nav-right" onclick="openSheet()"><svg class="ic" style="width:18px;height:18px;"><use href="#i-plus"/></svg></div></div>
|
||
<div class="screen-body">
|
||
<div class="pad" style="display:flex;flex-direction:column;gap:8px;">
|
||
<div class="tiny muted" style="padding:4px 2px;">本周</div>
|
||
<div class="hist-row"><svg class="ic ti"><use href="#i-walk"/></svg><div style="flex:1;"><div style="font-size:13px;">今天 早上 · 豆豆</div><div class="tiny muted">12分34秒 · 1.2km</div></div></div>
|
||
<div class="hist-row"><svg class="ic ti"><use href="#i-walk"/></svg><div style="flex:1;"><div style="font-size:13px;">昨天 傍晚 · 豆豆</div><div class="tiny muted">18分02秒 · 1.8km</div></div></div>
|
||
<div class="hist-row" style="border:1px dashed var(--line-2);background:transparent;"><svg class="ic ti" style="color:var(--accent-deep)"><use href="#i-edit"/></svg><div style="flex:1;"><div style="font-size:13px;">前天 · 豆豆 <span class="badge" style="background:var(--surface-2);color:var(--ink-2);">补记</span></div><div class="tiny muted">15分00秒 · 距离未记录</div></div></div>
|
||
</div>
|
||
<div class="pad"><div class="anno"><b>注释：</b>右上「+」= 手动补记入口（忘记开 App 时事后补）。规则：补记<b>可维持连续打卡不断签</b>，但<b>不计入排行榜</b>（防刷量）。补记记录带标识区分。</div></div>
|
||
</div>
|
||
|
||
<!-- 补记底部弹层 -->
|
||
<div class="overlay" id="sheet-add">
|
||
<div class="sheet">
|
||
<div class="sheet-handle"></div>
|
||
<div style="font-size:16px;font-weight:600;text-align:center;margin-bottom:4px;">手动补记</div>
|
||
<div class="tiny muted center" style="margin-bottom:14px;">忘记开 App 也能补上这次遛狗</div>
|
||
<div class="field" style="border-top:0.5px solid var(--line);"><div class="flabel">哪只狗</div><div class="chips"><span class="chip sel">豆豆</span></div></div>
|
||
<div class="field"><div class="flabel">时间</div><div class="input-fake">前天 18:00</div></div>
|
||
<div class="field"><div class="flabel">时长</div><div class="input-fake">15 分钟</div></div>
|
||
<div class="field" style="border-bottom:none;"><div class="flabel">距离（可选）</div><div class="input-fake">未填写</div></div>
|
||
<div class="anno" style="margin:6px 0 12px;">补记不影响连续打卡，但不计入排行榜。</div>
|
||
<div class="row" style="gap:10px;">
|
||
<button class="btn ghost" onclick="closeSheet()">取消</button>
|
||
<button class="btn primary" onclick="closeSheet()">保存补记</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab" onclick="go('screen-records')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-list"/></svg><span>记录</span></div>
|
||
<div class="tab-center"><div class="tab-fab" onclick="go('screen-walking')"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-walk"/></svg></div><span>遛狗</span></div>
|
||
<div class="tab active"><svg class="ic" style="width:22px;height:22px;"><use href="#i-user"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">右上「+」→ 弹出补记表单。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 6: 记录 Tab（成就墙概览 + 历史） ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">6</span>记录 Tab（左侧 Tab）</div>
|
||
<div class="phone" id="screen-records">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar">记录</div>
|
||
<div class="screen-body">
|
||
<div class="row" style="padding:14px 16px 8px;justify-content:space-between;">
|
||
<span style="font-size:13px;font-weight:600;">成就墙</span>
|
||
<span class="tiny" style="color:var(--accent-deep);cursor:pointer;" onclick="go('screen-achievements')">全部 3/12 ›</span>
|
||
</div>
|
||
<div class="pad ach-grid" style="padding-top:0;padding-bottom:14px;cursor:pointer;" onclick="go('screen-achievements')">
|
||
<div class="ach"><div class="medal"><svg class="ic" style="color:var(--accent)"><use href="#i-medal"/></svg></div><span class="nm">一周不断</span></div>
|
||
<div class="ach"><div class="medal"><svg class="ic" style="color:#5b86b3"><use href="#i-rain"/></svg></div><span class="nm">雨天战士</span></div>
|
||
<div class="ach"><div class="medal"><svg class="ic" style="color:var(--success)"><use href="#i-flag"/></svg></div><span class="nm">首遛</span></div>
|
||
<div class="ach locked"><div class="medal"><svg class="ic" style="color:var(--ink-3)"><use href="#i-lock"/></svg></div><span class="nm">未解锁</span></div>
|
||
</div>
|
||
|
||
<div class="row" style="padding:6px 16px 8px;justify-content:space-between;border-top:0.5px solid var(--line);">
|
||
<span style="font-size:13px;font-weight:600;">遛狗历史</span>
|
||
<span class="tiny" style="color:var(--accent-deep);cursor:pointer;" onclick="openSheet()">+ 补记</span>
|
||
</div>
|
||
<div class="pad" style="padding-top:0;display:flex;flex-direction:column;gap:8px;">
|
||
<div class="tiny muted" style="padding:2px;">本周</div>
|
||
<div class="hist-row" onclick="go('screen-summary')"><svg class="ic ti"><use href="#i-walk"/></svg><div style="flex:1;"><div style="font-size:13px;">今天 早上 · 豆豆</div><div class="tiny muted">12分34秒 · 1.2km · 3480狗步</div></div></div>
|
||
<div class="hist-row"><svg class="ic ti"><use href="#i-walk"/></svg><div style="flex:1;"><div style="font-size:13px;">昨天 傍晚 · 豆豆</div><div class="tiny muted">18分02秒 · 1.8km · 5100狗步</div></div></div>
|
||
<div class="hist-row" style="border:1px dashed var(--line-2);background:transparent;"><svg class="ic ti" style="color:var(--accent-deep)"><use href="#i-edit"/></svg><div style="flex:1;"><div style="font-size:13px;">前天 · 豆豆 <span class="badge" style="background:var(--surface-2);color:var(--ink-2);">补记</span></div><div class="tiny muted">15分00秒 · 距离未记录</div></div></div>
|
||
</div>
|
||
<div class="pad"><div class="anno"><b>注释：</b>「记录」Tab = 成就墙概览（横向）+ 遛狗历史。成就墙点任意处或「全部 3/12」→ 完整成就页。补记入口在此页和成就页都可达。这是左侧 Tab，解决之前底部双「遛狗」重名问题。</div></div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab active" onclick="go('screen-records')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-list"/></svg><span>记录</span></div>
|
||
<div class="tab-center"><div class="tab-fab" onclick="go('screen-walking')"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-walk"/></svg></div><span>遛狗</span></div>
|
||
<div class="tab" onclick="go('screen-home')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-user"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">成就墙概览 → 完整成就页；「+ 补记」→ 补记弹层；历史项 → 回看成果卡。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 6b: 记录 Tab 空状态 ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">6b</span>记录 Tab · 空状态（新用户）</div>
|
||
<div class="phone" id="screen-records-empty">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar">记录</div>
|
||
<div class="screen-body" style="display:flex;flex-direction:column;">
|
||
<div class="center" style="padding:40px 28px 24px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;">
|
||
<div style="width:84px;height:84px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;">
|
||
<svg class="ic" style="width:40px;height:40px;color:var(--accent-deep);stroke-width:1.6;"><use href="#i-paw"/></svg>
|
||
</div>
|
||
<div style="font-size:16px;font-weight:600;margin-bottom:8px;">豆豆已经在门口等了</div>
|
||
<div class="muted" style="font-size:13px;line-height:1.6;max-width:220px;">第一次遛狗，从下面那个橙色按钮开始。走完一程，这里就有它的第一条记录啦。</div>
|
||
<button class="btn primary" style="width:auto;padding:0 28px;margin-top:22px;" onclick="go('screen-walking')"><svg><use href="#i-walk"/></svg>带豆豆出门</button>
|
||
</div>
|
||
|
||
<div style="border-top:0.5px solid var(--line);">
|
||
<div class="row" style="padding:14px 16px 8px;justify-content:space-between;">
|
||
<span style="font-size:13px;font-weight:600;">成就墙</span><span class="tiny" style="color:var(--ink-3)">0 / 12 待解锁</span>
|
||
</div>
|
||
<div class="pad ach-grid" style="padding-top:0;padding-bottom:16px;">
|
||
<div class="ach locked"><div class="medal"><svg class="ic" style="color:var(--ink-3)"><use href="#i-flag"/></svg></div><span class="nm">首遛</span></div>
|
||
<div class="ach locked"><div class="medal"><svg class="ic" style="color:var(--ink-3)"><use href="#i-medal"/></svg></div><span class="nm">一周不断</span></div>
|
||
<div class="ach locked"><div class="medal"><svg class="ic" style="color:var(--ink-3)"><use href="#i-rain"/></svg></div><span class="nm">雨天战士</span></div>
|
||
<div class="ach locked"><div class="medal"><svg class="ic" style="color:var(--ink-3)"><use href="#i-lock"/></svg></div><span class="nm">还有 9 个</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="pad" style="padding-top:0;"><div class="anno"><b>注释：</b>新用户第一次进「记录」Tab 的空状态。文案俏皮且把视线引向中央遛狗按钮，"带豆豆出门"按钮 = 第二条引导路径。成就墙不藏，显示全灰待解锁（含"首遛"），制造期待。遛完第一次即切换到正常态（第 6 屏）。</div></div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab active" onclick="go('screen-records')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-list"/></svg><span>记录</span></div>
|
||
<div class="tab-center"><div class="tab-fab" onclick="go('screen-walking')"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-walk"/></svg></div><span>遛狗</span></div>
|
||
<div class="tab" onclick="go('screen-home')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-user"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">遛完第一次 → 切换为正常态（第 6 屏）。「带豆豆出门」或中央按钮 → 开始遛狗。</div>
|
||
</div>
|
||
|
||
<!-- ============ FRAME 7: 完整成就页 ============ -->
|
||
<div class="frame-wrap">
|
||
<div class="frame-label"><span class="num">7</span>成就（完整页 · 两入口共用）</div>
|
||
<div class="phone" id="screen-achievements">
|
||
<div class="statusbar"><span>9:41</span><div class="right"><span>●●●</span><span>5G</span><span>100%</span></div></div>
|
||
<div class="navbar"><div class="nav-left" onclick="go('screen-records')"><svg class="ic" style="width:18px;height:18px;"><use href="#i-chev-l"/></svg></div>成就</div>
|
||
<div class="screen-body">
|
||
<div class="center" style="padding:16px;border-bottom:0.5px solid var(--line);">
|
||
<div style="font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;">3<span class="muted" style="font-size:18px;"> / 12</span></div>
|
||
<div class="tiny muted">已解锁成就 · 豆豆</div>
|
||
</div>
|
||
|
||
<div class="section-title">已解锁</div>
|
||
<div class="pad" style="padding-top:0;display:flex;flex-direction:column;gap:8px;">
|
||
<div class="row card" style="padding:11px 12px;gap:11px;">
|
||
<div class="medal" style="width:42px;height:42px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><svg class="ic" style="color:var(--accent-deep)"><use href="#i-medal"/></svg></div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:600;">一周不断</div><div class="tiny muted">连续遛狗满 7 天</div></div>
|
||
<span class="tiny muted">今天</span>
|
||
</div>
|
||
<div class="row card" style="padding:11px 12px;gap:11px;">
|
||
<div class="medal" style="width:42px;height:42px;border-radius:50%;background:#E3EBF2;display:flex;align-items:center;justify-content:center;flex-shrink:0;"><svg class="ic" style="color:#5b86b3"><use href="#i-rain"/></svg></div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:600;">雨天战士</div><div class="tiny muted">雨天也坚持遛狗</div></div>
|
||
<span class="tiny muted">3天前</span>
|
||
</div>
|
||
<div class="row card" style="padding:11px 12px;gap:11px;">
|
||
<div class="medal" style="width:42px;height:42px;border-radius:50%;background:var(--success-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><svg class="ic" style="color:var(--success)"><use href="#i-flag"/></svg></div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:600;">首遛</div><div class="tiny muted">第一次记录遛狗</div></div>
|
||
<span class="tiny muted">92天前</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title">未解锁</div>
|
||
<div class="pad" style="padding-top:0;display:flex;flex-direction:column;gap:8px;">
|
||
<div class="row card" style="padding:11px 12px;gap:11px;opacity:0.6;">
|
||
<div class="medal" style="width:42px;height:42px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><svg class="ic" style="color:var(--ink-3)"><use href="#i-trophy"/></svg></div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:600;">满月坚持</div><div class="tiny muted">连续遛狗满 30 天 · 还差 23 天</div></div>
|
||
</div>
|
||
<div class="row card" style="padding:11px 12px;gap:11px;opacity:0.6;">
|
||
<div class="medal" style="width:42px;height:42px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><svg class="ic" style="color:var(--ink-3)"><use href="#i-walk"/></svg></div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:600;">百里同行</div><div class="tiny muted">累计遛狗满 100 公里 · 还差 8 km</div></div>
|
||
</div>
|
||
<div class="row card" style="padding:11px 12px;gap:11px;opacity:0.6;">
|
||
<div class="medal" style="width:42px;height:42px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><svg class="ic" style="color:var(--ink-3)"><use href="#i-lock"/></svg></div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:600;">早起鸟</div><div class="tiny muted">在 7 点前遛狗 10 次</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pad"><div class="anno"><b>注释：</b>「记录」Tab 和「我的→成就」两个入口指向<b>同一页</b>，文案统一叫「成就」，避免用户误以为是两个东西。未解锁项显示进度（还差 X），强化收集与坚持动机。成就基于「连续/累计/场景」而非「最多」。</div></div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab active" onclick="go('screen-records')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-list"/></svg><span>记录</span></div>
|
||
<div class="tab-center"><div class="tab-fab" onclick="go('screen-walking')"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-walk"/></svg></div><span>遛狗</span></div>
|
||
<div class="tab" onclick="go('screen-home')"><svg class="ic" style="width:22px;height:22px;"><use href="#i-user"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="frame-note">从「记录」Tab 或「我的→成就」均到达此页。返回回到来源页。</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- SVG icon defs -->
|
||
<svg width="0" height="0" style="position:absolute;">
|
||
<defs>
|
||
<g id="i-walk"><path d="M13 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/><path d="M7 21l2.5-7 2-2"/><path d="M11.5 12l1.5-4 3 2 2 1"/><path d="M9.5 7l3-1 2 3"/><path d="M14 14l1 7"/></g>
|
||
<g id="i-user"><circle cx="12" cy="8" r="4"/><path d="M5 21v-1a7 7 0 0 1 14 0v1"/></g>
|
||
<g id="i-dog"><path d="M11 5l-1-1-2 1v3l2 2"/><path d="M13 5l1-1 2 1v3l-2 2"/><path d="M8 10c-1 1-2 3-2 6 0 2 2 3 6 3s6-1 6-3c0-3-1-5-2-6"/><circle cx="10" cy="14" r="0.6" fill="currentColor"/><circle cx="14" cy="14" r="0.6" fill="currentColor"/><path d="M12 16v1"/></g>
|
||
<g id="i-chev-r"><path d="M9 6l6 6-6 6"/></g>
|
||
<g id="i-chev-l"><path d="M15 6l-6 6 6 6"/></g>
|
||
<g id="i-chev-d"><path d="M6 9l6 6 6-6"/></g>
|
||
<g id="i-plus"><path d="M12 5v14M5 12h14"/></g>
|
||
<g id="i-history"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 4v4h4"/><path d="M12 8v4l3 2"/></g>
|
||
<g id="i-medal"><circle cx="12" cy="14" r="5"/><path d="M9 9L7 3h10l-2 6"/><path d="M12 12l1 2 2 .3-1.5 1.4.4 2-1.9-1-1.9 1 .4-2L9 14l2-.3z"/></g>
|
||
<g id="i-settings"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></g>
|
||
<g id="i-map"><path d="M9 4L4 6v14l5-2 6 2 5-2V4l-5 2-6-2z"/><path d="M9 4v14M15 6v14"/></g>
|
||
<g id="i-poo"><path d="M9 21h6c2 0 3-1 3-2.5 0-1-.5-1.5-1-2 .5-.5 1-1 1-2s-1-2-2.5-2c.3-.5.5-1 .5-1.5 0-1.5-1.5-2.5-3-2.5-.5-2-2-3-3.5-2.5C8 4 7 5 7 6.5c-1.5.3-2.5 1.3-2.5 2.5 0 1 .5 1.7 1 2-1 .5-1.5 1.3-1.5 2.3 0 1 .7 1.7 1.5 2-.5.5-1 1-1 2C4.5 20 5.5 21 9 21z"/></g>
|
||
<g id="i-pause"><path d="M9 5v14M15 5v14"/></g>
|
||
<g id="i-play"><path d="M7 5l12 7-12 7z"/></g>
|
||
<g id="i-stop"><rect x="6" y="6" width="12" height="12" rx="2"/></g>
|
||
<g id="i-x"><path d="M6 6l12 12M18 6L6 18"/></g>
|
||
<g id="i-share"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/><path d="M12 3v13M8 7l4-4 4 4"/></g>
|
||
<g id="i-camera"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"/><circle cx="12" cy="13" r="3.5"/></g>
|
||
<g id="i-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></g>
|
||
<g id="i-heart"><path d="M12 20s-7-4.5-7-9.5C5 7 7 5.5 9 5.5c1.5 0 2.5 1 3 2 .5-1 1.5-2 3-2 2 0 4 1.5 4 5C19 15.5 12 20 12 20z"/></g>
|
||
<g id="i-rain"><path d="M6 14a4 4 0 0 1 .5-8 5 5 0 0 1 9.5 1 3.5 3.5 0 0 1 0 7"/><path d="M8 18l-1 2M12 18l-1 2M16 18l-1 2"/></g>
|
||
<g id="i-flag"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></g>
|
||
<g id="i-lock"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></g>
|
||
<g id="i-edit"><path d="M4 20h4L18 10l-4-4L4 16v4z"/><path d="M14 6l4 4"/></g>
|
||
<g id="i-list"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></g>
|
||
<g id="i-trophy"><path d="M7 4h10v4a5 5 0 0 1-10 0z"/><path d="M7 5H4v2a3 3 0 0 0 3 3M17 5h3v2a3 3 0 0 1-3 3"/><path d="M12 13v4M9 21h6M10 17h4l1 4H9z"/></g>
|
||
<g id="i-paw"><ellipse cx="12" cy="15" rx="4" ry="3.2"/><ellipse cx="7" cy="10" rx="1.6" ry="2.2"/><ellipse cx="11" cy="8" rx="1.6" ry="2.4"/><ellipse cx="15" cy="9" rx="1.6" ry="2.3"/><ellipse cx="17.5" cy="12.5" rx="1.5" ry="2"/></g>
|
||
<g id="i-wechat"><path d="M9 4C5 4 2 6.7 2 10c0 1.9 1 3.6 2.6 4.7L4 17l2.6-1.3c.8.2 1.6.3 2.4.3M16 9c3.3 0 6 2.2 6 5s-2.7 5-6 5c-.7 0-1.4-.1-2-.3L11 20l.5-2.2C10 16.8 10 15 10 14c0-2.8 2.7-5 6-5z"/><circle cx="7" cy="9" r="0.5" fill="currentColor"/><circle cx="11" cy="9" r="0.5" fill="currentColor"/><circle cx="14" cy="13" r="0.5" fill="currentColor"/><circle cx="18" cy="13" r="0.5" fill="currentColor"/></g>
|
||
<g id="i-camera-plus"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"/><circle cx="12" cy="13" r="3"/><path d="M12 11.5v3M10.5 13h3" stroke-width="1.4"/></g>
|
||
<g id="i-check"><path d="M5 13l4 4L19 7"/></g>
|
||
</defs>
|
||
</svg>
|
||
|
||
<script>
|
||
function go(id) {
|
||
document.getElementById(id).scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
|
||
const el = document.getElementById(id);
|
||
el.style.transition = 'box-shadow .3s';
|
||
el.style.boxShadow = '0 0 0 3px var(--accent), var(--shadow)';
|
||
setTimeout(()=> el.style.boxShadow = 'var(--shadow)', 900);
|
||
}
|
||
function openConfirm(){ document.getElementById('confirm-end').classList.add('show'); }
|
||
function closeConfirm(){ document.getElementById('confirm-end').classList.remove('show'); }
|
||
function openSheet(){ document.getElementById('sheet-add').classList.add('show'); }
|
||
function closeSheet(){ document.getElementById('sheet-add').classList.remove('show'); }
|
||
|
||
// 演示用：遛狗中计时器自增
|
||
let sec = 12*60+34;
|
||
setInterval(()=>{
|
||
sec++;
|
||
const m = String(Math.floor(sec/60)).padStart(2,'0');
|
||
const s = String(sec%60).padStart(2,'0');
|
||
const t = document.getElementById('live-timer');
|
||
if(t) t.textContent = m+':'+s;
|
||
}, 1000);
|
||
|
||
// chip 单选
|
||
document.querySelectorAll('.field .chips').forEach(group=>{
|
||
group.querySelectorAll('.chip').forEach(c=>{
|
||
c.addEventListener('click', ()=>{
|
||
group.querySelectorAll('.chip').forEach(x=>x.classList.remove('sel'));
|
||
c.classList.add('sel');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|