843 lines
24 KiB
Cheetah
843 lines
24 KiB
Cheetah
{{define "onboarding-checkout"}}
|
|
<div class="onboarding-container">
|
|
<div class="onboarding-card onboarding-card--wide">
|
|
<!-- Progress -->
|
|
<div class="onboarding-progress">
|
|
<div class="progress-step completed clickable" onclick="goToStep('/onboarding/product')">
|
|
<div class="progress-box">✓</div>
|
|
<span class="progress-label">Product</span>
|
|
</div>
|
|
<div class="progress-line completed"></div>
|
|
<div class="progress-step completed clickable" onclick="goToStep('/onboarding/login')">
|
|
<div class="progress-box">✓</div>
|
|
<span class="progress-label">Account</span>
|
|
</div>
|
|
<div class="progress-line completed"></div>
|
|
<div class="progress-step completed clickable" onclick="goToStep('/onboarding/details')">
|
|
<div class="progress-box">✓</div>
|
|
<span class="progress-label">Details</span>
|
|
</div>
|
|
<div class="progress-line completed"></div>
|
|
<div class="progress-step completed clickable" onclick="goToStep('/onboarding/terms')">
|
|
<div class="progress-box">✓</div>
|
|
<span class="progress-label">Terms</span>
|
|
</div>
|
|
<div class="progress-line completed"></div>
|
|
<div class="progress-step active">
|
|
<div class="progress-box">5</div>
|
|
<span class="progress-label">Payment</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="onboarding-header">
|
|
<p class="label accent mb-3">Step 5 of 5</p>
|
|
<h1 class="mb-4">Start your 7-day trial</h1>
|
|
<p class="lead">No credit card required. After 7 days, you'll be charged $12/year. Cancel anytime.</p>
|
|
</div>
|
|
|
|
<!-- Order Summary -->
|
|
<div class="order-summary">
|
|
<div class="summary-row summary-header">
|
|
<span>Order Summary</span>
|
|
<a href="/onboarding/product" class="btn-text">Change</a>
|
|
</div>
|
|
|
|
<div class="summary-row">
|
|
<div class="summary-item">
|
|
<div class="summary-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
</div>
|
|
<div class="summary-info">
|
|
<div class="summary-title">Clavitor Hosted</div>
|
|
<div class="summary-meta">US-East region • Annual billing</div>
|
|
</div>
|
|
</div>
|
|
<div class="summary-price">$12<span>/year</span></div>
|
|
</div>
|
|
|
|
<div class="summary-divider"></div>
|
|
|
|
<div class="summary-row summary-total">
|
|
<span>Total after trial</span>
|
|
<span class="total-price">$12<span>/year</span></span>
|
|
</div>
|
|
<div class="summary-note">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
|
|
<span>You won't be charged today. Trial ends in 7 days.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Methods -->
|
|
<div class="payment-section">
|
|
<h3 class="section-title">Payment method</h3>
|
|
|
|
<div class="payment-options">
|
|
<label class="payment-option" data-method="card">
|
|
<input type="radio" name="payment" value="card" checked>
|
|
<div class="payment-content">
|
|
<div class="payment-radio">
|
|
<div class="radio-box">
|
|
<span class="radio-check">✓</span>
|
|
</div>
|
|
</div>
|
|
<div class="payment-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
|
|
</div>
|
|
<div class="payment-info">
|
|
<div class="payment-label">Credit or debit card</div>
|
|
<div class="payment-hint">Visa, Mastercard, Amex, Discover</div>
|
|
</div>
|
|
<div class="payment-icons">
|
|
<svg width="32" height="20" viewBox="0 0 48 32"><rect fill="#1A1F71" x="0" y="0" width="48" height="32" rx="3"/><text x="24" y="21" font-family="sans-serif" font-size="11" font-weight="700" fill="white" text-anchor="middle">VISA</text></svg>
|
|
<svg width="32" height="20" viewBox="0 0 48 32"><rect fill="#FF5F00" x="0" y="0" width="48" height="32" rx="3"/><circle fill="#EB001B" cx="18" cy="16" r="8"/><circle fill="#F79E1B" cx="30" cy="16" r="8"/></svg>
|
|
<svg width="32" height="20" viewBox="0 0 48 32"><rect fill="#016FD0" x="0" y="0" width="48" height="32" rx="3"/><text x="24" y="21" font-family="sans-serif" font-size="10" font-weight="700" fill="white" text-anchor="middle">AMEX</text></svg>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="payment-option" data-method="paypal">
|
|
<input type="radio" name="payment" value="paypal">
|
|
<div class="payment-content">
|
|
<div class="payment-radio">
|
|
<div class="radio-box">
|
|
<span class="radio-check">✓</span>
|
|
</div>
|
|
</div>
|
|
<div class="payment-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="#003087" d="M7.076 21.337H2.47a.667.667 0 0 1-.66-.598L.006 3.12a.667.667 0 0 1 .66-.76h7.965c3.36 0 6.103 2.362 6.021 5.388-.057 2.102-1.658 3.694-3.693 4.021-1.53.255-3.18.379-4.926.379H7.08l.24 2.489-.013.058.005-.012z"/><path fill="#0070E0" d="M17.541 9.686c-.058.167-.124.334-.198.5-.67 1.484-1.95 2.5-3.49 2.86l-.05.011a8.64 8.64 0 0 1-1.753.205h-2.32l-.025.159-.548 3.5-.058.37h4.008a.7.7 0 0 0 .69-.59l.028-.14.54-3.44.029-.185a.7.7 0 0 1 .69-.59h.41c1.534 0 2.81-.464 3.783-1.338.267-.246.507-.52.72-.821.022.023.043.047.065.07.217.235.407.49.57.764.43.719.657 1.538.657 2.406 0 1.552-.698 2.938-1.814 3.862l-.13.108c-.336.281-.69.548-1.058.798-1.428.95-3.152 1.495-5.028 1.495H7.08l.24 2.489.26.027c2.79.297 5.208.198 7.24-.874 1.38-.752 2.476-1.897 3.238-3.388.486-.963.76-2.078.76-3.26 0-.866-.176-1.69-.498-2.442a5.61 5.61 0 0 0-.521-.996z"/><path fill="#FFC439" d="M10.358 9.686h4.178a8.64 8.64 0 0 0 1.753-.205l.05-.011c1.54-.36 2.82-1.376 3.49-2.86.074-.166.14-.333.198-.5.07-.2.135-.405.196-.616.261-.92.41-1.894.41-2.904 0-2.473-1.258-4.474-3.398-5.386C15.98.618 14.41.56 12.704.56H5.947a.667.667 0 0 0-.66.76l1.804 17.619a.667.667 0 0 0 .66.598h4.126l.548-3.5.025-.159h2.32c1.753 0 3.403-.124 4.926-.379 2.035-.327 3.636-1.919 3.693-4.021.082-3.026-2.661-5.388-6.021-5.388H7.626l.24 2.489h2.493z"/></svg>
|
|
</div>
|
|
<div class="payment-info">
|
|
<div class="payment-label">PayPal</div>
|
|
<div class="payment-hint">Fast and secure checkout</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="payment-option" data-method="apple">
|
|
<input type="radio" name="payment" value="apple">
|
|
<div class="payment-content">
|
|
<div class="payment-radio">
|
|
<div class="radio-box">
|
|
<span class="radio-check">✓</span>
|
|
</div>
|
|
</div>
|
|
<div class="payment-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.74.82 0 2.1-.93 3.72-.8 1.25.1 2.16.55 2.85 1.37-2.57 1.54-2.14 4.5.44 5.38-.49 1.37-1.03 2.74-1.09 2.28zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
|
|
</div>
|
|
<div class="payment-info">
|
|
<div class="payment-label">Apple Pay</div>
|
|
<div class="payment-hint">Pay with Face ID or Touch ID</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Form (shown when card selected) -->
|
|
<div id="cardForm" class="card-form">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Card number</label>
|
|
<input type="text" class="form-input" id="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19">
|
|
<div class="card-brand" id="cardBrand"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row two-col">
|
|
<div class="form-group">
|
|
<label class="form-label">Expiry date</label>
|
|
<input type="text" class="form-input" id="expiryDate" placeholder="MM / YY" maxlength="7">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Security code <span class="cvv-hint" data-tooltip="3 digits on back of card, 4 on front for Amex">?</span></label>
|
|
<input type="text" class="form-input" id="cvv" placeholder="123" maxlength="4">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Name on card</label>
|
|
<input type="text" class="form-input" id="cardName" placeholder="JOHN DOE">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trial Notice -->
|
|
<div class="trial-box">
|
|
<div class="trial-header">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
<span>Your trial starts now</span>
|
|
</div>
|
|
<div class="trial-body">
|
|
<ul>
|
|
<li>Full access to all features immediately</li>
|
|
<li>Reminder email 2 days before trial ends</li>
|
|
<li>Cancel anytime — no questions asked</li>
|
|
<li>After trial: $12/year (billed annually)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="form-actions payment-actions">
|
|
<button type="button" class="btn btn-ghost" onclick="history.back()">Back</button>
|
|
<button type="submit" class="btn btn-primary btn-large" id="startTrialBtn" onclick="startTrial()">
|
|
Start free trial →
|
|
</button>
|
|
</div>
|
|
|
|
<p class="payment-security">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
<span>Payment processed by Paddle. We never store your card details.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.onboarding-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 48px 24px;
|
|
background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
|
|
}
|
|
|
|
.onboarding-container::after {
|
|
content: '';
|
|
flex: 1;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.onboarding-card {
|
|
width: 100%;
|
|
max-width: 520px;
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 48px;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
|
border: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.onboarding-card--wide {
|
|
max-width: 560px;
|
|
}
|
|
|
|
.onboarding-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.progress-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.progress-step.active .progress-dot {
|
|
background: var(--brand-black);
|
|
color: white;
|
|
}
|
|
|
|
.progress-step.completed .progress-dot {
|
|
background: var(--success);
|
|
color: white;
|
|
}
|
|
|
|
.progress-box {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-tertiary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.progress-step.active .progress-box {
|
|
background: var(--brand-black);
|
|
color: white;
|
|
border-color: var(--brand-black);
|
|
}
|
|
|
|
.progress-step.completed .progress-box {
|
|
background: var(--success);
|
|
color: white;
|
|
border-color: var(--success);
|
|
}
|
|
|
|
.progress-step.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.progress-step.clickable:hover .progress-box {
|
|
border-color: var(--brand-black);
|
|
color: var(--text);
|
|
}
|
|
|
|
.progress-step.clickable:hover .progress-label {
|
|
color: var(--text);
|
|
}
|
|
|
|
.progress-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.progress-step.active .progress-label {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.progress-step.completed .progress-label {
|
|
color: var(--success);
|
|
}
|
|
|
|
.progress-line {
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--border);
|
|
margin: 0 8px;
|
|
margin-bottom: 24px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.progress-line.completed {
|
|
background: var(--success);
|
|
}
|
|
|
|
.onboarding-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* Order Summary */
|
|
.order-summary {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
padding: 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.summary-row + .summary-row {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.summary-header {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-tertiary);
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.summary-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.summary-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
background: white;
|
|
border: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--brand-black);
|
|
}
|
|
|
|
.summary-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.summary-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.summary-meta {
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.summary-price {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
|
|
.summary-price span {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.summary-divider {
|
|
height: 1px;
|
|
background: var(--border);
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.summary-total {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.summary-total .total-price {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.summary-total .total-price span {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.summary-note {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 13px;
|
|
color: var(--success);
|
|
}
|
|
|
|
.summary-note svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Payment Section */
|
|
.payment-section {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 16px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.payment-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.payment-option {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.payment-option input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.payment-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 20px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 12px;
|
|
background: white;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.payment-option:hover .payment-content {
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
.payment-option input:checked + .payment-content {
|
|
border-color: var(--brand-black);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.payment-radio {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.radio-box {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
border: 2px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.15s;
|
|
background: white;
|
|
}
|
|
|
|
.payment-option input:checked + .payment-content .radio-box {
|
|
border-color: var(--brand-black);
|
|
background: var(--brand-black);
|
|
}
|
|
|
|
.radio-check {
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
transform: scale(0);
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
.payment-option input:checked + .payment-content .radio-check {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.payment-icon {
|
|
flex-shrink: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
background: white;
|
|
border: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.payment-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.payment-label {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.payment-hint {
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.payment-icons {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.payment-icons svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Card Form */
|
|
.card-form {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-row.two-col {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.form-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-group {
|
|
position: relative;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.cvv-hint {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
line-height: 16px;
|
|
cursor: help;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 14px 16px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border);
|
|
font-size: 16px;
|
|
font-family: var(--font-mono);
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
background: white;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: var(--brand-black);
|
|
box-shadow: 0 0 0 3px rgba(10,10,10,0.04);
|
|
}
|
|
|
|
.card-brand {
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* Trial Box */
|
|
.trial-box {
|
|
background: linear-gradient(135deg, var(--brand-violet-soft) 0%, transparent 100%);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(124, 58, 237, 0.2);
|
|
overflow: hidden;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.trial-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
background: rgba(124, 58, 237, 0.08);
|
|
color: var(--brand-violet);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.trial-header svg {
|
|
color: var(--brand-violet);
|
|
}
|
|
|
|
.trial-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.trial-body ul {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.trial-body li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.trial-body li::before {
|
|
content: '✓';
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: var(--success);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Actions */
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.form-actions .btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
height: 48px;
|
|
}
|
|
|
|
.form-actions .btn-large {
|
|
height: 52px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.payment-security {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: 24px;
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.payment-security svg {
|
|
color: var(--success);
|
|
}
|
|
|
|
.btn-text {
|
|
background: none;
|
|
border: none;
|
|
color: var(--brand-black);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Mobile */
|
|
@media (max-width: 640px) {
|
|
.onboarding-card {
|
|
padding: 32px 24px;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.onboarding-container {
|
|
padding: 0;
|
|
background: white;
|
|
}
|
|
|
|
.progress-line {
|
|
width: 24px;
|
|
}
|
|
|
|
.summary-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.payment-icons {
|
|
display: none;
|
|
}
|
|
|
|
.form-row.two-col {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.payment-actions {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.payment-actions .btn:first-child {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Payment method selection
|
|
document.querySelectorAll('input[name="payment"]').forEach(radio => {
|
|
radio.addEventListener('change', function() {
|
|
const cardForm = document.getElementById('cardForm');
|
|
const cardFormVisible = this.value === 'card';
|
|
|
|
if (cardFormVisible) {
|
|
cardForm.style.display = 'block';
|
|
} else {
|
|
cardForm.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Card number formatting
|
|
document.getElementById('cardNumber').addEventListener('input', function(e) {
|
|
let value = e.target.value.replace(/\D/g, '');
|
|
let formatted = '';
|
|
|
|
for (let i = 0; i < value.length; i++) {
|
|
if (i > 0 && i % 4 === 0) formatted += ' ';
|
|
formatted += value[i];
|
|
}
|
|
|
|
e.target.value = formatted;
|
|
|
|
// Detect card brand
|
|
const brand = document.getElementById('cardBrand');
|
|
if (value.startsWith('4')) {
|
|
brand.innerHTML = '<span style="color:#1A1F71;font-weight:700">VISA</span>';
|
|
} else if (value.startsWith('5')) {
|
|
brand.innerHTML = '<span style="font-weight:700">Mastercard</span>';
|
|
} else if (value.startsWith('3')) {
|
|
brand.innerHTML = '<span style="color:#016FD0;font-weight:700">Amex</span>';
|
|
} else {
|
|
brand.innerHTML = '';
|
|
}
|
|
});
|
|
|
|
// Expiry formatting
|
|
document.getElementById('expiryDate').addEventListener('input', function(e) {
|
|
let value = e.target.value.replace(/\D/g, '');
|
|
|
|
if (value.length >= 2) {
|
|
value = value.slice(0, 2) + ' / ' + value.slice(2);
|
|
}
|
|
|
|
e.target.value = value;
|
|
});
|
|
|
|
function goToStep(url) {
|
|
window.location.href = url;
|
|
}
|
|
|
|
function startTrial() {
|
|
const btn = document.getElementById('startTrialBtn');
|
|
const paymentMethod = document.querySelector('input[name="payment"]:checked').value;
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = 'Processing...';
|
|
|
|
// Simulate processing (replace with actual Paddle/Stripe integration)
|
|
setTimeout(() => {
|
|
// Success - redirect to done page
|
|
window.location.href = '/onboarding/done';
|
|
}, 1500);
|
|
}
|
|
</script>
|
|
{{end}}
|