89 lines
3.0 KiB
Vue
89 lines
3.0 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">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">
|
|
<div class=" pt-3 ">
|
|
<div class="checkmark pt-2 d-block d-sm-inline-block d-inline-block">
|
|
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
|
|
<label class="btn px-4 checklabel" for="success-outlined1">
|
|
<p class=" p-0 m-0 text-center">Fix This Problem</p>
|
|
</label>
|
|
</div>
|
|
|
|
<nuxt-link to="" class="checkmark pt-2 d-inline-block">
|
|
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
|
<label class="btn checklabel px-5 ms-0 ms-sm-3 " for="danger-outlined1">
|
|
<p class="p-0 m-0 text-center">Try Again</p>
|
|
</label>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row pt-5 mt-0 mt-sm-4 ">
|
|
<div class="col-12 text-center pt-5 mt-3 pb-5 mb-2">
|
|
<NuxtLink class="btn btn-warning px-2 " @click.once="increment(25)" to="/onbording"></NuxtLink>
|
|
<NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(50)" to="/onbording/onbording2"></NuxtLink>
|
|
<NuxtLink class="btn btn-warning px-4 " @click.once="increment(75)" to="/onbording/onbording3"></NuxtLink>
|
|
<NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onbording/onbording4"></NuxtLink>
|
|
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import {useCounterStore} from '@/stores/counter';
|
|
|
|
import {mapActions, mapState} from "pinia";
|
|
|
|
export default {
|
|
name:'OnBording',
|
|
mounted() {
|
|
this.increment(75);
|
|
},
|
|
computed:{...mapState(useCounterStore,['count'])},
|
|
methods:{
|
|
...mapActions(useCounterStore,['increment']),
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style >
|
|
.checklabel:hover{
|
|
border-color: #e9c046;
|
|
}
|
|
.checklabel {
|
|
color: #e9c046 !important;
|
|
border: 1px solid #e9c046;
|
|
}
|
|
.checkmark .checklabel svg path{
|
|
/*background-color: white;*/
|
|
fill: #e9c046;
|
|
}
|
|
.checkmark input:checked ~ .checklabel {
|
|
background-color: #e9c046;
|
|
border: 1px solid #e9c046;
|
|
color: #f4f5f7 !important;
|
|
}
|
|
.checkmark input:checked ~ .checklabel svg path {
|
|
fill: white;
|
|
}
|
|
.checkmark input:hover ~ .checklabel {
|
|
background-color: #e9c046;
|
|
border: 1px solid #e9c046;
|
|
color: #f4f5f7 !important;
|
|
}
|
|
.checkmark input:hover ~ .checklabel svg path {
|
|
fill: white;
|
|
}
|
|
</style> |