Initial commit

pages/onboarding.vue

@@ -0,0 +1,170 @@
+<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>