🎲 Add Pinia progression store & GDPR consent banner (Story 1.6)
Implements useProgressionStore with conditional localStorage persistence (only after RGPD consent), immersive ConsentBanner with narrator style, WelcomeBack component for returning visitors, and connects progress bar in header to store. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
74
frontend/app/components/layout/WelcomeBack.vue
Normal file
74
frontend/app/components/layout/WelcomeBack.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<Transition name="welcome">
|
||||
<div
|
||||
v-if="visible"
|
||||
class="fixed top-20 right-4 z-40 max-w-sm p-4 bg-sky-dark/95 backdrop-blur-sm border border-sky-accent/30 rounded-xl shadow-lg"
|
||||
role="status"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="text-2xl shrink-0" aria-hidden="true">🕷️</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-narrative text-sky-text text-sm mb-3">
|
||||
{{ $t('welcome_back.message') }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="px-4 py-1.5 bg-sky-accent text-sky-dark font-ui text-sm font-semibold rounded-lg hover:opacity-90 transition-opacity"
|
||||
@click="dismiss"
|
||||
>
|
||||
{{ $t('welcome_back.continue') }}
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-1.5 text-sky-text/70 hover:text-sky-text font-ui text-sm transition-colors"
|
||||
@click="restart"
|
||||
>
|
||||
{{ $t('welcome_back.restart') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useProgressionStore } from '~/stores/progression'
|
||||
|
||||
const store = useProgressionStore()
|
||||
const visible = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (store.hasExistingProgress) {
|
||||
visible.value = true
|
||||
}
|
||||
})
|
||||
|
||||
function dismiss() {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
function restart() {
|
||||
store.$reset()
|
||||
visible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.welcome-enter-active,
|
||||
.welcome-leave-active {
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.welcome-enter-from,
|
||||
.welcome-leave-to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.welcome-enter-active,
|
||||
.welcome-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user