master
parent
f791115718
commit
d1ae1043c3
|
@ -49,3 +49,5 @@
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
transition: .2s ease-in-out;
|
transition: .2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
|
@ -2,6 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="">
|
<div class="">
|
||||||
<slot/>
|
<slot/>
|
||||||
|
<!-- <NuxtPage />-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -31,5 +32,26 @@ useHead({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/*@import "assets/css/style.css";*/
|
.slide-left-enter-active,
|
||||||
|
.slide-left-leave-active,
|
||||||
|
.slide-right-enter-active,
|
||||||
|
.slide-right-leave-active {
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.slide-left-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(50px, 0);
|
||||||
|
}
|
||||||
|
.slide-left-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50px, 0);
|
||||||
|
}
|
||||||
|
.slide-right-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50px, 0);
|
||||||
|
}
|
||||||
|
.slide-right-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(50px, 0);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -4,7 +4,7 @@ export default defineNuxtConfig({
|
||||||
|
|
||||||
css:[
|
css:[
|
||||||
'~/assets/css/style.css'
|
'~/assets/css/style.css'
|
||||||
]
|
],
|
||||||
// modules: [
|
// modules: [
|
||||||
// '@nuxtjs/tailwindcss',
|
// '@nuxtjs/tailwindcss',
|
||||||
// 'nuxt-headlessui'
|
// 'nuxt-headlessui'
|
||||||
|
@ -13,6 +13,11 @@ export default defineNuxtConfig({
|
||||||
// headlessui: {
|
// headlessui: {
|
||||||
// prefix: 'Headless'
|
// prefix: 'Headless'
|
||||||
// },
|
// },
|
||||||
|
app: {
|
||||||
|
pageTransition: {
|
||||||
|
name: 'slide-right',
|
||||||
|
mode: 'out-in'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Hello World</h1>
|
||||||
|
<NuxtPage page-key="child" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -0,0 +1,30 @@
|
||||||
|
<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 class="col-12 text-center justify-content-center col-lg-9 pt-1">
|
||||||
|
<div class="progress mx-auto ms-lg-3 mt-2 " style="width: 70%;height: 12px">
|
||||||
|
<div class="progress-bar bar" role="progressbar" style="width: 25%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nuxt-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="onbording1"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording2"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 " to="onbording3"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 mx-2 " to="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>
|
||||||
|
|
|
@ -0,0 +1,63 @@
|
||||||
|
<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 class="col-12 text-center justify-content-center col-lg-9 pt-1">
|
||||||
|
<div class="progress mx-auto ms-lg-3 mt-2 " style="width: 70%;height: 12px">
|
||||||
|
<div class="progress-bar bar" role="progressbar" style="width: 25%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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 class="row pt-5 mt-2">
|
||||||
|
<div class="col-12 text-center pt-5 mt-3">
|
||||||
|
<NuxtLink class="btn btn-warning px-4 " to="onbording1"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording2"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 " to="onbording3"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 mx-2 " to="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>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'OnBording',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bar{
|
||||||
|
background-color: #e9c046;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,61 @@
|
||||||
|
<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 class="col-12 text-center justify-content-center col-lg-9 pt-1">
|
||||||
|
<div class="progress mx-auto ms-lg-3 mt-2 " style="width: 70%;height: 12px">
|
||||||
|
<div class="progress-bar bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">Do your headphones have ANC?</h4>
|
||||||
|
<h6 class="text-center text-muted">What’s that?</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 class="row pt-5 mt-2">
|
||||||
|
<div class="col-12 text-center pt-5 mt-3">
|
||||||
|
<NuxtLink class="btn btn-warning px-2 " to="onbording1"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-4 mx-2 " to="onbording2"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 " to="onbording3"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 mx-2 " to="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>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'OnBording',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bar{
|
||||||
|
background-color: #e9c046;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,60 @@
|
||||||
|
<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 class="col-12 text-center justify-content-center col-lg-9 pt-1">
|
||||||
|
<div class="progress mx-auto ms-lg-3 mt-2 " style="width: 75%;height: 12px">
|
||||||
|
<div class="progress-bar bar" role="progressbar" style="width: 75%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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 are your plans for today?</h4>
|
||||||
|
</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 class="row pt-5 mt-2">
|
||||||
|
<div class="col-12 text-center pt-5 mt-3">
|
||||||
|
<NuxtLink class="btn btn-warning px-2 " to="onbording1"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording2"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-4 " to="onbording3"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 mx-2" to="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>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'OnBording',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bar{
|
||||||
|
background-color: #e9c046;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,73 @@
|
||||||
|
<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 class="col-12 text-center justify-content-center col-lg-9 pt-1">
|
||||||
|
<div class="progress mx-auto ms-lg-3 mt-2 " style="width: 70%;height: 12px">
|
||||||
|
<div class="progress-bar bar" role="progressbar" style="width: 100%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">Please choose a soundscape</h4>
|
||||||
|
</div>
|
||||||
|
<div class=" pt-2 text-center">
|
||||||
|
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" checked>
|
||||||
|
<label class="btn btn-outline-warning py-3 px-5" for="success-outlined1">
|
||||||
|
<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-outlined1" 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 class=" pt-3 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 class="row pt-5 mt-2">
|
||||||
|
<div class="col-12 text-center pt-5 mt-3">
|
||||||
|
<NuxtLink class="btn btn-warning px-2 " to="onbording1"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording2"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-2 " to="onbording3"></NuxtLink>
|
||||||
|
<NuxtLink class="btn btn-warning px-4 mx-2" to="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>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'OnBording',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bar{
|
||||||
|
background-color: #e9c046;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,22 +0,0 @@
|
||||||
<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 class="col-9">
|
|
||||||
<div class="progress " style="width: 70%">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import TopLogoBar from "../components/toplogobar";
|
|
||||||
export default {
|
|
||||||
components: {TopLogoBar}
|
|
||||||
}
|
|
||||||
</script>
|
|
Loading…
Reference in New Issue