New: Vergunningcheck online

layouts/shortcodes/3d.html

@@ -1,4 +1,5 @@
-<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
+<!-- <script type="module" src="/js/model-viewer.min.js"></script> -->
+<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
 
 <style>
   .model-container {
@@ -18,7 +19,6 @@
     --poster-color: transparent;
   }
 
-  /* De poster/lader wordt door model-viewer zelf verborgen na laden */
   #lazy-load-poster {
     display: flex;
     justify-content: center;
@@ -30,12 +30,12 @@
 
   #ar-button {
     background-color: #ffffff;
-    border-radius: 30px; /* Iets ronder voor moderne look */
+    border-radius: 30px;
     border: 1px solid #007bff;
     position: absolute;
     bottom: 20px;
     left: 50%;
-    transform: translateX(-50%); /* Netjes in het midden onderaan */
+    transform: translateX(-50%);
     padding: 12px 24px;
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 15px;
@@ -56,8 +56,6 @@
     transform: translateX(-50%) scale(0.95);
   }
 
-  /* Verbergt de knop op desktop (omdat AR daar niet kan) */
-  /* Maar we laten hem op mobiel altijd staan voor de test */
   @media (pointer: fine) {
     #ar-button {
       display: none;
@@ -65,6 +63,8 @@
   }
 </style>
 
+<!-- ios-src="/3d/{{ .Get "model" }}.usdz" -->
+
 <div class="model-container">
   <model-viewer 
     id="woning-viewer"
@@ -75,20 +75,18 @@
     camera-controls 
     shadow-intensity="1" 
     auto-rotate 
+    loading="lazy"
     touch-action="pan-y"
     reveal="auto"
-    scale="0.01 0.01 0.01" 
     camera-orbit="45deg 75deg auto">
     
-    <div slot="poster" id="lazy-load-poster">
-       <div class="text-center">
-          <div class="spinner-border text-primary" role="status"></div>
-          <p class="mt-2">Woning wordt op ware grootte geplaatst...</p>
-       </div>
-    </div>
-
+    <div slot="poster" 
+     id="lazy-load-poster" 
+     style="background-image: url('/images/favicon.png'); background-position:center; background-repeat:no-repeat;">
+   </div>
     <button slot="ar-button" id="ar-button">
         👋 BEKIJK IN UW TUIN
     </button>
-</model-viewer>
-</div>
+  </model-viewer>
+</div>
+