hart-estate-widget 0.0.57 → 0.0.60

package/README.md

@@ -66,6 +66,9 @@ export App;
   logo: '', // путь к логотипу
   logoUrl: '', // ссылка, открывающаяся по клику на логотип
 
+  // локализация
+  locale: 'en', // языковой код ISO 639 (Доступно: ru, en)
+
   // ширина/высота
   width: 500, 
   height: 750,

package/build/assets/css/app.css

@@ -1 +1 @@
-*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0}html,body{font-size:20px}.widget-application{--vh: 100vh;width:100%;height:calc(100*var(--vh));overflow:hidden;position:relative;z-index:1;background-color:#fff}.widget-application *,.widget-application *:before,.widget-application *:after{font-family:"Roboto Mono",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;font-weight:700;text-decoration:none;color:#413e3e}.widget-application .widget-logo{position:absolute;left:45px;top:30px;z-index:3}@media only screen and (max-width: 900px){.widget-application .widget-logo{left:20px;top:20px}}.widget-application .widget-logo img{display:block;width:82px;height:82px;object-fit:contain;object-position:center}@media only screen and (max-width: 900px){.widget-application .widget-logo img{width:65px;height:65px}}@media only screen and (max-width: 545px){.widget-application .widget-logo img{width:40px;height:40px}}.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{position:absolute;right:45px;top:36px;z-index:3;ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;padding:10px}@media only screen and (max-width: 900px){.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{right:20px;top:23px}}@media only screen and (max-width: 545px){.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{padding:5px}}.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{display:block;width:50px;height:50px;object-fit:contain;object-position:center}@media only screen and (max-width: 900px){.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{width:40px;height:40px}}@media only screen and (max-width: 545px){.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{width:30px;height:30px}}.widget-application .widget-close{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3;right:15px;top:15px;color:#000;background-color:#fac62d;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer}.widget-application .widget-close:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab-buttons{position:absolute;z-index:3;right:44px;bottom:35px;display:flex;align-items:center;justify-content:flex-end}@media only screen and (max-width: 900px){.widget-application .widget-tab-buttons{flex-direction:column;right:20px;bottom:20px}}.widget-application .widget-tab-button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#eaeaea;color:#413e3e;font-size:28px;line-height:120%;font-weight:bold;margin-left:40px}@media only screen and (max-width: 900px){.widget-application .widget-tab-button{width:60px;height:60px;font-size:24px;margin-left:0px;margin-top:20px}}@media only screen and (max-width: 545px){.widget-application .widget-tab-button{margin-top:15px;font-size:18px;width:45px;height:45px}}.widget-application .widget-tab-button--active{background-color:#fac62d}.widget-application .widget-tab{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 30px}@media(max-width: 630px){.widget-application .widget-tab{padding:60px 15px}}.widget-application .widget-tab__image{max-width:100%;max-height:100%;object-fit:contain;display:block}.widget-application .widget-tab__threesixty{width:100%;height:100%;touch-action:none;-webkit-touch-action:none}.widget-application .widget-tab__threesixty-start{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;position:absolute;left:50%;bottom:35px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;padding:0 30px 0 27px;background-color:#eaeaea;border-radius:38px;height:72px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start{height:60px;width:60px;padding:0;left:20px;bottom:20px;transform:none}}@media only screen and (max-width: 545px){.widget-application .widget-tab__threesixty-start{width:45px;height:45px}}.widget-application .widget-tab__threesixty-start img{display:block;margin-right:20px;position:relative;top:2px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start img{top:0;width:30px;margin-right:0}}@media only screen and (max-width: 545px){.widget-application .widget-tab__threesixty-start img{width:20px}}.widget-application .widget-tab__threesixty-start span{font-size:24px;font-weight:bold;color:#413e3e;text-transform:uppercase}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start span{display:none}}.widget-application .widget-tab__threesixty-container{width:100% !important;height:100% !important;position:relative;background-image:none !important}.widget-application .widget-tab__threesixty-container img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);max-width:100%;max-height:100%;width:600px;height:600px;object-fit:contain;opacity:0;pointer-events:none;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab__threesixty-container img.active{opacity:1}.widget-application .widget-tab__threesixty--active .widget-tab__threesixty-container{cursor:move}.widget-application .widget-tab-menu{position:absolute;z-index:3;left:15px;top:15px;max-height:100%;overflow-y:auto;padding-bottom:30px}.widget-application .widget-tab-menu__wallpapers{display:flex;flex-wrap:wrap;align-items:flex-start;margin-top:10px;width:100%}.widget-application .widget-tab-menu__wallpapers img{width:30px;height:30px;display:block;object-fit:cover;cursor:pointer;margin-right:10px;margin-block-end:10px}.widget-application .widget-tab-menu ul{list-style-type:none}.widget-application .widget-tab-menu ul li{color:#413e3e;background-color:#fac62d;padding:5px 15px;border-radius:10px;font-size:.7rem;border:none;cursor:pointer;margin-bottom:15px;width:200px;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab-menu ul li label{display:flex;cursor:inherit;width:100%}.widget-application .widget-tab-menu ul li input[type=color]{cursor:pointer;margin-left:auto;width:50px;height:20px;border:0;border-radius:5px}.widget-application .widget-tab-menu ul li input[type=color]::-webkit-color-swatch-wrapper{display:none !important}.widget-application .widget-tab-menu ul li input[type=file]{display:none}.widget-application .widget-tab-menu ul li:nth-child(1){position:relative}.widget-application .widget-tab-menu ul li:nth-child(1)::after{--bar-width: 2px;content:"";width:20px;height:15px;display:block;background:repeating-linear-gradient(180deg, #000000, #000000 var(--bar-width), rgba(0, 0, 0, 0) var(--bar-width), rgba(0, 0, 0, 0) calc(var(--bar-width) * 3));position:absolute;right:10px;top:50%;transform:translateY(-50%)}.widget-application .widget-instructions{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-position:center;background-repeat:no-repeat;background-size:cover}.widget-application .widget-instructions__content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:rgba(234,234,234,.85);border-radius:20px;overflow:hidden;width:400px;max-width:calc(100% - 60px);padding:36px 30px 30px 30px;backdrop-filter:blur(5px);-moz-backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}@media only screen and (max-width: 545px){.widget-application .widget-instructions__content{width:280px;padding:26px 20px 20px 20px}}.widget-application .widget-instructions__steps{display:flex;align-items:flex-start;justify-content:center}.widget-application .widget-instructions__step{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin:0 15px}@media only screen and (max-width: 900px){.widget-application .widget-instructions__step{margin:0 10px}}.widget-application .widget-instructions__step img{display:block;width:52px;height:80px;object-fit:contain;object-position:center}@media only screen and (max-width: 545px){.widget-application .widget-instructions__step img{width:40px;height:60px}}.widget-application .widget-instructions__step p{color:#413e3e;font-size:20px;font-weight:bold;text-align:center;margin-top:10px;max-width:130px}@media only screen and (max-width: 900px){.widget-application .widget-instructions__step p{font-size:18px;max-width:115px}}@media only screen and (max-width: 545px){.widget-application .widget-instructions__step p{font-size:16px}}.widget-application .widget-instructions button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;display:flex;align-items:center;justify-content:center;height:44px;padding:0 33px;border-radius:52px;background-color:#fac62d;color:#413e3e;font-size:24px;font-weight:bold;text-transform:uppercase;margin:25px auto 0 auto}@media only screen and (max-width: 900px){.widget-application .widget-instructions button{font-size:18px;height:40px}}@media only screen and (max-width: 545px){.widget-application .widget-instructions button{font-size:16px;height:35px}}.widget-application .widget-tab__panorama{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2}.widget-application .widget-tab__panorama-overlay{width:100%;height:100%;overflow:hidden;background:#fff !important}.widget-application .widget-tab__panorama-overlay *{display:none !important}.widget-application .widget-tab__panorama-overlay canvas{display:block !important}.widget-application .widget-tab__panorama-controls{position:absolute;z-index:2;left:50%;bottom:35px;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:38px;background-color:rgba(0,0,0,.2);transform:translateX(-50%);backdrop-filter:blur(5px);-moz-backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls{bottom:20px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-controls{padding:5px}}.widget-application .widget-tab__panorama-controls-button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;width:55px;height:55px;border-radius:50%;background-color:#fff;display:flex;align-items:center;justify-content:center;margin-right:18px}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls-button{width:40px;height:40px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-controls-button{margin-right:13px;width:35px;height:35px}}.widget-application .widget-tab__panorama-controls-button img{display:block}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls-button img{transform:scale(0.7)}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-controls-button img{transform:scale(0.55)}}.widget-application .widget-tab__panorama-controls-button:nth-last-child(1){margin-right:0}.widget-application .widget-tab__panorama-map{position:absolute;left:45px;bottom:35px;z-index:3;border-radius:10px;border:8px solid #fff;background-color:#fff;opacity:1;transition:opacity .5s}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-map{left:20px;bottom:20px;transform:scale(0.6);transform-origin:0% 100%}.widget-application .widget-tab__panorama-map svg polygon{opacity:0}.widget-application .widget-tab__panorama-map--scaled{transform:scale(1) !important}.widget-application .widget-tab__panorama-map--scaled svg polygon:active{opacity:.3 !important}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-map{transform:scale(0.4)}}.widget-application .widget-tab__panorama-map--hidden{opacity:0;pointer-events:none}.widget-application .widget-tab__panorama-map img{width:195px;border-radius:none;display:block;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none;-webkit-backface-visibility:hidden;-ms-transform:translateZ(0);-webkit-transform:translateZ(0);transform:translateZ(0)}.widget-application .widget-tab__panorama-map img:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-map svg{position:absolute;left:0;top:0;width:195px;height:100%;z-index:3;display:block;border-radius:inherit}.widget-application .widget-tab__panorama-map svg polygon{opacity:0;fill:#fac62d;cursor:pointer}.widget-application .widget-tab__panorama-map svg polygon:hover{opacity:.3}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-map svg polygon:hover{opacity:0}}.widget-application .widget-tab__panorama-map__fov{position:absolute;left:0;top:0;width:0px;height:0px;border-radius:50%;border-left:30px solid rgba(250,198,45,0);border-right:30px solid rgba(250,198,45,0);border-bottom:30px solid rgba(250,198,45,0);border-top:40px solid rgba(250,198,45,.4);transform:translate(-50%, -50%) rotate(0rad);transform-origin:50% 50%;z-index:4;pointer-events:none}.widget-application .widget-tab__panorama-map__fov::before{content:"";position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%, -50%) translateY(-5px);width:15px;height:15px;background-color:#fac62d;border-radius:50%;border:2px solid #fac62d;box-shadow:inset 0 0 0 2px #fff}.widget-loader{display:block;position:relative;width:80px;height:80px}.widget-loader--absolute{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.widget-loader--sm{transform:translate(-50%, -50%) scale(0.75)}.widget-loader div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#fac62d;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.widget-loader div:nth-child(1){left:8px;animation:widget-loader-1 .6s infinite}.widget-loader div:nth-child(2){left:8px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(3){left:32px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(4){left:56px;animation:widget-loader-3 .6s infinite}@keyframes widget-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes widget-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes widget-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}.widget-application .widget-tab__model{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2}.widget-application .widget-tab__model-scene{width:100%;height:100%;display:block}.widget-application .widget-tab__model-joystick{position:absolute;left:100px;bottom:100px;opacity:0;pointer-events:none}@media only screen and (max-width: 545px){.widget-application .widget-tab__model-joystick{left:50%;transform:translateX(-50%)}}.widget-application .widget-tab__model-joystick--active{opacity:1;pointer-events:unset}/*# sourceMappingURL=app.css.map */
+.widget-application{--vh: 100vh;width:100%;height:calc(100*var(--vh));overflow:hidden;position:relative;z-index:1;background-color:#fff;font-size:20px}.widget-application *,.widget-application *:before,.widget-application *:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Roboto Mono",sans-serif;text-decoration:none;font-weight:700;color:#413e3e;outline:none;padding:0;margin:0;box-sizing:border-box;-webkit-box-sizing:border-box}.widget-application .widget-logo{position:absolute;left:45px;top:30px;z-index:3}@media only screen and (max-width: 900px){.widget-application .widget-logo{left:20px;top:30px}}@media only screen and (max-width: 374px){.widget-application .widget-logo{top:25px}}.widget-application .widget-logo img{display:block;width:82px;height:82px;object-fit:contain;object-position:center}@media only screen and (max-width: 900px){.widget-application .widget-logo img{width:65px;height:65px}}@media only screen and (max-width: 545px){.widget-application .widget-logo img{width:42px;height:42px}}@media only screen and (max-width: 374px){.widget-application .widget-logo img{width:36px;height:36px}}.widget-application .widget-tab__panorama-close-map,.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{position:absolute;right:45px;top:36px;z-index:3;padding:10px;touch-action:none;ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-close-map,.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{right:17px;top:35px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-close-map,.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{padding:5px;right:20px}}@media only screen and (max-width: 374px){.widget-application .widget-tab__panorama-close-map,.widget-application .widget-enter-fullscreen,.widget-application .widget-exit-fullscreen{top:25px}}.widget-application .widget-tab__panorama-close-map img,.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{display:block;width:50px;height:50px;object-fit:contain;object-position:center}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-close-map img,.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{width:40px;height:40px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-close-map img,.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{width:32px;height:32px}}@media only screen and (max-width: 374px){.widget-application .widget-tab__panorama-close-map img,.widget-application .widget-enter-fullscreen img,.widget-application .widget-exit-fullscreen img{width:26px;height:26px}}.widget-application .widget-tab-buttons{position:absolute;z-index:3;right:44px;bottom:35px;display:flex;align-items:center;justify-content:flex-end}@media only screen and (max-width: 900px){.widget-application .widget-tab-buttons{right:20px;bottom:35px}}@media only screen and (max-width: 374px){.widget-application .widget-tab-buttons{bottom:30px}}.widget-application .widget-tab-button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#eaeaea;color:#413e3e;font-size:28px;line-height:120%;font-weight:bold;margin-left:40px}@media only screen and (max-width: 900px){.widget-application .widget-tab-button{margin-left:20px;width:60px;height:60px;font-size:22px}}@media only screen and (max-width: 545px){.widget-application .widget-tab-button{margin-left:10px;font-size:17px;width:44px;height:44px}}@media only screen and (max-width: 374px){.widget-application .widget-tab-button{width:36px;height:36px;font-size:14px}}.widget-application .widget-tab-button--active{background-color:#fac62d}.widget-application .widget-tab{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 30px}@media(max-width: 630px){.widget-application .widget-tab{padding:60px 20px}}.widget-application .widget-tab__image{max-width:100%;max-height:100%;object-fit:contain;display:block}.widget-application .widget-tab__threesixty{width:100%;height:100%;touch-action:none;-webkit-touch-action:none}.widget-application .widget-tab__threesixty-start{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;position:absolute;left:50%;bottom:35px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;padding:0 25px 0 10px;background-color:#eaeaea;border-radius:38px;height:72px;width:202px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start{height:60px;width:166px;padding:0 20px 0 8px;bottom:35px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__threesixty-start{height:44px;width:115px;padding:0 10px 0 6px}}@media only screen and (max-width: 374px){.widget-application .widget-tab__threesixty-start{height:36px;width:94px;padding:0 8px 0 6px;bottom:30px}}.widget-application .widget-tab__threesixty-start-icon{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff;margin-right:18px;padding:10px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start-icon{padding:7px;margin-right:15px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__threesixty-start-icon{margin-right:7px}}@media only screen and (max-width: 374px){.widget-application .widget-tab__threesixty-start-icon{padding:6px;margin-right:5px}}.widget-application .widget-tab__threesixty-start-icon img{display:block;position:relative;top:2px;width:34px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start-icon img{width:30px;top:1px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__threesixty-start-icon img{width:19px;top:0}}@media only screen and (max-width: 374px){.widget-application .widget-tab__threesixty-start-icon img{width:15px}}.widget-application .widget-tab__threesixty-start span{font-size:24px;font-weight:bold;color:#413e3e;text-transform:uppercase;width:100%;display:block;text-align:center;position:relative;top:1px}@media only screen and (max-width: 900px){.widget-application .widget-tab__threesixty-start span{font-size:20px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__threesixty-start span{font-size:14px}}@media only screen and (max-width: 374px){.widget-application .widget-tab__threesixty-start span{font-size:12px}}.widget-application .widget-tab__threesixty-container{width:100% !important;height:100% !important;position:relative;background-image:none !important}.widget-application .widget-tab__threesixty-container img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);max-width:100%;max-height:100%;width:600px;height:600px;object-fit:contain;opacity:0;pointer-events:none;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab__threesixty-container img.active{opacity:1}.widget-application .widget-tab__threesixty--active .widget-tab__threesixty-container{cursor:move}.widget-application .widget-tab-menu{position:absolute;z-index:3;left:15px;top:15px;max-height:100%;overflow-y:auto;padding-bottom:30px}.widget-application .widget-tab-menu__wallpapers{display:flex;flex-wrap:wrap;align-items:flex-start;margin-top:10px;width:100%}.widget-application .widget-tab-menu__wallpapers img{width:30px;height:30px;display:block;object-fit:cover;cursor:pointer;margin-right:10px;margin-block-end:10px}.widget-application .widget-tab-menu ul{list-style-type:none}.widget-application .widget-tab-menu ul li{color:#413e3e;background-color:#fac62d;padding:5px 15px;border-radius:10px;font-size:.7rem;border:none;cursor:pointer;margin-bottom:15px;width:200px;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab-menu ul li label{display:flex;cursor:inherit;width:100%}.widget-application .widget-tab-menu ul li input[type=color]{cursor:pointer;margin-left:auto;width:50px;height:20px;border:0;border-radius:5px}.widget-application .widget-tab-menu ul li input[type=color]::-webkit-color-swatch-wrapper{display:none !important}.widget-application .widget-tab-menu ul li input[type=file]{display:none}.widget-application .widget-tab-menu ul li:nth-child(1){position:relative}.widget-application .widget-tab-menu ul li:nth-child(1)::after{--bar-width: 2px;content:"";width:20px;height:15px;display:block;background:repeating-linear-gradient(180deg, #000000, #000000 var(--bar-width), rgba(0, 0, 0, 0) var(--bar-width), rgba(0, 0, 0, 0) calc(var(--bar-width) * 3));position:absolute;right:10px;top:50%;transform:translateY(-50%)}.widget-application .widget-instructions{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-position:center;background-repeat:no-repeat;background-size:cover}.widget-application .widget-instructions__content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:rgba(234,234,234,.85);border-radius:20px;overflow:hidden;width:400px;max-width:calc(100% - 60px);padding:36px 30px 30px 30px;backdrop-filter:blur(5px);-moz-backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}@media only screen and (max-width: 545px){.widget-application .widget-instructions__content{width:280px;padding:26px 20px 20px 20px}}.widget-application .widget-instructions__steps{display:flex;align-items:flex-start;justify-content:center}.widget-application .widget-instructions__step{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin:0 15px}@media only screen and (max-width: 900px){.widget-application .widget-instructions__step{margin:0 10px}}.widget-application .widget-instructions__step img{display:block;width:52px;height:80px;object-fit:contain;object-position:center}@media only screen and (max-width: 545px){.widget-application .widget-instructions__step img{width:40px;height:60px}}@media only screen and (max-width: 374px){.widget-application .widget-instructions__step img{width:35px}}.widget-application .widget-instructions__step p{color:#413e3e;font-size:20px;font-weight:bold;text-align:center;margin-top:10px;max-width:130px}@media only screen and (max-width: 900px){.widget-application .widget-instructions__step p{font-size:18px;max-width:115px}}@media only screen and (max-width: 545px){.widget-application .widget-instructions__step p{font-size:16px}}@media only screen and (max-width: 374px){.widget-application .widget-instructions__step p{font-size:14px}}.widget-application .widget-instructions button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;display:flex;align-items:center;justify-content:center;height:44px;padding:0 33px;border-radius:52px;background-color:#fac62d;color:#413e3e;font-size:24px;font-weight:bold;text-transform:uppercase;margin:25px auto 0 auto}@media only screen and (max-width: 900px){.widget-application .widget-instructions button{font-size:18px;height:40px}}@media only screen and (max-width: 545px){.widget-application .widget-instructions button{font-size:16px;height:35px}}@media only screen and (max-width: 374px){.widget-application .widget-instructions button{font-size:14px;height:26px;padding:0 25px}}.widget-application .widget-tab__panorama{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2}.widget-application .widget-tab__panorama-overlay{width:100%;height:100%;overflow:hidden;background:#fff !important}.widget-application .widget-tab__panorama-overlay *{display:none !important}.widget-application .widget-tab__panorama-overlay canvas{display:block !important}.widget-application .widget-tab__panorama-controls{position:absolute;z-index:2;left:50%;bottom:35px;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:38px;background-color:rgba(0,0,0,.2);transform:translateX(-50%);backdrop-filter:blur(5px);-moz-backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-controls{padding:5px}}@media only screen and (max-width: 374px){.widget-application .widget-tab__panorama-controls{bottom:30px}}.widget-application .widget-tab__panorama-controls-button{ouline:none;border:none;box-shadow:none;background:rgba(0,0,0,0);cursor:pointer;width:55px;height:55px;border-radius:50%;background-color:#fff;display:flex;align-items:center;justify-content:center;margin-right:18px}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls-button{width:44px;height:44px}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-controls-button{margin-right:10px;width:33px;height:33px}}@media only screen and (max-width: 374px){.widget-application .widget-tab__panorama-controls-button{width:26px;height:26px}}.widget-application .widget-tab__panorama-controls-button img{display:block}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-controls-button img{transform:scale(0.7)}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-controls-button img{transform:scale(0.52)}}@media only screen and (max-width: 374px){.widget-application .widget-tab__panorama-controls-button img{transform:scale(0.45)}}.widget-application .widget-tab__panorama-controls-button:nth-last-child(1){margin-right:0}.widget-application .widget-tab__panorama-close-map{z-index:4}.widget-application .widget-tab__panorama-map{position:absolute;left:45px;bottom:35px;z-index:3;border-radius:10px;opacity:1;transition:opacity .5s;touch-action:none;-webkit-touch-action:none}.widget-application .widget-tab__panorama-map::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%, -50%);width:calc(100% + 16px);height:calc(100% + 16px);border-radius:inherit;background-color:#fff}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-map{left:20px;transform:scale(0.6);transform-origin:0% 100%}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-map{transform:scale(0.4)}}@media only screen and (max-width: 374px){.widget-application .widget-tab__panorama-map{bottom:30px;transform:scale(0.35)}}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-map--scaled{transform:scale(1.4) translate(-50%, 50%);left:50%;bottom:50%}.widget-application .widget-tab__panorama-map--scaled::after{content:"";position:absolute;z-index:-2;left:50%;top:50%;transform:translate(-50%, -50%);width:100vw;height:calc(100*var(--vh));background-color:rgba(196,196,196,.8)}.widget-application .widget-tab__panorama-map--scaled svg polygon:active{opacity:.3 !important}}@media only screen and (max-width: 545px){.widget-application .widget-tab__panorama-map--scaled{transform:scale(1) translate(-50%, 50%)}}.widget-application .widget-tab__panorama-map--hidden{opacity:0;pointer-events:none}.widget-application .widget-tab__panorama-map img{width:200px;border-radius:none;display:block;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none;-webkit-backface-visibility:hidden;-ms-transform:translateZ(0);-webkit-transform:translateZ(0);transform:translateZ(0)}.widget-application .widget-tab__panorama-map img:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-map svg{position:absolute;left:0;top:0;width:200px;height:100%;z-index:3;display:block;border-radius:inherit}.widget-application .widget-tab__panorama-map svg polygon{opacity:0;fill:#fac62d;cursor:pointer}.widget-application .widget-tab__panorama-map svg polygon:hover{opacity:.3}@media only screen and (max-width: 900px){.widget-application .widget-tab__panorama-map svg polygon:hover{opacity:0}}.widget-application .widget-tab__panorama-map__fov{position:absolute;left:0;top:0;width:0px;height:0px;border-radius:50%;border-left:30px solid rgba(250,198,45,0);border-right:30px solid rgba(250,198,45,0);border-bottom:30px solid rgba(250,198,45,0);border-top:40px solid rgba(250,198,45,.4);transform:translate(-50%, -50%) rotate(0rad);transform-origin:50% 50%;z-index:4;pointer-events:none}.widget-application .widget-tab__panorama-map__fov::before{content:"";position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%, -50%) translateY(-5px);width:15px;height:15px;background-color:#fac62d;border-radius:50%;border:2px solid #fac62d;box-shadow:inset 0 0 0 2px #fff}.widget-loader{display:block;position:relative;width:80px;height:80px}.widget-loader--absolute{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.widget-loader--sm{transform:translate(-50%, -50%) scale(0.75)}.widget-loader div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#fac62d;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.widget-loader div:nth-child(1){left:8px;animation:widget-loader-1 .6s infinite}.widget-loader div:nth-child(2){left:8px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(3){left:32px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(4){left:56px;animation:widget-loader-3 .6s infinite}@keyframes widget-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes widget-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes widget-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}.widget-application .widget-tab__model{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2}.widget-application .widget-tab__model-scene{width:100%;height:100%;display:block}.widget-application .widget-tab__model-joystick{position:absolute;left:100px;bottom:100px;opacity:0;pointer-events:none}@media only screen and (max-width: 545px){.widget-application .widget-tab__model-joystick{left:50%;transform:translateX(-50%)}}.widget-application .widget-tab__model-joystick--active{opacity:1;pointer-events:unset}/*# sourceMappingURL=app.css.map */

package/build/assets/css/app.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/assets/sass/index.sass","../../../src/assets/sass/vars.sass","../../../src/assets/sass/mixin.sass","../../../src/assets/sass/components/tabs.sass","../../../src/assets/sass/components/instructions.sass","../../../src/assets/sass/components/panorama.sass","../../../src/assets/sass/components/loader.sass","../../../src/assets/sass/components/model.sass"],"names":[],"mappings":"AAGA,mBACE,sBACA,8BACA,SACA,UAEF,UACE,eAEF,oBACE,YAEA,WACA,2BACA,gBACA,kBACA,UACA,iBCfM,KDiBN,+EACE,qCACA,mCACA,kCACA,aACA,gBACA,qBACA,MClBQ,QDoBV,iCACE,kBACA,UACA,SACA,UACA,0CALF,iCAMI,UACA,UACF,qCACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,qCAOI,WACA,aACF,0CATF,qCAUI,WACA,aAEN,yFAEE,kBACA,WACA,SACA,UExDF,YACA,YACA,gBACA,yBACA,eFsDE,aACA,0CARF,yFASI,WACA,UACF,0CAXF,yFAYI,aACF,iGACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,iGAOI,WACA,aACF,0CATF,iGAUI,WACA,aAEN,kCACE,kBACA,aACA,mBACA,uBACA,UACA,WACA,SACA,MChFI,KDiFJ,iBC9EQ,QD+ER,iBACA,mBACA,gBACA,YACA,eACA,wCACE,wCG1FJ,wCACE,kBACA,UACA,WACA,YACA,aACA,mBACA,yBACA,0CARF,wCASI,sBACA,WACA,aACJ,uCDfA,YACA,YACA,gBACA,yBACA,eCaE,WACA,YACA,kBACA,aACA,mBACA,uBACA,iBFjBG,QEkBH,MFdQ,QEeR,eACA,iBACA,iBACA,iBACA,0CAdF,uCAeI,WACA,YACA,eACA,gBACA,iBACF,0CApBF,uCAqBI,gBACA,eACA,WACA,aACF,+CACE,iBFjCM,QEmCV,gCACE,WACA,YACA,aACA,mBACA,uBACA,kBACA,yBAPF,gCAQI,mBACF,uCACE,eACA,gBACA,mBACA,cACF,4CACE,WACA,YACA,kBACA,0BACA,kDD9DJ,YACA,YACA,gBACA,yBACA,eC4DM,kBACA,SACA,YACA,2BACA,aACA,mBACA,uBACA,sBACA,iBFlED,QEmEC,mBACA,YACA,0CAbF,kDAcI,YACA,WACA,UACA,UACA,YACA,gBACF,0CApBF,kDAqBI,WACA,aACF,sDACE,cACA,kBACA,kBACA,QACA,0CALF,sDAMI,MACA,WACA,gBACF,0CATF,sDAUI,YACJ,uDACE,eACA,iBACA,MFzFE,QE0FF,yBACA,0CALF,uDAMI,cACN,sDACE,sBACA,uBACA,kBACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,YACA,aACA,mBACA,UACA,oBF1GR,iBACA,yBACA,eACA,uBEyGQ,iEACE,UAEJ,sFACE,YAEN,qCACE,kBACA,UACA,UACA,SACA,gBACA,gBACA,oBACA,iDACE,aACA,eACA,uBACA,gBACA,WACA,qDACE,WACA,YACA,cACA,iBACA,eACA,kBACA,sBACJ,wCACE,qBACA,2CACE,MF9IE,QE+IF,iBFjJE,QEkJF,iBACA,mBACA,gBACA,YACA,eACA,mBACA,YFnJR,iBACA,yBACA,eACA,uBEkJQ,iDACE,aACA,eACA,WAEA,6DACE,eACA,iBACA,WACA,YACA,SACA,kBACA,2FACE,wBACJ,4DACE,aACJ,wDACE,kBACA,+DACE,iBACA,WACA,WACA,YACA,cACA,gKACA,kBACA,WACA,QACA,2BC3LZ,yCACE,kBACA,UACA,OACA,MACA,WACA,YACA,aACA,mBACA,uBACA,2BACA,4BACA,sBAEA,kDACE,aACA,sBACA,mBACA,2BACA,uCACA,mBACA,gBACA,YACA,4BACA,4BFpBJ,0BACA,+BACA,kCEoBI,0CAZF,kDAaI,YACA,6BACJ,gDACE,aACA,uBACA,uBACF,+CACE,aACA,sBACA,mBACA,2BACA,cACA,0CANF,+CAOI,eACF,mDACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,mDAOI,WACA,aACJ,iDACE,MH5CI,QG6CJ,eACA,iBACA,kBACA,gBACA,gBACA,0CAPF,iDAQI,eACA,iBACF,0CAVF,iDAWI,gBACN,gDFjEF,YACA,YACA,gBACA,yBACA,eE+DI,aACA,mBACA,uBACA,YACA,eACA,mBACA,iBHjEM,QGkEN,MHhEM,QGiEN,eACA,iBACA,yBACA,wBACA,0CAdF,gDAeI,eACA,aACF,0CAjBF,gDAkBI,eACA,aChFJ,0CACE,WACA,YACA,kBACA,OACA,MACA,UACA,kDACE,WACA,YACA,gBACA,2BACA,oDACE,wBACF,yDACE,yBACJ,mDACE,kBACA,UACA,SACA,YACA,aACA,mBACA,uBACA,YACA,mBACA,gCACA,2BHxBN,0BACA,+BACA,kCGwBM,0CAbF,mDAcI,aACF,0CAfF,mDAgBI,aACF,0DHrCN,YACA,YACA,gBACA,yBACA,eGmCQ,WACA,YACA,kBACA,iBJtCF,KIuCE,aACA,mBACA,uBACA,kBACA,0CAVF,0DAWI,WACA,aACF,0CAbF,0DAcI,kBACA,WACA,aACF,8DACE,cACA,0CAFF,8DAGI,sBACF,0CAJF,8DAKI,uBACJ,4EACE,eACN,8CACE,kBACA,UACA,YACA,UACA,mBACA,sBACA,iBJjEA,KIkEA,UACA,uBACA,0CAVF,8CAWI,UACA,YACA,qBACA,yBAEE,0DACE,UACJ,sDACE,8BAGI,yEACE,uBACV,0CAxBF,8CAyBI,sBACF,sDACE,UACA,oBACF,kDACE,YACA,mBACA,cJjFR,iBACA,yBACA,eACA,uBAGA,mCACA,4BACA,gCACA,wBI2EQ,wDACE,wCACJ,kDACE,kBACA,OACA,MACA,YACA,YACA,UACA,cACA,sBACA,0DACE,UACA,KJtGA,QIuGA,eACA,gEACE,WACA,0CAFF,gEAGI,WACR,mDACE,kBACA,OACA,MACA,UACA,WACA,kBACA,0CACA,2CACA,4CACA,0CACA,6CACA,yBACA,UACA,oBACA,2DACE,WACA,kBACA,UACA,SACA,QACA,iDACA,WACA,YACA,iBJpIA,QIqIA,kBACA,yBACA,gCC9IZ,eACE,cACA,kBACA,WACA,YACA,yBACE,kBACA,SACA,QACA,gCACF,mBACE,4CACF,mBACE,kBACA,SACA,WACA,YACA,kBACA,WLXQ,QKYR,mDACA,gCACE,SACA,uCACF,gCACE,SACA,uCACF,gCACE,UACA,uCACF,gCACE,UACA,uCAEN,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,0BAEF,KACE,8BChDA,uCACE,WACA,YACA,kBACA,OACA,MACA,UACA,6CACE,WACA,YACA,cACF,gDACE,kBACA,WACA,aACA,UACA,oBACA,0CANF,gDAOI,SACA,4BACF,wDACE,UACA","file":"app.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/assets/sass/index.sass","../../../src/assets/sass/vars.sass","../../../src/assets/sass/mixin.sass","../../../src/assets/sass/components/tabs.sass","../../../src/assets/sass/components/instructions.sass","../../../src/assets/sass/components/panorama.sass","../../../src/assets/sass/components/loader.sass","../../../src/assets/sass/components/model.sass"],"names":[],"mappings":"AAGA,oBACE,YAEA,WACA,2BACA,gBACA,kBACA,UACA,iBCLM,KDMN,eAEA,+EACE,mCACA,kCACA,qCACA,qBACA,gBACA,MCRQ,QDSR,aACA,UACA,SACA,sBACA,8BAEF,iCACE,kBACA,UACA,SACA,UACA,0CALF,iCAMI,UACA,UACF,0CARF,iCASI,UACF,qCACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,qCAOI,WACA,aACF,0CATF,qCAUI,WACA,aACF,0CAZF,qCAaI,WACA,aAEN,6IAGE,kBACA,WACA,SACA,UACA,aACA,kBE5DF,YACA,YACA,gBACA,yBACA,eF0DE,0CAVF,6IAWI,WACA,UACF,0CAbF,6IAcI,YACA,YACF,0CAhBF,6IAiBI,UACF,yJACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,yJAOI,WACA,aACF,0CATF,yJAUI,WACA,aACF,0CAZF,yJAaI,WACA,aGjFN,wCACE,kBACA,UACA,WACA,YACA,aACA,mBACA,yBACA,0CARF,wCASI,WACA,aACF,0CAXF,wCAYI,aACJ,uCDhBA,YACA,YACA,gBACA,yBACA,eCcE,WACA,YACA,kBACA,aACA,mBACA,uBACA,iBFjBG,QEkBH,MFdQ,QEeR,eACA,iBACA,iBACA,iBACA,0CAdF,uCAeI,iBACA,WACA,YACA,gBACF,0CAnBF,uCAoBI,iBACA,eACA,WACA,aACF,0CAxBF,uCAyBI,WACA,YACA,gBACF,+CACE,iBFpCM,QEsCV,gCACE,WACA,YACA,aACA,mBACA,uBACA,kBACA,yBAPF,gCAQI,mBACF,uCACE,eACA,gBACA,mBACA,cACF,4CACE,WACA,YF3CJ,kBACA,0BE4CI,kDDjEJ,YACA,YACA,gBACA,yBACA,eC+DM,kBACA,SACA,YACA,2BACA,aACA,mBACA,uBACA,sBACA,iBFpED,QEqEC,mBACA,YACA,YACA,0CAdF,kDAeI,YACA,YACA,qBACA,aACF,0CAnBF,kDAoBI,YACA,YACA,sBACF,0CAvBF,kDAwBI,YACA,WACA,oBACA,aACF,uDACE,aACA,mBACA,uBACA,kBACA,iBF7FF,KE8FE,kBACA,aACA,0CARF,uDASI,YACA,mBACF,0CAXF,uDAYI,kBACF,0CAbF,uDAcI,YACA,kBACF,2DACE,cACA,kBACA,QACA,WACA,0CALF,2DAMI,WACA,SACF,0CARF,2DASI,WACA,OACF,0CAXF,2DAYI,YACN,uDACE,eACA,iBACA,MFlHE,QEmHF,yBACA,WACA,cACA,kBACA,kBACA,QACA,0CAVF,uDAWI,gBACF,0CAZF,uDAaI,gBACF,0CAdF,uDAeI,gBACN,sDACE,sBACA,uBACA,kBACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,YACA,aACA,mBACA,UACA,oBF5IR,iBACA,yBACA,eACA,uBE2IQ,iEACE,UAEJ,sFACE,YAEN,qCACE,kBACA,UACA,UACA,SACA,gBACA,gBACA,oBACA,iDACE,aACA,eACA,uBACA,gBACA,WACA,qDACE,WACA,YACA,cACA,iBACA,eACA,kBACA,sBACJ,wCACE,qBACA,2CACE,MFhLE,QEiLF,iBFnLE,QEoLF,iBACA,mBACA,gBACA,YACA,eACA,mBACA,YFrLR,iBACA,yBACA,eACA,uBEoLQ,iDACE,aACA,eACA,WAEA,6DACE,eACA,iBACA,WACA,YACA,SACA,kBACA,2FACE,wBACJ,4DACE,aACJ,wDACE,kBACA,+DACE,iBACA,WACA,WACA,YACA,cACA,gKACA,kBACA,WACA,QACA,2BC9NZ,yCACE,kBACA,UACA,OACA,MACA,WACA,YACA,aACA,mBACA,uBACA,2BACA,4BACA,sBAEA,kDACE,aACA,sBACA,mBACA,2BACA,uCACA,mBACA,gBACA,YACA,4BACA,4BFpBJ,0BACA,+BACA,kCEoBI,0CAZF,kDAaI,YACA,6BACJ,gDACE,aACA,uBACA,uBACF,+CACE,aACA,sBACA,mBACA,2BACA,cACA,0CANF,+CAOI,eACF,mDACE,cACA,WACA,YACA,mBACA,uBACA,0CANF,mDAOI,WACA,aACF,0CATF,mDAUI,YACJ,iDACE,MH7CI,QG8CJ,eACA,iBACA,kBACA,gBACA,gBACA,0CAPF,iDAQI,eACA,iBACF,0CAVF,iDAWI,gBACF,0CAZF,iDAaI,gBACN,gDFrEF,YACA,YACA,gBACA,yBACA,eEmEI,aACA,mBACA,uBACA,YACA,eACA,mBACA,iBHpEM,QGqEN,MHnEM,QGoEN,eACA,iBACA,yBACA,wBACA,0CAdF,gDAeI,eACA,aACF,0CAjBF,gDAkBI,eACA,aACF,0CApBF,gDAqBI,eACA,YACA,gBCxFJ,0CACE,WACA,YACA,kBACA,OACA,MACA,UACA,kDACE,WACA,YACA,gBACA,2BACA,oDACE,wBACF,yDACE,yBACJ,mDACE,kBACA,UACA,SACA,YACA,aACA,mBACA,uBACA,YACA,mBACA,gCACA,2BHxBN,0BACA,+BACA,kCGwBM,0CAbF,mDAcI,aACF,0CAfF,mDAgBI,aACF,0DHrCN,YACA,YACA,gBACA,yBACA,eGmCQ,WACA,YACA,kBACA,iBJrCF,KIsCE,aACA,mBACA,uBACA,kBACA,0CAVF,0DAWI,WACA,aACF,0CAbF,0DAcI,kBACA,WACA,aACF,0CAjBF,0DAkBI,WACA,aACF,8DACE,cACA,0CAFF,8DAGI,sBACF,0CAJF,8DAKI,uBACF,0CANF,8DAOI,uBACJ,4EACE,eACN,oDACE,UACF,8CACE,kBACA,UACA,YACA,UACA,mBACA,UACA,uBJxDN,kBACA,0BIyDM,sDACE,WACA,kBACA,WACA,SACA,QACA,gCACA,wBACA,yBACA,sBACA,iBJnFF,KIoFA,0CApBF,8CAqBI,UACA,qBACA,0BACF,0CAxBF,8CAyBI,sBACF,0CA1BF,8CA2BI,YACA,uBAEA,0CADF,sDAEI,0CACA,SACA,WACA,6DACE,WACA,kBACA,WACA,SACA,QACA,gCACA,YACA,2BACA,sCAGE,yEACE,uBACR,0CAnBF,sDAoBI,yCACJ,sDACE,UACA,oBACF,kDACE,YACA,mBACA,cJ/GR,iBACA,yBACA,eACA,uBAOA,mCACA,4BACA,gCACA,wBIqGQ,wDACE,wCACJ,kDACE,kBACA,OACA,MACA,YACA,YACA,UACA,cACA,sBACA,0DACE,UACA,KJpIA,QIqIA,eACA,gEACE,WACA,0CAFF,gEAGI,WACR,mDACE,kBACA,OACA,MACA,UACA,WACA,kBACA,0CACA,2CACA,4CACA,0CACA,6CACA,yBACA,UACA,oBACA,2DACE,WACA,kBACA,UACA,SACA,QACA,iDACA,WACA,YACA,iBJlKA,QImKA,kBACA,yBACA,gCC7KZ,eACE,cACA,kBACA,WACA,YACA,yBACE,kBACA,SACA,QACA,gCACF,mBACE,4CACF,mBACE,kBACA,SACA,WACA,YACA,kBACA,WLVQ,QKWR,mDACA,gCACE,SACA,uCACF,gCACE,SACA,uCACF,gCACE,UACA,uCACF,gCACE,UACA,uCAEN,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,0BAEF,KACE,8BChDA,uCACE,WACA,YACA,kBACA,OACA,MACA,UACA,6CACE,WACA,YACA,cACF,gDACE,kBACA,WACA,aACA,UACA,oBACA,0CANF,gDAOI,SACA,4BACF,wDACE,UACA","file":"app.css"}

package/build/assets/sass/components/instructions.sass

@@ -52,6 +52,8 @@
         @media #{$mobile}
           width: 40px
           height: 60px
+        @media #{$w-374}
+          width: 35px
       p
         color: $text-dark
         font-size: 20px
@@ -64,6 +66,8 @@
           max-width: 115px
         @media #{$mobile}
           font-size: 16px
+        @media #{$w-374}
+          font-size: 14px
     button
       @include customButton
       display: flex
@@ -84,3 +88,7 @@
       @media #{$mobile}
         font-size: 16px
         height: 35px
+      @media #{$w-374}
+        font-size: 14px
+        height: 26px
+        padding: 0 25px

package/build/assets/sass/components/panorama.sass

@@ -32,10 +32,10 @@
         background-color: transparentize($black, .8)
         transform: translateX(-50%)
         @include blurBackground(5px)
-        @media #{$tablet}
-          bottom: 20px
         @media #{$mobile}
           padding: 5px
+        @media #{$w-374}
+          bottom: 30px
         &-button
           @include customButton
           width: 55px
@@ -47,51 +47,82 @@
           justify-content: center
           margin-right: 18px
           @media #{$tablet}
-            width: 40px
-            height: 40px
+            width: 44px
+            height: 44px
           @media #{$mobile}
-            margin-right: 13px
-            width: 35px
-            height: 35px
+            margin-right: 10px
+            width: 33px
+            height: 33px
+          @media #{$w-374}
+            width: 26px
+            height: 26px
           img
             display: block
             @media #{$tablet}
               transform: scale(.7)
             @media #{$mobile}
-              transform: scale(.55)
+              transform: scale(.52)
+            @media #{$w-374}
+              transform: scale(.45)
           &:nth-last-child(1)
             margin-right: 0
+      &-close-map
+        z-index: 4
       &-map
         position: absolute
         left: 45px
         bottom: 35px
         z-index: 3
         border-radius: 10px
-        border: 8px solid $white
-        background-color: $white
         opacity: 1
         transition: opacity .5s
+        @include noTouch
+        &::before
+          content: ''
+          position: absolute
+          z-index: -1
+          left: 50%
+          top: 50%
+          transform: translate(-50%, -50%)
+          width: calc(100% + 16px)
+          height: calc(100% + 16px)
+          border-radius: inherit
+          background-color: $white
         @media #{$tablet}
           left: 20px
-          bottom: 20px
           transform: scale(.6)
           transform-origin: 0% 100%
-          svg
-            polygon
-              opacity: 0
-          &--scaled
-            transform: scale(1) !important
+        @media #{$mobile}
+          transform: scale(.4)
+        @media #{$w-374}
+          bottom: 30px
+          transform: scale(.35)
+        &--scaled
+          @media #{$tablet}
+            transform: scale(1.4) translate(-50%, 50%)
+            left: 50%
+            bottom: 50%
+            &::after
+              content: ''
+              position: absolute
+              z-index: -2
+              left: 50%
+              top: 50%
+              transform: translate(-50%, -50%)
+              width: 100vw
+              height: calc(100 * var(--vh))
+              background-color: transparentize(#C4C4C4, .2)
             svg
               polygon
                 &:active
                   opacity: .3 !important
-        @media #{$mobile}
-          transform: scale(.4)
+          @media #{$mobile}
+            transform: scale(1) translate(-50%, 50%)
         &--hidden
           opacity: 0
           pointer-events: none
         img
-          width: 195px
+          width: 200px
           border-radius: none
           display: block
           @include noSelect
@@ -102,7 +133,7 @@
           position: absolute
           left: 0
           top: 0
-          width: 195px
+          width: 200px
           height: 100%
           z-index: 3
           display: block

package/build/assets/sass/components/tabs.sass

@@ -11,9 +11,10 @@
     align-items: center
     justify-content: flex-end
     @media #{$tablet}
-      flex-direction: column
       right: 20px
-      bottom: 20px
+      bottom: 35px
+    @media #{$w-374}
+      bottom: 30px
   .widget-tab-button
     @include customButton
     width: 72px
@@ -29,16 +30,19 @@
     font-weight: bold
     margin-left: 40px
     @media #{$tablet}
+      margin-left: 20px
       width: 60px
       height: 60px
-      font-size: 24px
-      margin-left: 0px
-      margin-top: 20px
+      font-size: 22px
     @media #{$mobile}
-      margin-top: 15px
-      font-size: 18px
-      width: 45px
-      height: 45px
+      margin-left: 10px
+      font-size: 17px
+      width: 44px
+      height: 44px
+    @media #{$w-374}
+      width: 36px
+      height: 36px
+      font-size: 14px
     &--active
       background-color: $mainColor
 
@@ -50,7 +54,7 @@
     justify-content: center
     padding: 60px 30px
     @media (max-width: 630px)
-      padding: 60px 15px
+      padding: 60px 20px
     &__image
       max-width: 100%
       max-height: 100%
@@ -59,8 +63,7 @@
     &__threesixty
       width: 100%
       height: 100%
-      touch-action: none
-      -webkit-touch-action: none
+      @include noTouch
       &-start
         @include customButton
         position: absolute
@@ -70,38 +73,70 @@
         display: flex
         align-items: center
         justify-content: center
-        padding: 0 30px 0 27px
+        padding: 0 25px 0 10px
         background-color: $gray
         border-radius: 38px
         height: 72px
+        width: 202px
         @media #{$tablet}
           height: 60px
-          width: 60px
-          padding: 0
-          left: 20px
-          bottom: 20px
-          transform: none
+          width: 166px
+          padding: 0 20px 0 8px
+          bottom: 35px
         @media #{$mobile}
-          width: 45px
-          height: 45px
-        img
-          display: block
-          margin-right: 20px
-          position: relative
-          top: 2px
+          height: 44px
+          width: 115px
+          padding: 0 10px 0 6px
+        @media #{$w-374}
+          height: 36px
+          width: 94px
+          padding: 0 8px 0 6px
+          bottom: 30px
+        &-icon
+          display: flex
+          align-items: center
+          justify-content: center
+          border-radius: 50%
+          background-color: $white
+          margin-right: 18px
+          padding: 10px
           @media #{$tablet}
-            top: 0
-            width: 30px
-            margin-right: 0
+            padding: 7px
+            margin-right: 15px
           @media #{$mobile}
-            width: 20px
+            margin-right: 7px
+          @media #{$w-374}
+            padding: 6px
+            margin-right: 5px
+          img
+            display: block
+            position: relative
+            top: 2px
+            width: 34px
+            @media #{$tablet}
+              width: 30px
+              top: 1px
+            @media #{$mobile}
+              width: 19px
+              top: 0
+            @media #{$w-374}
+              width: 15px
         span
           font-size: 24px
           font-weight: bold
           color: $text-dark
           text-transform: uppercase
+          width: 100%
+          display: block
+          text-align: center
+          position: relative
+          top: 1px
           @media #{$tablet}
-            display: none
+            font-size: 20px
+          @media #{$mobile}
+            font-size: 14px
+          @media #{$w-374}
+            font-size: 12px
       &-container
         width: 100% !important
         height: 100% !important

package/build/assets/sass/index.sass

@@ -1,15 +1,6 @@
 @import './vars'
 @import './mixin'
 
-*, *:before, *:after
-  box-sizing: border-box
-  -webkit-box-sizing: border-box
-  margin: 0
-  padding: 0
-
-html, body
-  font-size: 20px
-
 .widget-application
   --vh: 100vh
 
@@ -19,15 +10,20 @@ html, body
   position: relative
   z-index: 1
   background-color: $white
+  font-size: 20px
 
   *, *:before, *:after
-    font-family: 'Roboto Mono', sans-serif
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
-    outline: none
-    font-weight: 700
+    font-family: 'Roboto Mono', sans-serif
     text-decoration: none
+    font-weight: 700
     color: $text-dark
+    outline: none
+    padding: 0
+    margin: 0
+    box-sizing: border-box
+    -webkit-box-sizing: border-box
 
   .widget-logo
     position: absolute
@@ -36,7 +32,9 @@ html, body
     z-index: 3
     @media #{$tablet}
       left: 20px
-      top: 20px
+      top: 30px
+    @media #{$w-374}
+      top: 25px
     img
       display: block
       width: 82px
@@ -47,22 +45,30 @@ html, body
         width: 65px
         height: 65px
       @media #{$mobile}
-        width: 40px
-        height: 40px
+        width: 42px
+        height: 42px
+      @media #{$w-374}
+        width: 36px
+        height: 36px
 
+  .widget-tab__panorama-close-map,
   .widget-enter-fullscreen,
   .widget-exit-fullscreen
     position: absolute
     right: 45px
     top: 36px
     z-index: 3
-    @include customButton
     padding: 10px
+    touch-action: none
+    @include customButton
     @media #{$tablet}
-      right: 20px
-      top: 23px
+      right: 17px
+      top: 35px
     @media #{$mobile}
       padding: 5px
+      right: 20px
+    @media #{$w-374}
+      top: 25px
     img
       display: block
       width: 50px
@@ -73,26 +79,11 @@ html, body
         width: 40px
         height: 40px
       @media #{$mobile}
-        width: 30px
-        height: 30px
-
-  .widget-close
-    position: absolute
-    display: flex
-    align-items: center
-    justify-content: center
-    z-index: 3
-    right: 15px
-    top: 15px
-    color: $black
-    background-color: $mainColor
-    padding: 5px 15px
-    border-radius: 10px
-    font-size: .8rem
-    border: none
-    cursor: pointer
-    &:hover
-      box-shadow: 1px 1px 10px rgba(0, 0, 0, .15)
+        width: 32px
+        height: 32px
+      @media #{$w-374}
+        width: 26px
+        height: 26px
 
 @import './components/tabs'
 @import './components/instructions'

package/build/assets/sass/vars.sass

@@ -1,3 +1,4 @@
+$w-374: "only screen and (max-width: 374px)"
 $mobile: "only screen and (max-width: 545px)"
 $tablet: "only screen and (max-width: 900px)"
 $laptop: "only screen and (max-width: 1440px)"
@@ -17,6 +18,10 @@ $text-dark: #413E3E
   user-drag: none
   -webkit-user-drag: none
 
+@mixin noTouch
+  touch-action: none
+  -webkit-touch-action: none
+
 @mixin highResolution
   -webkit-backface-visibility: hidden
   -ms-transform: translateZ(0)

package/build/components/Application.js

@@ -100,6 +100,7 @@ var Application = (0, _mobxReactLite.observer)(function (_ref) {
 
   var getTabButton = function getTabButton(button, index) {
     if (!_store.default.isTabIncluded(button.tab) || _store.default.config.tabs.length < 2) return null;
+    if (!_store.default.controlsVisible) return null;
     return /*#__PURE__*/_react.default.createElement(_TabButton.default, {
       key: index,
       text: button.text,
@@ -124,7 +125,7 @@ var Application = (0, _mobxReactLite.observer)(function (_ref) {
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: config.logo,
     alt: "logo"
-  })), /*#__PURE__*/_react.default.createElement(_FullScreenButton.default, null), /*#__PURE__*/_react.default.createElement("div", {
+  })), _store.default.controlsVisible && /*#__PURE__*/_react.default.createElement(_FullScreenButton.default, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab-buttons"
   }, tabButtons.map(getTabButton)));
 });

package/build/components/PanoramaTab.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _deviceStore = _interopRequireDefault(require("../store/deviceStore"));
+
 var _locale = _interopRequireDefault(require("../locale"));
 
 var _store = _interopRequireDefault(require("../store"));
@@ -51,6 +53,8 @@ var _x = _interopRequireDefault(require("../assets/icons/1x.svg"));
 
 var _x2 = _interopRequireDefault(require("../assets/icons/2x.svg"));
 
+var _close = _interopRequireDefault(require("../assets/icons/close.svg"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -272,50 +276,55 @@ var PanoramaTab = function PanoramaTab(_ref4) {
       setWindowSize = _useState8[1];
 
   var _useState9 = (0, _react.useState)({
-    width: '195px',
+    width: '200px',
     height: 'auto'
   }),
       _useState10 = _slicedToArray(_useState9, 2),
       mapSize = _useState10[0],
       setMapSize = _useState10[1];
 
-  var _useState11 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      mapOpen = _useState12[0],
+      setMapState = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({
     X: 1,
     Y: 1
   }),
-      _useState12 = _slicedToArray(_useState11, 2),
-      planScale = _useState12[0],
-      setPlanScale = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(true),
       _useState14 = _slicedToArray(_useState13, 2),
-      isMapDisabled = _useState14[0],
-      setMapDisabledState = _useState14[1];
+      planScale = _useState14[0],
+      setPlanScale = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(false),
+  var _useState15 = (0, _react.useState)(true),
       _useState16 = _slicedToArray(_useState15, 2),
-      autoplayEnabled = _useState16[0],
-      setAutoplayState = _useState16[1];
+      isMapDisabled = _useState16[0],
+      setMapDisabledState = _useState16[1];
 
-  var _useState17 = (0, _react.useState)(cameraFovValues.x1),
+  var _useState17 = (0, _react.useState)(false),
       _useState18 = _slicedToArray(_useState17, 2),
-      cameraFov = _useState18[0],
-      setCameraFov = _useState18[1];
+      autoplayEnabled = _useState18[0],
+      setAutoplayState = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(0),
+  var _useState19 = (0, _react.useState)(cameraFovValues.x1),
       _useState20 = _slicedToArray(_useState19, 2),
-      currentRoomIndex = _useState20[0],
-      setCurrentRoomIndex = _useState20[1];
+      cameraFov = _useState20[0],
+      setCameraFov = _useState20[1];
 
-  var _useState21 = (0, _react.useState)([]),
+  var _useState21 = (0, _react.useState)(0),
       _useState22 = _slicedToArray(_useState21, 2),
-      panoramas = _useState22[0],
-      setPanoramas = _useState22[1];
+      currentRoomIndex = _useState22[0],
+      setCurrentRoomIndex = _useState22[1];
 
-  var _useState23 = (0, _react.useState)(null),
+  var _useState23 = (0, _react.useState)([]),
       _useState24 = _slicedToArray(_useState23, 2),
-      viewer = _useState24[0],
-      setViewer = _useState24[1];
+      panoramas = _useState24[0],
+      setPanoramas = _useState24[1];
+
+  var _useState25 = (0, _react.useState)(null),
+      _useState26 = _slicedToArray(_useState25, 2),
+      viewer = _useState26[0],
+      setViewer = _useState26[1];
 
   var changePanorama = function changePanorama(panorama) {
     setCurrentRoomIndex(panorama['panorama_index']);
@@ -331,7 +340,7 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     var imageWidth = image.naturalWidth;
     var imageHeight = image.naturalHeight;
     var imageDelta = imageWidth / imageHeight;
-    var maxWidth = 195;
+    var maxWidth = 200;
     var maxHeight = clientHeight - 200;
     var width = maxWidth;
     var height = width / imageDelta;
@@ -410,18 +419,19 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     viewer.enableAutoRate();
   };
 
-  var updateWindowWidth = function updateWindowWidth() {
-    return setWindowSize({
-      width: window.innerWidth,
-      height: window.innerHeight
-    });
-  };
-
   (0, _react.useEffect)(function () {
-    window.addEventListener('resize', updateWindowWidth);
-    updateWindowWidth();
+    var onResize = function onResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+      closeMap();
+    };
+
+    onResize();
+    window.addEventListener('resize', onResize);
     return function cleanup() {
-      window.removeEventListener('resize', updateWindowWidth);
+      window.removeEventListener('resize', onResize);
     };
   }, []);
   (0, _react.useEffect)(function () {
@@ -489,7 +499,7 @@ var PanoramaTab = function PanoramaTab(_ref4) {
 
   var onStart = function onStart() {
     setInstructionsState(false);
-    if (windowSize.width >= _deviceWidth.deviceWidth.laptop) return;
+    if (!_deviceStore.default.isMobile && !_deviceStore.default.isTablet) return;
 
     var allowDeviceOrientation = function allowDeviceOrientation() {
       window.removeEventListener('deviceorientation', allowDeviceOrientation);
@@ -521,23 +531,36 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     }).toString();
   };
 
+  var openMap = function openMap() {
+    _store.default.hideControls();
+
+    setMapState(true);
+  };
+
+  var closeMap = function closeMap() {
+    _store.default.showControls();
+
+    setMapState(false);
+  };
+
   var onMapClick = function onMapClick(event) {
     if (loadingState) return;
-    var map = document.querySelector('.widget-tab__panorama-map');
 
     if (windowSize.width <= _deviceWidth.deviceWidth.tablet) {
-      if (!map.classList.contains('widget-tab__panorama-map--scaled')) {
-        map.classList.add('widget-tab__panorama-map--scaled');
+      if (!mapOpen) {
+        openMap();
         return;
       }
     }
 
+    var map = document.querySelector('.widget-tab__panorama-map');
+    var mapScale = map.getBoundingClientRect().width / map.offsetWidth;
     var image = document.querySelector('.widget-tab__panorama-map img');
     var offset = image.getBoundingClientRect();
     var clientX = event.clientX,
         clientY = event.clientY;
-    var x = (clientX - offset.left) / planScale.X;
-    var y = (clientY - offset.top) / planScale.Y;
+    var x = (clientX - offset.left) / mapScale / planScale.X;
+    var y = (clientY - offset.top) / mapScale / planScale.Y;
     var availablePanoramas = panoramas.filter(function (_ref9) {
       var userData = _ref9.userData;
       return (0, _geometric.pointInPolygon)([x, y], userData.points);
@@ -546,11 +569,25 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     var _getClosestPanorama2 = (0, _panoramaHelpers.getClosestPanorama)([x, y], availablePanoramas),
         panorama = _getClosestPanorama2.panorama;
 
-    map.classList.remove('widget-tab__panorama-map--scaled');
+    closeMap();
     if (!panorama) return;
     changePanorama(panorama);
   };
 
+  var getMapClass = function getMapClass() {
+    var className = 'widget-tab__panorama-map';
+
+    if (isMapDisabled) {
+      className += ' widget-tab__panorama-map--hidden';
+    }
+
+    if (mapOpen) {
+      className += ' widget-tab__panorama-map--scaled';
+    }
+
+    return className;
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__panorama"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -558,8 +595,14 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     onContextMenu: _helpers.preventRightClick
   }), loadingState && /*#__PURE__*/_react.default.createElement(_Loader.default, {
     absolute: true
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__panorama-map ".concat(isMapDisabled ? 'widget-tab__panorama-map--hidden' : '')
+  }), mapOpen && /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__panorama-close-map",
+    onClick: closeMap
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _close.default,
+    alt: "close-map"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: getMapClass()
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: planImage,
     style: mapSize,

package/build/components/RotationTab.js

@@ -58,35 +58,41 @@ var RotationTab = function RotationTab(_ref) {
     text: _locale.default.getLocaleText('rotate-plan')
   }];
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
       showInstructions = _useState2[0],
       setInstructionsState = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(0),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      activeIndex = _useState4[0],
-      setActiveIndex = _useState4[1];
+      autoplayEnabled = _useState4[0],
+      setAutoplayState = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)(0),
       _useState6 = _slicedToArray(_useState5, 2),
-      active = _useState6[0],
-      setActiveState = _useState6[1];
+      activeIndex = _useState6[0],
+      setActiveIndex = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      rotation = _useState8[0],
+      setRotation = _useState8[1];
+
+  var updateRotation = function updateRotation() {
+    setActiveIndex(this.index);
+    setAutoplayState(this.looping);
+  };
 
   var onStart = function onStart() {
     setInstructionsState(false);
     var container = document.querySelector('.widget-tab__threesixty-container');
     var widgetTab = document.querySelector('.widget-tab');
-    var rotation = new _threesixty.default(container, {
+    var newRotation = new _threesixty.default(container, {
       image: _toConsumableArray(images),
       parentElement: widgetTab,
       inverted: true
     });
-
-    rotation._update = function () {
-      return setActiveIndex(rotation.index);
-    };
-
+    newRotation._update = updateRotation;
     var lastIndex = 0;
     var controller = (0, _panzoom.default)(container, {
       maxZoom: 3,
@@ -96,26 +102,27 @@ var RotationTab = function RotationTab(_ref) {
       }
     });
     controller.on('panstart', function () {
-      lastIndex = rotation.index;
+      lastIndex = newRotation.index;
+      newRotation.stop();
+
+      newRotation._update = function () {};
 
-      rotation._update = function () {};
+      setAutoplayState(newRotation.looping);
     });
     controller.on('panend', function () {
-      rotation.goto(lastIndex);
-
-      rotation._update = function () {
-        return setActiveIndex(rotation.index);
-      };
+      newRotation.goto(lastIndex);
+      newRotation._update = updateRotation;
     });
+    setRotation(newRotation);
   };
 
-  var openInstructions = function openInstructions() {
-    setInstructionsState(true);
-    setActiveState(true);
+  var toggleAutoplay = function toggleAutoplay() {
+    rotation.toggle();
+    setAutoplayState(rotation.looping);
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__threesixty ".concat(active ? 'widget-tab__threesixty--active' : '')
+    className: "widget-tab__threesixty ".concat(!showInstructions ? 'widget-tab__threesixty--active' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__threesixty-container",
     onContextMenu: _helpers.preventRightClick
@@ -126,13 +133,15 @@ var RotationTab = function RotationTab(_ref) {
       alt: "rotation-view-".concat(index),
       className: activeIndex === index ? 'active' : ''
     });
-  }))), !active && !showInstructions && /*#__PURE__*/_react.default.createElement("button", {
+  }))), !showInstructions && /*#__PURE__*/_react.default.createElement("button", {
     className: "widget-tab__threesixty-start",
-    onClick: openInstructions
+    onClick: toggleAutoplay
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__threesixty-start-icon"
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: _rotation.default,
     alt: "start-icon"
-  }), /*#__PURE__*/_react.default.createElement("span", null, _locale.default.getLocaleText('rotate'))), showInstructions && /*#__PURE__*/_react.default.createElement(_Instructions.default, {
+  })), /*#__PURE__*/_react.default.createElement("span", null, _locale.default.getLocaleText(autoplayEnabled ? 'stop' : 'rotate'))), showInstructions && /*#__PURE__*/_react.default.createElement(_Instructions.default, {
     disabled: disabled,
     steps: instructionSteps,
     onClick: onStart

package/build/config/defaultConfig.js

@@ -21,7 +21,7 @@ var defaultConfig = {
   rotationImages: [],
   panoramaImages: [],
   json: null,
-  locale: 'en-US',
+  locale: 'en',
   API_URL: 'https://backend.estate.hart-digital.com'
 };
 var _default = defaultConfig;

package/build/locale/{en_US → en}/data.json

@@ -2,6 +2,7 @@
   "research-plan": "Research plan",
   "rotate-plan": "Rotate plan",
   "rotate": "Rotate",
+  "stop": "Stop",
   "plan": "Plan",
   "off": "Off",
   "on": "On",

package/build/locale/index.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _mobx = require("mobx");
 
-var _data = _interopRequireDefault(require("./ru_RU/data.json"));
+var _data = _interopRequireDefault(require("./ru/data.json"));
 
-var _data2 = _interopRequireDefault(require("./en_US/data.json"));
+var _data2 = _interopRequireDefault(require("./en/data.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,14 +33,14 @@ var LocaleStore = /*#__PURE__*/function () {
 
     _classCallCheck(this, LocaleStore);
 
-    _defineProperty(this, "availableLocales", ['ru-RU', 'en-US']);
+    _defineProperty(this, "availableLocales", ['ru', 'en']);
 
     _defineProperty(this, "locales", {
-      'ru-RU': _data.default,
-      'en-US': _data2.default
+      'ru': _data.default,
+      'en': _data2.default
     });
 
-    _defineProperty(this, "currentLocale", 'en-US');
+    _defineProperty(this, "currentLocale", 'en');
 
     _defineProperty(this, "getLocaleText", function (key) {
       return _this.localeData[key];

package/build/locale/{ru_RU → ru}/data.json

@@ -1,7 +1,8 @@
 {
   "research-plan": "Исследовать планировку",
   "rotate-plan": "Вращать планировку",
-  "rotate": "Вращать",
+  "rotate": "Старт",
+  "stop": "Стоп",
   "plan": "Планировка",
   "off": "Выкл",
   "on": "Вкл",

package/build/store/deviceStore.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mobx = require("mobx");
+
+var _uaParserJs = _interopRequireDefault(require("ua-parser-js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+(0, _mobx.configure)({
+  useProxies: 'never'
+});
+
+var DeviceStore = /*#__PURE__*/function () {
+  function DeviceStore() {
+    _classCallCheck(this, DeviceStore);
+
+    _defineProperty(this, "parser", null);
+
+    (0, _mobx.makeAutoObservable)(this);
+    this.parser = new _uaParserJs.default();
+  }
+
+  _createClass(DeviceStore, [{
+    key: "device",
+    get: function get() {
+      return this.parser.getDevice();
+    }
+  }, {
+    key: "isMobile",
+    get: function get() {
+      return this.device.type === 'mobile';
+    }
+  }, {
+    key: "isTablet",
+    get: function get() {
+      return this.device.type === 'tablet';
+    }
+  }]);
+
+  return DeviceStore;
+}();
+
+var _default = new DeviceStore();
+
+exports.default = _default;

package/build/store/index.js

@@ -44,6 +44,8 @@ var Store = /*#__PURE__*/function () {
 
     _defineProperty(this, "listeners", {});
 
+    _defineProperty(this, "controlsVisible", true);
+
     (0, _mobx.makeAutoObservable)(this);
   }
 
@@ -76,6 +78,16 @@ var Store = /*#__PURE__*/function () {
     value: function setConfig(config) {
       this.config = config;
     }
+  }, {
+    key: "hideControls",
+    value: function hideControls() {
+      this.controlsVisible = false;
+    }
+  }, {
+    key: "showControls",
+    value: function showControls() {
+      this.controlsVisible = true;
+    }
   }, {
     key: "addEventListener",
     value: function addEventListener(event, callback) {

package/package.json

@@ -3,7 +3,7 @@
   "description": "HART Estate widget",
   "author": "HART",
   "keywords": [],
-  "version": "0.0.57",
+  "version": "0.0.60",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",
@@ -11,9 +11,9 @@
     "build",
     "README.md"
   ],
-	"engines": {
-		"node": "^16.0.0"
-	},
+  "engines": {
+    "node": "^16.0.0"
+  },
   "scripts": {
     "start": "npm run build:sass && babel src --watch -d build --copy-files",
     "start-example": "cd ./example && npm run start",
@@ -35,7 +35,8 @@
     "react-dom": "^17.0.2",
     "screenfull": "^6.0.1",
     "three": "^0.137.5",
-    "three-device-orientation": "^1.0.3"
+    "three-device-orientation": "^1.0.3",
+    "ua-parser-js": "^1.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.0",