Add cookie consent banner and settings: Implemented a cookie consent banner in the footer with options for accepting all cookies, essential cookies, and accessing settings. Added corresponding CSS styles for the banner and settings panel, enhancing user experience and compliance with privacy regulations.
This commit is contained in:
TheOnlyMace
@@ -1854,4 +1854,293 @@ body {
|
|||||||
.legal-hero {
|
.legal-hero {
|
||||||
padding: calc(var(--header-height) + var(--spacing-xl)) 0 var(--spacing-xl);
|
padding: calc(var(--header-height) + var(--spacing-xl)) 0 var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================
|
||||||
|
COOKIE CONSENT BANNER
|
||||||
|
========================================== */
|
||||||
|
|
||||||
|
.cookie-consent {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
background: rgba(13, 8, 33, 0.98);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-top: 1px solid var(--glass-border);
|
||||||
|
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
|
||||||
|
transform: translateY(100%);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent.show {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent.hide {
|
||||||
|
transform: translateY(100%);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--spacing-xl) var(--spacing-lg);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
flex: 1;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-icon svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-text h3 {
|
||||||
|
font-size: var(--font-size-lg);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-text p {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-text a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-text a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-actions .btn {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border: none;
|
||||||
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cookie Settings Panel */
|
||||||
|
.cookie-settings-panel {
|
||||||
|
border-top: 1px solid var(--glass-border);
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
animation: slideDown 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--spacing-xl) var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-content h4 {
|
||||||
|
font-size: var(--font-size-lg);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--spacing-md) 0;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option:last-of-type {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option-info {
|
||||||
|
flex: 1;
|
||||||
|
padding-right: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option-info strong {
|
||||||
|
display: block;
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option-info p {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cookie Toggle Switch */
|
||||||
|
.cookie-toggle {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 52px;
|
||||||
|
height: 28px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-toggle input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-toggle-slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 28px;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-toggle-slider::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
|
left: 3px;
|
||||||
|
bottom: 3px;
|
||||||
|
background: var(--text-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-toggle input:checked + .cookie-toggle-slider {
|
||||||
|
background: linear-gradient(135deg, var(--primary-color), var(--accent-color-1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-toggle input:checked + .cookie-toggle-slider::before {
|
||||||
|
transform: translateX(24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-toggle.disabled .cookie-toggle-slider {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-toggle input:focus + .cookie-toggle-slider {
|
||||||
|
box-shadow: 0 0 0 3px rgba(255, 81, 249, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: var(--spacing-xl);
|
||||||
|
padding-top: var(--spacing-lg);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cookie Consent Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.cookie-consent-container {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-content {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-consent-actions .btn {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-actions .btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option-info {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
322
public/assets/js/cookie-consent.js
Normal file
322
public/assets/js/cookie-consent.js
Normal file
@@ -0,0 +1,322 @@
|
|||||||
|
/**
|
||||||
|
* Cookie Consent Manager für HexaHost.de
|
||||||
|
* DSGVO-konformes Cookie-Banner mit granularen Einstellungen
|
||||||
|
*/
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Cookie-Konfiguration
|
||||||
|
const COOKIE_NAME = 'hexahost_cookie_consent';
|
||||||
|
const COOKIE_EXPIRY_DAYS = 365;
|
||||||
|
|
||||||
|
// DOM-Elemente
|
||||||
|
const banner = document.getElementById('cookieConsent');
|
||||||
|
const settingsPanel = document.getElementById('cookieSettingsPanel');
|
||||||
|
const acceptAllBtn = document.getElementById('cookieAcceptAll');
|
||||||
|
const acceptEssentialBtn = document.getElementById('cookieAcceptEssential');
|
||||||
|
const settingsBtn = document.getElementById('cookieSettings');
|
||||||
|
const saveSettingsBtn = document.getElementById('cookieSaveSettings');
|
||||||
|
const closeSettingsBtn = document.getElementById('cookieCloseSettings');
|
||||||
|
const analyticsCheckbox = document.getElementById('cookieAnalytics');
|
||||||
|
const marketingCheckbox = document.getElementById('cookieMarketing');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cookie-Hilfsfunktionen
|
||||||
|
*/
|
||||||
|
const CookieUtils = {
|
||||||
|
set: function(name, value, days) {
|
||||||
|
const date = new Date();
|
||||||
|
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||||
|
const expires = 'expires=' + date.toUTCString();
|
||||||
|
document.cookie = name + '=' + JSON.stringify(value) + ';' + expires + ';path=/;SameSite=Lax;Secure';
|
||||||
|
},
|
||||||
|
|
||||||
|
get: function(name) {
|
||||||
|
const nameEQ = name + '=';
|
||||||
|
const cookies = document.cookie.split(';');
|
||||||
|
for (let i = 0; i < cookies.length; i++) {
|
||||||
|
let cookie = cookies[i].trim();
|
||||||
|
if (cookie.indexOf(nameEQ) === 0) {
|
||||||
|
try {
|
||||||
|
return JSON.parse(cookie.substring(nameEQ.length));
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
delete: function(name) {
|
||||||
|
document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cookie Consent Manager
|
||||||
|
*/
|
||||||
|
const CookieConsent = {
|
||||||
|
// Standardeinstellungen
|
||||||
|
defaultConsent: {
|
||||||
|
essential: true, // Immer aktiviert
|
||||||
|
analytics: false,
|
||||||
|
marketing: false,
|
||||||
|
timestamp: null
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialisierung
|
||||||
|
*/
|
||||||
|
init: function() {
|
||||||
|
if (!banner) return;
|
||||||
|
|
||||||
|
const consent = this.getConsent();
|
||||||
|
|
||||||
|
if (consent && consent.timestamp) {
|
||||||
|
// Consent bereits gegeben - Banner verstecken
|
||||||
|
this.hideBanner();
|
||||||
|
this.applyConsent(consent);
|
||||||
|
} else {
|
||||||
|
// Zeige Banner
|
||||||
|
this.showBanner();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.bindEvents();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event-Listener binden
|
||||||
|
*/
|
||||||
|
bindEvents: function() {
|
||||||
|
if (acceptAllBtn) {
|
||||||
|
acceptAllBtn.addEventListener('click', () => this.acceptAll());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (acceptEssentialBtn) {
|
||||||
|
acceptEssentialBtn.addEventListener('click', () => this.acceptEssential());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (settingsBtn) {
|
||||||
|
settingsBtn.addEventListener('click', () => this.showSettings());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (saveSettingsBtn) {
|
||||||
|
saveSettingsBtn.addEventListener('click', () => this.saveSettings());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (closeSettingsBtn) {
|
||||||
|
closeSettingsBtn.addEventListener('click', () => this.hideSettings());
|
||||||
|
}
|
||||||
|
|
||||||
|
// ESC-Taste zum Schließen der Einstellungen
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape' && settingsPanel && settingsPanel.style.display !== 'none') {
|
||||||
|
this.hideSettings();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Alle Cookies akzeptieren
|
||||||
|
*/
|
||||||
|
acceptAll: function() {
|
||||||
|
const consent = {
|
||||||
|
essential: true,
|
||||||
|
analytics: true,
|
||||||
|
marketing: true,
|
||||||
|
timestamp: new Date().toISOString()
|
||||||
|
};
|
||||||
|
this.saveConsent(consent);
|
||||||
|
this.hideBanner();
|
||||||
|
this.applyConsent(consent);
|
||||||
|
this.showNotification('Alle Cookies wurden akzeptiert.', 'success');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Nur essenzielle Cookies akzeptieren
|
||||||
|
*/
|
||||||
|
acceptEssential: function() {
|
||||||
|
const consent = {
|
||||||
|
essential: true,
|
||||||
|
analytics: false,
|
||||||
|
marketing: false,
|
||||||
|
timestamp: new Date().toISOString()
|
||||||
|
};
|
||||||
|
this.saveConsent(consent);
|
||||||
|
this.hideBanner();
|
||||||
|
this.applyConsent(consent);
|
||||||
|
this.showNotification('Nur notwendige Cookies wurden akzeptiert.', 'info');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Einstellungen speichern
|
||||||
|
*/
|
||||||
|
saveSettings: function() {
|
||||||
|
const consent = {
|
||||||
|
essential: true,
|
||||||
|
analytics: analyticsCheckbox ? analyticsCheckbox.checked : false,
|
||||||
|
marketing: marketingCheckbox ? marketingCheckbox.checked : false,
|
||||||
|
timestamp: new Date().toISOString()
|
||||||
|
};
|
||||||
|
this.saveConsent(consent);
|
||||||
|
this.hideSettings();
|
||||||
|
this.hideBanner();
|
||||||
|
this.applyConsent(consent);
|
||||||
|
this.showNotification('Cookie-Einstellungen wurden gespeichert.', 'success');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Consent im Cookie speichern
|
||||||
|
*/
|
||||||
|
saveConsent: function(consent) {
|
||||||
|
CookieUtils.set(COOKIE_NAME, consent, COOKIE_EXPIRY_DAYS);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Consent aus Cookie lesen
|
||||||
|
*/
|
||||||
|
getConsent: function() {
|
||||||
|
return CookieUtils.get(COOKIE_NAME);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Consent anwenden (z.B. Analytics laden)
|
||||||
|
*/
|
||||||
|
applyConsent: function(consent) {
|
||||||
|
// Dispatch Custom Event für andere Scripts
|
||||||
|
window.dispatchEvent(new CustomEvent('cookieConsentUpdated', {
|
||||||
|
detail: consent
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Analytics aktivieren/deaktivieren
|
||||||
|
if (consent.analytics) {
|
||||||
|
this.enableAnalytics();
|
||||||
|
} else {
|
||||||
|
this.disableAnalytics();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Marketing aktivieren/deaktivieren
|
||||||
|
if (consent.marketing) {
|
||||||
|
this.enableMarketing();
|
||||||
|
} else {
|
||||||
|
this.disableMarketing();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Analytics aktivieren (Placeholder für z.B. Google Analytics)
|
||||||
|
*/
|
||||||
|
enableAnalytics: function() {
|
||||||
|
// Hier können Analytics-Scripts geladen werden
|
||||||
|
// Beispiel für Google Analytics:
|
||||||
|
// if (typeof gtag === 'undefined') {
|
||||||
|
// const script = document.createElement('script');
|
||||||
|
// script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID';
|
||||||
|
// script.async = true;
|
||||||
|
// document.head.appendChild(script);
|
||||||
|
// }
|
||||||
|
console.log('Analytics enabled');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Analytics deaktivieren
|
||||||
|
*/
|
||||||
|
disableAnalytics: function() {
|
||||||
|
// Analytics-Cookies entfernen falls vorhanden
|
||||||
|
console.log('Analytics disabled');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Marketing aktivieren (Placeholder für Marketing-Tools)
|
||||||
|
*/
|
||||||
|
enableMarketing: function() {
|
||||||
|
console.log('Marketing enabled');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Marketing deaktivieren
|
||||||
|
*/
|
||||||
|
disableMarketing: function() {
|
||||||
|
console.log('Marketing disabled');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Banner anzeigen
|
||||||
|
*/
|
||||||
|
showBanner: function() {
|
||||||
|
if (banner) {
|
||||||
|
banner.classList.add('show');
|
||||||
|
banner.setAttribute('aria-hidden', 'false');
|
||||||
|
// Fokus auf ersten Button setzen für Accessibility
|
||||||
|
setTimeout(() => {
|
||||||
|
if (acceptAllBtn) acceptAllBtn.focus();
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Banner verstecken
|
||||||
|
*/
|
||||||
|
hideBanner: function() {
|
||||||
|
if (banner) {
|
||||||
|
banner.classList.remove('show');
|
||||||
|
banner.classList.add('hide');
|
||||||
|
banner.setAttribute('aria-hidden', 'true');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Einstellungen-Panel anzeigen
|
||||||
|
*/
|
||||||
|
showSettings: function() {
|
||||||
|
if (settingsPanel) {
|
||||||
|
// Aktuelle Einstellungen in Checkboxen laden
|
||||||
|
const consent = this.getConsent() || this.defaultConsent;
|
||||||
|
if (analyticsCheckbox) analyticsCheckbox.checked = consent.analytics;
|
||||||
|
if (marketingCheckbox) marketingCheckbox.checked = consent.marketing;
|
||||||
|
|
||||||
|
settingsPanel.style.display = 'block';
|
||||||
|
settingsPanel.setAttribute('aria-hidden', 'false');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Einstellungen-Panel verstecken
|
||||||
|
*/
|
||||||
|
hideSettings: function() {
|
||||||
|
if (settingsPanel) {
|
||||||
|
settingsPanel.style.display = 'none';
|
||||||
|
settingsPanel.setAttribute('aria-hidden', 'true');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Notification anzeigen (nutzt HexaHost-Notification-System falls verfügbar)
|
||||||
|
*/
|
||||||
|
showNotification: function(message, type) {
|
||||||
|
if (window.HexaHost && typeof window.HexaHost.showNotification === 'function') {
|
||||||
|
window.HexaHost.showNotification(message, type);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Consent zurücksetzen (für Datenschutz-Link)
|
||||||
|
*/
|
||||||
|
resetConsent: function() {
|
||||||
|
CookieUtils.delete(COOKIE_NAME);
|
||||||
|
this.showBanner();
|
||||||
|
if (settingsPanel) settingsPanel.style.display = 'none';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialisierung wenn DOM geladen
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', () => CookieConsent.init());
|
||||||
|
} else {
|
||||||
|
CookieConsent.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Globaler Zugriff für manuelle Steuerung
|
||||||
|
window.CookieConsent = CookieConsent;
|
||||||
|
|
||||||
|
})();
|
||||||
@@ -47,10 +47,83 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="assets/js/main.js"></script>
|
<!-- Cookie Consent Banner -->
|
||||||
|
<div id="cookieConsent" class="cookie-consent" role="dialog" aria-labelledby="cookieConsentTitle" aria-describedby="cookieConsentDesc">
|
||||||
|
<div class="cookie-consent-container">
|
||||||
|
<div class="cookie-consent-content">
|
||||||
|
<div class="cookie-consent-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<circle cx="8" cy="9" r="1" fill="currentColor"/>
|
||||||
|
<circle cx="15" cy="8" r="1" fill="currentColor"/>
|
||||||
|
<circle cx="10" cy="14" r="1" fill="currentColor"/>
|
||||||
|
<circle cx="16" cy="13" r="1" fill="currentColor"/>
|
||||||
|
<circle cx="13" cy="17" r="1" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cookie-consent-text">
|
||||||
|
<h3 id="cookieConsentTitle">Cookie-Einstellungen</h3>
|
||||||
|
<p id="cookieConsentDesc">
|
||||||
|
Wir verwenden Cookies, um Ihnen die bestmögliche Erfahrung auf unserer Website zu bieten.
|
||||||
|
Technisch notwendige Cookies sind für die Funktionalität erforderlich.
|
||||||
|
<a href="/datenschutz">Mehr erfahren</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cookie-consent-actions">
|
||||||
|
<button type="button" id="cookieAcceptAll" class="btn btn-primary">Alle akzeptieren</button>
|
||||||
|
<button type="button" id="cookieAcceptEssential" class="btn btn-secondary">Nur notwendige</button>
|
||||||
|
<button type="button" id="cookieSettings" class="btn btn-text">Einstellungen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Erweiterte Cookie-Einstellungen (standardmäßig versteckt) -->
|
||||||
|
<div id="cookieSettingsPanel" class="cookie-settings-panel" style="display: none;">
|
||||||
|
<div class="cookie-settings-content">
|
||||||
|
<h4>Cookie-Einstellungen</h4>
|
||||||
|
<div class="cookie-option">
|
||||||
|
<div class="cookie-option-info">
|
||||||
|
<strong>Notwendige Cookies</strong>
|
||||||
|
<p>Diese Cookies sind für die Grundfunktionen der Website erforderlich.</p>
|
||||||
|
</div>
|
||||||
|
<label class="cookie-toggle disabled">
|
||||||
|
<input type="checkbox" checked disabled>
|
||||||
|
<span class="cookie-toggle-slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="cookie-option">
|
||||||
|
<div class="cookie-option-info">
|
||||||
|
<strong>Analyse-Cookies</strong>
|
||||||
|
<p>Helfen uns zu verstehen, wie Besucher unsere Website nutzen.</p>
|
||||||
|
</div>
|
||||||
|
<label class="cookie-toggle">
|
||||||
|
<input type="checkbox" id="cookieAnalytics">
|
||||||
|
<span class="cookie-toggle-slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="cookie-option">
|
||||||
|
<div class="cookie-option-info">
|
||||||
|
<strong>Marketing-Cookies</strong>
|
||||||
|
<p>Werden verwendet, um relevante Werbung anzuzeigen.</p>
|
||||||
|
</div>
|
||||||
|
<label class="cookie-toggle">
|
||||||
|
<input type="checkbox" id="cookieMarketing">
|
||||||
|
<span class="cookie-toggle-slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="cookie-settings-actions">
|
||||||
|
<button type="button" id="cookieSaveSettings" class="btn btn-primary">Einstellungen speichern</button>
|
||||||
|
<button type="button" id="cookieCloseSettings" class="btn btn-secondary">Abbrechen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="assets/js/main.js" defer></script>
|
||||||
|
<script src="assets/js/cookie-consent.js" defer></script>
|
||||||
<?php if (isset($additional_scripts)): ?>
|
<?php if (isset($additional_scripts)): ?>
|
||||||
<?php foreach ($additional_scripts as $script): ?>
|
<?php foreach ($additional_scripts as $script): ?>
|
||||||
<script src="<?php echo $script; ?>"></script>
|
<script src="<?php echo $script; ?>" defer></script>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -3,13 +3,59 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title><?php echo isset($page_title) ? $page_title : 'HexaHost.de - Zuverlässiges Hosting aus Niederbayern'; ?></title>
|
|
||||||
<link rel="stylesheet" href="assets/css/style.css">
|
<!-- Performance: DNS Prefetch & Preconnect -->
|
||||||
|
<link rel="dns-prefetch" href="//fonts.googleapis.com">
|
||||||
|
<link rel="dns-prefetch" href="//fonts.gstatic.com">
|
||||||
|
<link rel="dns-prefetch" href="//cdn.hexahost.de">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link rel="preconnect" href="https://cdn.hexahost.de" crossorigin>
|
||||||
|
|
||||||
|
<!-- Performance: Preload kritischer Ressourcen -->
|
||||||
|
<link rel="preload" href="assets/css/style.css" as="style">
|
||||||
|
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style">
|
||||||
|
|
||||||
|
<title><?php echo isset($page_title) ? htmlspecialchars($page_title) : 'HexaHost.de - Zuverlässiges Hosting aus Niederbayern'; ?></title>
|
||||||
|
|
||||||
|
<!-- SEO Meta Tags -->
|
||||||
|
<meta name="description" content="<?php echo isset($page_description) ? htmlspecialchars($page_description) : 'HexaHost.de - Zuverlässiges und preiswertes Hosting aus Niederbayern. VPS, VPC, Mail Gateway und Webhosting Lösungen.'; ?>">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="author" content="HexaHost.de">
|
||||||
|
<meta name="theme-color" content="#0d0821">
|
||||||
|
|
||||||
|
<!-- Open Graph / Social Media -->
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:site_name" content="HexaHost.de">
|
||||||
|
<meta property="og:title" content="<?php echo isset($page_title) ? htmlspecialchars($page_title) : 'HexaHost.de'; ?>">
|
||||||
|
<meta property="og:description" content="<?php echo isset($page_description) ? htmlspecialchars($page_description) : 'Zuverlässiges Hosting aus Niederbayern'; ?>">
|
||||||
|
<meta property="og:locale" content="de_DE">
|
||||||
|
|
||||||
|
<!-- Performance: Critical CSS (inline für schnelleres Rendering) -->
|
||||||
|
<style>
|
||||||
|
/* Critical CSS - Above the fold styles */
|
||||||
|
*{margin:0;padding:0;box-sizing:border-box}
|
||||||
|
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0d0821;color:#fff;overflow-x:hidden}
|
||||||
|
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(13,8,33,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1)}
|
||||||
|
.nav-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:70px}
|
||||||
|
.hero{padding:120px 0 80px;min-height:100vh;display:flex;align-items:center}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- Main Stylesheet -->
|
||||||
|
<link rel="stylesheet" href="assets/css/style.css" media="print" onload="this.media='all'">
|
||||||
|
<noscript><link rel="stylesheet" href="assets/css/style.css"></noscript>
|
||||||
|
|
||||||
|
<!-- Fonts mit font-display: swap für bessere Performance -->
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
<meta name="description" content="<?php echo isset($page_description) ? $page_description : 'HexaHost.de - Zuverlässiges und preiswertes Hosting aus Niederbayern. VPS, VPC, Mail Gateway und Webhosting Lösungen.'; ?>">
|
<link rel="apple-touch-icon" href="favicon.svg">
|
||||||
|
|
||||||
|
<!-- Canonical URL (falls gesetzt) -->
|
||||||
|
<?php if (isset($canonical_url)): ?>
|
||||||
|
<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
|
||||||
|
<?php endif; ?>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
|
|||||||
Reference in New Issue
Block a user