65 lines
2.6 KiB
Vue
65 lines
2.6 KiB
Vue
<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">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 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>
|
|
export default {
|
|
name:'OnBording',
|
|
data(){
|
|
return{
|
|
bar_val:100,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.bar{
|
|
background-color: #e9c046;
|
|
}
|
|
</style> |