fix: cleaner nav (no same-page links), GDPR cookie banner on all pages, order submit saves cookie
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user