skycel
64b1a33d10
- Add ZoneCard component for zone display with status indicators - Add CheminLibre drawer with vertical zone cards and path decoration - Add BottomBar with Map, Progress, and Settings buttons - Add ProgressDetail modal showing visited sections - Add SettingsDrawer with language, consent, and reset options - Add i18n translations for zone, cheminLibre, bottomBar, settings - Add --bottom-bar-height CSS variable for spacing - Modify layouts to include BottomBar on mobile (< 768px) - Support safe-area-inset for iOS devices - Touch targets minimum 48x48px for WCAG compliance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
113 lines
3.2 KiB
Vue
113 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
const emit = defineEmits<{
|
|
close: []
|
|
}>()
|
|
|
|
const { locale, setLocale, t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
const router = useRouter()
|
|
const progressionStore = useProgressionStore()
|
|
|
|
function toggleLanguage() {
|
|
const newLocale = locale.value === 'fr' ? 'en' : 'fr'
|
|
setLocale(newLocale)
|
|
}
|
|
|
|
function resetProgress() {
|
|
if (confirm(t('settings.confirmReset'))) {
|
|
progressionStore.$reset()
|
|
emit('close')
|
|
}
|
|
}
|
|
|
|
function revokeConsent() {
|
|
progressionStore.setConsent(false)
|
|
}
|
|
|
|
function giveConsent() {
|
|
progressionStore.setConsent(true)
|
|
}
|
|
|
|
function goToResume() {
|
|
router.push(localePath('/resume'))
|
|
emit('close')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="settings-drawer">
|
|
<!-- Handle -->
|
|
<div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4" />
|
|
|
|
<h2 class="text-xl font-ui font-bold text-sky-text mb-6">
|
|
{{ t('settings.title') }}
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Langue -->
|
|
<div class="flex items-center justify-between py-3 border-b border-sky-dark-100">
|
|
<span class="text-sky-text">{{ t('settings.language') }}</span>
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 bg-sky-dark-100 rounded-lg text-sky-text font-ui"
|
|
@click="toggleLanguage"
|
|
>
|
|
{{ locale === 'fr' ? 'English' : 'Français' }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mode Express -->
|
|
<div class="flex items-center justify-between py-3 border-b border-sky-dark-100">
|
|
<div>
|
|
<span class="text-sky-text block">{{ t('settings.expressMode') }}</span>
|
|
<span class="text-xs text-sky-text-muted">{{ t('settings.expressModeDesc') }}</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 bg-sky-dark-100 rounded-lg text-sky-text font-ui text-sm"
|
|
@click="goToResume"
|
|
>
|
|
{{ t('settings.goToResume') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- RGPD -->
|
|
<div class="flex items-center justify-between py-3 border-b border-sky-dark-100">
|
|
<div>
|
|
<span class="text-sky-text block">{{ t('settings.saveProgress') }}</span>
|
|
<span class="text-xs text-sky-text-muted">{{ t('settings.saveProgressDesc') }}</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="w-12 h-6 rounded-full transition-colors"
|
|
:class="progressionStore.consentGiven ? 'bg-sky-accent' : 'bg-sky-dark-100'"
|
|
@click="progressionStore.consentGiven ? revokeConsent() : giveConsent()"
|
|
>
|
|
<span
|
|
class="block w-5 h-5 rounded-full bg-white shadow transition-transform"
|
|
:class="progressionStore.consentGiven ? 'translate-x-6' : 'translate-x-0.5'"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Réinitialiser -->
|
|
<button
|
|
type="button"
|
|
class="w-full py-3 bg-red-500/20 text-red-400 rounded-lg font-ui font-medium mt-4"
|
|
@click="resetProgress"
|
|
>
|
|
{{ t('settings.reset') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Fermer -->
|
|
<button
|
|
type="button"
|
|
class="w-full py-3 bg-sky-dark-100 rounded-lg text-sky-text font-ui font-medium mt-6"
|
|
@click="emit('close')"
|
|
>
|
|
{{ t('common.close') }}
|
|
</button>
|
|
</div>
|
|
</template>
|