feat: initial frontend — landing, admin, check-order, backup-drives
This commit is contained in:
+414
@@ -0,0 +1,414 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
|
||||||
|
<title>Vela — Order Management</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<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:#e8e8ed;--text-dim:#888891;--text-muted:#5c5c66;--accent:#6c5ce7;--green:#00c951;--orange:#ff922b;--red:#ff4757;--overlay:rgba(0,0,0,.7)}
|
||||||
|
.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;--green:#34c759;--orange:#ff9500;--red:#ff3b30;--overlay:rgba(0,0,0,.35)}
|
||||||
|
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);padding:1.5rem;-webkit-font-smoothing:antialiased}
|
||||||
|
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
|
||||||
|
.header h1{font-size:1.4rem;font-weight:700}
|
||||||
|
.header h1 span{color:var(--accent)}
|
||||||
|
.logout{font-size:.8rem;color:var(--text-dim);cursor:pointer;padding:.4rem .8rem;border:1px solid var(--border);border-radius:6px;background:transparent;font-family:inherit;transition:all .2s}
|
||||||
|
.logout:hover,.logout:active{border-color:var(--red);color:var(--red)}
|
||||||
|
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1.5rem}
|
||||||
|
.stat{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:.8rem;text-align:center}
|
||||||
|
.stat .num{font-size:1.6rem;font-weight:800}
|
||||||
|
.stat .lbl{font-size:.72rem;color:var(--text-dim);margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||||
|
.tabs{display:flex;gap:.35rem;margin-bottom:1rem;overflow-x:auto;padding-bottom:.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
|
||||||
|
.tabs::-webkit-scrollbar{display:none}
|
||||||
|
.tab{padding:.45rem .85rem;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;font-family:inherit;font-size:.78rem;white-space:nowrap;transition:all .2s;flex-shrink:0;touch-action:manipulation}
|
||||||
|
.tab:active{transform:scale(.96)}
|
||||||
|
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
|
||||||
|
.order-summary{font-size:.75rem;color:var(--text-dim);margin-bottom:.75rem}
|
||||||
|
/* ── Desktop table ── */
|
||||||
|
.orders-table{width:100%;border-collapse:collapse;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:none}
|
||||||
|
.orders-table th{text-align:left;padding:.65rem .85rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);border-bottom:1px solid var(--border);font-weight:600}
|
||||||
|
.orders-table td{padding:.65rem .85rem;font-size:.82rem;border-bottom:1px solid var(--border)}
|
||||||
|
.orders-table tr:last-child td{border-bottom:none}
|
||||||
|
.orders-table tr{cursor:pointer;transition:background .15s}
|
||||||
|
.orders-table tr:hover{background:var(--bg-card-hover)}
|
||||||
|
/* ── Mobile cards ── */
|
||||||
|
.order-cards{display:flex;flex-direction:column;gap:.6rem}
|
||||||
|
.order-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:.85rem;cursor:pointer;transition:all .15s;position:relative;touch-action:manipulation}
|
||||||
|
.order-card:active{transform:scale(.98);border-color:var(--border-hover)}
|
||||||
|
.order-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}
|
||||||
|
.order-card .top .id{font-weight:700;font-size:.9rem}
|
||||||
|
.order-card .top .date{font-size:.72rem;color:var(--text-muted)}
|
||||||
|
.order-card .fields{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .6rem;font-size:.82rem}
|
||||||
|
.order-card .fields .lbl{color:var(--text-dim);font-size:.72rem}
|
||||||
|
.order-card .fields .val{color:var(--text)}
|
||||||
|
.order-card .fields .val.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||||
|
.badge{display:inline-block;padding:.25rem .65rem;border-radius:100px;font-size:.72rem;font-weight:600}
|
||||||
|
.badge-received{background:rgba(108,92,231,.15);color:var(--accent)}
|
||||||
|
.badge-confirmed{background:rgba(0,201,81,.15);color:var(--green)}
|
||||||
|
.badge-hardware{background:rgba(255,146,43,.15);color:var(--orange)}
|
||||||
|
.badge-installing{background:rgba(108,92,231,.15);color:var(--accent)}
|
||||||
|
.badge-completed{background:rgba(0,201,81,.15);color:var(--green)}
|
||||||
|
.badge-cancelled{background:rgba(255,71,87,.15);color:var(--red)}
|
||||||
|
.status-select{padding:.35rem .5rem;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-size:.82rem;cursor:pointer}
|
||||||
|
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay);z-index:200;align-items:flex-end;justify-content:center;padding:env(safe-area-inset-bottom) 0 0}
|
||||||
|
.modal.open{display:flex}
|
||||||
|
.modal.open .modal-inner{animation:slideUp .25s cubic-bezier(.4,0,.2,1)}
|
||||||
|
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
|
||||||
|
.modal-inner{background:var(--bg-card);border:1px solid var(--border);border-radius:16px 16px 0 0;padding:1.5rem;max-width:600px;width:100%;max-height:85vh;overflow-y:auto}
|
||||||
|
.modal-handle{width:36px;height:4px;border-radius:4px;background:var(--text-muted);margin:0 auto 1.25rem}
|
||||||
|
.modal-inner h2{font-size:1.2rem;margin-bottom:1rem}
|
||||||
|
.modal-inner .row{display:flex;gap:.5rem;margin-bottom:.5rem;font-size:.9rem;align-items:center}
|
||||||
|
.modal-inner .row .lbl{color:var(--text-dim);min-width:70px;flex-shrink:0}
|
||||||
|
.modal-inner textarea{width:100%;padding:.6rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-size:.85rem;resize:vertical;min-height:60px;margin-top:.5rem}
|
||||||
|
.modal-inner .btn-row{display:flex;gap:.5rem;margin-top:1rem}
|
||||||
|
.modal-inner .btn{padding:.55rem 1.2rem;border-radius:8px;border:none;font-family:inherit;font-size:.85rem;cursor:pointer;transition:all .15s;touch-action:manipulation}
|
||||||
|
.modal-inner .btn:active{transform:scale(.96)}
|
||||||
|
.modal-inner .btn-primary{background:var(--accent);color:#fff}
|
||||||
|
.modal-inner .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-dim)}
|
||||||
|
.modal-inner .btn-ghost:active{background:var(--bg-card-hover)}
|
||||||
|
.notes{margin-top:1rem}
|
||||||
|
.note-item{font-size:.82rem;color:var(--text-dim);padding:.5rem 0;border-bottom:1px solid var(--border)}
|
||||||
|
.note-item:last-child{border-bottom:none}
|
||||||
|
.note-item .date{font-size:.7rem;color:var(--text-muted);margin-top:.15rem}
|
||||||
|
.login{display:flex;align-items:center;justify-content:center;min-height:80vh;padding:1.5rem}
|
||||||
|
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2.5rem 2rem;width:100%;max-width:360px;text-align:center}
|
||||||
|
.login-card h1{font-size:1.8rem;font-weight:800;margin-bottom:.35rem}
|
||||||
|
.login-card p{color:var(--text-dim);font-size:.9rem;margin-bottom:2rem}
|
||||||
|
.login-card input{width:100%;padding:.85rem;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-size:1.05rem;margin-bottom:1rem;outline:none;transition:border-color .2s}
|
||||||
|
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,92,231,.18)}
|
||||||
|
.login-card .btn{width:100%;padding:.85rem;border-radius:10px;border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:1.05rem;font-weight:600;cursor:pointer;transition:background .2s}
|
||||||
|
.login-card .btn:active{background:var(--accent-hover)}
|
||||||
|
.login-error{color:var(--red);font-size:.85rem;margin-top:.75rem;display:none}
|
||||||
|
.empty{text-align:center;padding:3rem 1rem;color:var(--text-dim);font-size:.9rem}
|
||||||
|
.empty .icon{font-size:2.5rem;margin-bottom:1rem;opacity:.5}
|
||||||
|
@media(min-width:769px){
|
||||||
|
body{padding:2rem}
|
||||||
|
.orders-table{display:table}
|
||||||
|
.order-cards{display:none}
|
||||||
|
.modal.open .modal-inner{animation:none}
|
||||||
|
.modal{align-items:center}
|
||||||
|
.modal-inner{border-radius:12px;padding:2rem}
|
||||||
|
.modal-handle{display:none}
|
||||||
|
}
|
||||||
|
@media(max-width:768px){
|
||||||
|
body{padding:.75rem}
|
||||||
|
.orders-table{display:none}
|
||||||
|
.order-cards{display:flex}
|
||||||
|
.header h1{font-size:1.2rem}
|
||||||
|
.stats{grid-template-columns:repeat(auto-fit,minmax(85px,1fr));gap:.5rem}
|
||||||
|
.stat{padding:.55rem}
|
||||||
|
.stat .num{font-size:1.2rem}
|
||||||
|
.stat .lbl{font-size:.65rem}
|
||||||
|
.tabs{gap:.25rem;margin-left:-.75rem;margin-right:-.75rem;padding:0 .75rem .25rem}
|
||||||
|
.tab{padding:.4rem .7rem;font-size:.72rem}
|
||||||
|
.login-card{padding:2rem 1.5rem;border-radius:12px}
|
||||||
|
}
|
||||||
|
.theme-btn{font-size:1.1rem;background:transparent;border:none;cursor:pointer;padding:.3rem;border-radius:6px;color:var(--text-dim);transition:color .2s;line-height:1;touch-action:manipulation}
|
||||||
|
.theme-btn:hover,.theme-btn:active{color:var(--text)}
|
||||||
|
</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 id="loginView" class="login">
|
||||||
|
<div class="login-card">
|
||||||
|
<h1>VELA <span style="color:var(--accent)">Admin</span></h1>
|
||||||
|
<p>Order management dashboard</p>
|
||||||
|
<input type="password" id="loginPassword" placeholder="Admin password" autocomplete="current-password" onkeydown="if(event.key==='Enter')login()">
|
||||||
|
<button class="btn" onclick="login()">Sign In</button>
|
||||||
|
<div class="login-error" id="loginError">Wrong password</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="dashboardView" style="display:none">
|
||||||
|
<div class="header">
|
||||||
|
<h1>VELA <span>Admin</span></h1>
|
||||||
|
<div style="display:flex;gap:.5rem;align-items:center">
|
||||||
|
<button class="theme-btn" id="themeToggle" onclick="toggleTheme()" title="Toggle theme"></button>
|
||||||
|
<button class="logout" onclick="logout()">Logout</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" id="statsRow"></div>
|
||||||
|
|
||||||
|
<div class="tabs" id="tabBar">
|
||||||
|
<button class="tab active" data-filter="all" onclick="setFilter('all')">All</button>
|
||||||
|
<button class="tab" data-filter="received" onclick="setFilter('received')">Received</button>
|
||||||
|
<button class="tab" data-filter="confirmed" onclick="setFilter('confirmed')">Confirmed</button>
|
||||||
|
<button class="tab" data-filter="hardware ready" onclick="setFilter('hardware ready')">Ready</button>
|
||||||
|
<button class="tab" data-filter="installing" onclick="setFilter('installing')">Installing</button>
|
||||||
|
<button class="tab" data-filter="completed" onclick="setFilter('completed')">Completed</button>
|
||||||
|
<button class="tab" data-filter="cancelled" onclick="setFilter('cancelled')">Cancelled</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="orders-table">
|
||||||
|
<thead>
|
||||||
|
<tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Status</th><th>Date</th><th></th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="ordersBody"></tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="order-cards" id="ordersCards"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal" id="detailModal">
|
||||||
|
<div class="modal-inner">
|
||||||
|
<div class="modal-handle"></div>
|
||||||
|
<h2>Order #<span id="detailId"></span></h2>
|
||||||
|
<div class="row"><span class="lbl">Name:</span><span id="detailName"></span></div>
|
||||||
|
<div class="row"><span class="lbl">Email:</span><span id="detailEmail"></span></div>
|
||||||
|
<div class="row"><span class="lbl">Phone:</span><span id="detailPhone"></span></div>
|
||||||
|
<div class="row"><span class="lbl">Date:</span><span id="detailDate"></span></div>
|
||||||
|
<div class="row"><span class="lbl">Status:</span>
|
||||||
|
<select class="status-select" id="detailStatus" onchange="updateStatus()">
|
||||||
|
<option value="received">Received</option>
|
||||||
|
<option value="confirmed">Confirmed</option>
|
||||||
|
<option value="hardware ready">Hardware Ready</option>
|
||||||
|
<option value="installing">Installing</option>
|
||||||
|
<option value="completed">Completed</option>
|
||||||
|
<option value="cancelled">Cancelled</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top:1rem">
|
||||||
|
<label style="font-size:.85rem;color:var(--text-dim)">Internal Note</label>
|
||||||
|
<textarea id="noteInput" placeholder="Add a note about this order..." onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();addNote()}"></textarea>
|
||||||
|
<button class="btn btn-primary" onclick="addNote()" style="margin-top:.5rem">Add Note</button>
|
||||||
|
</div>
|
||||||
|
<div class="notes" id="notesList"></div>
|
||||||
|
<div class="btn-row">
|
||||||
|
<button class="btn btn-ghost" onclick="closeModal()">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API = 'http://192.168.1.30:8581';
|
||||||
|
let token = localStorage.getItem('vela_admin_token') || '';
|
||||||
|
let orders = [];
|
||||||
|
let currentFilter = 'all';
|
||||||
|
let currentOrderId = null;
|
||||||
|
|
||||||
|
// ── Auth ──
|
||||||
|
|
||||||
|
async function login() {
|
||||||
|
const pw = document.getElementById('loginPassword').value;
|
||||||
|
try {
|
||||||
|
const r = await fetch(API + '/admin/login', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({password:pw})});
|
||||||
|
if (!r.ok) { document.getElementById('loginError').style.display='block'; return; }
|
||||||
|
const d = await r.json();
|
||||||
|
token = d.token;
|
||||||
|
localStorage.setItem('vela_admin_token', token);
|
||||||
|
showDashboard();
|
||||||
|
} catch(e) { document.getElementById('loginError').style.display='block'; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
token = ''; localStorage.removeItem('vela_admin_token');
|
||||||
|
document.getElementById('dashboardView').style.display='none';
|
||||||
|
document.getElementById('loginView').style.display='flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDashboard() {
|
||||||
|
document.getElementById('loginView').style.display='none';
|
||||||
|
document.getElementById('dashboardView').style.display='block';
|
||||||
|
loadOrders();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Data loading ──
|
||||||
|
|
||||||
|
async function loadOrders() {
|
||||||
|
try {
|
||||||
|
const r = await fetch(API + '/admin/submissions?per_page=200', {headers:{'Authorization':'Bearer '+token}});
|
||||||
|
if (r.status === 401) { logout(); return; }
|
||||||
|
if (!r.ok) return;
|
||||||
|
const d = await r.json();
|
||||||
|
orders = d.submissions || [];
|
||||||
|
renderStats(d); renderOrders();
|
||||||
|
} catch(e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Stats ──
|
||||||
|
|
||||||
|
function renderStats(d) {
|
||||||
|
const total = d.total || 0;
|
||||||
|
const byStatus = {};
|
||||||
|
orders.forEach(o => { const s = o.status || 'received'; byStatus[s] = (byStatus[s]||0)+1; });
|
||||||
|
const labels = {received:'Received',confirmed:'Confirmed','hardware ready':'Ready',installing:'Installing',completed:'Completed',cancelled:'Cancelled'};
|
||||||
|
let html = '<div class="stat"><div class="num">'+total+'</div><div class="lbl">Total</div></div>';
|
||||||
|
for (const [k,v] of Object.entries(byStatus))
|
||||||
|
html += '<div class="stat"><div class="num">'+v+'</div><div class="lbl">'+(labels[k]||k)+'</div></div>';
|
||||||
|
document.getElementById('statsRow').innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function orderData(o) {
|
||||||
|
const data = {}; (o.data||[]).forEach(d => data[d.field_label] = d.field_value);
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusLabel(s) {
|
||||||
|
return {received:'Received',confirmed:'Confirmed','hardware ready':'Hardware Ready',installing:'Installing',completed:'Completed',cancelled:'Cancelled'}[s]||s;
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusBadge(s) {
|
||||||
|
return '<span class="badge badge-'+s.replace(' ','')+'">'+statusLabel(s)+'</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Render ──
|
||||||
|
|
||||||
|
function renderOrders() {
|
||||||
|
const filtered = currentFilter === 'all' ? orders : orders.filter(o => (o.status||'received') === currentFilter);
|
||||||
|
const summary = document.getElementById('orderSummary') || document.createElement('div');
|
||||||
|
if (!summary.id) { summary.id = 'orderSummary'; summary.className = 'order-summary'; document.getElementById('tabBar').after(summary); }
|
||||||
|
const isMobile = window.innerWidth < 769;
|
||||||
|
summary.textContent = filtered.length + ' order' + (filtered.length !== 1 ? 's' : '');
|
||||||
|
|
||||||
|
// Table rows (desktop)
|
||||||
|
let tHtml = '';
|
||||||
|
let cHtml = '';
|
||||||
|
filtered.forEach(o => {
|
||||||
|
const data = orderData(o);
|
||||||
|
const status = o.status || 'received';
|
||||||
|
const name = data.Name || data.name || data.email || '-';
|
||||||
|
const email = data.Email || data.email || '-';
|
||||||
|
const phone = data.Phone || data.phone || '-';
|
||||||
|
const date = (o.created_at||'').slice(0,10);
|
||||||
|
|
||||||
|
tHtml += '<tr onclick="openModal('+o.id+')">'
|
||||||
|
+ '<td style="font-weight:600">#'+o.id+'</td>'
|
||||||
|
+ '<td>'+esc(name)+'</td>'
|
||||||
|
+ '<td>'+esc(email)+'</td>'
|
||||||
|
+ '<td>'+esc(phone)+'</td>'
|
||||||
|
+ '<td>'+statusBadge(status)+'</td>'
|
||||||
|
+ '<td style="font-size:.78rem;color:var(--text-dim)">'+date+'</td>'
|
||||||
|
+ '<td style="color:var(--text-dim);font-size:.82rem">→</td>'
|
||||||
|
+ '</tr>';
|
||||||
|
|
||||||
|
cHtml += '<div class="order-card" onclick="openModal('+o.id+')">'
|
||||||
|
+ '<div class="top">'
|
||||||
|
+ '<div><span class="id">#'+o.id+'</span> '+statusBadge(status)+'</div>'
|
||||||
|
+ '<span class="date">'+date+'</span>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div class="fields">'
|
||||||
|
+ '<span class="lbl">Name</span><span class="val truncate">'+esc(name)+'</span>'
|
||||||
|
+ '<span class="lbl">Email</span><span class="val truncate">'+esc(email)+'</span>'
|
||||||
|
+ '<span class="lbl">Phone</span><span class="val">'+esc(phone)+'</span>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!filtered.length) {
|
||||||
|
tHtml = '<tr><td colspan="7"><div class="empty"><div class="icon">📋</div>'+(currentFilter==='all'?'No orders yet':'No orders with this status')+'</div></td></tr>';
|
||||||
|
cHtml = '<div class="empty"><div class="icon">📋</div>'+(currentFilter==='all'?'No orders yet':'No orders with this status')+'</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('ordersBody').innerHTML = tHtml;
|
||||||
|
document.getElementById('ordersCards').innerHTML = cHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
function esc(s) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.appendChild(document.createTextNode(s));
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Filter ──
|
||||||
|
|
||||||
|
function setFilter(f) {
|
||||||
|
currentFilter = f;
|
||||||
|
document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.filter===f));
|
||||||
|
// scroll active tab into view (mobile)
|
||||||
|
const active = document.querySelector('.tab.active');
|
||||||
|
if (active) active.scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'});
|
||||||
|
renderOrders();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Modal ──
|
||||||
|
|
||||||
|
async function openModal(id) {
|
||||||
|
currentOrderId = id;
|
||||||
|
const o = orders.find(x => x.id === id); if (!o) return;
|
||||||
|
const data = orderData(o);
|
||||||
|
document.getElementById('detailId').textContent = id;
|
||||||
|
document.getElementById('detailName').textContent = data.Name||data.name||'-';
|
||||||
|
document.getElementById('detailEmail').textContent = data.Email||data.email||'-';
|
||||||
|
document.getElementById('detailPhone').textContent = data.Phone||data.phone||'-';
|
||||||
|
document.getElementById('detailDate').textContent = o.created_at||'-';
|
||||||
|
document.getElementById('detailStatus').value = o.status||'received';
|
||||||
|
document.getElementById('noteInput').value = '';
|
||||||
|
document.getElementById('notesList').innerHTML = '<div style="color:var(--text-dim);font-size:.85rem">Loading...</div>';
|
||||||
|
document.getElementById('detailModal').classList.add('open');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
loadNotes(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
document.getElementById('detailModal').classList.remove('open');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
currentOrderId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close modal on backdrop tap
|
||||||
|
document.getElementById('detailModal').addEventListener('click', function(e) {
|
||||||
|
if (e.target === this) closeModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function updateStatus() {
|
||||||
|
const status = document.getElementById('detailStatus').value;
|
||||||
|
await fetch(API + '/admin/status', {method:'POST',headers:{'Authorization':'Bearer '+token,'Content-Type':'application/json'},body:JSON.stringify({submission_id:currentOrderId,status})});
|
||||||
|
loadOrders();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addNote() {
|
||||||
|
const note = document.getElementById('noteInput').value.trim();
|
||||||
|
if (!note) return;
|
||||||
|
await fetch(API + '/admin/notes', {method:'POST',headers:{'Authorization':'Bearer '+token,'Content-Type':'application/json'},body:JSON.stringify({submission_id:currentOrderId,note})});
|
||||||
|
document.getElementById('noteInput').value = '';
|
||||||
|
loadNotes(currentOrderId);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadNotes(id) {
|
||||||
|
const r = await fetch(API + '/admin/notes/'+id, {headers:{'Authorization':'Bearer '+token}});
|
||||||
|
if (!r.ok) return;
|
||||||
|
const notes = await r.json();
|
||||||
|
let html = notes.length ? '<div style="font-size:.85rem;font-weight:600;margin-bottom:.5rem">Notes</div>' : '<div style="color:var(--text-dim);font-size:.85rem">No notes yet.</div>';
|
||||||
|
notes.forEach(n => {
|
||||||
|
html += '<div class="note-item">'+esc(n.note||'')+'<div class="date">'+((n.created_at||'').slice(0,16))+'</div></div>';
|
||||||
|
});
|
||||||
|
document.getElementById('notesList').innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Theme ──
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
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 ? '🌙' : '☀️';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Init ──
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
fetch(API + '/admin/stats', {headers:{'Authorization':'Bearer '+token}}).then(r => {
|
||||||
|
if (r.ok) showDashboard();
|
||||||
|
}).catch(()=>{});
|
||||||
|
}
|
||||||
|
|
||||||
|
initThemeIcon();
|
||||||
|
|
||||||
|
// Re-render on resize (table ↔ cards)
|
||||||
|
let resizeTimer;
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
clearTimeout(resizeTimer);
|
||||||
|
resizeTimer = setTimeout(renderOrders, 150);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,238 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vela — Backup Drives</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<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:#e8e8ed;--text-dim:#888891;--text-muted:#5c5c66;--accent:#6c5ce7;--accent-hover:#7f6ff0;--accent-glow:rgba(108,92,231,0.15);--green:#00c951;--orange:#ff922b;--red:#ff4757;--radius:12px;--radius-sm:8px;--nav-bg:rgba(10,10,11,0.8)}
|
||||||
|
.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;--orange:#ff9500;--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}
|
||||||
|
.en .fr-only,.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)}
|
||||||
|
.nav-links a.active{color:var(--accent)}
|
||||||
|
.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(--accent);color:#fff;box-shadow:0 0 24px var(--accent-glow)}
|
||||||
|
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
|
||||||
|
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
|
||||||
|
.btn-ghost:hover{border-color:var(--border-hover);background:var(--bg-card)}
|
||||||
|
.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(108,92,231,.1);border:1px solid rgba(108,92,231,.2);font-size:.8rem;color:var(--accent);font-weight:500;margin-bottom:1.5rem;width:fit-content}
|
||||||
|
.hero h1{font-size:clamp(2rem,4vw,3.2rem);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.05rem;color:var(--text-dim);max-width:520px;margin-bottom:2rem;line-height:1.7}
|
||||||
|
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
|
||||||
|
section{padding:4rem 2rem}
|
||||||
|
.section-inner{max-width:1000px;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.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem}
|
||||||
|
.section-sub{color:var(--text-dim);font-size:1rem;max-width:600px;margin-bottom:2.5rem}
|
||||||
|
.drive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
|
||||||
|
.drive-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all .2s}
|
||||||
|
.drive-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
|
||||||
|
.drive-icon{font-size:2.2rem;margin-bottom:1rem}
|
||||||
|
.drive-name{font-size:1.2rem;font-weight:700;margin-bottom:.25rem}
|
||||||
|
.drive-type{font-size:.78rem;color:var(--accent);font-family:'Inter',monospace;margin-bottom:1rem}
|
||||||
|
.drive-specs{list-style:none}
|
||||||
|
.drive-specs li{padding:.45rem 0;font-size:.88rem;color:var(--text-dim);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem}
|
||||||
|
.drive-specs li:last-child{border-bottom:none}
|
||||||
|
.drive-specs .check{color:var(--green)}
|
||||||
|
.drive-specs .x{color:var(--red)}
|
||||||
|
.drive-price{font-size:.85rem;color:var(--text-dim);margin-top:1.25rem;display:flex;align-items:baseline;gap:.35rem}
|
||||||
|
.drive-price .amount{font-size:1.5rem;font-weight:800;color:var(--text)}
|
||||||
|
.comparison-section{background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||||
|
.compare-table{width:100%;border-collapse:collapse;overflow:hidden;display:block;overflow-x:auto}
|
||||||
|
.compare-table th,.compare-table td{text-align:left;padding:.75rem 1rem;font-size:.85rem;border-bottom:1px solid var(--border)}
|
||||||
|
.compare-table th{background:rgba(108,92,231,.08);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}
|
||||||
|
.compare-table tr:last-child td{border-bottom:none}
|
||||||
|
.compare-table .yes{color:var(--green);font-weight:600}
|
||||||
|
.compare-table .no{color:var(--red)}
|
||||||
|
.faq-item{border-bottom:1px solid var(--border);padding:1.25rem 0}
|
||||||
|
.faq-q{font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
|
||||||
|
.faq-q .arrow{transition:transform .2s;color:var(--text-dim)}
|
||||||
|
.faq-item.open .faq-q .arrow{transform:rotate(180deg)}
|
||||||
|
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;color:var(--text-dim);font-size:.9rem}
|
||||||
|
.faq-item.open .faq-a{max-height:300px}
|
||||||
|
.faq-a>div{padding-top:1rem}
|
||||||
|
.cta-section{text-align:center;padding:5rem 2rem}
|
||||||
|
.cta-section h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:1rem}
|
||||||
|
.cta-section p{color:var(--text-dim);margin-bottom:1.5rem}
|
||||||
|
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{grid-template-columns:1fr;gap:2rem}nav{padding:.75rem 1rem}.nav-links{gap:1rem}.nav-links a{font-size:.78rem}.drive-grid{grid-template-columns:1fr}}
|
||||||
|
</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');var l=(navigator.language||navigator.userLanguage||'en').slice(0,2);document.documentElement.classList.add(l==='fr'?'fr':'en')})();</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="/" class="nav-logo">VELA<span class="dot">.</span></a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="/"><span class="en-only">Home</span><span class="fr-only">Accueil</span></a>
|
||||||
|
<a href="/check-order.html"><span class="en-only">Check Order</span><span class="fr-only">Suivi</span></a>
|
||||||
|
<a href="/backup-drives.html" class="active"><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>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="hero" id="top">
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div>
|
||||||
|
<div class="hero-badge">
|
||||||
|
<span class="en-only">🛡️ Data Protection</span><span class="fr-only">🛡️ Protection des Données</span>
|
||||||
|
</div>
|
||||||
|
<h1>
|
||||||
|
<span class="en-only">Backup drives.<br><span class="highlight">Because data happens.</span></span>
|
||||||
|
<span class="fr-only">Disques de sauvegarde.<br><span class="highlight">Parce que les données comptent.</span></span>
|
||||||
|
</h1>
|
||||||
|
<p class="en-only">Every server tier can be upgraded with an automated backup drive. We handle the setup — rsync, snapshots, or whatever makes sense for your use case.</p>
|
||||||
|
<p class="fr-only">Chaque offre serveur peut être améliorée avec un disque de sauvegarde automatisé. Nous gérons la configuration — rsync, snapshots, selon vos besoins.</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a href="#drives" class="btn btn-primary"><span class="en-only">See Options →</span><span class="fr-only">Voir les options →</span></a>
|
||||||
|
<a href="/#contact" class="btn btn-ghost"><span class="en-only">Get a Quote</span><span class="fr-only">Demander un devis</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display:grid;grid-template-columns:1fr;gap:1rem">
|
||||||
|
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
|
||||||
|
<div style="font-size:2.5rem;font-weight:800;letter-spacing:-.03em;color:var(--accent)">2x</div>
|
||||||
|
<div style="font-size:.85rem;color:var(--text-dim);margin-top:.25rem"><span class="en-only">Backup tiers available</span><span class="fr-only">Offres backup disponibles</span></div>
|
||||||
|
</div>
|
||||||
|
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
|
||||||
|
<div style="font-size:2.5rem;font-weight:800;letter-spacing:-.03em;color:var(--green)">24/7</div>
|
||||||
|
<div style="font-size:.85rem;color:var(--text-dim);margin-top:.25rem"><span class="en-only">Automated, silent backups</span><span class="fr-only">Sauvegardes automatisées et silencieuses</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Drive Options -->
|
||||||
|
<section id="drives">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-label"><span class="en-only">Add-ons</span><span class="fr-only">Options</span></div>
|
||||||
|
<h2 class="section-title"><span class="en-only">Protect your data without thinking about it.</span><span class="fr-only">Protégez vos données sans y penser.</span></h2>
|
||||||
|
<p class="section-sub en-only">Add a backup drive to any server tier. We configure it, test it, and leave it running silently. You get notified if something goes wrong.</p>
|
||||||
|
<p class="section-sub fr-only">Ajoutez un disque de sauvegarde à n'importe quelle offre. Nous le configurons, le testons, et il tourne en silence. Vous êtes notifié en cas de problème.</p>
|
||||||
|
<div class="drive-grid">
|
||||||
|
<div class="drive-card">
|
||||||
|
<div class="drive-icon">💾</div>
|
||||||
|
<div class="drive-name"><span class="en-only">Backup 512</span><span class="fr-only">Backup 512</span></div>
|
||||||
|
<div class="drive-type">512 GB SSD</div>
|
||||||
|
<ul class="drive-specs">
|
||||||
|
<li><span class="check">✓</span> <span class="en-only">512 GB SATA SSD</span><span class="fr-only">512 Go SSD SATA</span></li>
|
||||||
|
<li><span class="check">✓</span> <span class="en-only">Daily automated rsync</span><span class="fr-only">Rsync automatisé quotidien</span></li>
|
||||||
|
<li><span class="check">✓</span> <span class="en-only">Snapshot retention: 7 days</span><span class="fr-only">Rétention snapshots : 7 jours</span></li>
|
||||||
|
<li><span class="check">✓</span> <span class="en-only">Email alert on failure</span><span class="fr-only">Alerte email en cas d'échec</span></li>
|
||||||
|
<li><span class="x">✗</span> <span class="en-only">Off-site backup</span><span class="fr-only">Sauvegarde hors-site</span></li>
|
||||||
|
</ul>
|
||||||
|
<div class="drive-price"><span class="en-only">Add</span><span class="fr-only">Ajout</span> <span class="amount">—</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="drive-card" style="border-color:var(--accent);background:linear-gradient(135deg,rgba(108,92,231,.06),transparent 60%)">
|
||||||
|
<div class="drive-icon">💿</div>
|
||||||
|
<div class="drive-name"><span class="en-only">Backup 1TB</span><span class="fr-only">Backup 1 To</span></div>
|
||||||
|
<div class="drive-type">1 TB SSD</div>
|
||||||
|
<ul class="drive-specs">
|
||||||
|
<li><span class="check">✓</span> <span class="en-only">1 TB SATA SSD</span><span class="fr-only">1 To SSD SATA</span></li>
|
||||||
|
<li><span class="check">✓</span> <span class="en-only">Daily automated rsync</span><span class="fr-only">Rsync automatisé quotidien</span></li>
|
||||||
|
<li><span class="check">✓</span> <span class="en-only">Snapshot retention: 14 days</span><span class="fr-only">Rétention snapshots : 14 jours</span></li>
|
||||||
|
<li><span class="check">✓</span> <span class="en-only">Email alert on failure</span><span class="fr-only">Alerte email en cas d'échec</span></li>
|
||||||
|
<li><span class="x">✗</span> <span class="en-only">Off-site backup</span><span class="fr-only">Sauvegarde hors-site</span></li>
|
||||||
|
</ul>
|
||||||
|
<div class="drive-price"><span class="en-only">Add</span><span class="fr-only">Ajout</span> <span class="amount">—</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Comparison -->
|
||||||
|
<section class="comparison-section" id="compare">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-label"><span class="en-only">At a glance</span><span class="fr-only">Comparatif</span></div>
|
||||||
|
<h2 class="section-title"><span class="en-only">Which backup fits?</span><span class="fr-only">Quel backup vous convient ?</span></h2>
|
||||||
|
<p class="section-sub en-only">Both drives are pre-configured and work out of the box. Choose based on how much data you need to protect.</p>
|
||||||
|
<p class="section-sub fr-only">Les deux disques sont pré-configurés et fonctionnent immédiatement. Choisissez selon la quantité de données à protéger.</p>
|
||||||
|
<div class="compare-table">
|
||||||
|
<table style="width:100%;border-collapse:collapse;min-width:500px">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th><span class="en-only">Feature</span><span class="fr-only">Fonctionnalité</span></th>
|
||||||
|
<th>Backup 512</th>
|
||||||
|
<th>Backup 1TB</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td style="font-weight:600"><span class="en-only">Capacity</span><span class="fr-only">Capacité</span></td><td><span class="en-only">512 GB SSD</span><span class="fr-only">512 Go SSD</span></td><td><span class="en-only">1 TB SSD</span><span class="fr-only">1 To SSD</span></td></tr>
|
||||||
|
<tr><td style="font-weight:600"><span class="en-only">Backup Method</span><span class="fr-only">Méthode</span></td><td colspan="2">rsync + snapshots (btrfs / ZFS)</td></tr>
|
||||||
|
<tr><td style="font-weight:600"><span class="en-only">Frequency</span><span class="fr-only">Fréquence</span></td><td colspan="2"><span class="en-only">Daily (configurable)</span><span class="fr-only">Quotidienne (configurable)</span></td></tr>
|
||||||
|
<tr><td style="font-weight:600"><span class="en-only">Snapshot Retention</span><span class="fr-only">Rétention</span></td><td>7 days</td><td>14 days</td></tr>
|
||||||
|
<tr><td style="font-weight:600"><span class="en-only">Failure Alerts</span><span class="fr-only">Alertes</span></td><td class="yes">✓ Email</td><td class="yes">✓ Email</td></tr>
|
||||||
|
<tr><td style="font-weight:600"><span class="en-only">Hot-swap</span><span class="fr-only">Remplacement à chaud</span></td><td class="no">✗</td><td class="yes">✓ <span class="en-only">Supported</span><span class="fr-only">Supporté</span></td></tr>
|
||||||
|
<tr><td style="font-weight:600"><span class="en-only">On-site Install</span><span class="fr-only">Installation sur place</span></td><td class="yes">✓</td><td class="yes">✓</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section style="background:var(--bg)">
|
||||||
|
<div class="section-inner" style="max-width:720px">
|
||||||
|
<div class="section-label">FAQ</div>
|
||||||
|
<h2 class="section-title"><span class="en-only">Backup questions, answered.</span><span class="fr-only">Questions backup, réponses.</span></h2>
|
||||||
|
<div class="faq-list">
|
||||||
|
<div class="faq-item" onclick="this.classList.toggle('open')">
|
||||||
|
<div class="faq-q"><span class="en-only">Can I add a backup after the server is installed?</span><span class="fr-only">Puis-je ajouter un backup après installation ?</span><span class="arrow">▾</span></div>
|
||||||
|
<div class="faq-a"><div><span class="en-only">Yes. As long as your server has a free SATA port and physical space, we can add a drive and configure it on a return visit.</span><span class="fr-only">Oui. Tant que votre serveur a un port SATA libre, nous pouvons ajouter un disque et le configurer lors d'une visite.</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item" onclick="this.classList.toggle('open')">
|
||||||
|
<div class="faq-q"><span class="en-only">What happens if the backup drive fails?</span><span class="fr-only">Que se passe-t-il si le disque backup tombe en panne ?</span><span class="arrow">▾</span></div>
|
||||||
|
<div class="faq-a"><div><span class="en-only">You get an email alert. The primary drive keeps running — your server stays up. We can replace the backup drive on-site.</span><span class="fr-only">Vous recevez une alerte email. Le disque principal continue de fonctionner. Nous remplaçons le disque backup sur place.</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item" onclick="this.classList.toggle('open')">
|
||||||
|
<div class="faq-q"><span class="en-only">Can I use the backup drive for extra storage?</span><span class="fr-only">Puis-je utiliser le backup comme stockage supplémentaire ?</span><span class="arrow">▾</span></div>
|
||||||
|
<div class="faq-a"><div><span class="en-only">It's possible, but not recommended. The backup drive is sized and configured for its job. Using it for storage can affect backup reliability.</span><span class="fr-only">Possible mais déconseillé. Le disque est dimensionné pour la sauvegarde. L'utiliser pour du stockage peut affecter sa fiabilité.</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item" onclick="this.classList.toggle('open')">
|
||||||
|
<div class="faq-q"><span class="en-only">Do I need a Plus tier to add backup?</span><span class="fr-only">Faut-il une offre Plus pour ajouter un backup ?</span><span class="arrow">▾</span></div>
|
||||||
|
<div class="faq-a"><div><span class="en-only">No. You can add a backup drive to any tier — Rif, Rif+, Atlas, or Atlas+. The Plus tiers include a backup by default.</span><span class="fr-only">Non. Vous pouvez ajouter un backup à n'importe quelle offre — Rif, Rif+, Atlas ou Atlas+. Les offres Plus incluent un backup par défaut.</span></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="cta-section" style="border-top:1px solid var(--border)">
|
||||||
|
<h2><span class="en-only">Ready to secure your data?</span><span class="fr-only">Prêt à sécuriser vos données ?</span></h2>
|
||||||
|
<p class="en-only" style="max-width:450px;margin:0 auto 1.5rem">Add a backup drive to any server tier. We'll include it in the quote.</p>
|
||||||
|
<p class="fr-only" style="max-width:450px;margin:0 auto 1.5rem">Ajoutez un disque de sauvegarde à n'importe quelle offre. Nous l'incluons dans le devis.</p>
|
||||||
|
<a href="/#contact" class="btn btn-primary"><span class="en-only">Get a Quote</span><span class="fr-only">Demander un devis</span></a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<span class="en-only">Vela — Server Installation. Simply.</span>
|
||||||
|
<span class="fr-only">Vela — Installation de serveurs. Simplement.</span>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.toggleTheme = function() {
|
||||||
|
const html = document.documentElement;
|
||||||
|
html.classList.toggle('light');
|
||||||
|
localStorage.setItem('vela_theme', html.classList.contains('light') ? 'light' : 'dark');
|
||||||
|
document.getElementById('themeToggle').textContent = html.classList.contains('light') ? '🌙' : '☀️';
|
||||||
|
};
|
||||||
|
(function() {
|
||||||
|
document.getElementById('themeToggle').textContent = document.documentElement.classList.contains('light') ? '🌙' : '☀️';
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,228 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vela — Check Order Status</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<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:#e8e8ed;--text-dim:#888891;--text-muted:#5c5c66;--accent:#6c5ce7;--accent-hover:#7f6ff0;--accent-glow:rgba(108,92,231,0.15);--green:#00c951;--red:#ff4757;--nav-bg:rgba(10,10,11,0.8);--radius:12px;--radius-sm:8px}
|
||||||
|
.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;min-height:100vh;display:flex;flex-direction:column}
|
||||||
|
.en .fr-only,.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)}
|
||||||
|
.nav-links a.active{color:var(--accent)}
|
||||||
|
.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(--accent);color:#fff;box-shadow:0 0 24px var(--accent-glow)}
|
||||||
|
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
|
||||||
|
.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}
|
||||||
|
.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6rem 1.5rem 4rem;max-width:640px;margin:0 auto;width:100%}
|
||||||
|
.page-icon{font-size:2.5rem;margin-bottom:1rem}
|
||||||
|
h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem;text-align:center}
|
||||||
|
.sub{color:var(--text-dim);text-align:center;margin-bottom:2rem;font-size:.95rem;max-width:460px}
|
||||||
|
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%}
|
||||||
|
.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;margin-bottom:1rem}
|
||||||
|
.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:16px;font-weight:400;color:var(--text);background:transparent;border:none;border-radius:10px;outline:none}
|
||||||
|
.field-input::placeholder{color:var(--text-muted)}
|
||||||
|
.status-result{padding:1.25rem;border-radius:var(--radius-sm);margin-top:1.25rem;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}
|
||||||
|
.back-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-dim);text-decoration:none;font-size:.85rem;margin-bottom:2rem;transition:color .2s}
|
||||||
|
.back-link:hover{color:var(--text)}
|
||||||
|
.remember-row{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.8rem;color:var(--text-dim);cursor:pointer;user-select:none}
|
||||||
|
.remember-row input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
|
||||||
|
footer{border-top:1px solid var(--border);padding:2rem;text-align:center;color:var(--text-muted);font-size:.8rem}
|
||||||
|
@media(max-width:768px){nav{padding:.75rem 1rem}.nav-links{gap:1rem}.nav-links a{font-size:.78rem}.main{padding:5rem 1rem 3rem}.card{padding:1.25rem}}
|
||||||
|
</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');var l=(navigator.language||navigator.userLanguage||'en').slice(0,2);document.documentElement.classList.add(l==='fr'?'fr':'en')})();</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="/" class="nav-logo">VELA<span class="dot">.</span></a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="/"><span class="en-only">Home</span><span class="fr-only">Accueil</span></a>
|
||||||
|
<a href="/check-order.html" class="active"><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>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<div class="page-icon">🔍</div>
|
||||||
|
<h1 class="en-only">Check Your Order Status</h1>
|
||||||
|
<h1 class="fr-only">Vérifier le Statut de Votre Commande</h1>
|
||||||
|
<p class="sub en-only">Enter your email and phone to see where your order is. No password needed.</p>
|
||||||
|
<p class="sub fr-only">Entrez votre email et téléphone pour suivre votre commande. Sans mot de passe.</p>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<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 number">
|
||||||
|
</div>
|
||||||
|
<label class="remember-row">
|
||||||
|
<input type="checkbox" id="rememberMe" checked>
|
||||||
|
<span class="en-only">Remember me (saves email & phone for 30 days)</span>
|
||||||
|
<span class="fr-only">Se souvenir de moi (sauvegarde email & téléphone 30 jours)</span>
|
||||||
|
</label>
|
||||||
|
<button class="btn btn-primary" id="checkBtn" style="width:100%;justify-content:center;padding:14px 24px;border-radius:10px;font-size:1rem">
|
||||||
|
<span class="en-only">Check Status</span><span class="fr-only">Vérifier</span>
|
||||||
|
</button>
|
||||||
|
<div class="status-result" id="statusResult"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<span class="en-only">Vela — Server Installation. Simply.</span>
|
||||||
|
<span class="fr-only">Vela — Installation de serveurs. Simplement.</span>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API = 'http://192.168.1.30:8581';
|
||||||
|
const COOKIE_NAME = 'vela_order_check';
|
||||||
|
const STATUSES = ['received','confirmed','hardware ready','installing','completed'];
|
||||||
|
|
||||||
|
function getCookie(name) {
|
||||||
|
const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
|
||||||
|
return match ? decodeURIComponent(match[2]) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setCookie(name, value, days) {
|
||||||
|
const d = new Date();
|
||||||
|
d.setTime(d.getTime() + days * 86400000);
|
||||||
|
document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toUTCString() + ';path=/';
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteCookie(name) {
|
||||||
|
document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Restore saved email/phone from cookie
|
||||||
|
(function() {
|
||||||
|
const saved = getCookie(COOKIE_NAME);
|
||||||
|
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) {}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
// ── Theme ──
|
||||||
|
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() {
|
||||||
|
const isLight = document.documentElement.classList.contains('light');
|
||||||
|
document.getElementById('themeToggle').textContent = isLight ? '🌙' : '☀️';
|
||||||
|
})();
|
||||||
|
|
||||||
|
// ── Check Status ──
|
||||||
|
document.getElementById('checkBtn').addEventListener('click', async function() {
|
||||||
|
const email = document.getElementById('checkEmail').value.trim();
|
||||||
|
const phone = document.getElementById('checkPhone').value.trim();
|
||||||
|
const remember = document.getElementById('rememberMe').checked;
|
||||||
|
const result = document.getElementById('statusResult');
|
||||||
|
const isFr = document.documentElement.classList.contains('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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save/clear cookie
|
||||||
|
if (remember) {
|
||||||
|
setCookie(COOKIE_NAME, JSON.stringify({email, phone}), 30);
|
||||||
|
} else {
|
||||||
|
deleteCookie(COOKIE_NAME);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resp = await fetch(API + '/api/status?email=' + encodeURIComponent(email) + '&phone=' + encodeURIComponent(phone));
|
||||||
|
if (resp.ok) {
|
||||||
|
const data = await resp.json();
|
||||||
|
let timelineHtml = '';
|
||||||
|
STATUSES.forEach((s, i) => {
|
||||||
|
const done = i <= data.status_index;
|
||||||
|
const active = i === data.status_index;
|
||||||
|
const labelsEn = {received:'Received',confirmed:'Confirmed','hardware ready':'Hardware Ready',installing:'Installing',completed:'Completed'};
|
||||||
|
const labelsFr = {received:'Reçue',confirmed:'Confirmée','hardware ready':'Matériel Prêt',installing:'Installation',completed:'Terminée'};
|
||||||
|
const label = isFr ? (labelsFr[s]||s) : (labelsEn[s]||s);
|
||||||
|
timelineHtml += '<div style="display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem;opacity:'+(done?'1':'0.3')+'"><div style="width:26px;height:26px;border-radius:50%;background:'+(done?'var(--green)':'var(--border)')+';display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;color:'+(done?'#fff':'var(--text-dim)')+'">'+(active?'●':done?'✓':'')+'</div><span style="font-size:.9rem;font-weight:'+(active?'600':'400')+'">'+label+'</span></div>';
|
||||||
|
});
|
||||||
|
if (data.status === 'cancelled') {
|
||||||
|
timelineHtml = '<div style="color:var(--red);font-weight:600;font-size:.9rem">'+(isFr?'❌ Commande annulée':'❌ Order cancelled')+'</div>';
|
||||||
|
}
|
||||||
|
const canDelete = data.status_index < 1;
|
||||||
|
const deleteBtn = canDelete
|
||||||
|
? '<button class="btn btn-sm btn-ghost" onclick="deleteOrder(\'' + email + '\',\'' + phone + '\')" style="margin-top:.75rem">🗑 ' + (isFr ? 'Supprimer ma commande' : 'Delete my order') + '</button>'
|
||||||
|
: '';
|
||||||
|
result.className = 'status-result found';
|
||||||
|
result.innerHTML = '<div style="margin-bottom:.75rem;font-size:.82rem;color:var(--text-dim)"><strong style="color:var(--text)">#'+data.id+'</strong> — '+data.created_at.slice(0,10)+'</div>'+timelineHtml+deleteBtn;
|
||||||
|
} else if (resp.status === 404) {
|
||||||
|
result.className = 'status-result not-found';
|
||||||
|
result.innerHTML = isFr ? '❌ Aucune commande trouvée avec cet email et ce numéro.' : '❌ No order found with that email and phone.';
|
||||||
|
} else {
|
||||||
|
const err = await resp.json().catch(()=>({}));
|
||||||
|
result.className = 'status-result not-found';
|
||||||
|
result.textContent = err.detail || (isFr ? 'Erreur serveur.' : 'Server error.');
|
||||||
|
}
|
||||||
|
} 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('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 + '/api/submission?email=' + encodeURIComponent(email) + '&phone=' + encodeURIComponent(phone), { method: 'DELETE' });
|
||||||
|
const result = document.getElementById('statusResult');
|
||||||
|
if (resp.ok) {
|
||||||
|
result.className = 'status-result found';
|
||||||
|
result.innerHTML = isFr ? '✅ Commande supprimée.' : '✅ Order deleted.';
|
||||||
|
// Clear cookie since order is gone
|
||||||
|
deleteCookie(COOKIE_NAME);
|
||||||
|
} else {
|
||||||
|
const err = await resp.json().catch(()=>({}));
|
||||||
|
alert(err.detail || (isFr ? 'Erreur lors de la suppression.' : 'Error deleting order.'));
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
alert(isFr ? 'Erreur de connexion.' : 'Connection error.');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Enter key support
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Enter') document.getElementById('checkBtn').click();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+687
@@ -0,0 +1,687 @@
|
|||||||
|
<!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:#e8e8ed;--text-dim:#888891;--text-muted:#5c5c66;--accent:#6c5ce7;--accent-hover:#7f6ff0;--accent-glow:rgba(108,92,231,0.15);--green:#00c951;--red:#ff4757;--radius:12px;--radius-sm:8px;--nav-bg:rgba(10,10,11,0.8)}
|
||||||
|
.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(--accent);color:#fff;box-shadow:0 0 24px var(--accent-glow)}
|
||||||
|
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
|
||||||
|
.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}
|
||||||
|
.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(108,92,231,.1);border:1px solid rgba(108,92,231,.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(108,92,231,.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}
|
||||||
|
.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(108,92,231,.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}
|
||||||
|
|
||||||
|
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 a{display:none}.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(108,92,231,.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(108,92,231,.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="#tiers"><span class="en-only">Tiers</span><span class="fr-only">Offres</span></a>
|
||||||
|
<a href="#why"><span class="en-only">Why</span><span class="fr-only">Pourquoi</span></a>
|
||||||
|
<a href="#process">Process</a>
|
||||||
|
<a href="#faq">FAQ</a>
|
||||||
|
<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-primary"><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-primary"><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-primary"><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>
|
||||||
|
<div class="step-label" id="stepLabel"><span class="en-only">Step 1 of 3</span><span class="fr-only">Étape 1 sur 3</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="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="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="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="back3"><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>
|
||||||
|
|
||||||
|
<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 = 'http://192.168.1.30:8581';
|
||||||
|
const totalSteps = 3;
|
||||||
|
let currentStep = 1;
|
||||||
|
|
||||||
|
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') }
|
||||||
|
};
|
||||||
|
|
||||||
|
function validateEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()); }
|
||||||
|
|
||||||
|
function clearErrors() {
|
||||||
|
Object.values(fields).forEach(f => {
|
||||||
|
if(f.wrapper) f.wrapper.classList.remove('error');
|
||||||
|
if(f.error) f.error.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) 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) {
|
||||||
|
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 === 3) {
|
||||||
|
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(),
|
||||||
|
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();
|
||||||
|
} 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 = ''; });
|
||||||
|
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('submitBtn').addEventListener('click', function() {
|
||||||
|
if (validateStep(3)) 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) {}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
// ── 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>
|
||||||
Reference in New Issue
Block a user