279 lines
15 KiB
PHP
279 lines
15 KiB
PHP
@props([
|
|
'analyticsId' => config('cookie-consent.analytics_id'),
|
|
'cookieName' => config('cookie-consent.cookie_name', 'cookie_consent'),
|
|
'cookieLifetime' => config('cookie-consent.cookie_lifetime', 365),
|
|
'showAnalyticsInfo' => true,
|
|
'showCurrentSettings' => true,
|
|
'showChangeButton' => true,
|
|
'colors' => config('cookie-consent.colors', []),
|
|
])
|
|
|
|
@php
|
|
$colors = array_merge(
|
|
[
|
|
'primary' => '#009bdd',
|
|
'primary_hover' => '#0071a8',
|
|
],
|
|
$colors ?? [],
|
|
);
|
|
@endphp
|
|
|
|
<div x-data="cookiePrivacyInfo({ cookieName: '{{ $cookieName }}' })" x-init="init()"
|
|
style="--cc-primary: {{ $colors['primary'] }}; --cc-primary-hover: {{ $colors['primary_hover'] }}"
|
|
{{ $attributes->merge(['class' => 'cookie-privacy-info']) }}>
|
|
{{-- Aktuelle Cookie-Einstellungen --}}
|
|
@if ($showCurrentSettings)
|
|
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
|
|
<h4 class="font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
{{ __('cookie-consent::cookie-consent.privacy_info.current_settings_title') }}
|
|
</h4>
|
|
|
|
<div class="space-y-2">
|
|
{{-- Technisch notwendig --}}
|
|
<div class="flex items-center justify-between py-2 border-b border-gray-100">
|
|
<span class="text-gray-700">
|
|
{{ __('cookie-consent::cookie-consent.privacy_info.essential_cookies') }}
|
|
</span>
|
|
<span
|
|
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
{{ __('cookie-consent::cookie-consent.status.active') }}
|
|
</span>
|
|
</div>
|
|
|
|
{{-- Analyse- und Marketing-Cookies (immer anzeigen) --}}
|
|
<div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0">
|
|
<span class="text-gray-700">
|
|
{{ __('cookie-consent::cookie-consent.privacy_info.analytics_marketing_cookies') }}
|
|
</span>
|
|
<span x-show="settings.analytics"
|
|
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
{{ __('cookie-consent::cookie-consent.status.active') }}
|
|
</span>
|
|
<span x-show="!settings.analytics"
|
|
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
|
|
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
{{ __('cookie-consent::cookie-consent.status.inactive') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Keine Einstellung vorhanden --}}
|
|
<div x-show="!hasConsented" class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
|
|
<p class="text-sm text-yellow-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
{{ __('cookie-consent::cookie-consent.status.no_consent') }}
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Button zum Ändern --}}
|
|
@if ($showChangeButton)
|
|
<div class="mt-4">
|
|
<button @click="$dispatch('open-cookie-settings')" type="button"
|
|
class="inline-flex items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200"
|
|
style="background-color: var(--cc-primary); border-color: var(--cc-primary); --tw-ring-color: var(--cc-primary)"
|
|
onmouseover="this.style.backgroundColor='var(--cc-primary-hover)'"
|
|
onmouseout="this.style.backgroundColor='var(--cc-primary)'">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
{{ __('cookie-consent::cookie-consent.buttons.change_settings') }}
|
|
</button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Google Analytics Informationen --}}
|
|
@if ($showAnalyticsInfo && $analyticsId)
|
|
<div class="prose prose-gray max-w-none">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.title') }}
|
|
</h3>
|
|
|
|
<p class="text-gray-600 mb-4">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.intro') }}
|
|
</p>
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
|
|
<h4 class="font-medium text-blue-900 mb-2">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.title') }}
|
|
</h4>
|
|
<ul class="text-sm text-blue-800 space-y-1">
|
|
<li>
|
|
<strong>{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.tracking_id') }}:</strong>
|
|
<code class="bg-blue-100 px-1 rounded">{{ $analyticsId }}</code>
|
|
</li>
|
|
<li>
|
|
<strong>{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.ip_anonymization') }}:</strong>
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.ip_anonymization_value') }}
|
|
</li>
|
|
<li>
|
|
<strong>{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.consent_mode') }}:</strong>
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.consent_mode_value') }}
|
|
</li>
|
|
<li>
|
|
<strong>{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.cookie_duration') }}:</strong>
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.technical_details.cookie_duration_value', ['days' => $cookieLifetime]) }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h4 class="font-medium text-gray-900 mt-4 mb-2">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.purpose.title') }}
|
|
</h4>
|
|
<p class="text-gray-600 mb-4">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.purpose.text') }}
|
|
</p>
|
|
|
|
<h4 class="font-medium text-gray-900 mt-4 mb-2">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.ip_anonymization.title') }}
|
|
</h4>
|
|
<p class="text-gray-600 mb-4">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.ip_anonymization.text') }}
|
|
</p>
|
|
|
|
<h4 class="font-medium text-gray-900 mt-4 mb-2">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.legal_basis.title') }}
|
|
</h4>
|
|
<p class="text-gray-600 mb-4">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.legal_basis.text') }}
|
|
</p>
|
|
|
|
<h4 class="font-medium text-gray-900 mt-4 mb-2">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.cookies.title') }}
|
|
</h4>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.cookies.table.name') }}
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.cookies.table.purpose') }}
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.cookies.table.duration') }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach (__('cookie-consent::cookie-consent.google_analytics.cookies.list') as $cookieName => $cookie)
|
|
<tr>
|
|
<td class="px-4 py-3 text-sm font-mono text-gray-900">{{ $cookieName }}</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">{{ $cookie['purpose'] }}</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">{{ $cookie['duration'] }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h4 class="font-medium text-gray-900 mt-6 mb-2">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.objection.title') }}
|
|
</h4>
|
|
<p class="text-gray-600 mb-4">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.objection.text') }}
|
|
</p>
|
|
<ul class="list-disc list-inside text-gray-600 mb-4 space-y-1">
|
|
<li>{{ __('cookie-consent::cookie-consent.google_analytics.objection.options.revoke') }}</li>
|
|
<li>
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.objection.options.addon') }}
|
|
<a href="https://tools.google.com/dlpage/gaoptout" target="_blank" rel="noopener noreferrer"
|
|
class="text-blue-600 hover:text-blue-800 underline">
|
|
tools.google.com/dlpage/gaoptout
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<h4 class="font-medium text-gray-900 mt-4 mb-2">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.more_info.title') }}
|
|
</h4>
|
|
<p class="text-gray-600">
|
|
{{ __('cookie-consent::cookie-consent.google_analytics.more_info.text') }}
|
|
<a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer"
|
|
class="text-blue-600 hover:text-blue-800 underline">
|
|
policies.google.com/privacy
|
|
</a>
|
|
</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<script>
|
|
function cookiePrivacyInfo(config) {
|
|
return {
|
|
hasConsented: false,
|
|
settings: {
|
|
analytics: false,
|
|
},
|
|
config: config,
|
|
|
|
init() {
|
|
this.loadSettings();
|
|
|
|
// Auf Änderungen lauschen (wenn Modal geschlossen wird)
|
|
window.addEventListener('cookie-consent-updated', () => {
|
|
this.loadSettings();
|
|
});
|
|
},
|
|
|
|
loadSettings() {
|
|
const saved = this.getCookie(this.config.cookieName);
|
|
|
|
if (saved) {
|
|
try {
|
|
this.settings = JSON.parse(saved);
|
|
this.hasConsented = true;
|
|
} catch (e) {
|
|
console.error('Cookie Privacy Info: Error parsing settings', e);
|
|
}
|
|
} else {
|
|
this.hasConsented = false;
|
|
this.settings = {
|
|
analytics: false
|
|
};
|
|
}
|
|
},
|
|
|
|
getCookie(name) {
|
|
const nameEQ = name + "=";
|
|
const ca = document.cookie.split(';');
|
|
for (let i = 0; i < ca.length; i++) {
|
|
let c = ca[i].trim();
|
|
if (c.indexOf(nameEQ) === 0) {
|
|
return decodeURIComponent(c.substring(nameEQ.length));
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
</script>
|