Gecko [ gandhischool.edu.np ]

Name	Size	Permission
.git	[ DIR ]	drwxr-xr-x
assets	[ DIR ]	drwxr-xr-x
css	[ DIR ]	drwxr-xr-x
forms	[ DIR ]	drwxr-xr-x
regulator	[ DIR ]	drwxr-xr-x
sass	[ DIR ]	drwxr-xr-x
.DS_Store	10 KB	-rw-r--r--
.gitignore	624 B	-rw-r--r--
3dviewer.html	5.59 KB	-rw-r--r--
Readme.txt	455 B	-rw-r--r--
ar_hand_prompt.png	11.66 KB	-rw-r--r--
ar_icon.png	679 B	-rw-r--r--
changelog.txt	2.67 KB	-rw-r--r--
index.html	62.58 KB	-rw-r--r--
inner-page.html	8.21 KB	-rw-r--r--
modified_index.html	52.42 KB	-rw-r--r--
oxygen-cylinder.html	13.31 KB	-rw-r--r--
oxygen-mask.html	10.4 KB	-rw-r--r--
oxygen-regulator.html	10.42 KB	-rw-r--r--
portfolio-details.html	10.05 KB	-rw-r--r--

Code Editor : 3dviewer.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Viewer</title>
    <script
      type="module"
      src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"
    ></script>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #f0f4f8;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

.model-container {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
      }

.main-model-box {
        width: 100%;
        height: 50vh;
        margin-bottom: 20px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-left: auto;
        margin-right: auto;
        background: url("assets/backgrounds/hdr-image.hdr") no-repeat center
          center / cover;
      }

.thumbnail-container {
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
      }

.thumbnail-box {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.3s ease;
      }

.thumbnail-box:hover {
        transform: scale(1.1);
      }

.thumbnail-box.active {
        border: 3px solid #67b0d1;
      }

model-viewer {
        width: 100%;
        height: 100%;
      }

.model-title {
        text-align: center;
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #2f4d5a;
      }

@media (max-width: 768px) {
        .main-model-box {
          height: 40vh;
        }

.thumbnail-box {
          width: 60px;
          height: 60px;
        }
      }

@media (max-width: 480px) {
        .main-model-box {
          height: 30vh;
        }

.thumbnail-box {
          width: 50px;
          height: 50px;
        }
      }
    </style>
  </head>
  <body>
    <section id="3d-models">
      <div class="model-container">
        <div class="main-model-box">
          <model-viewer
            id="main-model"
            alt="Mountaineering Oxygen Equipment"
            src="assets/models/maskonly.glb"
            ar
            ar-modes="webxr scene-viewer quick-look"
            camera-controls
            poster="assets/posters/maskonly-poster.webp"
            shadow-intensity="1.06"
            exposure="1.5"
            shadow-softness="1"
            tone-mapping="agx"
            auto-rotate
            camera-orbit="0deg 75deg 250%"
            touch-action="pan-y"
          ></model-viewer>
        </div>
        <div class="model-title" id="main-model-title">Oxygen Mask</div>

thumbnails.forEach((thumbnail) => {
          thumbnail.addEventListener("click", function () {
            const modelSrc = this.dataset.model;
            const modelTitle = this.dataset.title;

mainModel.src = `assets/models/${modelSrc}`;
            mainModelTitle.textContent = modelTitle;

thumbnails.forEach((t) => t.classList.remove("active"));
            this.classList.add("active");
          });
        });
      });
    </script>
  </body>
</html>

${this.title}

Code Editor : 3dviewer.html