GRINDVAULT v1.0

👑

PLAYER_01 LV.1

40/100

+XP

儲蓄率

62%

今日 XP

vs 昨日

今日支出

vs 昨日

熱量攝入

vs 昨日

本月收入

52,000

NT$

消耗體力

19,800

NT$

放置收益

1,240

NT$

STR

24

AGI

18

VIT

31

SPI

22

健身

▲

成就徽章

最近紀錄

◆

薪資入帳

主動收入

+52,000

▼

租房費用

固定消耗

-12,000

●

ETF 定期定額

放置型收益

+1,240

免費記錄 0/10

PRO ▶

輸入金額

NT$

日期

▶

★

記錄成功！

+ 10 XP

◆

複利試算
PRO 功能

免費版不含複利試算。
升級 PRO 解鎖完整複利計算、
里程碑追蹤與角色 LV 預測。

本金 100,000 NT$

每月定投 5,000 NT$

年化報酬率 8%

年數 10 年

最終資產

—

投入本金

—

複利收益

—

複利 vs 單利

複利成長

單利成長

里程碑

★

裝備解鎖！
歡迎成為冒險者

訂閱已啟動
像素小人正在換上新裝備...

+ 100 XP

每日熱量目標

TDEE

—

kcal/日

目標

—

kcal/日

蛋白質

—

g/日

🔍 熱量查詢

今日攝入

今日總計 0 kcal

💸 外食支出對比

本月外食

4,200

NT$

佔總支出

21%

建議 < 15%

每月外食 NT$4,200，一年累計 NT$50,400。
若每週少外食 2 次，年省約 NT$15,000。

◆ AI 飲食建議

PLAYER_01

▶ 連續訓練 3 天 — 燃脂火焰解鎖！

▲

連續天數

STR

AGI

VIT

SPI

今日重訓紀錄

深蹲 Squat

4組 × 80kg × 8次

+25XP

臥推 Bench Press

3組 × 60kg × 10次

+20XP

新增動作

動作名稱

組數

重量

次數

今日有氧紀錄

慢跑

35分 · 5.2km · 320kcal

+18XP

新增有氧

類型

時間

分

距離

消耗

kcal

當前數值

體重

72.5

體脂率

18.2

BMI

22.4

—

更新數值

體重

體脂

身高

本週睡眠

●

週一

7.5h

●

週二

6.2h

●

週三

8.3h

▶

今天

—

記錄今晚睡眠

時數

品質

▲

訓練完成！

+25 XP

LV.1

LEVEL UP!

新裝備解鎖！

裝備升級

VS 昨日的你

TODAY

YESTERDAY

--dim: #555555; --text: #cccccc; --fire: #FF6B2B; --amber: #FFAA00; } /* ── LIGHT MODE ────────────────────────────────────────── */ body.light { --pg: #007A1E; --gold: #B8860B; --red: #CC2222; --blue: #1A5FBB; --bg: #F5F5F0; --panel: #FFFFFF; --panel2: #ECECEC; --border: #CCCCCC; --dim: #888888; --text: #333333; --fire: #CC4400; --amber: #996600; } body.light .topbar { background: #ECECEC; border-bottom-color: #CCCCCC; } body.light .bottomnav { background: #ECECEC; border-top-color: #CCCCCC; } body.light .hero { background: #F0F0EA; } body.light .tx { background: #FAFAF8; } body.light .badge { background: #F0F0EA; } body.light .m-card { background: #FFFFFF; } body.light .section { background: #F5F5F0; } body.light .fit-hero { background: #FFF5EE; } body.light .attr-card { background: #FFF5EE; } body.light .exercise-item { background: #FFF5EE; } body.light .body-stat { background: #FFF5EE; } body.light .num-btn { background: #FFFFFF; color: #333; } body.light .num-btn.ok { background: #E8F5E9; } body.light .type-btn { background: #FFFFFF; } body.light .type-btn.a-exp { background: #FFEEEE; } body.light .type-btn.a-inc { background: #EEFFEE; } body.light .type-btn.a-inv { background: #EEF4FF; } body.light .fit-tab { background: #FFF5EE; } body.light .fit-tab.active { background: #FFE8D6; } body.light .fit-inp { background: #FAFAFA; color: #333; border-color: #CCC; } body.light .fit-log-panel { background: #F5F5F0; } body.light .pw-modal { background: #FFFFFF; } body.light .pw-top { background: #EEFFEE; } body.light #pw-trial-summary > div { background: #FFFFFF; } body.light .plan { background: #FAFAFA; } body.light .plan.sel { background: #FFFFF0; } body.light .perks { background: #FAFAFA; } body.light .gate-overlay { background: rgba(240,240,235,0.95); } body.light .gate-title { color: #996600; } body.light .ai-report-card { background: #EEFFEE; border-color: #007A1E; } body.light .pro-lock-banner { background: #FFFFF0; border-color: #B8860B; color: #996600; } body.light .free-counter { background: #ECECEC; } body.light .note-inp { background: #FAFAFA; color: #333; } body.light .chip { border-color: #CCCCCC; color: #666; } body.light .levelup-toast-el { background: #FFFFF0; } body.light #badge-toast { background: #FFFFFF; } body.light .sleep-bar-wrap { background: #E0E0D8; } /* scanline lighter in light mode */ body.light::before { opacity: 0.04; } body.light::after { opacity: 0.5; } /* theme toggle button */ .theme-toggle { width: 28px; height: 28px; background: none; border: 1px solid var(--dim); border-radius: 4px; color: var(--dim); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--pg); color: var(--pg); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { background: var(--bg); color: var(--pg); font-family: 'Space Mono', monospace; font-weight: 700; min-height: 100vh; max-width: 480px; margin: 0 auto; position: relative; overflow-x: hidden; } /* ── SCREEN SYSTEM ─────────────────────── */ .screen { display: none; flex-direction: column; min-height: 100vh; } .screen.active { display: flex; } /* ── TOPBAR ────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 2px solid var(--border); background: var(--panel2); flex-shrink: 0; position: sticky; top: 0; z-index: 10; } .logo { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--pg); letter-spacing: 2px; } .logo span { color: var(--gold); } .trial-badge { font-size: 12px; color: var(--gold); border: 1px solid var(--gold); padding: 3px 8px; animation: blink 1.5s step-end infinite; cursor: pointer; } .trial-badge:hover { background: #1a1a00; } .lang-row { display: flex; gap: 4px; } .lang-btn { font-family: 'Space Mono', monospace; font-size: 13px; background: none; border: 1px solid var(--dim); color: var(--dim); padding: 2px 7px; cursor: pointer; transition: all 0.1s; } .lang-btn.active { border-color: var(--pg); color: var(--pg); } .back-btn { background: none; border: 1px solid var(--dim); color: var(--dim); font-family: 'Space Mono', monospace; font-size: 13px; padding: 3px 8px; cursor: pointer; transition: all .15s; } .back-btn:hover { border-color: var(--pg); color: var(--pg); } .page-title { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--pg); } /* ── BOTTOMNAV ─────────────────────────── */ .bottomnav { display: flex; border-top: 2px solid var(--border); background: var(--panel2); flex-shrink: 0; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 100; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 10px; cursor: pointer; border-top: 2px solid transparent; transition: all 0.15s; font-size: 12px; color: var(--dim); background: none; border-left: none; border-right: none; border-bottom: none; font-family: 'Space Mono', monospace; } .nav-item.active { border-top-color: var(--pg); color: var(--pg); } .nav-item svg { width: 20px; height: 20px; } /* pad scroll-body so content doesn't hide behind fixed nav */ .scroll-body { flex: 1; overflow-y: auto; padding-bottom: 72px; } /* ── METRIC GRID ───────────────────────── */ .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .m-card { background: var(--panel); padding: 12px 10px; } .m-label { font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .m-val { font-family: 'Press Start 2P', monospace; font-size: 12px; margin-bottom: 2px; } .m-val.gold { color: var(--gold); } .m-val.red { color: var(--red); } .m-val.blue { color: var(--blue); } .m-val.pg { color: var(--pg); } .m-sub { font-size: 12px; color: var(--dim); } /* ── SECTION ───────────────────────────── */ .section { padding: 14px 16px; border-top: 1px solid var(--border); } .section-title { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── HERO AVATAR ───────────────────────── */ .hero { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--panel2); } .avatar { width: 52px; height: 52px; flex-shrink: 0; image-rendering: pixelated; } .hero-right { flex: 1; } .username { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--gold); margin-bottom: 6px; } .xpbar-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .xpbar-lbl { font-size: 12px; color: var(--dim); min-width: 30px; } .xpbar { flex: 1; height: 8px; background: #1a1a1a; border: 1px solid var(--border); overflow: hidden; } .xpbar-fill { height: 100%; background: var(--pg); position: relative; transition: width 0.8s ease; } .xpbar-fill::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #fff; opacity: 0.5; animation: shimmer 1s ease-in-out infinite; } .xpbar-val { font-size: 12px; color: var(--pg); min-width: 42px; text-align: right; } @keyframes shimmer { 0%,100%{opacity:.2} 50%{opacity:.8} } @keyframes blink { 50%{opacity:.2} } /* ── ACHIEVEMENTS ──────────────────────── */ .badge-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; } .badge { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--border); min-width: 58px; } .badge.unlocked { border-color: var(--gold); } .badge-icon { font-size: 15px; } .badge-name { font-size: 13px; color: var(--dim); text-align: center; } .badge.unlocked .badge-name { color: var(--gold); } /* ── MINI BAR CHART ─────────────────────── */ .bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 64px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; } .bar { width: 100%; background: var(--pg); opacity: 0.7; min-height: 4px; } .bar.cur { opacity: 1; } .bar.exp { background: var(--red); } .bar-lbl { font-size: 12px; color: var(--dim); } /* ── TX LIST ────────────────────────────── */ .tx-list { display: flex; flex-direction: column; gap: 6px; } .tx { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--border); border-left: 3px solid transparent; cursor: default; transition: border-color .15s; } .tx:hover { border-left-color: var(--pg); } .tx.exp { border-left-color: var(--red); } .tx.inc { border-left-color: var(--pg); } .tx.inv { border-left-color: var(--blue); } .tx-icon { font-size: 13px; width: 16px; text-align: center; } .tx-info { flex: 1; } .tx-name { font-size: 12px; color: var(--text); margin-bottom: 1px; } .tx-cat { font-size: 12px; color: var(--dim); } .tx-amt { font-family: 'Press Start 2P', monospace; font-size: 13px; } .tx-amt.neg { color: var(--red); } .tx-amt.pos { color: var(--pg); } .tx-amt.inv { color: var(--blue); } .add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px; background: none; border: 1px dashed var(--dim); color: var(--dim); font-family: 'Space Mono', monospace; font-size: 12px; cursor: pointer; transition: all .2s; } .add-btn:hover { border-color: var(--pg); color: var(--pg); } .savings-note { display: inline-flex; align-items: center; gap: 6px; background: #001a00; border: 1px solid var(--pg); padding: 5px 10px; font-size: 12px; color: var(--pg); margin-top: 8px; } /* ── ADD ENTRY ──────────────────────────── */ .type-row { display: flex; gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); } .type-btn { flex: 1; padding: 11px 0; text-align: center; font-size: 13px; font-family: 'Space Mono', monospace; cursor: pointer; background: var(--panel); border: none; color: var(--dim); transition: all .15s; } .type-btn.a-exp { background: #1a0000; color: var(--red); } .type-btn.a-inc { background: #001a00; color: var(--pg); } .type-btn.a-inv { background: #00102a; color: var(--blue); } .amt-pad { padding: 20px 16px 14px; border-bottom: 1px solid var(--border); background: var(--panel2); text-align: center; } .amt-label { font-size: 12px; color: var(--dim); margin-bottom: 8px; letter-spacing: 2px; } .amt-display { font-family: 'Press Start 2P', monospace; font-size: 28px; color: var(--red); letter-spacing: 2px; min-height: 40px; transition: color .2s; } .amt-display.ic { color: var(--pg); } .amt-display.iv { color: var(--blue); } .amt-cur { font-size: 12px; color: var(--dim); margin-top: 4px; } .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); } .num-btn { background: var(--panel); border: none; color: var(--text); font-family: 'Space Mono', monospace; font-size: 16px; font-weight: 700; padding: 17px 0; cursor: pointer; transition: background .1s; } .num-btn:active { background: #1c1c1c; } .num-btn.del { color: var(--dim); font-size: 12px; } .num-btn.zero { grid-column: span 2; } .num-btn.ok { background: #001a00; color: var(--pg); font-size: 13px; } .num-btn.ok:active { background: #003300; } .meta-sec { padding: 12px 16px; } .meta-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .meta-lbl { font-size: 13px; color: var(--dim); min-width: 48px; } .meta-val { flex: 1; font-size: 12px; color: var(--text); } .meta-arr { font-size: 12px; color: var(--dim); } .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--border); } .chip { font-size: 13px; padding: 4px 10px; border: 1px solid var(--dim); color: var(--dim); cursor: pointer; transition: all .15s; background: none; font-family: 'Space Mono', monospace; } .chip.s-exp { border-color: var(--red); color: var(--red); background: #1a0000; } .chip.s-inc { border-color: var(--pg); color: var(--pg); background: #001a00; } .chip.s-inv { border-color: var(--blue); color: var(--blue); background: #001030; } .note-inp { width: 100%; background: var(--panel2); border: 1px solid var(--border); border-left: 3px solid var(--dim); color: var(--text); font-family: 'Space Mono', monospace; font-size: 12px; padding: 9px 12px; outline: none; transition: border-color .2s; margin: 12px 0; } .note-inp:focus { border-left-color: var(--pg); } .note-inp::placeholder { color: var(--dim); } .submit-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; background: #001a00; border: 2px solid var(--pg); color: var(--pg); font-family: 'Press Start 2P', monospace; font-size: 12px; cursor: pointer; letter-spacing: 2px; transition: all .15s; } .submit-btn:hover { background: #003300; } .submit-btn.em { background: #1a0000; border-color: var(--red); color: var(--red); } .submit-btn.im { background: #001030; border-color: var(--blue); color: var(--blue); } .feedback-wrap { display: none; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 30px; text-align: center; } .feedback-wrap.show { display: flex; } .fb-icon { font-size: 40px; animation: bounce .5s ease infinite alternate; } @keyframes bounce { to { transform: translateY(-8px); } } .fb-msg { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--pg); line-height: 1.9; } .fb-sub { font-size: 12px; color: var(--dim); line-height: 2; } .fb-xp { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--gold); margin-top: 6px; } .fb-back { margin-top: 10px; padding: 10px 20px; background: none; border: 1px solid var(--dim); color: var(--dim); font-family: 'Space Mono', monospace; font-size: 13px; cursor: pointer; transition: all .15s; } .fb-back:hover { border-color: var(--pg); color: var(--pg); } /* ── COMPOUND ───────────────────────────── */ .ctrl-sec { padding: 16px; border-bottom: 1px solid var(--border); } .ctrl-row { margin-bottom: 14px; } .ctrl-lbl { font-size: 12px; color: var(--dim); letter-spacing: 1px; margin-bottom: 6px; display: flex; justify-content: space-between; } .ctrl-lbl span { color: var(--text); font-size: 12px; } input[type=range] { width: 100%; accent-color: var(--pg); cursor: pointer; } .cmp-chart { display: flex; align-items: flex-end; gap: 3px; height: 100px; padding: 0 16px 4px; } .cmp-grp { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; height: 100%; } .b-comp { width: 100%; background: var(--gold); opacity: .85; transition: height .5s ease; } .b-simp { width: 100%; background: var(--pg); opacity: .4; transition: height .5s ease; } .b-yr { font-size: 12px; color: var(--dim); margin-top: 3px; } .legend-row { display: flex; gap: 14px; padding: 8px 16px 0; } .leg { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dim); } .leg-dot { width: 8px; height: 8px; flex-shrink: 0; } .ms-list { display: flex; flex-direction: column; gap: 6px; } .ms-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--panel2); border: 1px solid var(--border); } .ms-yr { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--dim); min-width: 38px; } .ms-bw { flex: 1; height: 6px; background: #1a1a1a; border: 1px solid var(--border); } .ms-b { height: 100%; background: var(--gold); transition: width .6s ease; } .ms-v { font-size: 13px; color: var(--gold); min-width: 62px; text-align: right; } .cmp-note { margin-top: 12px; padding: 8px 12px; border-left: 3px solid var(--pg); background: #001a00; font-size: 12px; color: var(--pg); line-height: 1.9; } /* ── PAYWALL ─────────────────────────────── */ .pw-blur { position: absolute; inset: 0; filter: blur(3px); opacity: .2; pointer-events: none; padding: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 0; } .pw-fake-row { height: 14px; background: var(--pg); border-radius: 2px; } .pw-fake-row.s { width: 60%; } .pw-fake-row.g { background: var(--gold); } .pw-fake-card { height: 60px; background: var(--panel); border: 1px solid var(--border); } .pw-modal { position: relative; z-index: 1; margin: 20px 14px; background: var(--panel2); border: 2px solid var(--gold); } .pw-top { background: #001a00; border-bottom: 2px solid var(--border); padding: 16px; text-align: center; } .game-over { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--dim); letter-spacing: 3px; margin-bottom: 8px; animation: blink 2s step-end infinite; } .trial-ended { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--gold); line-height: 1.9; margin-bottom: 10px; } .day-dots { display: flex; justify-content: center; gap: 4px; } .day-dot { width: 20px; height: 20px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; } .day-dot.done { background: var(--pg); border-color: var(--pg); color: #000; } .day-dot.today { background: var(--gold); border-color: var(--gold); color: #000; } .pw-body { padding: 16px; } .plans { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .plan { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); cursor: pointer; transition: all .15s; background: var(--panel); } .plan.sel { border-color: var(--gold); background: #111000; } .plan-radio { width: 14px; height: 14px; border: 2px solid var(--dim); flex-shrink: 0; position: relative; } .plan.sel .plan-radio { border-color: var(--gold); } .plan.sel .plan-radio::after { content: ''; position: absolute; inset: 2px; background: var(--gold); } .plan-info { flex: 1; } .plan-name { font-size: 12px; color: var(--text); margin-bottom: 2px; } .plan-desc { font-size: 12px; color: var(--dim); } .plan-price { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--gold); } .plan-badge { font-size: 13px; padding: 2px 6px; background: #001a00; color: var(--pg); border: 1px solid var(--pg); margin-left: 6px; } .perks { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid var(--border); background: var(--panel); margin-bottom: 14px; } .perk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #aaa; } .perk-ic { color: var(--pg); font-size: 12px; width: 12px; } .cta-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; background: #001a00; border: 2px solid var(--pg); color: var(--pg); font-family: 'Press Start 2P', monospace; font-size: 12px; letter-spacing: 2px; cursor: pointer; transition: all .15s; } .cta-btn:hover { background: #003300; } .cta-btn:active { transform: scale(.98); } .pw-footer { text-align: center; font-size: 12px; color: var(--dim); padding: 10px; border-top: 1px solid var(--border); } .success-wrap { display: none; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 30px; text-align: center; } .success-wrap.show { display: flex; } .success-icon { font-size: 48px; animation: bounce .6s ease infinite alternate; } .success-title { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--gold); line-height: 1.9; } .success-sub { font-size: 13px; color: var(--dim); line-height: 2; } .success-xp { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--pg); margin-top: 6px; } /* ── FITNESS MODULE ───────────────────────────────────── */ :root { --fire:#FF6B2B; --amber:#FFAA00; --str:#FF4444; --agi:#FFAA00; --vit:#FF6B2B; --spi:#AA88FF; } .fit-hero { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid #2a1a0a; background:#0d0500; } .fit-avatar { width:52px; height:52px; flex-shrink:0; image-rendering:pixelated; } .fit-hero-right { flex:1; } .fit-username { font-family:'Press Start 2P',monospace; font-size:12px; color:var(--fire); margin-bottom:6px; } .fit-streak { font-size:12px; color:var(--amber); margin-bottom:4px; animation:blink 2s step-end infinite; } .attr-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:#2a1a0a; border-top:1px solid #2a1a0a; border-bottom:1px solid #2a1a0a; } .attr-card { background:#0d0500; padding:10px 8px; text-align:center; } .attr-label { font-size:13px; color:#664422; margin-bottom:5px; text-transform:uppercase; } .attr-val { font-family:'Press Start 2P',monospace; font-size:13px; margin-bottom:4px; } .attr-bar { height:4px; background:#1a0a00; border:1px solid #2a1a0a; overflow:hidden; } .attr-bar-fill { height:100%; transition:width 0.6s ease; } .str-c{color:var(--str);} .str-b{background:var(--str);} .agi-c{color:var(--agi);} .agi-b{background:var(--agi);} .vit-c{color:var(--vit);} .vit-b{background:var(--vit);} .spi-c{color:var(--spi);} .spi-b{background:var(--spi);} .fit-section { padding:14px 16px; border-top:1px solid #2a1a0a; } .fit-section-title { font-size:12px; color:#664422; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; display:flex; align-items:center; gap:8px; } .fit-section-title::after { content:''; flex:1; height:1px; background:#2a1a0a; } .fit-tab-row { display:flex; gap:1px; background:#2a1a0a; border-bottom:1px solid #2a1a0a; } .fit-tab { flex:1; padding:9px 0; text-align:center; font-size:12px; font-family:'Space Mono',monospace; cursor:pointer; background:#0d0500; border:none; color:#664422; transition:all .15s; } .fit-tab.active { background:#1a0800; color:var(--fire); } .fit-log-panel { display:none; padding:14px 16px; } .fit-log-panel.active { display:block; } .fit-input-row { display:flex; gap:8px; align-items:center; margin-bottom:10px; } .fit-lbl { font-size:12px; color:#664422; min-width:52px; } .fit-inp { flex:1; background:#0a0300; border:1px solid #2a1a0a; border-left:3px solid #2a1a0a; color:var(--text); font-family:'Space Mono',monospace; font-size:13px; padding:7px 10px; outline:none; transition:border-color .2s; -webkit-appearance:none; } .fit-inp:focus { border-left-color:var(--fire); } .fit-inp::placeholder { color:#443322; } .fit-unit { font-size:13px; color:#664422; min-width:28px; } .fit-submit { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; background:#1a0800; border:2px solid var(--fire); color:var(--fire); font-family:'Press Start 2P',monospace; font-size:13px; letter-spacing:2px; cursor:pointer; transition:all .15s; margin-top:4px; } .fit-submit:hover { background:#2a1000; } .exercise-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; } .exercise-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:#0a0300; border:1px solid #2a1a0a; border-left:3px solid var(--fire); } .ex-name { flex:1; font-size:12px; color:var(--text); } .ex-detail { font-size:12px; color:#664422; } .ex-xp { font-family:'Press Start 2P',monospace; font-size:12px; color:var(--amber); } .body-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; } .body-stat { background:#0a0300; border:1px solid #2a1a0a; padding:10px 8px; text-align:center; } .body-stat-lbl { font-size:13px; color:#664422; margin-bottom:5px; } .body-stat-val { font-family:'Press Start 2P',monospace; font-size:12px; color:var(--fire); } .body-stat-unit { font-size:13px; color:#664422; margin-top:2px; } .sleep-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .sleep-icon { font-size:14px; width:20px; text-align:center; } .sleep-info { flex:1; } .sleep-name { font-size:12px; color:var(--text); margin-bottom:3px; } .sleep-bar-wrap { height:6px; background:#1a0a00; border:1px solid #2a1a0a; } .sleep-bar { height:100%; background:var(--spi); transition:width .6s; } .sleep-val { font-family:'Press Start 2P',monospace; font-size:13px; color:var(--spi); min-width:40px; text-align:right; } .fit-feedback { display:none; flex:1; align-items:center; justify-content:center; flex-direction:column; gap:12px; padding:30px; text-align:center; } .fit-feedback.show { display:flex; } .fit-fb-icon { font-size:36px; animation:bounce .5s ease infinite alternate; } .fit-fb-title { font-family:'Press Start 2P',monospace; font-size:12px; color:var(--fire); line-height:1.9; } .fit-fb-attr { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; justify-content:center; } .fit-fb-chip { font-size:12px; padding:4px 10px; border:1px solid var(--fire); color:var(--fire); background:#1a0800; } .fit-fb-xp { font-family:'Press Start 2P',monospace; font-size:12px; color:var(--amber); } .fit-fb-back { margin-top:10px; padding:10px 20px; background:none; border:1px solid #664422; color:#664422; font-family:'Space Mono',monospace; font-size:13px; cursor:pointer; transition:all .15s; } .fit-fb-back:hover { border-color:var(--fire); color:var(--fire); } .fit-bottomnav { background:#0a0300; border-top:2px solid #2a1a0a; } .fit-bottomnav .nav-item { color:#664422; } .fit-bottomnav .nav-item.active { border-top-color:var(--fire); color:var(--fire); } .badge.locked { opacity:0.6; } .badge.locked .badge-icon { filter: grayscale(1); } /* ── CONFETTI ─────────────────────────────────────────── */ .confetti-piece { position: fixed; width: 8px; height: 8px; top: -10px; pointer-events: none; z-index: 9999; border-radius: 2px; animation: confetti-fall linear forwards; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg) translateX(var(--dx)); opacity: 0; } } /* ── BADGE TOAST ─────────────────────────────────────── */ #badge-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: #0d0d0d; border: 2px solid var(--gold); color: var(--gold); font-family: 'Press Start 2P', monospace; font-size: 12px; padding: 8px 14px; opacity: 0; transition: opacity .3s, transform .3s; z-index: 998; pointer-events: none; white-space: nowrap; text-align: center; line-height: 1.8; } /* ══════════════════════════════════════════════════════════ GRINDVAULT ANIMATION SYSTEM ══════════════════════════════════════════════════════════ */ /* ── 1. SCANLINES background overlay ──────────────────── */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px ); animation: scanline-drift 8s linear infinite; } @keyframes scanline-drift { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } } /* ── 2. SCAN GLOW — sweeping horizontal light ──────────── */ body::after { content: ''; position: fixed; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,255,65,0.03), transparent); pointer-events: none; z-index: 1; animation: scan-sweep 6s ease-in-out infinite; } @keyframes scan-sweep { 0% { left: -60%; } 100% { left: 120%; } } /* ── 3. PAGE LOAD — staggered fade-in ─────────────────── */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .screen.active .topbar { animation: fade-in-up .3s ease both; } .screen.active .hero { animation: fade-in-up .35s .05s ease both; } .screen.active .metric-grid { animation: fade-in-up .35s .10s ease both; } .screen.active .section:nth-child(1) { animation: fade-in-up .35s .15s ease both; } .screen.active .section:nth-child(2) { animation: fade-in-up .35s .20s ease both; } .screen.active .section:nth-child(3) { animation: fade-in-up .35s .25s ease both; } .screen.active .attr-grid { animation: fade-in-up .35s .10s ease both; } .screen.active .fit-tab-row { animation: fade-in-up .35s .15s ease both; } .screen.active .ctrl-sec { animation: fade-in-up .35s .05s ease both; } .screen.active .pw-modal { animation: fade-in-up .4s .1s ease both; } .screen.active #pw-trial-summary { animation: fade-in-up .4s .1s ease both; } /* ── 4. BUTTON PRESS — pixel punch ────────────────────── */ .num-btn:active, .fit-submit:active, .submit-btn:active, .cta-btn:active, .add-btn:active, .type-btn:active, .fit-tab:active, .chip:active { transform: scale(0.92) translateY(2px); filter: brightness(1.3); transition: transform .06s, filter .06s; } .num-btn, .fit-submit, .submit-btn, .cta-btn, .add-btn, .type-btn, .fit-tab, .chip { transition: transform .12s, filter .12s, background .15s, border-color .15s, color .15s; } /* ── 5. CARD HOVER ─────────────────────────────────────── */ .tx:hover { background: #141414; transform: translateX(3px); transition: transform .15s, background .15s; } .badge:hover { transform: scale(1.08) translateY(-2px); transition: transform .15s; } .badge.unlocked:hover { box-shadow: 0 0 8px rgba(255,215,0,0.3); } .m-card:hover { background: #161616; transition: background .15s; } .exercise-item:hover { transform: translateX(3px); transition: transform .15s; } /* ── 6. PIXEL AVATAR — idle walk cycle ────────────────── */ @keyframes pixel-idle { 0%,100% { transform: translateY(0px); } 25% { transform: translateY(-2px); } 50% { transform: translateY(0px); } 75% { transform: translateY(-1px); } } @keyframes pixel-idle-fit { 0%,100% { transform: translateY(0px) scaleX(1); } 20% { transform: translateY(-3px) scaleX(1); } 40% { transform: translateY(0px) scaleX(1); } 60% { transform: translateY(-2px) scaleX(-1); } 80% { transform: translateY(0px) scaleX(-1); } } .avatar svg { animation: pixel-idle 1.6s ease-in-out infinite; } .fit-avatar svg { animation: pixel-idle-fit 2s ease-in-out infinite; } /* ── 7. XP BAR PULSE on fill ───────────────────────────── */ @keyframes xp-pulse { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 6px var(--gold); } } #xp-progress-bar { animation: xp-pulse 2s ease-in-out infinite; } /* ── LEVELUP SPECIAL EFFECTS ────────────────────────────── */ /* 1. 全頁閃光（打雷效果） */ #flash-overlay { position: fixed; inset: 0; z-index: 9000; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.05s; } @keyframes thunder-flash { 0% { opacity: 0; } 10% { opacity: 0.95; } 20% { opacity: 0.1; } 35% { opacity: 0.85; } 50% { opacity: 0; } 65% { opacity: 0.4; } 80% { opacity: 0; } 100% { opacity: 0; } } .thunder-active { animation: thunder-flash 0.5s ease-out forwards !important; } /* 2. LV 數字大展示 */ #lv-display-overlay { position: fixed; inset: 0; z-index: 8500; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.75); pointer-events: none; opacity: 0; transition: opacity 0.3s; } #lv-display-overlay.show { opacity: 1; } #lv-number { font-family: 'Press Start 2P', monospace; font-size: 72px; color: var(--gold); text-shadow: 0 0 30px rgba(255,215,0,0.8); animation: lv-pop 0.4s cubic-bezier(.17,.67,.35,1.3) both; } #lv-label { font-family: 'Press Start 2P', monospace; font-size: 16px; color: var(--pg); margin-top: 12px; animation: lv-pop 0.4s 0.1s cubic-bezier(.17,.67,.35,1.3) both; } @keyframes lv-pop { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* 3. XP 條滿格爆炸 */ @keyframes xp-explode { 0% { transform: scaleX(1); } 40% { transform: scaleX(1.08); filter: brightness(2); } 60% { transform: scaleX(0.95); } 80% { transform: scaleX(1.03); } 100% { transform: scaleX(1); filter: brightness(1); } } .xp-exploding { animation: xp-explode 0.5s ease-out forwards !important; } /* 4. 像素小人換裝 — 裝備依序出現 */ #gear-equip-overlay { position: fixed; inset: 0; z-index: 8000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); pointer-events: none; opacity: 0; transition: opacity 0.3s; } #gear-equip-overlay.show { opacity: 1; } .gear-item { font-size: 28px; margin: 4px; animation: gear-appear 0.3s cubic-bezier(.17,.67,.35,1.3) both; } @keyframes gear-appear { from { transform: translateY(-20px) scale(0); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .gear-item:nth-child(1) { animation-delay: 0s; } .gear-item:nth-child(2) { animation-delay: 0.15s; } .gear-item:nth-child(3) { animation-delay: 0.3s; } .gear-item:nth-child(4) { animation-delay: 0.45s; } .gear-item:nth-child(5) { animation-delay: 0.6s; } /* avatar during gear equip */ @keyframes avatar-bounce-equip { 0%,100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-8px) scale(1.1); } 50% { transform: translateY(0) scale(0.95); } 75% { transform: translateY(-4px) scale(1.05); } } .avatar-equipping svg { animation: avatar-bounce-equip 0.4s ease-in-out infinite !important; } /* ── 8. LOGO flicker ───────────────────────────────────── */ @keyframes logo-flicker { 0%,96%,100% { opacity: 1; } 97% { opacity: 0.6; } 98% { opacity: 1; } 99% { opacity: 0.4; } } .logo { animation: logo-flicker 5s step-end infinite; } /* ── 9. METRIC VALUE count-up flash ───────────────────── */ @keyframes count-flash { 0% { color: #fff; transform: scale(1.2); } 100% { color: inherit; transform: scale(1); } } .count-flash { animation: count-flash .35s ease both; } /* ── 10. SCREEN TRANSITION ─────────────────────────────── */ @keyframes screen-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } .screen.active { animation: screen-in .2s ease both; } /* ── 11. ATTR BAR glow on update ───────────────────────── */ @keyframes attr-glow { 0% { box-shadow: 0 0 0 rgba(255,107,43,0); } 50% { box-shadow: 0 0 8px rgba(255,107,43,0.6); } 100% { box-shadow: 0 0 0 rgba(255,107,43,0); } } .attr-bar-fill.str-b { animation: attr-glow 2s ease-in-out infinite; } /* ── 12. TRIAL BADGE pulse ─────────────────────────────── */ @keyframes trial-pulse { 0%,100% { box-shadow: 0 0 0 rgba(255,215,0,0); } 50% { box-shadow: 0 0 8px rgba(255,215,0,0.4); } } .trial-badge { animation: blink 1.5s step-end infinite, trial-pulse 2s ease-in-out infinite; } /* ── FREEMIUM GATE ───────────────────────────────────────── */ .gate-overlay { position: absolute; inset: 0; z-index: 50; background: rgba(0,0,0,0.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; } .gate-icon { font-size: 32px; animation: bounce .6s ease infinite alternate; } .gate-title { font-family:'Press Start 2P',monospace; font-size:12px; color:var(--gold); line-height:2; } .gate-desc { font-size:13px; color:var(--dim); line-height:1.9; max-width:280px; } .gate-btn { padding:12px 20px; background:#001a00; border:2px solid var(--pg); color:var(--pg); font-family:'Press Start 2P',monospace; font-size:13px; letter-spacing:2px; cursor:pointer; transition:all .15s; width:100%; } .gate-btn:hover { background:#003300; } .gate-btn.gold-btn { border-color:var(--gold); color:var(--gold); background:#111000; } .gate-btn.gold-btn:hover { background:#1a1500; } .gate-free-btn { font-size:12px; color:var(--dim); background:none; border:none; font-family:'Space Mono',monospace; cursor:pointer; padding:4px; text-decoration:underline; } .free-counter { display:flex; align-items:center; gap:8px; padding:6px 14px; background:var(--panel2); border-bottom:1px solid var(--border); font-size:12px; color:var(--dim); } .free-counter-bar { flex:1; height:4px; background:#1a1a1a; border:1px solid var(--border); } .free-counter-fill { height:100%; background:var(--pg); transition:width .4s ease; } .free-counter-fill.warn { background:var(--gold); } .free-counter-fill.danger { background:var(--red); } .pro-lock-banner { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#111000; border:1px solid var(--gold); margin:12px 16px; font-size:12px; color:var(--gold); cursor:pointer; } .pro-lock-banner:hover { background:#1a1500; } .ai-report-wrap { padding:14px 16px; border-top:1px solid var(--border); position:relative; } .ai-report-card { background:#001a00; border:1px solid var(--pg); padding:12px 14px; font-size:13px; color:var(--pg); line-height:2; } .ai-loading { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--dim); padding:10px 0; } .ai-dot { width:5px; height:5px; background:var(--pg); animation:blink .5s step-end infinite; } .ai-dot:nth-child(2){animation-delay:.2s;} .ai-dot:nth-child(3){animation-delay:.4s;} .avatar-crown { font-size:14px; text-align:center; margin-bottom:2px; animation:bounce .8s ease infinite alternate; display:none; } .avatar-crown.visible { display:block; } /* ── BEAT YESTERDAY SYSTEM ──────────────────────────────── */ .yesterday-bar { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--panel2); border-bottom:1px solid var(--border); border-top:1px solid var(--border); } .yday-metric { flex:1; text-align:center; } .yday-label { font-size:11px; color:var(--dim); margin-bottom:3px; } .yday-val { font-family:'Press Start 2P',monospace; font-size:12px; } .yday-diff { font-size:11px; margin-top:2px; } .yday-diff.win { color:var(--pg); } .yday-diff.loss { color:var(--red); } .yday-diff.tie { color:var(--dim); } .yday-divider { width:1px; height:36px; background:var(--border); } /* streak banner */ .streak-banner { display:flex; align-items:center; gap:10px; padding:10px 16px; background:#110800; border-bottom:2px solid var(--amber); cursor:pointer; transition:background .15s; } .streak-banner:hover { background:#1a1000; } .streak-fire { font-size:20px; animation:bounce .5s ease infinite alternate; } .streak-count { font-family:'Press Start 2P',monospace; font-size:16px; color:var(--amber); } .streak-label { font-size:12px; color:#664422; flex:1; } .streak-reward { font-size:11px; color:var(--gold); } /* ghost battle overlay */ #ghost-battle { position:fixed; inset:0; z-index:8800; background:rgba(0,0,0,0.88); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; pointer-events:none; opacity:0; transition:opacity .3s; } #ghost-battle.show { opacity:1; pointer-events:all; } .battle-arena { display:flex; align-items:flex-end; gap:32px; padding:24px 32px; background:#0a0a0a; border:2px solid var(--pg); } .battle-fighter { display:flex; flex-direction:column; align-items:center; gap:6px; } .battle-name { font-family:'Press Start 2P',monospace; font-size:9px; } .battle-hp { width:60px; height:6px; background:#1a1a1a; border:1px solid var(--border); } .battle-hp-fill { height:100%; transition:width .5s ease; } .battle-vs { font-family:'Press Start 2P',monospace; font-size:14px; color:var(--gold); } @keyframes ghost-float { 0%,100% { transform:translateY(0) scaleX(-1); opacity:.5; } 50% { transform:translateY(-6px) scaleX(-1); opacity:.7; } } .ghost-avatar { animation:ghost-float 1.5s ease-in-out infinite; filter:brightness(.6) sepia(1) hue-rotate(140deg); } @keyframes fighter-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } } .battle-hit { animation:fighter-shake .3s ease; }

👑

PLAYER_01 LV.1

40/100

+XP

儲蓄率

62%

今日 XP

vs 昨日

今日支出

vs 昨日

熱量攝入

vs 昨日

本月收入

52,000

NT$

消耗體力

19,800

NT$

放置收益

1,240

NT$

STR

24

AGI

18

VIT

31

SPI

22

健身

▲

成就徽章