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

pk

master
waqarulzafar 2022-12-25 01:51:37 +05:00
parent 73994903cf cf0614c130
commit 64796b65ae
20 changed files with 624 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;
}
.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>
<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 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 second-icon px-2 py-2" href="#"></a>
</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>

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>
<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,

9
pages/index.vue
View File

@ -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>

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/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>

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

@ -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>

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

@ -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>

60
pages/setting/subscription.vue Normal file
View File

@ -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>