提示词
在 phone mockup frame 内构建一个移动端咖啡个人资料界面。使用原生 HTML、CSS 和 JS，并以 Vite 作为 bundler。设计采用深色暖色调，灵感来自带有 glassmorphic UI 元素的 iOS 个人资料界面。
**Phone mockup：**
- 390x844px，zoom 0.78，黑色背景，44px border-radius，overflow hidden，强烈的 drop shadow
- 内部 `.screen` div 使用深色背景（`#180a06`），支持垂直滚动，隐藏 scrollbar
**Hero section（顶部）：**
- 全宽，高 430px
- 包含一个循环、静音、自动播放的视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260707_003042_3d2380a6-1ce6-4407-a2e2-cfec46546407.mp4`
- 视频覆盖整个区域，设置 `object-fit: cover; object-position: center top`
- 底部 gradient overlay，从 52% 处的 transparent 渐变至 100% 处的背景色
- Top bar 包含两个玻璃质感圆形按钮（左侧为编辑图标，右侧为 X 关闭 SVG），使用 absolute 定位，top 18px
**身份信息区（通过 margin-top: -112px 与 hero 重叠）：**
- 居中显示名称 "Dasha"（28px，weight 500）
- 名称左右两侧分别放置月桂图像（本地资源 `/assets/images/laurel-left.png` 和 `laurel-right.png`），高 73px，0.6 opacity，通过 `right: calc(50% + 66px)` / `left: calc(50% + 66px)` 定位
- 下方副标题 "Plum Parfait Latte"（15px，柔和色 `rgba(235, 220, 205, 0.55)`）
**成就 pill（居中，位于身份信息区下方 30px）：**
- 玻璃质感 pill 按钮，高 54px，宽 225px，27px border-radius
- 奖杯图标（本地 `/assets/images/icon-trophy.png`，18px）+ 文本 "12 achievements"（18px，weight 500）
**统计数据网格（3 columns，12px gap，顶部 padding 26px，水平 padding 16px）：**
- 每张卡片：半透明背景 `rgba(255,255,255,0.06)`，24px border-radius
- 卡片 1：咖啡图像 `https://polo-pecan-73837341.figma.site/_assets/v11/a8ba62db54d1e331b7beb36d69308e9b92516b99.png`（84x84），数字 "154"，标签 "drinks consumed"
- 卡片 2：三明治图像 `https://polo-pecan-73837341.figma.site/_assets/v11/953600065119f54f64ab9edb076b3cbb289fcff8.png`（84x84），数字 "36"，标签 "sandwiches eaten"
- 卡片 3：咖啡馆图像 `https://polo-pecan-73837341.figma.site/_assets/v11/aef68e05f729a30ed177f74c2cece578c05bfdba.png`（84x84），数字 "12"，标签 "cafes visited"
- 数字：25px，weight 500。标签：13px，颜色 `#BAAA9A8C`
**收藏卡片（位于统计数据下方 12px，水平 margin 16px）：**
- 使用相同的卡片背景，24px radius，高 110px，采用 flex row，gap 16px
- Latte 图像 `https://polo-pecan-73837341.figma.site/_assets/v11/976a811111808abc50be33c2483872dbdb6ad5a8.png`（108x108，object-fit contain）
- 文本列："Favorite"（13px，weight 500）、"Latte"（19px，weight 500）、"Ordered 73 times"（13px，颜色 `#BAAA9A8C`）
- 右侧为 Shuffle 按钮（玻璃质感圆形按钮，本地图标 `/assets/images/icon-shuffle.png`，19px）
**部分显示的下一张卡片：** 使用相同的卡片样式，但仅高 34px，底部为直角（作为滚动提示）
**玻璃按钮系统：**
- 共享 `.glass` class：无 border，`rgba(255,255,255,0.03)` 背景，使用细微 inset box-shadows 形成边缘高光，`backdrop-filter: blur(2px) saturate(1.3)`，在 `:active` 时缩小
- `.glass.circle`：58x44px，22px radius
- `.glass.pill`：高 54px，pill-shaped
**字体：**
- Primary："Neue Haas Unica"（从本地 `/assets/fonts/neue-haas-unica/stylesheet.css` 加载）
- 同时从 `/assets/fonts/helvetica-now/stylesheet.css` 加载 "Helvetica Now Display"
- Fallbacks：-apple-system、SF Pro Display、Inter、Segoe UI、Roboto
**页面背景（phone 后方）：**
- 在 `#070402` 上叠加多个暖色调 radial gradients：
- `radial-gradient(ellipse 65% 55% at 15% 52%, rgba(168, 78, 10, 0.22))`
- `radial-gradient(ellipse 52% 48% at 83% 26%, rgba(122, 52, 8, 0.17))`
- `radial-gradient(ellipse 44% 52% at 56% 92%, rgba(98, 36, 5, 0.14))`
- `radial-gradient(ellipse 30% 30% at 72% 75%, rgba(60, 20, 5, 0.10))`
**入场动画（遵循 prefers-reduced-motion）：**
- Hero：`heroReveal`——从 opacity 0 + scale(1.01) 过渡至正常状态，1.9s，cubic-bezier(0.16, 1, 0.3, 1)
- Top bar 按钮：`dropIn`，从 translateY(-10px) 开始，0.7s，依次延迟 0.35s/0.42s
- 月桂：`fadeIn` 0.8s，delay 0.5s
- 名称：`fadeRise`，从 translateY(16px) 开始，0.7s，delay 0.5s
- 副标题：同上，delay 0.58s
- 成就：同上，delay 0.66s
- 统计卡片：依次在 0.74s、0.80s、0.86s 开始
- 收藏卡片：delay 0.94s
- 下一张卡片：fadeIn delay 1.02s
- 除使用 ease-out 的简单 fadeIn 外，其他动画均使用 cubic-bezier(0.16, 1, 0.3, 1)
**JavaScript（liquid glass 效果）：**
- 根据每个 `[data-liquid]` 元素的尺寸和 border-radius 生成 displacement map canvas
- 使用圆角矩形的 SDF (signed distance field) 计算折射向量
- 创建 SVG `<feDisplacementMap>` filters，并以 `backdrop-filter: url(#id) blur(0.3px) saturate(1.3)` 应用
- 如果不支持 SVG filter，则回退至标准 blur
**CSS 变量：**
```
--bg: #180a06
--card: rgba(255, 255, 255, 0.06)
--text: #ede4d8
--muted: rgba(235, 220, 205, 0.55)
--radius-card: 24px
```
**响应式：** 在 440px viewport 下，phone 缩放至 zoom 0.6。Body 在 900px 时启用 flex-wrap。原文提示词（English）
Build a mobile coffee profile screen inside a phone mockup frame. Use vanilla HTML, CSS, and JS with Vite as the bundler. The design is dark/warm-toned, inspired by iOS profile screens with glassmorphic UI elements.
**Phone mockup:**
- 390x844px at zoom 0.78, black background, 44px border-radius, overflow hidden, strong drop shadow
- Internal `.screen` div with dark background (`#180a06`), vertical scroll, hidden scrollbar
**Hero section (top):**
- Full-width, 430px tall
- Contains a looping muted autoplay video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260707_003042_3d2380a6-1ce6-4407-a2e2-cfec46546407.mp4`
- Video covers the area with `object-fit: cover; object-position: center top`
- Bottom gradient overlay fading from transparent at 52% to the background color at 100%
- Top bar with two glass circle buttons (edit icon on left, X close SVG on right), positioned absolute top 18px
**Identity section (overlaps hero by -112px margin-top):**
- Centered name "Dasha" (28px, weight 500)
- Left and right laurel images flanking the name (local assets `/assets/images/laurel-left.png` and `laurel-right.png`), 73px tall, 0.6 opacity, positioned via `right: calc(50% + 66px)` / `left: calc(50% + 66px)`
- Subtitle "Plum Parfait Latte" below (15px, muted color `rgba(235, 220, 205, 0.55)`)
**Achievements pill (centered, 30px below identity):**
- Glass pill button, 54px tall, 225px wide, 27px border-radius
- Trophy icon (local `/assets/images/icon-trophy.png`, 18px) + text "12 achievements" (18px, weight 500)
**Stats grid (3 columns, 12px gap, 26px top padding, 16px horizontal padding):**
- Each card: semi-transparent background `rgba(255,255,255,0.06)`, 24px border-radius
- Card 1: coffee image `https://polo-pecan-73837341.figma.site/_assets/v11/a8ba62db54d1e331b7beb36d69308e9b92516b99.png` (84x84), number "154", label "drinks consumed"
- Card 2: sandwich image `https://polo-pecan-73837341.figma.site/_assets/v11/953600065119f54f64ab9edb076b3cbb289fcff8.png` (84x84), number "36", label "sandwiches eaten"
- Card 3: cafe image `https://polo-pecan-73837341.figma.site/_assets/v11/aef68e05f729a30ed177f74c2cece578c05bfdba.png` (84x84), number "12", label "cafes visited"
- Numbers: 25px, weight 500. Labels: 13px, color `#BAAA9A8C`
**Favorite card (12px below stats, 16px horizontal margin):**
- Same card background, 24px radius, 110px height, flex row with 16px gap
- Latte image `https://polo-pecan-73837341.figma.site/_assets/v11/976a811111808abc50be33c2483872dbdb6ad5a8.png` (108x108, object-fit contain)
- Text column: "Favorite" (13px, weight 500), "Latte" (19px, weight 500), "Ordered 73 times" (13px, color `#BAAA9A8C`)
- Shuffle button on right (glass circle, local icon `/assets/images/icon-shuffle.png` 19px)
**Partial next card:** Same card style but only 34px tall with flat bottom corners (teaser for scroll)
**Glass button system:**
- Shared `.glass` class: no border, `rgba(255,255,255,0.03)` background, subtle inset box-shadows for edge highlights, `backdrop-filter: blur(2px) saturate(1.3)`, scale-down on `:active`
- `.glass.circle`: 58x44px, 22px radius
- `.glass.pill`: 54px tall, pill-shaped
**Fonts:**
- Primary: "Neue Haas Unica" (loaded from local `/assets/fonts/neue-haas-unica/stylesheet.css`)
- Also load "Helvetica Now Display" from `/assets/fonts/helvetica-now/stylesheet.css`
- Fallbacks: -apple-system, SF Pro Display, Inter, Segoe UI, Roboto
**Page background (behind phone):**
- Multiple warm-toned radial gradients over `#070402`:
- `radial-gradient(ellipse 65% 55% at 15% 52%, rgba(168, 78, 10, 0.22))`
- `radial-gradient(ellipse 52% 48% at 83% 26%, rgba(122, 52, 8, 0.17))`
- `radial-gradient(ellipse 44% 52% at 56% 92%, rgba(98, 36, 5, 0.14))`
- `radial-gradient(ellipse 30% 30% at 72% 75%, rgba(60, 20, 5, 0.10))`
**Entry animations (respects prefers-reduced-motion):**
- Hero: `heroReveal` - opacity 0 + scale(1.01) to normal, 1.9s, cubic-bezier(0.16, 1, 0.3, 1)
- Top bar buttons: `dropIn` from translateY(-10px), 0.7s, staggered 0.35s/0.42s
- Laurels: `fadeIn` 0.8s, delay 0.5s
- Name: `fadeRise` from translateY(16px), 0.7s, delay 0.5s
- Subtitle: same, delay 0.58s
- Achievements: same, delay 0.66s
- Stat cards: staggered at 0.74s, 0.80s, 0.86s
- Favorite card: delay 0.94s
- Next card: fadeIn delay 1.02s
- All use cubic-bezier(0.16, 1, 0.3, 1) except simple fadeIn which uses ease-out
**JavaScript (liquid glass effect):**
- Generates a displacement map canvas for each `[data-liquid]` element based on its dimensions and border-radius
- Uses SDF (signed distance field) of a rounded rectangle to compute refraction vectors
- Creates SVG `<feDisplacementMap>` filters and applies them as `backdrop-filter: url(#id) blur(0.3px) saturate(1.3)`
- Falls back to standard blur if SVG filter not supported
**CSS variables:**
```
--bg: #180a06
--card: rgba(255, 255, 255, 0.06)
--text: #ede4d8
--muted: rgba(235, 220, 205, 0.55)
--radius-card: 24px
```
**Responsive:** At 440px viewport, phone scales to zoom 0.6. Body flex-wraps at 900px.视频地址
