config box: agent (Hermes/OpenClaw), period (Monthly/Yearly), location dropdowns
This commit is contained in:
Oliver
+42
-73
@@ -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,
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user