/* tweaks.jsx — Tweaks panel for HypeUGC login */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"layout": "split",
"bg": "clips",
"accent": "#ff6b1a",
"showStats": true,
"headline": "Welcome back creator!"
}/*EDITMODE-END*/;
// Lighten a hex by mixing with white (0..1)
function lighten(hex, amt) {
const c = hex.replace('#','');
const n = parseInt(c.length===3 ? c.split('').map(x=>x+x).join('') : c, 16);
let r = (n>>16)&255, g = (n>>8)&255, b = n&255;
r = Math.round(r + (255-r)*amt);
g = Math.round(g + (255-g)*amt);
b = Math.round(b + (255-b)*amt);
return `rgb(${r}, ${g}, ${b})`;
}
function alphaHex(hex, a) {
const c = hex.replace('#','');
const n = parseInt(c.length===3 ? c.split('').map(x=>x+x).join('') : c, 16);
return `rgba(${(n>>16)&255}, ${(n>>8)&255}, ${n&255}, ${a})`;
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply tweaks as data-attrs on
React.useEffect(() => {
const html = document.documentElement;
html.setAttribute('data-theme', t.theme);
html.setAttribute('data-layout', t.layout);
html.setAttribute('data-bg', t.bg);
// Accent: write CSS variables directly
html.style.setProperty('--accent', t.accent);
html.style.setProperty('--accent-soft', lighten(t.accent, 0.18));
html.style.setProperty('--accent-glow', alphaHex(t.accent, 0.35));
}, [t.theme, t.layout, t.bg, t.accent]);
// Toggle stats visibility
React.useEffect(() => {
const stats = document.querySelector('.showcase-footer');
if (stats) stats.style.display = t.showStats ? '' : 'none';
}, [t.showStats]);
// Editable headline (highlights a known accent phrase if present)
React.useEffect(() => {
const h = document.querySelector('.headline');
if (!h) return;
const txt = t.headline || '';
const candidates = ['back', 'viral AI videos', 'creator'];
let html = escape(txt);
for (const phrase of candidates) {
const re = new RegExp(`\\b(${phrase.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')})\\b`, 'i');
if (re.test(txt)) {
html = escape(txt).replace(re, '$1');
break;
}
}
h.innerHTML = html;
}, [t.headline]);
function escape(s) {
return String(s).replace(/[&<>"]/g, c => ({'&':'&','<':'<','>':'>','"':'"'}[c]));
}
return (
setTweak('theme', v)} />
setTweak('layout', v)} />
setTweak('bg', v)} />
setTweak('accent', v)} />
setTweak('headline', v)} />
setTweak('showStats', v)} />
);
}
// Mount the tweaks app to a host node
const host = document.createElement('div');
host.id = 'tweaks-host';
document.body.appendChild(host);
ReactDOM.createRoot(host).render();