// Power2ADAPT — Tweaks app for index.html // Renders the panel and applies live overrides via CSS variables and // data-attributes on . const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "signature", "accentHue": 178, "accentChroma": 70, "primaryColor": "#FF6600", "secondaryColor": "#12d4c8", "darkBg": "#000000", "bodyFont": "Montserrat", "displayFont": "Archivo Black", "baseFontSize": 16, "headingScale": 100, "letterSpacing": 0, "uppercaseHeadings": true, "sectionRhythm": 96, "containerWidth": 1200, "cardStyle": "border-teal", "cardRadius": 4, "cardHoverLift": true, "ctaStyle": "filled", "navStyle": "solid", "showHeroLines": true, "heroOverlayOpacity": 35, "showStatsStrip": true, "showProjects": true, "showBlog": true }/*EDITMODE-END*/; // Curated palette presets — each one swaps the four critical brand vars const PALETTES = { signature: { label: 'Signature', teal: '#12d4c8', orange: '#FF6600', darkGrey: '#525759', black: '#000000', blueMid: '#4096a2', blueBright: '#359bee', }, midnight: { label: 'Midnight', teal: '#3ee0ff', orange: '#ff7a1a', darkGrey: '#3d4452', black: '#070b14', blueMid: '#1f4d6e', blueBright: '#5fb3ff', }, clay: { label: 'Clay', teal: '#0f9b8e', orange: '#e7682a', darkGrey: '#544a3f', black: '#1a1410', blueMid: '#2d6f78', blueBright: '#1f88c4', }, electric: { label: 'Electric', teal: '#14ffd9', orange: '#ffae00', darkGrey: '#43494f', black: '#000000', blueMid: '#225f78', blueBright: '#2ad6ff', }, forest: { label: 'Forest', teal: '#5fd17a', orange: '#dd6b20', darkGrey: '#4a5247', black: '#0e1410', blueMid: '#3a6e62', blueBright: '#3aaaa0', }, monochrome: { label: 'Mono', teal: '#dddddd', orange: '#ffffff', darkGrey: '#525759', black: '#000000', blueMid: '#777777', blueBright: '#bbbbbb', }, }; const FONT_OPTIONS = [ { value: 'Montserrat', label: 'Montserrat' }, { value: 'Archivo Black', label: 'Archivo Black' }, { value: 'Inter', label: 'Inter' }, { value: 'IBM Plex Sans', label: 'IBM Plex Sans' }, { value: 'Space Grotesk', label: 'Space Grotesk' }, { value: 'JetBrains Mono', label: 'JetBrains Mono' }, { value: 'Bebas Neue', label: 'Bebas Neue' }, { value: 'Anton', label: 'Anton' }, { value: 'Oswald', label: 'Oswald' }, ]; // Inject Google Fonts on demand function ensureFont(name) { if (!name) return; const id = 'gf-' + name.replace(/\s+/g, '-'); if (document.getElementById(id)) return; const link = document.createElement('link'); link.id = id; link.rel = 'stylesheet'; link.href = 'https://fonts.googleapis.com/css2?family=' + encodeURIComponent(name).replace(/%20/g, '+') + ':wght@400;500;600;700;900&display=swap'; document.head.appendChild(link); } function applyTweaks(t) { const root = document.documentElement; const body = document.body; // Palette const p = PALETTES[t.palette] || PALETTES.signature; root.style.setProperty('--teal', p.teal); root.style.setProperty('--orange', t.primaryColor || p.orange); root.style.setProperty('--dark-grey', p.darkGrey); root.style.setProperty('--black', t.darkBg || p.black); root.style.setProperty('--blue-mid', p.blueMid); root.style.setProperty('--blue-bright', p.blueBright); // Override teal with secondary if user set a custom value AND accentHue slider not in default range if (t.secondaryColor) root.style.setProperty('--teal', t.secondaryColor); // Accent hue → derive a teal from oklch when slider used if (t.accentHue != null && t.accentChroma != null) { const c = (t.accentChroma / 100) * 0.2; // chroma 0–0.2 root.style.setProperty('--teal', `oklch(78% ${c} ${t.accentHue})`); } // Typography ensureFont(t.bodyFont); ensureFont(t.displayFont); root.style.setProperty('--font-body', `'${t.bodyFont}', 'Helvetica Neue', Arial, sans-serif`); root.style.setProperty('--font-display', `'${t.displayFont}', 'Helvetica Neue', Arial, sans-serif`); const base = t.baseFontSize; const s = (t.headingScale || 100) / 100; root.style.setProperty('--fs-base', base + 'px'); root.style.setProperty('--fs-caption', Math.round(base * 0.875) + 'px'); root.style.setProperty('--fs-md', Math.round(base * 1.25 * s) + 'px'); root.style.setProperty('--fs-lg', Math.round(base * 1.5 * s) + 'px'); root.style.setProperty('--fs-xl', Math.round(base * 2 * s) + 'px'); root.style.setProperty('--fs-2xl', Math.round(base * 3 * s) + 'px'); root.style.setProperty('--fs-3xl', Math.round(base * 4 * s) + 'px'); body.style.setProperty('--p2a-letter-spacing', (t.letterSpacing / 1000) + 'em'); body.dataset.uppercase = t.uppercaseHeadings ? 'on' : 'off'; // Layout root.style.setProperty('--space-9', t.sectionRhythm + 'px'); root.style.setProperty('--container-max', t.containerWidth + 'px'); // Cards body.dataset.cardStyle = t.cardStyle; root.style.setProperty('--p2a-card-radius', t.cardRadius + 'px'); body.dataset.cardLift = t.cardHoverLift ? 'on' : 'off'; // CTA / Nav body.dataset.ctaStyle = t.ctaStyle; body.dataset.navStyle = t.navStyle; // Hero body.dataset.heroLines = t.showHeroLines ? 'on' : 'off'; root.style.setProperty('--p2a-overlay-opacity', (t.heroOverlayOpacity / 100)); // Section visibility body.dataset.showStats = t.showStatsStrip ? 'on' : 'off'; body.dataset.showProjects = t.showProjects ? 'on' : 'off'; body.dataset.showBlog = t.showBlog ? 'on' : 'off'; } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); React.useEffect(() => { applyTweaks(t); }, [t]); const reset = () => { Object.entries(TWEAK_DEFAULTS).forEach(([k, v]) => setTweak(k, v)); }; const randomize = () => { const palettes = Object.keys(PALETTES); setTweak('palette', palettes[Math.floor(Math.random() * palettes.length)]); setTweak('accentHue', Math.floor(Math.random() * 360)); setTweak('accentChroma', 40 + Math.floor(Math.random() * 60)); setTweak('headingScale', 90 + Math.floor(Math.random() * 30)); setTweak('cardStyle', ['border-teal','solid-dark','outline','elevated','flat'][Math.floor(Math.random()*5)]); setTweak('ctaStyle', ['filled','outline','underline','sharp'][Math.floor(Math.random()*4)]); }; return ( ({ value: v, label: p.label }))} onChange={(v) => setTweak('palette', v)} /> setTweak('primaryColor', v)} /> setTweak('secondaryColor', v)} /> setTweak('darkBg', v)} /> setTweak('accentHue', v)} /> setTweak('accentChroma', v)} /> setTweak('displayFont', v)} /> setTweak('bodyFont', v)} /> setTweak('baseFontSize', v)} /> setTweak('headingScale', v)} /> setTweak('letterSpacing', v)} /> setTweak('uppercaseHeadings', v)} /> setTweak('sectionRhythm', v)} /> setTweak('containerWidth', v)} /> setTweak('cardStyle', v)} /> setTweak('cardRadius', v)} /> setTweak('cardHoverLift', v)} /> setTweak('ctaStyle', v)} /> setTweak('navStyle', v)} /> setTweak('showHeroLines', v)} /> setTweak('heroOverlayOpacity', v)} /> setTweak('showStatsStrip', v)} /> setTweak('showProjects', v)} /> setTweak('showBlog', v)} />

); } const __mount = document.getElementById('tweaks-root'); ReactDOM.createRoot(__mount).render();