171 lines
4.2 KiB
Vue
171 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 px-0 mx-0">
|
|
<video-background
|
|
src="/video/bg-video.mp4"
|
|
style=" height: 100vh;"
|
|
poster="/images/poster.png"
|
|
>
|
|
<div class="container-fluid pt-3 px-lg-4">
|
|
<div class="header d-flex flex-column flex-fill flex-md-row justify-content-between">
|
|
<div class="header__logo pt-md-1 pt-lg-1">
|
|
<nuxt-link class="navbar-brand" to="/">
|
|
<div class="text-center text-md-start">
|
|
<img src="/mindboostlogo.svg" height="35" class="img " alt="imae">
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
<div class="content-wrapper">
|
|
<component :is="currentStep" @next-step="nextStep" @previous-step="previousStep" />
|
|
</div>
|
|
<div class="nav-buttons row pt-5 mt-0 mt-sm-4">
|
|
<div class="col-12 text-center pt-5 mt-3 pb-2 mb-2">
|
|
<button
|
|
v-for="(step, index) in steps"
|
|
:key="index"
|
|
class="btn btn-bullet mx-1"
|
|
:class="{ 'is-active': currentStepIndex === index }"
|
|
@click="goToStep(index)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</video-background>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from 'pinia'
|
|
import { ref, markRaw } from 'vue'
|
|
import Onboarding1 from './onboarding/onboarding1.vue'
|
|
import Onboarding2 from './onboarding/onboarding2.vue'
|
|
import Onboarding3 from './onboarding/onboarding3.vue'
|
|
import Onboarding4 from './onboarding/onboarding4.vue'
|
|
import Onboarding5 from './onboarding/onboarding5.vue'
|
|
// import Onboarding6 from './onboarding/onboarding6.vue'
|
|
import { useMicStore } from '@/stores/microphone'
|
|
import { useAudioStore } from '@/stores/audio'
|
|
import { useCounterStore } from '@/stores/counter'
|
|
export default {
|
|
setup () {
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
const currentStepIndex = ref(0)
|
|
const steps = [
|
|
markRaw(Onboarding1),
|
|
markRaw(Onboarding2),
|
|
markRaw(Onboarding3),
|
|
markRaw(Onboarding4),
|
|
markRaw(Onboarding5)
|
|
]
|
|
|
|
const currentStep = computed(() => steps[currentStepIndex.value])
|
|
|
|
const nextStep = () => {
|
|
if (currentStepIndex.value < steps.length - 1) {
|
|
currentStepIndex.value++
|
|
}
|
|
}
|
|
|
|
const previousStep = () => {
|
|
if (currentStepIndex.value > 0) {
|
|
currentStepIndex.value--
|
|
}
|
|
}
|
|
|
|
const goToStep = (index) => {
|
|
currentStepIndex.value = index
|
|
}
|
|
|
|
return {
|
|
t,
|
|
localePath,
|
|
currentStep,
|
|
currentStepIndex,
|
|
steps,
|
|
nextStep,
|
|
previousStep,
|
|
goToStep
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
bar_val: 25,
|
|
bar_width: 0,
|
|
analyser: null,
|
|
dataArray: null
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(useCounterStore, ['count']),
|
|
...mapState(useAudioStore, ['audioContext']),
|
|
isFixProblemRoute () {
|
|
return !this.$route.name.includes('fixproblem')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.bar{
|
|
background-color: #e9c046 !important;
|
|
}
|
|
.checklabel{
|
|
background-color: white !important;
|
|
width: 150px ;
|
|
height: 134px ;
|
|
}
|
|
.px-4{
|
|
transition: 1s;
|
|
}
|
|
|
|
.content-wrapper {
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
border-radius: 10px;
|
|
padding: 4em;
|
|
max-width: 1120px;
|
|
margin: 100px auto 1.5em;
|
|
min-height: 50vh;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
@media only screen and (max-width: 1024px) {
|
|
.content-wrapper {
|
|
padding: 4em;
|
|
margin-top: 70px;
|
|
max-height: 80vh;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 768px) {
|
|
.content-wrapper {
|
|
padding: 4em;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 576px) {
|
|
.content-wrapper {
|
|
padding: 2em 1em;
|
|
margin: 4.5em auto 1.5em;
|
|
}
|
|
}
|
|
|
|
.nav-buttons {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgb(255,255,255);
|
|
background: linear-gradient(0deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);
|
|
}
|
|
.checkmark {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
</style>
|