<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Mizora NFT</title>

    <!-- CDN -->
    <script src="./assets/aframe-v1.3.0.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/webvr-polyfill@0.10.0/dist/webvr-polyfill.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.4/dist/aframe-extras.min.js"></script>
    <script src="https://raw.githack.com/fcor/arjs-gestures/master/dist/gestures.js"></script>
    
    <!-- Lib -->
    <script src="./lib/gesture-detector.js"></script>
    <script src="./lib/gesture-handler.js"></script>
    <script src="./lib/RGBELoader.js"></script>
    <script src="./lib/aframe-env-map.js"></script>
    <script src="./lib/aframe-hdr-environment.js"></script>
    <script src="./assets/aframefunc.js"></script>

    <!-- Styles -->
    <link rel="stylesheet" href="assets/style.css" />
    <link rel="stylesheet" href="../global.css" />
  </head>
  <body>
    <div class="arjs-loader">
      <div>
        Initializing <br />
        AR Model
        <span id="dots">.</span>
      </div>
      <div class="loader"></div>
    </div>

    <div id="example-scanning-overlay">
      <div class="inner">
        <div class="scanline"></div>
      </div>
    </div>

    <a href="../" class="back-button" aria-label="Back">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8" />
      </svg>
    </a>

    <a-scene
      arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix;"
      embedded
      renderer="logarithmicDepthBuffer: true; antialias: true; colorManagement: true;  sortObjects: true; physicallyCorrectLights: true;"
      vr-mode-ui="enabled: false"
      gesture-detector
      hdr-environment="url: https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/brown_photostudio_02_1k.hdr; showGround: true; groundSize: 15"
      id="scene"
    > 
    <a-light type="hemisphere" intensity="0.9" position="0 2 0"></a-light>


      <a-entity camera></a-entity>
    </a-scene>

    <script src="assets/scripts.js"></script>
    <script>
      let dotCount = 1;
      const dotElement = document.getElementById("dots");

      function updateLoadingText() {
        dotCount = (dotCount % 5) + 1;
        dotElement.textContent = ".".repeat(dotCount);
      }

      setInterval(updateLoadingText, 500);
      document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && (e.key === 'u' || e.key === 'U' || e.key === 'i' || e.key === 'I')) {
          e.preventDefault();
        }
      });
  
      //document.addEventListener('contextmenu', (event) => {
        //event.preventDefault();
      //});
    </script>
  </body>
</html>
