Mindboost
/
dev-audioprocessing
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ok

master
unknown 2022-12-24 21:36:24 +05:00
parent 41566796db
commit e64f49869c
19 changed files with 469 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/css/style.css
View File

@ -50,4 +50,23 @@
transition: .2s ease-in-out; transition: .2s ease-in-out;
} }
.accordion-button-homebar:not(.collapsed)::after {
background-position-y:1px ;
}
.accordion-button-homebar:not(.collapsed) {
color: black;
background-color: white;
}
.accordion-button-homebar:focus {
z-index: 3;
border-color: white;
outline: 0;
box-shadow: none;
}
.dropdown-menu {
min-width: 200px !important;
border: none;
box-shadow: 1px 0px 4px 0px rgba(0,0,0,0.10);
}

BIN
assets/image/AudioWave1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 475 B

BIN
assets/image/Cloudsoftware.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
assets/image/Frame19439.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

0
assets/image/Vector (9).png → assets/image/Vector121.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 723 B

After

Width:  |  Height:  |  Size: 723 B

0
assets/image/Vector (7).png → assets/image/Vector7.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 370 B

After

Width:  |  Height:  |  Size: 370 B

0
assets/image/Vector (8).png → assets/image/Vector8.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 668 B

After

Width:  |  Height:  |  Size: 668 B

BIN
assets/image/airbods.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 569 B

BIN
assets/image/audiowave2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 342 B

BIN
assets/image/headphone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 697 B

76
components/homebar.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<nav class="navbar navbar-expand-sm"> <nav class="navbar navbar-expand">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a> <a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
@ -12,19 +12,68 @@
<div class="d-flex"> <div class="d-flex">
<ul class="nav"> <ul class="nav">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link first-icon px-2 py-2" aria-current="page" id="dropdownMenuLink" data-bs-toggle="dropdown" href="#"></a> <a class="nav-link first-icon px-2 py-2" aria-current="page" data-bs-toggle="dropdown" href="#"></a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#" style="border-bottom: 1px solid lightgray;">Lagoon <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li> <li class="px-1"><a class="dropdown-item py-2 " href="#" style="border-bottom: 1px solid lightgray;">Lagoon <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
<li><a class="dropdown-item" href="#">Tropics <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li> <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Tropics <span class="float-end"><img src="~/assets/image/Vector7.png"></span></a></li>
<li><a class="dropdown-item" href="#">Forest <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li> <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Forest <span class="float-end"><img src="~/assets/image/Vector8.png"></span></a></li>
<li><a class="dropdown-item" href="#">Meadow <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li> <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Meadow <span class="float-end"><img src="~/assets/image/Vector121.png"></span></a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link second-icon px-2 py-2" data-bs-auto-close="outside" data-bs-toggle="dropdown" href="#">
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
<li class="px-1">
<div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample">
<div class="accordion-item">
<h4 class="accordion-header" id="flush-headingOne">
<button class="accordion-button accordion-button-homebar py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Headphones Type
</button>
</h4>
<div id="flush-collapseOne" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body p-0 m-0">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">In-Ear <span class="float-end"><img src="~/assets/image/airbods.png"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Over-Ear <span class="float-end"><img src="~/assets/image/headphone.png"></span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="px-1">
<div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample1">
<div class="accordion-item">
<h4 class="accordion-header" id="flush-headingOne">
<button class="accordion-button accordion-button-homebar py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne1" aria-expanded="false" aria-controls="flush-collapseOne">
Headphones Type
</button>
</h4>
<div id="flush-collapseOne1" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample1">
<div class="accordion-body p-0 m-0">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">No <span class="float-end"><img src="~/assets/image/AudioWave1.png"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Yes <span class="float-end"><img src="~/assets/image/audiowave2.png"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul> </ul>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link second-icon px-2 py-2" href="#"></a> <a class="nav-link third-icon px-2 py-2" id="foucused-icon" href="#" ref="foucused"></a>
</li>
<li class="nav-item">
<a class="nav-link third-icon px-2 py-2" href="#"></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link fourth-icon px-2 py-2" href="#"></a> <a class="nav-link fourth-icon px-2 py-2" href="#"></a>
@ -60,7 +109,6 @@ export default {
/*padding: 10px 10px;*/ /*padding: 10px 10px;*/
text-align: center; text-align: center;
height: 44px; height: 44px;
} }
.second-icon{ .second-icon{
content: url('~/assets/image/AirPods Pro Max.png'); content: url('~/assets/image/AirPods Pro Max.png');
@ -104,4 +152,8 @@ export default {
padding: 10px 10px; padding: 10px 10px;
text-align: center; text-align: center;
} }
.accordion-button-homebar::after {
background-size: 16px;
background-position-y: 4px;
}
</style> </style>

161
components/settingbar.vue Normal file
View File

@ -0,0 +1,161 @@
<template>
<div>
<nav class="navbar navbar-expand-sm my-0 py-0 ">
<div class="container-fluid ps-0 ms-0 ">
<div class="py-4 col-3 my-0 py-0" style="background-color: #f4f5f7">
<a class="" href="#"><img src="~/assets/image/Logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link fw-bolder fs-5 text-dark" aria-current="page" href="#">Home</a>
</li>
</ul>
<div class="d-flex">
<ul class="nav">
<li class="nav-item dropdown">
<a class="nav-link first-icon px-2 py-2" aria-current="page" data-bs-toggle="dropdown" href="#"></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
<li class="px-1"><a class="dropdown-item py-2 " href="#" style="border-bottom: 1px solid lightgray;">Lagoon <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
<li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Tropics <span class="float-end"><img src="~/assets/image/Vector7.png"></span></a></li>
<li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Forest <span class="float-end"><img src="~/assets/image/Vector8.png"></span></a></li>
<li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Meadow <span class="float-end"><img src="~/assets/image/Vector121.png"></span></a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link second-icon px-2 py-2" data-bs-auto-close="outside" data-bs-toggle="dropdown" href="#">
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
<li class="px-1">
<div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample">
<div class="accordion-item">
<h4 class="accordion-header" id="flush-headingOne">
<button class="accordion-button accordion-button-homebar py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Headphones Type
</button>
</h4>
<div id="flush-collapseOne" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body p-0 m-0">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">In-Ear <span class="float-end"><img src="~/assets/image/airbods.png"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Over-Ear <span class="float-end"><img src="~/assets/image/headphone.png"></span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="px-1">
<div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample1">
<div class="accordion-item">
<h4 class="accordion-header" id="flush-headingOne">
<button class="accordion-button accordion-button-homebar py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne1" aria-expanded="false" aria-controls="flush-collapseOne">
Headphones Type
</button>
</h4>
<div id="flush-collapseOne1" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample1">
<div class="accordion-body p-0 m-0">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">No <span class="float-end"><img src="~/assets/image/AudioWave1.png"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Yes <span class="float-end"><img src="~/assets/image/audiowave2.png"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link third-icon px-2 py-2" id="foucused-icon" href="#" ref="foucused"></a>
</li>
<li class="nav-item">
<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>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</template>
<script>
export default {
name:'settingBar',
}
</script>
<style>
.first-icon{
content: url('~/assets/image/Vector.png');
border-radius: 5px;
/*padding: 10px 10px;*/
text-align: center;
height: 44px;
}
.first-icon:focus{
content: url('~/assets/image/Sounscape.png');
background-color: #e9c046;
border-radius: 5px;
/*padding: 10px 10px;*/
text-align: center;
height: 44px;
}
.second-icon{
content: url('~/assets/image/AirPods Pro Max.png');
border-radius: 5px;
padding: 10px 10px;
text-align: center;
}
.second-icon:focus{
content: url('~/assets/image/AirPods Pro Max (1).png');
background-color: #e9c046;
border-radius: 5px;
padding: 10px 10px;
text-align: center;
}
.third-icon{
content: url('~/assets/image/Vector (5).png');
border-radius: 5px;
padding: 10px 10px;
text-align: center;
}
.third-icon:focus{
content: url('~/assets/image/Vector (3).png');
background-color: #e9c046;
border-radius: 5px;
padding: 10px 10px;
text-align: center;
}
.fourth-icon{
content: url('~/assets/image/Audio Wave.png');
}
.fivith-icon{
content: url('~/assets/image/Vector (1).png');
border-radius: 5px;
padding: 10px 10px;
text-align: center;
}
.fivith-icon:focus{
content: url('~/assets/image/Vector (4).png');
background-color: #e9c046;
border-radius: 5px;
padding: 10px 10px;
text-align: center;
}
.accordion-button-homebar::after {
background-size: 16px;
background-position-y: 4px;
}
</style>

1
layouts/default.vue
View File

@ -32,6 +32,7 @@ useHead({
</script> </script>
<style> <style>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css";
.slide-left-enter-active, .slide-left-enter-active,
.slide-left-leave-active, .slide-left-leave-active,
.slide-right-enter-active, .slide-right-enter-active,

9
pages/index.vue
View File

@ -1,11 +1,18 @@
<template> <template>
<div> <div>
<home-bar /> <home-bar />
<NuxtPage page-key="child" />
</div> </div>
</template> </template>
<script> <script>
import HomeBar from "../components/homebar"; import HomeBar from "../components/homebar";
export default { export default {
components: {HomeBar} components: {HomeBar},
methods:{
focused(){
document.getElementById('foucused-icon').focus();
}
}
} }
</script> </script>

11
pages/index/adaptivesoundscap.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
<div class="row">
<div class="col-1"><span><i class="fa-solid fa-arrow-left-long"></i></span></div>
</div>
</div>
</div>
</div>
</template>

27
pages/index/index.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div>
<div class="container">
<div class="row pt-3">
<div class="col-12 text-center">
<img src="~/assets/image/Cloudsoftware.png">
<h4 class="fw-bold ">Focus</h4>
<div class="pt-3">
<img src="~/assets/image/Frame19439.png" />
</div>
<div class="d-flex justify-content-center pt-3">
<span class="text-muted fw-bold fs-6 ">Adaptive soundscape : <span class="" style="color: #e9c046">On</span> </span><span class="ps-3"><i class="fa-solid text-muted d-flex pt-1 mt-1 fa-chevron-right"></i></span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'HomePage',
created() {
}
}
</script>

153
pages/setting.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<!-- <setting-bar />-->
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 px-sm-2 px-0 " style="background-color: #f4f5f7">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class=" d-none d-sm-inline pt-3"><img src="~/assets/image/Logo.png" class="img img-fluid"></span>
</a>
<ul class="nav flex-column mb-sm-auto mb-0 align-items-center w-100 align-items-sm-start" id="menu">
<li class="nav-item py-0 w-100 ">
<nuxt-link to="/setting" class="nav-link px-3 py-3 list-active align-middle px-0 active 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">Account</span>
</nuxt-link>
</li>
<li class="nav-item py-0 w-100 ">
<nuxt-link to="/setting/editaccount" 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">Subscription</span>
</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">
<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>
</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">
<i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">FAQ</span>
</a>
</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">
<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>
</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">
<i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Imprint</span>
</a>
</li>
</ul>
<hr>
</div>
</div>
<div class="col-10 col-sm-9 overflow-hidden">
<div class="row ">
<div class="col-12 text-center">
<div class="d-inline-block mx-auto ">
<h4 class="d-inline-block d-none d-sm-block pt-3 text-muted fw-bolder">Settings</h4>
</div>
<ul class="nav float-end">
<li class="nav-item dropdown">
<a class="nav-link first-icon px-2 py-2" aria-current="page" data-bs-toggle="dropdown" href="#"></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
<li class="px-1"><a class="dropdown-item py-2 " href="#" style="border-bottom: 1px solid lightgray;">Lagoon <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
<li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Tropics <span class="float-end"><img src="~/assets/image/Vector7.png"></span></a></li>
<li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Forest <span class="float-end"><img src="~/assets/image/Vector8.png"></span></a></li>
<li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Meadow <span class="float-end"><img src="~/assets/image/Vector121.png"></span></a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link second-icon px-2 py-2" data-bs-auto-close="outside" data-bs-toggle="dropdown" href="#">
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
<li class="px-1">
<div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample">
<div class="accordion-item">
<h4 class="accordion-header" id="flush-headingOne">
<button class="accordion-button accordion-button-homebar py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Headphones Type
</button>
</h4>
<div id="flush-collapseOne" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body p-0 m-0">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">In-Ear <span class="float-end"><img src="~/assets/image/airbods.png"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Over-Ear <span class="float-end"><img src="~/assets/image/headphone.png"></span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="px-1">
<div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample1">
<div class="accordion-item">
<h4 class="accordion-header" id="flush-headingOne">
<button class="accordion-button accordion-button-homebar py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne1" aria-expanded="false" aria-controls="flush-collapseOne">
Headphones Type
</button>
</h4>
<div id="flush-collapseOne1" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample1">
<div class="accordion-body p-0 m-0">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">No <span class="float-end"><img src="~/assets/image/AudioWave1.png"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Yes <span class="float-end"><img src="~/assets/image/audiowave2.png"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link third-icon px-2 py-2" id="foucused-icon" href="#" ref="foucused"></a>
</li>
<li class="nav-item">
<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>
</li>
</ul>
</div>
</div>
<nuxt-page key="child" />
</div>
</div>
</div>
</template>
<script>
import SettingBar from "../components/settingbar";
export default {
components: {SettingBar}
}
</script>
<style>
.list-active{
border-radius: 10px;
width: 100% !important;
}
.list-active.router-link-exact-active{
background-color: #e9c046;
border-radius: 10px;
color: white !important;
width: 100% !important;
}
.list-active:active a{
color: white !important;
}
</style>

7
pages/setting/editaccount.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div class="row">
<div class="col-12">
<h1>Edit</h1>
</div>
</div>
</template>

19
pages/setting/index.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div>
<div class="row">
<div class="col-12">
<div class="">
</div>
</div>
</div>
</div>
</template>
<script>
</script>
<style>
</style>