118 lines
3.1 KiB
Vue
118 lines
3.1 KiB
Vue
<template>
|
||
<div>
|
||
<div class="row">
|
||
<div class="col-12 ">
|
||
<h4 class="text-center fw-bold pt-5">{{t("How is your audio hardware connected?")}}</h4>
|
||
<p class="text-center mb-0 pb-0 text-muted">As input, please select the microphone of your laptop or mobile device – not of your headphones.</p>
|
||
<p class="text-center mt-0 pt-0 text-muted">To use Mindboost, headphones are required.</p>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-11 pt-md-4">
|
||
<form>
|
||
<div class="row justify-content-center ">
|
||
<div class="col-md-3 text-center">
|
||
<h6 class="pb-0 mb-0">Input device:</h6>
|
||
<p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select laptop or mobile device microphone)</p>
|
||
<select class="form-select pt-1 mt-0 select-box ">
|
||
<option>Internal Microphone</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row justify-content-center pt-3">
|
||
<div class="col-md-3 text-center">
|
||
<h6 class="pb-0 mb-0 " >Output device:</h6>
|
||
<p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select headphones or headphone output)</p>
|
||
<select class="form-select pt-1 mt-0 select-box ">
|
||
<option>Audio Output</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row justify-content-center pt-3">
|
||
<div class="col-md-3 text-center" style="z-index: 1000000;">
|
||
<NuxtLink :to="localePath('onboarding')" style="z-index: 1000000" class="btn col-4 next-btn" >NEXT</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {useCounterStore} from '@/stores/counter';
|
||
import {mapState,mapActions} from "pinia";
|
||
export default {
|
||
setup() {
|
||
const { t } = useI18n()
|
||
const localePath = useLocalePath()
|
||
|
||
return {
|
||
t,
|
||
localePath,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.increment(100);
|
||
},
|
||
computed:{...mapState(useCounterStore,['count'])},
|
||
|
||
data(){
|
||
return{
|
||
bar_val:100,
|
||
form:{
|
||
soundscape:'',
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
...mapActions(useCounterStore,['increment']),
|
||
...mapActions(useCounterStore,['decrement']),
|
||
saveSetting(value){
|
||
this.form.soundscape=value;
|
||
this.$axios.post('/api/update-setting',this.form).then(({data})=>{
|
||
console.log(data);
|
||
if(data.success){
|
||
// this.$toast.success(data.message);
|
||
this.$router.push(this.localePath('onboarding'));
|
||
}
|
||
}).catch((e)=>{
|
||
this.$toast.error("something went wrong while saving...");
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bar{
|
||
background-color: #e9c046;
|
||
}
|
||
|
||
.select-box{
|
||
border: 2px solid #e9c046;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.select-box:focus{
|
||
border: 2px solid #e9c046;
|
||
box-shadow: none;
|
||
|
||
}
|
||
.next-btn{
|
||
background: #e9c046;
|
||
color: white;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
padding: 8px 10px;
|
||
}
|
||
.next-btn:hover{
|
||
background: #e9c046;
|
||
color: white;
|
||
}
|
||
</style>
|