dev-audioprocessing/pages/onboarding/index.vue

<template>
<div class="pb-5 text-center ">
  <div class="row">
    <div class="col-12">
      <h4 class="text-center fw-bold pt-5">{{t("What headphones do you use?")}}</h4>
      <h6 class="text-center text-muted">{{t("Make sure that your headphones are properly connected. ")}}</h6>
      <h6 class="text-center text-muted">{{t("To use Mindboost, headphones are required.")}} </h6>
    </div>
    <div class="col-12 pt-5">
      <div class="d-flex justify-content-center " >
        <a @click.prevent="saveSetting('In-ear')"  @click.once="increment(50)" class="checkmark pt-2 d-block d-sm-inline-block px-1">
          <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off">
          <label class="btn pt-4 checklabel" for="success-outlined1">
            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 41" fill="none">
              <path d="M17.5898 0.811735C17.0704 0.828036 16.5497 0.881469 16.0335 0.973454C14.6571 1.21875 13.3056 1.73717 12.0632 2.54377L9.91633 3.93595C8.15322 5.08089 6.83592 6.66321 6.01633 8.44298C5.9548 8.44877 5.89235 8.44837 5.83118 8.45705H5.82883C5.27096 8.53674 4.72856 8.73608 4.24211 9.05236C-0.00470667 11.8105 -1.28679 17.4562 1.44368 21.6219C4.17427 25.7877 9.86704 26.8902 14.114 24.132C14.2402 24.0501 14.3484 23.95 14.4632 23.8555V36.2C14.4632 38.5054 16.3578 40.4 18.6632 40.4H19.8632C22.1686 40.4 24.0632 38.5054 24.0632 36.2V20.5274C28.9053 17.2626 30.2598 10.6866 27.0491 5.78986H27.0468L26.9648 5.6633C24.8355 2.41578 21.2255 0.69763 17.5898 0.811735ZM42.4101 0.811735C38.7743 0.697629 35.1644 2.41583 33.0351 5.6633L32.9531 5.78986H32.9507C29.74 10.6866 31.0946 17.2626 35.9366 20.5274V36.2C35.9366 38.5054 37.8312 40.4 40.1366 40.4H41.3366C43.6421 40.4 45.5366 38.5054 45.5366 36.2V23.8555C45.6514 23.95 45.7597 24.0501 45.8859 24.132C50.1328 26.8902 55.8256 25.7877 58.5562 21.6219C61.2866 17.4562 60.0046 11.8105 55.7577 9.05236C55.2713 8.73608 54.7289 8.53674 54.171 8.45705H54.1687C54.1074 8.44836 54.0451 8.44879 53.9835 8.44298C53.164 6.66329 51.8466 5.08089 50.0835 3.93595L47.9366 2.54377C46.6943 1.73717 45.3428 1.21875 43.9663 0.973454C43.4502 0.881469 42.9295 0.828036 42.4101 0.811735ZM18.0773 3.19533C20.7631 3.23646 23.3759 4.56447 24.9585 6.97814V6.98048L25.0429 7.10705C27.5727 10.9684 26.4875 16.0998 22.6054 18.6219L22.146 18.9195L20.4585 20.0164C19.0325 20.942 17.4369 21.3736 15.8577 21.3664C15.8815 21.1774 15.8935 20.9857 15.8882 20.7922C15.8424 19.1469 15.3929 16.5578 13.5491 13.7469C11.8582 11.1689 9.89537 9.76806 8.42571 9.00548C9.0656 7.80828 9.99557 6.74705 11.2241 5.94923L13.371 4.5547C14.8275 3.6091 16.4658 3.17065 18.0773 3.19533ZM41.9226 3.19533C43.5341 3.17065 45.1723 3.6091 46.6288 4.5547L48.7757 5.94923C50.0043 6.74705 50.9343 7.80828 51.5741 9.00548C50.1045 9.76806 48.1416 11.1689 46.4507 13.7469C44.607 16.5578 44.1574 19.1469 44.1116 20.7922C44.1064 20.9849 44.1185 21.1758 44.1421 21.3641C42.563 21.3713 40.9673 20.942 39.5413 20.0164L37.8538 18.9195L37.3945 18.6219H37.3921C33.5113 16.0995 32.4275 10.9679 34.957 7.10705L34.9593 7.1047L35.0413 6.98048V6.97814C36.6239 4.56447 39.2367 3.23646 41.9226 3.19533ZM20.039 5.68908C19.6931 5.66459 19.3374 5.7395 19.0148 5.9258L15.8952 7.7258C15.0348 8.2226 14.7398 9.32399 15.2366 10.1844C15.7334 11.0448 16.8348 11.3398 17.6952 10.843L20.8148 9.04298C21.6752 8.54618 21.9702 7.44479 21.4734 6.58439C21.1629 6.04664 20.6154 5.72989 20.039 5.68908ZM39.9609 5.68908C39.3844 5.72989 38.837 6.04664 38.5265 6.58439C38.0297 7.44479 38.3247 8.54618 39.1851 9.04298L42.3046 10.843C43.165 11.3398 44.2664 11.0448 44.7632 10.1844C45.26 9.32399 44.965 8.2226 44.1046 7.7258L40.9851 5.9258C40.6624 5.7395 40.3067 5.66459 39.9609 5.68908ZM6.16633 10.8313C6.45002 10.791 6.73698 10.8327 6.99133 10.9531H6.99368C8.16454 11.5048 9.96642 12.6642 11.5406 15.0641C13.1144 17.4635 13.4524 19.5703 13.4882 20.8578C13.4966 21.1644 13.406 21.4577 13.2281 21.7133C13.1193 21.8691 12.98 22.0074 12.8085 22.1188C9.62027 24.1894 5.44974 23.3557 3.44993 20.3047C1.44999 17.2536 2.36155 13.1363 5.54993 11.0656C5.74204 10.9407 5.95215 10.8622 6.16633 10.8313ZM53.4093 10.8313C53.5479 10.8108 53.6897 10.8114 53.8312 10.8313C54.0461 10.862 54.2572 10.9403 54.4499 11.0656C57.6383 13.1363 58.5499 17.2536 56.5499 20.3047C54.5501 23.3557 50.3796 24.1894 47.1913 22.1188C47.0198 22.0074 46.8805 21.8691 46.7718 21.7133C46.5938 21.4577 46.5032 21.1644 46.5116 20.8578C46.5475 19.5703 46.8855 17.4635 48.4593 15.0641C50.0334 12.6642 51.8353 11.5048 53.0062 10.9531H53.0085C53.1353 10.8931 53.2707 10.8517 53.4093 10.8313ZM6.05852 15.2656C5.76145 15.271 5.47693 15.3864 5.26002 15.5894C5.04311 15.7925 4.90923 16.0688 4.8843 16.3649C4.79745 17.2567 4.99641 18.1921 5.51946 18.9945V18.9969C6.04326 19.7979 6.82084 20.3584 7.67336 20.6375C7.82448 20.6919 7.98497 20.7155 8.14535 20.7067C8.30573 20.698 8.46272 20.6572 8.60702 20.5866C8.75132 20.5161 8.87999 20.4173 8.98542 20.2962C9.09085 20.175 9.17088 20.0339 9.
            </svg>
            <p class=" text-center">{{t("In-Ear")}}</p>
          </label>
        </a>

        <a @click.prevent="saveSetting('Over-ear')" href="/onboarding/onboarding2"  @click.once="increment(50)" class="checkmark px-1 pt-2 d-inline-block">
          <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
          <label class="btn checklabel  ms-0 ms-sm-3 pt-4 " for="danger-outlined1">
            <svg xmlns="http://www.w3.org/2000/svg" width="54" height="58" viewBox="0 0 54 58" fill="none">
              <path d="M27.0001 0.199951C13.1288 0.199951 1.8001 10.9257 1.8001 24.2C1.64108 24.1977 1.48321 24.2271 1.33565 24.2864C1.18809 24.3457 1.05378 24.4337 0.940536 24.5454C0.827293 24.657 0.737369 24.7901 0.675992 24.9368C0.614615 25.0835 0.583008 25.2409 0.583008 25.4C0.583008 25.559 0.614615 25.7164 0.675992 25.8631C0.737369 26.0098 0.827293 26.1429 0.940536 26.2545C1.05378 26.3662 1.18809 26.4542 1.33565 26.5135C1.48321 26.5728 1.64108 26.6022 1.8001 26.6H4.2001C4.35911 26.6022 4.51699 26.5728 4.66455 26.5135C4.81211 26.4542 4.94642 26.3662 5.05966 26.2545C5.1729 26.1429 5.26283 26.0098 5.32421 25.8631C5.38558 25.7164 5.41719 25.559 5.41719 25.4C5.41719 25.2409 5.38558 25.0835 5.32421 24.9368C5.26283 24.7901 5.1729 24.657 5.05966 24.5454C4.94642 24.4337 4.81211 24.3457 4.66455 24.2864C4.51699 24.2271 4.35911 24.1977 4.2001 24.2C4.2001 23.7831 4.24116 23.3759 4.26572 22.9648C4.43311 23.025 4.61178 23.0472 4.78882 23.0299C4.96585 23.0126 5.13682 22.9561 5.28935 22.8646C5.44188 22.7731 5.57216 22.6488 5.67077 22.5007C5.76937 22.3527 5.83382 22.1846 5.85947 22.0085C6.25598 19.7694 8.06579 16.0126 11.4915 12.9406C14.9172 9.86853 19.9202 7.39995 26.8782 7.39995C33.8363 7.39995 38.8392 9.86853 42.2649 12.9406C45.6907 16.0126 47.5005 19.7694 47.897 22.0085C47.9257 22.2067 48.0035 22.3946 48.1235 22.555C48.2434 22.7154 48.4015 22.8433 48.5835 22.9269C48.7654 23.0105 48.9654 23.0473 49.1652 23.0339C49.365 23.0204 49.5583 22.9572 49.7274 22.85C49.7568 23.2987 49.8001 23.7443 49.8001 24.2C49.6411 24.1977 49.4832 24.2271 49.3357 24.2864C49.1881 24.3457 49.0538 24.4337 48.9405 24.5454C48.8273 24.657 48.7374 24.7901 48.676 24.9368C48.6146 25.0835 48.583 25.2409 48.583 25.4C48.583 25.559 48.6146 25.7164 48.676 25.8631C48.7374 26.0098 48.8273 26.1429 48.9405 26.2545C49.0538 26.3662 49.1881 26.4542 49.3357 26.5135C49.4832 26.5728 49.6411 26.6022 49.8001 26.6H52.2001C52.3591 26.6022 52.517 26.5728 52.6646 26.5135C52.8121 26.4542 52.9464 26.3662 53.0597 26.2545C53.1729 26.1429 53.2628 26.0098 53.3242 25.8631C53.3856 25.7164 53.4172 25.559 53.4172 25.4C53.4172 25.2409 53.3856 25.0835 53.3242 24.9368C53.2628 24.7901 53.1729 24.657 53.0597 24.5454C52.9464 24.4337 52.8121 24.3457 52.6646 24.2864C52.517 24.2271 52.3591 24.1977 52.2001 24.2C52.2001 10.9257 40.8714 0.199951 27.0001 0.199951ZM27.0001 2.59995C36.7759 2.59995 45.0442 8.40813 48.3001 16.5453C47.2456 14.7351 45.7788 12.8681 43.8681 11.1546C40.0467 7.72778 34.4102 4.99995 26.8782 4.99995C19.3463 4.99995 13.7098 7.72778 9.88838 11.1546C8.38471 12.5031 7.16617 13.9464 6.19697 15.3828C9.75016 7.85995 17.6954 2.59995 27.0001 2.59995ZM1.8001 29V32.3656H1.87744C1.16126 33.0442 0.600099 34.1599 0.600099 35.6867C0.600099 36.9166 0.944207 38.6936 1.50479 40.8828C2.06537 43.072 2.85604 45.6026 3.79463 48.0265C4.73322 50.4505 5.81147 52.7615 7.00557 54.5445C8.19966 56.3274 9.51734 57.8 11.4001 57.8C12.9329 57.8 14.0356 56.8506 14.597 55.8757V55.8734C14.6497 55.782 14.6744 55.7058 14.7142 55.6203C15.2085 55.7722 15.7581 55.8429 16.3478 55.8429C17.0539 55.8429 17.7492 55.643 18.2837 55.2289C18.8182 54.8148 19.1535 54.234 19.3407 53.6398C19.7153 52.4514 19.6242 51.1328 19.3829 49.6906C18.9003 46.8062 17.6763 43.423 16.6853 40.8007C15.6922 38.1712 14.8024 35.6905 13.7368 33.7554C13.204 32.7879 12.6286 31.9459 11.9017 31.2968C11.1747 30.6477 10.2386 30.2 9.21572 30.2C7.91436 30.2 6.74198 30.7632 6.09151 31.7093C6.06457 31.7485 6.05102 31.7935 6.02588 31.8335C5.58067 31.6178 4.9809 31.4 4.2001 31.4V29H1.8001ZM49.8001 29V31.4C49.0193 31.4 48.4195 31.6178 47.9743 31.8335C47.9492 31.7935 47.9356 31.7485 47.9087 31.7093C47.2582 30.7633 46.0858 30.2 44.7845 30.2C43.7616 30.2 42.8255 30.6477 42.0985 31.2968C41.3716 31.9459 40.7962 32.7879 40.2634 33.7554C39.1978 35.6905 38.308 38.1712 37.3149 40.8007C36.3239 43.423 35.0999 46.8062 34.6173 49.6906C34.376 51.1328 34.2849 52.4514 34.6595 53.6398C34.8467 54.234 35.182 54.8148 35.7165 55.2289C36.251 55.643 36.9463 55.8429 37.6524 55.8429C38.2413 55.8429 38.7899 55.7718 39.2837 55.6203C39.3237 55.7066 39.3499 55.7835 39.4032 55.8757C39.9647 56.8506 41
            </svg>
            <p class="text-center" >{{t("Over-Ear")}}</p>
          </label>
        </a>
      </div>
      </div>
  </div>

</div>
</template>

<script>
import {useCounterStore} from '@/stores/counter';
import {mapState,mapActions} from "pinia";
// const counter=useCounterStore();
export default {
  setup() {
    const { t } = useI18n()
    const localePath = useLocalePath()

    return {
      t,
      localePath,
    }
  },
  mounted() {
    this.increment(25);
  },
  data(){
    return {
    form:{
      headphone_type:'',
    }
    }
  },
  computed:{...mapState(useCounterStore,['count'])},
  methods:{
    ...mapActions(useCounterStore,['increment']),
    ...mapActions(useCounterStore,['decrement']),

    saveSetting(value){
      this.form.headphone_type=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/onboarding2'));
        }
      }).catch((e)=>{
        this.$toast.error("something went wrong while saving...");
      })
    }


  }
}
</script>
<style scoped>

.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>