249 lines
15 KiB
HTML
249 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vela — 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}}
|
|
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--bg-card);border-top:1px solid var(--border);padding:1rem 1.5rem;display:none;align-items:center;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--text-dim);backdrop-filter:blur(12px)}
|
|
.cookie-banner.show{display:flex}.cookie-banner p{max-width:600px;line-height:1.5}.cookie-banner a{color:var(--accent);text-decoration:none}
|
|
.cookie-btn{padding:.45rem 1.2rem;border-radius:6px;border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
|
|
.cookie-btn:hover{background:var(--accent-hover)}
|
|
</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>
|
|
|
|
<!-- ── GDPR Cookie Banner ── -->
|
|
<div class="cookie-banner" id="cookieBanner">
|
|
<p class="en-only">🍪 This site uses cookies to remember your order details and preferences.</p>
|
|
<p class="fr-only">🍪 Ce site utilise des cookies pour mémoriser vos commandes et préférences.</p>
|
|
<button class="cookie-btn" onclick="acceptCookies()"><span class="en-only">Accept</span><span class="fr-only">Accepter</span></button>
|
|
</div>
|
|
|
|
<footer>
|
|
<span class="en-only">Vela — Server Installation. Simply.</span>
|
|
<span class="fr-only">Vela — Installation de serveurs. Simplement.</span>
|
|
</footer>
|
|
|
|
<script>
|
|
const API = 'http://192.168.1.126: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();
|
|
});
|
|
|
|
// ── GDPR Cookie Consent ──
|
|
window.acceptCookies = function() {
|
|
setCookie('vela_gdpr_consent', 'accepted', 365);
|
|
document.getElementById('cookieBanner').classList.remove('show');
|
|
};
|
|
if (!getCookie('vela_gdpr_consent')) {
|
|
document.getElementById('cookieBanner').classList.add('show');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|