// web-shell.jsx — Desktop web frame for ilovejp. // Goal: maximally preserve the original mobile screen rendering — wrap it in a // web-style chrome (top nav, side context panels) instead of an iPhone bezel. const SHELL_WIDTH = 440; // mobile viewport width preserved (≈ 402+padding) const SHELL_HEIGHT = 860; // ───────────────────────────────────────────────────────────── // Top global header — logo, primary nav, search, theme/user // ───────────────────────────────────────────────────────────── const WebHeader = ({ active, onNav, dark, onToggleDark }) => { const T = useTheme(dark); const items = [ { id: 'home', label: '首頁', jp: 'ホーム' }, { id: 'learn', label: '學習', jp: 'まなぶ' }, { id: 'teacher', label: '老師', jp: '先生' }, { id: 'about', label: '關於', jp: 'アバウト' }, ]; return (
{/* Logo */}
井
ILOVEJP · WEB
井上老師の日本語教室
{/* Nav */} {/* Search */}
⌘ K
{/* Right cluster */}
あ
); }; // ───────────────────────────────────────────────────────────── // Mobile-fidelity viewport — renders a screen at exactly 402×? // with the original paper background, in a soft "card" frame // (no phone bezel — clearly web-native). // ───────────────────────────────────────────────────────────── const MobileViewport = ({ children, dark, height = SHELL_HEIGHT, label }) => { const T = useTheme(dark); return (
{label && (
{label}
)}
{children}
); }; // ───────────────────────────────────────────────────────────── // Left rail — book quick switcher (always visible on web) // ───────────────────────────────────────────────────────────── const LeftRail = ({ dark, currentBook, onPickBook, onOpenLesson }) => { const T = useTheme(dark); return ( ); }; // ───────────────────────────────────────────────────────────── // Right rail — context panel: streak, today's plan, etc. // ───────────────────────────────────────────────────────────── const RightRail = ({ dark }) => { const T = useTheme(dark); return ( ); }; // ───────────────────────────────────────────────────────────── // Footer // ───────────────────────────────────────────────────────────── const WebFooter = ({ dark }) => { const T = useTheme(dark); return ( ); }; Object.assign(window, { WebHeader, MobileViewport, LeftRail, RightRail, WebFooter, SHELL_WIDTH, SHELL_HEIGHT, });