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 : oxygen-cylinder.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>SD Gases</title>
    <meta content="Sd Gases" name="description" />
    <meta content="" name="keywords" />
    
    <link href="assets/img/sdgases_logo.png" rel="icon" />
    <link href="assets/img/sdgases_logo.png" rel="apple-touch-icon" />
    
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i"
      rel="stylesheet"
    />
    
    <link href="assets/vendor/aos/aos.css" rel="stylesheet" />
    <link
      href="assets/vendor/bootstrap/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
      rel="stylesheet"
    />
    <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
    <link
      href="assets/vendor/glightbox/css/glightbox.min.css"
      rel="stylesheet"
    />
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
    <script
      crossorigin="anonymous"
      src="https://kit.fontawesome.com/831f59072b.js"
    ></script>
    <script
      src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"
      type="module"
    ></script>
    
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    
    <script
      async="true"
      src="https://www.googletagmanager.com/gtag/js?id=G-HMEJ2NJZ6X"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-HMEJ2NJZ6X");
    </script>

.section-title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #2f4d5a;
      }

.section-description {
        text-align: center;
        margin-bottom: 20px;
        font-size: 16px;
        color: #555;
      }

model-viewer {
        width: 100%;
        height: 90%;
        background-color: #ffffff;
      }

.progress-bar {
        display: block;
        width: 33%;
        height: 10%;
        max-height: 2%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        border-radius: 25px;
        box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5),
          0px 0px 5px 1px rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.9);
        background-color: rgba(0, 0, 0, 0.5);
      }

.progress-bar.hide {
        visibility: hidden;
        transition: visibility 0.3s;
      }

.update-bar {
        background-color: rgba(255, 255, 255, 0.9);
        width: 0%;
        height: 100%;
        border-radius: 25px;
        float: left;
        transition: width 0.3s;
      }

#ar-button {
        background-image: url(ar_icon.png);
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: 12px 50%;
        background-color: #fff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        bottom: 16px;
        padding: 0px 16px 0px 40px;
        font-family: Roboto Regular, Helvetica Neue, sans-serif;
        font-size: 14px;
        color: #4285f4;
        height: 36px;
        line-height: 36px;
        border-radius: 18px;
        border: 1px solid #dadce0;
      }

#ar-button:active {
        background-color: #e8eaed;
      }

#ar-button:focus {
        outline: none;
      }

#ar-button:focus-visible {
        outline: 1px solid #4285f4;
      }

@keyframes circle {
        from {
          transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);
        }
        to {
          transform: translateX(-50%) rotate(360deg) translateX(50px)
            rotate(-360deg);
        }
      }

@keyframes elongate {
        from {
          transform: translateX(100px);
        }
        to {
          transform: translateX(-100px);
        }
      }

model-viewer > #ar-prompt {
        position: absolute;
        left: 50%;
        bottom: 60px;
        animation: elongate 2s infinite ease-in-out alternate;
        display: none;
      }

model-viewer[ar-status="session-started"] > #ar-prompt {
        display: block;
      }

model-viewer > #ar-prompt > img {
        animation: circle 4s linear infinite;
      }

/* Content Wrapper */
      .content-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
      }

.video-container,
      .main-model-box {
        flex: 1 1 100%;
        max-width: 600px;
      }

iframe {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

/* Key Features Section */
      .features-list {
        margin-top: 30px;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

.features-list h3 {
        font-size: 22px;
        margin-bottom: 20px;
        color: #2f4d5a;
      }

.features-list ul {
        list-style-type: disc;
        padding-left: 20px;
      }

.features-list ul li {
        margin-bottom: 10px;
        font-size: 16px;
        color: #333;
      }

/* Responsive Styles */
      @media (max-width: 767px) {
        .main-model-box,
        .video-container {
          height: 300px;
        }
      }
    </style>
  </head>
  <body>
    
    <header class="fixed-top" id="header">
      <div class="container d-flex align-items-center justify-content-between">
        <div class="logo">
          <h1 class="text-light">
            <a href="index.html"><span>Sd Gases</span></a>
          </h1>
        </div>
        <nav class="navbar" id="navbar">
          <ul>
            <li>
              <a class="nav-link scrollto active" href="index.html#hero"
                >Home</a
              >
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#about">About Us</a>
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#products"
                >Products</a
              >
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#why-us">Why Us</a>
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#services"
                >Services</a
              >
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#contact">Contact</a>
            </li>
          </ul>
          <i class="bi bi-list mobile-nav-toggle"></i>
        </nav>
      </div>
    </header>

<main id="main">
      
      <section>
        <div class="container">
          <div class="section-title" data-aos="fade-in" data-aos-delay="100">
            <h2>SD Gases Oxygen Cylinder</h2>
          </div>
          <div class="content-wrapper">
            <div class="video-container" data-aos="fade-right">
              <iframe
                width="1007"
                height="566"
                src="https://www.youtube.com/embed/0PRiqFhJih0"
                title="oxygenSD"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin"
                allowfullscreen
              ></iframe>
            </div>
          </div>
        </div>
      </section>

<section>
        <div class="container">
          <div class="section-title" data-aos="fade-in" data-aos-delay="100">
            <h2>3D Model Viewer</h2>
          </div>
          <div
            class="section-description"
            data-aos="fade-in"
            data-aos-delay="200"
          >
            <p>
              Explore our product in 3D! Use your mouse or touch to rotate,
              zoom, and pan around the model.
            </p>
          </div>
          <div class="content-wrapper">
            <div class="main-model-box" data-aos="fade-left">
              <model-viewer
                src="assets/models/oxygencylinder.glb"
                ar
                ar-modes="webxr scene-viewer quick-look"
                camera-controls
                tone-mapping="neutral"
                shadow-intensity="1"
                auto-rotate
              >
                <div class="progress-bar hide" slot="progress-bar">
                  <div class="update-bar"></div>
                </div>
                <button slot="ar-button" id="ar-button">
                  View in your space
                </button>
                <div id="ar-prompt">
                  <img
                    src="https://modelviewer.dev/shared-assets/icons/hand.png"
                  />
                </div>
              </model-viewer>
            </div>
          </div>
        </div>
      </section>

<section class="features-list mb-4">
        <div class="container">
          <h3>Key Features</h3>
          <ul>
            <li>4-liter capacity for extended climbs</li>
            <li>300 bar working pressure for maximum oxygen storage</li>
            <li>20-year design life for long-term reliability</li>
            <li>Rigorously tested for safety and performance</li>
          </ul>
        </div>
      </section>
    </main>

<footer id="footer">
      <div class="footer-top">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 col-md-6">
              <div class="footer-info">
                <h3>SDGASES</h3>
                <p class="pb-3">
                  <em>Leading business provider in mountain oxygen sector.</em>
                </p>
                <p>
                  Patandhoka<br />
                  Lalitpur, Nepal<br /><br />
                  <strong>Phone:</strong> +01-5533950<br />
                  <strong>Email:</strong> sdgases.mgmt@gmail.com<br />
                </p>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 footer-links">
              <h4>Useful Links</h4>
              <ul>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">Home</a>
                </li>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">About us</a>
                </li>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">Products</a>
                </li>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">Services</a>
                </li>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">Contact</a>
                </li>
              </ul>
            </div>
            <div class="col-lg-4 col-md-6 footer-newsletter">
              <h4>Our Newsletter</h4>
              <p>Sign up for exclusive offers and updates.</p>
              <form action="forms/submit.php" method="post">
                <input name="email" type="email" /><input
                  type="submit"
                  value="Subscribe"
                />
              </form>
            </div>
          </div>
        </div>
      </div>
    </footer>

<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
    <script src="assets/vendor/aos/aos.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
    <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
    <script src="assets/vendor/php-email-form/validate.js"></script>
    
    <script src="assets/js/main.js"></script>
  </body>
</html>

${this.title}

Code Editor : oxygen-cylinder.html