Home Explore Help
Register Sign In
root
/
BindVault
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
BindVault
/
index.html

index.html 14 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 
  1. <!doctype html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>BindVault MVP</title>
    7. 

  7.     <link rel="stylesheet" href="styles.css" />
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <section id="license-gate" class="license-gate" hidden>
    11. 

  11.       <div class="license-card">
    12. 

  12.         <button class="license-close" type="button" data-close-license aria-label="关闭">×</button>
    13. 

  13.         <div class="license-brand">
    14. 

  14.           <div class="brand-mark">BV</div>
    15. 

  15.           <div>
    16. 

  16.             <h1>BindVault</h1>
    17. 

  17.             <p>个人数字资产台账</p>
    18. 

  18.           </div>
    19. 

  19.         </div>
    20. 

  20.         <div class="license-tabs">
    21. 

  21.           <button class="license-tab active" data-tab="register">获取激活码</button>
    22. 

  22.           <button class="license-tab" data-tab="activate">已有激活码</button>
    23. 

  23.         </div>
    24. 

  24.         <div id="license-panel-register" class="license-panel">
    25. 

  25.           <p class="license-desc">输入邮箱，系统会自动发送一个 <strong>7 天免费激活码</strong>。</p>
    26. 

  26.           <form id="license-register-form" class="license-form">
    27. 

  27.             <input id="license-email" type="email" placeholder="[email protected]" autocomplete="email" required />
    28. 

  28.             <button class="primary-button" type="submit" id="license-register-btn">发送激活码</button>
    29. 

  29.           </form>
    30. 

  30.           <p id="license-register-msg" class="license-msg" hidden></p>
    31. 

  31.         </div>
    32. 

  32.         <div id="license-panel-activate" class="license-panel" hidden>
    33. 

  33.           <p class="license-desc">输入邮件中收到的激活码以继续使用。</p>
    34. 

  34.           <form id="license-activate-form" class="license-form">
    35. 

  35.             <input id="license-key" type="text" placeholder="BV-XXXXXXXX-XXXXXXXX-XXXXXXXX" autocomplete="off" spellcheck="false" required />
    36. 

  36.             <button class="primary-button" type="submit" id="license-activate-btn">激活</button>
    37. 

  37.           </form>
    38. 

  38.           <p id="license-activate-msg" class="license-msg" hidden></p>
    39. 

  39.         </div>
    40. 

  40.       </div>
    41. 

  41.     </section>
    42. 

  42. 

  43.     <div class="app-shell" hidden>
    44. 

  44.       <aside class="sidebar">
    45. 

  45.         <div class="brand">
    46. 

  46.           <div class="brand-mark">BV</div>
    47. 

  47.           <div>
    48. 

  48.             <h1>BindVault</h1>
    49. 

  49.             <p>个人数字资产台账</p>
    50. 

  50.           </div>
    51. 

  51.         </div>
    52. 

  52.         <nav id="nav" class="nav"></nav>
    53. 

  53.         <div class="account-menu-wrap sidebar-account">
    54. 

  54.           <div id="account-menu" class="account-menu account-menu-up" hidden>
    55. 

  55.             <div class="account-menu-license">
    56. 

  56.               <span id="account-menu-tier-label">Free 套餐</span>
    57. 

  57.               <strong id="account-menu-license-key">未激活</strong>
    58. 

  58.               <small id="account-menu-license-status">-</small>
    59. 

  59.             </div>
    60. 

  60.             <button type="button" data-account-action="upgrade">升级套餐</button>
    61. 

  61.             <button type="button" data-account-action="profile">个人中心</button>
    62. 

  62.             <button type="button" data-account-action="guide">新手指引</button>
    63. 

  63.             <button type="button" data-account-action="signout">退出登录</button>
    64. 

  64.           </div>
    65. 

  65.           <button class="sidebar-user" type="button" id="topbar-avatar" aria-label="个人中心" aria-expanded="false">
    66. 

  66.             <span class="sidebar-user-avatar" id="sidebar-user-avatar">B</span>
    67. 

  67.             <span class="sidebar-user-info">
    68. 

  68.               <strong id="sidebar-user-email">未激活</strong>
    69. 

  69.               <small id="sidebar-user-tier">Free</small>
    70. 

  70.             </span>
    71. 

  71.             <svg class="sidebar-user-caret" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 9l4-4 4 4M16 15l-4 4-4-4"/></svg>
    72. 

  72.           </button>
    73. 

  73.         </div>
    74. 

  74.       </aside>
    75. 

  75. 

  76.       <main class="main">
    77. 

  77.         <header class="topbar">
    78. 

  78.           <div class="topbar-heading">
    79. 

  79.             <p class="eyebrow">MVP workspace</p>
    80. 

  80.             <h2 id="page-title">Dashboard</h2>
    81. 

  81.           </div>
    82. 

  82.           <div class="topbar-actions">
    83. 

  83.             <label class="global-search">
    84. 

  84.               <svg class="search-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4 4"/></svg>
    85. 

  85.               <input id="global-search" type="search" placeholder="搜索资源、账号或关系..." />
    86. 

  86.             </label>
    87. 

  87.             <label class="language-select-wrap" aria-label="Language">
    88. 

  88.               <select id="language-select">
    89. 

  89.                 <option value="zh">中文</option>
    90. 

  90.                 <option value="en">English</option>
    91. 

  91.               </select>
    92. 

  92.             </label>
    93. 

  93.             <button id="topbar-refresh" class="icon-pill" type="button" title="刷新" aria-label="刷新">
    94. 

  94.               <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 0 1 13.7-5.6L20 4M20 4v6h-6"/><path d="M20 12a8 8 0 0 1-13.7 5.6L4 20M4 20v-6h6"/></svg>
    95. 

  95.             </button>
    96. 

  96.             <button id="topbar-new" class="primary-button topbar-primary" type="button">
    97. 

  97.               <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
    98. 

  98.               <span>新建绑定</span>
    99. 

  99.             </button>
    100. 

  100.             <button id="topbar-bell" class="icon-pill" type="button" title="通知" aria-label="通知">
    101. 

  101.               <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2H4.5L6 16Z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>
    102. 

  102.               <span class="bell-dot" aria-hidden="true"></span>
    103. 

  103.             </button>
    104. 

  104.             <button id="seed-demo" class="ghost-button utility-action" type="button">示例数据</button>
    105. 

  105.             <button id="export-json" class="ghost-button utility-action" type="button">导出 JSON</button>
    106. 

  106.             <label class="file-button utility-action">
    107. 

  107.               导入 JSON
    108. 

  108.               <input id="import-json" type="file" accept="application/json" />
    109. 

  109.             </label>
    110. 

  110.           </div>
    111. 

  111.         </header>
    112. 

  112. 

  113.         <section id="content" class="content"></section>
    114. 

  114.       </main>
    115. 

  115.     </div>
    116. 

  116. 

  117.     <div id="toast" class="toast" role="status" aria-live="polite" popover="manual">
    118. 

  118.       <span id="toast-icon" class="toast-icon">OK</span>
    119. 

  119.       <span id="toast-message">已保存</span>
    120. 

  120.     </div>
    121. 

  121. 

  122.     <dialog id="record-dialog" class="dialog">
    123. 

  123.       <form id="record-form" method="dialog">
    124. 

  124.         <div class="dialog-head">
    125. 

  125.           <div>
    126. 

  126.             <p class="eyebrow" id="dialog-kicker">Record</p>
    127. 

  127.             <h3 id="dialog-title">新增</h3>
    128. 

  128.           </div>
    129. 

  129.           <button class="icon-button" value="cancel" type="button" data-close-dialog aria-label="关闭">×</button>
    130. 

  130.         </div>
    131. 

  131.         <div id="form-fields" class="form-grid"></div>
    132. 

  132.         <div class="dialog-actions">
    133. 

  133.           <button class="ghost-button" value="cancel" type="button" data-close-dialog>取消</button>
    134. 

  134.           <button class="primary-button" id="save-record" value="default" type="submit">保存</button>
    135. 

  135.         </div>
    136. 

  136.       </form>
    137. 

  137.     </dialog>
    138. 

  138. 

  139.     <dialog id="onboarding-dialog" class="onboarding-dialog">
    140. 

  140.       <div class="onboarding-panel">
    141. 

  141.         <div class="onboarding-head">
    142. 

  142.           <div>
    143. 

  143.             <p class="eyebrow">Getting Started</p>
    144. 

  144.             <h3>快速建立第一条账号链路</h3>
    145. 

  145.           </div>
    146. 

  146.           <button class="icon-button" type="button" data-close-onboarding aria-label="关闭">×</button>
    147. 

  147.         </div>
    148. 

  148.         <div class="onboarding-steps">
    149. 

  149.           <article class="onboarding-step">
    150. 

  150.             <span class="onboarding-step-index">1</span>
    151. 

  151.             <div>
    152. 

  152.               <h4>先填写邮箱</h4>
    153. 

  153.               <p>先录入一个可收信邮箱，马上用它作为账号登录邮箱。</p>
    154. 

  154.               <button class="primary-button" type="button" data-guide-action="email">新增邮箱</button>
    155. 

  155.             </div>
    156. 

  156.           </article>
    157. 

  157.           <article class="onboarding-step">
    158. 

  158.             <span class="onboarding-step-index">2</span>
    159. 

  159.             <div>
    160. 

  160.               <h4>新建账号并选择登录邮箱</h4>
    161. 

  161.               <p>平台可以填 BindVault，登录邮箱选择刚才录入的邮箱。</p>
    162. 

  162.               <button class="ghost-button" type="button" data-guide-action="account">新增账号</button>
    163. 

  163.             </div>
    164. 

  164.           </article>
    165. 

  165.           <article class="onboarding-step">
    166. 

  166.             <span class="onboarding-step-index">3</span>
    167. 

  167.             <div>
    168. 

  168.               <h4>自动生成登录绑定</h4>
    169. 

  169.               <p>保存账号后，系统会自动创建邮箱到账号的登录绑定关系。</p>
    170. 

  170.               <button class="ghost-button" type="button" data-guide-action="account">继续账号</button>
    171. 

  171.             </div>
    172. 

  172.           </article>
    173. 

  173.           <article class="onboarding-step">
    174. 

  174.             <span class="onboarding-step-index">4</span>
    175. 

  175.             <div>
    176. 

  176.               <h4>查看绑定拓扑</h4>
    177. 

  177.               <p>进入绑定关系页，查看邮箱和账号之间的第一条资产链路。</p>
    178. 

  178.               <button class="ghost-button" type="button" data-guide-action="binding">查看拓扑</button>
    179. 

  179.             </div>
    180. 

  180.           </article>
    181. 

  181.         </div>
    182. 

  182.         <div class="onboarding-actions">
    183. 

  183.           <button class="ghost-button" type="button" data-close-onboarding>稍后再说</button>
    184. 

  184.           <button class="primary-button" type="button" data-guide-action="email">开始录入</button>
    185. 

  185.         </div>
    186. 

  186.       </div>
    187. 

  187.     </dialog>
    188. 

  188. 

  189.     <dialog id="pricing-dialog" class="dialog pricing-dialog">
    190. 

  190.       <div class="pricing-head">
    191. 

  191.         <div>
    192. 

  192.           <p class="eyebrow">Upgrade</p>
    193. 

  193.           <h3>选择适合你的套餐</h3>
    194. 

  194.           <p class="pricing-sub">从基础台账到全功能解锁，按需升级。</p>
    195. 

  195.         </div>
    196. 

  196.         <button class="icon-button" type="button" data-close-pricing aria-label="关闭">×</button>
    197. 

  197.       </div>
    198. 

  198.       <div class="pricing-grid">
    199. 

  199.         <article class="pricing-card" data-tier-card="free">
    200. 

  200.           <header>
    201. 

  201.             <h4>Free</h4>
    202. 

  202.             <div class="pricing-price"><span class="pricing-currency">¥</span><span class="pricing-amount">0</span><span class="pricing-period">/ 月</span></div>
    203. 

  203.             <p class="pricing-desc">本地管理你的数字资产</p>
    204. 

  204.           </header>
    205. 

  205.           <button class="pricing-cta pricing-cta-current" type="button" data-pricing-action="free">当前套餐</button>
    206. 

  206.           <ul class="pricing-features">
    207. 

  207.             <li>基础资产管理（手机 / 邮箱 / 域名）</li>
    208. 

  208.             <li>账号与绑定关系图</li>
    209. 

  209.             <li>风险事件追踪</li>
    210. 

  210.             <li>本地 SQLite 存储</li>
    211. 

  211.             <li>JSON 导入 / 导出</li>
    212. 

  212.             <li>最多 3 台设备使用</li>
    213. 

  213.           </ul>
    214. 

  214.         </article>
    215. 

  215.         <article class="pricing-card pricing-card-pro" data-tier-card="pro">
    216. 

  216.           <div class="pricing-badge">推荐</div>
    217. 

  217.           <header>
    218. 

  218.             <h4>Pro</h4>
    219. 

  219.             <div class="pricing-price"><span class="pricing-currency">¥</span><span class="pricing-amount">29</span><span class="pricing-period">/ 月</span></div>
    220. 

  220.             <p class="pricing-desc">解锁全部高级能力</p>
    221. 

  221.           </header>
    222. 

  222.           <button class="pricing-cta pricing-cta-upgrade" type="button" data-pricing-action="pro">升级至 Pro</button>
    223. 

  223.           <p class="pricing-includes">包含 Free 所有功能，并解锁：</p>
    224. 

  224.           <ul class="pricing-features pricing-features-pro">
    225. 

  225.             <li>多设备云端同步</li>
    226. 

  226.             <li>每日自动备份</li>
    227. 

  227.             <li>数据端到端加密</li>
    228. 

  228.             <li>高级风险检测（恢复链路异常 / 单点故障预警）</li>
    229. 

  229.             <li>批量 CSV 导入与导出</li>
    230. 

  230.             <li>无限制账号与绑定数量</li>
    231. 

  231.             <li>优先邮件支持</li>
    232. 

  232.           </ul>
    233. 

  233.         </article>
    234. 

  234.       </div>
    235. 

  235.     </dialog>
    236. 

  236. 

  237.     <dialog id="profile-dialog" class="dialog profile-dialog">
    238. 

  238.       <div class="dialog-head">
    239. 

  239.         <div>
    240. 

  240.           <p class="eyebrow">Account</p>
    241. 

  241.           <h3>个人中心</h3>
    242. 

  242.         </div>
    243. 

  243.         <button class="icon-button" type="button" data-close-profile aria-label="关闭">×</button>
    244. 

  244.       </div>
    245. 

  245.       <div class="profile-body">
    246. 

  246.         <section class="profile-section">
    247. 

  247.           <h4>账号信息</h4>
    248. 

  248.           <div class="profile-grid">
    249. 

  249.             <div class="profile-item">
    250. 

  250.               <span>邮箱</span>
    251. 

  251.               <strong id="profile-email">-</strong>
    252. 

  252.             </div>
    253. 

  253.             <div class="profile-item">
    254. 

  254.               <span>设备 ID</span>
    255. 

  255.               <strong id="profile-device-id" class="mono">-</strong>
    256. 

  256.             </div>
    257. 

  257.           </div>
    258. 

  258.         </section>
    259. 

  259.         <section class="profile-section">
    260. 

  260.           <h4>授权状态</h4>
    261. 

  261.           <div class="profile-grid">
    262. 

  262.             <div class="profile-item">
    263. 

  263.               <span>激活码</span>
    264. 

  264.               <strong id="profile-key" class="mono">-</strong>
    265. 

  265.             </div>
    266. 

  266.             <div class="profile-item">
    267. 

  267.               <span>套餐</span>
    268. 

  268.               <strong id="profile-plan">-</strong>
    269. 

  269.             </div>
    270. 

  270.             <div class="profile-item">
    271. 

  271.               <span>授权状态</span>
    272. 

  272.               <strong id="profile-license-status">-</strong>
    273. 

  273.             </div>
    274. 

  274.           </div>
    275. 

  275.         </section>
    276. 

  276.         <section class="profile-section">
    277. 

  277.           <h4>本地数据</h4>
    278. 

  278.           <div class="profile-grid">
    279. 

  279.             <div class="profile-item">
    280. 

  280.               <span>资产总数</span>
    281. 

  281.               <strong id="profile-asset-count">-</strong>
    282. 

  282.             </div>
    283. 

  283.             <div class="profile-item">
    284. 

  284.               <span>账号总数</span>
    285. 

  285.               <strong id="profile-account-count">-</strong>
    286. 

  286.             </div>
    287. 

  287.             <div class="profile-item">
    288. 

  288.               <span>绑定关系</span>
    289. 

  289.               <strong id="profile-binding-count">-</strong>
    290. 

  290.             </div>
    291. 

  291.           </div>
    292. 

  292.         </section>
    293. 

  293.       </div>
    294. 

  294.       <div class="dialog-actions">
    295. 

  295.         <button class="ghost-button" type="button" data-close-profile>关闭</button>
    296. 

  296.       </div>
    297. 

  297.     </dialog>
    298. 

  298. 

  299.     <script src="locales.js"></script>
    300. 

  300.     <script src="data/Regin.js"></script>
    301. 

  301.     <script src="platformCatalog.js"></script>
    302. 

  302.     <script src="platformAssets.js"></script>
    303. 

  303.     <script src="app.js"></script>
    304. 

  304.   </body>
    305. 

  305. </html>
    306.