page1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ChatGPT code</title>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@argonjs/argon@4.0.0/dist/argon.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <script src="https://unpkg.com/@seregpie/VueGestures@1.0.0/dist/vue-gestures.umd.min.js"></script>
  <script src="https://unpkg.com/@seregpie/VueDraggableResizable@2.2.0/dist/vue-draggable-resizable.umd.min.js">
  </script>
  <style>
    #info {
      position: absolute;
      top: 20px;
      width: 100%;
      text-align: center;
      z-index: 1;
    }

    #arjsDebugUIContainer {
      position: absolute;
      bottom: 5px;
      left: 5px;
      z-index: 1;
    }

    .draggable {
      border: 2px solid blue;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 10px;
    }
  </style>
</head>
<body>
  <a-scene
    vr-mode-ui="enabled: false"
    arjs="debugUIEnabled: false; sourceType: webcam; debug: true; patternRatio: 0.75; detectionMode: mono_and_matrix;"
  >
    <a-marker
      preset="custom"
      type="barcode"
      barcode-value="4"
      id="marker1"
      emitevents="true"
      location-based="latitude: 37.7749; longitude: -122.4194; altitude: 0;"
    >
      <a-entity
        id="model1"
        gltf-model="url(/models/duck/scene.gltf)"
        scale="0.1 0.1 0.1"
      ></a-entity>
    </a-marker>
  </a-scene>

  <div id="info">
    <p>Loading...</p>
  </div>

  <div id="arjsDebugUIContainer"></div>

  <script>
    const scene = document.querySelector("a-scene");
    const marker1 = document.querySelector("#marker1");
    const model1 = document.querySelector("#model1");
    const info = document.querySelector("#info");

    // Wait for marker to load before displaying content
    marker1.addEventListener("markerFound", (e) => {
      info.style.display = "none";
    });

    // When the marker is lost, display the info again
    marker1.addEventListener("markerLost", (e) => {
      info.style.display = "block";
    });
  </script>
</body>
</html>