856 lines
56 KiB
HTML
856 lines
56 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vela — Server Installation</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
|
|
<script>
|
|
(function(){
|
|
const lang = (navigator.language || navigator.userLanguage || 'en').slice(0, 2);
|
|
document.documentElement.classList.add(lang === 'fr' ? 'lang-fr' : 'lang-en');
|
|
})();
|
|
</script>
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{--bg:#0a0a0b;--bg-card:#121214;--bg-card-hover:#1a1a1e;--border:#1e1e22;--border-hover:#2a2a30;--text:#f0f0f5;--text-dim:#a0a0ab;--text-muted:#6a6a75;--accent:#3b82f6;--accent-hover:#60a5fa;--accent-glow:rgba(59,130,246,0.15);--green:#22c55e;--red:#ef4444;--radius:12px;--radius-sm:8px;--nav-bg:rgba(10,10,11,0.8);--cta-bg:linear-gradient(135deg,#3b82f6,#60a5fa);--cta-hover:#4a8ff7;--cta-shadow:0 0 28px rgba(59,130,246,0.25)}
|
|
.light{--bg:#f5f5f7;--bg-card:#ffffff;--bg-card-hover:#f0f0f2;--border:#d2d2d7;--border-hover:#c0c0c5;--text:#1d1d1f;--text-dim:#6e6e73;--text-muted:#aeaeb2;--accent:#5e5ce6;--accent-hover:#4a48d4;--accent-glow:rgba(94,92,230,0.12);--green:#34c759;--red:#ff3b30;--nav-bg:rgba(245,245,247,0.85)}
|
|
html{scroll-behavior:smooth}
|
|
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
|
|
.lang-en .fr-only,.lang-fr .en-only{display:none!important}
|
|
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
|
.nav-logo{font-weight:800;font-size:1.3rem;letter-spacing:-0.03em;color:var(--text);text-decoration:none}
|
|
.nav-logo .dot{color:var(--accent)}
|
|
.nav-links{display:flex;gap:2rem;align-items:center}
|
|
.nav-links a{color:var(--text-dim);text-decoration:none;font-size:0.875rem;font-weight:500;transition:color .2s}
|
|
.nav-links a:hover{color:var(--text)}
|
|
.theme-btn{font-size:1.15rem;background:transparent;border:none;cursor:pointer;padding:.2rem;color:var(--text-dim);transition:color .2s;line-height:1;touch-action:manipulation;display:inline-flex;align-items:center}
|
|
.theme-btn:hover{color:var(--text)}
|
|
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;text-decoration:none;cursor:pointer;transition:all .2s;border:none;font-family:inherit}
|
|
.btn-primary{background:var(--cta-bg);color:#fff;box-shadow:0 0 24px var(--accent-glow),var(--cta-shadow)}
|
|
.btn-primary:hover{background:linear-gradient(135deg,#4a8ff7,#7ab8fc);transform:translateY(-2px);box-shadow:0 0 32px rgba(59,130,246,0.35)}
|
|
/* White CTA button for Get a Quote / Get Pricing */
|
|
.btn-cta{background:#fff;color:#0a0a0b;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 20px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.1)}
|
|
.btn-cta:hover{background:#f0f0f5;transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.2)}
|
|
.light .btn-cta{background:#1d1d1f;color:#fff;border-color:rgba(255,255,255,.1);box-shadow:0 4px 20px rgba(0,0,0,.15)}
|
|
.light .btn-cta:hover{background:#2d2d2f}
|
|
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
|
|
.btn-ghost:hover{border-color:var(--border-hover);background:var(--bg-card)}
|
|
.btn-sm{padding:.4rem 1rem;font-size:.8rem}
|
|
|
|
/* ── Tier Selector (Stripe-inspired radio cards) ── */
|
|
.tier-selector{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem}
|
|
.tier-option{position:relative;background:var(--bg-card);border:1.5px solid var(--border);border-radius:10px;padding:1rem;cursor:pointer;transition:all .2s;user-select:none}
|
|
.tier-option:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
|
|
.tier-option.selected{border-color:var(--accent);background:rgba(59,130,246,.06);box-shadow:0 0 0 1px var(--accent)}
|
|
.tier-option input{position:absolute;opacity:0;pointer-events:none}
|
|
.tier-option .t-name{font-weight:700;font-size:1rem;margin-bottom:.15rem;display:flex;align-items:center;gap:.4rem}
|
|
.tier-option .t-name .check{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:10px;color:transparent}
|
|
.tier-option.selected .t-name .check{border-color:var(--accent);background:var(--accent);color:#fff}
|
|
.tier-option .t-tag{font-size:.72rem;color:var(--text-muted)}
|
|
.tier-option .t-specs{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
|
|
.tier-option .t-specs span{font-size:.7rem;padding:.15rem .45rem;border-radius:4px;background:rgba(255,255,255,.04);color:var(--text-dim)}
|
|
.tier-option.popular{border-color:rgba(59,130,246,.3)}
|
|
.tier-option.popular.selected{border-color:var(--accent)}
|
|
.tier-option.popular .t-name::after{content:'Best Value';font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .4rem;border-radius:4px;background:rgba(59,130,246,.15);color:var(--accent);margin-left:auto}
|
|
.lang-fr .tier-option.popular .t-name::after{content:'Meilleur Q/P'}
|
|
|
|
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 4rem;max-width:1200px;margin:0 auto}
|
|
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
|
|
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:100px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);font-size:.8rem;color:var(--accent);font-weight:500;margin-bottom:1.5rem;width:fit-content}
|
|
.hero-badge .pulse{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 2s infinite}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
|
.hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:1.5rem}
|
|
.hero h1 .highlight{color:var(--accent)}
|
|
.hero p{font-size:1.1rem;color:var(--text-dim);max-width:520px;margin-bottom:2rem;line-height:1.7}
|
|
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
|
|
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
|
|
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
|
|
.stat-card .number{font-size:2rem;font-weight:800;color:var(--text);letter-spacing:-.03em}
|
|
.stat-card .label{font-size:.85rem;color:var(--text-dim);margin-top:.25rem}
|
|
section{padding:5rem 2rem}
|
|
.section-inner{max-width:1200px;margin:0 auto}
|
|
.section-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:600;margin-bottom:.75rem}
|
|
.section-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem}
|
|
.section-sub{color:var(--text-dim);font-size:1.05rem;max-width:600px;margin-bottom:3rem}
|
|
.tiers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
|
|
.tier-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all .2s;position:relative}
|
|
.tier-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
|
|
.tier-card.popular{border-color:var(--accent);background:linear-gradient(135deg,rgba(59,130,246,.06),transparent 60%)}
|
|
.tier-card.popular::before{content:'Best Value';position:absolute;top:-.7rem;right:1.5rem;background:var(--accent);color:#fff;font-size:.7rem;font-weight:600;padding:.2rem .7rem;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
|
|
.lang-fr .tier-card.popular::before{content:'Meilleur Rapport Q/P'}
|
|
.tier-card.recommended{border-color:var(--green);background:linear-gradient(135deg,rgba(0,201,81,.06),transparent 60%)}
|
|
.tier-card.recommended::before{content:'Recommended';position:absolute;top:-.7rem;right:1.5rem;background:var(--green);color:#fff;font-size:.7rem;font-weight:600;padding:.2rem .7rem;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
|
|
.lang-fr .tier-card.recommended::before{content:'Recommandé'}
|
|
.tier-name{font-size:1.1rem;font-weight:700;margin-bottom:.25rem}
|
|
.tier-tag{font-size:.75rem;color:var(--text-dim);font-family:'JetBrains Mono',monospace;margin-bottom:1.25rem}
|
|
.tier-price{font-size:.85rem;color:var(--text-dim);margin-bottom:1.25rem;display:flex;align-items:baseline;gap:.35rem}
|
|
.tier-price .amount{font-size:1.6rem;font-weight:800;color:var(--text)}
|
|
.tier-specs{list-style:none;margin-bottom:1.5rem}
|
|
.tier-specs li{padding:.5rem 0;font-size:.9rem;color:var(--text-dim);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem}
|
|
.tier-specs li:last-child{border-bottom:none}
|
|
.tier-specs li .check{color:var(--green)}
|
|
.tier-specs li .x{color:var(--red)}
|
|
.tier-card .btn{width:100%;justify-content:center;font-size:.82rem;white-space:nowrap}
|
|
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}
|
|
.why-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
|
|
.why-card .icon{font-size:1.8rem;margin-bottom:1rem}
|
|
.why-card h3{font-weight:700;font-size:1.1rem;margin-bottom:.5rem}
|
|
.why-card p{color:var(--text-dim);font-size:.9rem;line-height:1.6}
|
|
.contact-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}
|
|
.contact-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:100px;background:var(--bg-card);border:1px solid var(--border);font-size:.85rem;color:var(--text);text-decoration:none;transition:all .2s}
|
|
.contact-badge:hover{border-color:var(--accent);background:var(--bg-card-hover)}
|
|
.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;counter-reset:step}
|
|
.step{counter-increment:step;position:relative;padding-left:3.5rem}
|
|
.step::before{content:counter(step);position:absolute;left:0;top:0;width:2.5rem;height:2.5rem;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;color:#fff}
|
|
.step h3{font-weight:700;font-size:1rem;margin-bottom:.35rem}
|
|
.step p{color:var(--text-dim);font-size:.85rem;line-height:1.5}
|
|
.form-section{background:linear-gradient(135deg,rgba(59,130,246,.08),transparent)}
|
|
.form-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
|
|
.form-heading h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem}
|
|
.form-heading p{color:var(--text-dim);line-height:1.7}
|
|
.apple-form{width:100%;max-width:500px}
|
|
.form-step{display:none}
|
|
.form-step.current{display:block}
|
|
.form-step.animate-forward{animation:slideInLeft .35s cubic-bezier(.4,0,.2,1)}
|
|
.form-step.animate-back{animation:slideInRight .35s cubic-bezier(.4,0,.2,1)}
|
|
@keyframes slideInLeft{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
|
|
@keyframes slideInRight{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
|
|
.step-label{font-size:.75rem;font-weight:500;color:var(--text-muted);margin-bottom:1.5rem;text-align:center}
|
|
.step-track{display:flex;justify-content:center;gap:8px;margin-bottom:2rem}
|
|
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);transition:all .35s cubic-bezier(.4,0,.2,1)}
|
|
.step-dot.active{background:var(--accent);transform:scale(1.5)}
|
|
.step-dot.done{background:var(--green)}
|
|
.field-wrapper{position:relative;display:flex;align-items:center;background:var(--bg-card);border-radius:10px;border:1.5px solid var(--border);transition:border-color .2s,box-shadow .2s}
|
|
.field-wrapper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,92,231,.18)}
|
|
.field-wrapper.error{border-color:#e03131}
|
|
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--text-muted);pointer-events:none;transition:color .2s}
|
|
.field-wrapper:focus-within .field-icon{color:var(--accent)}
|
|
.field-input{width:100%;padding:14px 14px 14px 42px;font-family:'Inter',-apple-system,sans-serif;font-size:17px;font-weight:400;color:var(--text);background:transparent;border:none;border-radius:10px;outline:none}
|
|
.field-input::placeholder{color:var(--text-muted)}
|
|
.field-error{font-size:13px;color:#e03131;margin-top:6px;margin-left:14px;opacity:0;max-height:0;overflow:hidden;transition:opacity .2s,max-height .2s}
|
|
.field-error.shown{opacity:1;max-height:24px}
|
|
.btn-row{margin-top:24px;display:flex;gap:12px}
|
|
.btn-row .btn{flex:1;padding:14px 24px;font-size:17px;border-radius:8px}
|
|
.btn-apple-secondary{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
|
|
.btn-apple-secondary:hover{background:var(--accent);color:#fff}
|
|
.success-card{display:none;text-align:center;padding:32px 0}
|
|
.success-card.visible{display:block;animation:fadeInUp .4s cubic-bezier(.4,0,.2,1)}
|
|
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
|
|
.checkmark-wrap{width:64px;height:64px;margin:0 auto 16px}
|
|
.checkmark-circle{fill:none;stroke:#34c759;stroke-width:2.5;stroke-dasharray:166;stroke-dashoffset:166}
|
|
.success-card.visible .checkmark-circle{animation:circleDraw .45s .05s cubic-bezier(.65,0,.45,1) forwards}
|
|
.checkmark-tick{fill:none;stroke:#34c759;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48}
|
|
.success-card.visible .checkmark-tick{animation:tickDraw .3s .35s cubic-bezier(.65,0,.45,1) forwards}
|
|
@keyframes circleDraw{to{stroke-dashoffset:0}}
|
|
@keyframes tickDraw{to{stroke-dashoffset:0}}
|
|
.success-title{font-size:1.5rem;font-weight:700;margin-bottom:8px}
|
|
.success-sub{color:var(--text-dim);margin-bottom:24px;line-height:1.6}
|
|
.btn-restart{display:inline-block;padding:10px 36px;font-family:inherit;font-size:17px;color:var(--accent);background:transparent;border:1.5px solid var(--accent);border-radius:8px;cursor:pointer}
|
|
.btn-restart:hover{background:var(--accent);color:#fff}
|
|
|
|
.status-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;max-width:600px;margin:0 auto}
|
|
.status-grid{display:flex;gap:1rem;flex-wrap:wrap}
|
|
.status-grid .field-wrapper{flex:1;min-width:200px}
|
|
.status-result{padding:1rem;border-radius:var(--radius-sm);margin-top:1rem;display:none}
|
|
.status-result.found{display:block;background:rgba(0,201,81,.08);border:1px solid rgba(0,201,81,.2)}
|
|
.status-result.not-found{display:block;background:rgba(255,71,87,.08);border:1px solid rgba(255,71,87,.2)}
|
|
.status-result .btn{margin-top:1rem}
|
|
|
|
/* ── GDPR Cookie Banner ── */
|
|
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--bg-card);border-top:1px solid var(--border);padding:1rem 1.5rem;display:none;align-items:center;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--text-dim);backdrop-filter:blur(12px)}
|
|
.cookie-banner.show{display:flex}
|
|
.cookie-banner p{max-width:600px;line-height:1.5}
|
|
.cookie-banner a{color:var(--accent);text-decoration:none}
|
|
.cookie-btn{padding:.45rem 1.2rem;border-radius:6px;border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
|
|
.cookie-btn:hover{background:var(--accent-hover)}
|
|
.cookie-btn:active{transform:scale(.96)}
|
|
|
|
footer{border-top:1px solid var(--border);padding:2rem;text-align:center;color:var(--text-muted);font-size:.8rem}
|
|
@media(max-width:768px){.hero-grid,.form-inner{grid-template-columns:1fr;gap:2rem}.hero-stats{grid-template-columns:1fr 1fr}.nav-links{gap:.75rem}.nav-links a,.theme-btn,.nav-links .btn{font-size:.75rem;padding:.35rem .65rem}.tiers-grid,.why-grid,.process-steps{grid-template-columns:1fr}}
|
|
.glow{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.06) 0%,transparent 70%);pointer-events:none;z-index:-1;top:-200px;right:-200px}
|
|
.glow-2{bottom:-300px;left:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.04) 0%,transparent 70%)}
|
|
</style>
|
|
<script>(function(){var t=localStorage.getItem('vela_theme');if(t==='light'||(!t&&window.matchMedia('(prefers-color-scheme:light)').matches))document.documentElement.classList.add('light')})();</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="glow"></div>
|
|
<div class="glow glow-2"></div>
|
|
|
|
<nav>
|
|
<a href="#" class="nav-logo">VELA<span class="dot">.</span></a>
|
|
<div class="nav-links">
|
|
<a href="/check-order.html"><span class="en-only">Check Order</span><span class="fr-only">Suivi</span></a>
|
|
<a href="/backup-drives.html"><span class="en-only">Backup Drives</span><span class="fr-only">Disques Backup</span></a>
|
|
<button class="theme-btn" id="themeToggle" onclick="toggleTheme()" title="Toggle theme"></button>
|
|
<a href="#contact" class="btn btn-cta"><span class="en-only">Get a Quote</span><span class="fr-only">Demander un devis</span></a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero" id="hero">
|
|
<div class="hero-grid">
|
|
<div>
|
|
<div class="hero-badge">
|
|
<span class="pulse"></span>
|
|
<span class="en-only">Taking orders now</span><span class="fr-only">Commandes ouvertes</span>
|
|
</div>
|
|
<h1>
|
|
<span class="en-only">Servers installed.<br><span class="highlight">Simply.</span></span>
|
|
<span class="fr-only">Serveurs installés.<br><span class="highlight">Simplement.</span></span>
|
|
</h1>
|
|
<p class="en-only">You pick a tier. We show up with the hardware, install it on-site, and hand you a working server. No upsells, no subscriptions, no runaround.</p>
|
|
<p class="fr-only">Vous choisissez une offre. Nous arrivons avec le matériel, installons sur place et vous remettons un serveur fonctionnel. Sans vente forcée, sans abonnement caché.</p>
|
|
<div class="hero-actions">
|
|
<a href="#tiers" class="btn btn-primary"><span class="en-only">See Tiers →</span><span class="fr-only">Voir les offres →</span></a>
|
|
<a href="#contact" class="btn btn-ghost"><span class="en-only">Talk to Us</span><span class="fr-only">Contactez-nous</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-stats">
|
|
<div class="stat-card"><div class="number">4</div><div class="label en-only">Server tiers — one fits your budget</div><div class="label fr-only">4 offres — une pour chaque budget</div></div>
|
|
<div class="stat-card"><div class="number">1</div><div class="label en-only">Week from message to installation</div><div class="label fr-only">1 semaine du message à l'installation</div></div>
|
|
<div class="stat-card"><div class="number">0</div><div class="label en-only">Hidden fees, subscriptions, or surprises</div><div class="label fr-only">Frais cachés, abonnements ou surprises</div></div>
|
|
<div class="stat-card"><div class="number">100%</div><div class="label en-only">On-site install. You don't touch a thing.</div><div class="label fr-only">Installation sur place. Vous ne touchez à rien.</div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tiers -->
|
|
<section id="tiers">
|
|
<div class="section-inner">
|
|
<div class="section-label"><span class="en-only">Pricing</span><span class="fr-only">Tarifs</span></div>
|
|
<h2 class="section-title"><span class="en-only">Pick a tier. Get a server.</span><span class="fr-only">Choisissez une offre. Recevez un serveur.</span></h2>
|
|
<p class="section-sub en-only">Four options, from entry-level to redundant storage. All include hardware, on-site installation, and a working server before we leave.</p>
|
|
<p class="section-sub fr-only">Quatre options, de l'entrée de gamme au stockage redondant. Chaque offre inclut le matériel, l'installation sur place et un serveur opérationnel avant notre départ.</p>
|
|
<div class="tiers-grid">
|
|
<div class="tier-card">
|
|
<div class="tier-name">Rif</div>
|
|
<div class="tier-tag"><span class="en-only">entry-level</span><span class="fr-only">entrée de gamme</span></div>
|
|
<div class="tier-price"><span class="en-only">From</span><span class="fr-only">À partir de</span> <span class="amount">—</span></div>
|
|
<ul class="tier-specs">
|
|
<li><span class="check">✓</span> <span class="en-only">512 GB unified storage</span><span class="fr-only">512 Go stockage unifié</span></li>
|
|
<li><span class="check">✓</span> Mini PC</li>
|
|
<li><span class="check">✓</span> <span class="en-only">On-site install</span><span class="fr-only">Installation sur place</span></li>
|
|
<li><span class="x">✗</span> <span class="en-only">No backup drive</span><span class="fr-only">Pas de sauvegarde</span></li>
|
|
</ul>
|
|
<a href="#contact" class="btn btn-ghost"><span class="en-only">Get Pricing</span><span class="fr-only">Voir le prix</span></a>
|
|
</div>
|
|
<div class="tier-card popular">
|
|
<div class="tier-name">Rif<sup>+</sup></div>
|
|
<div class="tier-tag"><span class="en-only">best value</span><span class="fr-only">meilleur rapport Q/P</span></div>
|
|
<div class="tier-price"><span class="en-only">From</span><span class="fr-only">À partir de</span> <span class="amount">—</span></div>
|
|
<ul class="tier-specs">
|
|
<li><span class="check">✓</span> <span class="en-only">512 GB + 512 GB backup</span><span class="fr-only">512 Go + 512 Go sauvegarde</span></li>
|
|
<li><span class="check">✓</span> Mini PC</li>
|
|
<li><span class="check">✓</span> <span class="en-only">On-site install</span><span class="fr-only">Installation sur place</span></li>
|
|
<li><span class="check">✓</span> <span class="en-only">Automated backups</span><span class="fr-only">Sauvegardes automatisées</span></li>
|
|
</ul>
|
|
<a href="#contact" class="btn btn-cta"><span class="en-only">Get Pricing</span><span class="fr-only">Voir le prix</span></a>
|
|
</div>
|
|
<div class="tier-card">
|
|
<div class="tier-name">Atlas</div>
|
|
<div class="tier-tag"><span class="en-only">pro</span><span class="fr-only">pro</span></div>
|
|
<div class="tier-price"><span class="en-only">From</span><span class="fr-only">À partir de</span> <span class="amount">—</span></div>
|
|
<ul class="tier-specs">
|
|
<li><span class="check">✓</span> <span class="en-only">1 TB unified storage</span><span class="fr-only">1 To stockage unifié</span></li>
|
|
<li><span class="check">✓</span> Mini PC</li>
|
|
<li><span class="check">✓</span> <span class="en-only">On-site install</span><span class="fr-only">Installation sur place</span></li>
|
|
<li><span class="x">✗</span> <span class="en-only">No backup drive</span><span class="fr-only">Pas de sauvegarde</span></li>
|
|
</ul>
|
|
<a href="#contact" class="btn btn-ghost"><span class="en-only">Get Pricing</span><span class="fr-only">Voir le prix</span></a>
|
|
</div>
|
|
<div class="tier-card recommended">
|
|
<div class="tier-name">Atlas<sup>+</sup></div>
|
|
<div class="tier-tag"><span class="en-only">maximum</span><span class="fr-only">max</span></div>
|
|
<div class="tier-price"><span class="en-only">From</span><span class="fr-only">À partir de</span> <span class="amount">—</span></div>
|
|
<ul class="tier-specs">
|
|
<li><span class="check">✓</span> <span class="en-only">1 TB + 1 TB backup</span><span class="fr-only">1 To + 1 To sauvegarde</span></li>
|
|
<li><span class="check">✓</span> Mini PC</li>
|
|
<li><span class="check">✓</span> <span class="en-only">On-site install</span><span class="fr-only">Installation sur place</span></li>
|
|
<li><span class="check">✓</span> <span class="en-only">Automated backups</span><span class="fr-only">Sauvegardes automatisées</span></li>
|
|
</ul>
|
|
<a href="#contact" class="btn btn-cta"><span class="en-only">Get Pricing</span><span class="fr-only">Voir le prix</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Vela -->
|
|
<section id="why">
|
|
<div class="section-inner">
|
|
<div class="section-label"><span class="en-only">Why Vela</span><span class="fr-only">Pourquoi Vela</span></div>
|
|
<h2 class="section-title"><span class="en-only">You want a server that works. We don't make it complicated.</span><span class="fr-only">Vous voulez un serveur qui marche. On ne complique rien.</span></h2>
|
|
<div class="why-grid">
|
|
<div class="why-card"><div class="icon">🔧</div><h3 class="en-only">We install. You use.</h3><h3 class="fr-only">On installe. Vous utilisez.</h3><p class="en-only">We bring the hardware, set it up on-site, configure it, test it, and leave. You don't open a single box.</p><p class="fr-only">Nous apportons le matériel, installons sur place, configurons, testons et repartons.</p></div>
|
|
<div class="why-card"><div class="icon">💰</div><h3 class="en-only">One price. No subscriptions.</h3><h3 class="fr-only">Un prix. Pas d'abonnement.</h3><p class="en-only">You pay once for the hardware and install. No monthly fees, no licensing traps.</p><p class="fr-only">Vous payez une fois pour le matériel et l'installation.</p></div>
|
|
<div class="why-card"><div class="icon">⚡</div><h3 class="en-only">Mini PCs. Real power.</h3><h3 class="fr-only">Mini PCs. Vraie puissance.</h3><p class="en-only">Small footprint, low power draw, silent operation. Modern hardware built to run 24/7.</p><p class="fr-only">Encombrement réduit, faible consommation, fonctionnement silencieux.</p></div>
|
|
<div class="why-card"><div class="icon">📅</div><h3 class="en-only">1 week. Message to running server.</h3><h3 class="fr-only">1 semaine. Du message au serveur opérationnel.</h3><p class="en-only">You send a message. One week later, we hand you a working server.</p><p class="fr-only">Vous envoyez un message. Une semaine plus tard, serveur opérationnel.</p></div>
|
|
<div class="why-card"><div class="icon">🗣️</div><h3 class="en-only">You talk to the person who builds it.</h3><h3 class="fr-only">Direct avec le constructeur.</h3><p class="en-only">No account managers. You deal directly with the person who assembles and installs your server.</p><p class="fr-only">Pas de chargés de compte. Direct avec la personne qui monte votre serveur.</p></div>
|
|
<div class="why-card"><div class="icon">📲</div><h3 class="en-only">Reach us on WhatsApp or Telegram</h3><h3 class="fr-only">Contactez-nous sur WhatsApp ou Telegram</h3>
|
|
<p class="en-only">Prefer messaging? We're one tap away.</p>
|
|
<p class="fr-only">Vous préférez envoyer un message ? On est à un clic.</p>
|
|
<div class="contact-row">
|
|
<a href="https://wa.me/212600000000" class="contact-badge" target="_blank">💬 WhatsApp</a>
|
|
<a href="https://t.me/velaserver" class="contact-badge" target="_blank">✈️ Telegram</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Process -->
|
|
<section id="process">
|
|
<div class="section-inner">
|
|
<div class="section-label">Process</div>
|
|
<h2 class="section-title"><span class="en-only">One week to a running server.</span><span class="fr-only">Une semaine pour un serveur opérationnel.</span></h2>
|
|
<div class="process-steps">
|
|
<div class="step"><h3 class="en-only">You message us</h3><h3 class="fr-only">Vous nous contactez</h3><p class="en-only">Fill out the form or reach out on WhatsApp/Telegram. We'll confirm what fits and give you a price.</p><p class="fr-only">Remplissez le formulaire ou contactez-nous sur WhatsApp/Telegram. On vous confirme l'offre et le prix.</p></div>
|
|
<div class="step"><h3 class="en-only">We prepare the hardware</h3><h3 class="fr-only">On prépare le matériel</h3><p class="en-only">We source, test, and configure your mini PC.</p><p class="fr-only">On approvisionne, teste et configure votre Mini PC.</p></div>
|
|
<div class="step"><h3 class="en-only">We install on-site</h3><h3 class="fr-only">Installation sur place</h3><p class="en-only">We show up, set everything up, run tests, and hand you a working server.</p><p class="fr-only">On se déplace, installe, teste et vous remet un serveur fonctionnel.</p></div>
|
|
<div class="step"><h3 class="en-only">Done. In one week.</h3><h3 class="fr-only">Fait. En une semaine.</h3><p class="en-only">No ongoing fees. No mandatory support contract.</p><p class="fr-only">Pas de frais récurrents. Pas de contrat obligatoire.</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq">
|
|
<div class="section-inner">
|
|
<div class="section-label">FAQ</div>
|
|
<h2 class="section-title"><span class="en-only">Straight answers.</span><span class="fr-only">Réponses directes.</span></h2>
|
|
<div class="faq-list" style="max-width:720px">
|
|
<div class="faq-item" style="border-bottom:1px solid var(--border);padding:1.25rem 0">
|
|
<div class="faq-q" style="font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none" onclick="this.parentElement.classList.toggle('open')">
|
|
<span class="en-only">What exactly do I get?</span><span class="fr-only">Qu'est-ce que je reçois exactement ?</span>
|
|
<span style="transition:transform .2s;color:var(--text-dim)">▾</span>
|
|
</div>
|
|
<div style="max-height:0;overflow:hidden;transition:max-height .3s, padding .3s;color:var(--text-dim);font-size:.9rem" class="faq-a"><div style="padding-top:1rem"><span class="en-only">A mini PC server installed at your location, configured and tested. On Plus tiers, a second drive with automated backup.</span><span class="fr-only">Un serveur Mini PC installé chez vous, configuré et testé. Sur les offres Plus, second disque avec sauvegarde automatisée.</span></div></div>
|
|
</div>
|
|
<div class="faq-item" style="border-bottom:1px solid var(--border);padding:1.25rem 0">
|
|
<div class="faq-q" style="font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none" onclick="this.parentElement.classList.toggle('open')">
|
|
<span class="en-only">Which tier do you recommend?</span><span class="fr-only">Quelle offre recommandez-vous ?</span>
|
|
<span style="transition:transform .2s;color:var(--text-dim)">▾</span>
|
|
</div>
|
|
<div style="max-height:0;overflow:hidden;transition:max-height .3s, padding .3s;color:var(--text-dim);font-size:.9rem" class="faq-a"><div style="padding-top:1rem"><span class="en-only">Atlas<sup>+</sup>. 1 TB storage plus 1 TB backup gives you room to grow and peace of mind.</span><span class="fr-only">Atlas<sup>+</sup>. 1 To de stockage plus 1 To de sauvegarde, de la place pour évoluer.</span></div></div>
|
|
</div>
|
|
<div class="faq-item" style="border-bottom:1px solid var(--border);padding:1.25rem 0">
|
|
<div class="faq-q" style="font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none" onclick="this.parentElement.classList.toggle('open')">
|
|
<span class="en-only">How long does it take?</span><span class="fr-only">Combien de temps ?</span>
|
|
<span style="transition:transform .2s;color:var(--text-dim)">▾</span>
|
|
</div>
|
|
<div style="max-height:0;overflow:hidden;transition:max-height .3s, padding .3s;color:var(--text-dim);font-size:.9rem" class="faq-a"><div style="padding-top:1rem"><span class="en-only">One week from your first message to installation.</span><span class="fr-only">Une semaine de votre premier message à l'installation.</span></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Form -->
|
|
<section class="form-section" id="contact">
|
|
<div class="section-inner">
|
|
<div class="form-inner">
|
|
<div class="form-heading">
|
|
<div class="section-label"><span class="en-only">Get Started</span><span class="fr-only">Commencez</span></div>
|
|
<h2 class="en-only">Ready to get your server?</h2>
|
|
<h2 class="fr-only">Prêt à recevoir votre serveur ?</h2>
|
|
<p class="en-only">Tell us what you need. We'll get back to you within 24 hours with a price and timeline. No commitment.</p>
|
|
<p class="fr-only">Dites-nous ce dont vous avez besoin. Réponse sous 24h avec un prix et un délai. Sans engagement.</p>
|
|
<div class="contact-row">
|
|
<a href="https://wa.me/212600000000" class="contact-badge" target="_blank">💬 WhatsApp</a>
|
|
<a href="https://t.me/velaserver" class="contact-badge" target="_blank">✈️ Telegram</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="apple-form" id="velaForm">
|
|
<div class="step-track" id="stepTrack">
|
|
<div class="step-dot" data-step="1"></div>
|
|
<div class="step-dot" data-step="2"></div>
|
|
<div class="step-dot" data-step="3"></div>
|
|
<div class="step-dot" data-step="4"></div>
|
|
</div>
|
|
<div class="step-label" id="stepLabel"><span class="en-only">Step 1 of 4</span><span class="fr-only">Étape 1 sur 4</span></div>
|
|
|
|
<div class="form-step current" data-step="1" id="step1">
|
|
<div class="field-wrapper" id="emailWrapper">
|
|
<span class="field-icon">✉</span>
|
|
<input class="field-input" type="email" id="email" placeholder="Email" autocomplete="email">
|
|
</div>
|
|
<div class="field-error" id="emailError"><span class="en-only">Please enter a valid email.</span><span class="fr-only">Entrez un email valide.</span></div>
|
|
<div class="btn-row">
|
|
<button type="button" class="btn btn-primary" id="next1"><span class="en-only">Next</span><span class="fr-only">Suivant</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-step" data-step="2" id="step2">
|
|
<div class="step-label" style="font-size:.78rem;color:var(--text-dim);margin-bottom:1rem;text-align:center">
|
|
<span class="en-only">Choose your server tier</span>
|
|
<span class="fr-only">Choisissez votre offre</span>
|
|
</div>
|
|
<div class="tier-selector">
|
|
<label class="tier-option" data-tier="rif" onclick="selectTier(this)">
|
|
<input type="radio" name="tier" value="rif">
|
|
<div class="t-name"><span class="check">✓</span>Rif</div>
|
|
<div class="t-tag"><span class="en-only">entry-level</span><span class="fr-only">entrée de gamme</span></div>
|
|
<div class="t-specs"><span>512 GB</span><span>Mini PC</span></div>
|
|
</label>
|
|
<label class="tier-option popular" data-tier="rifplus" onclick="selectTier(this)">
|
|
<input type="radio" name="tier" value="rif+">
|
|
<div class="t-name"><span class="check">✓</span>Rif<sup>+</sup></div>
|
|
<div class="t-tag"><span class="en-only">best value</span><span class="fr-only">meilleur rapport</span></div>
|
|
<div class="t-specs"><span>512+512 GB</span><span>Backup</span></div>
|
|
</label>
|
|
<label class="tier-option" data-tier="atlas" onclick="selectTier(this)">
|
|
<input type="radio" name="tier" value="atlas">
|
|
<div class="t-name"><span class="check">✓</span>Atlas</div>
|
|
<div class="t-tag"><span class="en-only">pro</span><span class="fr-only">pro</span></div>
|
|
<div class="t-specs"><span>1 TB</span><span>Mini PC</span></div>
|
|
</label>
|
|
<label class="tier-option popular" data-tier="atlasplus" onclick="selectTier(this)">
|
|
<input type="radio" name="tier" value="atlas+">
|
|
<div class="t-name"><span class="check">✓</span>Atlas<sup>+</sup></div>
|
|
<div class="t-tag"><span class="en-only">maximum</span><span class="fr-only">max</span></div>
|
|
<div class="t-specs"><span>1+1 TB</span><span>Backup</span></div>
|
|
</label>
|
|
</div>
|
|
<div class="field-error" id="tierError" style="text-align:center;margin-bottom:.5rem"><span class="en-only">Please select a tier.</span><span class="fr-only">Veuillez choisir une offre.</span></div>
|
|
<div class="btn-row">
|
|
<button type="button" class="btn btn-apple-secondary" id="back2"><span class="en-only">Back</span><span class="fr-only">Retour</span></button>
|
|
<button type="button" class="btn btn-primary" id="next2"><span class="en-only">Next</span><span class="fr-only">Suivant</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-step" data-step="3" id="step3">
|
|
<div class="field-wrapper" id="nameWrapper">
|
|
<span class="field-icon">👤</span>
|
|
<input class="field-input" type="text" id="name" placeholder="Name" autocomplete="name">
|
|
</div>
|
|
<div class="field-error" id="nameError"><span class="en-only">Please enter your name.</span><span class="fr-only">Entrez votre nom.</span></div>
|
|
<div class="btn-row">
|
|
<button type="button" class="btn btn-apple-secondary" id="back3"><span class="en-only">Back</span><span class="fr-only">Retour</span></button>
|
|
<button type="button" class="btn btn-primary" id="next3"><span class="en-only">Next</span><span class="fr-only">Suivant</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-step" data-step="4" id="step4">
|
|
<div class="field-wrapper" id="phoneWrapper">
|
|
<span class="field-icon">📞</span>
|
|
<input class="field-input" type="tel" id="phone" placeholder="Phone number">
|
|
</div>
|
|
<div class="field-error" id="phoneError"><span class="en-only">Please enter your phone number.</span><span class="fr-only">Entrez votre numéro.</span></div>
|
|
<div class="btn-row">
|
|
<button type="button" class="btn btn-apple-secondary" id="back4"><span class="en-only">Back</span><span class="fr-only">Retour</span></button>
|
|
<button type="button" class="btn btn-primary" id="submitBtn"><span class="en-only">Submit</span><span class="fr-only">Envoyer</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="success-card" id="successCard">
|
|
<div class="checkmark-wrap">
|
|
<svg viewBox="0 0 52 52" width="64" height="64">
|
|
<circle class="checkmark-circle" cx="26" cy="26" r="24"/>
|
|
<path class="checkmark-tick" d="M16 27l7 7 13-13"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="success-title en-only">We'll be in touch!</h2>
|
|
<h2 class="success-title fr-only">On vous répond sous 24h !</h2>
|
|
<p class="success-sub en-only">Expect a response within 24 hours with your price and timeline.</p>
|
|
<p class="success-sub fr-only">Vous recevrez un devis et un délai sous 24h.</p>
|
|
<button class="btn-restart" id="restartBtn"><span class="en-only">Submit another</span><span class="fr-only">Soumettre à nouveau</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Check Order Status -->
|
|
<section style="background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)">
|
|
<div class="section-inner" style="text-align:center">
|
|
<div class="section-label"><span class="en-only">Already ordered?</span><span class="fr-only">Déjà commandé ?</span></div>
|
|
<h2 class="section-title" style="font-size:clamp(1.4rem,2.5vw,1.8rem)"><span class="en-only">Check your order status</span><span class="fr-only">Vérifier le statut de votre commande</span></h2>
|
|
<p style="color:var(--text-dim);margin-bottom:2rem"><span class="en-only">Enter your email and phone number to check your order. No password needed.</span><span class="fr-only">Entrez votre email et numéro pour vérifier votre commande. Sans mot de passe.</span></p>
|
|
|
|
<div class="status-section" id="statusSection">
|
|
<div class="status-grid">
|
|
<div class="field-wrapper" id="checkEmailWrapper">
|
|
<span class="field-icon">✉</span>
|
|
<input class="field-input" type="email" id="checkEmail" placeholder="Email" autocomplete="email">
|
|
</div>
|
|
<div class="field-wrapper" id="checkPhoneWrapper">
|
|
<span class="field-icon">📞</span>
|
|
<input class="field-input" type="tel" id="checkPhone" placeholder="Phone">
|
|
</div>
|
|
<button class="btn btn-primary" id="checkStatusBtn" style="flex:0 0 auto;padding:14px 24px;border-radius:10px">
|
|
<span class="en-only">Check</span><span class="fr-only">Vérifier</span>
|
|
</button>
|
|
</div>
|
|
<div class="status-result" id="statusResult"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── GDPR Cookie Banner ── -->
|
|
<div class="cookie-banner" id="cookieBanner">
|
|
<p class="en-only">🍪 This site uses cookies to remember your order details and preferences.</p>
|
|
<p class="fr-only">🍪 Ce site utilise des cookies pour mémoriser vos commandes et préférences.</p>
|
|
<button class="cookie-btn" onclick="acceptCookies()"><span class="en-only">Accept</span><span class="fr-only">Accepter</span></button>
|
|
</div>
|
|
|
|
<footer>
|
|
<span class="en-only">Vela — Server Installation. Simply.</span>
|
|
<span class="fr-only">Vela — Installation de serveurs. Simplement.</span>
|
|
<div style="margin-top:.5rem;font-size:.7rem"><a href="/admin.html" style="color:var(--text-muted);text-decoration:none">Admin</a></div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function(){
|
|
const API_URL = '';
|
|
|
|
// ── Live Pricing: fetch from P&L manager via API proxy ──
|
|
const TIER_PRICE_MAP = {rif: 'Rif', rifplus: 'Rif+', atlas: 'Atlas', atlasplus: 'Atlas+'};
|
|
let livePrices = {};
|
|
|
|
async function fetchPricing() {
|
|
try {
|
|
const resp = await fetch('/api/public/pricing');
|
|
if (!resp.ok) return;
|
|
const data = await resp.json();
|
|
for (const svc of data.pricing) {
|
|
livePrices[svc.name] = svc;
|
|
}
|
|
pricingLoaded = true;
|
|
// Update tier card prices
|
|
document.querySelectorAll('.tier-card .amount').forEach(el => {
|
|
const card = el.closest('.tier-card');
|
|
if (!card) return;
|
|
const name = card.querySelector('.tier-name')?.textContent?.trim().replace('⁺', '+') || '';
|
|
const price = livePrices[name];
|
|
if (price) {
|
|
const isFr = document.documentElement.classList.contains('lang-fr');
|
|
el.textContent = price.sell_price.toLocaleString() + ' MAD';
|
|
// Update the "From" label to show monthly
|
|
const priceLine = el.closest('.tier-price');
|
|
if (priceLine) {
|
|
const prefix = priceLine.querySelector('.en-only');
|
|
const prefixFr = priceLine.querySelector('.fr-only');
|
|
if (prefix) prefix.textContent = 'From';
|
|
if (prefixFr) prefixFr.textContent = 'À partir de';
|
|
}
|
|
// Change button text to show price
|
|
const btn = card.querySelector('.btn');
|
|
if (btn) {
|
|
btn.textContent = price.sell_price.toLocaleString() + ' MAD/mois';
|
|
}
|
|
}
|
|
});
|
|
// Update tier-selector pricing labels
|
|
document.querySelectorAll('.tier-option').forEach(el => {
|
|
const tierKey = el.dataset.tier;
|
|
const name = TIER_PRICE_MAP[tierKey];
|
|
const price = livePrices[name];
|
|
if (price) {
|
|
let tag = el.querySelector('.t-tag');
|
|
if (tag) {
|
|
tag.textContent = price.sell_price.toLocaleString() + ' MAD/mois';
|
|
}
|
|
}
|
|
});
|
|
} catch (e) {
|
|
console.log('Pricing API unavailable — using defaults');
|
|
}
|
|
}
|
|
|
|
// Fetch pricing immediately and every 60 seconds
|
|
fetchPricing();
|
|
setInterval(fetchPricing, 60000);
|
|
const totalSteps = 4;
|
|
let currentStep = 1;
|
|
let selectedTier = '';
|
|
|
|
const steps = Array.from(document.querySelectorAll('.form-step'));
|
|
const dots = Array.from(document.querySelectorAll('.step-dot'));
|
|
const label = document.getElementById('stepLabel');
|
|
const success = document.getElementById('successCard');
|
|
|
|
const fields = {
|
|
email: { input: document.getElementById('email'), wrapper: document.getElementById('emailWrapper'), error: document.getElementById('emailError') },
|
|
name: { input: document.getElementById('name'), wrapper: document.getElementById('nameWrapper'), error: document.getElementById('nameError') },
|
|
phone: { input: document.getElementById('phone'), wrapper: document.getElementById('phoneWrapper'), error: document.getElementById('phoneError') }
|
|
};
|
|
const tierError = document.getElementById('tierError');
|
|
|
|
function validateEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()); }
|
|
|
|
window.selectTier = function(el) {
|
|
document.querySelectorAll('.tier-option').forEach(o => o.classList.remove('selected'));
|
|
el.classList.add('selected');
|
|
el.querySelector('input').checked = true;
|
|
selectedTier = el.querySelector('input').value;
|
|
if (tierError) tierError.classList.remove('shown');
|
|
};
|
|
|
|
function clearErrors() {
|
|
Object.values(fields).forEach(f => {
|
|
if(f.wrapper) f.wrapper.classList.remove('error');
|
|
if(f.error) f.error.classList.remove('shown');
|
|
});
|
|
if (tierError) tierError.classList.remove('shown');
|
|
}
|
|
|
|
function showStep(n, dir) {
|
|
steps.forEach(s => s.classList.remove('current', 'animate-forward', 'animate-back'));
|
|
const stepEl = document.getElementById('step' + n);
|
|
if (stepEl) {
|
|
stepEl.classList.add('current');
|
|
if (dir) stepEl.classList.add(dir);
|
|
}
|
|
dots.forEach((d, i) => {
|
|
d.classList.remove('active', 'done');
|
|
if (i + 1 < n) d.classList.add('done');
|
|
if (i + 1 === n) d.classList.add('active');
|
|
});
|
|
const isFr = document.documentElement.classList.contains('lang-fr');
|
|
label.textContent = isFr ? 'Étape ' + n + ' sur ' + totalSteps : 'Step ' + n + ' of ' + totalSteps;
|
|
const input = stepEl ? stepEl.querySelector('input, select') : null;
|
|
if (input && dir) setTimeout(() => input.focus(), 100);
|
|
currentStep = n;
|
|
}
|
|
|
|
function validateStep(n) {
|
|
clearErrors();
|
|
if (n === 1) {
|
|
const v = fields.email.input.value.trim();
|
|
if (!v || !validateEmail(v)) {
|
|
fields.email.wrapper.classList.add('error');
|
|
fields.email.error.classList.add('shown');
|
|
return false;
|
|
}
|
|
}
|
|
if (n === 2) {
|
|
if (!selectedTier) {
|
|
if (tierError) tierError.classList.add('shown');
|
|
return false;
|
|
}
|
|
}
|
|
if (n === 3) {
|
|
const v = fields.name.input.value.trim();
|
|
if (!v) {
|
|
fields.name.wrapper.classList.add('error');
|
|
fields.name.error.classList.add('shown');
|
|
return false;
|
|
}
|
|
}
|
|
if (n === 4) {
|
|
const v = fields.phone.input.value.trim();
|
|
if (!v) {
|
|
fields.phone.wrapper.classList.add('error');
|
|
fields.phone.error.classList.add('shown');
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function showSuccess() {
|
|
const circle = document.querySelector('#successCard .checkmark-circle');
|
|
const tick = document.querySelector('#successCard .checkmark-tick');
|
|
if (circle) { circle.style.animation = 'none'; void circle.offsetHeight; circle.style.animation = ''; }
|
|
if (tick) { tick.style.animation = 'none'; void tick.offsetHeight; tick.style.animation = ''; }
|
|
steps.forEach(s => s.classList.remove('current'));
|
|
success.classList.remove('visible');
|
|
void success.offsetWidth;
|
|
success.classList.add('visible');
|
|
}
|
|
|
|
async function submitForm() {
|
|
const payload = {
|
|
email: fields.email.input.value.trim(),
|
|
tier: selectedTier,
|
|
name: fields.name.input.value.trim(),
|
|
phone: fields.phone.input.value.trim()
|
|
};
|
|
try {
|
|
const resp = await fetch(API_URL + '/api/submit', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if (resp.ok) {
|
|
showSuccess();
|
|
setVelaCookie(STATUS_COOKIE, JSON.stringify({email: payload.email, phone: payload.phone}), 30);
|
|
} else {
|
|
const isFr = document.documentElement.classList.contains('lang-fr');
|
|
alert(isFr ? "Échec de l'envoi. Réessayez." : 'Submission failed. Please try again.');
|
|
}
|
|
} catch (e) {
|
|
const isFr = document.documentElement.classList.contains('lang-fr');
|
|
alert(isFr ? 'Impossible de contacter le serveur.' : 'Could not reach the server.');
|
|
}
|
|
}
|
|
|
|
function resetForm() {
|
|
success.classList.remove('visible');
|
|
Object.values(fields).forEach(f => { if (f.input) f.input.value = ''; });
|
|
document.querySelectorAll('.tier-option').forEach(o => o.classList.remove('selected'));
|
|
document.querySelectorAll('.tier-option input').forEach(i => i.checked = false);
|
|
selectedTier = '';
|
|
clearErrors();
|
|
currentStep = 1;
|
|
showStep(1);
|
|
}
|
|
|
|
Object.values(fields).forEach(f => {
|
|
if (f.input) {
|
|
f.input.addEventListener('input', function() {
|
|
f.wrapper.classList.remove('error');
|
|
if (f.error) f.error.classList.remove('shown');
|
|
});
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' && currentStep <= totalSteps) {
|
|
e.preventDefault();
|
|
if (validateStep(currentStep)) {
|
|
if (currentStep < totalSteps) showStep(currentStep + 1, 'animate-forward');
|
|
else submitForm();
|
|
}
|
|
}
|
|
});
|
|
|
|
document.getElementById('next1').addEventListener('click', function() {
|
|
if (validateStep(1)) showStep(2, 'animate-forward');
|
|
});
|
|
document.getElementById('back2').addEventListener('click', function() { showStep(1, 'animate-back'); });
|
|
document.getElementById('next2').addEventListener('click', function() {
|
|
if (validateStep(2)) showStep(3, 'animate-forward');
|
|
});
|
|
document.getElementById('back3').addEventListener('click', function() { showStep(2, 'animate-back'); });
|
|
document.getElementById('next3').addEventListener('click', function() {
|
|
if (validateStep(3)) showStep(4, 'animate-forward');
|
|
});
|
|
document.getElementById('back4').addEventListener('click', function() { showStep(3, 'animate-back'); });
|
|
document.getElementById('submitBtn').addEventListener('click', function() {
|
|
if (validateStep(4)) submitForm();
|
|
});
|
|
document.getElementById('restartBtn').addEventListener('click', resetForm);
|
|
showStep(1);
|
|
|
|
// ── Cookie helpers for status check ──
|
|
const STATUS_COOKIE = 'vela_order_check';
|
|
function getVelaCookie(name) {
|
|
const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
|
|
return m ? decodeURIComponent(m[2]) : null;
|
|
}
|
|
function setVelaCookie(name, value, days) {
|
|
const d = new Date();
|
|
d.setTime(d.getTime() + days * 86400000);
|
|
document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toUTCString() + ';path=/';
|
|
}
|
|
|
|
// Restore saved email/phone from cookie
|
|
(function() {
|
|
const saved = getVelaCookie(STATUS_COOKIE);
|
|
if (saved) {
|
|
try {
|
|
const parsed = JSON.parse(saved);
|
|
if (parsed.email) document.getElementById('checkEmail').value = parsed.email;
|
|
if (parsed.phone) document.getElementById('checkPhone').value = parsed.phone;
|
|
} catch(e) {}
|
|
}
|
|
})();
|
|
|
|
// ── GDPR Cookie Consent ──
|
|
window.acceptCookies = function() {
|
|
setVelaCookie('vela_gdpr_consent', 'accepted', 365);
|
|
document.getElementById('cookieBanner').classList.remove('show');
|
|
};
|
|
// Show banner if no consent given yet
|
|
if (!getVelaCookie('vela_gdpr_consent')) {
|
|
document.getElementById('cookieBanner').classList.add('show');
|
|
}
|
|
|
|
// ── Check Order Status ──
|
|
document.getElementById('checkStatusBtn').addEventListener('click', async function() {
|
|
const email = document.getElementById('checkEmail').value.trim();
|
|
const phone = document.getElementById('checkPhone').value.trim();
|
|
const result = document.getElementById('statusResult');
|
|
const isFr = document.documentElement.classList.contains('lang-fr');
|
|
|
|
if (!email || !phone) {
|
|
result.className = 'status-result not-found';
|
|
result.textContent = isFr ? 'Veuillez entrer votre email et votre numéro.' : 'Please enter your email and phone.';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const resp = await fetch(API_URL + '/api/status?email=' + encodeURIComponent(email) + '&phone=' + encodeURIComponent(phone));
|
|
if (resp.ok) {
|
|
const data = await resp.json();
|
|
// Save email/phone to cookie for 30 days
|
|
setVelaCookie(STATUS_COOKIE, JSON.stringify({email, phone}), 30);
|
|
const statuses = ['received','confirmed','hardware ready','installing','completed'];
|
|
let timelineHtml = '';
|
|
statuses.forEach((s,i) => {
|
|
const done = i <= data.status_index;
|
|
const active = i === data.status_index;
|
|
const labels = {received:'Received',confirmed:'Confirmed','hardware ready':'Hardware Ready',installing:'Installing',completed:'Completed'};
|
|
timelineHtml += '<div style="display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;opacity:'+(done?'1':'0.3')+'"><div style="width:24px;height:24px;border-radius:50%;background:'+(done?'var(--green)':'var(--border)')+';display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0">'+(active?'●':done?'✓':'')+'</div><span style="font-size:.9rem;font-weight:'+(active?'600':'400')+'">'+(isFr?{received:'Reçue',confirmed:'Confirmée','hardware ready':'Matériel Prêt',installing:'Installation',completed:'Terminée'}[s]||s:labels[s])+'</span></div>';
|
|
});
|
|
if (data.status === 'cancelled') {
|
|
timelineHtml = '<div style="color:var(--red);font-weight:600">'+(isFr?'❌ Commande annulée':'❌ Order cancelled')+'</div>';
|
|
}
|
|
const canDelete = data.status_index < 1; // only 'received' can be deleted
|
|
const deleteBtn = canDelete
|
|
? '<button class="btn btn-sm btn-ghost" onclick="deleteOrder(\'' + email + '\',\'' + phone + '\')" style="margin-top:1rem">🗑 ' + (isFr ? 'Supprimer ma commande' : 'Delete my order') + '</button>'
|
|
: '';
|
|
const cancelledMsg = data.status === 'cancelled'
|
|
? '<div style="margin-top:1rem;padding:.75rem;border-radius:var(--radius-sm);background:rgba(255,71,87,.08);border:1px solid rgba(255,71,87,.2);font-size:.85rem;color:var(--red)">' + (isFr ? 'Cette commande a été annulée. Contactez-nous pour plus d\'infos.' : 'This order has been cancelled. Contact us for details.') + '</div>'
|
|
: '';
|
|
result.className = 'status-result found';
|
|
result.innerHTML = isFr
|
|
? '<div style="margin-bottom:1rem;font-size:.85rem;color:var(--text-dim)">Commande #'+data.id+' — '+data.created_at.slice(0,10)+'</div>'+timelineHtml+deleteBtn+cancelledMsg
|
|
: '<div style="margin-bottom:1rem;font-size:.85rem;color:var(--text-dim)">Order #'+data.id+' — '+data.created_at.slice(0,10)+'</div>'+timelineHtml+deleteBtn+cancelledMsg;
|
|
} else {
|
|
result.className = 'status-result not-found';
|
|
result.textContent = isFr ? '❌ Aucune commande trouvée avec cet email et ce numéro.' : '❌ No order found with that email and phone.';
|
|
}
|
|
} catch (e) {
|
|
result.className = 'status-result not-found';
|
|
result.textContent = isFr ? 'Erreur de connexion au serveur.' : 'Server connection error.';
|
|
}
|
|
});
|
|
|
|
window.deleteOrder = async function(email, phone) {
|
|
const isFr = document.documentElement.classList.contains('lang-fr');
|
|
if (!confirm(isFr ? 'Supprimer votre commande ? Cette action est irréversible.' : 'Delete your order? This cannot be undone.')) return;
|
|
try {
|
|
const resp = await fetch(API_URL + '/api/submission?email=' + encodeURIComponent(email) + '&phone=' + encodeURIComponent(phone), { method: 'DELETE' });
|
|
if (resp.ok) {
|
|
document.getElementById('statusResult').className = 'status-result found';
|
|
document.getElementById('statusResult').innerHTML = isFr ? '✅ Commande supprimée.' : '✅ Order deleted.';
|
|
} else {
|
|
alert(isFr ? 'Erreur lors de la suppression.' : 'Error deleting order.');
|
|
}
|
|
} catch (e) {
|
|
alert(isFr ? 'Erreur de connexion.' : 'Connection error.');
|
|
}
|
|
};
|
|
|
|
// ── Theme Toggle ──
|
|
window.toggleTheme = function() {
|
|
const html = document.documentElement;
|
|
html.classList.toggle('light');
|
|
const isLight = html.classList.contains('light');
|
|
localStorage.setItem('vela_theme', isLight ? 'light' : 'dark');
|
|
document.getElementById('themeToggle').textContent = isLight ? '🌙' : '☀️';
|
|
};
|
|
|
|
(function initThemeIcon() {
|
|
const isLight = document.documentElement.classList.contains('light');
|
|
document.getElementById('themeToggle').textContent = isLight ? '🌙' : '☀️';
|
|
})();
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|