From f946717dadf770c0b736f0c6854a3aaa5ff4ff4e Mon Sep 17 00:00:00 2001
From: unknown <mudasser425@gmail.com>
Date: Sun, 25 Dec 2022 03:14:04 +0500
Subject: [PATCH] ok

---
 components/homebar.vue      |   4 +-
 pages/index.vue             |   5 --
 pages/setting.vue           |  14 ++---
 pages/setting/about.vue     |  35 ++++++++++++
 pages/setting/faq.vue       | 101 +++++++++++++++++++++++++++++++++
 pages/setting/index.vue     |   4 +-
 pages/setting/soundscap.vue | 110 ++++++++++++++++++++++++++++++++++++
 7 files changed, 257 insertions(+), 16 deletions(-)
 create mode 100644 pages/setting/about.vue
 create mode 100644 pages/setting/faq.vue
 create mode 100644 pages/setting/soundscap.vue

diff --git a/components/homebar.vue b/components/homebar.vue
index 2f84b16..6af4190 100644
--- a/components/homebar.vue
+++ b/components/homebar.vue
@@ -79,7 +79,7 @@
                 <a class="nav-link fourth-icon  px-2 py-2" href="#"></a>
               </li>
               <li class="nav-item">
-                <a class="nav-link fivith-icon  px-2 py-2" href="#"></a>
+                <nuxt-link to="/setting" class="nav-link fivith-icon  px-2 py-2"></nuxt-link>
               </li>
             </ul>
           </div>
@@ -145,7 +145,7 @@ export default {
   padding: 10px 10px;
   text-align: center;
 }
-.fivith-icon:focus{
+.fivith-icon.router-link-exact-active{
   content: url('~/assets/image/Vector (4).png');
   background-color: #e9c046;
   border-radius: 5px;
diff --git a/pages/index.vue b/pages/index.vue
index 8ca5bcf..e6bf972 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -9,10 +9,5 @@
 import HomeBar from "../components/homebar";
 export default {
   components: {HomeBar},
-  methods:{
-    focused(){
-      document.getElementById('foucused-icon').focus();
-    }
-  }
 }
 </script>
\ No newline at end of file
diff --git a/pages/setting.vue b/pages/setting.vue
index b86ea7f..476442c 100644
--- a/pages/setting.vue
+++ b/pages/setting.vue
@@ -19,19 +19,19 @@
               </nuxt-link>
             </li>
             <li class="nav-item py-0 w-100 ">
-              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
+              <nuxt-link to="/setting/soundscap" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
                 <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Soundscape Settings</span>
-              </a>
+              </nuxt-link>
             </li>
             <li class="nav-item py-0 w-100 ">
-              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
+              <nuxt-link to="/setting/faq" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
                 <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">FAQ</span>
-              </a>
+              </nuxt-link>
             </li>
             <li class="nav-item py-0 w-100 ">
-              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
+              <nuxt-link to="/setting/about" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
                 <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">About Mindboost</span>
-              </a>
+              </nuxt-link>
             </li>
             <li class="nav-item py-0 w-100 ">
               <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
@@ -118,7 +118,7 @@
                 <a class="nav-link fourth-icon  px-2 py-2" href="#"></a>
               </li>
               <li class="nav-item">
-                <a class="nav-link fivith-icon  px-2 py-2" href="#"></a>
+                <router-link to="/setting" class="nav-link fivith-icon  px-2 py-2"></router-link>
               </li>
             </ul>
           </div>
diff --git a/pages/setting/about.vue b/pages/setting/about.vue
new file mode 100644
index 0000000..a7458a4
--- /dev/null
+++ b/pages/setting/about.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div class="row justify-content-center">
+      <div class="col-12 col-sm-8">
+        <h4 class="fw-bold text-center pt-5">About Mindboost</h4>
+        <div class="row pt-4">
+          <div class="col-12">
+            <h6 class="text-muted fw-bold">WAS IST MINDBOOST?</h6>
+            <p class="text-muted ">Mindboost erzeugt Klanglandschaften für Deine Kopfhörer, die Dir helfen Dich bis zu 35 % besser zu konzentrieren. Mindboost kombiniert dabei Sprachmaskierung, Binaural Beats und Alpha Waves.</p>
+          </div>
+          <div class="col-12 pt-3">
+            <h6 class="text-muted fw-bold">WIE FUNKTIONIERT MINDBOOST?</h6>
+            <p class="text-muted ">
+              Unser Algorithmus misst die Akustik durch Dein Handy oder ein anderes Endgerät im Raum in Echtzeit und generiert eine Klanglandschaft, die störende Hintergrundgeräusche wie telefonierende Kolleg*innen optimal ausblendet.</p>
+          </div>
+          <div class="col-12 pt-3">
+            <h6 class="text-muted fw-bold">WARUM WIRKT MINDBOOST?</h6>
+            <p class="text-muted ">
+              Alle Klanglandschaften in Mindboost wurden in Hörversuchen in Zusammenarbeit mit dem Fraunhofer IBP getestet und optimiert. So kannst Du sicher sein, dass Mindboost Dich optimal bei Deiner Konzentration unterstützt.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'SettingPage',
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/setting/faq.vue b/pages/setting/faq.vue
new file mode 100644
index 0000000..8449f3a
--- /dev/null
+++ b/pages/setting/faq.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="row justify-content-center">
+      <div class="col-12 col-sm-8">
+        <h4 class="fw-bold text-center pt-5">FAQs</h4>
+        <div class="row">
+          <div class="col-12">
+            <div class="accordion" id="accordionExample">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="headingOne">
+                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                    What are Active Noise Cancelling Headphones?
+                  </button>
+                </h2>
+                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    Active Noise Canceling (ANC) is a technology that suppresses unwanted noise using coumter sound. Make sure check the description of your headphomes to find out if they are equipped with ANC function. Make sure that the function is activated. </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="headingTwo">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                    Question 01
+                  </button>
+                </h2>
+                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    Question 01
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="headingThree">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                    Question 02
+                  </button>
+                </h2>
+                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    This is the third item's accordion body.
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="headingFour">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
+                    Question 03
+                  </button>
+                </h2>
+                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    This is the Question 03.
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="headingFive">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseThree">
+                    Question 04
+                  </button>
+                </h2>
+                <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    This is the Question 04.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script >
+export default {
+  name:'Subscription',
+}
+</script>
+
+<style scoped>
+.accordion-item {
+  border: none;
+}
+.accordion-button:not(.collapsed) {
+  color: black;
+  box-shadow: none;
+}
+.accordion-button:focus {
+  z-index: 3;
+  border:none;
+  outline: 0;
+  box-shadow: none;
+}
+.accordion-button:not(.collapsed) {
+  background-color: white;
+  box-shadow: none;
+}
+</style>
\ No newline at end of file
diff --git a/pages/setting/index.vue b/pages/setting/index.vue
index 9f015e5..16403fc 100644
--- a/pages/setting/index.vue
+++ b/pages/setting/index.vue
@@ -20,10 +20,10 @@
               <h5 class="fw-bold  text-end">Jack</h5> </div>
           </div>
           <div class="row pt-4">
-            <div class="col-6">
+            <div class="col-4">
               <h5 class="fw-bold text-muted">Email</h5>
             </div>
-            <div class="col-6">
+            <div class="col-8">
               <h5 class="fw-bold  text-end">michaeljack@gmail.com</h5> </div>
           </div>
           <div class="row pt-4">
diff --git a/pages/setting/soundscap.vue b/pages/setting/soundscap.vue
new file mode 100644
index 0000000..e73236a
--- /dev/null
+++ b/pages/setting/soundscap.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="row justify-content-center">
+      <div class="col-12 col-sm-8">
+        <h4 class="fw-bold text-center pt-5">Soundscape Settings</h4>
+        <div class="row">
+          <div class="col-12">
+            <div class="accordion accordion-flush" id="accordionPanelsStayOpenExample">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingOne">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
+                    Soundscape
+                  </button>
+                </h2>
+                <div id="panelsStayOpen-collapseOne" class="accordion-collapse  collapse show" aria-labelledby="panelsStayOpen-headingOne">
+                  <div class="accordion-body">
+                    This is the first item's accordion body
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
+                    Current activity
+                  </button>
+                </h2>
+                <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
+                  <div class="accordion-body">
+                    This is the second item's accordion body.
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingThree">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
+                    Workplace
+                  </button>
+                </h2>
+                <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
+                  <div class="accordion-body">
+                    This is the third item's accordion body.
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingThree">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
+                    Headphones
+                  </button>
+                </h2>
+                <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
+                  <div class="accordion-body">
+                    This is the third item's accordion body.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-12">
+            <div class="row pt-3">
+              <div class="col-7 ps-4 ">
+                <p class="fs-6 ms-2">Adaptive soundcape</p>
+              </div>
+              <div class="col-5 pe-4">
+                <div class="form-check form-switch  float-end">
+                  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script >
+export default {
+  name:'Subscription',
+}
+</script >
+
+<style scoped>
+.accordion-item {
+   border: none;
+}
+.accordion-button:not(.collapsed) {
+   color: black;
+   box-shadow: none;
+}
+.accordion-button:focus {
+  z-index: 3;
+  border:none;
+  outline: 0;
+  box-shadow: none;
+}
+.accordion-button:not(.collapsed) {
+  background-color: white;
+  box-shadow: none;
+}
+.form-switch .form-check-input {
+  padding: 10px 16px;
+  background-color: black;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+
+}
+</style>
\ No newline at end of file