|
@ -50,4 +50,23 @@
|
|||
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>
|
||||
<div>
|
||||
<nav class="navbar navbar-expand-sm">
|
||||
<nav class="navbar navbar-expand">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
|
@ -12,19 +12,68 @@
|
|||
<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" id="dropdownMenuLink" data-bs-toggle="dropdown" href="#"></a>
|
||||
<ul class="dropdown-menu" 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><a class="dropdown-item" href="#">Tropics <span class="float-end"><img src="~/assets/image/Vector123.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><a class="dropdown-item" href="#">Meadow <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
|
||||
<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">
|
||||
<a class="nav-link second-icon px-2 py-2" href="#"></a>
|
||||
<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" 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 fourth-icon px-2 py-2" href="#"></a>
|
||||
|
@ -60,7 +109,6 @@ export default {
|
|||
/*padding: 10px 10px;*/
|
||||
text-align: center;
|
||||
height: 44px;
|
||||
|
||||
}
|
||||
.second-icon{
|
||||
content: url('~/assets/image/AirPods Pro Max.png');
|
||||
|
@ -104,4 +152,8 @@ export default {
|
|||
padding: 10px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.accordion-button-homebar::after {
|
||||
background-size: 16px;
|
||||
background-position-y: 4px;
|
||||
}
|
||||
</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>
|
||||
|
||||
<style>
|
||||
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css";
|
||||
.slide-left-enter-active,
|
||||
.slide-left-leave-active,
|
||||
.slide-right-enter-active,
|
||||
|
|
|
@ -1,11 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<home-bar />
|
||||
<NuxtPage page-key="child" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import HomeBar from "../components/homebar";
|
||||
export default {
|
||||
components: {HomeBar}
|
||||
components: {HomeBar},
|
||||
methods:{
|
||||
focused(){
|
||||
document.getElementById('foucused-icon').focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
</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/subscription" 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,58 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 col-sm-8">
|
||||
<h4 class="fw-bold text-center pt-5"><span class="float-start"><i class="fa-solid fa-arrow-left-long"></i></span> Edit Account</h4>
|
||||
<div class="row justify-content-center">Subscription
|
||||
<div class="col-11 col-md-8">
|
||||
<form>
|
||||
<div class="row pt-5">
|
||||
<div class="col-12">
|
||||
<label class="text-muted ">First Name</label>
|
||||
<input type="text" class="form-control" placeholder="First Name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-3">
|
||||
<div class="col-12">
|
||||
<label class="text-muted ">Surname</label>
|
||||
<input type="text" class="form-control" placeholder="Surname" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-3">
|
||||
<div class="col-12">
|
||||
<label class="text-muted ">Email</label>
|
||||
<input type="email" class="form-control" placeholder="Email" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pt-3">
|
||||
<div class="col-12">
|
||||
<label class="text-muted ">Password</label>
|
||||
<input type="password" class="form-control" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-5 ">
|
||||
<div class="col-12 text-center">
|
||||
<button type="button" class="btn text-white fs-5 col-12 fw-bold py-2 " style="background-color: #e9c046">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Index from "~/pages/index.vue";
|
||||
|
||||
export default {
|
||||
name:'EditAccount',
|
||||
components: {Index},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-sm-8">
|
||||
<h4 class="fw-bold text-center pt-5">Account
|
||||
<nuxt-link to="/setting/editaccount" class="float-end fs-5 pt-1 text-decoration-none" style="color: #e9c046">Edit</nuxt-link></h4>
|
||||
|
||||
<div class="row pt-4">
|
||||
<div class="col-6">
|
||||
<h5 class="fw-bold text-muted">First Name</h5>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h5 class="fw-bold text-end">Michael</h5> </div>
|
||||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col-6">
|
||||
<h5 class="fw-bold text-muted">Last Name</h5>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h5 class="fw-bold text-end">Jack</h5> </div>
|
||||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col-6">
|
||||
<h5 class="fw-bold text-muted">Email</h5>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h5 class="fw-bold text-end">michaeljack@gmail.com</h5> </div>
|
||||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col-6">
|
||||
<h5 class="fw-bold text-muted">Password</h5>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h5 class="fw-bold text-end">•••••••••</h5> </div>
|
||||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col-12 text-center">
|
||||
<button class="btn col-3 fw-bold btn-outline-dark">Log Out</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pt-5">
|
||||
<div class="col-12 rounded text-center py-5" style="background-image: linear-gradient(40.53deg, #E9A446 6.68%, #E9C046 100%)">
|
||||
<h4 class="text-center text-white ">Get another free 30 days</h4>
|
||||
<h5 class="text-center px-5 text-white pt-2">You can still use Mindboost for 7 days for free. Subscribe to increase your productivity with Mindboost afterwards.</h5>
|
||||
<button type="button" class="btn px-4 py-2 mt-3 fs-5" style="background-color: white;gap: 10px;">Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'SettingPage',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-sm-8">
|
||||
<h4 class="fw-bold text-center pt-5"><span class="float-start"><i class="fa-solid fa-arrow-left-long"></i></span> Subscription</h4>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="fw-bold text-center pt-3">Subscribe to increase your productivity with Mindboost</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="card" style="background: #E9C046;box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);border-radius: 12px;" >
|
||||
<div class="card-body py-4">
|
||||
<h5 class="text-center fw-bolder text-white " style="font-weight: 600;font-size: 32px">$2.99</h5>
|
||||
<p class="text-white text-center">1 month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card" style="background: #FFFFFF;box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);border-radius: 12px;">
|
||||
<div class="card-body py-4">
|
||||
<h5 class="text-center fw-bolder " style="font-weight: 600;font-size: 32px">$9.99</h5>
|
||||
<p class=" text-center">6 month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card" style="background: #FFFFFF;border: 1px solid #E9C046;border-radius: 12px;">
|
||||
<div class="card-body py-4">
|
||||
<h5 class="text-center fw-bolder " style="font-weight: 600;font-size: 32px">$14.99</h5>
|
||||
<p class=" text-center">1 year</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-5">
|
||||
<div class="col-12 px-md-5 px-0">
|
||||
<h6 class="text-center text-muted" style="font-style: normal;font-weight: 500;font-size: 14px;line-height: 20px;">You can cancel Mindboost at any time. The subscription will start automatically after the end of the trial period unless it is canceled before the end of the trial period. The total price is charged per period, price includes VAT.</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-5 justify-content-center ">
|
||||
<div class="col-6 text-center">
|
||||
<button type="button" class="btn text-white fs-5 col-12 fw-bold py-2 " style="background-color: #e9c046">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'Subscription',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|