xsl/juzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(h5): align October UI and add WeChat auth with saved reports

Browse Source
This commit is contained in:
xsl
2026-10-11 17:28:11 +08:00
parent ee744b6b5f
commit ce8d0ff1f7
126 changed files with 18711 additions and 1898 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/index.html
+85 -84
View File
@@ -14,19 +14,40 @@
<link rel="preload" as="image" href="assets/img/bg-splash.jpg">
<link rel="stylesheet" href="vendor/mobile-select/mobile-select.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ui-20261009.css">
</head>
<body>
<!-- ═══════════ 01 启动页 ═══════════ -->
<section class="screen active" id="s-splash">
<section class="screen active" id="s-login">
<img class="login-brand" src="assets/img/ui-20261009/brand-login.png" alt="1’me 以我">
<div class="login-bottom">
<button class="login-button login-wechat" data-action="login-wechat"><img src="assets/img/ui-20261009/icon-wechat.png" alt="">微信登录</button>
<button class="login-button login-browser" data-action="login-browser"><img src="assets/img/ui-20261009/icon-guest.png" alt="">本机浏览器登录</button>
<label class="login-consent"><input type="checkbox" id="login-consent"><span>同意<button type="button" data-action="open-policy">用户协议、隐私政策和儿童保护政策</button></span></label>
<p class="login-message" id="login-message" role="status">正在检查登录状态…</p>
</div>
</section>
<section class="screen" id="s-history">
<div class="history-content">
<h1 class="report-title">您的报告</h1>
<div class="card history-count"><span>测试数量</span><p id="history-count">正在读取报告…</p></div>
<p class="identity-note" id="identity-note"></p>
<div id="history-list" aria-live="polite"></div>
<button class="history-retry" data-action="history-retry">刷新列表</button>
<small class="font-credit">本应用使用 MiSans 字体</small>
</div>
</section>
<section class="screen" id="s-splash">
<div class="splash-bg"></div>
<p class="splash-slogan">Life in Full<br>为更好的生命表现</p>
<p class="splash-slogan">ONE ME,<br>FROM THE INSIDE OUT<br>以我为始 自有表现</p>
<div class="splash-bottom">
<div class="brand-row">
<img src="assets/svg/品牌-1me.svg" alt="1'me" class="brand-logo">
<img src="assets/img/ui-20261009/brand-logo.png" alt="1'me" class="brand-logo">
<span class="brand-text">肌肤状态检测</span>
</div>
<button class="btn btn-primary" data-action="open-privacy">开始检测</button>
<button class="btn btn-primary btn-history" data-action="history">我的报告</button>
</div>
</section>
@@ -129,14 +150,14 @@
<input type="file" id="album-file" accept="image/*" hidden> <!-- 相册选图(不带 capture:走图库而非调起相机) -->
<div class="cam-controls">
<button class="cam-side" data-action="album" aria-label="相册">
<img src="assets/svg/图标-相册.svg" alt="相册">
<img src="assets/img/ui-20261009/icon-album.png" alt="相册">
</button>
<!-- 实时检测时自动抓拍、不显示快门;仅系统相机降级/识别不可用/mock 调试时出现 -->
<button class="cam-shutter" data-action="shutter" aria-label="拍照">
<img src="assets/svg/拍照-快门.svg" alt="快门">
<img src="assets/img/ui-20261009/icon-shutter.png" alt="快门">
</button>
<button class="cam-side cam-flip" data-action="flip" aria-label="切换">
<img src="assets/svg/图标-重拍.svg" alt="切换">
<img src="assets/img/ui-20261009/icon-switch-camera.png" alt="切换">
</button>
</div>
<div class="cam-fill" id="cam-fill"></div>
@@ -160,75 +181,67 @@
</div>
</div>
<div class="sum-age">
<span class="stat-label">肌肤年龄</span>
<span class="stat-label">生物可视年龄</span>
<span class="stat-value stat-age" id="stat-age"><b>--</b><i>岁</i></span>
<span class="age-pill" id="stat-age-note" hidden></span>
</div>
</div>
<div class="card card-dims">
<div class="card-dims">
<div class="dims-row">
<div class="dim" data-dim="firm"><span class="dim-name">紧塑力</span><span class="dim-score" id="dim-firm"><b>-</b>.-</span><i class="dim-bar"><i></i></i><em class="dim-flag">优先关注</em></div>
<div class="dim" data-dim="vita"><span class="dim-name">活力感</span><span class="dim-score" id="dim-vita"><b>-</b>.-</span><i class="dim-bar"><i></i></i><em class="dim-flag">优先关注</em></div>
<div class="dim" data-dim="stab"><span class="dim-name">稳定力</span><span class="dim-score" id="dim-stab"><b>-</b>.-</span><i class="dim-bar"><i></i></i><em class="dim-flag">优先关注</em></div>
<div class="dim" data-dim="vita"><span class="dim-name">透亮感</span><span class="dim-score" id="dim-vita"><b>-</b>.-</span><i class="dim-bar"><i></i></i><em class="dim-flag">优先关注</em></div>
<div class="dim" data-dim="stab"><span class="dim-name">稳韧力</span><span class="dim-score" id="dim-stab"><b>-</b>.-</span><i class="dim-bar"><i></i></i><em class="dim-flag">优先关注</em></div>
</div>
<div class="dims-note" id="dims-note"><p class="dims-note-l1">近期优先关注：<b>---</b></p></div>
</div>
</div>
<h2 class="dimension-title">紧塑力</h2>
<div class="card card-detail">
<div class="detail-tabs" id="detail-tabs">
<button class="dtab active" data-tab="0"><span class="dtab-tx">紧塑力</span></button>
<button class="dtab" data-tab="1"><span class="dtab-tx">活力感</span></button>
<button class="dtab" data-tab="2"><span class="dtab-tx">稳定力</span></button>
</div>
<div class="detail-tabs"><button class="dtab active" data-tab="0"><span class="dtab-tx">轮廓</span></button><button class="dtab" data-tab="1"><span class="dtab-tx">皱纹</span></button></div>
<div class="detail-panels">
<div class="dpanel active" data-panel="0">
<div class="ditem">
<h3 class="ditem-title">轮廓</h3>
<img id="ditem-img1" src="assets/img/det-1.jpg" loading="lazy" class="ditem-img" alt="轮廓检测图">
<div class="ditem-text">
<p class="ditem-para" id="ditem-para1">检测完成后显示分析结果。</p>
</div>
</div>
<div class="ditem">
<h3 class="ditem-title">皱纹</h3>
<img id="ditem-img2" src="assets/img/det-2.jpg" loading="lazy" class="ditem-img" alt="皱纹检测图">
<div class="ditem-text">
<p class="ditem-para" id="ditem-para2">检测完成后显示分析结果。</p>
</div>
</div>
<div class="ditem"><div class="viz-frame"><img id="ditem-img1" class="ditem-img" alt="轮廓检测图" hidden><span class="viz-missing">本次未获取轮廓检测图</span></div>
<div class="ditem-text"><p class="ditem-para" id="ditem-para1">检测完成后显示分析结果。</p></div></div>
</div>
<div class="dpanel" data-panel="1">
<div class="ditem">
<h3 class="ditem-title">光滑</h3>
<img id="viz-smooth" loading="lazy" class="ditem-img" alt="光滑检测标记图" hidden>
<div class="ditem-text">
<p class="ditem-para" id="tx-smooth">检测完成后显示分析结果。</p>
</div>
</div>
<div class="ditem">
<h3 class="ditem-title">肤色水润</h3>
<img id="viz-tone" loading="lazy" class="ditem-img" alt="肤色色沉图" hidden>
<div class="ditem-text">
<p class="ditem-para" id="tx-tone">检测完成后显示分析结果。</p>
</div>
</div>
<div class="ditem"><div class="viz-frame"><img id="ditem-img2" class="ditem-img" alt="皱纹检测图" hidden><span class="viz-missing">本次未获取皱纹检测图</span></div>
<div class="ditem-text"><p class="ditem-para" id="ditem-para2">检测完成后显示分析结果。</p></div></div>
</div>
</div>
</div>
<h2 class="dimension-title">透亮感</h2>
<div class="card card-detail">
<div class="detail-tabs"><button class="dtab active" data-tab="0"><span class="dtab-tx">肤色</span></button><button class="dtab" data-tab="1"><span class="dtab-tx">平滑度</span></button><button class="dtab" data-tab="2"><span class="dtab-tx">水分</span></button></div>
<div class="detail-panels">
<div class="dpanel active" data-panel="0">
<div class="ditem"><div class="viz-frame"><img id="viz-tone" class="ditem-img" alt="肤色检测图" hidden><span class="viz-missing">本次未获取肤色检测图</span></div>
<div class="ditem-text"><p class="ditem-para" id="tx-tone">检测完成后显示分析结果。</p></div></div>
</div>
<div class="dpanel" data-panel="1">
<div class="ditem"><div class="viz-frame"><img id="viz-smooth" class="ditem-img" alt="平滑度检测图" hidden><span class="viz-missing">本次未获取平滑度检测图</span></div>
<div class="ditem-text"><p class="ditem-para" id="tx-smooth">检测完成后显示分析结果。</p></div></div>
</div>
<div class="dpanel" data-panel="2">
<div class="ditem">
<h3 class="ditem-title">敏感</h3>
<img id="viz-sens" loading="lazy" class="ditem-img" alt="敏感红区图" hidden>
<div class="ditem-text">
<p class="ditem-para" id="tx-sens">检测完成后显示分析结果。</p>
</div>
</div>
<div class="ditem">
<h3 class="ditem-title">痘痘</h3>
<img id="viz-acne" loading="lazy" class="ditem-img" alt="痘痘检测标记图" hidden>
<div class="ditem-text">
<p class="ditem-para" id="tx-acne">检测完成后显示分析结果。</p>
</div>
</div>
<div class="ditem"><div class="viz-frame"><img id="viz-water" class="ditem-img" alt="水分检测图" hidden><span class="viz-missing">本次未获取水分检测图</span></div>
<div class="ditem-text"><p class="ditem-para" id="tx-water">检测完成后显示分析结果。</p></div></div>
</div>
</div>
</div>
<h2 class="dimension-title">稳韧力</h2>
<div class="card card-detail">
<div class="detail-tabs"><button class="dtab active" data-tab="0"><span class="dtab-tx">泛红</span></button><button class="dtab" data-tab="1"><span class="dtab-tx">痘痘</span></button></div>
<div class="detail-panels">
<div class="dpanel active" data-panel="0">
<div class="ditem"><div class="viz-frame"><img id="viz-sens" class="ditem-img" alt="泛红检测图" hidden><span class="viz-missing">本次未获取泛红检测图</span></div>
<div class="ditem-text"><p class="ditem-para" id="tx-sens">检测完成后显示分析结果。</p></div></div>
</div>
<div class="dpanel" data-panel="1">
<div class="ditem"><div class="viz-frame"><img id="viz-acne" class="ditem-img" alt="痘痘检测图" hidden><span class="viz-missing">本次未获取痘痘检测图</span></div>
<div class="ditem-text"><p class="ditem-para" id="tx-acne">检测完成后显示分析结果。</p></div></div>
</div>
</div>
</div>
@@ -245,28 +258,23 @@
<p class="care-summary">好状态，是内外同调的长期节奏。</p>
</div>
<div class="card card-essence">
<h2 class="card-heading">精华推荐</h2>
<p class="essence-name" id="essence-name">--</p>
<p class="essence-triggers" id="essence-triggers"></p>
</div>
<!-- 产品推荐大标题独立于白卡之外,直接落在灰底上(Figma 08) -->
<h2 class="prod-title">感受高光时刻<br>从日常的好状态开始</h2>
<div class="card card-product">
<div class="prod-card">
<div class="prod-info">
<img class="prod-badge" src="assets/svg/prod-badge.svg" alt="CORE Ⅱ">
<h3 class="prod-name">以我自在有势挺括<br>双仓精华液</h3>
<p class="prod-sub">参透皮下根源 28天校准皮肤状态</p>
<h3 id="product-title"></h3>
<p class="prod-name" id="product-name"></p>
<img class="prod-badge" src="assets/img/ui-20261009/product-badge.png" alt="1’me">
</div>
<div class="prod-scroll" id="prod-scroll">
<img src="assets/img/prod-1.jpg" loading="lazy" alt="以我自在有势挺括双仓精华液">
<img id="product-image" alt="算法推荐精华">
</div>
</div>
</div>
<button class="btn btn-primary btn-more" data-action="more">了解更多</button>
</div>
</section>
@@ -274,10 +282,10 @@
<div class="overlay" id="p-privacy">
<div class="popup">
<button class="popup-close" data-action="close-privacy" aria-label="关闭">
<img src="assets/svg/图标-关闭.svg" alt="关闭">
<img src="assets/img/ui-20261009/icon-close.png" alt="关闭">
</button>
<h2 class="popup-title">欢迎体验1'me<br>肌肤状态评估服务！</h2>
<p class="popup-body">我们将采集您的面部影像，为您生成专属肌肤分析与状态管理方案。所有数据严格保密，仅用于本次检测分析。</p>
<p class="popup-body">我们将采集您的面部影像，用于本次肌肤分析，并将报告保存至服务端，供您在“我的报告”中回看。</p>
<label class="privacy-row" id="privacy-row">
<span class="checkbox" id="privacy-check"></span>
<span class="privacy-text">我已阅读并同意<a class="privacy-link" id="privacy-policy-link">相关隐私协议</a></span>
@@ -289,12 +297,13 @@
<!-- ═══════════ 弹窗:拍照引导 ═══════════ -->
<!-- 背景只保留启动页底图 + Slogan(不叠档案表单),对齐设计稿 04 -->
<div class="overlay overlay-guide" id="p-photoguide">
<div class="guide-bg"><p class="splash-slogan">Life in Full<br>为更好的生命表现</p></div>
<div class="guide-bg"><p class="splash-slogan">ONE ME,<br>FROM THE INSIDE OUT<br>以我为始 自有表现</p></div>
<div class="popup">
<button class="popup-close" data-action="close-photoguide" aria-label="关闭">
<img src="assets/svg/图标-关闭.svg" alt="关闭">
<img src="assets/img/ui-20261009/icon-close.png" alt="关闭">
</button>
<h2 class="popup-title popup-title-center">请拍摄或上传<br>正面及左右侧面照片</h2>
<p class="guide-description">请在光线充足处，取下眼镜，保持面部清晰入镜。</p>
<button class="btn btn-primary popup-btn" data-action="start-camera">开始</button>
</div>
</div>
@@ -438,18 +447,6 @@
</div>
</div>
<!-- ═══════════ 弹层:历史报告(localStorage 存储的检测记录) ═══════════ -->
<div class="overlay overlay-policy" id="p-history">
<div class="policy-page">
<header class="policy-header">
<button class="nav-back" data-action="close-history" aria-label="返回"><i class="chev left"></i></button>
<span class="policy-header-title">历史报告</span>
<button class="history-clear" data-action="clear-history">清空</button>
</header>
<div class="policy-body history-body" id="history-list"></div>
</div>
</div>
<!-- ═══════════ 分析中过渡 ═══════════ -->
<div class="overlay overlay-dark" id="p-analyzing">
<div class="analyzing">
@@ -471,6 +468,10 @@
// 仅 ?mock=1 调试:同步注入报告页可视化 fixture(生产模式不发起该请求)
if (/[?&]mock=1/.test(location.search)) document.write('<script src="assets/mock/report-fixture.js"><\/script>');
</script>
<script src="js/report-copy.js" defer></script>
<script src="js/report-ui.js" defer></script>
<script src="js/account-client.js" defer></script>
<script src="js/camera-geometry.js" defer></script>
<script src="js/app.js" defer></script>
</body>
</html>