327 lines
16 KiB
HTML
327 lines
16 KiB
HTML
<!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, user-scalable=no">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<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="拍摄正面与左右侧面照片,即时获取六维肌肤状态分析与个性化护理建议。">
|
|
<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">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════ 01 启动页 ═══════════ -->
|
|
<section class="screen active" id="s-splash">
|
|
<div class="splash-bg"></div>
|
|
<p class="splash-slogan">Life in Full<br>为更好的生命表现</p>
|
|
<div class="splash-bottom">
|
|
<div class="brand-row">
|
|
<img src="assets/svg/品牌-1me.svg" alt="1'me" class="brand-logo">
|
|
<span class="brand-text">肌肤状态检测</span>
|
|
</div>
|
|
<button class="btn btn-primary" data-action="open-privacy">开始检测</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ 03 档案填写 ═══════════ -->
|
|
<section class="screen" id="s-profile">
|
|
<div class="profile-bg"></div>
|
|
<header class="nav">
|
|
<button class="nav-back" data-action="back-splash" aria-label="返回"><i class="chev left"></i></button>
|
|
<span class="nav-title">1'me在线肌肤测试</span>
|
|
</header>
|
|
<div class="profile-body">
|
|
<h1 class="page-title">您的肌肤状态</h1>
|
|
|
|
<div class="form-row two">
|
|
<div class="field">
|
|
<label class="field-label">您的年龄</label>
|
|
<input id="f-age" class="field-input" type="text" inputmode="numeric" maxlength="2" placeholder="请输入">
|
|
</div>
|
|
<div class="field">
|
|
<label class="field-label">您的性别</label>
|
|
<div class="field-select-wrap">
|
|
<select id="f-gender" class="field-input field-select">
|
|
<option value="" selected disabled>请选择</option>
|
|
<option>女</option><option>男</option>
|
|
</select>
|
|
<i class="chev down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">您的所在地区</label>
|
|
<div class="field-select-wrap">
|
|
<select id="f-region" class="field-input field-select">
|
|
<option value="" selected disabled>请选择</option>
|
|
</select>
|
|
<i class="chev down"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">您的日常肤质</label>
|
|
<div class="skin-card">
|
|
<div class="skin-axis">
|
|
<span class="axis-item"><i class="chip" style="background:#EAE6E1"></i>偏干</span>
|
|
<span class="axis-item"><i class="chip" style="background:#DBF6D6"></i>水油平衡</span>
|
|
<span class="axis-item"><i class="chip" style="background:#F5F078"></i>偏油</span>
|
|
</div>
|
|
<div class="skin-carousel" id="skin-carousel">
|
|
<div class="skin-track" id="skin-track"></div>
|
|
</div>
|
|
<div class="skin-dots" id="skin-dots"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-submit" data-action="submit-profile">提交</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ 05-07 拍照页 ═══════════ -->
|
|
<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>
|
|
<div class="cam-controls">
|
|
<button class="cam-side" data-action="album" aria-label="相册">
|
|
<img src="assets/svg/图标-相册.svg" alt="相册">
|
|
</button>
|
|
<button class="cam-shutter" data-action="shutter" aria-label="拍照">
|
|
<img src="assets/svg/拍照-快门.svg" alt="快门">
|
|
</button>
|
|
<button class="cam-side cam-flip" data-action="flip" aria-label="切换">
|
|
<img src="assets/svg/图标-重拍.svg" alt="切换">
|
|
</button>
|
|
</div>
|
|
<div class="cam-fill" id="cam-fill"></div>
|
|
</section>
|
|
|
|
<!-- ═══════════ 08 报告页 ═══════════ -->
|
|
<section class="screen" id="s-report">
|
|
<header class="nav">
|
|
<button class="nav-back" data-action="back-profile" aria-label="返回"><i class="chev left"></i></button>
|
|
<span class="nav-title">1'me在线肌肤测试</span>
|
|
</header>
|
|
<div class="report-body">
|
|
<h1 class="report-title">您的肌肤状态表现</h1>
|
|
|
|
<div class="card card-stats">
|
|
<div class="stat">
|
|
<span class="stat-label">综合评分</span>
|
|
<span class="stat-value" id="stat-score">--分</span>
|
|
</div>
|
|
<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>
|
|
|
|
<p class="dims-intro">我们从6个维度观察了你的肌肤，当下优先关注：紧致、光泽、纹路、耐受、细腻、水润</p>
|
|
<p class="dims-disclaimer">*状态是动态流动的，和作息、压力、季节都有关系，仅代表此刻的状态参考。</p>
|
|
|
|
<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><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>
|
|
|
|
<div class="card card-detail">
|
|
<div class="detail-tabs" id="detail-tabs">
|
|
<button class="dtab active" data-tab="0">紧塑力</button>
|
|
<button class="dtab" data-tab="1">活力感</button>
|
|
<button class="dtab" data-tab="2">稳定力</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="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="皱纹检测图">
|
|
<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="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="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" 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">
|
|
<div class="prod-info">
|
|
<span class="prod-badge">CORE Ⅱ</span>
|
|
<h3 class="prod-name">以我自在有势挺括双仓精华液</h3>
|
|
<p class="prod-sub">参透皮下根源 28天校准皮肤状态</p>
|
|
</div>
|
|
<div class="prod-scroll" id="prod-scroll">
|
|
<img src="assets/img/prod-1.jpg" loading="lazy" alt="以我自在有势挺括双仓精华液">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-more" data-action="more">了解更多</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════ 弹窗:隐私授权 ═══════════ -->
|
|
<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="关闭">
|
|
</button>
|
|
<h2 class="popup-title">欢迎体验1'me<br>肌肤状态评估服务！</h2>
|
|
<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>
|
|
</label>
|
|
<button class="btn btn-primary popup-btn" data-action="agree-continue">继续</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════ 弹窗:拍照引导 ═══════════ -->
|
|
<div class="overlay" id="p-photoguide">
|
|
<div class="popup">
|
|
<button class="popup-close" data-action="close-photoguide" aria-label="关闭">
|
|
<img src="assets/svg/图标-关闭.svg" alt="关闭">
|
|
</button>
|
|
<h2 class="popup-title popup-title-center">请拍摄正面及<br>左右侧面照片</h2>
|
|
<button class="btn btn-primary popup-btn" data-action="start-camera">开始</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════ 弹窗:隐私协议(占位) ═══════════ -->
|
|
<div class="overlay" id="p-policy">
|
|
<div class="popup popup-policy">
|
|
<button class="popup-close" data-action="close-policy" aria-label="关闭">
|
|
<img src="assets/svg/图标-关闭.svg" alt="关闭">
|
|
</button>
|
|
<h2 class="popup-title popup-title-policy">1'me 肌肤状态评估隐私协议</h2>
|
|
<p class="popup-body">(协议全文待法务提供后接入,当前为占位)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════ 分析中过渡 ═══════════ -->
|
|
<div class="overlay overlay-dark" id="p-analyzing">
|
|
<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="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>
|