From f564604725c6ee8868e55b4860ad171147c75e60 Mon Sep 17 00:00:00 2001
From: Percen <21pesi1bif@hft-stuttgart.de>
Date: Mon, 9 Dec 2024 14:20:33 +0000
Subject: [PATCH] Update public/index.html

---
 public/index.html | 237 ++++++++++++++++++++++++++++++----------------
 1 file changed, 153 insertions(+), 84 deletions(-)
diff --git a/public/index.html b/public/index.html
index 7d66efc..00cae03 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,101 +1,170 @@
 <!doctype html>
-<html>
+<html lang="de">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>GeoVis AR Projekt</title>
 
-  <!-- three.js -->
-  <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
-  <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
-</head>
-<body>
+  <style>
+    body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+      background-color: #f0f0f0;
+      color: #333;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      background-image: url('https://www.w3schools.com/w3images/forest.jpg');
+      background-size: cover;
+      background-position: center;
+    }
 
-<button id="startButton" onclick="activateXR()">Start city planning</button>
-
-<script>
-async function activateXR() {
-  document.getElementById("startButton").style.display = "none"; // Start-Button verstecken
-  
-  const canvas = document.createElement("canvas");
-  document.body.appendChild(canvas);
-  const gl = canvas.getContext("webgl", {xrCompatible: true});
-
-  const scene = new THREE.Scene();
-
-  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
-  directionalLight.position.set(10, 15, 10);
-  scene.add(directionalLight);
-
-  const renderer = new THREE.WebGLRenderer({
-    alpha: true,
-    preserveDrawingBuffer: true,
-    canvas: canvas,
-    context: gl
-  });
-  renderer.autoClear = false;
-
-  const camera = new THREE.PerspectiveCamera();
-  camera.matrixAutoUpdate = false;
-
-  const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});
-  session.updateRenderState({
-    baseLayer: new XRWebGLLayer(session, gl)
-  });
-
-  const referenceSpace = await session.requestReferenceSpace('local');
-  const viewerSpace = await session.requestReferenceSpace('viewer');
-  const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
-
-  const loader = new THREE.GLTFLoader();
-  let reticle;
-  loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
-    reticle = gltf.scene;
-    reticle.visible = false;
-    scene.add(reticle);
-  });
-
-  let flower;
-  loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
-    flower = gltf.scene;
-  });
-
-  session.addEventListener("select", (event) => {
-    if (flower) {
-      const clone = flower.clone();
-      clone.position.copy(reticle.position);
-      scene.add(clone);
+    .container {
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.5);
+      padding: 50px;
+      border-radius: 10px;
+      color: white;
+      max-width: 80%;
+      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
     }
-  });
 
-  const onXRFrame = (time, frame) => {
-    session.requestAnimationFrame(onXRFrame);
+    h1 {
+      font-size: 3em;
+      margin-bottom: 20px;
+    }
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
+    p {
+      font-size: 1.2em;
+      margin-bottom: 30px;
+    }
 
-    const pose = frame.getViewerPose(referenceSpace);
-    if (pose) {
-      const view = pose.views[0];
-      const viewport = session.renderState.baseLayer.getViewport(view);
-      renderer.setSize(viewport.width, viewport.height);
+    button {
+      background-color: #4CAF50;
+      color: white;
+      font-size: 1.5em;
+      padding: 15px 30px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
 
-      camera.matrix.fromArray(view.transform.matrix);
-      camera.projectionMatrix.fromArray(view.projectionMatrix);
-      camera.updateMatrixWorld(true);
+    button:hover {
+      background-color: #45a049;
+    }
 
-      const hitTestResults = frame.getHitTestResults(hitTestSource);
-      if (hitTestResults.length > 0 && reticle) {
-        const hitPose = hitTestResults[0].getPose(referenceSpace);
-        reticle.visible = true;
-        reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
-        reticle.updateMatrixWorld(true);
-      }
+    button:active {
+      background-color: #387a39;
+    }
 
-      renderer.render(scene, camera);
+    .footer {
+      position: fixed;
+      bottom: 20px;
+      font-size: 0.9em;
+      color: white;
     }
-  };
-  session.requestAnimationFrame(onXRFrame);
-}
-</script>
+
+  </style>
+
+</head>
+<body>
+
+  <div class="container">
+    <h1>GeoVis AR Projekt</h1>
+    <p>Gestalten Sie Ihre Stadt in Augmented Reality mit interaktiven Stadtmöbeln!</p>
+    <button onclick="activateXR()">Start City Planning</button>
+  </div>
+
+  <div class="footer">
+    <p>&copy; 2024 GeoVis AR | Alle Rechte vorbehalten</p>
+  </div>
+
+  <script>
+    async function activateXR() {
+      // Hier können Sie die Funktion für das AR-Projekt aktivieren
+      document.querySelector('.container').style.display = 'none';  // Startseite ausblenden
+      const canvas = document.createElement("canvas");
+      document.body.appendChild(canvas);
+      const gl = canvas.getContext("webgl", {xrCompatible: true});
+
+      const scene = new THREE.Scene();
+
+      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
+      directionalLight.position.set(10, 15, 10);
+      scene.add(directionalLight);
+
+      const renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        preserveDrawingBuffer: true,
+        canvas: canvas,
+        context: gl
+      });
+      renderer.autoClear = false;
+
+      const camera = new THREE.PerspectiveCamera();
+      camera.matrixAutoUpdate = false;
+
+      const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});
+      session.updateRenderState({
+        baseLayer: new XRWebGLLayer(session, gl)
+      });
+
+      const referenceSpace = await session.requestReferenceSpace('local');
+      const viewerSpace = await session.requestReferenceSpace('viewer');
+      const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
+
+      const loader = new THREE.GLTFLoader();
+      let reticle;
+      loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
+        reticle = gltf.scene;
+        reticle.visible = false;
+        scene.add(reticle);
+      });
+
+      let flower;
+      loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
+        flower = gltf.scene;
+      });
+
+      session.addEventListener("select", (event) => {
+        if (flower) {
+          const clone = flower.clone();
+          clone.position.copy(reticle.position);
+          scene.add(clone);
+        }
+      });
+
+      const onXRFrame = (time, frame) => {
+        session.requestAnimationFrame(onXRFrame);
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
+
+        const pose = frame.getViewerPose(referenceSpace);
+        if (pose) {
+          const view = pose.views[0];
+          const viewport = session.renderState.baseLayer.getViewport(view);
+          renderer.setSize(viewport.width, viewport.height);
+
+          camera.matrix.fromArray(view.transform.matrix);
+          camera.projectionMatrix.fromArray(view.projectionMatrix);
+          camera.updateMatrixWorld(true);
+
+          const hitTestResults = frame.getHitTestResults(hitTestSource);
+          if (hitTestResults.length > 0 && reticle) {
+            const hitPose = hitTestResults[0].getPose(referenceSpace);
+            reticle.visible = true;
+            reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
+            reticle.updateMatrixWorld(true);
+          }
+
+          renderer.render(scene, camera);
+        }
+      };
+      session.requestAnimationFrame(onXRFrame);
+    }
+  </script>
+
 </body>
 </html>
-- 
GitLab

