// Top-level app shell. const { useState: useStateApp, useEffect: useEffectApp } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "fontPair": "classic", "layout": "classic", "accent": "#14233c", "inputMode": "form", "etsyChrome": true } /*EDITMODE-END*/; function exportPDF() { // Trigger browser print dialog scoped to the resume paper. const node = document.getElementById('resume-paper'); if (!node) return; const w = window.open('', '_blank', 'width=900,height=1100'); if (!w) return alert('Pop-up blocked. Allow pop-ups to export PDF.'); const styles = Array.from(document.querySelectorAll('link[rel="stylesheet"], style')). map((el) => el.outerHTML).join('\n'); w.document.write(`Resume${styles}
${node.outerHTML}
`); w.document.close(); } function App() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const [data, setData] = useStateApp(window.billyDemo); const [inputMode, setInputMode] = useStateApp('form'); // 'form' | 'chat' const [previewScale, setPreviewScale] = useStateApp(0.78); // auto-fit preview useEffectApp(() => { function fit() { const stage = document.getElementById('preview-stage'); if (!stage) return; const w = stage.clientWidth - 60; const h = stage.clientHeight - 60; const paperW = 8.5 * 96; // 816 const paperH = 11 * 96; // 1056 setPreviewScale(Math.min(w / paperW, h / paperH, 1.1)); } fit(); window.addEventListener('resize', fit); return () => window.removeEventListener('resize', fit); }, [tweaks.layout]); const accentOptions = [ { v: '#14233c', l: 'Navy' }, { v: '#6b1f2a', l: 'Burgundy' }, { v: '#1a3d2e', l: 'Forest' }, { v: '#2a2a2a', l: 'Charcoal' }]; return (
{/* LEFT: Builder column */}
{/* Brand header */}
CHILD ACTOR 101 · PRESENTS
Resume101
Industry Standard Youth Actor Resume Builder
S
{/* Mode toggle */}
{['form', 'chat'].map((m) => )}
{/* Body */}
{inputMode === 'form' ? : setInputMode('form')} />}
{/* Footer actions */}
{/* RIGHT: Preview */}
{/* Top toolbar */}
● LIVE PREVIEW
{data.actor.name || 'Untitled'}
8.5 × 11 IN · LETTER
{/* Layout chooser */}
LAYOUT {[ { v: 'classic', l: 'Classic' }, { v: 'banner', l: 'Banner' }, { v: 'side', l: 'Sidebar' }]. map((o) => )}
{/* Stage */}
{/* Bottom strip: font + accent + zoom */}
FONT PAIR
ACCENT {accentOptions.map((a) =>
ZOOM {Math.round(previewScale * 100)}%
); } const zoomBtn = { width: 26, height: 26, background: 'rgba(255,255,255,.04)', border: '1px solid rgba(212,184,118,.25)', color: '#d4b876', cursor: 'pointer', borderRadius: 3, fontFamily: 'JetBrains Mono, monospace', fontSize: 14 }; ReactDOM.createRoot(document.getElementById('app')).render();