// Shared chrome: PhoneShell (status bar + body container), TopBar, BottomNav, // background-ornament layer per theme, decorative atoms (stars, sparkles). // All purely visual — every component takes `t` (a theme object). const PHONE_W = 320; const PHONE_H = 680; // ─── Status bar — flat, matches the references (no notch/dynamic island, // just 9:41 + signal/battery on a transparent strip). function StatusBar({ t }) { const c = t.ink; return (
9:41
); } // ─── Background ornament layer — per-theme decorations (clouds, moons, // flowers, prism). Rendered behind the screen content. function Backdrop({ t }) { if (t.bgOrnament === 'clouds') { return ( {/* gold arc */} {/* sparkles */} {[[40,150,4],[280,180,5],[60,300,3],[290,360,4],[30,500,4],[280,520,3],[150,80,4],[230,250,3],[80,420,3]].map(([x,y,r],i) => ( ))} ); } if (t.bgOrnament === 'moon') { return ( {/* crescent moon top right */} {/* stars */} {[[30,60,2],[80,130,3],[290,200,2],[40,280,2.5],[260,320,3],[20,420,2],[280,460,2.5],[60,540,3],[290,580,2]].map(([x,y,r],i) => ( ))} {/* large soft sparkle */} ); } if (t.bgOrnament === 'petals') { return ( {/* drifting petals */} {[[30,90,8,-20],[280,140,6,15],[60,230,7,40],[290,310,8,-10],[20,400,6,25],[270,470,7,-30],[40,560,8,10],[290,600,6,35],[150,60,6,0]].map(([x,y,r,rot],i)=> ( ))} {/* leaf sprigs at bottom corners */} ); } // prism — V4: subtle vertical lines + a refracted accent return ( ); } // ─── Tiny visual atoms reused all over. function Sparkle({ size = 10, color, style }) { return ( ); } function GoldRule({ color, width = '100%', height = 1, style }) { return
; } // Decorative card border — thin gold inset stroke with corner ornaments. function Bordered({ t, children, padding = 18, style = {} }) { return (
{children}
); } // ─── Bottom nav — pictogram + label. The single active tab is colored, // the others are inkMuted. Always 3 tabs: 今日 / これから / マイページ. function BottomNav({ t, active = '今日を占う', paid = false }) { const tabs = paid ? ['今日を占う', 'これからを占う', '占い師に相談', 'マイページ'] : ['今日を占う', 'これからを占う', 'マイページ']; const glyph = (label, on) => { const c = on ? t.accentDeep : t.inkMuted; if (label === '今日を占う') return ; if (label === 'これからを占う') return ; if (label === '占い師に相談') return ; return ; }; return (
{tabs.map(tab => { const on = tab === active; return (
{glyph(tab, on)} {tab}
); })}
); } // ─── Top bar — centered title with optional back / kebab. function TopBar({ t, title, back = false, action, subtitle }) { return (
{back && ( )}
{title}
{action}
{subtitle && (
{subtitle}
)}
); } // Section header used on home / menu / mypage. function SectionHead({ t, label, action }) { return (
{t.ornamentMotif === 'prism' ? : null} {label}
{action && (
{action}
)}
); } // Pretty CTA button — large pill with soft gradient. function CTAButton({ t, children, secondary = false, style = {}, small = false }) { if (secondary) return (
{children}
); return (
{children}
); } // ─── The phone shell every screen goes into. function Phone({ t, children, label, nav = '今日を占う', paid = false, hideStatus = false }) { return (
{!hideStatus && }
{children}
{nav && }
); } Object.assign(window, { PHONE_W, PHONE_H, Phone, StatusBar, BottomNav, TopBar, SectionHead, CTAButton, Bordered, Sparkle, GoldRule, Backdrop, });