From 18a487c9e62bf321516226ac59aef300e61b5701 Mon Sep 17 00:00:00 2001 From: Oliver Date: Sun, 7 Jun 2026 18:14:30 -0300 Subject: [PATCH] simplify: no sliding panels, add location dropdown (France), hire button calls webhook directly --- index.html | 216 ++++++----------------------------------------------- 1 file changed, 22 insertions(+), 194 deletions(-) diff --git a/index.html b/index.html index e2eba50..1b4930b 100644 --- a/index.html +++ b/index.html @@ -965,112 +965,26 @@ } /* ══════════════════════════════════════════════════════════ - PRICING SLIDER & ORDER FORM + LOCATION DROPDOWN ══════════════════════════════════════════════════════════ */ - .pricing-slider { - position: relative; - overflow: hidden; - max-width: 960px; - margin: 0 auto; - } - .pricing-slider-track { - display: flex; - transition: transform 0.5s cubic-bezier(.34,1.56,.64,1); - transform: translateX(0); - } - .pricing-slider-track.slide-left { - transform: translateX(-50%); - } - .pricing-panel, - .order-panel { - min-width: 100%; - box-sizing: border-box; - } - .order-panel { - background: var(--bg-card); - border: 1px solid var(--border-hi); - border-radius: var(--radius-card); - padding: 40px 36px; - box-shadow: var(--shadow); - text-align: center; - } - .order-panel h3 { - font-size: 1.3rem; - margin-bottom: 8px; - } - .order-panel .order-plan { - color: var(--accent); - font-weight: 600; - margin-bottom: 20px; - } - .order-email-row { - margin-bottom: 24px; - text-align: left; - } - .order-email-row label { - display: block; - font-size: 12px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--text-muted); - margin-bottom: 6px; - } - .order-email-row input { - width: 100%; - padding: 12px 16px; + .pricing-location { + appearance: none; + -webkit-appearance: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); - font-size: 15px; + font-size: 13px; + padding: 4px 28px 4px 12px; + cursor: pointer; outline: none; transition: border-color 0.2s; - box-sizing: border-box; - } - .order-email-row input:focus { - border-color: var(--accent); - } - .order-stripe-btn { - width: 100%; - padding: 14px 28px; - border: none; - border-radius: var(--radius); - background: linear-gradient(135deg, var(--accent), #5a7de0); - color: #fff; - font-size: 15px; - font-weight: 600; - cursor: pointer; - transition: opacity 0.2s, transform 0.15s; - } - .order-stripe-btn:hover { opacity: 0.9; transform: scale(1.02); } - .order-stripe-btn:active { transform: scale(0.97); } - .order-stripe-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } - .order-back { - display: inline-block; - margin-top: 16px; - font-size: 13px; - color: var(--text-muted); - cursor: pointer; - text-decoration: none; - } - .order-back:hover { color: var(--accent); } - .order-status { - margin-top: 16px; - font-size: 13px; - color: var(--text-muted); - display: none; - } - .order-status.show { - display: block; - animation: msgSlide 0.25s cubic-bezier(.22,1,.36,1); - } - .order-status.success { color: #4ade80; } - .order-status.error { color: #f87171; } - - @media (max-width: 900px) { - .order-panel { padding: 32px 24px; } + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 8px center; } + .pricing-location:hover { border-color: var(--accent); } + .pricing-location:focus { border-color: var(--accent); } /* ══════════════════════════════════════════════════════════ FAQ @@ -1912,10 +1826,6 @@

-
-
- -
Monthly Yearly +
@@ -2079,24 +1992,6 @@
-
- -
-

Processing with Stripe

-

-
- - -
- -
- ← Back to plans -
- - - @@ -2465,93 +2360,26 @@ document.getElementById('period-senior').textContent = yearly ? '/ month ✦ yearly' : '/ month'; } - /* ── Pricing Slider / Order Form ──────────────────────────── */ + /* ── Hire Agent Webhook ───────────────────────────── */ const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/5318a0d8-d064-42fb-95b7-aa5552cb3fa9"; - let selectedProduct = null; - - function hireAgent(product) { - selectedProduct = product; - - // Update order panel with plan info - const yearly = document.getElementById('billing-toggle').checked; - const period = yearly ? 'yearly' : 'monthly'; - const names = { trainee: 'Trainee', junior: 'Junior', senior: 'Senior' }; - document.getElementById('order-plan-display').textContent = names[product] + ' — ' + period; - - // Slide pricing out, order form in - document.getElementById('pricing-track').classList.add('slide-left'); - - // Reset status - document.getElementById('order-status').className = 'order-status'; - document.getElementById('order-status').style.display = 'none'; - document.getElementById('order-stripe-btn').disabled = false; - document.getElementById('order-stripe-btn').textContent = 'Proceed to Stripe'; - document.getElementById('order-email').focus(); - } - - function backToPricing() { - document.getElementById('pricing-track').classList.remove('slide-left'); - selectedProduct = null; - } - - async function processStripeOrder() { - const email = document.getElementById('order-email').value.trim(); - const statusEl = document.getElementById('order-status'); - const btn = document.getElementById('order-stripe-btn'); - - if (!email) { - statusEl.textContent = 'Please enter your email address.'; - statusEl.className = 'order-status show error'; - return; - } - - btn.disabled = true; - btn.textContent = 'Processing with Stripe…'; - statusEl.className = 'order-status show'; - statusEl.textContent = 'Connecting to Stripe…'; + async function hireAgent(product) { const yearly = document.getElementById('billing-toggle').checked; const period = yearly ? 'yearly' : 'monthly'; + const location = document.getElementById('pricing-location').value; try { - const res = await fetch(ORDER_WEBHOOK, { + await fetch(ORDER_WEBHOOK, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ - email: email, - product: selectedProduct, + product: product, period: period, + location: location, }), }); - - if (!res.ok) throw new Error('Webhook returned ' + res.status); - - // Try to parse the response — could be JSON or plain text - const ct = res.headers.get('content-type') || ''; - let data; - if (ct.indexOf('json') !== -1) { - data = await res.json(); - } else { - data = await res.text(); - } - - // If we get a Stripe checkout URL back, open it - const checkoutUrl = (data && typeof data === 'object') - ? (data.url || data.checkout_url || data.checkoutUrl || data.redirect) - : null; - if (checkoutUrl && checkoutUrl.startsWith('http')) { - window.open(checkoutUrl, '_blank'); - statusEl.textContent = '✓ Redirecting to Stripe checkout…'; - statusEl.className = 'order-status show success'; - } else { - statusEl.textContent = '✓ Request sent! Check your email for the Stripe payment link.'; - statusEl.className = 'order-status show success'; - } } catch (err) { - statusEl.textContent = 'Error: ' + err.message + '. Please try again.'; - statusEl.className = 'order-status show error'; - btn.disabled = false; - btn.textContent = 'Proceed to Stripe'; + console.error('Order webhook failed:', err); } }