hart-estate-widget 0.0.67 → 0.0.68

package/build/assets/sass/components/loader.sass

@@ -0,0 +1,54 @@
+@import '../vars'
+
+.widget-application
+  .widget-loader
+    display: block
+    position: relative
+    width: 80px
+    height: 80px
+    &--absolute
+      position: absolute
+      left: 50%
+      top: 50%
+      transform: translate(-50%, -50%)
+    &--sm
+      transform: translate(-50%, -50%) scale(.75)
+    div
+      position: absolute
+      top: 33px
+      width: 13px
+      height: 13px
+      border-radius: 50%
+      background: $mainColor
+      animation-timing-function: cubic-bezier(0, 1, 1, 0)
+      &:nth-child(1)
+        left: 8px
+        animation: widget-loader-1 0.6s infinite
+      &:nth-child(2)
+        left: 8px
+        animation: widget-loader-2 0.6s infinite
+      &:nth-child(3)
+        left: 32px
+        animation: widget-loader-2 0.6s infinite
+      &:nth-child(4)
+        left: 56px
+        animation: widget-loader-3 0.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)

package/build/assets/sass/components/model.sass

@@ -0,0 +1,27 @@
+@import '../vars'
+
+.widget-application
+  .widget-tab
+    &__model
+      width: 100%
+      height: 100%
+      position: absolute
+      left: 0
+      top: 0
+      z-index: 2
+      &-scene
+        width: 100%
+        height: 100%
+        display: block
+      &-joystick
+        position: absolute
+        left: 100px
+        bottom: 100px
+        opacity: 0
+        pointer-events: none
+        @include media($mobile)
+          left: 50%
+          transform: translateX(-50%)
+        &--active
+          opacity: 1
+          pointer-events: unset

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

@@ -0,0 +1,174 @@
+@import '../mixin'
+@import '../vars'
+
+.widget-application
+  .widget-tab
+    &__panorama
+      width: 100%
+      height: 100%
+      position: absolute
+      left: 0
+      top: 0
+      z-index: 2
+      &-overlay
+        width: 100%
+        height: 100%
+        overflow: hidden
+        background: $white !important
+        *
+          display: none !important
+        canvas
+          display: block !important
+      &-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: transparentize($black, .8)
+        transform: translateX(-50%)
+        @include blurBackground(5px)
+        @include media($mobile)
+          padding: 5px
+        @include media($smallMobile)
+          bottom: 30px
+        &-button
+          @include customButton
+          width: 55px
+          height: 55px
+          border-radius: 50%
+          background-color: $white
+          display: flex
+          align-items: center
+          justify-content: center
+          margin-right: 18px
+          @include media($tablet)
+            width: 44px
+            height: 44px
+          @include media($mobile)
+            margin-right: 10px
+            width: 33px
+            height: 33px
+          @include media($smallMobile)
+            width: 26px
+            height: 26px
+          img
+            display: block
+            @include media($tablet)
+              transform: scale(.7)
+            @include media($mobile)
+              transform: scale(.52)
+            @include media($smallMobile)
+              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
+        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
+        @include media($tablet)
+          left: 20px
+          transform: scale(.6)
+          transform-origin: 0% 100%
+        @include media($mobile)
+          transform: scale(.4)
+        @include media($smallMobile)
+          bottom: 30px
+          transform: scale(.35)
+        &--scaled
+          @include 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: 100vh
+              background-color: transparentize(#C4C4C4, .2)
+            svg
+              polygon
+                &:active
+                  opacity: .3 !important
+          @include media($mobile)
+            transform: scale(1) translate(-50%, 50%)
+        &--hidden
+          opacity: 0
+          pointer-events: none
+        img
+          width: 200px
+          border-radius: none
+          display: block
+          @include noSelect
+          @include highResolution
+          &:hover
+            box-shadow: 1px 1px 10px rgba(0,0,0,0.15)
+        svg
+          position: absolute
+          left: 0
+          top: 0
+          width: 200px
+          height: 100%
+          z-index: 3
+          display: block
+          border-radius: inherit
+          polygon
+            opacity: 0
+            fill: $mainColor
+            cursor: pointer
+            &:hover
+              opacity: .3
+        &__fov
+          position: absolute
+          left: 0
+          top: 0
+          width: 0px
+          height: 0px
+          border-radius: 50%
+          border-left: 30px solid transparentize($mainColor, 1)
+          border-right: 30px solid transparentize($mainColor, 1)
+          border-bottom: 30px solid transparentize($mainColor, 1)
+          border-top: 40px solid transparentize($mainColor, .6)
+          transform: translate(-50%, -50%) rotate(0rad)
+          transform-origin: 50% 50%
+          z-index: 4
+          pointer-events: none
+          &::before
+            content: ''
+            position: absolute
+            z-index: 5
+            left: 50%
+            top: 50%
+            transform: translate(-50%, -50%) translateY(-5px)
+            width: 15px
+            height: 15px
+            background-color: $mainColor
+            border-radius: 50%
+            border: 2px solid $mainColor
+            box-shadow: inset 0 0 0 2px #ffffff

package/build/assets/sass/components/rotation.sass

@@ -0,0 +1,202 @@
+@import '../mixin'
+@import '../vars'
+
+.widget-application
+  .widget-tab
+    &__rotation
+      width: 100%
+      height: 100%
+      &-start
+        @include customButton
+        position: absolute
+        left: 50%
+        bottom: 35px
+        transform: translateX(-50%)
+        display: flex
+        align-items: center
+        justify-content: center
+        padding: 0 25px 0 10px
+        background-color: $gray
+        border-radius: 38px
+        height: 72px
+        width: 202px
+        @include media($tablet)
+          height: 60px
+          width: 166px
+          padding: 0 20px 0 8px
+          bottom: 35px
+        @include media($mobile)
+          height: 44px
+          width: 115px
+          padding: 0 10px 0 6px
+        @include media($smallMobile)
+          height: 36px
+          width: 85px
+          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
+          @include media($tablet)
+            padding: 7px
+            margin-right: 15px
+          @include media($mobile)
+            margin-right: 7px
+          @include media($smallMobile)
+            padding: 6px
+            margin-right: 5px
+          img
+            display: block
+            position: relative
+            top: 2px
+            width: 34px
+            @include media($tablet)
+              width: 30px
+              top: 1px
+            @include media($mobile)
+              width: 19px
+              top: 0
+            @include media($smallMobile)
+              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
+          @include media($tablet)
+            font-size: 20px
+          @include media($mobile)
+            font-size: 14px
+          @include media($smallMobile)
+            font-size: 10px
+            top: 0
+
+    &__threesixty,
+    &__isometry
+      width: 100%
+      height: 100%
+      @include noTouch
+      &-container
+        width: 100% !important
+        height: 100% !important
+        position: relative
+        background-image: none !important
+        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
+          @include noSelect
+          &.active
+            opacity: 1
+
+    &__threesixty
+      &--active
+        cursor: move
+
+    &__isometry
+      &-arrows
+        position: absolute
+        z-index: 3
+        left: 50%
+        bottom: 35px
+        transform: translateX(-50%)
+        height: 72px
+        display: flex
+        align-items: center
+        justify-content: center
+        @include media($tablet)
+          bottom: 35px
+          height: 60px
+        @include media($mobile)
+          height: 44px
+        @include media($smallMobile)
+          bottom: 30px
+          height: 36px
+        span
+          font-size: 28px
+          font-weight: bold
+          display: block
+          margin: 0 9px
+          @include media($tablet)
+            font-size: 22px
+          @include media($mobile)
+            font-size: 17px
+            margin: 0 3px
+          @include media($smallMobile)
+            font-size: 14px
+            margin: 0
+      &-arrow
+        @include customButton
+        display: flex
+        align-items: center
+        justify-content: center
+        padding: 5px
+        img
+          width: 32px
+          @include media($tablet)
+            width: 24px
+          @include media($mobile)
+            width: 18px
+          @include media($smallMobile)
+            width: 14px
+      &-buttons
+        position: absolute
+        z-index: 3
+        left: 44px
+        bottom: 35px
+        display: flex
+        align-items: center
+        justify-content: flex-end
+        @include media($tablet)
+          left: 20px
+          bottom: 35px
+        @include media($smallMobile)
+          bottom: 30px
+      &-button
+        @include customButton
+        width: 72px
+        height: 72px
+        border-radius: 50%
+        display: flex
+        align-items: center
+        justify-content: center
+        background-color: $gray
+        margin-top: 40px
+        @include media($tablet)
+          margin-top: 20px
+          width: 60px
+          height: 60px
+        @include media($mobile)
+          margin-top: 10px
+          width: 44px
+          height: 44px
+        @include media($smallMobile)
+          width: 36px
+          height: 36px
+        img
+          display: block
+          width: 50px
+          @include media($tablet)
+            width: 40px
+          @include media($mobile)
+            width: 30px
+          @include media($smallMobile)
+            width: 25px

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

@@ -0,0 +1,121 @@
+@import '../mixin'
+@import '../vars'
+
+.widget-application
+  .widget-tab-buttons
+    position: absolute
+    z-index: 3
+    right: 44px
+    bottom: 35px
+    display: flex
+    align-items: center
+    justify-content: flex-end
+    @include media($tablet)
+      right: 20px
+      bottom: 35px
+    @include media($smallMobile)
+      bottom: 30px
+  .widget-tab-button
+    @include customButton
+    width: 72px
+    height: 72px
+    border-radius: 50%
+    display: flex
+    align-items: center
+    justify-content: center
+    background-color: $gray
+    color: $text-dark
+    font-size: 28px
+    line-height: 120%
+    font-weight: bold
+    margin-left: 40px
+    @include media($tablet)
+      margin-left: 20px
+      width: 60px
+      height: 60px
+      font-size: 22px
+    @include media($mobile)
+      margin-left: 10px
+      font-size: 17px
+      width: 44px
+      height: 44px
+    @include media($smallMobile)
+      width: 36px
+      height: 36px
+      font-size: 14px
+    &--active
+      background-color: $mainColor
+
+  .widget-tab
+    width: 100%
+    height: 100%
+    display: flex
+    align-items: center
+    justify-content: center
+    padding: 60px 30px
+    @include media($smallMobile)
+      padding: 60px 20px
+    &-menu
+      position: absolute
+      z-index: 3
+      left: 15px
+      top: 15px
+      max-height: 100%
+      overflow-y: auto
+      padding-bottom: 30px
+      &__wallpapers
+        display: flex
+        flex-wrap: wrap
+        align-items: flex-start
+        margin-top: 10px
+        width: 100%
+        img
+          width: 30px
+          height: 30px
+          display: block
+          object-fit: cover
+          cursor: pointer
+          margin-right: 10px
+          margin-block-end: 10px
+      ul
+        list-style-type: none
+        li
+          color: $text-dark
+          background-color: $mainColor
+          padding: 5px 15px
+          border-radius: 10px
+          font-size: .7rem
+          border: none
+          cursor: pointer
+          margin-bottom: 15px
+          width: 200px
+          @include noSelect
+          label
+            display: flex
+            cursor: inherit
+            width: 100%
+          input
+            &[type=color]
+              cursor: pointer
+              margin-left: auto
+              width: 50px
+              height: 20px
+              border: 0
+              border-radius: 5px
+              &::-webkit-color-swatch-wrapper
+                display: none !important
+            &[type=file]
+              display: none
+          &:nth-child(1)
+            position: relative
+            &::after
+              --bar-width: 2px
+              content: ''
+              width: 20px
+              height: 15px
+              display: block
+              background: repeating-linear-gradient(180deg, $black, $black var(--bar-width), transparentize($black, 1) var(--bar-width), transparentize($black, 1) calc(var(--bar-width) * 3),)
+              position: absolute
+              right: 10px
+              top: 50%
+              transform: translateY(-50%)

package/build/assets/sass/index.sass

@@ -0,0 +1,65 @@
+@import './vars'
+@import './mixin'
+
+.widget-application
+  width: 100%
+  height: 100%
+  flex: none
+  overflow: hidden
+  position: relative
+  z-index: 1
+  background-color: $white
+  font-size: 20px
+
+  *, *:before, *:after
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+    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
+    left: 45px
+    top: 30px
+    z-index: 3
+    @include media($tablet)
+      left: 20px
+      top: 30px
+    @include media($smallMobile)
+      top: 25px
+    img
+      display: block
+      width: 82px
+      height: 82px
+      object-fit: contain
+      object-position: center
+      @include media($tablet)
+        width: 65px
+        height: 65px
+      @include media($mobile)
+        width: 42px
+        height: 42px
+      @include media($smallMobile)
+        width: 36px
+        height: 36px
+
+  .widget-tab__panorama-close-map
+    @include rightActionButton
+  .widget-enter-fullscreen
+    @include rightActionButton
+  .widget-exit-fullscreen
+    @include rightActionButton
+
+@import './components/tabs'
+@import './components/instructions'
+@import './components/panorama'
+@import './components/rotation'
+@import './components/loader'
+@import './components/model'

package/build/assets/sass/mixin.sass

@@ -0,0 +1,48 @@
+@mixin customButton
+  ouline: none
+  border: none
+  box-shadow: none
+  background: transparent
+  cursor: pointer
+
+@mixin blurBackground($blur)
+  backdrop-filter: blur($blur)
+  -moz-backdrop-filter: blur($blur)
+  -webkit-backdrop-filter: blur($blur)
+
+@mixin media($device)
+  $this: &
+  @at-root .widget-application--#{$device}#{$this}
+    @content
+
+@mixin rightActionButton
+  position: absolute
+  right: 45px
+  top: 36px
+  z-index: 3
+  padding: 10px
+  touch-action: none
+  @include customButton
+  @include media($tablet)
+    right: 17px
+    top: 35px
+  @include media($mobile)
+    padding: 5px
+    right: 20px
+  @include media($smallMobile)
+    top: 25px
+  img
+    display: block
+    width: 50px
+    height: 50px
+    object-fit: contain
+    object-position: center
+    @include media($tablet)
+      width: 40px
+      height: 40px
+    @include media($mobile)
+      width: 32px
+      height: 32px
+    @include media($smallMobile)
+      width: 26px
+      height: 26px

package/build/assets/sass/vars.sass

@@ -0,0 +1,28 @@
+$smallMobile: "smallMobile"
+$mobile: "mobile"
+$tablet: "tablet"
+$laptop: "laptop"
+
+$white: #FFFFFF
+$black: #000000
+$gray: #EAEAEA
+$lightGray: #F4F7F7
+$mainColor: #FAC62D
+
+$text-dark: #413E3E
+
+@mixin noSelect
+  user-select: none
+  -webkit-user-select: none
+  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)
+  -webkit-transform: translateZ(0)
+  transform: translateZ(0)