hart-estate-widget 0.0.61 → 0.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -22
- package/build/assets/css/app.css +1 -1
- package/build/assets/css/app.css.map +1 -1
- package/build/assets/sass/components/instructions.sass +10 -10
- package/build/assets/sass/components/loader.sass +33 -32
- package/build/assets/sass/components/model.sass +1 -1
- package/build/assets/sass/components/panorama.sass +14 -16
- package/build/assets/sass/components/rotation.sass +106 -0
- package/build/assets/sass/components/tabs.sass +6 -112
- package/build/assets/sass/index.sass +13 -40
- package/build/assets/sass/mixin.sass +37 -1
- package/build/assets/sass/vars.sass +4 -5
- package/build/components/Application.js +13 -14
- package/build/components/PanoramaTab.js +34 -60
- package/build/components/RotationTab.js +6 -13
- package/build/components/Widget.js +46 -10
- package/build/config/defaultConfig.js +6 -4
- package/build/enums/deviceWidth.js +12 -3
- package/build/index.js +0 -8
- package/build/store/apiStore.js +51 -19
- package/build/store/fullScreenStore.js +36 -1
- package/build/store/index.js +13 -1
- package/build/store/modelStore.js +10 -5
- package/package.json +1 -1
- package/build/components/ImageTab.js +0 -23
package/README.md
CHANGED
@@ -10,26 +10,19 @@
|
|
10
10
|
```js
|
11
11
|
import React, { useEffect, useState } from 'react';
|
12
12
|
import { Widget } from 'hart-estate-widget';
|
13
|
-
import 'hart-estate-widget/build/index.css';
|
14
13
|
|
15
14
|
const WIDGET_OPTIONS = {
|
16
|
-
tabs: ['planImage', '
|
15
|
+
tabs: ['planImage', 'rotation', 'panorama'],
|
17
16
|
logo: '/path/to/logo.png',
|
18
17
|
planImage: '/path/to/plan.jpg',
|
19
|
-
topView: '/path/to/top_view.jpg',
|
20
|
-
topDownView: '/path/to/top_down_view.jpg',
|
21
18
|
rotationImages: [
|
22
19
|
'/path/to/rotation_image_1.jpg',
|
23
|
-
|
24
|
-
'/path/to/rotation_image_3.jpg',
|
25
|
-
'/path/to/rotation_image_4.jpg',
|
20
|
+
...
|
26
21
|
'/path/to/rotation_image_5.jpg',
|
27
22
|
],
|
28
23
|
panoramaImages: [
|
29
24
|
'/path/to/panorama_image_1.jpg',
|
30
|
-
|
31
|
-
'/path/to/panorama_image_3.jpg',
|
32
|
-
'/path/to/panorama_image_4.jpg',
|
25
|
+
...
|
33
26
|
'/path/to/panorama_image_5.jpg',
|
34
27
|
],
|
35
28
|
};
|
@@ -40,7 +33,18 @@ const App = () => {
|
|
40
33
|
useEffect(() => {
|
41
34
|
const createdWidget = new Widget('#widget-container', WIDGET_OPTIONS);
|
42
35
|
|
36
|
+
const onResize = () => {
|
37
|
+
const { innerWidth: width, innerHeight: height } = window;
|
38
|
+
createdWidget.updateSize({ width, height });
|
39
|
+
};
|
40
|
+
|
41
|
+
window.addEventListener('resize', onResize);
|
42
|
+
|
43
43
|
setState(createdWidget);
|
44
|
+
|
45
|
+
return function cleanup() {
|
46
|
+
window.removeEventListener('resize', onResize);
|
47
|
+
};
|
44
48
|
}, []);
|
45
49
|
|
46
50
|
return (
|
@@ -60,23 +64,24 @@ export App;
|
|
60
64
|
```js
|
61
65
|
{
|
62
66
|
// элементы
|
63
|
-
tabs: ['
|
67
|
+
tabs: ['rotation', 'panorama'], // включенные элементы
|
64
68
|
|
65
69
|
// логотип
|
66
70
|
logo: '', // путь к логотипу
|
67
71
|
logoUrl: '', // ссылка, открывающаяся по клику на логотип
|
68
72
|
|
69
73
|
// локализация
|
70
|
-
locale: 'en', // языковой код ISO 639
|
74
|
+
locale: 'en', // языковой код ISO 639
|
71
75
|
|
72
76
|
// ширина/высота
|
73
|
-
width:
|
74
|
-
height:
|
77
|
+
width: 1920,
|
78
|
+
height: 1080,
|
79
|
+
resizable: true, // автоматически менять размер виджета под размер контейнера при изменении размеров окна
|
75
80
|
|
76
81
|
// значения
|
77
|
-
planImage: '', // путь к изображению планировки
|
78
|
-
|
79
|
-
|
82
|
+
planImage: '', // путь к изображению планировки (необходимо для панорамного тура)
|
83
|
+
topViewImage: '', // путь к изображению планировки сверху
|
84
|
+
rotationMode: 'default', // режим работы изображений планировки
|
80
85
|
rotationImages: [], // пути к изображениям кругового просмотра (порядок обязателен)
|
81
86
|
panoramaImages: [], // пути к изображениям 360°
|
82
87
|
}
|
@@ -86,11 +91,15 @@ export App;
|
|
86
91
|
## Типы элементов
|
87
92
|
```js
|
88
93
|
tabs: [
|
89
|
-
'planImage', // изображение планировки
|
90
|
-
'topView', // изображение вида сверху
|
91
|
-
'topDownView', // изображение вида сверху под углом
|
92
94
|
'rotation', // изображения кругового просмотра (порядок обязателен)
|
93
95
|
'panorama', // изображения 360°
|
94
|
-
]
|
96
|
+
],
|
97
|
+
rotationMode: [
|
98
|
+
'default', // режим просмотра вида сверху (несколько ракурсов) и стилизованной планировки
|
99
|
+
'threesixty', // режим прокрутки изображений кругового просмотра
|
100
|
+
],
|
101
|
+
locale: [
|
102
|
+
'ru', // русский язык
|
103
|
+
'en', // английский язык
|
104
|
+
],
|
95
105
|
```
|
96
|
-
|
package/build/assets/css/app.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.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 */
|
1
|
+
.widget-application{width:100%;height:100%;flex:none;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}.widget-application--tablet.widget-application .widget-logo{left:20px;top:30px}.widget-application--smallMobile.widget-application .widget-logo{top:25px}.widget-application .widget-logo img{display:block;width:82px;height:82px;object-fit:contain;object-position:center}.widget-application--tablet.widget-application .widget-logo img{width:65px;height:65px}.widget-application--mobile.widget-application .widget-logo img{width:42px;height:42px}.widget-application--smallMobile.widget-application .widget-logo img{width:36px;height:36px}.widget-application .widget-tab__panorama-close-map{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}.widget-application--tablet.widget-application .widget-tab__panorama-close-map{right:17px;top:35px}.widget-application--mobile.widget-application .widget-tab__panorama-close-map{padding:5px;right:20px}.widget-application--smallMobile.widget-application .widget-tab__panorama-close-map{top:25px}.widget-application .widget-tab__panorama-close-map img{display:block;width:50px;height:50px;object-fit:contain;object-position:center}.widget-application--tablet.widget-application .widget-tab__panorama-close-map img{width:40px;height:40px}.widget-application--mobile.widget-application .widget-tab__panorama-close-map img{width:32px;height:32px}.widget-application--smallMobile.widget-application .widget-tab__panorama-close-map img{width:26px;height:26px}.widget-application .widget-enter-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}.widget-application--tablet.widget-application .widget-enter-fullscreen{right:17px;top:35px}.widget-application--mobile.widget-application .widget-enter-fullscreen{padding:5px;right:20px}.widget-application--smallMobile.widget-application .widget-enter-fullscreen{top:25px}.widget-application .widget-enter-fullscreen img{display:block;width:50px;height:50px;object-fit:contain;object-position:center}.widget-application--tablet.widget-application .widget-enter-fullscreen img{width:40px;height:40px}.widget-application--mobile.widget-application .widget-enter-fullscreen img{width:32px;height:32px}.widget-application--smallMobile.widget-application .widget-enter-fullscreen img{width:26px;height:26px}.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}.widget-application--tablet.widget-application .widget-exit-fullscreen{right:17px;top:35px}.widget-application--mobile.widget-application .widget-exit-fullscreen{padding:5px;right:20px}.widget-application--smallMobile.widget-application .widget-exit-fullscreen{top:25px}.widget-application .widget-exit-fullscreen img{display:block;width:50px;height:50px;object-fit:contain;object-position:center}.widget-application--tablet.widget-application .widget-exit-fullscreen img{width:40px;height:40px}.widget-application--mobile.widget-application .widget-exit-fullscreen img{width:32px;height:32px}.widget-application--smallMobile.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}.widget-application--tablet.widget-application .widget-tab-buttons{right:20px;bottom:35px}.widget-application--smallMobile.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}.widget-application--tablet.widget-application .widget-tab-button{margin-left:20px;width:60px;height:60px;font-size:22px}.widget-application--mobile.widget-application .widget-tab-button{margin-left:10px;font-size:17px;width:44px;height:44px}.widget-application--smallMobile.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}.widget-application--smallMobile.widget-application .widget-tab{padding:60px 20px}.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)}.widget-application--mobile.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}.widget-application--tablet.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}.widget-application--mobile.widget-application .widget-instructions__step img{width:40px;height:60px}.widget-application--smallMobile.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}.widget-application--tablet.widget-application .widget-instructions__step p{font-size:18px;max-width:115px}.widget-application--mobile.widget-application .widget-instructions__step p{font-size:16px}.widget-application--smallMobile.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}.widget-application--tablet.widget-application .widget-instructions button{font-size:18px;height:40px}.widget-application--mobile.widget-application .widget-instructions button{font-size:16px;height:35px}.widget-application--smallMobile.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)}.widget-application--mobile.widget-application .widget-tab__panorama-controls{padding:5px}.widget-application--smallMobile.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}.widget-application--tablet.widget-application .widget-tab__panorama-controls-button{width:44px;height:44px}.widget-application--mobile.widget-application .widget-tab__panorama-controls-button{margin-right:10px;width:33px;height:33px}.widget-application--smallMobile.widget-application .widget-tab__panorama-controls-button{width:26px;height:26px}.widget-application .widget-tab__panorama-controls-button img{display:block}.widget-application--tablet.widget-application .widget-tab__panorama-controls-button img{transform:scale(0.7)}.widget-application--mobile.widget-application .widget-tab__panorama-controls-button img{transform:scale(0.52)}.widget-application--smallMobile.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}.widget-application--tablet.widget-application .widget-tab__panorama-map{left:20px;transform:scale(0.6);transform-origin:0% 100%}.widget-application--mobile.widget-application .widget-tab__panorama-map{transform:scale(0.4)}.widget-application--smallMobile.widget-application .widget-tab__panorama-map{bottom:30px;transform:scale(0.35)}.widget-application--tablet.widget-application .widget-tab__panorama-map--scaled{transform:scale(1.4) translate(-50%, 50%);left:50%;bottom:50%}.widget-application--tablet.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:100vh;background-color:rgba(196,196,196,.8)}.widget-application--tablet.widget-application .widget-tab__panorama-map--scaled svg polygon:active{opacity:.3 !important}.widget-application--mobile.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}.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-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}.widget-application--tablet.widget-application .widget-tab__threesixty-start{height:60px;width:166px;padding:0 20px 0 8px;bottom:35px}.widget-application--mobile.widget-application .widget-tab__threesixty-start{height:44px;width:115px;padding:0 10px 0 6px}.widget-application--smallMobile.widget-application .widget-tab__threesixty-start{height:36px;width:85px;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}.widget-application--tablet.widget-application .widget-tab__threesixty-start-icon{padding:7px;margin-right:15px}.widget-application--mobile.widget-application .widget-tab__threesixty-start-icon{margin-right:7px}.widget-application--smallMobile.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}.widget-application--tablet.widget-application .widget-tab__threesixty-start-icon img{width:30px;top:1px}.widget-application--mobile.widget-application .widget-tab__threesixty-start-icon img{width:19px;top:0}.widget-application--smallMobile.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}.widget-application--tablet.widget-application .widget-tab__threesixty-start span{font-size:20px}.widget-application--mobile.widget-application .widget-tab__threesixty-start span{font-size:14px}.widget-application--smallMobile.widget-application .widget-tab__threesixty-start span{font-size:10px;top:0}.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-loader{display:block;position:relative;width:80px;height:80px}.widget-application .widget-loader--absolute{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.widget-application .widget-loader--sm{transform:translate(-50%, -50%) scale(0.75)}.widget-application .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-application .widget-loader div:nth-child(1){left:8px;animation:widget-loader-1 .6s infinite}.widget-application .widget-loader div:nth-child(2){left:8px;animation:widget-loader-2 .6s infinite}.widget-application .widget-loader div:nth-child(3){left:32px;animation:widget-loader-2 .6s infinite}.widget-application .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}.widget-application--mobile.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 */
|
@@ -1 +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,oBACE,
|
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/rotation.sass","../../../src/assets/sass/components/loader.sass","../../../src/assets/sass/components/model.sass"],"names":[],"mappings":"AAGA,oBACE,WACA,YACA,UACA,gBACA,kBACA,UACA,iBCLM,KDMN,eAEA,+EACE,mCACA,kCACA,qCACA,qBACA,gBACA,MCRQ,QDSR,aACA,UACA,SACA,sBACA,8BAEF,iCACE,kBACA,UACA,SACA,UEhBO,4DFkBL,UACA,SEnBK,iEFqBL,SACF,qCACE,cACA,WACA,YACA,mBACA,uBE3BK,gEF6BH,WACA,YE9BG,gEFgCH,WACA,YEjCG,qEFmCH,WACA,YAEN,oDElCA,kBACA,WACA,SACA,UACA,aACA,kBAtBA,YACA,YACA,gBACA,yBACA,eASS,+EAYP,WACA,SAbO,+EAeP,YACA,WAhBO,oFAkBP,SACF,wDACE,cACA,WACA,YACA,mBACA,uBAxBO,mFA0BL,WACA,YA3BK,mFA6BL,WACA,YA9BK,wFAgCL,WACA,YFOJ,6CEpCA,kBACA,WACA,SACA,UACA,aACA,kBAtBA,YACA,YACA,gBACA,yBACA,eASS,wEAYP,WACA,SAbO,wEAeP,YACA,WAhBO,6EAkBP,SACF,iDACE,cACA,WACA,YACA,mBACA,uBAxBO,4EA0BL,WACA,YA3BK,4EA6BL,WACA,YA9BK,iFAgCL,WACA,YFSJ,4CEtCA,kBACA,WACA,SACA,UACA,aACA,kBAtBA,YACA,YACA,gBACA,yBACA,eASS,uEAYP,WACA,SAbO,uEAeP,YACA,WAhBO,4EAkBP,SACF,gDACE,cACA,WACA,YACA,mBACA,uBAxBO,2EA0BL,WACA,YA3BK,2EA6BL,WACA,YA9BK,gFAgCL,WACA,YC3CJ,wCACE,kBACA,UACA,WACA,YACA,aACA,mBACA,yBDGO,mECDL,WACA,oFAEA,YACJ,uCDhBA,YACA,YACA,gBACA,yBACA,eCcE,WACA,YACA,kBACA,aACA,mBACA,uBACA,iBFlBG,QEmBH,MFfQ,QEgBR,eACA,iBACA,iBACA,iBDhBO,kECkBL,iBACA,WACA,YACA,eDrBK,kECuBL,iBACA,eACA,WACA,YD1BK,uEC4BL,WACA,YACA,eACF,+CACE,iBFrCM,QEuCV,gCACE,WACA,YACA,aACA,mBACA,uBACA,kBDxCO,gEC0CL,kBACF,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,MFvEE,QEwEF,iBF1EE,QE2EF,iBACA,mBACA,gBACA,YACA,eACA,mBACA,YF5ER,iBACA,yBACA,eACA,uBE2EQ,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,2BCpHZ,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,kCAIS,6EEiBH,YACA,4BACJ,gDACE,aACA,uBACA,uBACF,+CACE,aACA,sBACA,mBACA,2BACA,cF5BK,0EE8BH,cACF,mDACE,cACA,WACA,YACA,mBACA,uBFpCG,8EEsCD,WACA,YFvCC,mFEyCD,WACJ,iDACE,MH9CI,QG+CJ,eACA,iBACA,kBACA,gBACA,gBFhDG,4EEkDD,eACA,gBFnDC,4EEqDD,eFrDC,iFEuDD,eACN,gDFrEF,YACA,YACA,gBACA,yBACA,eEmEI,aACA,mBACA,uBACA,YACA,eACA,mBACA,iBHrEM,QGsEN,MHpEM,QGqEN,eACA,iBACA,yBACA,wBFrEK,2EEuEH,eACA,YFxEG,2EE0EH,eACA,YF3EG,gFE6EH,eACA,YACA,eCxFJ,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,kCAIS,8EGqBD,YHrBC,mFGuBD,YACF,0DHrCN,YACA,YACA,gBACA,yBACA,eGmCQ,WACA,YACA,kBACA,iBJtCF,KIuCE,aACA,mBACA,uBACA,kBHjCC,qFGmCC,WACA,YHpCD,qFGsCC,kBACA,WACA,YHxCD,0FG0CC,WACA,YACF,8DACE,cH7CD,yFG+CG,qBH/CH,yFGiDG,sBHjDH,8FGmDG,sBACJ,4EACE,eACN,oDACE,UACF,8CACE,kBACA,UACA,YACA,UACA,mBACA,UACA,uBJzDN,kBACA,0BI0DM,sDACE,WACA,kBACA,WACA,SACA,QACA,gCACA,wBACA,yBACA,sBACA,iBJpFF,KCSG,yEG6ED,UACA,qBACA,yBH/EC,yEGiFD,qBHjFC,8EGmFD,YACA,sBHpFC,iFGuFC,0CACA,SACA,WACA,wFACE,WACA,kBACA,WACA,SACA,QACA,gCACA,YACA,aACA,sCAGE,oGACE,sBHvGP,iFGyGC,wCACJ,sDACE,UACA,oBACF,kDACE,YACA,mBACA,cJhHR,iBACA,yBACA,eACA,uBAOA,mCACA,4BACA,gCACA,wBIsGQ,wDACE,wCACJ,kDACE,kBACA,OACA,MACA,YACA,YACA,UACA,cACA,sBACA,0DACE,UACA,KJrIA,QIsIA,eACA,gEACE,WACN,mDACE,kBACA,OACA,MACA,UACA,WACA,kBACA,0CACA,2CACA,4CACA,0CACA,6CACA,yBACA,UACA,oBACA,2DACE,WACA,kBACA,UACA,SACA,QACA,iDACA,WACA,YACA,iBJjKA,QIkKA,kBACA,yBACA,gCCxKR,4CACE,WACA,YLaJ,kBACA,0BKZI,kDJRJ,YACA,YACA,gBACA,yBACA,eIMM,kBACA,SACA,YACA,2BACA,aACA,mBACA,uBACA,sBACA,iBLZD,QKaC,mBACA,YACA,YJRG,6EIUD,YACA,YACA,qBACA,YJbC,6EIeD,YACA,YACA,qBJjBC,kFImBD,YACA,WACA,oBACA,YACF,uDACE,aACA,mBACA,uBACA,kBACA,iBLrCF,KKsCE,kBACA,aJ9BC,kFIgCC,YACA,kBJjCD,kFImCC,iBJnCD,uFIqCC,YACA,iBACF,2DACE,cACA,kBACA,QACA,WJ3CD,sFI6CG,WACA,QJ9CH,sFIgDG,WACA,MJjDH,2FImDG,WACN,uDACE,eACA,iBACA,ML1DE,QK2DF,yBACA,WACA,cACA,kBACA,kBACA,QJ7DC,kFI+DC,eJ/DD,kFIiEC,eJjED,uFImEC,eACA,MACN,sDACE,sBACA,uBACA,kBACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,YACA,aACA,mBACA,UACA,oBLrFR,iBACA,yBACA,eACA,uBKoFQ,iEACE,UAEJ,sFACE,YCtGR,mCACE,cACA,kBACA,WACA,YACA,6CACE,kBACA,SACA,QACA,gCACF,uCACE,4CACF,uCACE,kBACA,SACA,WACA,YACA,kBACA,WNZM,QMaN,mDACA,oDACE,SACA,uCACF,oDACE,SACA,uCACF,oDACE,UACA,uCACF,oDACE,UACA,uCAER,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,0BAEF,KACE,8BCjDA,uCACE,WACA,YACA,kBACA,OACA,MACA,UACA,6CACE,WACA,YACA,cACF,gDACE,kBACA,WACA,aACA,UACA,oBNNG,2EMQD,SACA,2BACF,wDACE,UACA","file":"app.css"}
|
@@ -28,7 +28,7 @@
|
|
28
28
|
max-width: calc(100% - 60px)
|
29
29
|
padding: 36px 30px 30px 30px
|
30
30
|
@include blurBackground(5px)
|
31
|
-
@media
|
31
|
+
@include media($mobile)
|
32
32
|
width: 280px
|
33
33
|
padding: 26px 20px 20px 20px
|
34
34
|
&__steps
|
@@ -41,7 +41,7 @@
|
|
41
41
|
align-items: center
|
42
42
|
justify-content: flex-start
|
43
43
|
margin: 0 15px
|
44
|
-
@media
|
44
|
+
@include media($tablet)
|
45
45
|
margin: 0 10px
|
46
46
|
img
|
47
47
|
display: block
|
@@ -49,10 +49,10 @@
|
|
49
49
|
height: 80px
|
50
50
|
object-fit: contain
|
51
51
|
object-position: center
|
52
|
-
@media
|
52
|
+
@include media($mobile)
|
53
53
|
width: 40px
|
54
54
|
height: 60px
|
55
|
-
@media
|
55
|
+
@include media($smallMobile)
|
56
56
|
width: 35px
|
57
57
|
p
|
58
58
|
color: $text-dark
|
@@ -61,12 +61,12 @@
|
|
61
61
|
text-align: center
|
62
62
|
margin-top: 10px
|
63
63
|
max-width: 130px
|
64
|
-
@media
|
64
|
+
@include media($tablet)
|
65
65
|
font-size: 18px
|
66
66
|
max-width: 115px
|
67
|
-
@media
|
67
|
+
@include media($mobile)
|
68
68
|
font-size: 16px
|
69
|
-
@media
|
69
|
+
@include media($smallMobile)
|
70
70
|
font-size: 14px
|
71
71
|
button
|
72
72
|
@include customButton
|
@@ -82,13 +82,13 @@
|
|
82
82
|
font-weight: bold
|
83
83
|
text-transform: uppercase
|
84
84
|
margin: 25px auto 0 auto
|
85
|
-
@media
|
85
|
+
@include media($tablet)
|
86
86
|
font-size: 18px
|
87
87
|
height: 40px
|
88
|
-
@media
|
88
|
+
@include media($mobile)
|
89
89
|
font-size: 16px
|
90
90
|
height: 35px
|
91
|
-
@media
|
91
|
+
@include media($smallMobile)
|
92
92
|
font-size: 14px
|
93
93
|
height: 26px
|
94
94
|
padding: 0 25px
|
@@ -1,37 +1,38 @@
|
|
1
1
|
@import '../vars'
|
2
2
|
|
3
|
-
.widget-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
3
|
+
.widget-application
|
4
|
+
.widget-loader
|
5
|
+
display: block
|
6
|
+
position: relative
|
7
|
+
width: 80px
|
8
|
+
height: 80px
|
9
|
+
&--absolute
|
10
|
+
position: absolute
|
11
|
+
left: 50%
|
12
|
+
top: 50%
|
13
|
+
transform: translate(-50%, -50%)
|
14
|
+
&--sm
|
15
|
+
transform: translate(-50%, -50%) scale(.75)
|
16
|
+
div
|
17
|
+
position: absolute
|
18
|
+
top: 33px
|
19
|
+
width: 13px
|
20
|
+
height: 13px
|
21
|
+
border-radius: 50%
|
22
|
+
background: $mainColor
|
23
|
+
animation-timing-function: cubic-bezier(0, 1, 1, 0)
|
24
|
+
&:nth-child(1)
|
25
|
+
left: 8px
|
26
|
+
animation: widget-loader-1 0.6s infinite
|
27
|
+
&:nth-child(2)
|
28
|
+
left: 8px
|
29
|
+
animation: widget-loader-2 0.6s infinite
|
30
|
+
&:nth-child(3)
|
31
|
+
left: 32px
|
32
|
+
animation: widget-loader-2 0.6s infinite
|
33
|
+
&:nth-child(4)
|
34
|
+
left: 56px
|
35
|
+
animation: widget-loader-3 0.6s infinite
|
35
36
|
|
36
37
|
@keyframes widget-loader-1
|
37
38
|
0%
|
@@ -32,9 +32,9 @@
|
|
32
32
|
background-color: transparentize($black, .8)
|
33
33
|
transform: translateX(-50%)
|
34
34
|
@include blurBackground(5px)
|
35
|
-
@media
|
35
|
+
@include media($mobile)
|
36
36
|
padding: 5px
|
37
|
-
@media
|
37
|
+
@include media($smallMobile)
|
38
38
|
bottom: 30px
|
39
39
|
&-button
|
40
40
|
@include customButton
|
@@ -46,23 +46,23 @@
|
|
46
46
|
align-items: center
|
47
47
|
justify-content: center
|
48
48
|
margin-right: 18px
|
49
|
-
@media
|
49
|
+
@include media($tablet)
|
50
50
|
width: 44px
|
51
51
|
height: 44px
|
52
|
-
@media
|
52
|
+
@include media($mobile)
|
53
53
|
margin-right: 10px
|
54
54
|
width: 33px
|
55
55
|
height: 33px
|
56
|
-
@media
|
56
|
+
@include media($smallMobile)
|
57
57
|
width: 26px
|
58
58
|
height: 26px
|
59
59
|
img
|
60
60
|
display: block
|
61
|
-
@media
|
61
|
+
@include media($tablet)
|
62
62
|
transform: scale(.7)
|
63
|
-
@media
|
63
|
+
@include media($mobile)
|
64
64
|
transform: scale(.52)
|
65
|
-
@media
|
65
|
+
@include media($smallMobile)
|
66
66
|
transform: scale(.45)
|
67
67
|
&:nth-last-child(1)
|
68
68
|
margin-right: 0
|
@@ -88,17 +88,17 @@
|
|
88
88
|
height: calc(100% + 16px)
|
89
89
|
border-radius: inherit
|
90
90
|
background-color: $white
|
91
|
-
@media
|
91
|
+
@include media($tablet)
|
92
92
|
left: 20px
|
93
93
|
transform: scale(.6)
|
94
94
|
transform-origin: 0% 100%
|
95
|
-
@media
|
95
|
+
@include media($mobile)
|
96
96
|
transform: scale(.4)
|
97
|
-
@media
|
97
|
+
@include media($smallMobile)
|
98
98
|
bottom: 30px
|
99
99
|
transform: scale(.35)
|
100
100
|
&--scaled
|
101
|
-
@media
|
101
|
+
@include media($tablet)
|
102
102
|
transform: scale(1.4) translate(-50%, 50%)
|
103
103
|
left: 50%
|
104
104
|
bottom: 50%
|
@@ -110,13 +110,13 @@
|
|
110
110
|
top: 50%
|
111
111
|
transform: translate(-50%, -50%)
|
112
112
|
width: 100vw
|
113
|
-
height:
|
113
|
+
height: 100vh
|
114
114
|
background-color: transparentize(#C4C4C4, .2)
|
115
115
|
svg
|
116
116
|
polygon
|
117
117
|
&:active
|
118
118
|
opacity: .3 !important
|
119
|
-
@media
|
119
|
+
@include media($mobile)
|
120
120
|
transform: scale(1) translate(-50%, 50%)
|
121
121
|
&--hidden
|
122
122
|
opacity: 0
|
@@ -144,8 +144,6 @@
|
|
144
144
|
cursor: pointer
|
145
145
|
&:hover
|
146
146
|
opacity: .3
|
147
|
-
@media #{$tablet}
|
148
|
-
opacity: 0
|
149
147
|
&__fov
|
150
148
|
position: absolute
|
151
149
|
left: 0
|
@@ -0,0 +1,106 @@
|
|
1
|
+
@import '../mixin'
|
2
|
+
@import '../vars'
|
3
|
+
|
4
|
+
.widget-application
|
5
|
+
.widget-tab
|
6
|
+
&__threesixty
|
7
|
+
width: 100%
|
8
|
+
height: 100%
|
9
|
+
@include noTouch
|
10
|
+
&-start
|
11
|
+
@include customButton
|
12
|
+
position: absolute
|
13
|
+
left: 50%
|
14
|
+
bottom: 35px
|
15
|
+
transform: translateX(-50%)
|
16
|
+
display: flex
|
17
|
+
align-items: center
|
18
|
+
justify-content: center
|
19
|
+
padding: 0 25px 0 10px
|
20
|
+
background-color: $gray
|
21
|
+
border-radius: 38px
|
22
|
+
height: 72px
|
23
|
+
width: 202px
|
24
|
+
@include media($tablet)
|
25
|
+
height: 60px
|
26
|
+
width: 166px
|
27
|
+
padding: 0 20px 0 8px
|
28
|
+
bottom: 35px
|
29
|
+
@include media($mobile)
|
30
|
+
height: 44px
|
31
|
+
width: 115px
|
32
|
+
padding: 0 10px 0 6px
|
33
|
+
@include media($smallMobile)
|
34
|
+
height: 36px
|
35
|
+
width: 85px
|
36
|
+
padding: 0 8px 0 6px
|
37
|
+
bottom: 30px
|
38
|
+
&-icon
|
39
|
+
display: flex
|
40
|
+
align-items: center
|
41
|
+
justify-content: center
|
42
|
+
border-radius: 50%
|
43
|
+
background-color: $white
|
44
|
+
margin-right: 18px
|
45
|
+
padding: 10px
|
46
|
+
@include media($tablet)
|
47
|
+
padding: 7px
|
48
|
+
margin-right: 15px
|
49
|
+
@include media($mobile)
|
50
|
+
margin-right: 7px
|
51
|
+
@include media($smallMobile)
|
52
|
+
padding: 6px
|
53
|
+
margin-right: 5px
|
54
|
+
img
|
55
|
+
display: block
|
56
|
+
position: relative
|
57
|
+
top: 2px
|
58
|
+
width: 34px
|
59
|
+
@include media($tablet)
|
60
|
+
width: 30px
|
61
|
+
top: 1px
|
62
|
+
@include media($mobile)
|
63
|
+
width: 19px
|
64
|
+
top: 0
|
65
|
+
@include media($smallMobile)
|
66
|
+
width: 15px
|
67
|
+
span
|
68
|
+
font-size: 24px
|
69
|
+
font-weight: bold
|
70
|
+
color: $text-dark
|
71
|
+
text-transform: uppercase
|
72
|
+
width: 100%
|
73
|
+
display: block
|
74
|
+
text-align: center
|
75
|
+
position: relative
|
76
|
+
top: 1px
|
77
|
+
@include media($tablet)
|
78
|
+
font-size: 20px
|
79
|
+
@include media($mobile)
|
80
|
+
font-size: 14px
|
81
|
+
@include media($smallMobile)
|
82
|
+
font-size: 10px
|
83
|
+
top: 0
|
84
|
+
&-container
|
85
|
+
width: 100% !important
|
86
|
+
height: 100% !important
|
87
|
+
position: relative
|
88
|
+
background-image: none !important
|
89
|
+
img
|
90
|
+
position: absolute
|
91
|
+
left: 50%
|
92
|
+
top: 50%
|
93
|
+
transform: translate(-50%, -50%)
|
94
|
+
max-width: 100%
|
95
|
+
max-height: 100%
|
96
|
+
width: 600px
|
97
|
+
height: 600px
|
98
|
+
object-fit: contain
|
99
|
+
opacity: 0
|
100
|
+
pointer-events: none
|
101
|
+
@include noSelect
|
102
|
+
&.active
|
103
|
+
opacity: 1
|
104
|
+
&--active
|
105
|
+
.widget-tab__threesixty-container
|
106
|
+
cursor: move
|