|
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
After Width: | Height: | Size: 475 B |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 723 B After Width: | Height: | Size: 723 B |
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
Before Width: | Height: | Size: 668 B After Width: | Height: | Size: 668 B |
After Width: | Height: | Size: 569 B |
After Width: | Height: | Size: 342 B |
After Width: | Height: | Size: 697 B |
|
@ -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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link second-icon px-2 py-2" href="#"></a>
|
<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>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link third-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>
|
||||||
<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>
|
|
@ -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>
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h1>Edit</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,19 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|