waqarulzafar 2022-12-23 19:45:08 +05:00
commit 0d2a8a8516
25 changed files with 239 additions and 53 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 562 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 864 B

BIN
assets/image/Audio Wave.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 342 B

BIN
assets/image/Sounscape.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
assets/image/Vector (1).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 768 B

BIN
assets/image/Vector (2).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 333 B

BIN
assets/image/Vector (3).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 333 B

BIN
assets/image/Vector (4).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 503 B

BIN
assets/image/Vector (5).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 496 B

BIN
assets/image/Vector (7).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 370 B

BIN
assets/image/Vector (8).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 668 B

BIN
assets/image/Vector (9).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 723 B

BIN
assets/image/Vector.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 530 B

BIN
assets/image/Vector123.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 518 B

107
components/homebar.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div>
<nav class="navbar navbar-expand-sm">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
<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" 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>
</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>
</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:'HomeBar',
}
</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;
}
</style>

View File

@ -1,5 +1,11 @@
<template>
<div>
<h1>Home Page</h1>
<home-bar />
</div>
</template>
<script>
import HomeBar from "../components/homebar";
export default {
components: {HomeBar}
}
</script>

26
pages/letsgo.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div>
<div class="container-fluid pt-3 ps-4">
<div class="row">
<div class="col-3">
<a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
</div>
</div>
<div class="row">
<div class="col-12">
<h4 class="text-center fw-bold pt-5">Lets Go!</h4>
<h6 class="text-center text-muted pb-0 mb-0">We have saved your selection. </h6>
<h6 class="text-center text-muted pt-0 mt-0">You can change your settings at any time. </h6>
</div>
</div>
<div class="row pt-5">
<div class="col-12 text-center">
<img src="~assets/image/Start-upguyflyingwithjetpack.png">
</div>
<div class="col-12 text-center pt-5">
<button type="button" class="btn btn-warning text-white px-4 fs-5 fw-bolder py-2">NEXT</button>
</div>
</div>
</div>
</div>
</template>

View File

@ -15,17 +15,7 @@
<NuxtPage page-key="child" />
<div class="row pt-5 mt-2">
<div class="col-12 text-center pt-5 mt-3">
<NuxtLink class="btn btn-warning px-4 " to="/onbording"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording2"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 " to="/onbording/onbording3"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording4"></NuxtLink>
</div>
<div class="col-12">
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
</div>
</div>
</div>
</div>
</template>

View File

@ -0,0 +1,54 @@
<template>
<div>
<div class="row">
<div class="col-12 pt-3">
<h6 class="text-muted text-center">We are analyzing your background noise...</h6>
</div>
<div class="col-12">
<h4 class="text-center fw-bold pt-5">The microphone does not provide any level</h4>
<h6 class="text-center text-muted">Please check the input level of the microphone in the audio </h6>
<h6 class="text-center text-muted">system settings of your device and start again. </h6>
</div>
<div class=" pt-5 text-center">
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-warning px-5 fw-bolder" for="success-outlined">
Fix This Problem
</label>
<input type="radio" class="btn-check " name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-warning ms-3 px-5 fw-bolder" for="danger-outlined">
Try Again
</label>
</div>
</div>
<div class="row pt-5 mt-2 ">
<div class="col-12 text-center pt-5 mt-3 position-fixed bottom-0 pb-5 mb-2">
<NuxtLink class="btn btn-warning px-2 " to="/onbording"></NuxtLink>
<NuxtLink class="btn btn-warning px-4 mx-2 " to="/onbording/onbording2"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 " to="/onbording/onbording3"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording4"></NuxtLink>
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
</div>
</div>
</div>
</template>
<script>
export default {
name:'OnBording',
}
</script>
<style >
.bar{
background-color: #e9c046;
}
.btn-outline-warning:active{
color: white !important;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
color: white !important;
}
</style>

View File

@ -24,6 +24,16 @@
</div>
</div>
<div class="row pt-5 mt-2 ">
<div class="col-12 text-center pt-5 mt-3 position-fixed bottom-0 pb-5 mb-2">
<NuxtLink class="btn btn-warning px-4 " to="/onbording"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording2"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 " to="/onbording/onbording3"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording4"></NuxtLink>
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
</div>
</div>
</div>
</template>

View File

@ -1,39 +0,0 @@
<template>
<div>
<div class="row">
<div class="col-12 pt-3">
<h6 class="text-muted text-center">We are analyzing your background noise...</h6>
</div>
<div class="col-12">
<h4 class="text-center fw-bold pt-5">What headphones do you use?</h4>
<h6 class="text-center text-muted">Make sure that your headphones are properly connected. </h6>
<h6 class="text-center text-muted">To use Mindboost, headphones are required. </h6>
</div>
<div class=" pt-5 text-center">
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-warning py-3 px-5" for="success-outlined">
<img src="~/assets/image/AirPodsPro.png" style="height: 60px">
<p class="text-white text-center">In-Ear</p>
</label>
<input type="radio" class="btn-check " name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-warning ms-3 py-3 px-5" for="danger-outlined">
<img src="~/assets/image/AirPodsProMax.png" style="height: 60px">
<p class="text-white text-center">In-Ear</p>
</label>
</div>
</div>
</div>
</template>
<script>
export default {
name:'OnBording',
}
</script>
<style>
.bar{
background-color: #e9c046;
}
</style>

View File

@ -22,6 +22,16 @@
</label>
</div>
</div>
<div class="row pt-5 mt-2 ">
<div class="col-12 text-center pt-5 mt-3 position-fixed bottom-0 pb-5 mb-2">
<NuxtLink class="btn btn-warning px-2 " to="/onbording"></NuxtLink>
<NuxtLink class="btn btn-warning px-4 mx-2 " to="/onbording/onbording2"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 " to="/onbording/onbording3"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording4"></NuxtLink>
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
</div>
</div>
</div>
</template>
<script>

View File

@ -21,6 +21,17 @@
</label>
</div>
</div>
<div class="row pt-5 mt-2 ">
<div class="col-12 text-center pt-5 mt-3 position-fixed bottom-0 pb-5 mb-2">
<NuxtLink class="btn btn-warning px-2 " to="/onbording"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording2"></NuxtLink>
<NuxtLink class="btn btn-warning px-4 " to="/onbording/onbording3"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording4"></NuxtLink>
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
</div>
</div>
</div>
</template>
<script>

View File

@ -34,6 +34,17 @@
</label>
</div>
</div>
<div class="row pt-5 mt-2 ">
<div class="col-12 text-center pt-5 mt-3 position-fixed bottom-0 pb-5 mb-2">
<NuxtLink class="btn btn-warning px-2 " to="/onbording"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording2"></NuxtLink>
<NuxtLink class="btn btn-warning px-2 " to="/onbording/onbording3"></NuxtLink>
<NuxtLink class="btn btn-warning px-4 mx-2 " to="/onbording/onbording4"></NuxtLink>
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
</div>
</div>
</div>
</template>
<script>