@qispace/vue3-player 0.0.16 → 0.1.1

package/src/components/virtualTourV2/Tutorial.vue

@@ -1,690 +0,0 @@
-<template>
-  <transition name="fade-transition">
-    <div v-if="isVisible && !tutorialHiddenForEternity" class="tutorial">
-      <div v-if="!isMobile" class="desktop-content">
-        <div class="d-inline-flex">
-          <div class="box col">
-            <div class="tutorial-icon d-flex align-items-center justify-center">
-              <svg
-                width="100"
-                height="65"
-                viewBox="0 0 100 65"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M72 30H86.9736M86.9736 30L81 36M86.9736 30L81 24"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M27.9736 30H13M13 30L18.9736 36M13 30L18.9736 24"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M36 30H64V40C64 47.732 57.732 54 50 54V54C42.268 54 36 47.732 36 40V30Z"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M36 25C36 17.268 42.268 11 50 11V11V30H36V25Z"
-                  fill="#FF3E3E"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M64 25C64 17.268 57.732 11 50 11V11V30H64V25Z"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M53.25 23V30C53.25 31.7949 51.7949 33.25 50 33.25C48.2051 33.25 46.75 31.7949 46.75 30V23C46.75 21.2051 48.2051 19.75 50 19.75C51.7949 19.75 53.25 21.2051 53.25 23Z"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <div class="text mt-3">
-              {{ i18n.getLabel('click-and-drag-to-look-around') }}
-            </div>
-          </div>
-          <div class="box col">
-            <div class="tutorial-icon d-flex align-items-center justify-center">
-              <svg
-                width="100"
-                height="65"
-                viewBox="0 0 100 65"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M79.9936 27.0175C79.9881 19.276 66.3321 13.0323 49.492 13.0719C32.652 13.1116 19.0049 19.4194 19.0105 27.1609C19.016 34.9025 32.6721 41.1461 49.5121 41.1065C66.3521 41.0669 79.9992 34.759 79.9936 27.0175Z"
-                  fill="white"
-                  stroke="#B3B3B3"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M61.8032 45.179L56.543 50.3218V28.0361L72.543 43.4647H65.0909L67.9402 50.3218L64.6526 52.0361L61.8032 45.179Z"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M50.502 28.0361L46.502 28.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M50.502 28.0361L46.502 28.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M50.502 28.0361L46.502 28.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M66.502 28.0361L62.502 28.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M66.502 28.0361L62.502 28.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M66.502 28.0361L62.502 28.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M52.1582 24.0361L49.1582 21.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M52.1582 24.0361L49.1582 21.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M52.1582 24.0361L49.1582 21.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M60.502 24.0361L63.502 21.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M60.502 24.0361L63.502 21.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M60.502 24.0361L63.502 21.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M56.502 22.0361L56.502 18.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M56.502 22.0361L56.502 18.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M56.502 22.0361L56.502 18.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M52.1582 32.0361L49.1582 35.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M52.1582 32.0361L49.1582 35.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <path
-                  d="M52.1582 32.0361L49.1582 35.0361"
-                  stroke="#FF3E3E"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </div>
-            <div class="text mt-3">
-              {{ i18n.getLabel('click-on-the-cricles-to-move-around') }}
-            </div>
-          </div>
-          <div class="box col">
-            <div class="tutorial-icon d-flex align-items-center justify-center">
-              <svg
-                width="100"
-                height="65"
-                viewBox="0 0 100 65"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M36 33H64V43C64 50.732 57.732 57 50 57V57C42.268 57 36 50.732 36 43V33Z"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M36 28C36 20.268 42.268 14 50 14V14V33H36V28Z"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M64 28C64 20.268 57.732 14 50 14V14V33H64V28Z"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M53.25 26V33C53.25 34.7949 51.7949 36.25 50 36.25C48.2051 36.25 46.75 34.7949 46.75 33V26C46.75 24.2051 48.2051 22.75 50 22.75C51.7949 22.75 53.25 24.2051 53.25 26Z"
-                  fill="#FF3E3E"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M74.5352 20.7593L80.3458 26.5699C80.9316 27.1557 80.9316 28.1055 80.3458 28.6913C79.76 29.277 78.8103 29.277 78.2245 28.6913L72.4138 22.8806L74.5352 20.7593Z"
-                  fill="black"
-                  stroke="black"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <circle
-                  cx="66.5"
-                  cy="15.5"
-                  r="9.75"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <rect
-                  x="66"
-                  y="11"
-                  width="1"
-                  height="9"
-                  fill="black"
-                  stroke="black"
-                  stroke-width="0.75"
-                  stroke-linejoin="round"
-                />
-                <rect
-                  x="71"
-                  y="15"
-                  width="1"
-                  height="9"
-                  transform="rotate(90 71 15)"
-                  fill="black"
-                  stroke="black"
-                  stroke-width="0.75"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </div>
-            <div class="text mt-3">
-              {{ i18n.getLabel('use-the-mouse-wheel-to-zoom') }}
-            </div>
-          </div>
-        </div>
-        <div class="d-inline-flex space-around">
-          <div class="box col">
-            <div class="tutorial-icon d-flex align-items-center justify-center">
-              <svg
-                width="100"
-                height="65"
-                viewBox="0 0 100 65"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  x="65.0967"
-                  y="34.3228"
-                  width="20.9032"
-                  height="20.9032"
-                  rx="2"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <rect
-                  x="39.5488"
-                  y="29.6777"
-                  width="20.9032"
-                  height="20.9032"
-                  rx="2"
-                  transform="rotate(-90 39.5488 29.6777)"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <rect
-                  x="60.4512"
-                  y="34.3228"
-                  width="20.9032"
-                  height="20.9032"
-                  rx="2"
-                  transform="rotate(90 60.4512 34.3228)"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <rect
-                  x="34.9033"
-                  y="55.2261"
-                  width="20.9032"
-                  height="20.9032"
-                  rx="2"
-                  transform="rotate(-180 34.9033 55.2261)"
-                  fill="white"
-                  stroke="black"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M77.7025 44.3796C77.9599 44.5798 77.9599 44.9688 77.7025 45.169L74.6621 47.5338C74.3337 47.7892 73.8551 47.5552 73.8551 47.1391L73.8551 42.4095C73.8551 41.9935 74.3337 41.7594 74.6621 42.0149L77.7025 44.3796Z"
-                  fill="#FF3E3E"
-                />
-                <path
-                  d="M49.6047 17.0724C49.8049 16.815 50.1939 16.815 50.3941 17.0724L52.7589 20.1128C53.0143 20.4412 52.7803 20.9198 52.3642 20.9198L47.6346 20.9198C47.2185 20.9198 46.9845 20.4412 47.2399 20.1128L49.6047 17.0724Z"
-                  fill="#FF3E3E"
-                />
-                <path
-                  d="M50.3953 46.9281C50.1951 47.1855 49.8061 47.1855 49.6059 46.9281L47.2411 43.8877C46.9857 43.5592 47.2197 43.0807 47.6358 43.0807L52.3654 43.0807C52.7815 43.0807 53.0155 43.5592 52.7601 43.8877L50.3953 46.9281Z"
-                  fill="#FF3E3E"
-                />
-                <path
-                  d="M22.2975 45.1692C22.0401 44.969 22.0401 44.58 22.2975 44.3798L25.3379 42.0151C25.6663 41.7596 26.1449 41.9937 26.1449 42.4097L26.1449 47.1393C26.1449 47.5554 25.6663 47.7894 25.3379 47.534L22.2975 45.1692Z"
-                  fill="#FF3E3E"
-                />
-              </svg>
-            </div>
-            <div class="text mt-3">
-              {{
-                i18n.getLabel('you-can-also-use-the-arrow-keys-to-move-around')
-              }}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="isMobile" class="d-flex flex-column tablet-mobile-content">
-        <div class="box horizontal mt-3">
-          <div class="tutorial-icon d-flex align-items-center justify-center">
-            <svg
-              width="101"
-              height="65"
-              viewBox="0 0 101 65"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M68 28H87.9736M87.9736 28L82 34M87.9736 28L82 22"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M33.9727 28H13.999M13.999 28L19.9727 34M13.999 28L19.9727 22"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M57.3126 51.1276L62.5533 49.7234C65.3195 48.9822 67.2473 46.4813 67.2601 43.6176C67.2626 43.0532 67.1898 42.4909 67.0438 41.9457L64.9992 34.3153C64.7491 33.3818 63.7895 32.8278 62.8559 33.0779C61.9223 33.328 61.3683 34.2876 61.6185 35.2212L61.0361 33.0479C60.7502 31.9809 59.6536 31.3478 58.5866 31.6337C57.5197 31.9195 56.8865 33.0162 57.1724 34.0831L56.7195 32.3928C56.3979 31.1925 55.1641 30.4802 53.9638 30.8018C52.7635 31.1234 52.0512 32.3572 52.3728 33.5575L50.6258 27.0375C50.3399 25.9705 49.2432 25.3374 48.1763 25.6233C47.1094 25.9091 46.4762 27.0058 46.7621 28.0727L50.3855 41.5957C49.2796 40.7276 47.5926 39.524 46.3279 38.6369C45.3814 37.9729 44.0801 38.2068 43.4137 39.1516C42.8107 40.0066 42.9238 41.1741 43.6798 41.8975L51.8691 49.7332C53.3154 51.1171 55.3791 51.6457 57.3126 51.1276Z"
-                fill="white"
-              />
-              <path
-                d="M53.7316 38.6286L52.6963 34.7649M52.6963 34.7649L50.6258 27.0375C50.3399 25.9705 49.2432 25.3374 48.1763 25.6233V25.6233C47.1094 25.9091 46.4762 27.0058 46.7621 28.0727L50.3855 41.5957C49.2796 40.7276 47.5926 39.524 46.3279 38.6369C45.3814 37.9729 44.0801 38.2068 43.4137 39.1516V39.1516C42.8107 40.0066 42.9238 41.1741 43.6798 41.8975L51.8691 49.7332C53.3154 51.1171 55.3791 51.6457 57.3126 51.1276L62.5533 49.7234C65.3195 48.9822 67.2473 46.4813 67.2601 43.6176V43.6176C67.2626 43.0532 67.1898 42.4909 67.0438 41.9457L64.9992 34.3153C64.7491 33.3818 63.7895 32.8278 62.8559 33.0779V33.0779V33.0779C61.9223 33.328 61.3683 34.2876 61.6185 35.2212L61.942 36.4286M52.6963 34.7649L52.3728 33.5575C52.0512 32.3572 52.7635 31.1234 53.9638 30.8018V30.8018C55.1641 30.4802 56.3979 31.1925 56.7195 32.3928L57.3018 34.5661M58.2077 37.9469L57.3018 34.5661M57.3018 34.5661L57.1724 34.0831C56.8865 33.0162 57.5197 31.9195 58.5866 31.6337V31.6337C59.6536 31.3478 60.7502 31.9809 61.0361 33.0479L61.942 36.4286M62.3302 37.8775L61.942 36.4286"
-                stroke="black"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </div>
-          <div class="text ml-2">
-            {{ i18n.getLabel('tap-and-drag-to-look-around') }}
-          </div>
-        </div>
-        <div class="box horizontal mt-3">
-          <div class="tutorial-icon d-flex align-items-center justify-center">
-            <svg
-              width="99"
-              height="65"
-              viewBox="0 0 99 65"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M79.9927 29.9814C79.9871 22.2398 66.3311 15.9962 49.491 16.0358C32.651 16.0754 19.0039 22.3833 19.0095 30.1248C19.015 37.8663 32.6711 44.11 49.5111 44.0704C66.3512 44.0308 79.9982 37.7229 79.9927 29.9814Z"
-                fill="white"
-                stroke="#B3B3B3"
-                stroke-width="1.5"
-              />
-              <path
-                d="M50.5 31L46.5 31"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M50.5 31L46.5 31"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M50.5 31L46.5 31"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M66.5 31L62.5 31"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M66.5 31L62.5 31"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M66.5 31L62.5 31"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M52.1562 27L49.1562 24"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M52.1562 27L49.1562 24"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M52.1562 27L49.1562 24"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M60.5 27L63.5 24"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M60.5 27L63.5 24"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M60.5 27L63.5 24"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M56.5 25L56.5 21"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M56.5 25L56.5 21"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M56.5 25L56.5 21"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M52.1562 35L49.1562 38"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M52.1562 35L49.1562 38"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M52.1562 35L49.1562 38"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <path
-                d="M64.8126 54.1276L70.0533 52.7234C72.8195 51.9822 74.7473 49.4813 74.7601 46.6176C74.7626 46.0532 74.6898 45.4909 74.5438 44.9457L72.4992 37.3153C72.2491 36.3818 71.2895 35.8278 70.3559 36.0779C69.4223 36.328 68.8683 37.2876 69.1185 38.2212L68.5361 36.0479C68.2502 34.9809 67.1536 34.3478 66.0866 34.6337C65.0197 34.9195 64.3865 36.0162 64.6724 37.0831L64.2195 35.3928C63.8979 34.1925 62.6641 33.4802 61.4638 33.8018C60.2635 34.1234 59.5512 35.3572 59.8728 36.5575L58.1258 30.0375C57.8399 28.9705 56.7432 28.3374 55.6763 28.6233C54.6094 28.9091 53.9762 30.0058 54.2621 31.0727L57.8855 44.5957C56.7796 43.7276 55.0926 42.524 53.8279 41.6369C52.8814 40.9729 51.5801 41.2068 50.9137 42.1516C50.3107 43.0066 50.4238 44.1741 51.1798 44.8975L59.3691 52.7332C60.8154 54.1171 62.8791 54.6457 64.8126 54.1276Z"
-                fill="white"
-              />
-              <path
-                d="M61.2316 41.6286L60.1963 37.7649M60.1963 37.7649L58.1258 30.0375C57.8399 28.9705 56.7432 28.3374 55.6763 28.6233V28.6233C54.6094 28.9091 53.9762 30.0058 54.2621 31.0727L57.8855 44.5957C56.7796 43.7276 55.0926 42.524 53.8279 41.6369C52.8814 40.9729 51.5801 41.2068 50.9137 42.1516V42.1516C50.3107 43.0066 50.4238 44.1741 51.1798 44.8975L59.3691 52.7332C60.8154 54.1171 62.8791 54.6457 64.8126 54.1276L70.0533 52.7234C72.8195 51.9822 74.7473 49.4813 74.7601 46.6176V46.6176C74.7626 46.0532 74.6898 45.4909 74.5438 44.9457L72.4992 37.3153C72.2491 36.3818 71.2895 35.8278 70.3559 36.0779V36.0779V36.0779C69.4223 36.328 68.8683 37.2876 69.1185 38.2212L69.442 39.4286M60.1963 37.7649L59.8728 36.5575C59.5512 35.3572 60.2635 34.1234 61.4638 33.8018V33.8018C62.6641 33.4802 63.8979 34.1925 64.2195 35.3928L64.8018 37.5661M65.7077 40.9469L64.8018 37.5661M64.8018 37.5661L64.6724 37.0831C64.3865 36.0162 65.0197 34.9195 66.0866 34.6337V34.6337C67.1536 34.3478 68.2502 34.9809 68.5361 36.0479L69.442 39.4286M69.8302 40.8775L69.442 39.4286"
-                stroke="black"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </div>
-          <div class="text ml-2">
-            {{ i18n.getLabel('tap-on-the-circles-to-move-around') }}
-          </div>
-        </div>
-        <div class="box horizontal mt-3">
-          <div class="tutorial-icon d-flex align-items-center justify-center">
-            <svg
-              width="99"
-              height="65"
-              viewBox="0 0 99 65"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M31 24.9736L31 10M31 10L25 15.9736M31 10L37 15.9736"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M31 40L31 54.9736M31 54.9736L25 49M31 54.9736L37 49"
-                stroke="#FF3E3E"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M58.6512 44.3852L61.8162 42.5579C64.2963 41.126 65.5112 38.2114 64.7823 35.442C64.6387 34.8961 64.4229 34.3719 64.1407 33.883L60.1909 27.0418C59.7076 26.2048 58.6374 25.918 57.8003 26.4013C56.9633 26.8845 56.6765 27.9548 57.1598 28.7918L56.0348 26.8433C55.4825 25.8867 54.2593 25.5589 53.3027 26.1112C52.3462 26.6635 52.0184 27.8867 52.5707 28.8433L51.6957 27.3277C51.0744 26.2516 49.6983 25.8828 48.6221 26.5042C47.546 27.1255 47.1773 28.5016 47.7986 29.5777L44.4236 23.7321C43.8713 22.7755 42.6481 22.4477 41.6915 23C40.7349 23.5523 40.4072 24.7755 40.9595 25.7321L48.4595 38.7224L41.0923 40.5062C40.3398 40.6884 39.7721 41.3073 39.6555 42.0728C39.4961 43.1196 40.2199 44.096 41.268 44.2476L49.7609 45.4766L51.251 45.7252C53.7985 46.1503 56.4146 45.6766 58.6512 44.3852Z"
-                fill="white"
-              />
-              <path
-                d="M50.4236 34.1244L48.4236 30.6603M48.4236 30.6603L44.4236 23.7321C43.8713 22.7755 42.6481 22.4477 41.6915 23V23C40.7349 23.5523 40.4072 24.7755 40.9595 25.7321L48.4595 38.7224L41.0923 40.5062C40.3398 40.6884 39.7721 41.3073 39.6555 42.0728V42.0728C39.4961 43.1196 40.2199 44.096 41.268 44.2476L49.7609 45.4766L51.251 45.7252C53.7985 46.1503 56.4146 45.6766 58.6512 44.3852L61.8162 42.5579C64.2963 41.126 65.5112 38.2114 64.7823 35.442V35.442C64.6387 34.8961 64.4229 34.3719 64.1407 33.883L60.1909 27.0418C59.7076 26.2048 58.6374 25.918 57.8003 26.4013V26.4013V26.4013C56.9633 26.8845 56.6765 27.9548 57.1598 28.7918L57.7848 29.8744M48.4236 30.6603L47.7986 29.5777C47.1773 28.5016 47.546 27.1255 48.6221 26.5042V26.5042C49.6983 25.8828 51.0744 26.2516 51.6957 27.3277L52.8207 29.2763M54.5707 32.3074L52.8207 29.2763M52.8207 29.2763L52.5707 28.8433C52.0184 27.8867 52.3462 26.6635 53.3027 26.1112V26.1112C54.2593 25.5589 55.4825 25.8867 56.0348 26.8433L57.7848 29.8744M58.5348 31.1734L57.7848 29.8744"
-                stroke="black"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </div>
-          <div class="text ml-2">
-            {{ i18n.getLabel('use-two-fingers-to-zoom') }}
-          </div>
-        </div>
-      </div>
-
-      <div class="d-flex justify-space-between mt-3 mx-3 mb-0 tutorial-buttons">
-        <v-checkbox
-          v-model="dontShow"
-          :label="i18n.getLabel('dont-show-again')"
-        ></v-checkbox>
-        <v-btn small outlined class="mt-5" @click="clickedOk()">Ok</v-btn>
-      </div>
-    </div>
-  </transition>
-</template>
-<script>
-export default {
-  name: 'Tutorial',
-  inject: ['i18n'],
-  emits: ['closeTutorial'],
-  props: {
-    project: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      isVisible: true,
-      dontShow: false,
-    }
-  },
-  computed: {
-    isMobile() {
-      const toMatch = [
-        /Android/i,
-        /webOS/i,
-        /iPhone/i,
-        /iPad/i,
-        /iPod/i,
-        /BlackBerry/i,
-        /Windows Phone/i,
-      ]
-
-      return toMatch.some((toMatchItem) => {
-        return navigator.userAgent.match(toMatchItem)
-      })
-    },
-    tutorialHiddenForEternity() {
-      const hiddenForEternity = localStorage.getItem(
-        `${this.project}-dont-show-tutorial`
-      )
-
-      if (hiddenForEternity) this.$emit('closeTutorial')
-      return hiddenForEternity
-    },
-  },
-  methods: {
-    clickedOk() {
-      if (this.dontShow) {
-        this.hideForEternity()
-      }
-      this.isVisible = false
-      this.$emit('closeTutorial')
-    },
-    hideForEternity() {
-      localStorage.setItem(`${this.project}-dont-show-tutorial`, true)
-    },
-  },
-}
-</script>
-<style scoped>
-.tutorial {
-  color: #000;
-  padding: 10px;
-  text-align: center;
-  background-color: #fff;
-  border-radius: 5px;
-  line-height: 20px;
-}
-
-.tutorial-icon {
-  border: 1.5px solid #e0e0e0;
-  border-radius: 5px;
-  width: 140px;
-  height: 75px;
-}
-
-.text {
-  font-size: 0.8em;
-  line-height: 1;
-}
-
-.box.col {
-  max-width: 180px !important;
-}
-
-.tablet-mobile-content {
-  min-width: 240px;
-}
-
-.box.horizontal {
-  display: flex;
-  align-items: center;
-}
-
-.tablet-mobile-content .tutorial-icon {
-  width: 100px;
-  height: 65px;
-}
-
-.tablet-mobile-content .text {
-  text-align: left;
-}
-</style>
-<style>
-.tutorial-buttons .v-messages {
-  display: none !important;
-}
-</style>