diff --git a/index.html b/index.html index 4008f76..92c2974 100644 --- a/index.html +++ b/index.html @@ -960,6 +960,33 @@ .pricing-config-input:focus { border-color: var(--accent); } .pricing-config-input::placeholder { color: var(--text-muted); opacity: 0.6; } #pricing-email { width: 156px; } + #pricing-email.invalid { border-color: #f87171; box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2); } + + .pricing-toast { + position: fixed; + bottom: 100px; + left: 50%; + transform: translateX(-50%) translateY(20px); + background: var(--bg-card); + border: 1px solid #f87171; + border-radius: var(--radius-card); + padding: 16px 24px; + box-shadow: 0 8px 32px rgba(0,0,0,0.3); + font-size: 14px; + color: var(--text); + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, transform 0.3s, visibility 0.3s; + z-index: 9999; + max-width: 420px; + text-align: center; + pointer-events: none; + } + .pricing-toast.show { + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(0); + } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; } @@ -2362,6 +2389,16 @@ /* ── Buy Agent Webhook ───────────────────────────── */ const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/5318a0d8-d064-42fb-95b7-aa5552cb3fa9"; + function showPricingToast(msg) { + const el = document.getElementById('pricing-toast'); + el.textContent = msg; + el.classList.add('show'); + if (window._pricingToastTimer) clearTimeout(window._pricingToastTimer); + window._pricingToastTimer = setTimeout(function () { + el.classList.remove('show'); + }, 20000); + } + async function hireAgent(product) { const agent = document.getElementById('pricing-agent').value; const period = document.getElementById('pricing-period').value; @@ -2369,6 +2406,16 @@ const email = document.getElementById('pricing-email').value.trim(); const coupon = document.getElementById('pricing-coupon').value.trim(); + // Validate email + const emailInput = document.getElementById('pricing-email'); + emailInput.classList.remove('invalid'); + if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + emailInput.classList.add('invalid'); + showPricingToast('Please configure your agent and provide a valid email address.'); + emailInput.focus(); + return; + } + try { await fetch(ORDER_WEBHOOK, { method: 'POST', @@ -2565,5 +2612,7 @@ +
+