mindboost-rnbo-test-project/pages/onboarding.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>