feat: standalone check-order page, backup drives page, nav links, cookies, confirmed-order delete guard
This commit is contained in:
Binary file not shown.
@@ -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>
|
||||
+658
-659
File diff suppressed because it is too large
Load Diff
@@ -371,6 +371,13 @@ def delete_submission(email: str = "", phone: str = ""):
|
||||
db.close()
|
||||
raise HTTPException(404, "No submission found with that email and phone")
|
||||
sub_id = rows[0]["id"]
|
||||
# Get current status
|
||||
sub = db.execute("SELECT status FROM submissions WHERE id = ?", (sub_id,)).fetchone()
|
||||
if sub:
|
||||
status_idx = STATUSES.index(sub["status"]) if sub["status"] in STATUSES else 0
|
||||
if status_idx >= STATUSES.index("confirmed"):
|
||||
db.close()
|
||||
raise HTTPException(400, "This order has already been confirmed and can no longer be deleted. Contact us via WhatsApp or Telegram.")
|
||||
db.execute("DELETE FROM submission_tags WHERE submission_id = ?", (sub_id,))
|
||||
db.execute("DELETE FROM reply_drafts WHERE submission_id = ?", (sub_id,))
|
||||
db.execute("DELETE FROM submission_data WHERE submission_id = ?", (sub_id,))
|
||||
|
||||
Reference in New Issue
Block a user