From 3a6ec31a92000ecb508132158465b973c706c54f Mon Sep 17 00:00:00 2001
From: Oliver <oliver@derez.ai>
Date: Sun, 7 Jun 2026 18:20:45 -0300
Subject: [PATCH] config box: agent (Hermes/OpenClaw), period (Monthly/Yearly),
 location dropdowns

---
 index.html | 115 +++++++++++++++++++----------------------------------
 1 file changed, 42 insertions(+), 73 deletions(-)

diff --git a/index.html b/index.html
index 1b4930b..e418672 100644
--- a/index.html
+++ b/index.html
@@ -908,66 +908,26 @@
             opacity: 0.4;
         }
 
-        /* ── Billing toggle ─────────────────────────────── */
-        .pricing-billing-toggle {
+        /* ── Config box ─────────────────────────────── */
+        .pricing-config-box {
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 14px;
+            gap: 12px;
             margin-bottom: 36px;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-card);
+            padding: 14px 24px;
+            flex-wrap: wrap;
         }
-        .billing-label {
-            font-size: 14px;
-            font-weight: 500;
+        .pricing-config-label {
+            font-size: 13px;
+            font-weight: 600;
             color: var(--text-muted);
-            transition: color 0.2s;
+            white-space: nowrap;
         }
-        .billing-label.active { color: var(--text); }
-        .toggle-switch {
-            position: relative;
-            width: 48px;
-            height: 26px;
-            cursor: pointer;
-        }
-        .toggle-switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-        .toggle-slider {
-            position: absolute;
-            inset: 0;
-            background: var(--border);
-            border-radius: 26px;
-            transition: background 0.2s;
-        }
-        .toggle-slider::before {
-            content: "";
-            position: absolute;
-            left: 3px;
-            top: 3px;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: var(--text);
-            transition: transform 0.2s;
-        }
-        .toggle-switch input:checked + .toggle-slider {
-            background: var(--accent);
-        }
-        .toggle-switch input:checked + .toggle-slider::before {
-            transform: translateX(22px);
-            background: #fff;
-        }
-        @media (max-width: 900px) {
-            .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
-            .pricing-card.featured { transform: none; }
-        }
-
-        /* ══════════════════════════════════════════════════════════
-           LOCATION DROPDOWN
-           ══════════════════════════════════════════════════════════ */
-        .pricing-location {
+        .pricing-config-select {
             appearance: none;
             -webkit-appearance: none;
             background: var(--bg);
@@ -975,16 +935,22 @@
             border-radius: var(--radius);
             color: var(--text);
             font-size: 13px;
-            padding: 4px 28px 4px 12px;
+            padding: 6px 30px 6px 12px;
             cursor: pointer;
             outline: none;
             transition: border-color 0.2s;
             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;
+            min-width: 110px;
+        }
+        .pricing-config-select:hover { border-color: var(--accent); }
+        .pricing-config-select:focus { border-color: var(--accent); }
+
+        @media (max-width: 900px) {
+            .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
+            .pricing-card.featured { transform: none; }
         }
-        .pricing-location:hover { border-color: var(--accent); }
-        .pricing-location:focus { border-color: var(--accent); }
 
         /* ══════════════════════════════════════════════════════════
            FAQ
@@ -1825,15 +1791,18 @@
                 Cancel anytime with monthly termination.
             </p>
 
-            <!-- ── Billing toggle ── -->
-            <div class="pricing-billing-toggle">
-                <span class="billing-label active" id="billing-monthly-label">Monthly</span>
-                <label class="toggle-switch">
-                    <input type="checkbox" id="billing-toggle" onchange="toggleBilling()" />
-                    <span class="toggle-slider"></span>
-                </label>
-                <span class="billing-label" id="billing-yearly-label">Yearly</span>
-                <select class="pricing-location" id="pricing-location">
+            <!-- ── Config: agent, billing, location ── -->
+            <div class="pricing-config-box">
+                <span class="pricing-config-label">Configure your agent</span>
+                <select class="pricing-config-select" id="pricing-agent">
+                    <option value="hermes" selected>Hermes</option>
+                    <option value="openclaw">OpenClaw</option>
+                </select>
+                <select class="pricing-config-select" id="pricing-period">
+                    <option value="monthly" selected>Monthly</option>
+                    <option value="yearly">Yearly</option>
+                </select>
+                <select class="pricing-config-select" id="pricing-location">
                     <option value="france">France</option>
                 </select>
             </div>
@@ -2345,12 +2314,10 @@
             });
         });
 
-        /* ── Billing Toggle ────────────────────────────────── */
-        function toggleBilling() {
-            const yearly = document.getElementById('billing-toggle').checked;
-            document.getElementById('billing-monthly-label').classList.toggle('active', !yearly);
-            document.getElementById('billing-yearly-label').classList.toggle('active', yearly);
-
+        /* ── Period / billing update ──────────────────────────── */
+        function updatePeriodDisplay() {
+            const sel = document.getElementById('pricing-period');
+            const yearly = sel.value === 'yearly';
             document.getElementById('bonus-trainee').classList.toggle('show', yearly);
             document.getElementById('bonus-junior').classList.toggle('show', yearly);
             document.getElementById('bonus-senior').classList.toggle('show', yearly);
@@ -2359,13 +2326,14 @@
             document.getElementById('period-junior').textContent = yearly ? '/ month ✦ yearly' : '/ month';
             document.getElementById('period-senior').textContent = yearly ? '/ month ✦ yearly' : '/ month';
         }
+        document.getElementById('pricing-period').addEventListener('change', updatePeriodDisplay);
 
         /* ── Hire Agent Webhook ───────────────────────────── */
         const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/5318a0d8-d064-42fb-95b7-aa5552cb3fa9";
 
         async function hireAgent(product) {
-            const yearly = document.getElementById('billing-toggle').checked;
-            const period = yearly ? 'yearly' : 'monthly';
+            const agent = document.getElementById('pricing-agent').value;
+            const period = document.getElementById('pricing-period').value;
             const location = document.getElementById('pricing-location').value;
 
             try {
@@ -2374,6 +2342,7 @@
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
                         product: product,
+                        agent: agent,
                         period: period,
                         location: location,
                     }),