From b328f1467d7a80b8f591b44a0b3c3159fa7dec89 Mon Sep 17 00:00:00 2001
From: root <root@vela.local>
Date: Sat, 20 Jun 2026 17:36:07 +0000
Subject: [PATCH] fix: cleaner nav (no same-page links), GDPR cookie banner on
 all pages, order submit saves cookie

---
 backup-drives.html | 29 +++++++++++++++++++++++++++++
 check-order.html   | 20 ++++++++++++++++++++
 index.html         | 32 ++++++++++++++++++++++++++++----
 3 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/backup-drives.html b/backup-drives.html
index 881672a..622f16d 100644
--- a/backup-drives.html
+++ b/backup-drives.html
@@ -70,6 +70,10 @@
   .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}}
+  .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>
@@ -218,6 +222,13 @@
   <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>
 
+<!-- ── GDPR Cookie Banner ── -->
+<div class="cookie-banner" id="cookieBanner">
+  <p class="en-only">🍪 This site uses cookies to remember your preferences.</p>
+  <p class="fr-only">🍪 Ce site utilise des cookies pour mémoriser vos 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>
@@ -233,6 +244,24 @@ window.toggleTheme = function() {
 (function() {
   document.getElementById('themeToggle').textContent = document.documentElement.classList.contains('light') ? '🌙' : '☀️';
 })();
+
+// ── Cookie helpers for GDPR ──
+function getBannerCookie(name) {
+  const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
+  return m ? decodeURIComponent(m[2]) : null;
+}
+function setBannerCookie(name, value, days) {
+  const d = new Date();
+  d.setTime(d.getTime() + days * 86400000);
+  document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toUTCString() + ';path=/';
+}
+window.acceptCookies = function() {
+  setBannerCookie('vela_gdpr_consent', 'accepted', 365);
+  document.getElementById('cookieBanner').classList.remove('show');
+};
+if (!getBannerCookie('vela_gdpr_consent')) {
+  document.getElementById('cookieBanner').classList.add('show');
+}
 </script>
 </body>
 </html>
diff --git a/check-order.html b/check-order.html
index abd7901..7c4a5dc 100644
--- a/check-order.html
+++ b/check-order.html
@@ -49,6 +49,10 @@
   .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>
@@ -92,6 +96,13 @@
   </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>
@@ -223,6 +234,15 @@ window.deleteOrder = async function(email, phone) {
 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>
diff --git a/index.html b/index.html
index 03fd126..edd709a 100644
--- a/index.html
+++ b/index.html
@@ -135,6 +135,15 @@
   .status-result.not-found{display:block;background:rgba(255,71,87,.08);border:1px solid rgba(255,71,87,.2)}
   .status-result .btn{margin-top:1rem}
 
+  /* ── GDPR Cookie Banner ── */
+  .cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--bg-card);border-top:1px solid var(--border);padding:1rem 1.5rem;display:none;align-items:center;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--text-dim);backdrop-filter:blur(12px)}
+  .cookie-banner.show{display:flex}
+  .cookie-banner p{max-width:600px;line-height:1.5}
+  .cookie-banner a{color:var(--accent);text-decoration:none}
+  .cookie-btn{padding:.45rem 1.2rem;border-radius:6px;border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
+  .cookie-btn:hover{background:var(--accent-hover)}
+  .cookie-btn:active{transform:scale(.96)}
+
   footer{border-top:1px solid var(--border);padding:2rem;text-align:center;color:var(--text-muted);font-size:.8rem}
   @media(max-width:768px){.hero-grid,.form-inner{grid-template-columns:1fr;gap:2rem}.hero-stats{grid-template-columns:1fr 1fr}.nav-links{gap:.75rem}.nav-links a,.theme-btn,.nav-links .btn{font-size:.75rem;padding:.35rem .65rem}.tiers-grid,.why-grid,.process-steps{grid-template-columns:1fr}}
   .glow{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(108,92,231,.06) 0%,transparent 70%);pointer-events:none;z-index:-1;top:-200px;right:-200px}
@@ -150,10 +159,6 @@
 <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>
@@ -420,6 +425,13 @@
   </div>
 </section>
 
+<!-- ── GDPR Cookie Banner ── -->
+<div class="cookie-banner" id="cookieBanner">
+  <p class="en-only">🍪 This site uses cookies to remember your order details and preferences. <a href="/backup-drives.html">Learn more</a></p>
+  <p class="fr-only">🍪 Ce site utilise des cookies pour mémoriser vos commandes et préférences. <a href="/backup-drives.html">En savoir plus</a></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>
@@ -526,6 +538,8 @@
       });
       if (resp.ok) {
         showSuccess();
+        // Save email/phone to cookie so order check is remembered
+        setVelaCookie(STATUS_COOKIE, JSON.stringify({email: payload.email, phone: payload.phone}), 30);
       } else {
         const isFr = document.documentElement.classList.contains('lang-fr');
         alert(isFr ? 'Échec de l\'envoi. Réessayez.' : 'Submission failed. Please try again.');
@@ -601,6 +615,16 @@
     }
   })();
 
+  // ── GDPR Cookie Consent ──
+  window.acceptCookies = function() {
+    setVelaCookie('vela_gdpr_consent', 'accepted', 365);
+    document.getElementById('cookieBanner').classList.remove('show');
+  };
+  // Show banner if no consent given yet
+  if (!getVelaCookie('vela_gdpr_consent')) {
+    document.getElementById('cookieBanner').classList.add('show');
+  }
+
   // ── Check Order Status ──
   document.getElementById('checkStatusBtn').addEventListener('click', async function() {
     const email = document.getElementById('checkEmail').value.trim();