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

跟新需求文档

Browse Source
This commit is contained in:
xsl
2026-09-26 19:50:39 +08:00
parent ab9a39a8f3
commit 71a090fd75
26 changed files with 41746 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/index.html
+88 -17
View File
@@ -4,11 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="1'me 在线肌肤测试:拍摄正面与侧面照片,即时获取六维肌肤状态分析与个性化护理建议。">
<meta name="description" content="1'me 在线肌肤测试:拍摄正面与左右侧面照片,即时获取六维肌肤状态分析与个性化护理建议。">
<meta name="theme-color" content="#101823">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta property="og:title" content="1'me 在线肌肤测试">
<meta property="og:description" content="拍摄正面与侧面照片,即时获取六维肌肤状态分析与个性化护理建议。">
<meta property="og:description" content="拍摄正面与左右侧面照片,即时获取六维肌肤状态分析与个性化护理建议。">
<title>1'me 在线肌肤测试</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="preload" as="image" href="assets/img/bg-splash.jpg">
@@ -86,13 +86,38 @@
</section>
<!-- ═══════════ 05-07 拍照页 ═══════════ -->
<section class="screen" id="s-cam" data-step="0">
<section class="screen" id="s-cam">
<div class="cam-bg" id="cam-bg"></div>
<header class="nav nav-dark">
<button class="nav-back" data-action="cam-back" aria-label="返回"><i class="chev left"></i></button>
<span class="nav-title">1'me在线肌肤测试</span>
</header>
<div class="cam-dots" id="cam-dots"><i></i><i></i><i></i></div>
<p class="cam-step" id="cam-step">1/3<br>请单人正脸出镜</p>
<!-- 取景蒙版:SVG mask 镂空压暗 + 轮廓线框;data-step 切换三种轮廓
0=正脸(含耳部) 1=右脸出镜(头向左转,镜像画面中鼻朝左) 2=左脸出镜(头向右转,鼻朝右) -->
<svg class="cam-mask" id="cam-mask" data-step="0" viewBox="0 0 375 812" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<mask id="cam-cut" maskUnits="userSpaceOnUse" x="0" y="0" width="375" height="812">
<rect x="0" y="0" width="375" height="812" fill="#fff"/>
<g fill="#000">
<path data-shape="0" d="M187.5 240 C252 240 300 285 302 365 C313 367 318 381 315 397 C312 412 305 418 299 420 C294 488 246 578 187.5 586 C129 578 81 488 76 420 C70 418 63 412 60 397 C57 381 62 367 73 365 C75 285 123 240 187.5 240 Z"/>
<path data-shape="1" transform="translate(375 0) scale(-1 1)" d="M170 245 C230 240 258 270 262 320 C263 330 262 338 259 345 C270 360 282 380 284 398 C285 405 282 411 274 413 C267 415 262 417 261 421 C267 425 268 431 263 435 C267 439 267 445 262 448 C264 454 263 460 265 466 C266 476 260 483 248 486 C220 505 185 530 158 548 C140 560 122 558 112 538 C95 500 90 430 94 370 C98 305 120 250 170 245 Z"/>
<path data-shape="2" d="M170 245 C230 240 258 270 262 320 C263 330 262 338 259 345 C270 360 282 380 284 398 C285 405 282 411 274 413 C267 415 262 417 261 421 C267 425 268 431 263 435 C267 439 267 445 262 448 C264 454 263 460 265 466 C266 476 260 483 248 486 C220 505 185 530 158 548 C140 560 122 558 112 538 C95 500 90 430 94 370 C98 305 120 250 170 245 Z"/>
</g>
</mask>
</defs>
<rect class="cam-dim-rect" x="0" y="0" width="375" height="812" mask="url(#cam-cut)"/>
<g class="cam-line">
<path data-shape="0" d="M187.5 240 C252 240 300 285 302 365 C313 367 318 381 315 397 C312 412 305 418 299 420 C294 488 246 578 187.5 586 C129 578 81 488 76 420 C70 418 63 412 60 397 C57 381 62 367 73 365 C75 285 123 240 187.5 240 Z"/>
<path data-shape="1" transform="translate(375 0) scale(-1 1)" d="M170 245 C230 240 258 270 262 320 C263 330 262 338 259 345 C270 360 282 380 284 398 C285 405 282 411 274 413 C267 415 262 417 261 421 C267 425 268 431 263 435 C267 439 267 445 262 448 C264 454 263 460 265 466 C266 476 260 483 248 486 C220 505 185 530 158 548 C140 560 122 558 112 538 C95 500 90 430 94 370 C98 305 120 250 170 245 Z"/>
<path data-shape="2" d="M170 245 C230 240 258 270 262 320 C263 330 262 338 259 345 C270 360 282 380 284 398 C285 405 282 411 274 413 C267 415 262 417 261 421 C267 425 268 431 263 435 C267 439 267 445 262 448 C264 454 263 460 265 466 C266 476 260 483 248 486 C220 505 185 530 158 548 C140 560 122 558 112 538 C95 500 90 430 94 370 C98 305 120 250 170 245 Z"/>
</g>
</svg>
<p class="cam-status" id="cam-status">检测引擎加载中…</p>
<p class="cam-hint" id="cam-hint"></p>
<div class="cam-count" id="cam-count"></div>
<p class="cam-nudge" id="cam-nudge">识别不到?可点下方快门手动拍摄</p>
<div class="cam-guide" id="cam-guide"></div>
<video id="cam-video" autoplay playsinline muted></video>
<input type="file" id="cam-file" accept="image/*" capture="user" hidden>
@@ -107,7 +132,7 @@
<img src="assets/svg/图标-重拍.svg" alt="切换">
</button>
</div>
<div class="cam-flash" id="cam-flash"></div>
<div class="cam-fill" id="cam-fill"></div>
</section>
<!-- ═══════════ 08 报告页 ═══════════ -->
@@ -127,6 +152,7 @@
<div class="stat">
<span class="stat-label">肌肤年龄</span>
<span class="stat-value" id="stat-age">--岁</span>
<span class="stat-sub" id="stat-age-note"></span>
</div>
</div>
@@ -135,9 +161,9 @@
<div class="card card-dims">
<div class="dims-row">
<div class="dim"><span class="dim-name">紧塑力</span><span class="dim-score" id="dim-firm">-.-</span></div>
<div class="dim"><span class="dim-name">活力感</span><span class="dim-score" id="dim-vita">-.-</span></div>
<div class="dim"><span class="dim-name">稳定力</span><span class="dim-score" id="dim-stab">-.-</span></div>
<div class="dim"><span class="dim-name">紧塑力</span><span class="dim-score" id="dim-firm">-.-</span><span class="dim-lv" id="dim-firm-lv"></span></div>
<div class="dim"><span class="dim-name">活力感</span><span class="dim-score" id="dim-vita">-.-</span><span class="dim-lv" id="dim-vita-lv"></span></div>
<div class="dim"><span class="dim-name">稳定力</span><span class="dim-score" id="dim-stab">-.-</span><span class="dim-lv" id="dim-stab-lv"></span></div>
</div>
<p class="dims-note" id="dims-note">近期优先关注：<br>---</p>
</div>
@@ -151,38 +177,79 @@
<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="紧致检测图">
<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="cat-head"><span class="cat-s" id="s-contour">-.-</span><i class="cat-badge" id="lv-contour"></i></p>
<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="纹路检测图">
<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="cat-head"><span class="cat-s" id="s-wrinkles">-.-</span><i class="cat-badge" id="lv-wrinkles"></i></p>
<p class="ditem-para" id="ditem-para2">检测完成后显示分析结果。</p>
</div>
</div>
</div>
<div class="dpanel" data-panel="1">
<div class="dempty">活力感维度内容以实际检测报告为准</div>
<div class="ditem">
<h3 class="ditem-title">光滑</h3>
<div class="ditem-text">
<p class="cat-head"><span class="cat-s" id="s-smooth">-.-</span><i class="cat-badge" id="lv-smooth"></i></p>
<p class="ditem-para" id="tx-smooth">检测完成后显示分析结果。</p>
</div>
</div>
<div class="ditem">
<h3 class="ditem-title">肤色水润</h3>
<div class="ditem-text">
<p class="cat-head"><span class="cat-s" id="s-tone">-.-</span><i class="cat-badge" id="lv-tone"></i></p>
<p class="ditem-para" id="tx-tone">检测完成后显示分析结果。</p>
</div>
</div>
</div>
<div class="dpanel" data-panel="2">
<div class="dempty">稳定力维度内容以实际检测报告为准</div>
<div class="ditem">
<h3 class="ditem-title">敏感</h3>
<div class="ditem-text">
<p class="cat-head"><span class="cat-s" id="s-sens">-.-</span><i class="cat-badge" id="lv-sens"></i></p>
<p class="ditem-para" id="tx-sens">检测完成后显示分析结果。</p>
</div>
</div>
<div class="ditem">
<h3 class="ditem-title">痘痘</h3>
<div class="ditem-text">
<p class="cat-head"><span class="cat-s" id="s-acne">-.-</span><i class="cat-badge" id="lv-acne"></i></p>
<p class="ditem-para" id="tx-acne">检测完成后显示分析结果。</p>
</div>
</div>
</div>
</div>
</div>
<p class="vm-notes" id="vm-notes" style="display:none"></p>
<p class="report-disclaimer">*您的肌肤状态会随年龄、环境、作息和生活节奏动态变化。<br>*本次检测仅代表当前肌肤状态参考。</p>
<div class="card card-summary">
<h2 class="card-heading">综合分析</h2>
<p class="care-item" id="vm-summary">检测完成后显示分析结果。</p>
</div>
<div class="card card-care">
<h2 class="card-heading">护理建议</h2>
<p class="care-item">1、面部支撑力明显下降，软组织有下移趋势。护肤时请避免用力向下拉扯皮肤，涂抹护肤品时配合由下向上的提拉手法，重点照顾下颌线与苹果肌位置。</p>
<p class="care-item">2、肤色不均，局部有色素沉积。建议严格防晒，避免紫外线加重色沉；护肤上可尝试温和的美白精华，加速代谢。</p>
<h2 class="card-heading">生活方式建议</h2>
<p class="care-item" id="vm-lifestyle">--</p>
<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="care-item" id="essence-text">--</p>
<p class="essence-triggers" id="essence-triggers"></p>
</div>
<div class="card card-product">
<h2 class="prod-title">感受高光时刻<br>从日常的好状态开始</h2>
<div class="prod-card">
@@ -244,12 +311,16 @@
<div class="analyzing">
<div class="spinner"></div>
<p>正在生成您的肌肤报告…</p>
<p class="analyzing-tip">点击空白处取消</p>
</div>
</div>
<!-- ═══════════ Toast ═══════════ -->
<div class="toast" id="toast"></div>
<script src="js/app.js"></script>
<script src="vendor/faceapi/face-api.js" defer></script>
<script src="js/head-pose.js" defer></script>
<script src="js/skin-score.js" defer></script>
<script src="js/app.js" defer></script>
</body>
</html>