538 lines
15 KiB
Cheetah
538 lines
15 KiB
Cheetah
{{define "onboarding-terms"}}
|
|
<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 active">
|
|
<div class="progress-box">4</div>
|
|
<span class="progress-label">Terms</span>
|
|
</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">
|
|
<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 4 of 5</p>
|
|
<h1 class="mb-4">One last thing</h1>
|
|
<p class="lead">Auto-renewal protects your vault. Here's why it's required.</p>
|
|
</div>
|
|
|
|
<form id="termsForm" onsubmit="return acceptTerms(event)">
|
|
<!-- Why Auto-Renewal -->
|
|
<div class="terms-section">
|
|
<h3 class="terms-section-title">Why auto-renewal is required</h3>
|
|
|
|
<div class="explanation-cards">
|
|
<div class="explanation-card">
|
|
<div class="explanation-icon">
|
|
<svg width="24" height="24" 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>
|
|
</div>
|
|
<h4>Protects your data</h4>
|
|
<p>If your subscription lapses, your vault enters a 7-day deletion countdown. We'd rather refund an accidental renewal than delete your credentials because your card expired.</p>
|
|
</div>
|
|
|
|
<div class="explanation-card">
|
|
<div class="explanation-icon">
|
|
<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>
|
|
</div>
|
|
<h4>14-day regret period</h4>
|
|
<p>If auto-renewal charges you and you didn't intend to continue, you have <strong>14 days</strong> for a full refund. No questions. Just cancel or email support@clavitor.ai.</p>
|
|
</div>
|
|
|
|
<div class="explanation-card">
|
|
<div class="explanation-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
</div>
|
|
<h4>Price for life guarantee</h4>
|
|
<p>Your $12/year rate (or whatever you pay today) is locked forever. Even if we raise prices for new customers in 2030, you'll still pay what you paid today.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terms Checklist -->
|
|
<div class="terms-section">
|
|
<div class="checkbox-list">
|
|
<label class="checkbox-item">
|
|
<input type="checkbox" required id="agreeTerms">
|
|
<div class="checkbox-ui">
|
|
<div class="checkbox-box">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
|
</div>
|
|
<div class="checkbox-content">
|
|
<span class="checkbox-label">I agree to the <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a></span>
|
|
<span class="checkbox-hint">Including the auto-renewal and data deletion policies</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="checkbox-item">
|
|
<input type="checkbox" required id="agreeAutoRenew">
|
|
<div class="checkbox-ui">
|
|
<div class="checkbox-box">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
|
</div>
|
|
<div class="checkbox-content">
|
|
<span class="checkbox-label">I consent to auto-renewal</span>
|
|
<span class="checkbox-hint">My subscription will automatically renew annually. I understand I can disable this anytime, and I have a 14-day refund window after each renewal.</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="checkbox-item">
|
|
<input type="checkbox" id="agreeMarketing">
|
|
<div class="checkbox-ui">
|
|
<div class="checkbox-box">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
|
</div>
|
|
<div class="checkbox-content">
|
|
<span class="checkbox-label">Send me security updates (optional)</span>
|
|
<span class="checkbox-hint">Feature announcements, security advisories, and operational notices. No marketing spam.</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cancellation Preview -->
|
|
<div class="terms-notice">
|
|
<div class="notice-box">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|
<div class="notice-content">
|
|
<strong>You can turn off auto-renewal anytime</strong>
|
|
<p>In your account settings. If you do, your vault stays active until the end of your current billing period, then enters a 7-day grace period before deletion. You'll get a warning email before anything is deleted.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-ghost" onclick="history.back()">Back</button>
|
|
<button type="submit" class="btn btn-primary" id="continueBtn" disabled>Continue to payment →</button>
|
|
</div>
|
|
</form>
|
|
</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;
|
|
}
|
|
|
|
.terms-section {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.terms-section-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 24px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.explanation-cards {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.explanation-card {
|
|
padding: 24px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.explanation-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
background: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
color: var(--brand-black);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.explanation-card h4 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.explanation-card p {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.checkbox-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-item input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.checkbox-ui {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
padding: 20px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 12px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.checkbox-item:hover .checkbox-ui {
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
.checkbox-item input:focus + .checkbox-ui {
|
|
outline: 2px solid var(--brand-black);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.checkbox-item input:checked + .checkbox-ui {
|
|
border-color: var(--brand-black);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.checkbox-box {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 6px;
|
|
border: 2px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.checkbox-box svg {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.checkbox-item input:checked + .checkbox-ui .checkbox-box {
|
|
background: var(--brand-black);
|
|
border-color: var(--brand-black);
|
|
}
|
|
|
|
.checkbox-item input:checked + .checkbox-ui .checkbox-box svg {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
color: white;
|
|
}
|
|
|
|
.checkbox-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: block;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.checkbox-label a {
|
|
color: var(--brand-black);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.checkbox-hint {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.terms-notice {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.notice-box {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
padding: 20px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
border-left: 4px solid var(--brand-black);
|
|
}
|
|
|
|
.notice-box svg {
|
|
flex-shrink: 0;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.notice-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.notice-content strong {
|
|
display: block;
|
|
font-size: 15px;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.notice-content p {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.form-actions .btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
height: 48px;
|
|
}
|
|
|
|
.form-actions .btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.explanation-cards {
|
|
gap: 12px;
|
|
}
|
|
|
|
.explanation-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.checkbox-ui {
|
|
padding: 16px;
|
|
}
|
|
|
|
.progress-line {
|
|
width: 24px;
|
|
}
|
|
|
|
.form-actions {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.form-actions .btn:first-child {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Enable/disable continue button based on required checkboxes
|
|
const agreeTerms = document.getElementById('agreeTerms');
|
|
const agreeAutoRenew = document.getElementById('agreeAutoRenew');
|
|
const continueBtn = document.getElementById('continueBtn');
|
|
|
|
function updateButton() {
|
|
continueBtn.disabled = !(agreeTerms.checked && agreeAutoRenew.checked);
|
|
}
|
|
|
|
agreeTerms.addEventListener('change', updateButton);
|
|
agreeAutoRenew.addEventListener('change', updateButton);
|
|
|
|
function goToStep(url) {
|
|
window.location.href = url;
|
|
}
|
|
|
|
function acceptTerms(e) {
|
|
e.preventDefault();
|
|
|
|
const data = {
|
|
termsAgreed: true,
|
|
autoRenewConsent: true,
|
|
marketingConsent: document.getElementById('agreeMarketing').checked
|
|
};
|
|
|
|
console.log('Terms accepted:', data);
|
|
|
|
// Proceed to payment (Step 5)
|
|
window.location.href = '/onboarding/checkout';
|
|
|
|
return false;
|
|
}
|
|
</script>
|
|
{{end}}
|