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>
57 lines
989 B
Vue
57 lines
989 B
Vue
<script setup lang="ts">
|
|
const narrator = useNarrator()
|
|
|
|
useIdleDetection({
|
|
timeout: 30000,
|
|
onIdle: () => {
|
|
narrator.showHint()
|
|
},
|
|
})
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
narrator.showIntro()
|
|
}, 1500)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-sky-dark text-sky-text flex flex-col">
|
|
<LayoutAppHeader />
|
|
|
|
<main class="flex-1 pb-mobile-nav md:pb-0">
|
|
<slot />
|
|
</main>
|
|
|
|
<LayoutAppFooter class="hidden md:block" />
|
|
|
|
<ClientOnly>
|
|
<LayoutConsentBanner />
|
|
</ClientOnly>
|
|
|
|
<ClientOnly>
|
|
<NarratorBubble
|
|
:message="narrator.currentMessage.value"
|
|
:visible="narrator.isVisible.value"
|
|
@close="narrator.hide()"
|
|
/>
|
|
</ClientOnly>
|
|
|
|
<ClientOnly>
|
|
<LayoutBottomBar />
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pb-mobile-nav {
|
|
padding-bottom: calc(var(--bottom-bar-height, 64px) + 1rem);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.pb-mobile-nav {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|