<!doctype html>
<html lang="en">

<head>
  <title>&lt;model-viewer&gt; template</title>
  <meta charset="utf-8">
  <meta name="description" content="&lt;model-viewer&gt; template">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link type="text/css" href="./styles.css" rel="stylesheet" />
</head>

<body>
  <div>
    <div style="height: 60px; margin-left: 10px; display: flex; align-items: center;">
      <img style="width: 110px;" src="./logo_cainz.svg" alt="">
    </div>
    <!-- <model-viewer> HTML element -->
    <model-viewer style="position: absolute;" src="4549509968382.glb"
      camera-controls tone-mapping="neutral" shadow-intensity="1" auto-rotate auto-rotate-delay="100"
      interaction-prompt="none">
      <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="ar_hand_prompt.png">
      </div> -->
    </model-viewer>
    <div id="toggleRotationBtn">
      <img src="auto-rotate.png" alt="">
      <!-- <span class="tooltip">Rotate</span> -->
    </div>
  </div>
  <script src="script.js"></script>
  <!-- Loads <model-viewer> for browsers: -->
  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
</body>

</html>