<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>LifeTrail
人生轨迹|家庭数字档案与传承系统</title>
<meta name="description" content="LifeTrail
人生轨迹:把人生、家族与重要档案,安全传给下一代。" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="LifeTrail" />
<style>
:root{
--green:#0f3d36;
--green2:#185a50;
--gold:#c9a45d;
--bg:#f5f1e8;
--card:#ffffff;
--text:#17231f;
--muted:#6f7b75;
--line:#e5ddcf;
--soft:#edf4f1;
--danger:#9b3f2f;
--shadow:0 10px 30px rgba(15,61,54,.10);
--radius:20px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
background:var(--bg);
color:var(--text);
padding-bottom:86px;
}

.app{
max-width:480px;
margin:0 auto;
min-height:100vh;
background:linear-gradient(180deg,#f8f4ec 0%,#f3efe6 100%);
position:relative;
overflow:hidden;
}

.hero{
background:
radial-gradient(circle at 85% 10%,rgba(201,164,93,.35),transparent 32%),
linear-gradient(145deg,var(--green),#092a25);
color:#fff;
padding:26px 22px 28px;
border-radius:0 0 30px 30px;
position:relative;
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:22px;
}

.brand{
display:flex;
align-items:center;
gap:10px;
}

.logo{
width:42px;
height:42px;
border-radius:13px;
background:linear-gradient(145deg,#e3c889,var(--gold));
display:grid;
place-items:center;
color:#102f2a;
font-weight:900;
font-size:20px;
box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.brand-name{
line-height:1.1;
}

.brand-name strong{
display:block;
font-size:17px;
letter-spacing:.2px;
}

.brand-name span{
display:block;
font-size:11px;
opacity:.78;
margin-top:3px;
}

.secure-badge{
font-size:11px;
border:1px solid rgba(255,255,255,.25);
padding:7px 9px;
border-radius:999px;
color:#f7e8c8;
white-space:nowrap;
}

.hero h1{
margin:0;
font-size:27px;
line-height:1.22;
letter-spacing:-.5px;
}

.hero p{
margin:12px 0 18px;
color:rgba(255,255,255,.82);
font-size:14px;
line-height:1.7;
}

.hero-actions{
display:flex;
gap:10px;
}

.btn{
border:0;
border-radius:14px;
padding:12px 15px;
font-size:14px;
font-weight:700;
cursor:pointer;
transition:.2s;
}

.btn-primary{
background:linear-gradient(145deg,#e2c482,#bd9148);
color:#132f2a;
flex:1;
box-shadow:0 8px 18px rgba(189,145,72,.25);
}

.btn-secondary{
background:rgba(255,255,255,.11);
color:#fff;
border:1px solid rgba(255,255,255,.18);
flex:1;
}

.section{
padding:22px 18px 4px;
}

.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}

.section-title{
margin:0;
font-size:19px;
color:var(--green);
letter-spacing:-.3px;
}

.section-sub{
margin:4px 0 0;
color:var(--muted);
font-size:12px;
line-height:1.5;
}

.more{
border:0;
background:transparent;
color:var(--green2);
font-size:12px;
font-weight:700;
white-space:nowrap;
}

.card{
background:var(--card);
border-radius:var(--radius);
box-shadow:var(--shadow);
border:1px solid rgba(229,221,207,.8);
overflow:hidden;
}

.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:9px;
margin-top:-18px;
padding:0 18px;
position:relative;
z-index:2;
}

.stat{
background:rgba(255,255,255,.96);
border:1px solid var(--line);
border-radius:17px;
padding:13px 8px;
text-align:center;
box-shadow:0 8px 22px rgba(15,61,54,.08);
}

.stat b{
display:block;
font-size:19px;
color:var(--green);
}

.stat span{
display:block;
margin-top:3px;
font-size:11px;
color:var(--muted);
}

.family-map{
padding:16px;
}

.generation{
display:flex;
justify-content:center;
gap:10px;
position:relative;
margin-bottom:18px;
}

.generation:last-child{margin-bottom:0}

.person{
width:92px;
min-height:92px;
border-radius:17px;
background:linear-gradient(180deg,#f7fbf9,#edf4f1);
border:1px solid #d8e5e0;
padding:10px 7px;
text-align:center;
position:relative;
}

.person.central{
background:linear-gradient(180deg,#fff8e8,#f2e3bd);
border-color:#d8bb78;
box-shadow:0 8px 20px rgba(201,164,93,.18);
}

.avatar{
width:34px;
height:34px;
border-radius:50%;
margin:0 auto 6px;
display:grid;
place-items:center;
background:var(--green);
color:#fff;
font-weight:800;
font-size:14px;
}

.person.central .avatar{
background:var(--gold);
color:#14342e;
}

.person strong{
display:block;
font-size:12px;
line-height:1.25;
}

.person span{
display:block;
margin-top:3px;
font-size:10px;
color:var(--muted);
}

.connector{
text-align:center;
color:var(--gold);
font-size:18px;
line-height:1;
margin:-10px 0 8px;
font-weight:900;
}

.timeline{
padding:16px 16px 8px;
}

.time-item{
display:grid;
grid-template-columns:62px 1fr;
gap:12px;
position:relative;
padding-bottom:16px;
}

.time-item:not(:last-child):before{
content:"";
position:absolute;
left:83px;
top:24px;
width:1px;
height:calc(100% - 12px);
background:var(--line);
}

.year{
font-size:12px;
font-weight:900;
color:var(--green);
padding-top:2px;
}

.time-dot{
width:10px;
height:10px;
border-radius:50%;
background:var(--gold);
margin:5px 0 0 76px;
position:absolute;
box-shadow:0 0 0 4px #f7edd6;
}

.time-content{
background:#f8faf9;
border:1px solid #e4ebe7;
border-radius:14px;
padding:10px 12px;
}

.time-content strong{
display:block;
font-size:13px;
margin-bottom:4px;
}

.time-content span{
display:block;
color:var(--muted);
font-size:11px;
line-height:1.5;
}

.folder-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.folder{
background:#fff;
border:1px solid var(--line);
border-radius:17px;
padding:13px 11px;
min-height:92px;
text-align:left;
cursor:pointer;
transition:.2s;
}

.folder:active{transform:scale(.97)}

.folder-num{
width:28px;
height:28px;
border-radius:9px;
background:var(--soft);
color:var(--green);
display:grid;
place-items:center;
font-weight:900;
font-size:12px;
margin-bottom:8px;
}

.folder strong{
display:block;
font-size:13px;
color:var(--text);
line-height:1.25;
}

.folder span{
display:block;
margin-top:5px;
color:var(--muted);
font-size:10px;
line-height:1.35;
}

.sub-panel{
display:none;
margin-top:12px;
background:#fff;
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
}

.sub-panel.active{display:block}

.sub-head{
padding:14px 15px;
background:var(--green);
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
}

.sub-head strong{font-size:14px}
.sub-head button{
border:0;
background:rgba(255,255,255,.13);
color:#fff;
border-radius:999px;
padding:6px 10px;
font-size:11px;
}

.sub-list{padding:8px 15px 12px}

.sub-item{
padding:11px 0;
border-bottom:1px dashed var(--line);
font-size:13px;
display:flex;
gap:9px;
align-items:flex-start;
}

.sub-item:last-child{border-bottom:0}

.check{
width:18px;
height:18px;
border-radius:50%;
background:var(--soft);
color:var(--green);
display:grid;
place-items:center;
font-size:11px;
font-weight:900;
flex:0 0 auto;
margin-top:1px;
}

.sub-item div span{
display:block;
color:var(--muted);
font-size:11px;
margin-top:3px;
line-height:1.4;
}

.permission{
padding:15px;
}

.permission-row{
display:flex;
gap:10px;
align-items:flex-start;
padding:12px 0;
border-bottom:1px dashed var(--line);
}

.permission-row:last-child{border-bottom:0}

.shield{
width:34px;
height:34px;
border-radius:12px;
display:grid;
place-items:center;
background:var(--soft);
color:var(--green);
font-size:17px;
flex:0 0 auto;
}

.permission-row strong{
display:block;
font-size:13px;
margin-bottom:4px;
}

.permission-row span{
display:block;
color:var(--muted);
font-size:11px;
line-height:1.5;
}

.upload-box{
padding:15px;
}

.field{
margin-bottom:11px;
}

.field label{
display:block;
font-size:12px;
font-weight:800;
color:var(--green);
margin-bottom:6px;
}

.field input,.field select,.field textarea{
width:100%;
border:1px solid var(--line);
border-radius:13px;
padding:12px 12px;
font-size:13px;
background:#fbfaf7;
outline:none;
font-family:inherit;
}

.field textarea{
min-height:64px;
resize:vertical;
}

.upload-zone{
border:1.5px dashed #b9c9c3;
background:#f8fbf9;
border-radius:16px;
padding:18px 12px;
text-align:center;
color:var(--muted);
font-size:12px;
line-height:1.6;
margin-bottom:12px;
}

.upload-zone b{
color:var(--green);
font-size:14px;
display:block;
margin-bottom:4px;
}

.record-list{
margin-top:12px;
display:none;
}

.record-list.active{display:block}

.record{
border:1px solid var(--line);
border-radius:15px;
padding:12px;
background:#fbfaf7;
margin-bottom:9px;
}

.record-top{
display:flex;
justify-content:space-between;
gap:10px;
margin-bottom:7px;
}

.record strong{font-size:13px}

.tag{
font-size:10px;
padding:4px 7px;
border-radius:999px;
background:#fff2d2;
color:#805c19;
white-space:nowrap;
height:fit-content;
}

.record p{
margin:0;
color:var(--muted);
font-size:11px;
line-height:1.55;
}

.service-grid{
display:grid;
grid-template-columns:1fr;
gap:10px;
}

.service{
background:#fff;
border:1px solid var(--line);
border-radius:17px;
padding:14px;
display:flex;
gap:12px;
align-items:flex-start;
}

.service-icon{
width:38px;
height:38px;
border-radius:13px;
background:linear-gradient(145deg,#e8d49b,#c9a45d);
display:grid;
place-items:center;
color:#14342e;
font-weight:900;
flex:0 0 auto;
}

.service strong{
display:block;
font-size:13px;
margin-bottom:4px;
}

.service span{
display:block;
color:var(--muted);
font-size:11px;
line-height:1.5;
}

.bottom-nav{
position:fixed;
left:50%;
transform:translateX(-50%);
bottom:0;
width:100%;
max-width:480px;
background:rgba(255,255,255,.94);
backdrop-filter:blur(16px);
border-top:1px solid var(--line);
display:grid;
grid-template-columns:repeat(5,1fr);
padding:7px 8px calc(8px + env(safe-area-inset-bottom));
z-index:20;
}

.nav-item{
border:0;
background:transparent;
color:#7a8580;
font-size:10px;
display:flex;
flex-direction:column;
align-items:center;
gap:3px;
padding:4px 2px;
font-family:inherit;
}

.nav-item i{
font-style:normal;
font-size:19px;
line-height:1;
}

.nav-item.active{
color:var(--green);
font-weight:800;
}

.page{display:none}
.page.active{display:block}

.modal-mask{
position:fixed;
inset:0;
background:rgba(8,25,22,.45);
display:none;
align-items:flex-end;
justify-content:center;
z-index:50;
padding:16px;
}

.modal-mask.active{display:flex}

.modal{
width:100%;
max-width:448px;
background:#fff;
border-radius:24px;
padding:18px;
box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.modal h3{
margin:0 0 8px;
color:var(--green);
font-size:18px;
}

.modal p{
margin:0 0 14px;
color:var(--muted);
font-size:12px;
line-height:1.6;
}

.modal-actions{
display:flex;
gap:10px;
}

.modal-actions button{
flex:1;
}

.plain{
background:#f4f6f5;
color:var(--green);
}

.notice{
margin:12px 18px 0;
padding:11px 13px;
border-radius:15px;
background:#fff8e8;
border:1px solid #ead7a8;
color:#76581d;
font-size:11px;
line-height:1.55;
}

@media(min-width:481px){
body{background:#e9e3d7}
.app{box-shadow:0 0 50px rgba(0,0,0,.08)}
}
</style>
</head>
<body>
<div class="app">

<!--
首页 -->
<section class="page active" id="page-home">
<header class="hero">
<div class="topbar">
<div class="brand">
<div class="logo">LT</div>
<div class="brand-name">
<strong>LifeTrail
人生轨迹</strong>
<span>
家庭数字档案与传承系统</span>
</div>
</div>
<div class="secure-badge">VF
档案体系</div>
</div>

<h1>
把人生、家族与重要档案,<br>安全传给下一代</h1>
<p>
从证件、财税、房产,到家族故事与人生时间轴,LifeTrail 帮个人和家庭建立一套清晰、安全、可交接的数字档案系统。</p>
<div class="hero-actions">
<button class="btn btn-primary" onclick="goPage('archive')">
查看VF档案</button>
<button class="btn btn-secondary" onclick="goPage('upload')">
上传资料</button>
</div>
</header>

<div class="stats">
<div class="stat"><b>10</b><span>VF
一级目录</span></div>
<div class="stat"><b>3
代</b><span>家族关系</span></div>
<div class="stat"><b>4
层</b><span>传承权限</span></div>
</div>

<div class="notice">
V0.2
商业演示版:当前用于产品展示和流程验证,不会真实上传或保存敏感文件。
</div>

<div class="section">
<div class="section-head">
<div>
<h2 class="section-title">
三代家族关系</h2>
<p class="section-sub">
人物、关系、档案与故事连接在一起</p>
</div>
<button class="more" onclick="goPage('family')">
展开</button>
</div>
<div class="card family-map">
<div class="generation">
<div class="person">
<div class="avatar">
父</div>
<strong>
父辈</strong>
<span>
根脉资料</span>
</div>
<div class="person">
<div class="avatar">
母</div>
<strong>
母辈</strong>
<span>
家族记忆</span>
</div>
</div>
<div class="connector">↓</div>
<div class="generation">
<div class="person central">
<div class="avatar">
我</div>
<strong>
本人</strong>
<span>
档案管理人</span>
</div>
<div class="person">
<div class="avatar">
偶</div>
<strong>
配偶</strong>
<span>
共同资料</span>
</div>
</div>
<div class="connector">↓</div>
<div class="generation">
<div class="person">
<div class="avatar">
子</div>
<strong>
子女</strong>
<span>
继承人</span>
</div>
<div class="person">
<div class="avatar">
女</div>
<strong>
子女</strong>
<span>
家族延续</span>
</div>
</div>
</div>
</div>

<div class="section">
<div class="section-head">
<div>
<h2 class="section-title">
人生轨迹时间轴</h2>
<p class="section-sub">
把重要年份、文件、照片和故事串起来</p>
</div>
</div>
<div class="card timeline">
<div class="time-item">
<div class="year">1963</div>
<div class="time-content">
<strong>
出生与早期成长</strong>
<span>
出生证明、老照片、家庭记忆、祖籍资料。</span>
</div>
</div>
<div class="time-item">
<div class="year">
教育</div>
<div class="time-content">
<strong>
河南农大 / 南开</strong>
<span>
学历、课程、证书、同学与重要人生节点。</span>
</div>
</div>
<div class="time-item">
<div class="year">2008</div>
<div class="time-content">
<strong>
移民加拿大</strong>
<span>
身份文件、登陆记录、海外工作与生活资料。</span>
</div>
</div>
<div class="time-item">
<div class="year">
现在</div>
<div class="time-content">
<strong>
建立家庭数字档案</strong>
<span>
整理VF目录、财税房产、家族根脉与传承权限。</span>
</div>
</div>
</div>
</div>

<div class="section">
<div class="section-head">
<div>
<h2 class="section-title">
核心服务</h2>
<p class="section-sub">
工具 + 人工整理 + 年度维护</p>
</div>
</div>
<div class="service-grid">
<div class="service">
<div class="service-icon">
档</div>
<div>
<strong>
家庭档案整理</strong>
<span>
证件、法律、税务、房产、保险、投资资料统一归档。</span>
</div>
</div>
<div class="service">
<div class="service-icon">
族</div>
<div>
<strong>
家族树与人生故事</strong>
<span>
记录人物关系、重要年份、老照片、访谈和年度胶囊。</span>
</div>
</div>
<div class="service">
<div class="service-icon">
承</div>
<div>
<strong>
继承权限交接</strong>
<span>
设定可见权限、继承人、定期确认和资料交接流程。</span>
</div>
</div>
</div>
</div>
</section>

<!--
家族页 -->
<section class="page" id="page-family">
<div class="hero">
<div class="topbar">
<div class="brand">
<div class="logo">
族</div>
<div class="brand-name">
<strong>
家族关系</strong>
<span>Family Tree</span>
</div>
</div>
</div>
<h1>
让每一位家人,<br>都有自己的档案位置</h1>
<p>
家族成员不再只是姓名,而是与文件、照片、故事、权限和传承关系连接。</p>
</div>

<div class="section">
<div class="card family-map">
<div class="generation">
<div class="person">
<div class="avatar">
祖</div>
<strong>
祖父母</strong>
<span>
家族根脉</span>
</div>
<div class="person">
<div class="avatar">
外</div>
<strong>
外祖父母</strong>
<span>
祖籍故事</span>
</div>
</div>
<div class="connector">↓</div>
<div class="generation">
<div class="person">
<div class="avatar">
父</div>
<strong>
父亲</strong>
<span>
证件与回忆</span>
</div>
<div class="person">
<div class="avatar">
母</div>
<strong>
母亲</strong>
<span>
家庭资料</span>
</div>
</div>
<div class="connector">↓</div>
<div class="generation">
<div class="person central">
<div class="avatar">
我</div>
<strong>
本人</strong>
<span>
档案管理人</span>
</div>
<div class="person">
<div class="avatar">
偶</div>
<strong>
配偶</strong>
<span>
共同资产</span>
</div>
</div>
<div class="connector">↓</div>
<div class="generation">
<div class="person">
<div class="avatar">
子</div>
<strong>
子女</strong>
<span>
继承权限</span>
</div>
<div class="person">
<div class="avatar">
孙</div>
<strong>
孙辈</strong>
<span>
未来传承</span>
</div>
</div>
</div>
</div>

<div class="section">
<div class="section-head">
<div>
<h2 class="section-title">
每个人物可关联</h2>
<p class="section-sub">
点击人物后进入个人档案,当前为演示结构</p>
</div>
</div>
<div class="service-grid">
<div class="service">
<div class="service-icon">
证</div>
<div><strong>
身份与法律文件</strong><span>出生、婚姻、护照、公证、遗嘱、授权文件。</span></div>
</div>
<div class="service">
<div class="service-icon">
财</div>
<div><strong>
资产与责任</strong><span>银行、税务、房产、保险、投资、贷款。</span></div>
</div>
<div class="service">
<div class="service-icon">
忆</div>
<div><strong>
照片与人生故事</strong><span>老照片、访谈录音、重要年份、家族记忆。</span></div>
</div>
</div>
</div>
</section>

<!--
档案页 -->
<section class="page" id="page-archive">
<div class="hero">
<div class="topbar">
<div class="brand">
<div class="logo">VF</div>
<div class="brand-name">
<strong>VF
十大档案</strong>
<span>V-Final
最终目录</span>
</div>
</div>
</div>
<h1>
固定分类,避免资料<br>越整理越乱</h1>
<p>
所有资料先进入十大一级目录,再进入人物、年份、权限和状态管理。</p>
</div>

<div class="section">
<div class="folder-grid">
<button class="folder" onclick="showFolder('01')">
<div class="folder-num">01</div>
<strong>
证件与法律</strong>
<span>
身份、护照、公证、法律文书</span>
</button>
<button class="folder" onclick="showFolder('02')">
<div class="folder-num">02</div>
<strong>
教育学习</strong>
<span>
学历、课程、培训、证书</span>
</button>
<button class="folder" onclick="showFolder('03')">
<div class="folder-num">03</div>
<strong>
工作与生意</strong>
<span>
贷款经纪、物业管理、业务资料</span>
</button>
<button class="folder" onclick="showFolder('04')">
<div class="folder-num">04</div>
<strong>
财税金融</strong>
<span>
银行、税务、投资、保险</span>
</button>
<button class="folder" onclick="showFolder('05')">
<div class="folder-num">05</div>
<strong>
房产车辆</strong>
<span>
买卖、物业、车辆、Permit</span>
</button>
<button class="folder" onclick="showFolder('06')">
<div class="folder-num">06</div>
<strong>
健康与爱好</strong>
<span>
医疗、体检、运动、兴趣</span>
</button>
<button class="folder" onclick="showFolder('07')">
<div class="folder-num">07</div>
<strong>
声像资料</strong>
<span>
照片、视频、录音、纪念资料</span>
</button>
<button class="folder" onclick="showFolder('08')">
<div class="folder-num">08</div>
<strong>
成长历程</strong>
<span>
日记、作品、荣誉、人生节点</span>
</button>
<button class="folder" onclick="showFolder('09')">
<div class="folder-num">09</div>
<strong>
家族根脉</strong>
<span>
家谱、祖籍、亲属、家族故事</span>
</button>
<button class="folder" onclick="showFolder('10')">
<div class="folder-num">10</div>
<strong>
待处理文档</strong>
<span>
临时收件箱、待命名、待归档</span>
</button>
</div>

<div class="sub-panel" id="folder-panel">
<div class="sub-head">
<strong id="folder-title">04
财税金融</strong>
<button onclick="closeFolder()">
收起</button>
</div>
<div class="sub-list" id="folder-content"></div>
</div>
</div>
</section>

<!--
上传页 -->
<section class="page" id="page-upload">
<div class="hero">
<div class="topbar">
<div class="brand">
<div class="logo">
传</div>
<div class="brand-name">
<strong>
资料上传</strong>
<span>
快速归档演示</span>
</div>
</div>
</div>
<h1>
先收进来,<br>再自动归类、补全和交接</h1>
<p>
当前为前端演示,提交后只在本页面生成模拟记录,不会真实上传文件。</p>
</div>

<div class="section">
<div class="card upload-box">
<div class="upload-zone">
<b>
点击或拖入文件</b>
支持 PDF、照片、扫描件、Word、Excel、录音、视频<br>
正式版将进行加密存储与权限管理
</div>

<div class="field">
<label>
资料名称</label>
<input id="docName" placeholder="
例如:2025年TFSA年度账单" />
</div>

<div class="field">
<label>
所属人物</label>
<select id="docPerson">
<option>
本人</option>
<option>
配偶</option>
<option>
子女</option>
<option>
父亲</option>
<option>
母亲</option>
<option>
家庭共同资料</option>
<option>
公司/生意资料</option>
</select>
</div>

<div class="field">
<label>VF
分类</label>
<select id="docCategory">
<option>01_
证件与法律</option>
<option>02_
教育学习</option>
<option>03_
工作与生意</option>
<option selected>04_
财税金融</option>
<option>05_
房产车辆</option>
<option>06_
健康与爱好</option>
<option>07_
声像资料</option>
<option>08_
成长历程</option>
<option>09_
家族根脉</option>
<option>10_
待处理文档</option>
</select>
</div>

<div class="field">
<label>
访问权限</label>
<select id="docPermission">
<option>
仅本人可见</option>
<option>
配偶可见</option>
<option>
家庭成员可见</option>
<option>
继承人在指定条件后可见</option>
<option>
专业顾问可见</option>
</select>
</div>

<div class="field">
<label>
备注</label>
<textarea id="docNote" placeholder="
例如:每年更新一次,和税务文件放在一起"></textarea>
</div>

<button class="btn btn-primary" style="width:100%" onclick="addRecord()">
生成模拟档案记录</button>

<div class="record-list" id="recordList">
<div class="section-head" style="margin:16px 0 8px">
<div>
<h2 class="section-title" style="font-size:16px">
已生成记录</h2>
</div>
</div>
<div id="records"></div>
</div>
</div>
</div>
</section>

<!--
我的/权限页 -->
<section class="page" id="page-me">
<div class="hero">
<div class="topbar">
<div class="brand">
<div class="logo">
承</div>
<div class="brand-name">
<strong>
传承权限</strong>
<span>Legacy Access</span>
</div>
</div>
</div>
<h1>
不是把资料锁起来,<br>而是在正确的时候交给正确的人</h1>
<p>LifeTrail
的重点不是单纯存储,而是长期维护、权限确认和安全交接。</p>
</div>

<div class="section">
<div class="card permission">
<div class="permission-row">
<div class="shield">1</div>
<div>
<strong>
本人权限</strong>
<span>
完整查看、编辑、下载、授权和销毁个人资料。</span>
</div>
</div>
<div class="permission-row">
<div class="shield">2</div>
<div>
<strong>
共同权限</strong>
<span>
夫妻或家庭成员仅可查看共同资产、房产、保险等指定资料。</span>
</div>
</div>
<div class="permission-row">
<div class="shield">3</div>
<div>
<strong>
继承权限</strong>
<span>
继承人在预设条件满足后,按目录逐步获得访问权。</span>
</div>
</div>
<div class="permission-row">
<div class="shield">4</div>
<div>
<strong>
顾问权限</strong>
<span>
律师、会计师、财务顾问可在授权期限内访问指定文件。</span>
</div>
</div>
</div>
</div>

<div class="section">
<div class="section-head">
<div>
<h2 class="section-title">
商业版本建议</h2>
<p class="section-sub">
从低成本MVP开始,不一开始做重系统</p>
</div>
</div>
<div class="service-grid">
<div class="service">
<div class="service-icon">
自</div>
<div><strong>
自助版</strong><span>模板、目录、上传、基础权限,用于获客。</span></div>
</div>
<div class="service">
<div class="service-icon">
整</div>
<div><strong>
家庭整理版</strong><span>远程指导、资料命名、扫描分类、年度更新。</span></div>
</div>
<div class="service">
<div class="service-icon">
传</div>
<div><strong>
家族传承版</strong><span>家族树、人生访谈、纪念册、继承交接和高价值服务。</span></div>
</div>
</div>
</div>
</section>

<nav class="bottom-nav">
<button class="nav-item active" data-page="home" onclick="goPage('home')"><i>⌂</i>
首页</button>
<button class="nav-item" data-page="family" onclick="goPage('family')"><i>
♢</i>家族</button>
<button class="nav-item" data-page="archive" onclick="goPage('archive')"><i>
▤</i>档案</button>
<button class="nav-item" data-page="upload" onclick="goPage('upload')"><i>
+</i>上传</button>
<button class="nav-item" data-page="me" onclick="goPage('me')"><i>
◉</i>我的</button>
</nav>
</div>

<div class="modal-mask" id="tipModal">
<div class="modal">
<h3 id="modalTitle">
演示提示</h3>
<p id="modalText">
内容</p>
<div class="modal-actions">
<button class="btn plain" onclick="closeModal()">
知道了</button>
<button class="btn btn-primary" onclick="closeModal();goPage('upload')">
去上传</button>
</div>
</div>
</div>

<script>
const folderData = {
"01":{
title:"01
证件与法律",
items:[
["
身份证、护照、公民卡、驾照","身份识别与有效期管理"],
["
出生证、结婚证、离婚证、亲属关系证明","家庭身份关系"],
["
公证、授权书、遗嘱、法律文书","交接与法律证明"],
["
法院文件、律师往来、重要协议","纠纷处理与留痕"]
]
},
"02":{
title:"02
教育学习",
items:[
["
学历、学位、成绩单、毕业证书","教育经历证明"],
["
课程、培训、证书、执照","职业能力记录"],
["
学校申请、录取、缴费资料","继续教育资料"],
["
学习笔记、作品、荣誉资料","成长与能力沉淀"]
]
},
"03":{
title:"03
工作与生意",
items:[
["
简历、雇佣记录、推荐信","职业履历"],
["
公司注册、营业执照、章程","公司基础资料"],
["
贷款经纪、物业管理、客户资料","业务档案"],
["
合同、发票、供应商、运营文件","生意运营记录"]
]
},
"04":{
title:"04
财税金融",
items:[
["
银行账户、信用卡、RRSP、TFSA","账户清单与机构信息"],
["
报税、NOA、收入与支出凭证","年度税务资料"],
["
股票基金、保险、贷款与账单","资产负债与投资记录"],
["
会计师、财务顾问、授权联系人","专业顾问与权限"]
]
},
"05":{
title:"05
房产车辆",
items:[
["
中加房产合同、产权、贷款与地税","房产全生命周期资料"],
["
车辆登记、保险、Permit、维修记录","车辆资产资料"],
["
水电网气、管理费、搬家与装修","居住成本与维护"],
["
租约、租客、押金、维修通知","租赁物业管理"]
]
},
"06":{
title:"06
健康与爱好",
items:[
["
体检、处方、病历、检查报告","健康档案"],
["
保险理赔、牙医、专科医生资料","医疗服务记录"],
["
运动、饮食、血糖血压记录","健康管理"],
["
兴趣、旅行、运动、社团活动","生活质量与爱好"]
]
},
"07":{
title:"07
声像资料",
items:[
["
照片、视频、录音、扫描件","家庭影像资产"],
["
老照片修复、人物标注、年份标注","记忆整理"],
["
访谈录音、口述历史、家族故事","人生故事资产"],
["
重要仪式、旅行、纪念日资料","共同回忆"]
]
},
"08":{
title:"08
成长历程",
items:[
["
日记、信件、文章、作品","个人表达与创作"],
["
奖状、荣誉、重要人生节点","成就记录"],
["
子女成长、家庭年度总结","家庭成长档案"],
["
年度胶囊、未来计划、人生目标","时间与愿景"]
]
},
"09":{
title:"09
家族根脉",
items:[
["
家谱、家族树、亲属关系图","家族结构"],
["
祖籍、迁徙、祖坟、宗族资料","根脉信息"],
["
长辈故事、家训、重要遗物","家族精神传承"],
["
纪念日、忌日、家庭传统","家族仪式与记忆"]
]
},
"10":{
title:"10
待处理文档",
items:[
["
临时收件箱","所有未分类资料先放这里"],
["
待命名文件","统一命名后归档"],
["
待补充资料","缺少日期、人物或来源"],
["
待确认销毁/保留","定期清理与复核"]
]
}
};

function goPage(pageId){
document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
document.getElementById('page-'+pageId).classList.add('active');
document.querySelectorAll('.nav-item').forEach(n=>{
n.classList.toggle('active',
n.dataset.page === pageId);
});
window.scrollTo({top:0,behavior:'smooth'});
}

function showFolder(code){
const data = folderData[code];
document.getElementById('folder-title').textContent = data.title;
const html = data.items.map(item=>`
<div class="sub-item">
<div class="check">
✓</div>
<div>${item[0]}<span>${item[1]}</span></div>
</div>
`).join('');
document.getElementById('folder-content').innerHTML = html;
document.getElementById('folder-panel').classList.add('active');
setTimeout(()=>{
document.getElementById('folder-panel').scrollIntoView({behavior:'smooth',block:'nearest'});
},80);
}

function closeFolder(){
document.getElementById('folder-panel').classList.remove('active');
}

function addRecord(){
const name = document.getElementById('docName').value.trim() || '
未命名资料';
const person = document.getElementById('docPerson').value;
const category = document.getElementById('docCategory').value;
const permission = document.getElementById('docPermission').value;
const note = document.getElementById('docNote').value.trim() || '
暂无备注';
const now = new Date();
const date = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`;

const record = document.createElement('div');
record.className = 'record';
record.innerHTML = `
<div class="record-top">
<strong>${name}</strong>
<span class="tag">
待整理</span>
</div>
<p>
所属人物:${person}<br>
VF
分类:${category}<br>
权限:${permission}<br>
日期:${date}<br>
备注:${note}</p>
`;

document.getElementById('records').prepend(record);
document.getElementById('recordList').classList.add('active');

document.getElementById('docName').value = '';
document.getElementById('docNote').value = '';

showModal('
模拟记录已生成','这表示正式版中,资料会进入待整理队列,并根据人物、分类、权限和日期进入档案系统。');
}

function showModal(title,text){
document.getElementById('modalTitle').textContent = title;
document.getElementById('modalText').textContent = text;
document.getElementById('tipModal').classList.add('active');
}

function closeModal(){
document.getElementById('tipModal').classList.remove('active');
}
</script>
</body>
</html>