99 lines
14 KiB
Vue
99 lines
14 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">What are your plans for today?</h4>
|
|
</div>
|
|
<div class=" pt-5 text-center">
|
|
<div class=" d-flex mx-auto justify-content-center">
|
|
<div class="checkmark px-1 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 pt-4 px-5 checklabel" for="success-outlined1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 51 56" fill="none">
|
|
<path d="M21.1334 0.400024C14.5918 0.400024 10.3879 3.42115 9.07481 6.66487C3.92264 7.7604 0.299805 13.3969 0.299805 19.5977C0.299805 22.1501 1.04031 24.7056 2.32246 27.543C1.27516 28.8243 0.299805 30.431 0.299805 32.8C0.299805 35.905 2.33287 38.8964 5.95527 40.5625C4.81761 43.2096 5.06151 45.7629 6.41699 47.5797C7.82489 49.4668 10.1907 50.4487 12.7311 50.643C13.5012 52.6657 14.8882 54.0709 16.4248 54.7399C18.1748 55.5017 19.9654 55.6 21.1334 55.6C22.9191 55.6 24.4848 54.7584 25.5021 53.4532C26.5189 54.7508 28.0799 55.5872 29.8568 55.6H29.8592C30.9634 55.608 32.7467 55.5073 34.5115 54.7469C36.0345 54.0907 37.4192 52.7093 38.2123 50.7391C40.1307 50.6772 42.1153 50.393 43.7975 49.4453C45.6874 48.3806 47.0998 46.365 47.0998 43.6C47.0998 42.5189 46.7101 41.521 46.249 40.518C47.79 39.7519 49.0042 38.7713 49.6686 37.5602C50.506 36.0336 50.6998 34.3601 50.6998 32.8C50.6998 30.4081 49.5701 28.9692 48.4732 27.7938C49.7746 24.9567 50.7422 22.2145 50.6998 19.5789C50.5882 12.5777 45.87 7.66286 40.7529 6.64612C39.6126 3.64866 36.3701 0.400024 29.8662 0.400024C28.2293 0.400024 26.6389 0.820542 25.6357 2.11331C25.5863 2.17706 25.5461 2.24854 25.4998 2.31487C25.4536 2.24854 25.4133 2.17706 25.3639 2.11331C24.3607 0.820542 22.7703 0.400024 21.1334 0.400024ZM21.1334 2.80002C22.4281 2.80002 23.0204 3.0063 23.4678 3.58284C23.9151 4.15937 24.2998 5.45361 24.2998 7.82268V14.5985C24.2784 14.7281 24.2784 14.8603 24.2998 14.9899V19.6H20.6998V13.6H15.6748C15.174 12.2112 13.8516 11.2 12.2998 11.2C10.3258 11.2 8.69981 12.826 8.69981 14.8C8.69981 16.774 10.3258 18.4 12.2998 18.4C13.8516 18.4 15.174 17.3888 15.6748 16H18.2998V22H24.2998V31.6H15.8998V39.025C14.511 39.5259 13.4998 40.8482 13.4998 42.4C13.4998 44.374 15.1258 46 17.0998 46C19.0738 46 20.6998 44.374 20.6998 42.4C20.6998 40.8482 19.6886 39.5259 18.2998 39.025V34H24.2998V42.1985C24.2784 42.3281 24.2784 42.4603 24.2998 42.5899V49.9985C24.2998 51.9622 23.0282 53.2 21.1334 53.2C20.1222 53.2 18.6352 53.084 17.3834 52.5391C16.1316 51.9942 15.1164 51.1409 14.6646 49.3117L14.4396 48.4H13.4998C11.2991 48.4 9.34017 47.4843 8.34121 46.1453C7.34225 44.8064 7.07782 43.0564 8.53106 40.6141L9.29043 39.3368L7.88184 38.8633C4.21975 37.6325 2.6998 35.1712 2.6998 32.8C2.6998 30.7364 3.46575 29.6956 4.54902 28.511L5.01543 28H8.9248C9.42564 29.3888 10.748 30.4 12.2998 30.4C14.2738 30.4 15.8998 28.774 15.8998 26.8C15.8998 24.826 14.2738 23.2 12.2998 23.2C10.748 23.2 9.42564 24.2112 8.9248 25.6H4.05918C3.1496 23.3842 2.6998 21.4736 2.6998 19.5977C2.6998 14.0899 6.15035 9.26908 10.0451 8.79065L10.8373 8.69456L11.0529 7.92815C11.5902 6.03895 14.9868 2.80002 21.1334 2.80002ZM29.8662 2.80002C36.0128 2.80002 38.1175 5.71925 38.7467 7.92815L38.9646 8.69456L39.7545 8.79065C43.8006 9.28767 48.2006 13.3957 48.2998 19.6188C48.3353 21.827 47.432 24.5196 46.017 27.4821L45.6537 28.2438L46.2443 28.8414C47.4953 30.1105 48.2998 30.7856 48.2998 32.8C48.2998 34.1524 48.1154 35.3993 47.5639 36.4047C47.2125 37.0453 46.6816 37.6106 45.8998 38.0992V32.8H35.0998V28.975C36.4886 28.4742 37.4998 27.1518 37.4998 25.6C37.4998 23.626 35.8738 22 33.8998 22C31.9258 22 30.2998 23.626 30.2998 25.6C30.2998 27.1518 31.311 28.4742 32.6998 28.975V35.2H43.4998V39.8289C43.4584 40.1029 43.513 40.3828 43.6545 40.6211C43.6553 40.6219 43.6561 40.6227 43.6568 40.6235C44.2787 41.8929 44.6998 42.9695 44.6998 43.6C44.6998 45.635 43.9236 46.6195 42.6186 47.3547C41.3135 48.0899 39.3904 48.4 37.4998 48.4H36.56L36.335 49.3117C35.8864 51.1279 34.8389 51.9938 33.5623 52.5438C32.2857 53.0938 30.7922 53.2066 29.8756 53.2C27.9706 53.1863 26.6998 51.9622 26.6998 49.9985V43.6H31.7248C32.2256 44.9888 33.548 46 35.0998 46C37.0738 46 38.6998 44.374 38.6998 42.4C38.6998 40.426 37.0738 38.8 35.0998 38.8C33.548 38.8 32.2256 39.8112 31.7248 41.2H26.6998V33.0016C26.7212 32.872 26.7212 32.7398 26.6998 32.6102V21.0016C26.7212 20.872 26.7212 20.7398 26.6998 20.6102V16H36.5248C37.0256 17.3888 38.348 18.4 39.8998 18.4C41.8738 18.4 43.4998 16.774 43.4998 14.8C43.4998 12.826 41.8738 11.2 39.8998 11.2C38.348 11.2 37.0256 12.2112 36.5248 13.6H26.6998V7.82268C26.6998 5.45361 27.0845 4.15937 27.5318 3.58284C27.9792 3.0063 28.5715 2.80002 29.8662 2.80002ZM12.2998 13.6C12.9524 13.6 13.4499 14.0906 13.4857 14.7321C13.4831 14.7781 13.4831 14.8243 13.4857 14.8703C13.4488 15.5106 12.9516 16 12.2998 16C11.6229 16 11.0998 15.477 11.0998 14.8C11.0998 14.1231 11.6229 13.6 12.2998 13.6ZM39.8998 13.6C40.5768 13.6 41.0998 14.1231 41.0998 14.8C41.0998 15.477 40.5768 16 39.8998 16C39.2472 16 38.7497 15.5095 38.7139 14.868C38.7165 14.8219 38.7165 14.7758 38.7139 14.7297C38.7508 14.0894 39.248 13.6 39.8998 13.6ZM33.8998 24.4C34.5768 24.4 35.0998 24.9231 35.0998 25.6C35.0998 26.2526 34.6092 26.7501 33.9678 26.786C33.9389 26.7841 33.91 26.7834 33.8811 26.7836C33.8639 26.784 33.8467 26.7848 33.8295 26.786C33.1892 26.749 32.6998 26.2518 32.6998 25.6C32.6998 24.9231 33.2229 24.4 33.8998 24.4ZM12.2998 25.6C12.9768 25.6 13.4998 26.1231 13.4998 26.8C13.4998 27.477 12.9768 28 12.2998 28C11.6472 28 11.1497 27.5095 11.1139 26.868C11.1165 26.8219 11.1165 26.7758 11.1139 26.7297C11.1508 26.0894 11.648 25.6 12.2998 25.6ZM35.0998 41.2C35.7768 41.2 36.2998 41.7231 36.2998 42.4C36.2998 43.077 35.7768 43.6 35.0998 43.6C34.4472 43.6 33.9497 43.1095 33.9139 42.468C33.9165 42.4219 33.9165 42.3758 33.9139 42.3297C33.9508 41.6894 34.448 41.2 35.0998 41.2ZM17.0318 41.2141C17.0779 41.2168 17.1241 41.2168 17.1701 41.2141C17.8104 41.251 18.2998 41.7482 18.2998 42.4C18.2998 43.077 17.7768 43.6 17.0998 43.6C16.4228 43.6 15.8998 43.077 15.8998 42.4C15.8998 41.7474 16.3904 41.2499 17.0318 41.2141Z" fill="white"/>
|
|
</svg>
|
|
<p class=" text-center">Creativity</p>
|
|
</label>
|
|
</div>
|
|
|
|
<nuxt-link to="/onboarding/onboarding4" @click.once="increment(100)" class="checkmark pt-2 px-1 d-inline-block">
|
|
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
|
<label class="btn checklabel checklabel123 ms-0 ms-sm-3 pt-4 px-4" for="danger-outlined1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 57 60" fill="none">
|
|
<path d="M23.6999 0C16.4858 0 12.2343 3.93281 10.8749 7.3875C7.153 8.08125 3.79675 10.575 2.09988 14.475C0.356125 18.4781 0.431125 23.8641 3.18738 29.925C1.62644 31.9594 0.721751 34.5797 1.16238 37.2375C1.59363 39.8625 3.41238 42.3094 6.56238 43.7625C5.28738 46.7063 5.69988 49.5797 7.31238 51.6C8.98581 53.7 11.7093 54.8531 14.5499 55.05C15.3889 57.2484 16.9452 58.7063 18.6374 59.325C20.5499 60.0234 22.4952 60 23.6999 60C25.6733 60 27.4077 59.0578 28.4999 57.6C29.5921 59.0531 31.3311 59.9859 33.2999 60C34.6405 60.0094 36.5858 59.6719 38.4749 58.65C40.1389 57.75 41.6202 56.1422 42.4499 53.925C45.1405 53.8313 47.803 53.2688 49.5749 51.5625C50.5452 50.625 51.1733 49.3313 51.2624 47.8125C51.3327 46.6125 50.9858 45.2531 50.3999 43.8C53.5874 42.3563 55.4811 39.9188 55.9499 37.275C56.4233 34.6219 55.4671 31.9641 53.8124 29.925C56.5686 23.8641 56.6436 18.4781 54.8999 14.475C53.203 10.575 49.8468 8.08125 46.1249 7.3875C44.7655 3.93281 40.5139 0 33.2999 0C31.5186 0 29.8405 0.459376 28.7624 1.8375C28.6639 1.96406 28.5843 2.11406 28.4999 2.25C28.4155 2.11406 28.3358 1.96406 28.2374 1.8375C27.1593 0.459376 25.4811 0 23.6999 0ZM23.6999 2.4C25.1436 2.4 25.8421 2.63906 26.3624 3.3C26.8827 3.96094 27.2999 5.39531 27.2999 7.9875V54C27.2999 56.1891 25.8468 57.6 23.6999 57.6C22.5046 57.6 20.8499 57.5813 19.4624 57.075C18.0749 56.5688 16.9639 55.7156 16.4624 53.7L16.2374 52.8H15.2999C12.8671 52.8 10.4718 51.7078 9.18738 50.1C7.903 48.4922 7.51863 46.4578 9.11238 43.8L9.89988 42.525L8.47488 42.075C5.22175 40.9922 3.88113 39.0094 3.52488 36.8625C3.178 34.7531 3.928 32.4234 5.28738 30.9C5.3155 30.8766 5.33894 30.8531 5.36238 30.825L5.39988 30.7875C5.39988 30.7875 8.3155 27.6 11.6999 27.6C15.9749 27.6 18.0749 29.6625 18.0749 29.6625C18.3702 30.0141 18.8436 30.1641 19.2843 30.0516C19.7296 29.9391 20.0718 29.5781 20.1655 29.1328C20.2593 28.6828 20.0858 28.2188 19.7249 27.9375C19.7249 27.9375 16.7952 25.2 11.6999 25.2C8.70456 25.2 6.27644 26.7609 4.87488 27.9375C2.77956 22.8047 2.96238 18.5484 4.31238 15.45C5.79363 12.0422 8.67644 9.97969 11.8124 9.6L12.6374 9.4875L12.8249 8.7375C13.4718 6.47813 16.9686 2.4 23.6999 2.4ZM33.2999 2.4C40.0311 2.4 43.528 6.47813 44.1749 8.7375L44.3624 9.4875L45.1874 9.6C48.3233 9.97969 51.2061 12.0422 52.6874 15.45C54.0139 18.4969 54.2202 22.6547 52.2374 27.675C51.8858 27.8391 51.6374 28.1578 51.5624 28.5375C51.5624 28.5375 51.3186 29.6531 49.9874 30.9375C48.6561 32.2219 46.2514 33.6 41.6999 33.6C41.2686 33.5953 40.8655 33.8203 40.6452 34.1953C40.4296 34.5703 40.4296 35.0297 40.6452 35.4047C40.8655 35.7797 41.2686 36.0047 41.6999 36C46.7483 36 49.8608 34.3781 51.6374 32.6625C51.9421 32.3719 52.1952 32.0906 52.4249 31.8C53.4186 33.2438 53.8968 35.0859 53.5874 36.825C53.2077 38.9625 51.7827 40.9875 48.5249 42.075L47.2124 42.4875L47.8124 43.725C48.6468 45.3984 48.9186 46.7063 48.8624 47.6625C48.8061 48.6188 48.4733 49.275 47.8874 49.8375C46.7389 50.9438 44.3952 51.5766 41.8499 51.6C40.3124 51.0516 39.1171 50.2641 38.2874 49.2C37.4202 48.0844 36.8999 46.5984 36.8999 44.4C36.9093 44.0297 36.7452 43.6781 36.4593 43.4438C36.178 43.2094 35.7983 43.1203 35.4374 43.2C34.8796 43.3266 34.4858 43.8281 34.4999 44.4C34.4999 47.0016 35.1796 49.1156 36.4124 50.7C37.4014 51.9703 38.7139 52.8375 40.1999 53.475C39.5811 54.9328 38.5171 55.8984 37.3124 56.55C35.8546 57.3375 34.1811 57.6047 33.2999 57.6C31.1436 57.5859 29.6999 56.1891 29.6999 54V7.9875C29.6999 5.39531 30.1171 3.96094 30.6374 3.3C31.1577 2.63906 31.8561 2.4 33.2999 2.4ZM21.1874 11.9625C21.1358 11.9719 21.0843 11.9859 21.0374 12C20.4796 12.1266 20.0858 12.6281 20.0999 13.2C20.0999 13.4016 19.8936 14.3813 19.0874 15.1875C18.2811 15.9938 16.8608 16.8 14.0999 16.8C13.6686 16.7953 13.2655 17.0203 13.0452 17.3953C12.8296 17.7703 12.8296 18.2297 13.0452 18.6047C13.2655 18.9797 13.6686 19.2047 14.0999 19.2C17.3389 19.2 19.5233 18.2063 20.8124 16.9125C22.1014 15.6188 22.4999 14.1984 22.4999 13.2C22.5139 12.8531 22.3733 12.5203 22.1249 12.2859C21.8718 12.0469 21.5296 11.9297 21.1874 11.9625ZM37.9874 14.3625C37.9358 14.3719 37.8843 14.3859 37.8374 14.4C37.2796 14.5266 36.8858 15.0281 36.8999 15.6C36.8999 17.1984 37.6124 19.2375 39.3374 20.9625C41.0624 22.6875 43.8327 24 47.6999 24C48.1311 24.0047 48.5343 23.7797 48.7546 23.4047C48.9702 23.0297 48.9702 22.5703 48.7546 22.1953C48.5343 21.8203 48.1311 21.5953 47.6999 21.6C44.3671 21.6 42.3374 20.5125 41.0624 19.2375C39.7874 17.9625 39.2999 16.4016 39.2999 15.6C39.3139 15.2531 39.1733 14.9203 38.9249 14.6859C38.6718 14.4469 38.3296 14.3297 37.9874 14.3625ZM11.3999 36C10.7389 36.0188 10.2186 36.5766 10.2374 37.2375C10.2561 37.8984 10.8139 38.4188 11.4749 38.4C14.6999 38.9344 16.0874 40.6547 16.8749 42.4875C17.6624 44.3203 17.6999 46.2 17.6999 46.8C17.6952 47.2313 17.9202 47.6344 18.2952 47.8547C18.6702 48.0703 19.1296 48.0703 19.5046 47.8547C19.8796 47.6344 20.1046 47.2313 20.0999 46.8C20.0999 46.2047 20.0999 43.8797 19.0874 41.5125C18.0749 39.1453 15.8764 36.6656 11.8874 36C11.7608 35.9813 11.6389 35.9813 11.5124 36C11.4749 36 11.4374 36 11.3999 36Z" fill="#E9C046"/>
|
|
</svg>
|
|
<p class="text-center px-1" >Concentration</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="/onboarding"></NuxtLink>
|
|
<NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(50)" to="/onboarding/onboarding2"></NuxtLink>
|
|
<NuxtLink class="btn btn-warning px-4 " @click.once="increment(75)" to="/onboarding/onboarding3"></NuxtLink>
|
|
<NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onboarding/onboarding4"></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 {mapState,mapActions} from "pinia";
|
|
export default {
|
|
mounted() {
|
|
this.increment(75);
|
|
},
|
|
computed:{...mapState(useCounterStore,['count'])},
|
|
methods:{
|
|
...mapActions(useCounterStore,['increment']),
|
|
},
|
|
data(){
|
|
return{
|
|
bar_val:25,
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bar{
|
|
background-color: #e9c046;
|
|
}
|
|
.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> |