提示词
在一个逼真的手机边框模型中构建移动端健康测验界面，并将其居中放置在白色页面上。使用 React、Tailwind CSS 和 Lucide React icons。
**手机边框：**
- 尺寸：宽 375px x 高 780px
- 圆角半径：52px
- 背景颜色：`#8a9aaa`
- 使用盒阴影模拟真实手机边框：`inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)`
- 顶部中央放置一个黑色药丸形 Dynamic Island：宽 120px，高 32px，完全圆角，z-index 50
**背景：**
- 使用以下精确 URL 设置全出血背景图：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143500_a76b8e64-2c69-4683-80e7-2bb060a921d6.png&w=1280&q=85`
- 对背景图应用 `blur(12px)` 和 `scale(1.1)`
- 在上方添加半透明叠层：`#8a9aaa`，透明度 30%
**字体：**
- 从以下地址加载 "Helvetica Now Var"：`https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var`
- 后备字体栈：'Helvetica Neue', Helvetica, Arial, sans-serif
- 全局应用于所有元素
**内容布局（flex column，内边距：顶部 56px、两侧 24px、底部 24px）：**
1. **页眉徽章**（顶部，下方外边距 40px）：
- 液态玻璃药丸，包含 Timer icon（12px，white/80）+ 文本 "Vitaforge Daily"（12px，white/90，中等字重）
- 内边距：垂直 10px，水平 12px
2. **标题区域**（下方外边距 32px）：
- 副标题："选择所有适用项" - white/60，14px
- 标题："你希望改善健康的哪些方面？" - white，28px，正常字重，紧凑行高和字距
3. **选择网格**（2 列，间距 12px，扩展以填满可用空间）：
- 4 张卡片："睡眠质量"、"压力"、"体重"、"皮肤"
- 每张卡片：rounded-[32px]，高 100px，内边距 16px
- 显示编号标签（01、02 等），white/50，11px，中等字重
- 选项文本为 white，16px，中等字重
- "压力"（id:2）和 "皮肤"（id:4）默认选中
- 点击卡片可切换选择状态
4. **语音按钮**（居中，垂直外边距 24px）：
- 背后使用黄色/金色径向辉光：`radial-gradient(ellipse at center, rgba(220,200,80,0.5) 0%, rgba(180,160,40,0.2) 40%, transparent 70%)`
- 64px 圆形液态玻璃按钮，带波形 SVG icon（白色描边，strokeWidth 2，strokeLinecap round），显示 5 根高度不一的竖条
- 下方显示 "语音" 标签，white/70，12px
5. **滑动确认按钮**（底部，位于 24px 水平内边距内）：
- 全宽 rounded-full 轨道，高 56px，液态玻璃样式
- 左侧白色圆形滑块（44px），带 ArrowRight icon（gray-800）
- 居中显示 "完成" 文本，white/60，14px，中等字重
- 右侧放置 3 个 ChevronRight icons（14px），透明度依次为 white/40、white/50、white/60
- 可通过 pointer events 拖动滑块：未拖过 85% 时弹回，拖过 85% 时吸附到末端
**液态玻璃效果（CSS classes）：**
`.liquid-glass`：
- 背景：`rgba(255,255,255,0.01)`，使用 luminosity blend mode
- Backdrop filter：`blur(4px)`
- 盒阴影：`inset 0 1px 1px rgba(255,255,255,0.1)`
- 使用 `::before` 伪元素创建渐变边框：`linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)`，配合 1.4px 内边距和 mask-composite exclude 技术
`.liquid-glass-selected`：
- 与上方相同，但背景为 `rgba(255,255,255,0.12)`，模糊 8px，盒阴影更强（`inset 0 1px 2px rgba(255,255,255,0.2)`），渐变边框更亮（边缘 alpha 为 0.6，20%/80% 处为 0.25）
**动画：**
- 所有元素使用交错的向上淡入动画
- Keyframes：从 `opacity:0, translateY(16px)` 到 `opacity:1, translateY(0)`
- 时长：0.5s，easing：`cubic-bezier(0.22, 1, 0.36, 1)`，fill：forwards
- 延迟：页眉 0.1s、标题 0.25s、网格卡片 0.4s/0.48s/0.56s/0.64s、语音 0.7s、滑块 0.85s
**依赖项：**
- React 18、Tailwind CSS 3、Lucide React、Vite、TypeScript原文提示词（English）
Build a mobile wellness quiz screen inside a realistic phone frame mockup, centered on a white page. Use React with Tailwind CSS and Lucide React icons.
**Phone Frame:**
- Dimensions: 375px wide x 780px tall
- Border radius: 52px
- Background color: `#8a9aaa`
- Box shadow to simulate a real phone bezel: `inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)`
- A black pill-shaped Dynamic Island at the top center: 120px wide, 32px tall, fully rounded, z-index 50
**Background:**
- Full-bleed background image using this exact URL: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143500_a76b8e64-2c69-4683-80e7-2bb060a921d6.png&w=1280&q=85`
- Apply `blur(12px)` and `scale(1.1)` to the background image
- Semi-transparent overlay: `#8a9aaa` at 30% opacity on top
**Font:**
- Load "Helvetica Now Var" from: `https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var`
- Fallback stack: 'Helvetica Neue', Helvetica, Arial, sans-serif
- Apply globally to all elements
**Content Layout (flex column, padding: 56px top, 24px sides, 24px bottom):**
1. **Header Badge** (top, with 40px margin-bottom):
- Liquid glass pill with Timer icon (12px, white/80) + text "Vitaforge Daily" (12px, white/90, medium weight)
- Padding: 10px vertical, 12px horizontal
2. **Title Section** (32px margin-bottom):
- Subtitle: "Choose all that apply" - white/60, 14px
- Heading: "What aspects of your wellness would you like to boost?" - white, 28px, normal weight, tight leading and tracking
3. **Selection Grid** (2 columns, 12px gap, pushes to fill available space):
- 4 cards: "Sleep quality", "Stress", "Weight", "Skin"
- Each card: rounded-[32px], 100px height, padding 16px
- Shows a number label (01, 02, etc.) in white/50, 11px, medium weight
- Option text in white, 16px, medium weight
- "Stress" (id:2) and "Skin" (id:4) are pre-selected
- Cards are toggleable on click
4. **Voice Button** (centered, 24px vertical margin):
- Yellow/gold radial glow behind: `radial-gradient(ellipse at center, rgba(220,200,80,0.5) 0%, rgba(180,160,40,0.2) 40%, transparent 70%)`
- 64px circular liquid glass button with a waveform SVG icon (white strokes, strokeWidth 2, strokeLinecap round) showing 5 vertical bars of varying heights
- "voice" label below in white/70, 12px
5. **Slide-to-Confirm Button** (bottom, inside 24px horizontal padding):
- Full-width rounded-full track, 56px tall, liquid glass style
- White circular thumb (44px) on the left with ArrowRight icon (gray-800)
- "Done" text centered in white/60, 14px, medium weight
- 3 ChevronRight icons on the right (14px) at white/40, white/50, white/60 opacity
- Draggable thumb with pointer events: snaps back if not dragged past 85%, snaps to end if past 85%
**Liquid Glass Effect (CSS classes):**
`.liquid-glass`:
- Background: `rgba(255,255,255,0.01)` with luminosity blend mode
- Backdrop filter: `blur(4px)`
- Box shadow: `inset 0 1px 1px rgba(255,255,255,0.1)`
- `::before` pseudo-element for gradient border: `linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)` with 1.4px padding and mask-composite exclude technique
`.liquid-glass-selected`:
- Same as above but background: `rgba(255,255,255,0.12)`, blur 8px, stronger box shadow (`inset 0 1px 2px rgba(255,255,255,0.2)`), and brighter gradient border (0.6 alpha at edges, 0.25 at 20%/80%)
**Animations:**
- Staggered fade-up animation on all elements
- Keyframes: from `opacity:0, translateY(16px)` to `opacity:1, translateY(0)`
- Duration: 0.5s, easing: `cubic-bezier(0.22, 1, 0.36, 1)`, fill: forwards
- Delays: header 0.1s, title 0.25s, grid cards 0.4s/0.48s/0.56s/0.64s, voice 0.7s, slider 0.85s
**Dependencies:**
- React 18, Tailwind CSS 3, Lucide React, Vite, TypeScript视频地址
