📏🐦 Updated with Glitch

phovorka · Feb 19, 2024 · 29a9a91 · 29a9a91
1 parent d9e3a4b
commit 29a9a91
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 89 deletions.
diff --git a/index.html b/index.html
@@ -26,8 +26,7 @@
         <h3>Assembly instruction</h3>
       </div>
 
-      <div class="viewer">
-        <model-viewer
+          <model-viewer
           camera-controls
           enable-pan
           camera-orbit="54.31deg 66.45deg auto"
@@ -144,8 +143,73 @@ <h3>Assembly instruction</h3>
               ><span class="slide-Describe">2) Fasten front plate </span></small
             >
           </div>
+
+                    <div class="slide-Card">
+            <button
+              class="slide-Picture"
+              onclick="switchSrc(this, 'https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1stAnim.glb?v=1665146322342',
+                         '40deg 70deg 3m','2m 12m 2m','auto auto 30m','20deg')"
+              style="
+                background-image: url('https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1pic.png?v=1670265590781');
+              "
+            >
+              <span class="arrow-Slide"></span>
+            </button>
+            <small
+              ><span class="slide-Describe">1) Insert wooden pins </span></small
+            >
+          </div>
+
+                    <div class="slide-Card">
+            <button
+              class="slide-Picture"
+              onclick="switchSrc(this, 'https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1stAnim.glb?v=1665146322342',
+                         '40deg 70deg 3m','2m 12m 2m','auto auto 30m','20deg')"
+              style="
+                background-image: url('https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1pic.png?v=1670265590781');
+              "
+            >
+              <span class="arrow-Slide"></span>
+            </button>
+            <small
+              ><span class="slide-Describe">1) Insert wooden pins </span></small
+            >
+          </div>
+
+                    <div class="slide-Card">
+            <button
+              class="slide-Picture"
+              onclick="switchSrc(this, 'https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1stAnim.glb?v=1665146322342',
+                         '40deg 70deg 3m','2m 12m 2m','auto auto 30m','20deg')"
+              style="
+                background-image: url('https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1pic.png?v=1670265590781');
+              "
+            >
+              <span class="arrow-Slide"></span>
+            </button>
+            <small
+              ><span class="slide-Describe">1) Insert wooden pins </span></small
+            >
+          </div>
+
+                    <div class="slide-Card">
+            <button
+              class="slide-Picture"
+              onclick="switchSrc(this, 'https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1stAnim.glb?v=1665146322342',
+                         '40deg 70deg 3m','2m 12m 2m','auto auto 30m','20deg')"
+              style="
+                background-image: url('https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1pic.png?v=1670265590781');
+              "
+            >
+              <span class="arrow-Slide"></span>
+            </button>
+            <small
+              ><span class="slide-Describe">1) Insert wooden pins </span></small
+            >
+          </div>
+
         </div>
-      </div>
+
     </div>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -4,7 +4,8 @@
 const modelViewer = document.querySelector(".model");
 let i;
 
-//--------------------------------------------------------Toggle element
+//--------------------------------------------------------Toggle menu element
+
 const coll = document.querySelector(".collapsible");
 coll.addEventListener("click", function () {
   this.classList.toggle("active");
@@ -16,20 +17,34 @@ coll.addEventListener("click", function () {
   }
 });
 
-//-------------------------------------------------------show menu after launch 3D
+//------------------------------------------------------- Show menu after launch 3D
+
 modelViewer.addEventListener("click", function () {
   const ml = this.querySelector(".drop");
   ml.style.display = "block";
   const showFull = this.querySelector(".fullScreen");
   showFull.style.display = "block";
 });
-//--------------------------------------------------------------------hide progress bar when content loaded
+
+//------------------------------------------------------------- Progress bar
+
+const progress = document.querySelector(".progress");
+const bar = progress.querySelector(".bar");
+
+modelViewer.addEventListener("progress", (event) => {
+  const { totalProgress } = event.detail;
+  progress.classList.toggle("show", totalProgress < 1);
+  bar.style.transform = `scaleX(${totalProgress})`;
+});
+
+//------------------------------------------------------------- Hide progress bar when content loaded
+
 modelViewer.addEventListener("load", function () {
   const progress = this.querySelector(".progress");
   progress.style.display = "none";
 });
 
-//-------------------------------------------------------------fullscreen
+//------------------------------------------------------------- Open fullscreen
 const full = document.querySelector(".fullScreen");
 const exitfull = document.querySelector(".exit-Fullscreen");
 
@@ -48,7 +63,7 @@ function openFullscreen() {
   }
 }
 
-//----------------------------------------------------close fullscreen
+//---------------------------------------------------- Close fullscreen
 function exitFullscreen() {
   if (document.exitFullscreen) {
     document.exitFullscreen();
@@ -66,7 +81,7 @@ exitfull.addEventListener("click", () => {
   exitfull.style.display = "none";
 });
 
-//----------------------------------------------------Background color
+//---------------------------------------------------- Background color
 const bgG = document.querySelector(".bgGrey");
 bgG.addEventListener("click", () => {
   modelViewer.style.background = "linear-gradient(#ffffff, #ada996)";
@@ -82,7 +97,7 @@ bgB.addEventListener("click", () => {
   modelViewer.style.background = "radial-gradient(circle,rgba(161, 161, 176, 1) 0%,rgba(143, 143, 152, 1) 5%,rgba(0, 0, 0, 1) 100%)";
 });
 
-//-------------------------------------------------------Views
+//------------------------------------------------------- Views
 const views = {
   top: "0deg 0deg 90deg",
   front: "0deg 90deg 0deg",
@@ -107,31 +122,9 @@ addClickListener("right", document.querySelector(".right"));
 addClickListener("back", document.querySelector(".back"));
 addClickListener("iso", document.querySelector(".iso"));
 
-//------------------------------------------------------- play, pause animation
-
-let playBtn = document.querySelector(".play");
-let pauseBtn = document.querySelector(".pause");
-
-playBtn.addEventListener("click", () => {
-  modelViewer.play();
-
-});
-pauseBtn.addEventListener("click", () => {
-  modelViewer.pause();
-});
-
-
-//----------------------------------progress bar
-const progress = document.querySelector(".progress");
-const bar = progress.querySelector(".bar");
 
-modelViewer.addEventListener("progress", (event) => {
-  const { totalProgress } = event.detail;
-  progress.classList.toggle("show", totalProgress < 1);
-  bar.style.transform = `scaleX(${totalProgress})`;
-});
 
-// ---------------------------------------------------Close the dropdown if the user clicks outside of it
+// --------------------------------------------------- Close the dropdown if the user clicks outside of it
 document.addEventListener("click", (event) => {
   if (!event.target.matches(".menu")) {
     const dropdown = document.querySelector(".content");
@@ -141,9 +134,21 @@ document.addEventListener("click", (event) => {
   }
 });
 
+//------------------------------------------------------- Play, pause animation
 
+let playBtn = document.querySelector(".play");
+let pauseBtn = document.querySelector(".pause");
+
+playBtn.addEventListener("click", () => {
+  modelViewer.play();
+
+});
+pauseBtn.addEventListener("click", () => {
+  modelViewer.pause();
+});
 
-//--------------------------------------------------------------slider animation
+
+//-------------------------------------------------------------- Animation control
 
 let slider = document.querySelector(".anim-Range");
 slider.max = Math.floor(modelViewer.duration * 100) / 100;
@@ -159,7 +164,7 @@ self.setInterval(() => {
   updateSlider();
 }, 100);
 
-//--------------------------------------------------------------hide animation toolbar when no animation appears
+//-------------------------------------------------------------- Hide animation toolbar when no animation appears
 
 modelViewer.addEventListener("load", () => {
   const animations = modelViewer.availableAnimations;
@@ -174,7 +179,7 @@ modelViewer.addEventListener("load", () => {
 }
 });
 
-// ----------------------------------------------------change model src and zoom on click slide
+// -------------------------------------------------------------- Change model src and zoom by clicking slide
 
 const slides = document.querySelectorAll(".slide-Picture");
 window.switchSrc = (element, source, orbit, target, minOrbit, minFov) => {
@@ -184,14 +189,12 @@ window.switchSrc = (element, source, orbit, target, minOrbit, minFov) => {
   modelViewer.minCameraOrbit = minOrbit;
   modelViewer.minFieldOfView = minFov;
 
-
   slides.forEach((element) => {
     element.classList.remove("selected");
     element.firstChild.nextElementSibling.style.display = "block";
 
   });
   element.classList.add("selected");
-  element.firstChild.nextElementSibling.style.display = "none";
-
+  element.firstChild.nextElementSibling.style.display = "none"; 
 };
 
diff --git a/style.css b/style.css
@@ -7,26 +7,53 @@ div {
 .assembly-Instruction {
   font-family: Google Sans, Noto, Roboto, Helvetica Neue, sans-serif;
   color: #244376;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0, 0, 0, 0.25);
+  width: 94vw;
+  max-width: 600px;
+  margin: 0 auto;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
 }
 
 
+
 /* This keeps child nodes hidden while the element loads */
 :not(:defined) > * {
   display: none;
 }
 
+.header {
+  display: flex;
+  max-width: 600px;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top:0px;
+  z-index:2;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
 
+model-viewer {
+  height: 400px;
+  width: 94vw;
+  max-width: 600px;
+  margin: 0 auto;
+  background-color: #e7e2dd;
+}
 
 .slides {
   display: flex;
   overflow-x: auto;
+  overflow-y: hidden; 
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
-    max-width: 600px;
+  width: 100%; /* Přizpůsobení šířky podle potřeby */
   height: 160px;
   text-align: center;
-  overflow: hidden;
   margin: 0px auto;
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.25);
   border: 2px grey;
@@ -36,6 +63,7 @@ div {
 
 .slide-Card {
   padding:6px ;
+  display: inline-block;
 }
 
 .slide-Picture {
@@ -51,7 +79,6 @@ div {
     display: flex;
     cursor: pointer;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0, 0, 0, 0.25);
-
 }
 
 .slide-Picture.selected {
@@ -82,19 +109,6 @@ div {
 
 
 
-.header {
-  display: flex;
-  max-width: 600px;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  top:0px;
-  z-index:2;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
 
 .arrow-Slide {
   background-image: url("https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/Group%203%20(3).svg?v=1670247507842");
@@ -136,14 +150,6 @@ div {
 }
 
 
-model-viewer {
-  height: 400px;
-  width: 94vw;
-  max-width: 600px;
-  margin: 0 auto;
-  background-color: #e7e2dd;
-}
-
 .noShow {
   display: none;
 }
@@ -328,19 +334,6 @@ button.menu.btn.collapsible.active {
 }
 
 
-
-
-
-.viewer {
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0, 0, 0, 0.25);
-  width: 94vw;
-  max-width: 600px;
-  margin: 0 auto;
-  border-bottom-right-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
-
-
 .animation-Toolbar {
   padding: 6px;
   box-sizing: border-box;
@@ -397,16 +390,4 @@ select {
   cursor: pointer;
 }
 
-footer {
-  background-color: rgba(0, 0, 0, 0.1);
-  outline: none;
-  color: white;
-  border: 1px solid transparent;
-  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
-  margin: 4px 4px;
-  padding: 8px;
-  border-radius: 14px;
-  width: 130px;
-
-  text-align: center;
-}
+