fix: cleaner nav (no same-page links), GDPR cookie banner on all pages, order submit saves cookie

This commit is contained in:
root
2026-06-20 17:36:07 +00:00
parent fb576517e0
commit b328f1467d
3 changed files with 77 additions and 4 deletions
+29
View File
@@ -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>
+20
View File
@@ -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>
+28 -4
View File
@@ -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();