Pool Hadiah · 设计规范

视觉风格:暗金 + 品红的节日感 + 宝藏宝箱的游戏化隐喻。 设计基准:375 × 812(iPhone 标准),所有尺寸等比缩放到 vw。

色彩 Token

/* Background */
--bg-0      #1a0320   深紫底色
--bg-1      #2d0b3a   中紫
--bg-2      #4a1232   暗红紫

/* Gold (主色/点缀) */
--gold-1    #ffe9a8   高亮金
--gold-2    #ffc24b   主金
--gold-3    #e28b14   深金
--gold-4    #8a4a0a   金属投影

/* Accent (强调) */
--red       #ff3f6e   粉红(任务槽位/主 CTA 辅助)
--pink      #ff6fa8   浅粉
--green     #4adc70   成功/+10 浮字

/* Neutral */
--ink       #1a0320   按钮文字
--paper     #fff7e2   卡片高亮

背景不是纯色:三层叠加,顶部玫红径向渐变 + 底部紫蓝径向渐变 + 整体紫黑线性渐变, 上面再盖一层 8% 不透明度的噪声图以避免色带,最后 conic 光芒慢速旋转。

字体

字号最终会被 postcss 转成 vw,在 iPhone SE 会略小,在 Plus 系列会略大。

间距规范

外边距横向  20px
卡片内边距  14-18px
卡片间距    10-14px
按钮高度    56px (主) / 42px (次)
圆角        14-16px (卡片) / 56px (主按钮) / 42px (次按钮)

组件布局(375 × 812 基准)

 0  ┌──────────────────────────────┐
 14 │  ‹      [Aturan ›]            │  TopBar 46px
 46 │                                │
 50 │     [EVENT SPESIAL]            │
 66 │       Pool Hadiah              │  Title 70px
100 │  Undang Teman · Bagi Hadiah   │
120 │                                │
134 │  ┌ Pool Card ─────────────┐    │
    │  │ Total Pool    • LIVE    │   │  PoolCard 108px
    │  │ [🪙] 8,420  KOIN        │   │
    │  │ 2,817 peserta  ·  +10   │   │
244 │  └─────────────────────────┘   │
254 │  ┌ Task Card ─────┬──────┐     │
    │  │ Undang 3 Lv.2  │+10   │     │  TaskCard 82px
    │  │ ⚫⚫○ 1/3       │ KOIN │     │
    │  │ +10 koin/teman │Undang│     │
336 │  └────────────────┴──────┘     │
340 │                                │
    │        ┌ Scene ┐               │
    │       │  ☀️🧰  │               │  Scene 240px
    │       │        │               │
580 │       └────────┘               │
590 │  Putaran  03 : 42 : 18         │
610 │  [ BUKA SEKARANG ]              │  Bottom 202px
670 │  👥 Jihan baru dapat 12 Koin   │
690 │  Hak penuh · ShortPro          │
812 └──────────────────────────────┘

中奖揭晓后,.scene 里出现 Prize Reveal(绝对定位居中), 底部按钮切换为 Tarik Lagi + Undang Teman · Pool Naik 两列。

动画时间轴

常态(idle)

bg-rays       旋转一圈 40s, 循环
halo          脉冲 3s 一个呼吸
chest         上下浮动 3s 一周期 (-6px)
sparkle       16 颗,上升 6-14s,opacity 0 → 1 → 0
CTA rings     两圈交替外扩 2.2s,delay 1.1s
live msg      每 2.8s 换一条
pool +10      每 3.2-4.7s 一次,count-up 500ms

开奖中(revealing)

0 ms    click → stage 切到 .revealing
        按钮变 spinner
        震动 [30,40,30,40,80]
        chest 开始 0.15s 剧烈抖动
        halo 改 0.4s 快速脉冲
        scene-rays opacity 0 → 0.8, 周期从 8s 变 1.5s
1800 ms 切到 .revealed(后端结果必须这时候到齐)

揭晓(revealed)

0 ms      chest 播 openBounce 0.8s(scale 1 → 1.15 → 1.05)
          lid 用 0.6s cubic-bezier(.3,1.6,.5,1) 翻转 -35deg
          震动 [50,30,100]
          28 枚金币径向飞散 1.6s(随机 0-0.3s 延迟)
          50 片彩纸下落 1.8-3.2s(随机)
          prize-reveal 播 prizePop 0.8s(scale 0.3 → 1.1 → 1)
          prize 数字 count-up 1000ms(easeOutCubic)
          pool 数字扣除 count-up 900ms
300 ms    actions 行滑入(opacity + translateY)

任务进度变化

slot fill   0.5s cubic-bezier(.3,1.5,.5,1) 弹跳出现
pool bump   +10 绿色浮字 1.4s 向上飘
mission 完成 Toast 2.5s,震动 [40,20,80]
task-card   切到 .done,背景转绿

特效配置

低端机(hardwareConcurrency ≤ 4)下: - Sparkle 隐藏 - bg-rays 隐藏 - grain 隐藏 - backdrop-filter 关闭 - 粒子总数维持(视觉主 payoff 不能砍)

文案总表(印尼语)

按钮状态

主按钮 .draw-btn 有四种视觉状态:

灰态同时触发 .draw-btn-wrap 的 .is-disabled,关闭外扩光圈动画, 避免灰按钮有金色光圈违和。

次要按钮 "Tarik Lagi" 灰态(.is-disabled-outline): - 背景 rgba(255,255,255,.05),边框 15% 金 - 文字 35% 金 - 文案换成 "Besok 21:00"

每日 21:00 开放规则

按钮有三个阶段:

< 21:00                   按钮灰态 · "DIBUKA JAM 21:00 · HH:MM:SS" · 倒计时实时刷新
≥ 21:00 且 次数 = 0       按钮灰态 · "AJAK 3 TEMAN UNTUK DAPAT TARIKAN"
≥ 21:00 且 次数 > 0       按钮金色 · "BUKA SEKARANG · Nx" · 可连抽直到次数耗尽

顶部副倒计时的文案也会联动:

locked-before-21  →  "Dibuka dalam HH:MM:SS"
no-chances        →  "Butuh tarikan HH:MM:SS"
available         →  "Event aktif sekarang HH:MM:SS"(指下一个 21:00)

点到灰态按钮时弹 Toast:

• locked-before-21 → ⏰ Event dibuka jam 21:00 setiap hari
• no-chances → 🎯 Ajak 3 teman untuk dapat kesempatan tarik

两阶段任务 + 抽奖次数

任务卡片按阶段切换视觉:

Phase 2 时进度条下方额外显示 · Total Nx,展示累计获得的抽奖次数。

抽奖次数 Chip:

当 drawChances > 0 且未处于 revealed 状态时,按钮上方显示一个小 chip:

● 3x  Kesempatan Tarik Siap   (21:00 后可用)
● 3x  Siap dibuka jam 21:00   (21:00 前等待)

视觉细节: - 胶囊圆角,金粉红渐变背景 rgba(255,196,95,.22) → rgba(255,63,110,.14) - 左侧金色小圆点 1.2s 闪烁 - 次数用 Bebas Neue 18px,显眼 - 出现时 0.4s cubic-bezier 弹跳

按钮文案总表:

Grand Prize 展示

奖池卡片底部通过虚线分割,展示一行 Grand Prize:

──────────────────────────────────
● GRAND PRIZE  [🪙] 4,280   untuk satu pemenang

• 左侧红色小圆点 + "GRAND PRIZE" 1.5px 字间距标签
• 中间 Bebas Neue 16px 金色数字,前面小金币图标
• 右侧 9.5px 斜体灰色提示"untuk satu pemenang di akhir event"
• 小圆点 1.2s 脉冲闪烁,和 LIVE 标签的节奏一样

数字会跟随所有用户的抽奖事件增长(每笔抽奖的 5%),具有社会证明效应。

规则弹窗(Aturan Modal)

触发:点顶部右上角 "Aturan ›" 按钮

样式:底部上滑 bottom-sheet,背景模糊 6px,最大高度 82%

6 条规则列表: 1. 邀请 3 个 Lv.2 好友得 10 Koin(一次性) 2. 之后每 3 个 Lv.2 好友 +1 抽奖机会(可重复) 3. 每天 21:00 开放抽奖 4. 抽奖金额 5-15 随机 5. 每次抽奖的 5% 入 Grand Prize,活动末抽一名幸运儿独得 6. 凡参与者都有机会中 Grand Prize

每条左侧带金色圆形编号 chip,右侧加粗关键字为金色。

底部主按钮 "Mengerti"(我知道了),点击关闭弹窗。 点遮罩区域也会关闭。

交互细节

• 触觉反馈:支持 navigator.vibrate 的设备在 Draw 和 Reveal 时震动
• 防误触:Draw 过程中按钮 pointer-events: none,同时状态机锁住
• 复制链接:优先用 navigator.clipboard,降级到 execCommand('copy')
• Toast 重叠:同时只显示一条,后来的覆盖前面的(重启动画)
• Safe area:底部用 env(safe-area-inset-bottom) 适配全面屏
• Reduced motion:prefers-reduced-motion: reduce 关闭所有循环动画

视觉 QA 检查单

过审时请确认以下点在真机上一致:

• [ ] 背景光芒在慢速旋转
• [ ] 宝箱有 3s 呼吸上下浮动
• [ ] 奖池数字每 3-4 秒 +10 并有绿色浮字
• [ ] 任务进度槽位填充有弹跳动画
• [ ] 点 BUKA SEKARANG 后先抖动 1.8s 才开奖
• [ ] 开奖后金币从中心爆开到四周,不是直线
• [ ] 彩纸是 50 片向下飘(不是向上)
• [ ] 中奖数字从 0 缓动到结果,不是直接显示
• [ ] Actions 两个按钮有 300ms 延迟后滑入
• [ ] Toast 出现和消失都有缩放
• [ ] 任务完成后 task-card 变绿,+10 badge 变绿
• [ ] iPhone 刘海/胶囊区不被顶部内容遮挡
• [ ] Home Indicator 区域(底部)不被按钮压住
• [ ] 21:00 前按钮是灰白不可点,显示倒计时文案
• [ ] 21:00 整点时按钮自动切回金色可点(无需刷新)
• [ ] 次数 = 0 时按钮是灰白 "AJAK 3 TEMAN..." 文案,即便 21:00 后
• [ ] Phase 1 完成后任务卡切换到粉红"+1 TARIK"徽章,进度重置到 0/3
• [ ] Phase 2 每完成一轮 3/3,抽奖次数 +1,任务重置继续
• [ ] 抽奖次数 > 0 时按钮上方出现金粉渐变 chip 显示 "Nx 次数"
• [ ] 每次抽奖消耗 1 次,次数减 1,可连抽直到耗尽
• [ ] 刷新页面后任务进度和抽奖次数保持(localStorage 兜底)
• [ ] 用 ?state=locked|available|no-chances URL 参数可预览三种按钮状态