65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div id="app">
|
||
|
|
<!-- Splash Screen (only on first visit) -->
|
||
|
|
<SplashScreen v-if="showSplash" @complete="handleSplashComplete" />
|
||
|
|
|
||
|
|
<!-- Main App Content - only show after splash and routing is complete -->
|
||
|
|
<RouterView v-if="!showSplash && isReady" />
|
||
|
|
|
||
|
|
<!-- PWA Update Prompt -->
|
||
|
|
<PWAUpdatePrompt />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
import { useRouter, useRoute } from 'vue-router'
|
||
|
|
import SplashScreen from './components/SplashScreen.vue'
|
||
|
|
import PWAUpdatePrompt from './components/PWAUpdatePrompt.vue'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const route = useRoute()
|
||
|
|
const showSplash = ref(true)
|
||
|
|
const isReady = ref(false)
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Determine if splash screen should be shown
|
||
|
|
* Splash is skipped if:
|
||
|
|
* - User has already seen the intro
|
||
|
|
* - User is on a direct route (refresh/bookmark)
|
||
|
|
*/
|
||
|
|
onMounted(() => {
|
||
|
|
const seenIntro = localStorage.getItem('neode_intro_seen') === '1'
|
||
|
|
const isDirectRoute = route.path !== '/'
|
||
|
|
|
||
|
|
if (seenIntro || isDirectRoute) {
|
||
|
|
showSplash.value = false
|
||
|
|
document.body.classList.add('splash-complete')
|
||
|
|
isReady.value = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Handle splash screen completion
|
||
|
|
* Routes user directly to appropriate screen based on onboarding status
|
||
|
|
*/
|
||
|
|
function handleSplashComplete() {
|
||
|
|
showSplash.value = false
|
||
|
|
document.body.classList.add('splash-complete')
|
||
|
|
|
||
|
|
// Determine destination based on onboarding status
|
||
|
|
const seenOnboarding = localStorage.getItem('neode_onboarding_complete') === '1'
|
||
|
|
const destination = seenOnboarding ? '/login' : '/onboarding/intro'
|
||
|
|
|
||
|
|
// Route immediately for seamless video transition (no delay needed)
|
||
|
|
router.push(destination).then(() => {
|
||
|
|
// Mark as ready after navigation completes
|
||
|
|
isReady.value = true
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* Global styles are in style.css */
|
||
|
|
</style>
|