0.3s
0s
0px
1
0deg
1

\n`; } generatedCodeElem.textContent = `\n\n${jsCode}`; } function showPaymentOverlay() { overlayTitle.textContent = i18n[currentLanguage].overlayTitle; overlayMessage.textContent = i18n[currentLanguage].overlayMessage; if (!currentUser) { hubSubscribeBtn.textContent = i18n[currentLanguage].hubSignInUnlock; } else { hubSubscribeBtn.textContent = i18n[currentLanguage].hubSubscribe; } showOverlay(paymentOverlay); } // --- Event Listeners --- languageSwitcher.addEventListener('change', (event) => { currentLanguage = event.target.value; localStorage.setItem('pixeloffice_lang', currentLanguage); applyLanguage(); updatePreview(); generateCode(); }); durationInput.addEventListener('input', () => updateSliderValue(durationInput, durationValueSpan, 's')); delayInput.addEventListener('input', () => updateSliderValue(delayInput, delayValueSpan, 's')); transformXInput.addEventListener('input', () => updateSliderValue(transformXInput, transformXValueSpan, 'px')); scaleInput.addEventListener('input', () => updateSliderValue(scaleInput, scaleValueSpan, '')); rotateInput.addEventListener('input', () => updateSliderValue(rotateInput, rotateValueSpan, 'deg')); opacityInput.addEventListener('input', () => updateSliderValue(opacityInput, opacityValueSpan, '')); [durationInput, delayInput, easingSelect, transformXInput, scaleInput, rotateInput, opacityInput, bgColorInput, triggerTypeSelect] .forEach(input => input.addEventListener('input', updatePreview)); triggerTypeSelect.addEventListener('change', updatePreview); generateCodeBtn.addEventListener('click', generateCode); copyCodeBtn.addEventListener('click', () => { const code = generatedCodeElem.textContent; navigator.clipboard.writeText(code).then(() => { alert(i18n[currentLanguage].copiedToClipboard); }).catch(err => { console.error('Failed to copy code: ', err); }); }); // Payment button listeners hubSubscribeBtn.addEventListener('click', createHubSubscription); oneTimeBuyBtn.addEventListener('click', createOneTimePayment); cryptoPayBtn.addEventListener('click', requestCryptoPayment); // Auth modal listeners authForm.addEventListener('submit', handleAuth); googleSigninBtn.addEventListener('click', handleGoogleSignIn); toggleAuthModeBtn.addEventListener('click', () => { authMode = authMode === 'signIn' ? 'register' : 'signIn'; applyLanguage(); }); authModalCloseBtn.addEventListener('click', () => hideOverlay(authModal)); cryptoModalCloseBtn.addEventListener('click', () => { hideOverlay(cryptoModal); if (cryptoInterval) clearInterval(cryptoInterval); }); // --- Initialization --- document.addEventListener('DOMContentLoaded', async () => { applyLanguage(); updateSliderValue(durationInput, durationValueSpan, 's'); updateSliderValue(delayInput, delayValueSpan, 's'); updateSliderValue(transformXInput, transformXValueSpan, 'px'); updateSliderValue(scaleInput, scaleValueSpan, ''); updateSliderValue(rotateInput, rotateValueSpan, 'deg'); updateSliderValue(opacityInput, opacityValueSpan, ''); updatePreview(); generateCode(); showSpinner(); const urlParams = new URLSearchParams(window.location.search); const status = urlParams.get('status'); const subscriptionStatus = urlParams.get('subscription_status'); const sessionId = urlParams.get('session_id'); if (status === 'success' && sessionId) { try { const response = await fetch(`https://api.pixeloffice.eu/api/pay/verify-session?session_id=${sessionId}`); const data = await response.json(); if (data.verified) { unlockWidget(); alert("Payment successful! Widget unlocked."); } else { alert("Payment verification failed."); } } catch (error) { console.error("Error verifying one-time payment:", error); alert("Error verifying payment."); } finally { clearUrlParameters(); } } else if (subscriptionStatus === 'success' && sessionId) { clearUrlParameters(); alert("Subscription initiated! Please log in to confirm access."); } else if (status === 'cancel') { alert("Payment cancelled."); clearUrlParameters(); } auth.onAuthStateChanged(async (user) => { currentUser = user; if (user) { await checkSubscription(user.email); } if (!isUnlocked && actionCount >= FREE_LIMIT) { showPaymentOverlay(); } hideSpinner(); applyLanguage(); }); if (!isUnlocked && actionCount >= FREE_LIMIT) { showPaymentOverlay(); } });