From 21640ed93e40aa5eecf2dbc20383f6ab8605f5f4 Mon Sep 17 00:00:00 2001
From: waqarulzafar <waqarulzafar@gmail.com>
Date: Fri, 27 Jan 2023 08:33:29 +0500
Subject: [PATCH] ok

---
 assets/css/style.css             |   8 ++
 components/homebar.vue           |  20 +++-
 pages/about.vue                  |  59 ++++++++++-
 pages/band.vue                   | 163 +++++++++++++++++++++++++------
 pages/homeforest.vue             |  15 ++-
 pages/homemeadow.vue             |  13 ++-
 pages/hometropics.vue            |  19 ++--
 pages/index.vue                  |  13 ++-
 pages/onboarding.vue             |   2 +-
 pages/onboarding/index.vue       |   4 +-
 pages/onboarding/onboarding2.vue |   4 +-
 pages/onboarding/onboarding3.vue |   4 +-
 pages/onboarding/onboarding4.vue |  12 +--
 13 files changed, 277 insertions(+), 59 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index e2918e5..84e6ea3 100755
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -124,9 +124,17 @@
     fill: white;
     background-color: #e9c046;
 }
+.nav-icons.router-link-active{
+    fill: white;
+    background-color: #e9c046;
+}
 .nav-icons.router-link-exact-active svg path{
     fill: white;
 }
+.nav-icons.router-link-active svg path{
+    fill: white;
+    
+}
 
 @media only screen and (max-width: 396px){
     .checklabel{
diff --git a/components/homebar.vue b/components/homebar.vue
index 9a44e98..71d0aea 100755
--- a/components/homebar.vue
+++ b/components/homebar.vue
@@ -17,11 +17,11 @@
             <ul class="nav  float-end px-1 py-1 " style="border-radius: 6px;background-color: #f5f5f5">
 
               <li class="nav-item">
-                <nuxt-link to="/" class="nav-link nav-icons " style="padding: 5px 8px" id="foucused-icon" >
+                <a @click.prevent="playSound" :class="{'router-link-exact-active':play}" class="nav-link nav-icons " style="padding: 5px 8px" id="foucused-icon" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 19 20" fill="none">
                     <path d="M2.69824 0.055674C1.5521 0.101019 0.5 1.0361 0.5 2.29591V17.7041C0.5 19.3839 2.37138 20.486 3.84082 19.6719L17.7451 11.9678C19.2568 11.1301 19.2568 8.86988 17.7451 8.03224L3.84082 0.328135C3.47346 0.124617 3.08029 0.0405589 2.69824 0.055674ZM2.71582 1.53321C2.84512 1.53266 2.98064 1.56618 3.11328 1.63966L17.0186 9.34376C17.5678 9.64811 17.5678 10.3519 17.0186 10.6563L3.11328 18.3604C2.58272 18.6543 2 18.3104 2 17.7041V2.29591C2 1.99278 2.14535 1.75582 2.35742 1.63087C2.46346 1.5684 2.58652 1.53377 2.71582 1.53321Z" fill="#030504" fill-opacity="0.4"/>
                   </svg>
-                </nuxt-link>
+                </a>
               </li>
 
               <li class="nav-item dropdown ">
@@ -133,6 +133,22 @@ export default {
   name:'HomeBar',
   props:{
     title:String
+  },
+  data(){
+    return{
+
+      play:false,
+    }
+  },
+  methods:{
+    playSound(){
+      if(!this.play){
+        this.play=true;
+      }else {
+        this.play=false;
+      }
+      this.$emit('play',this.play)
+    }
   }
 }
 </script>
diff --git a/pages/about.vue b/pages/about.vue
index c3998c4..71bbd2f 100755
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -7,7 +7,64 @@
 </template>
 <script>
 export default {
-    data(){
+  mounted() {
+    let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    let upperPercentile = 0.9;
+    let lowerPercentile = 0.1;
+    let buffer = [];
+    let levelValues = [];
+    let upperValue = 0;
+    let lowerValue = 0;
+
+    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
+      let source = audioCtx.createMediaStreamSource(stream);
+
+      let bandPass65 = audioCtx.createBiquadFilter();
+      bandPass65.type = "bandpass";
+      bandPass65.frequency.value = 65;
+      bandPass65.Q.value = 1.41;
+
+      let bandPass125 = audioCtx.createBiquadFilter();
+      bandPass125.type = "bandpass";
+      bandPass125.frequency.value = 125;
+      bandPass125.Q.value = 1.41;
+
+      let analyser = audioCtx.createAnalyser();
+      analyser.fftSize = 512;
+      analyser.minDecibels = -100;
+      analyser.maxDecibels = -1;
+
+      source.connect(bandPass65);
+      bandPass65.connect(bandPass125);
+      bandPass125.connect(analyser);
+
+      let dataArray = new Float32Array(analyser.frequencyBinCount);
+
+      function update() {
+        analyser.getFloatFrequencyData(dataArray);
+        buffer.push(...dataArray);
+        if (buffer.length > 10 * audioCtx.sampleRate) {
+          buffer = buffer.slice(-10 * audioCtx.sampleRate);
+        }
+
+        levelValues = buffer.map(val => Math.pow(10, (val / 20)));
+        levelValues = levelValues.map(val => Math.floor(val));
+
+        let sortedData = levelValues.slice().sort((a, b) => a - b);
+        upperValue = sortedData[Math.floor(upperPercentile * sortedData.length)];
+        lowerValue = sortedData[Math.floor(lowerPercentile * sortedData.length)];
+
+        console.log("Upper Percentile in Decimal: " + upperValue);
+
+
+        console.log("Lower Percentile in Decimal: " + lowerValue);
+        requestAnimationFrame(update);
+      }
+
+      update();
+    });
+    },
+  data(){
       return{
         text : "Helo World",
       }
diff --git a/pages/band.vue b/pages/band.vue
index 6a9dfa9..451db24 100755
--- a/pages/band.vue
+++ b/pages/band.vue
@@ -13,6 +13,12 @@
 
             <div><CircleProgress :size="80" :percent="height" :viewport="true" :is-gradient="true" /></div>
 
+            <div class="row">
+              <div class="col-md-2">
+                <p>Mili Seconds: {{totalms}}</p>
+              </div>
+
+            </div>
             <table class="table table-bordered">
               <thead>
               <tr>
@@ -81,6 +87,9 @@
               </tbody>
             </table>
           </div>
+          <div>
+            {{LevelValues}}
+          </div>
 
         </div>
       </div>
@@ -140,11 +149,13 @@ export default {
       time:{},
 
       Timeframe: 125,
+      timeHeight:0,
       UpperPercentile: 0.9,
       LowerPercentile: 0.1,
       LimitA: 2.5,
       LimitB:10.0,
 
+      totalms:0,
       audioCtx:{},
       source:{},
       stream:{},
@@ -260,7 +271,10 @@ export default {
       bandPass4000:{},
       bandPass8000:{},
       bandPass16000:{},
-
+      lastArrayCouhter:0,
+      firstArrayCounter:0,
+      data125CountArray:[],
+      dt125counter:0
 
     }
 
@@ -311,8 +325,13 @@ export default {
     },
 
 
+
     RMStoDBFS(InputArray){
       for (var i = 0; i < InputArray.length; i++) {
+        if (typeof InputArray[i] !== 'number' || InputArray[i] <= 0) {
+         // console.log("InputArray[" + i + "] is not a valid number or <=0, skipping...");
+          continue;
+        }
         InputArray[i] = 20 * Math.log10(InputArray[i])
       }
     },
@@ -333,7 +352,7 @@ export default {
       this.IndexMin = Math.round(this.SortedArray.length * this.LowerPercentile);
       this.PercentileValue = this.SortedArray[this.IndexMax] - this.SortedArray[this.IndexMin];
       this.PercentileValue = this.PercentileValue.toFixed(2); //nach zwei Dazimalstellen abbrechen
-      console.log('percentile Value = ' + this.PercentileValue);
+      // console.log('percentile Value = ' + this.PercentileValue);
 
       if (this.PercentileValue < this.LimitA) {
         this.Result = 1
@@ -352,6 +371,27 @@ export default {
 
       return {percentile:this.PercentileValue,result:this.ResultABC,band:band};
     },
+    reset25(){
+
+
+
+      // this.LevelValues65.splice(0,this.firstArrayCounter);
+      // this.LevelValues125.slice(this.firstArrayCounter);
+      // this.LevelValues250.slice(this.firstArrayCounter);
+      // this.LevelValues500.slice(this.firstArrayCounter);
+      // this.LevelValues1000.slice(this.firstArrayCounter);
+      // this.LevelValues2000.slice(this.firstArrayCounter);
+      // this.LevelValues4000.slice(this.firstArrayCounter);
+      // this.LevelValues8000.slice(this.firstArrayCounter);
+      // this.LevelValues16000.slice(this.firstArrayCounter);
+
+
+
+      //
+      // this.ArrayCounter=this.LevelValues65.length;
+      // console.log("Real Array Counter",this.ArrayCounter);
+
+      },
 
 
     stopmeasurement() {
@@ -368,6 +408,8 @@ export default {
       // if (this.height == 100) {
         // this.stopmeasurement();
         // console.log(this.LevelValues);
+      //console.log("Before",this.LevelValues65);
+
        this.Percentile_Global= this.Percentile(this.LevelValues,0);
         this.Percentile_65=this.Percentile(this.LevelValues65,65)
         this.Percentile_125=this.Percentile(this.LevelValues125,125)
@@ -379,11 +421,12 @@ export default {
         this.Percentile_8000=this.Percentile(this.LevelValues8000,8000)
         this.Percentile_16000=this.Percentile(this.LevelValues16000,16000)
         // this.Percentile(this.LevelValues65);
-      this.ResetLevelValues();
+      // this.ResetLevelValues();
 
+     // console.log("After",this.LevelValues65);
       this.height++;
       // this.ResetLevelValues();
-        console.log("OK");
+       // console.log("OK");
       // }
       // else {
       //   this.height++;
@@ -406,12 +449,42 @@ export default {
       //requestAnimationFrame(this.RecentLevel);
       this.height = 0;
       requestAnimationFrame(this.RecentLevel);
-      setTimeout(()=>{
-        this.id = setInterval(this.frame, this.Timeframe);
-      },5000)
+      // setTimeout(()=>{
+      //   this.id = setInterval(this.frame, this.Timeframe);
+      // },5000)
 
       //this.frame();
 
+
+      this.id=setInterval(()=>{
+
+        if(this.timeHeight>40){
+          this.frame();
+          // this.reset25();
+
+          // console.log("Array Counter",this.ArrayCounter);
+          // console.log("Last",this.lastArrayCouhter);
+          // this.lastArrayCouhter=this.ArrayCounter;
+
+        }
+        // console.log(this.ArrayCounter);
+        // console.log("Last",this.lastArrayCouhter);
+        // this.lastArrayCouhter=this.ArrayCounter;
+
+        // if(this.timeHeight <= 0){
+        //   this.firstArrayCounter=this.ArrayCounter;
+        //   // console.log("First",this.firstArrayCounter);
+        // }
+        ++this.timeHeight
+        this.totalms+=125;
+
+        console.log('Lendgt',this.LevelValues.length);
+        // this.data125CountArray[this.dt125counter]=this.ArrayCounter;
+        // ++this.dt125counter;
+        // // console.log('Array',this.data125CountArray);
+        // console.log(this.data125CountArray);
+
+      },this.Timeframe)
     },
 
     CancleMeasurement() {
@@ -419,6 +492,10 @@ export default {
       this.previousPage();
       this.MicError=0;
     },
+    Reset125(){
+     this.LevelValues65.shift();
+      this.ArrayCounter=this.LevelValues65.length;
+    },
 
     //RMS Value
     RecentLevel(){
@@ -492,6 +569,7 @@ export default {
       this.RecentRMS65 /= 512;
       this.RecentLevelValue65 = Math.sqrt(this.RecentRMS65);
 
+      // console.log(this.RecentLevelValue65);
       // Freq 125
       this.RecentRMS125 /= 512;
       this.RecentLevelValue125= Math.sqrt(this.RecentRMS125);
@@ -519,34 +597,61 @@ export default {
       this.RecentLevelValue16000= Math.sqrt(this.RecentRMS16000);
 
 
-      this.LevelValues[this.ArrayCounter] = this.RecentLevelValue;
-      this.LevelValues65[this.ArrayCounter] = this.RecentLevelValue65;
-      this.LevelValues125[this.ArrayCounter]=this.RecentLevelValue125;
-      this.LevelValues250[this.ArrayCounter]=this.RecentLevelValue250;
-      this.LevelValues500[this.ArrayCounter]=this.RecentLevelValue500;
-      this.LevelValues1000[this.ArrayCounter]=this.RecentLevelValue1000;
-      this.LevelValues2000[this.ArrayCounter]=this.RecentLevelValue2000;
-      this.LevelValues4000[this.ArrayCounter]=this.RecentLevelValue4000;
-      this.LevelValues8000[this.ArrayCounter]=this.RecentLevelValue8000;
-      this.LevelValues16000[this.ArrayCounter]=this.RecentLevelValue16000;
+      this.LevelValues.push(this.RecentLevelValue);
+      this.LevelValues65.push(this.RecentLevelValue65) ;
+      this.LevelValues125.push(this.RecentLevelValue125);
+      this.LevelValues250.push(this.RecentLevelValue250);
+      this.LevelValues500.push(this.RecentLevelValue500);
+      this.LevelValues1000.push(this.RecentLevelValue1000);
+      this.LevelValues2000.push(this.RecentLevelValue2000);
+      this.LevelValues4000.push(this.RecentLevelValue4000);
+      this.LevelValues8000.push(this.RecentLevelValue8000);
+      this.LevelValues16000.push(this.RecentLevelValue16000);
+
+      if (this.timeHeight > 40){
+        this.LevelValues.shift();
+        this.LevelValues65.shift();
+        this.LevelValues125.shift();
+        this.LevelValues250.shift();
+        this.LevelValues500.shift();
+        this.LevelValues1000.shift();
+        this.LevelValues2000.shift();
+        this.LevelValues4000.shift();
+        this.LevelValues8000.shift();
+        this.LevelValues16000.shift();
+      }
+      // console.log('Level 65',this.LevelValues65.length)
+
 
 
       this.CummulatedLevelValues = this.CummulatedLevelValues + this.RecentLevelValue*1000;
-      if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
-        this.stopmeasurement();
-        this.MicError = 1;
-      }
+      // if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
+      //   this.stopmeasurement();
+      //   this.MicError = 1;
+      // }
 
-      if (isNaN(this.RecentLevelValue)){
-        this.stopmeasurement();
-        this.MicError = 1;
-      }
+      // if (isNaN(this.RecentLevelValue)
+      //     || isNaN(this.RecentLevelValue65)
+      //     || isNaN(this.RecentLevelValue125)
+      //     || isNaN(this.RecentLevelValue250)
+      //     || isNaN(this.RecentLevelValue500)
+      //     || isNaN(this.RecentLevelValue1000)
+      //     || isNaN(this.RecentLevelValue2000)
+      //     || isNaN(this.RecentLevelValue4000)
+      //     || isNaN(this.RecentLevelValue16000)
+      // ){
+      //   this.stopmeasurement();
+      //   this.MicError = 1;
+      // }
 
-      if (this.RecentLevelValue > 0.5){
-        this.stopmeasurement();
-        this.MicError = 2;
-      }
+      // if (this.RecentLevelValue > 0.5){
+      //   this.stopmeasurement();
+      //   this.MicError = 2;
+      // }
       ++this.ArrayCounter;
+      // if(this.timeHeight >=40){
+      //   this.Reset125()
+      // }
       // console.log("Recent Level",this.RecentLevelValue);
       // console.log("Recent Level 65",this.RecentLevelValue65);
       this.AnimationID = requestAnimationFrame(this.RecentLevel);
diff --git a/pages/homeforest.vue b/pages/homeforest.vue
index 9b32bd9..e4034d6 100644
--- a/pages/homeforest.vue
+++ b/pages/homeforest.vue
@@ -3,12 +3,12 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-12 px-0 mx-0">
-          <audio autoplay src="/sounds/Forest.aac" loop></audio>
+          <audio ref="audio"  src="/sounds/Forest.aac" loop></audio>
           <video-background
               src="video/Forest.mp4"
               style=" height: 100vh;"
           >
-            <home-bar :title="title" />
+            <home-bar :title="title" v-on:play="playPause" />
             <div class="container-fluid">
               <div class="row justify-content-center">
                 <div class="adaptive pb-3">
@@ -238,12 +238,21 @@ export default {
   components: {HomeBar},
   data(){
     return{
-      title:'Forest soundscape'
+      title:'Forest soundscape',
     }
   },
   methods:{
     handleAnimation: function (anim) {
       this.anim = anim;
+    },
+    playPause(play){
+      console.log("Play Pause");
+      if (play){
+        this.$refs['audio'].play();
+      }else {
+        this.$refs['audio'].pause();
+
+      }
     }
   }
 
diff --git a/pages/homemeadow.vue b/pages/homemeadow.vue
index 04f9bdf..0bf9458 100644
--- a/pages/homemeadow.vue
+++ b/pages/homemeadow.vue
@@ -3,12 +3,12 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-12 px-0 mx-0">
-          <audio autoplay src="/sounds/Meadow.aac" loop></audio>
+          <audio ref="audio" src="/sounds/Meadow.aac" loop></audio>
           <video-background
               src="video/Meadow.mp4"
               style=" height: 100vh;"
           >
-            <home-bar :title="title" />
+            <home-bar :title="title" v-on:play="playPause" />
             <div class="container-fluid">
               <div class="row justify-content-center">
                 <div class="adaptive pb-3">
@@ -245,6 +245,15 @@ export default {
   methods:{
     handleAnimation: function (anim) {
       this.anim = anim;
+    },
+    playPause(play){
+      console.log("Play Pause");
+      if (play){
+        this.$refs['audio'].play();
+      }else {
+        this.$refs['audio'].pause();
+
+      }
     }
   }
 
diff --git a/pages/hometropics.vue b/pages/hometropics.vue
index 120b27e..448ca32 100644
--- a/pages/hometropics.vue
+++ b/pages/hometropics.vue
@@ -3,13 +3,9 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-12 px-0 mx-0">
-          <audio autoplay src="/sounds/Tropics.aac" loop></audio>
-          <video-background
-              src="video/Tropics.mp4"
-              style=" height: 100vh;"
-          >
-            <home-bar :title="title" />
-
+          <audio ref="audio" src="/sounds/Tropics.aac" loop></audio>
+          <video-background src="video/Tropics.mp4" style=" height: 100vh;">
+            <home-bar v-on:play="playPause" :title="title" />
             <div class="container-fluid">
               <div class="row justify-content-center">
                 <div class="adaptive pb-3">
@@ -248,6 +244,15 @@ export default {
   methods:{
     handleAnimation: function (anim) {
       this.anim = anim;
+    },
+    playPause(play){
+      console.log("Play Pause");
+      if (play){
+        this.$refs['audio'].play();
+      }else {
+        this.$refs['audio'].pause();
+
+      }
     }
   }
 
diff --git a/pages/index.vue b/pages/index.vue
index c7ddbb0..58d3c26 100755
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,14 +3,14 @@
       <div class="container-fluid">
         <div class="row">
           <div class="col-12 px-0 mx-0">
-            <audio autoplay src="/sounds/Lagoon.aac" loop></audio>
+            <audio ref="audio" src="/sounds/Lagoon.aac" loop></audio>
             <video-background
                 src="video/bg-video.mp4"
                 style=" height: 100vh;"
             >
 
 
-              <home-bar :title="title" />
+              <home-bar v-on:play="playPause" :title="title" />
 
 
 
@@ -174,6 +174,15 @@ export default {
   methods:{
     handleAnimation: function (anim) {
       this.anim = anim;
+    },
+    playPause(play){
+      console.log("Play Pause");
+      if (play){
+        this.$refs['audio'].play();
+      }else {
+        this.$refs['audio'].pause();
+
+      }
     }
   }
 
diff --git a/pages/onboarding.vue b/pages/onboarding.vue
index a0f4097..77b78de 100644
--- a/pages/onboarding.vue
+++ b/pages/onboarding.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <video-background
-        src="video/bg-video.mp4"
+        src="/video/bg-video.mp4"
         style=" height: 100vh;"
     >
 
diff --git a/pages/onboarding/index.vue b/pages/onboarding/index.vue
index 60861c0..7caece7 100644
--- a/pages/onboarding/index.vue
+++ b/pages/onboarding/index.vue
@@ -11,7 +11,7 @@
     </div>
     <div class="row pt-5 text-center">
       <div class="d-flex mx-auto justify-content-center ">
-        <div class="checkmark pt-2 d-block d-sm-inline-block px-1">
+        <nuxt-link to="/onboarding/onboarding2"  @click.once="increment(50)" class="checkmark pt-2 d-block d-sm-inline-block px-1">
           <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off">
           <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
             <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 41" fill="none">
@@ -19,7 +19,7 @@
             </svg>
             <p class=" text-center">In-Ear</p>
           </label>
-        </div>
+        </nuxt-link>
 
         <nuxt-link to="/onboarding/onboarding2"  @click.once="increment(50)" class="checkmark px-1 pt-2 d-inline-block">
           <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
diff --git a/pages/onboarding/onboarding2.vue b/pages/onboarding/onboarding2.vue
index 563f03f..d2c7a05 100644
--- a/pages/onboarding/onboarding2.vue
+++ b/pages/onboarding/onboarding2.vue
@@ -10,7 +10,7 @@
         </div>
         <div class=" pt-5 text-center">
           <div class="d-flex mx-auto justify-content-center ">
-            <div class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
+            <nuxt-link to="/onboarding/onboarding3"  @click.once="increment(75)"  class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
               <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
               <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
                 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 46" fill="none">
@@ -18,7 +18,7 @@
                 </svg>
                 <p class=" text-center">No</p>
               </label>
-            </div>
+            </nuxt-link>
 
             <nuxt-link to="/onboarding/onboarding3"  @click.once="increment(75)" class="checkmark pt-2 px-1 d-inline-block">
               <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
diff --git a/pages/onboarding/onboarding3.vue b/pages/onboarding/onboarding3.vue
index 88d6281..fe9a106 100644
--- a/pages/onboarding/onboarding3.vue
+++ b/pages/onboarding/onboarding3.vue
@@ -9,7 +9,7 @@
         </div>
         <div class=" pt-5 text-center">
           <div class=" d-flex mx-auto justify-content-center">
-            <div class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
+            <nuxt-link to="/onboarding/onboarding4"  @click.once="increment(100)" class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
               <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
               <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
                 <svg xmlns="http://www.w3.org/2000/svg" width="60"  viewBox="0 0 51 56" fill="none">
@@ -17,7 +17,7 @@
                 </svg>
                 <p class=" text-center">Creativity</p>
               </label>
-            </div>
+            </nuxt-link>
 
             <nuxt-link to="/onboarding/onboarding4"  @click.once="increment(100)" class="checkmark pt-2 px-1 d-inline-block">
               <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
diff --git a/pages/onboarding/onboarding4.vue b/pages/onboarding/onboarding4.vue
index 5c8110c..fbe83dc 100644
--- a/pages/onboarding/onboarding4.vue
+++ b/pages/onboarding/onboarding4.vue
@@ -9,7 +9,7 @@
         </div>
         <div class="col-12 text-center ">
         <div class="d-flex mx-auto justify-content-center ">
-          <div class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
+          <nuxt-link  to="/letsgo" class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
           <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
           <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
             <svg xmlns="http://www.w3.org/2000/svg" width="55" height="60" viewBox="0 0 60 46" fill="none">
@@ -17,7 +17,7 @@
             </svg>
             <p class=" text-center">In-Ear</p>
           </label>
-          </div>
+          </nuxt-link>
 
           <nuxt-link to="/letsgo" class="checkmark px-1 pt-2 d-inline-block">
           <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
@@ -30,7 +30,7 @@
           </nuxt-link>
         </div>
         <div class="d-flex mx-auto justify-content-center ">
-          <div class="checkmark pt-2 pt-sm-3 px-1 d-block d-sm-inline-block">
+          <nuxt-link to="/letsgo" class="checkmark pt-2 pt-sm-3 px-1 d-block d-sm-inline-block">
           <input type="radio" class="btn-check" name="options-outlined" id="success-outlined2" autocomplete="off" >
           <label class="btn checklabel py-3 px-5" for="success-outlined2">
             <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -39,8 +39,8 @@
 
             <p class=" text-center">Forest</p>
           </label>
-          </div>
-          <div class="checkmark pt-2 px-1 pt-sm-3 d-block d-sm-inline-block">
+          </nuxt-link>
+          <nuxt-link to="/letsgo" class="checkmark pt-2 px-1 pt-sm-3 d-block d-sm-inline-block">
           <input type="radio" class="btn-check  " name="options-outlined" id="danger-outlined" autocomplete="off">
           <label class="btn checklabel ms-0 ms-lg-3 py-3 px-5 " for="danger-outlined">
             <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -50,7 +50,7 @@
             <p class=" text-center">Meadow</p>
           </label>
 
-          </div>
+          </nuxt-link>
         </div>
         </div>
       </div>