95 lines
16 KiB
Vue
95 lines
16 KiB
Vue
<template>
|
|
<div class="pb-5">
|
|
<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 headphones do you use?</h4>
|
|
<h6 class="text-center text-muted">Make sure that your headphones are properly connected. </h6>
|
|
<h6 class="text-center text-muted">To use Mindboost, headphones are required. </h6>
|
|
</div>
|
|
<div class="row pt-5 text-center">
|
|
<div class="d-flex mx-auto justify-content-center ">
|
|
<nuxt-link to="/onboarding/onboarding2" @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 px-5 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.22077 19.8812C9.27067 19.7286 9.28941 19.5674 9.27589 19.4074C9.26237 19.2473 9.21687 19.0916 9.14207 18.9495C9.06727 18.8074 8.9647 18.6817 8.84045 18.5799C8.71619 18.4782 8.57276 18.4024 8.41868 18.357C8.04783 18.2356 7.74573 18.0129 7.5304 17.6844C7.31664 17.3565 7.23463 16.9866 7.27258 16.5969C7.29123 16.4275 7.27358 16.256 7.22079 16.0939C7.16799 15.9318 7.08128 15.7828 6.96641 15.6569C6.85155 15.5309 6.71117 15.4309 6.55462 15.3634C6.39808 15.296 6.22896 15.2626 6.05852 15.2656ZM53.9062 15.2656C53.7387 15.2676 53.5735 15.3046 53.4212 15.3742C53.2688 15.4439 53.1328 15.5446 53.0217 15.67C52.9107 15.7954 52.8271 15.9427 52.7764 16.1023C52.7257 16.2619 52.709 16.4304 52.7273 16.5969C52.7652 16.9866 52.6832 17.3565 52.4695 17.6844C52.2541 18.0129 51.952 18.2356 51.5812 18.357C51.4271 18.4024 51.2837 18.4782 51.1594 18.5799C51.0352 18.6817 50.9326 18.8074 50.8578 18.9495C50.783 19.0916 50.7375 19.2473 50.724 19.4074C50.7104 19.5674 50.7292 19.7286 50.7791 19.8812C50.829 20.0339 50.909 20.175 51.0144 20.2962C51.1199 20.4173 51.2485 20.5161 51.3928 20.5866C51.5371 20.6572 51.6941 20.698 51.8545 20.7067C52.0149 20.7155 52.1754 20.6919 52.3265 20.6375C53.179 20.3584 53.9566 19.7979 54.4804 18.9969V18.9945C55.0034 18.1921 55.2024 17.2567 55.1156 16.3649C55.0901 16.0628 54.9512 15.7815 54.7269 15.5776C54.5025 15.3737 54.2093 15.2622 53.9062 15.2656ZM21.6632 22.0883V36.2C21.6632 37.209 20.8722 38 19.8632 38H18.6632C17.6542 38 16.8632 37.209 16.8632 36.2V23.7195C18.5219 23.569 20.1681 23.0361 21.6632 22.0883ZM38.3366 22.0883C39.8317 23.0361 41.4779 23.569 43.1366 23.7195V36.2C43.1366 37.209 42.3456 38 41.3366 38H40.1366C39.1277 38 38.3366 37.209 38.3366 36.2V22.0883Z" fill="white"/>
|
|
</svg>
|
|
<p class=" text-center">In-Ear</p>
|
|
</label>
|
|
</nuxt-link>
|
|
|
|
<nuxt-link to="/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 px-5" 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.0673 57.8 42.6001 57.8C44.4829 57.8 45.8005 56.3274 46.9946 54.5445C48.1887 52.7615 49.267 50.4505 50.2056 48.0265C51.1442 45.6026 51.9348 43.072 52.4954 40.8828C53.056 38.6936 53.4001 36.9166 53.4001 35.6867C53.4001 34.1599 52.8389 33.0442 52.1228 32.3656H52.2001V29H49.8001ZM9.21572 32.6C9.58544 32.6 9.8881 32.7189 10.3009 33.0875C10.7137 33.456 11.1779 34.0841 11.6345 34.9132C12.5477 36.5716 13.4398 39.0011 14.4399 41.6492C15.4181 44.2374 16.5938 47.5651 17.0157 50.0867C17.2267 51.3475 17.2126 52.4047 17.0509 52.9179C16.97 53.1745 16.8852 53.2754 16.8142 53.3304C16.7431 53.3855 16.6448 53.4429 16.3478 53.4429C15.4876 53.4429 15.2539 53.3253 15.0353 53.1312C14.8166 52.9371 14.5254 52.4474 14.1235 51.5585C13.3578 49.865 12.0019 46.0473 10.8587 42.9734C10.2921 41.4499 9.62315 39.6125 9.06104 38.0046C8.49926 36.3978 8.0338 34.956 7.92432 34.482V34.4796C7.77277 33.819 7.88282 33.3404 8.06963 33.0687C8.25675 32.7965 8.52629 32.6 9.21572 32.6ZM44.7845 32.6C45.4739 32.6 45.7435 32.7965 45.9306 33.0687C46.1177 33.3409 46.2285 33.8196 46.0759 34.482C45.9664 34.956 45.5009 36.3978 44.9392 38.0046C44.377 39.6125 43.7081 41.4499 43.1415 42.9734C41.9984 46.0471 40.6418 49.8639 39.8767 51.5585C39.4748 52.4474 39.1836 52.9371 38.9649 53.1312C38.7463 53.3253 38.5126 53.4429 37.6524 53.4429C37.3554 53.4429 37.2571 53.3855 37.186 53.3304C37.115 53.2754 37.0302 53.1745 36.9493 52.9179C36.7876 52.4047 36.7735 51.3475 36.9845 50.0867C37.4064 47.5651 38.5821 44.2374 39.5603 41.6492C40.5604 39.0011 41.4525 36.5716 42.3657 34.9132C42.8223 34.0841 43.2865 33.456 43.6993 33.0875C44.1121 32.7189 44.4148 32.6 44.7845 32.6ZM4.2001 33.8C4.67265 33.8 4.85099 33.8903 5.11182 34.0367C5.20521 34.0891 5.34191 34.1824 5.47744 34.2687C5.49763 34.5181 5.52782 34.7695 5.58525 35.0187C5.58525 35.0195 5.58525 35.0203 5.58525 35.021C5.76894 35.8175 6.22455 37.1662 6.79463 38.7968C7.36471 40.4275 8.0377 42.2748 8.60869 43.8101C9.74066 46.8538 11.0585 50.6028 11.9368 52.5453C12.1922 53.11 12.4347 53.622 12.7407 54.0875C12.7293 54.1232 12.706 54.1737 12.6962 54.2046C12.6188 54.4477 12.5736 54.5797 12.5181 54.6757C12.3281 55.0061 11.8489 55.4 11.4001 55.4C11.0329 55.4 10.0255 54.7432 8.99776 53.2085C7.96997 51.6739 6.92948 49.4808 6.03057 47.1593C5.13166 44.8379 4.36608 42.3818 3.82979 40.2875C3.29349 38.1931 3.0001 36.3887 3.0001 35.6867C3.0001 34.5311 3.31788 34.2212 3.57901 34.0273C3.84013 33.8334 4.24936 33.8 4.2001 33.8ZM49.8001 33.8C49.7508 33.8 50.1601 33.8334 50.4212 34.0273C50.6823 34.2212 51.0001 34.5311 51.0001 35.6867C51.0001 36.3887 50.7067 38.1931 50.1704 40.2875C49.6341 42.3818 48.8685 44.8379 47.9696 47.1593C47.0707 49.4808 46.0302 51.6739 45.0024 53.2085C43.9747 54.7432 42.9673 55.4 42.6001 55.4C42.1513 55.4 41.6722 55.006 41.4821 54.6757C41.4266 54.5797 41.3814 54.4477 41.304 54.2046C41.2942 54.1737 41.2709 54.1232 41.2595 54.0875C41.5655 53.622 41.8081 53.11 42.0634 52.5453C42.9399 50.6039 44.2594 46.854 45.3915 43.8101C45.9625 42.2748 46.6355 40.4275 47.2056 38.7968C47.7757 37.1662 48.2313 35.8175 48.4149 35.021C48.4149 35.0203 48.4149 35.0195 48.4149 35.0187C48.4724 34.7695 48.5026 34.5181 48.5228 34.2687C48.6583 34.1824 48.795 34.0891 48.8884 34.0367C49.1492 33.8903 49.3276 33.8 49.8001 33.8Z" fill="#E9C046"/>
|
|
</svg>
|
|
<p class="text-center" >Over-Ear</p>
|
|
</label>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-0 pt-sm-5 mt-0 mt-sm-3 ">
|
|
<div class="col-12 text-center pt-5 mt-3 mb-2">
|
|
<NuxtLink @click.once="increment(25)" class="btn btn-warning px-4 " to="/onboarding"></NuxtLink>
|
|
<NuxtLink @click.once="increment(50)" class="btn btn-warning px-2 mx-2 " to="/onboarding/onboarding2"></NuxtLink>
|
|
<NuxtLink @click.once="increment(75)" class="btn btn-warning px-2 " 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";
|
|
// const counter=useCounterStore();
|
|
export default {
|
|
mounted() {
|
|
this.increment(25);
|
|
},
|
|
computed:{...mapState(useCounterStore,['count'])},
|
|
methods:{
|
|
...mapActions(useCounterStore,['increment']),
|
|
...mapActions(useCounterStore,['decrement']),
|
|
}
|
|
}
|
|
</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>
|