diff --git a/src/App.svelte b/src/App.svelte index 693843e..1f4d618 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -979,9 +979,9 @@ selectedOverlayId = ''; overlayName = 'New Overlay'; overlaySlug = `overlay-${Date.now()}`; - overlayHtml = '
Hello ${username}
'; - overlayCss = '.alert { color: white; font: 32px sans-serif; }'; - overlayJavascript = ''; + overlayHtml = '
followed!
'; + overlayCss = '.alert { opacity: 0; transform: translateY(12px); transition: opacity 180ms ease, transform 180ms ease; color: white; font: 700 32px sans-serif; padding: 18px 24px; border-radius: 8px; background: rgba(25, 18, 40, 0.92); } .alert.visible { opacity: 1; transform: translateY(0); }'; + overlayJavascript = "const alertBox = document.getElementById('trixie-follow-alert'); const alertName = document.getElementById('trixie-follow-name'); window.addEventListener('trixie-alert', (event) => { const detail = event.detail || {}; const payload = detail.payload || {}; if (detail.event_type !== 'follow') return; alertName.textContent = String(payload.user_name || payload.user_login || 'Someone'); alertBox.classList.add('visible'); clearTimeout(window.trixieAlertTimer); window.trixieAlertTimer = setTimeout(() => alertBox.classList.remove('visible'), 6000); });"; overlayEnabled = true; overlayDisabledDesign = 'transparent'; }