qcobjects-sdk 2.4.6 → 2.4.9

package/js/org.qcobjects.components.splashscreen.js

@@ -26,11 +26,20 @@ logger.debugEnabled = true;
 (function() {
 "use strict";
 Package("org.qcobjects.components.splashscreen",[
-  Class("SplashScreenComponent", Component, {
-    name: "splashscreen",
-    cached: false,
-    shadowed: true,
-    _new_: function(o) {
+
+  class SplashScreenComponent extends Component {
+    constructor () {
+      super();
+      this.name= "splashscreen";
+      this.cached= false;
+      this.shadowed= true;
+      
+      
+    }
+
+    _new_() {
+      super._new_();
+      var o = this;
       var isBrowser = typeof window !== "undefined" && typeof window.self !== "undefined" && window === window.self;
       let component = this;
       var isStartURL = (location.hash === ""
@@ -101,500 +110,511 @@ Package("org.qcobjects.components.splashscreen",[
       } else {
         component.body.style.display="none";
       }
-      _super_("Component", "_new_").call(this,o);
-    }
-  }),
-  Class ("VideoSplashScreenComponent",
-    ClassFactory("SplashScreenComponent"), {
-    name: "videosplashscreen",
-    cached: false,
-    shadowed: true,
-    tplsource: "inline",
-    template: `
-    <style>
-    :host * {
-      box-sizing: border-box;
     }
 
-    :host {
-      zoom: 1.0;
-      width: device-width;
-      margin: 0;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      position: absolute;
-      padding: 0;
-      min-width: 100vw;
-      min-height: 100vh;
-      width: 100vw;
-      height: 100vh;
-      overflow: hidden;
-      background-color: black;
-    }
-    #slot-logo::slotted(img) {
-        vertical-align: middle;
-        display: block;
-        width: 40vw;
+  },
+
+  class VideoSplashScreenComponent extends SplashScreenComponent {
+    constructor () {
+      super();
+
+      this.name= "videosplashscreen";
+      this.cached= false;
+      this.shadowed= true;
+      this.tplsource= "inline";
+      this.template= `
+      <style>
+      :host * {
+        box-sizing: border-box;
+      }
+  
+      :host {
+        zoom: 1.0;
+        width: device-width;
+        margin: 0;
+        top: 0;
         left: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+        padding: 0;
+        min-width: 100vw;
+        min-height: 100vh;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        background-color: black;
+      }
+      #slot-logo::slotted(img) {
+          vertical-align: middle;
+          display: block;
+          width: 40vw;
+          left: 0;
+          margin: 0;
+          padding: 0;
+          z-index: 9999999999;
+          transform-origin: center;
+          transform-style: preserve-3d;
+          filter: blur(0em);
+          transition: filter 0.5s;
+          max-width: 300px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          animation: fadeIn 5s;
+          -webkit-animation: fadeIn 5s;
+          -moz-animation: fadeIn 5s;
+          -o-animation: fadeIn 5s;
+          -ms-animation: fadeIn 5s;        
+      }
+  
+      :host * {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        -webkit-touch-callout: none;
+        /* prevent callout to copy image, etc when tap to hold */
+        -webkit-text-size-adjust: none;
+        /* prevent webkit from resizing text to fit */
+        -webkit-user-select: none;
+        /* prevent copy paste, to allow, change 'none' to 'text' */
+      }
+  
+      /* FOCUS */
+      :host summary:focus,
+      :host a:focus,
+      :host button:focus {
+        outline: none;
+      }
+  
+      .splashscreen,
+      .fullscreen-bg {
+        padding: 0;
         margin: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
         padding: 0;
-        z-index: 9999999999;
-        transform-origin: center;
+        background-attachment: fixed;
+        background-position: center;
+        background-clip: content-box;
+        background-size: cover;
+        position: absolute;
+        min-width: 100vw;
+        min-height: 100vh;
+        width: 100vw;
+        height: 100vh;
+        z-index: 0;
+        overflow: hidden;
+      }
+  
+      .splashscreen .splashcontent {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: 0 auto;
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        overflow: hidden;
+        z-index: 1;
+      }
+  
+      .splashscreen .splashcontent p {
+        color: white;
+      }
+  
+      video.fullscreen-bg__video {
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        min-width: 100vw;
+        min-height: 100vh;
+        overflow: hidden;
+        z-index: 0;
+        object-fit: cover;
+        filter: brightness(0.3);
+      }
+        .splashscreen,
+        .fullscreen-bg {
+          background-image: url('{{background}}');
+        }
+  
+        @keyframes fadeIn {
+          0% {opacity:0;}
+          100% {opacity:1;}
+        }
+        
+        @-moz-keyframes fadeIn {
+          0% {opacity:0;}
+          100% {opacity:1;}
+        }
+        
+        @-webkit-keyframes fadeIn {
+          0% {opacity:0;}
+          100% {opacity:1;}
+        }
+        
+        @-o-keyframes fadeIn {
+          0% {opacity:0;}
+          100% {opacity:1;}
+        }
+        
+        @-ms-keyframes fadeIn {
+          0% {opacity:0;}
+          100% {opacity:1;}
+        }      
+  
+      </style>
+      <div class="splashscreen">
+        <div class="fullscreen-bg splashcontent">
+          <video loop muted autoplay playsinline name="media" poster="{{background}}" class="fullscreen-bg__video" data-setup="{}" height="100%">
+            <source src="{{video_mp4}}" type="video/mp4">
+            <source src="{{video_ogg}}" type="video/ogg">
+            <source src="{{video_webm}}" type="video/webm">
+          </video>
+          <slot id="slot-logo" name="logo"></slot>
+        </div>
+      </div>
+  
+      `;
+    }
+  },
+
+  class CubeSplashScreenComponent extends SplashScreenComponent {
+
+    constructor () {
+      super();
+      this.name= "cubesplashscreen";
+      this.cached= false;
+      this.shadowed= true;
+      this.tplsource= "inline";
+      this.template= `
+      <style>
+      @keyframes spin {
+        0% {
+          transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+        }
+  
+        16% {
+          transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg);
+        }
+  
+        33% {
+          transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg);
+        }
+  
+        50% {
+          transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+        }
+  
+        66% {
+          transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg);
+        }
+  
+        83% {
+          transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg);
+        }
+  
+        100% {
+          transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+        }
+      }
+  
+      @keyframes spin-duplicate {
+        0% {
+          transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+        }
+  
+        16% {
+          transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg);
+        }
+  
+        33% {
+          transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg);
+        }
+  
+        50% {
+          transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+        }
+  
+        66% {
+          transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg);
+        }
+  
+        83% {
+          transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg);
+        }
+  
+        100% {
+          transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+        }
+      }
+  
+      @keyframes roll {
+        0% {
+          transform: translate3d(-200px, -50px, -400px)
+        }
+  
+        12% {
+          transform: translate3d(0px, 0, -100px)
+        }
+  
+        25% {
+          transform: translate3d(200px, -50px, -400px)
+        }
+  
+        37% {
+          transform: translate3d(0px, -100px, -800px)
+        }
+  
+        50% {
+          transform: translate3d(-200px, -50px, -400px)
+        }
+  
+        62% {
+          transform: translate3d(0px, 0, -100px)
+        }
+  
+        75% {
+          transform: translate3d(200px, -50px, -400px)
+        }
+  
+        87% {
+          transform: translate3d(0px, -100px, -800px)
+        }
+  
+        100% {
+          transform: translate3d(-200px, -50px, -400px)
+        }
+      }
+  
+      #wrapper {
+        position: relative;
+        width: 200px;
+        padding-top: 100px;
+        margin: 0 auto;
+        perspective: 1200px;
+      }
+  
+      #platform {
+        margin-top: 100px;
+      }
+  
+      #dice span {
+        position: absolute;
+        margin: 100px 0 0 100px;
+        display: block;
+        font-size: 2.5em;
+        padding: 10px;
+      }
+  
+      #dice {
+        position: absolute;
+        width: 200px;
+        height: 200px;
         transform-style: preserve-3d;
-        filter: blur(0em);
-        transition: filter 0.5s;
-        max-width: 300px;
+        animation: spin 50s infinite linear;
+      }
+  
+      .side {
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        animation: fadeIn 5s;
-        -webkit-animation: fadeIn 5s;
-        -moz-animation: fadeIn 5s;
-        -o-animation: fadeIn 5s;
-        -ms-animation: fadeIn 5s;        
-    }
-
-    :host * {
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      -webkit-touch-callout: none;
-      /* prevent callout to copy image, etc when tap to hold */
-      -webkit-text-size-adjust: none;
-      /* prevent webkit from resizing text to fit */
-      -webkit-user-select: none;
-      /* prevent copy paste, to allow, change 'none' to 'text' */
-    }
-
-    /* FOCUS */
-    :host summary:focus,
-    :host a:focus,
-    :host button:focus {
-      outline: none;
-    }
-
-    .splashscreen,
-    .fullscreen-bg {
-      padding: 0;
-      margin: 0;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      padding: 0;
-      background-attachment: fixed;
-      background-position: center;
-      background-clip: content-box;
-      background-size: cover;
-      position: absolute;
-      min-width: 100vw;
-      min-height: 100vh;
-      width: 100vw;
-      height: 100vh;
-      z-index: 0;
-      overflow: hidden;
-    }
-
-    .splashscreen .splashcontent {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: 0 auto;
-      width: 100vw;
-      height: 100vh;
-      padding: 0;
-      overflow: hidden;
-      z-index: 1;
-    }
-
-    .splashscreen .splashcontent p {
-      color: white;
-    }
-
-    video.fullscreen-bg__video {
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      margin: 0;
-      padding: 0;
-      position: absolute;
-      min-width: 100vw;
-      min-height: 100vh;
-      overflow: hidden;
-      z-index: 0;
-      object-fit: cover;
-      filter: brightness(0.3);
-    }
-      .splashscreen,
-      .fullscreen-bg {
-        background-image: url('{{background}}');
+        width: 200px;
+        height: 200px;
+        background: none;
+        box-shadow: inset 0 0 40px #fff0;
+        border-radius: 40px;
       }
-
-      @keyframes fadeIn {
-        0% {opacity:0;}
-        100% {opacity:1;}
+  
+      #dice .cover, #dice .inner {
+        background: #e0e0e0;
+        box-shadow: none;
       }
-      
-      @-moz-keyframes fadeIn {
-        0% {opacity:0;}
-        100% {opacity:1;}
+  
+      #dice .cover {
+        border-radius: 0;
+        transform-origin: center;
+        transform: translateZ(0px);
       }
-      
-      @-webkit-keyframes fadeIn {
-        0% {opacity:0;}
-        100% {opacity:1;}
+  
+      #dice .cover.x {
+        transform-origin: center;
+        transform: rotateY(90deg);
       }
-      
-      @-o-keyframes fadeIn {
-        0% {opacity:0;}
-        100% {opacity:1;}
+  
+      #dice .cover.z {
+        transform-origin: center;
+        transform: rotateX(90deg);
       }
-      
-      @-ms-keyframes fadeIn {
-        0% {opacity:0;}
-        100% {opacity:1;}
-      }      
-
-    </style>
-    <div class="splashscreen">
-      <div class="fullscreen-bg splashcontent">
-        <video loop muted autoplay playsinline name="media" poster="{{background}}" class="fullscreen-bg__video" data-setup="{}" height="100%">
-          <source src="{{video_mp4}}" type="video/mp4">
-          <source src="{{video_ogg}}" type="video/ogg">
-          <source src="{{video_webm}}" type="video/webm">
-        </video>
-        <slot id="slot-logo" name="logo"></slot>
-      </div>
-    </div>
-
-    `
-  }),
-  Class ("CubeSplashScreenComponent",
-    ClassFactory("SplashScreenComponent"), {
-    name: "cubesplashscreen",
-    cached: false,
-    shadowed: true,
-    tplsource: "inline",
-    template: `
-    <style>
-    @keyframes spin {
-      0% {
-        transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  
+      #dice .front {
+        transform-origin: center;
+        transform: translateZ(100px);
       }
-
-      16% {
-        transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg);
+  
+      #dice .front.inner {
+        transform-origin: center;
+        transform: translateZ(98px);
       }
-
-      33% {
-        transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg);
+  
+      #dice .back {
+        transform-origin: center;
+        transform: rotateX(-180deg) translateZ(100px);
       }
-
-      50% {
-        transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  
+      #dice .back.inner {
+        transform-origin: center;
+        transform: rotateX(-180deg) translateZ(98px);
       }
-
-      66% {
-        transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg);
+  
+      #dice .right {
+        transform-origin: center;
+        transform: rotateY(90deg) translateZ(100px);
       }
-
-      83% {
-        transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg);
+  
+      #dice .right.inner {
+        transform-origin: center;
+        transform: rotateY(90deg) translateZ(98px);
       }
-
-      100% {
-        transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  
+      #dice .left {
+        transform-origin: center;
+        transform: rotateY(-90deg) translateZ(100px);
       }
-    }
-
-    @keyframes spin-duplicate {
-      0% {
-        transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  
+      #dice .left.inner {
+        transform-origin: center;
+        transform: rotateY(-90deg) translateZ(98px);
       }
-
-      16% {
-        transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg);
+  
+      #dice .top {
+        transform-origin: center;
+        transform: rotateX(90deg) translateZ(100px);
       }
-
-      33% {
-        transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg);
+  
+      #dice .top.inner {
+        transform-origin: center;
+        transform: rotateX(90deg) translateZ(98px);
       }
-
-      50% {
-        transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  
+      #dice .bottom {
+        transform-origin: center;
+        transform: rotateX(-90deg) translateZ(100px);
       }
-
-      66% {
-        transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg);
+  
+      #dice .bottom.inner {
+        transform-origin: center;
+        transform: rotateX(-90deg) translateZ(98px);
       }
-
-      83% {
-        transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg);
+  
+      .dot {
+        position: absolute;
+        width: 46px;
+        height: 46px;
+        border-radius: 23px;
+        background: #444;
+        box-shadow: inset 5px 0 10px #000;
       }
-
-      100% {
-        transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  
+      .dot.center {
+        margin: 77px 0 0 77px;
       }
-    }
-
-    @keyframes roll {
-      0% {
-        transform: translate3d(-200px, -50px, -400px)
+  
+      .dot.dtop {
+        margin-top: 20px;
       }
-
-      12% {
-        transform: translate3d(0px, 0, -100px)
+  
+      .dot.dleft {
+        margin-left: 134px;
       }
-
-      25% {
-        transform: translate3d(200px, -50px, -400px)
+  
+      .dot.dright {
+        margin-left: 20px;
       }
-
-      37% {
-        transform: translate3d(0px, -100px, -800px)
+  
+      .dot.dbottom {
+        margin-top: 134px;
       }
-
-      50% {
-        transform: translate3d(-200px, -50px, -400px)
+  
+      .dot.center.dleft {
+        margin: 77px 0 0 20px;
       }
-
-      62% {
-        transform: translate3d(0px, 0, -100px)
+  
+      .dot.center.dright {
+        margin: 77px 0 0 134px;
       }
-
-      75% {
-        transform: translate3d(200px, -50px, -400px)
+  
+      #background {
+        top: 0px;
+        left: 0px;
+        position: fixed;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        background: var(--root-background, transparent);
+        background-size: cover;
+        background-origin: border-box;
       }
-
-      87% {
-        transform: translate3d(0px, -100px, -800px)
+  
+      #dice .side.front,
+      #dice .side.top,
+      #dice .side.right,
+      #dice .side.left,
+      #dice .side.bottom,
+      #dice .side.back {
+        background-image: var(--background-3d-cube-image, "none");
+        background-size: cover;
+        background-origin: border-box;
       }
-
-      100% {
-        transform: translate3d(-200px, -50px, -400px)
+  
+  
+      :root, :host {
+        --background-3d-cube-image: url('{{cube_image}}');
+        --box-width: 200px;
+        font-size:.9em;
+        font-family:sans-serif;
+        --root-background: {{background}};
       }
-    }
-
-    #wrapper {
-      position: relative;
-      width: 200px;
-      padding-top: 100px;
-      margin: 0 auto;
-      perspective: 1200px;
-    }
-
-    #platform {
-      margin-top: 100px;
-    }
-
-    #dice span {
-      position: absolute;
-      margin: 100px 0 0 100px;
-      display: block;
-      font-size: 2.5em;
-      padding: 10px;
-    }
-
-    #dice {
-      position: absolute;
-      width: 200px;
-      height: 200px;
-      transform-style: preserve-3d;
-      animation: spin 50s infinite linear;
-    }
-
-    .side {
-      position: absolute;
-      width: 200px;
-      height: 200px;
-      background: none;
-      box-shadow: inset 0 0 40px #fff0;
-      border-radius: 40px;
-    }
-
-    #dice .cover, #dice .inner {
-      background: #e0e0e0;
-      box-shadow: none;
-    }
-
-    #dice .cover {
-      border-radius: 0;
-      transform-origin: center;
-      transform: translateZ(0px);
-    }
-
-    #dice .cover.x {
-      transform-origin: center;
-      transform: rotateY(90deg);
-    }
-
-    #dice .cover.z {
-      transform-origin: center;
-      transform: rotateX(90deg);
-    }
-
-    #dice .front {
-      transform-origin: center;
-      transform: translateZ(100px);
-    }
-
-    #dice .front.inner {
-      transform-origin: center;
-      transform: translateZ(98px);
-    }
-
-    #dice .back {
-      transform-origin: center;
-      transform: rotateX(-180deg) translateZ(100px);
-    }
-
-    #dice .back.inner {
-      transform-origin: center;
-      transform: rotateX(-180deg) translateZ(98px);
-    }
-
-    #dice .right {
-      transform-origin: center;
-      transform: rotateY(90deg) translateZ(100px);
-    }
-
-    #dice .right.inner {
-      transform-origin: center;
-      transform: rotateY(90deg) translateZ(98px);
-    }
-
-    #dice .left {
-      transform-origin: center;
-      transform: rotateY(-90deg) translateZ(100px);
-    }
-
-    #dice .left.inner {
-      transform-origin: center;
-      transform: rotateY(-90deg) translateZ(98px);
-    }
-
-    #dice .top {
-      transform-origin: center;
-      transform: rotateX(90deg) translateZ(100px);
-    }
-
-    #dice .top.inner {
-      transform-origin: center;
-      transform: rotateX(90deg) translateZ(98px);
-    }
-
-    #dice .bottom {
-      transform-origin: center;
-      transform: rotateX(-90deg) translateZ(100px);
-    }
-
-    #dice .bottom.inner {
-      transform-origin: center;
-      transform: rotateX(-90deg) translateZ(98px);
-    }
-
-    .dot {
-      position: absolute;
-      width: 46px;
-      height: 46px;
-      border-radius: 23px;
-      background: #444;
-      box-shadow: inset 5px 0 10px #000;
-    }
-
-    .dot.center {
-      margin: 77px 0 0 77px;
-    }
-
-    .dot.dtop {
-      margin-top: 20px;
-    }
-
-    .dot.dleft {
-      margin-left: 134px;
-    }
-
-    .dot.dright {
-      margin-left: 20px;
-    }
-
-    .dot.dbottom {
-      margin-top: 134px;
-    }
-
-    .dot.center.dleft {
-      margin: 77px 0 0 20px;
-    }
-
-    .dot.center.dright {
-      margin: 77px 0 0 134px;
-    }
-
-    #background {
-      top: 0px;
-      left: 0px;
-      position: fixed;
-      z-index: -1;
-      width: 100%;
-      height: 100%;
-      background: var(--root-background, transparent);
-      background-size: cover;
-      background-origin: border-box;
-    }
-
-    #dice .side.front,
-    #dice .side.top,
-    #dice .side.right,
-    #dice .side.left,
-    #dice .side.bottom,
-    #dice .side.back {
-      background-image: var(--background-3d-cube-image, "none");
-      background-size: cover;
-      background-origin: border-box;
-    }
-
-
-    :root, :host {
-      --background-3d-cube-image: url('{{cube_image}}');
-      --box-width: 200px;
-      font-size:.9em;
-      font-family:sans-serif;
-      --root-background: {{background}};
-    }
-    </style>
-
-    <div id="background"></div>
-    <div id="wrapper">
-      <div id="platform">
-        <div id="dice">
-          <div class="side front">
+      </style>
+  
+      <div id="background"></div>
+      <div id="wrapper">
+        <div id="platform">
+          <div id="dice">
+            <div class="side front">
+            </div>
+            <div class="side front inner"></div>
+            <div class="side top"></div>
+            <div class="side top inner"></div>
+            <div class="side right"></div>
+            <div class="side right inner"></div>
+            <div class="side left"></div>
+            <div class="side left inner"></div>
+            <div class="side bottom"></div>
+            <div class="side bottom inner"></div>
+            <div class="side back"></div>
+            <div class="side back inner"></div>
+            <div class="side cover x"></div>
+            <div class="side cover y"></div>
+            <div class="side cover z"></div>
           </div>
-          <div class="side front inner"></div>
-          <div class="side top"></div>
-          <div class="side top inner"></div>
-          <div class="side right"></div>
-          <div class="side right inner"></div>
-          <div class="side left"></div>
-          <div class="side left inner"></div>
-          <div class="side bottom"></div>
-          <div class="side bottom inner"></div>
-          <div class="side back"></div>
-          <div class="side back inner"></div>
-          <div class="side cover x"></div>
-          <div class="side cover y"></div>
-          <div class="side cover z"></div>
         </div>
       </div>
-    </div>
+  
+      `;
+  
+    }    
+
+  }
 
-    `
-  })
 ]);