Files
ntspi-app/resources/js/Pages/Dashboard/Components/shared/ConsentBanner.vue
T

69 lines
2.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<transition
enter-active-class="transition-opacity duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity duration-200"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div
v-if="visible"
class="fixed bottom-0 inset-x-0 z-50 p-4 sm:p-6"
>
<div class="max-w-3xl mx-auto bg-layer border border-layer-line rounded-lg shadow-lg p-5">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div class="flex-1">
<p class="text-xs text-muted-foreground-1 leading-relaxed">
Наш сайт использует файлы cookie и сервисы веб-аналитики для сбора технических данных посетителей с целью улучшения работы ресурса. Продолжая использовать сайт, вы соглашаетесь с условиями <a href="https://uspu.ru/sveden/files/1ND-11_Politika_v_otnoshenii_obrabotki_personalynyx_dannyx.pdf" target="_blank" class="underline hover:text-primary">Политики в отношении обработки персональных данных УрГПУ</a>. Вы можете отключить файлы cookie в настройках браузера.
</p>
</div>
<div class="flex items-center gap-2 flex-shrink-0">
<button
@click="decline"
class="px-3 py-1.5 text-xs font-medium text-muted-foreground-1 hover:text-foreground border border-layer-line rounded-md transition-colors"
>
Отклонить
</button>
<button
@click="accept"
class="px-3 py-1.5 text-xs font-medium text-white bg-primary hover:bg-primary/90 rounded-md transition-colors"
>
Принять
</button>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
import { getConsent } from '@/services/analytics.js';
export default {
name: 'ConsentBanner',
data() {
return {
visible: false,
};
},
mounted() {
const consent = getConsent();
if (!consent) {
this.visible = true;
}
},
methods: {
accept() {
localStorage.setItem('analytics_consent', 'granted');
this.visible = false;
},
decline() {
localStorage.setItem('analytics_consent', 'denied');
this.visible = false;
},
},
};
</script>