Reinit marzipano

.gitattributes

@@ -0,0 +1,12 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.m4a filter=lfs diff=lfs merge=lfs -text
+*.pdf filter=lfs diff=lfs merge=lfs -text
+*.docx filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.bmp filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text

.gitea/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Marzipano Prod
+
+on:
+  push:
+    branches: [main]
+
+defaults:
+  run:
+    working-directory: /opt/runner/workdir/marzipano
+
+jobs:
+  prod-build:
+    name: Produktivumgebung
+    if: gitea.repository == 'gcg/marzipano'
+    runs-on: act-runner-user
+    steps:
+      - name: Pull
+        run: |
+          git fetch --all
+          git reset --hard origin/main
+      - name: Build
+        run: |
+          rm -rf public
+          hugo --minify --gc --baseURL "https://vr.cantorgymnasium.de/"
+      - name: Deploy
+        run: |
+          cd public
+          rsync -azr --delete ./ /opt/data/webdata/marzipano/
+      - name: Notification
+        uses: actions/telegram-action@main
+        if: always()
+        with:
+          chat_id: ${{ secrets.TG_CHAT_ID }}
+          token: ${{ secrets.TG_TOKEN }}

.gitignore

@@ -0,0 +1,3 @@
+.hugo_build.lock
+resources/
+public/

assets/index.js

@@ -0,0 +1,584 @@
+//@ts-check
+
+/*
+ * Copyright 2016 Google Inc, 2020 Georg-Cantor-Gymnasium Halle (Saale), All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+"use strict";
+
+import APP_DATA from "./data";
+
+(($) => {
+  $(window).on("load", () => {
+    $(".preloader").fadeOut(100);
+  });
+
+  // @ts-ignore
+  var Marzipano = window.Marzipano;
+
+  // mdi icons
+  var svgs = {
+    "chevron-up-circle-outline":
+      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-up-circle-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="#fff"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M7.4,15.4L12,10.8L16.6,15.4L18,14L12,8L6,14L7.4,15.4Z" /></svg>',
+    "play-circle-outline":
+      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-play-circle-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="#fff"><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>',
+    "information-outline":
+      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-information-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="#fff"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>',
+    "pause-circle-outline":
+      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-pause-circle-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="#fff"><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>',
+  };
+
+  // Grab elements from DOM.
+  var panoElement = document.querySelector("#pano");
+  var sceneNameElement = document.querySelector("#titleBar .sceneName");
+  var sceneListElement = document.querySelector("#sceneList");
+  var sceneElements = document.querySelectorAll("#sceneList .scene");
+  var sceneListToggleElement = document.querySelector("#sceneListToggle");
+  var autorotateToggleElement = document.querySelector("#autorotateToggle");
+  var fullscreenToggleElement = document.querySelector("#fullscreenToggle");
+
+  // Detect desktop or mobile mode.
+  const setMode = () => {
+    if (mql.matches) {
+      document.body.classList.remove("desktop");
+      document.body.classList.add("mobile");
+    } else {
+      document.body.classList.remove("mobile");
+      document.body.classList.add("desktop");
+    }
+  };
+  var mql = matchMedia("(max-width: 768px), (max-height: 500px)");
+  setMode();
+  mql.onchange = setMode;
+
+  // Viewer options.
+  var viewerOpts = {
+    controls: {
+      mouseViewMode: APP_DATA.settings.mouseViewMode,
+    },
+  };
+
+  // Initialize viewer.
+  var viewer = new Marzipano.Viewer(panoElement, viewerOpts);
+
+  // create list for audio elements
+  var audioList = [];
+
+  // Create scenes.
+  var scenes = APP_DATA.scenes.map((data) => {
+    var urlPrefix = "tiles";
+    var source = Marzipano.ImageUrlSource.fromString(urlPrefix + "/" + data.id + "/{z}/{f}/{y}/{x}.jpg", {
+      cubeMapPreviewUrl: urlPrefix + "/" + data.id + "/preview.jpg",
+    });
+    var geometry = new Marzipano.CubeGeometry(data.levels);
+
+    var limiter = Marzipano.RectilinearView.limit.traditional(
+      data.faceSize,
+      (100 * Math.PI) / 180,
+      (120 * Math.PI) / 180
+    );
+    var view = new Marzipano.RectilinearView(data.initialViewParameters, limiter);
+
+    var scene = viewer.createScene({
+      source: source,
+      geometry: geometry,
+      view: view,
+      pinFirstLevel: true,
+    });
+
+    // Create link hotspots.
+    data.linkHotspots.forEach(function (hotspot) {
+      var element = createLinkHotspotElement(hotspot);
+      scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });
+    });
+
+    // Create info hotspots.
+    data.infoHotspots.forEach(function (hotspot) {
+      var element = createInfoHotspotElement(hotspot, data.id);
+      scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });
+    });
+
+    return {
+      data: data,
+      scene: scene,
+      view: view,
+    };
+  });
+
+  // Set up autorotate, if enabled.
+  var autorotate = Marzipano.autorotate({
+    yawSpeed: 0.03,
+    targetPitch: 0,
+    targetFov: Math.PI / 2,
+  });
+  if (APP_DATA.settings.autorotateEnabled) {
+    autorotateToggleElement?.classList.add("enabled");
+  }
+
+  // Start with the scene list open on desktop.
+  if (!document.body.classList.contains("mobile")) {
+    showSceneList();
+  }
+
+  // Set handler for autorotate toggle.
+  autorotateToggleElement?.addEventListener("click", toggleAutorotate);
+
+  // Set up fullscreen mode
+  if (APP_DATA.settings.fullscreenButton) {
+    document.body.classList.add("fullscreen-enabled");
+    fullscreenToggleElement?.addEventListener("click", function () {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    });
+    document.addEventListener("fullscreenchange", () => {
+      if (document.fullscreenElement) {
+        fullscreenToggleElement?.classList.add("enabled");
+      } else {
+        fullscreenToggleElement?.classList.remove("enabled");
+      }
+    });
+  } else {
+    document.body.classList.add("fullscreen-disabled");
+  }
+
+  // Set handler for scene list toggle.
+  sceneListToggleElement?.addEventListener("click", toggleSceneList);
+
+  // Set handler for scene switch.
+  scenes.forEach(function (scene) {
+    var el = document.querySelector('#sceneList .scene[data-id="' + scene.data.id + '"]');
+    el?.addEventListener("click", function () {
+      switchScene(scene);
+      showSceneList();
+      // On mobile, hide scene list after selecting a scene.
+      if (document.body.classList.contains("mobile")) {
+        hideSceneList();
+      }
+    });
+  });
+
+  // DOM elements for view controls.
+  var viewUpElement = document.querySelector("#viewUp");
+  var viewDownElement = document.querySelector("#viewDown");
+  var viewLeftElement = document.querySelector("#viewLeft");
+  var viewRightElement = document.querySelector("#viewRight");
+  var viewInElement = document.querySelector("#viewIn");
+  var viewOutElement = document.querySelector("#viewOut");
+
+  // Dynamic parameters for controls.
+  var velocity = 0.7;
+  var friction = 3;
+
+  // Associate view controls with elements.
+  var controls = viewer.controls();
+  controls.registerMethod(
+    "upElement",
+    new Marzipano.ElementPressControlMethod(viewUpElement, "y", -velocity, friction),
+    true
+  );
+  controls.registerMethod(
+    "downElement",
+    new Marzipano.ElementPressControlMethod(viewDownElement, "y", velocity, friction),
+    true
+  );
+  controls.registerMethod(
+    "leftElement",
+    new Marzipano.ElementPressControlMethod(viewLeftElement, "x", -velocity, friction),
+    true
+  );
+  controls.registerMethod(
+    "rightElement",
+    new Marzipano.ElementPressControlMethod(viewRightElement, "x", velocity, friction),
+    true
+  );
+  controls.registerMethod(
+    "inElement",
+    new Marzipano.ElementPressControlMethod(viewInElement, "zoom", -velocity, friction),
+    true
+  );
+  controls.registerMethod(
+    "outElement",
+    new Marzipano.ElementPressControlMethod(viewOutElement, "zoom", velocity, friction),
+    true
+  );
+
+  function sanitize(s) {
+    return s.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;");
+  }
+
+  function switchScene(scene) {
+    stopPlayback();
+    stopAutorotate();
+    scene.view.setParameters(scene.data.initialViewParameters);
+    scene.scene.switchTo();
+    startAutorotate();
+    updateSceneName(scene);
+    updateSceneList(scene);
+  }
+
+  function updateSceneName(scene) {
+    if (sceneNameElement) {
+      sceneNameElement.innerHTML = sanitize(scene.data.name);
+    }
+  }
+
+  function updateSceneList(scene) {
+    for (var i = 0; i < sceneElements.length; i++) {
+      var el = sceneElements[i];
+      if (el.getAttribute("data-id") === scene.data.id) {
+        el.classList.add("current");
+      } else {
+        el.classList.remove("current");
+      }
+    }
+  }
+
+  function showSceneList() {
+    sceneListElement?.classList.add("enabled");
+    sceneListToggleElement?.classList.add("enabled");
+  }
+
+  function hideSceneList() {
+    sceneListElement?.classList.remove("enabled");
+    sceneListToggleElement?.classList.remove("enabled");
+  }
+
+  function toggleSceneList() {
+    sceneListElement?.classList.toggle("enabled");
+    sceneListToggleElement?.classList.toggle("enabled");
+  }
+
+  function startAutorotate() {
+    if (!autorotateToggleElement?.classList.contains("enabled")) {
+      return;
+    }
+    viewer.startMovement(autorotate);
+    viewer.setIdleMovement(3000, autorotate);
+  }
+
+  function stopAutorotate() {
+    viewer.stopMovement();
+    viewer.setIdleMovement(Infinity);
+  }
+
+  function stopPlayback() {
+    audioList.forEach((a) => {
+      a.pause();
+      a.currentTime = 0;
+    });
+    const x = document.querySelectorAll("video");
+    for (let i = 0; i < x.length; i++) {
+      if (!x[i].paused) {
+        x[i].pause();
+      }
+    }
+  }
+
+  function toggleAutorotate() {
+    if (autorotateToggleElement?.classList.contains("enabled")) {
+      autorotateToggleElement?.classList.remove("enabled");
+      stopAutorotate();
+    } else {
+      autorotateToggleElement?.classList.add("enabled");
+      startAutorotate();
+    }
+  }
+
+  function createLinkHotspotElement(hotspot) {
+    // Create wrapper element to hold icon and tooltip.
+    var wrapper = document.createElement("div");
+    wrapper.classList.add("hotspot");
+    wrapper.classList.add("link-hotspot");
+
+    // Create image element.
+    const icon = document.createElement("span");
+    icon.innerHTML = svgs["chevron-up-circle-outline"];
+
+    // Set rotation transform.
+    var transformProperties = ["-webkit-transform", "transform"];
+    for (var i = 0; i < transformProperties.length; i++) {
+      var property = transformProperties[i];
+      icon.style[property] = "rotate(" + hotspot.rotation + "rad)";
+    }
+
+    // Add click event handler.
+    wrapper.addEventListener("click", function () {
+      switchScene(findSceneById(hotspot.target));
+    });
+
+    // Prevent touch and scroll events from reaching the parent element.
+    // This prevents the view control logic from interfering with the hotspot.
+    stopTouchAndScrollEventPropagation(wrapper);
+
+    // Create tooltip element.
+    var tooltip = document.createElement("div");
+    tooltip.classList.add("hotspot-tooltip");
+    tooltip.classList.add("link-hotspot-tooltip");
+    tooltip.innerHTML = findSceneDataById(hotspot.target)?.name ?? "";
+
+    wrapper.appendChild(icon);
+    wrapper.appendChild(tooltip);
+
+    return wrapper;
+  }
+
+  /**
+   *
+   * @param {*} hotspot
+   * @param {string} sceneId
+   * @returns {HTMLDivElement}
+   */
+  function createInfoHotspotElement(hotspot, sceneId) {
+    // Create wrapper element to hold icon and tooltip.
+    var wrapper = document.createElement("div");
+    wrapper.classList.add("hotspot");
+    wrapper.classList.add("info-hotspot");
+
+    // Create hotspot/tooltip header.
+    var header = document.createElement("div");
+    header.classList.add("info-hotspot-header");
+
+    // Create image element.
+    var iconWrapper = document.createElement("div");
+    iconWrapper.classList.add("info-hotspot-icon-wrapper");
+
+    // Create title element.
+    var title = document.createElement("div");
+    title.classList.add("info-hotspot-title");
+    title.innerHTML = hotspot.title;
+
+    // Create close element.
+    var closeWrapper = document.createElement("div");
+    closeWrapper.classList.add("info-hotspot-close-wrapper");
+    var closeIcon = document.createElement("i");
+    closeIcon.classList.add("info-hotspot-close-icon", "fa-solid", "fa-circle-xmark");
+    closeWrapper.appendChild(closeIcon);
+
+    // Construct header element.
+    header.appendChild(iconWrapper);
+    header.appendChild(title);
+
+    // Place header and text into wrapper element.
+    wrapper.appendChild(header);
+
+    var toggle;
+    switch (hotspot.type) {
+      case "audio":
+      case "audio-room": {
+        iconWrapper.innerHTML = svgs["play-circle-outline"];
+        if (hotspot.type == "audio-room") {
+          wrapper.classList.add("audio-room");
+        }
+
+        const player = new Audio();
+        player.preload = "none";
+        player.src = hotspot.src;
+        player.addEventListener("play", () => {
+          iconWrapper.innerHTML = svgs["pause-circle-outline"];
+        });
+        player.addEventListener("pause", () => {
+          iconWrapper.innerHTML = svgs["play-circle-outline"];
+        });
+        player.addEventListener("ended", () => {
+          iconWrapper.innerHTML = svgs["play-circle-outline"];
+        });
+        audioList.push(player);
+
+        toggle = () => {
+          if (player.paused) {
+            player.play();
+          } else {
+            player.pause();
+          }
+        };
+        break;
+      }
+      case "title":
+        iconWrapper.innerHTML = svgs["information-outline"];
+        toggle = () => {};
+        break;
+      default:
+        iconWrapper.innerHTML = svgs["information-outline"];
+        const modal = document.createElement("div");
+        modal.classList.add("modal");
+        const modalDialog = document.createElement("div");
+        modalDialog.classList.add("modal-dialog", "modal-dialog-centered", "modal-lg");
+        const modalContent = document.createElement("div");
+        modalContent.classList.add("modal-content");
+        const modalHeader = document.createElement("div");
+        modalHeader.classList.add("modal-header");
+
+        const modalTitle = document.createElement("h5");
+        modalTitle.classList.add("modal-title");
+        modalTitle.innerHTML = hotspot.title;
+        modalHeader.appendChild(modalTitle);
+
+        const buttonClose = document.createElement("button");
+        buttonClose.type = "button";
+        buttonClose.classList.add("btn-close");
+        buttonClose.setAttribute("data-bs-dismiss", "modal");
+        modalHeader.appendChild(buttonClose);
+
+        modalContent.appendChild(modalHeader);
+
+        switch (hotspot.type) {
+          case "iframe":
+            var iframe = document.createElement("iframe");
+            modalContent.appendChild(iframe);
+            break;
+          case "video":
+            var video = document.createElement("video");
+            video.controls = true;
+            video.classList.add("video-js", "vjs-fluid", "w-100");
+            modalContent.appendChild(video);
+            break;
+          case "image":
+            var image = document.createElement("img");
+            modalContent.appendChild(image);
+            break;
+          default:
+            var modalBody = document.createElement("div");
+            modalBody.classList.add("modal-body");
+            modalContent.appendChild(modalBody);
+        }
+
+        modalDialog.appendChild(modalContent);
+        modal.appendChild(modalDialog);
+
+        document.body.appendChild(modal);
+
+        // @ts-ignore
+        const bsModal = new bootstrap.Modal(modal);
+
+        var videoJS = () =>
+          modalContent.querySelectorAll("video.video-js").forEach((video) => {
+            // @ts-ignore
+            videojs(video, {});
+          });
+
+        toggle = () => {
+          switch (hotspot.type) {
+            case "iframe":
+              if (iframe.src == "") iframe.src = hotspot.src;
+              break;
+            case "video":
+              if (video.src == "") video.src = hotspot.src;
+              // @ts-ignore
+              videojs(video, {});
+              break;
+            case "image":
+              if (image.src == "") image.src = hotspot.src;
+              break;
+            case "embed":
+              if (modalBody.innerHTML == "") {
+                fetch(`/tour/content/${sceneId}/${hotspot.name}/index.html`)
+                  .then((response) => response.text())
+                  .then((text) => {
+                    modalBody.innerHTML = text;
+                    // @ts-ignore
+                    new VenoBox({
+                      selector: ".vb-gallery",
+                      numeration: true,
+                      infinigall: true,
+                      share: true,
+                      shareStyle: "block",
+                      spinner: "grid",
+                      fitView: true,
+                      navTouch: true,
+                    });
+                    videoJS();
+                  });
+              }
+              break;
+            default:
+              if (modalBody.innerHTML == "") modalBody.innerHTML = hotspot.text;
+              videoJS();
+              break;
+          }
+          stopPlayback();
+          bsModal.show();
+        };
+    }
+
+    // Show content when hotspot is clicked.
+    wrapper.querySelector(".info-hotspot-header")?.addEventListener("click", toggle);
+
+    // Prevent touch and scroll events from reaching the parent element.
+    // This prevents the view control logic from interfering with the hotspot.
+    stopTouchAndScrollEventPropagation(wrapper);
+
+    return wrapper;
+  }
+
+  // Prevent touch and scroll events from reaching the parent element.
+  function stopTouchAndScrollEventPropagation(element) {
+    var eventList = ["touchstart", "touchmove", "touchend", "touchcancel", "wheel", "mousewheel"];
+    for (var i = 0; i < eventList.length; i++) {
+      element.addEventListener(eventList[i], function (event) {
+        event.stopPropagation();
+      });
+    }
+  }
+
+  function findSceneById(id) {
+    for (var i = 0; i < scenes.length; i++) {
+      if (scenes[i].data.id === id) {
+        return scenes[i];
+      }
+    }
+    return null;
+  }
+
+  function findSceneDataById(id) {
+    for (var i = 0; i < APP_DATA.scenes.length; i++) {
+      if (APP_DATA.scenes[i].id === id) {
+        return APP_DATA.scenes[i];
+      }
+    }
+    return null;
+  }
+
+  // Display the initial scene.
+  switchScene(scenes[0]);
+
+  // enable matomo analytics
+  // @ts-ignore
+  var _paq = (window._paq = window._paq || []);
+  _paq.push(["setDoNotTrack", true]);
+  _paq.push(["disableCookies"]);
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+  (function () {
+    var u = "//analytics.cantorgymnasium.de/";
+    _paq.push(["setTrackerUrl", u + "matomo.php"]);
+    _paq.push(["setSiteId", "2"]);
+    var d = document,
+      g = d.createElement("script"),
+      s = d.getElementsByTagName("script")[0];
+    g.async = true;
+    g.src = u + "matomo.js";
+    // @ts-ignore
+    s.parentNode.insertBefore(g, s);
+  })();
+
+  // show introduction modal
+  const modal = document.getElementById("modal-intro");
+  // @ts-ignore
+  new bootstrap.Modal(modal).show();
+
+  // @ts-ignore
+})(jQuery);

assets/style.css

@@ -0,0 +1,412 @@
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  -webkit-user-drag: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  min-width: 0;
+}
+
+video {
+  width: 100%;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 16px;
+  background-color: #000;
+}
+
+a,
+a:hover,
+a:active,
+a:visited {
+  text-decoration: none;
+  color: inherit;
+}
+
+#pano {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#titleBar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 40px;
+  height: 40px;
+  text-align: center;
+  border-radius: 12px;
+  margin: 10px;
+  margin-left: 20px;
+  margin-right: 30px;
+}
+
+/* If there is a fullscreen button the title bar must make space for it */
+body.fullscreen-enabled #titleBar {
+  right: 80px;
+}
+
+body.fullscreen-enabled.mobile #titleBar {
+  right: 100px;
+}
+
+/* If there are multiple scenes the title bar must make space for the scene list toggle */
+body.multiple-scenes #titleBar {
+  left: 40px;
+}
+
+#titleBar .sceneName {
+  width: 100%;
+  height: 100%;
+  line-height: 27.5px;
+  padding: 5px;
+  background-color: #1a1a37;
+  font-weight: 900;
+  font-size: 1.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  -webkit-user-select: text;
+  user-select: text;
+  border-radius: 30px;
+}
+
+.button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 30px;
+}
+
+.button > .on {
+  display: none;
+}
+
+.button > .off {
+  display: block;
+}
+
+.button.enabled > .on {
+  display: block;
+}
+
+.button.enabled > .off {
+  display: none;
+}
+
+#fullscreenToggle {
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  padding: 5px;
+  background-color: #ffbc3b;
+  border-radius: 50%;
+  margin: 10px;
+  color: #fff;
+  font-size: 30px;
+}
+
+#autorotateToggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  padding: 5px;
+  background-color: #ffbc3b;
+  border-radius: 20px;
+  margin: 10px;
+  margin-right: 20px;
+  cursor: pointer;
+  color: #fff;
+  font-size: 30px;
+}
+
+/* If there is a fullscreen button, autorotate must placed a bit to the left */
+body.fullscreen-enabled #autorotateToggle {
+  right: 40px;
+}
+
+#sceneListToggle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 40px;
+  padding: 5px;
+  background-color: #ffbc3b;
+  border-radius: 50%;
+  margin: 10px;
+  color: #fff;
+}
+
+#sceneList {
+  position: absolute;
+  width: 50px;
+  margin: 10px;
+  margin-top: 60px;
+  max-height: calc(100vh - 70px);
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 5px;
+  overflow: auto;
+  background-color: #1a1a37;
+  border-radius: 15px;
+  transition: 0.2s ease;
+}
+
+#sceneList.enabled {
+  width: 250px;
+}
+
+/* Hide scene title on collapse */
+#sceneList:not(.enabled) .scene > *:not(svg) {
+  display: none;
+}
+
+#sceneList .scene {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 10px;
+  color: #fff;
+  font-weight: 700;
+  height: 40px;
+  cursor: pointer;
+}
+
+#sceneList .scene svg {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+#sceneList .scene span {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#sceneList .scene:hover,
+#sceneList .scene:active {
+  background-color: #fff !important;
+  color: #1a1a37;
+  transition: 0.3s ease;
+}
+
+#sceneList .scene.current {
+  background-color: rgb(103, 115, 131);
+  background-color: #ffbc3b;
+}
+
+/* Link hotspot */
+
+.link-hotspot {
+  width: 60px;
+  height: 60px;
+  margin-left: -30px;
+  margin-top: -30px;
+  opacity: 0.9;
+  transition: opacity 0.2s;
+  font-size: 60px;
+}
+
+.link-hotspot svg {
+  cursor: pointer;
+}
+
+.link-hotspot:hover,
+.link-hotspot:active {
+  opacity: 1;
+}
+
+.mobile .link-hotspot {
+  width: 70px;
+  height: 70px;
+}
+
+.link-hotspot-tooltip {
+  position: absolute;
+  left: 100%;
+  top: 30px; /* ( 60 - (16 + 2*8) ) / 2 */
+
+  margin-left: 3px;
+
+  font-size: 16px;
+
+  max-width: 300px;
+
+  padding: 8px 10px;
+
+  border-radius: 5px;
+
+  background-color: rgb(58, 68, 84);
+  background-color: #1a1a37;
+
+  color: #fff;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  cursor: pointer;
+
+  opacity: 0;
+
+  transform: translateX(-8px);
+  transition: -webkit-transform 0.3s, transform 0.3s, opacity 0.3s;
+}
+
+.link-hotspot:hover .link-hotspot-tooltip,
+.link-hotspot:active .link-hotspot-tooltip {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Prevent tooltip from triggering */
+.link-hotspot-tooltip {
+  pointer-events: none;
+}
+.link-hotspot:hover .link-hotspot-tooltip,
+.link-hotspot:active .link-hotspot-tooltip {
+  pointer-events: all;
+}
+
+/* Info hotspot */
+
+.info-hotspot {
+  line-height: 1.2em;
+  opacity: 0.9;
+  transition: opacity 0.2s 0.2s;
+}
+
+.info-hotspot svg {
+  font-size: 40px;
+}
+
+.info-hotspot .info-hotspot-header {
+  width: 50px;
+  height: 50px;
+  max-width: 50px;
+  padding: 5px;
+  padding-right: 10px;
+  border-radius: 25px;
+  background-color: #1a1a37;
+  cursor: pointer;
+  transition: max-width 0.5s ease;
+  color: #fff;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.info-hotspot.audio-room .info-hotspot-header {
+  background-color: #ffbc3b;
+  width: 75px;
+  height: 75px;
+  max-width: 75px;
+  border-radius: 37.5px;
+}
+
+.info-hotspot.audio-room svg {
+  font-size: 65px;
+}
+
+.info-hotspot-header:not(:hover):not(:active) .info-hotspot-title {
+  display: none;
+}
+
+.info-hotspot.visible .info-hotspot-header:hover,
+.info-hotspot.visible .info-hotspot-header:active,
+.info-hotspot .info-hotspot-header:hover,
+.info-hotspot .info-hotspot-header:active {
+  width: auto;
+  max-width: 500px;
+  transition: max-width 0.2s ease;
+}
+
+.info-hotspot .info-hotspot-icon-wrapper {
+  flex-shrink: 0;
+}
+
+.info-hotspot .info-hotspot-title {
+  -webkit-user-select: text;
+  user-select: text;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* View control buttons */
+
+.viewControlButtons {
+  display: flex;
+  gap: 0.5rem;
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  width: 280px;
+}
+
+.viewControlButton {
+  width: 40px;
+  height: 40px;
+  padding: 5px;
+  background-color: rgb(103, 115, 131);
+  background-color: #fff;
+  border-radius: 50%;
+  color: #000;
+}
+
+/* Hide controls when width is too small */
+@media (max-width: 600px) {
+  body.view-control-buttons .viewControlButton {
+    display: none;
+  }
+}
+
+.modal * {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+.modal-content > iframe {
+  height: 60vh;
+}
+
+.modal-body audio {
+  width: 100%;
+}
+
+.content li {
+  color: var(--bs-secondary-color);
+  font-family: var(--gcg-font-primary);
+}

content/tour/_index.md

@@ -0,0 +1,9 @@
+---
+title: Willkommen im Georg-Cantor-Gymnasium!
+button: Tour beginnen
+video: /tour/material/Cantor_Zoom_Speech.mp4
+---
+
+Dieser digitale Rundgang durch das Georg-Cantor-Gymnasium wurde im Jahr 2020 in Zusammenarbeit von Schülern und Lehrern kreiert, um die Lücke des Tags der offenen Tür zu füllen, der aufgrund der Corona-Pandemie nicht stattfinden konnte. Auch wenn Inhalte **nicht laufend aktualisiert werden**, sondern den Stand von Dezember 2020 wiederspiegeln, kann Ihnen dieser virtuelle Rundgang einen einzigartigen Einblick in das Schulhaus und das Schulleben verschaffen!  
+  
+Für aktuelle Informationen zum GCG schauen Sie auf unserer [Schulhomepage](https://cantorgymnasium.de/) vorbei.

content/tour/content/10-213/kunst.md

@@ -0,0 +1,8 @@
+---
+---
+
+Kreativität ist die Verbindung zwischen allem, was erlernt, erforscht, entwickelt wird. Sie zeigt sich in vielen Facetten. Die schöpferische Arbeit beim Schaffen von Bildern, Skulpturen, Objekten, der Entdeckung von Schriftgestaltung ergänzt auf wundervolle Weise rationales Arbeiten.  
+  
+Und wenn man den Dingen auf den Grund geht, entdeckt man den Zusammenhang zwischen Farblehre, Malerei und Optik oder zwischen Goldenem Schnitt, Architektur und Natur. Das ist spannend und entspannend zugleich.  
+  
+Sehen Sie sich einige Kostproben künstlerischer Arbeit an den Infopunkten in diesem Raum an. Viel mehr davon wartet im realen Schulleben.

content/tour/content/10-213/kunstproben-1.md

@@ -0,0 +1,4 @@
+---
+---
+
+{{< gallery dir="/tour/material/10-213/kunstproben-1/" >}}

content/tour/content/10-213/kunstproben-2.md

@@ -0,0 +1,4 @@
+---
+---
+
+{{< gallery dir="/tour/material/10-213/kunstproben-2/" >}}

content/tour/content/11-schlercafe/schuelerrat.md

@@ -0,0 +1,11 @@
+---
+---
+
+<video controls class="video-js vjs-fluid" src="/tour/material/11-schlercafe/SR_Seminar.mp4" poster="/tour/material/11-schlercafe/previews/schülerratsseminar.webp"></video>
+<video controls class="video-js vjs-fluid" src="/tour/material/11-schlercafe/Weihnachten.mp4" poster="/tour/material/11-schlercafe/previews/weihnachten.webp"></video>
+<video controls class="video-js vjs-fluid" src="/tour/material/11-schlercafe/TdK_SoR_SmC.mp4" poster="/tour/material/11-schlercafe/previews/tdk.webp"></video>
+<video controls class="video-js vjs-fluid" src="/tour/material/11-schlercafe/Beirat.mp4" poster="/tour/material/11-schlercafe/previews/beirat.webp"></video>
+<video controls class="video-js vjs-fluid" src="/tour/material/11-schlercafe/DeinTagFürAfrika.mp4" poster="/tour/material/11-schlercafe/previews/dtfa.webp"></video>
+<video controls class="video-js vjs-fluid" src="/tour/material/11-schlercafe/U18Wahl.mp4" poster="/tour/material/11-schlercafe/previews/u18.webp"></video>
+<video controls class="video-js vjs-fluid" src="/tour/material/11-schlercafe/Schulfest.mp4" poster="/tour/material/11-schlercafe/previews/schulfest.webp"></video>
+<video controls class="video-js vjs-fluid" src="/tour/material/11-schlercafe/Paten.mp4" poster="/tour/material/11-schlercafe/previews/paten.webp"></video>

content/tour/content/11-schlercafe/schulelternrat.md

@@ -0,0 +1,14 @@
+---
+---
+
+### Herzlich Willkommen beim Schulelternrat des Georg-Cantor-Gymnasiums
+
+Elternarbeit an unserer Schule bietet uns die Möglichkeit, uns aktiv in die Gestaltungsprozesse an unserer Schule einzubringen. Elternarbeit ist ein wichtiger Bestandteil des schulischen Lebens und bietet eine Vielzahl von Beteiligungs- und Gestaltungsmöglichkeiten. Der Schulelternrat ist ein unabhängiges, von den Erziehungsberechtigten selbst gewähltes Gremium. Der Schulelternrat ist besonders auf die Mitarbeit aller Eltern angewiesen, damit die Schule ein Ort ist, zu dem unsere Kinder gern gehen, um zu lernen und Gemeinschaft zu erleben. Deshalb sind immer alle Eltern aufgerufen, Anregungen, Wünsche und Kritik über die Klassenelternräte an den Schulelternrat weiterzugeben, damit dieser entsprechend tätig werden kann.  
+  
+Schwerpunktaufgabe des Schulelternrates ist insbesondere die Erörterung von schulischen Fragen. Der Schulelternrat hat das Recht, Beschlüsse zu fassen und Anträge an die Gesamtkonferenz zu stellen, welche von dieser zu behandeln sind. So wollen wir die Interessen der Elternschaft wahren, Wünsche und Vorschläge der Eltern zu bündeln und diese an die Schulleitung weiter zu geben. Der Schulträger und die Schulleitung unterrichten uns über alle Angelegenheiten, die für die Schule von allgemeiner Bedeutung sind und erteilen alle notwendigen Auskünfte. Wir leben mit der Schulleitung und dem Lehrerkollegium eine vertrauensvolle Kommunikation, einen regen Informations- und Meinungsaustausch. Dabei ist es wichtig, die internen Belange der Schule eng mit der Schulleitung, den Lehrern und der Schülervertretung zu behandeln. So gestalten wir das tägliche Schulleben in seinen vielen Formen mit.  
+  
+Die rechtlichen Vorschriften sind im Schulgesetz des Landes Sachsen-Anhalt zu finden.  
+  
+Katharina Boelsen,  
+  
+Vorsitzende des Schulelternrates

content/tour/content/12-205/kunst-ags.md

@@ -0,0 +1,4 @@
+---
+---
+
+{{< slider dir="/tour/material/12-205/kunst/" >}}

content/tour/content/13-aula/keyboard.md

@@ -0,0 +1,9 @@
+---
+---
+
+{{< gallery dir="/tour/material/13-aula/keyboard/" >}}
+
+<div class="row">
+  <audio controls class="col-md-6" src="/tour/material/13-aula/keyboard/Keyboards_im_Unterricht.mp3"></audio>
+  <audio controls class="col-md-6" src="/tour/material/13-aula/keyboard/Pachelbel_Keyboard_AG.mp3"></audio>
+</div>

content/tour/content/13-aula/orff.md

@@ -0,0 +1,4 @@
+---
+---
+
+{{< gallery dir="/tour/material/13-aula/orff/" >}}

content/tour/content/13-aula/projektwoche.md

@@ -0,0 +1,19 @@
+---
+---
+
+Unterricht heißt bei uns übrigens nicht ausschließlich Fachunterricht.
+Im März feiern wir den Geburtstag von Georg Cantor mit unseren Kultur- und Wissenschaftstagen. Dazu gehören die Projekttage, die sich für die 5. und 6. Klassen um das „Lebenselixier Wasser“ drehen, für die 7. und 8. Klasse „unter die Haut gehen“ und sich dann in Klasse 9 mit dem Thema „Digitale Medien und ihre Anwendungen“ beschäftigen. Kulturelle Leckerbissen sind die Galerie „CantorArt“ und der Musikalisch-literarische Abend (von allen liebevoll Muli-Abend genannt).  
+  
+Außerdem laden wir uns in dieser Woche Gäste aus Wissenschaft und Forschung ein, die uns in Vorträgen und Diskussionsrunden ihre Arbeit nahebringen. Für die Achtklässler organisieren wir einen Techniktag. Die Festveranstaltung mit der Ehrung des Cantor-Preisträgers stellt den Höhepunkt dieser Veranstaltungsreihe dar.
+
+{{% collapsible title="Wasser - Angebote Klasse 5/6" %}}
+
+<iframe src="/tour/material/13-aula/projektwoche/Wasser_5_6.pdf" width="100%" height="600px"></iframe>
+
+{{% /collapsible %}}
+
+{{% collapsible title="Techniktag Klasse 8" %}}
+
+<iframe src="/tour/material/13-aula/projektwoche/Techniktag_8.pdf" width="100%" height="600px"></iframe>
+
+{{% /collapsible %}}

content/tour/content/13-aula/theaterprojekte.md

@@ -0,0 +1,14 @@
+---
+---
+
+### „Kosakenzipfel“: Einblick in eine Probe
+
+<video class="video-js vjs-fluid" controls src="/tour/material/13-aula/Kosakenzipfel.mp4"></video>
+
+### Aktuelles Projekt der Theater-AG Klasse 5: „Tonnenfieber“
+
+<audio controls src="/tour/material/13-aula/Theater5.mp3"></audio>
+
+### Aktuelles Projekt der Theater-AG Klasse 9: „Mord in der Schokoladenfabrik“
+
+<video class="video-js vjs-fluid" controls src="/tour/material/13-aula/Theater9.mp4"></video>

content/tour/content/13-aula/weihnachtskonzert.md

@@ -0,0 +1,18 @@
+---
+---
+
+<audio controls src="/tour/material/13-aula/weihnachtskonzert/chor.mp3"></audio>
+
+<audio controls src="/tour/material/13-aula/weihnachtskonzert/instrumental.mp3"></audio>
+
+{{% collapsible title="Plakat" %}}
+
+<iframe src="/tour/material/13-aula/weihnachtskonzert/Plakat2019.pdf" width="100%" height="600px"></iframe>
+
+{{% /collapsible %}}
+
+{{% collapsible title="Foto" %}}
+
+![](/tour/material/13-aula/weihnachtskonzert/ulrichskirche.webp)
+
+{{% /collapsible %}}

content/tour/content/2-305/arduino.md

@@ -0,0 +1,8 @@
+---
+---
+
+Diese Autos fahren gegen kein Hindernis, finden selbständig den Ausgang oder den Weg und können sogar Autofußball spielen.
+Programmiert wurde ihr Arduino-Mikrocontroller von Schülern der Klasse 12.
+Aber auch in Klasse 8 baut und programmiert jeder Schüler mit einem Arduino-Baukasten Ampelschaltungen und Steuerungen mit verschiedenen Sensoren, Motoren und Lautsprechern.
+
+![](/tour/material/2-305/arduino.webp)

content/tour/content/2-305/informatik.md

@@ -0,0 +1,15 @@
+---
+---
+
+Das Fach Informatik wird ab Klasse 5 verpflichtend für alle Schüler unterrichtet. Ab Jahrgangsstufe 11 kann Informatik durch die Schüler:
+- als Wahlpflichtkurs mit zwei Wochenstunden
+- als Kurs auf erhöhtem Anforderungsniveau (LK) mit fünf Wochenstunden
+gewählt werden.
+
+Das Georg-Cantor-Gymnasium ist die einzige Schule in Sachsen-Anhalt, der es seitens des Bildungsministerium gestattet worden ist, in Informatik einen Leistungskurs anzubieten. Seit dem Schuljahr 2004/05 wurde Informatik als Profilkurs zunächst vierstündig unterrichtet, seit dem Schuljahr 2019/20 als LK. Den Schüler ist somit die Möglichkeit eröffnet, Informatik als schriftliches Prüfungsfach im Rahmen der Reifeprüfung abzulegen.
+
+Alle Schüler nehmen am Informatik-Biber-Wettbewerb teil. Als Schulpreis haben wir einen Biber gewonnen.  
+  
+Suche ihn im Raum (er hat von oben alles im Blick)! Dann findest du eine Aufgabe zum Ausprobieren.  
+  
+Viel Spaß!

content/tour/content/2-305/jugendforscht.md

@@ -0,0 +1,13 @@
+---
+---
+
+### Der Nachwuchswettbewerb in Mathematik, Informatik, Naturwissenschaften und Technik – gefördert von Bundesregierung, stern, Wirtschaft, Wissenschaft und Schulen
+
+Das GCG nimmt erfolgreich seit vielen Jahren an diesem deutschlandweit bekanntesten Wettbewerb teil. Jedes Jahr stellen Cantorianer in mindestens 10 Projekten ihre Forschungsergebnisse auf den Regionalwettbewerben vor. Zu den größten Erfolgen zählen Siege und Platzierungen auf dem Bundeswettbewerb. Auch konnten schon 2 Teams ihre Projekte bei Wettbewerben in Japan erfolgreich vorstellen. 2018 wurde das GCG mit dem Preis der „Ständige Konferenz der Kultusminister der Länder in der Bundesrepublik Deutschland“ (Preis für die Jugend forscht Schule 2018, 3.142 €) ausgezeichnet.
+
+{{< gallery dir="/tour/material/2-305/jufo/" >}}
+
+
+Jedes Jahr wird am GCG im September ein „Jugend forscht Tag“ durchgeführt, um den Schülern der neuen 5. Klassen den Wettbewerb vorzustellen. Dabei präsentieren Schüler älterer Jahrgänge ihr Projekte. Am GCG unterstützen Betreuungslehrer die Arbeit in den Projekten. Auch gibt es eine enge Zusammenarbeit mit Schülerforschungszentrum Halle. Hier haben die Schülerinnen und Schüler vielfältige Möglichkeiten unter Anleitung der Betreuungslehrer zu experimentieren, zu forschen und ihre Projekte zu erarbeiten.
+              
+{{< card link="https://sachsen-anhalt.jugend-forscht.de" title="Website von „Jugend forscht“" >}}

content/tour/content/2-305/ki.md

@@ -0,0 +1,9 @@
+---
+---
+
+„Mensch, Maschine! Wer zeigt hier wem den Weg?“ heißt das Spiel.
+Es hat das Ziel, auf spielerische Weise zu vermitteln, wie Maschinen lernen – und wie aus vielen Millionen einzelnen Informationen die sogenannte Künstliche Intelligenz (KI) entsteht.
+
+![](/tour/material/2-305/ki.webp)
+
+Nach einer Stunde mit diesem Würfelspiel in Klasse 8 hat das jeder Schüler verstanden.

content/tour/content/2-305/mat-nat-wettbewerbe.md

@@ -0,0 +1,25 @@
+---
+---
+
+### Mathematisch-Naturwissenschaftliche Wettbewerbe
+              
+Schülerinnen und Schüler des GCG beteiligen sich seit vielen Jahren mit großem Erfolg an nationalen und internationalen MatNat-Wettbewerben.
+Die gezielte Vorbereitung von talentierten Schülerinnen und Schülern zu diesen Wettbewerben ist ein wesentlicher Bestandteil der Begabtenförderung am GCG.
+
+**Zu den renommiertesten Wettbewerben zählen:**
+- die Internationale Chemie-Olympiade (IChO)
+- die Internationale Physik-Olympiade (IPhO)
+- die Mathematik-Olympiade
+- die Bundeswettbewerbe (BW) in Mathematik und Informatik
+
+**Die „Highlights“ der letzten Jahre sind:**
+
+- Tom-Erik Steinkopf war Mitglied der deutschen Mannschaft zur IChO 2020 und Bronze-Medaillen-Gewinner
+- Xenia Wagner nahm 2020 und 2021 an der Bundes-Runde des BW Mathematik teil
+- Titus Bornträger war Mitglied der deutschen Mannschaft zur IPhO 2019 in Tel Aviv und Bronze-Medaillen-Gewinner
+
+{{< gallery dir="/tour/material/2-305/mat-nat-wettbewerbe/" >}}
+
+Das GCG wird als „Erfolgreichste Schule in der Landesrunde“ der Mathematik-Olympiade in den Jahren 2015, 2016, 2019 und 2020 ausgezeichnet. Die Geschichte der Erfolge unserer Schüler kann in unserer [Schulchronik](https://cantorgymnasium.de/schulchronik/) angesehen werden.
+
+Eine Besonderheit sind die bundesweiten „Mannschaftswettbewerbe“ zwischen den Schulen mit mathematisch-naturwissenschaftlichem Schwerpunkt in den Fächern Biologie, Chemie, Physik und Informatik. In den Jahrgangsstufen 9, 10 und 11/12 konkurrieren Teams aus drei Schülern um den Sieg. Austragungsort ist jeweils eine der Schulen – eine gute Gelegenheit, um sich mit anderen zu messen und auszutauschen.

content/tour/content/2-305/pc.md

@@ -0,0 +1,9 @@
+---
+---
+
+Bei uns baut natürlich jeder einmal in Klasse 8 einen Computer auseinander und wieder zusammen.
+Keine Angst, das kann jeder. Und die PCs sind sowieso nicht mehr ganz gesund und im Einsatz.
+
+![](/tour/material/2-305/pcteile.webp)
+
+Natürlich lernen wir auch die Funktionsweise von Mäusen, Tastaturen, Bildschirmen usw. kennen.

content/tour/content/3-312/mint-ec.md

@@ -0,0 +1,14 @@
+---
+---
+
+{{% collapsible title="Video" %}}
+
+<video class="video-js vjs-fluid" controls src="/tour/material/3-312/MINT-EC-Zertifikat.mp4"></video>
+
+{{% /collapsible %}}
+
+{{% collapsible title="Zertifikat" %}}
+
+<iframe src="/tour/material/3-312/MINT-EC-Zertifikat_Georg_Cantor.pdf" width="100%" height="600px"></iframe>
+
+{{% /collapsible %}}

content/tour/content/5-407/jungeforscher.md

@@ -0,0 +1,24 @@
+---
+---
+
+### Erfahrungsbericht: WPA und „Jugend Forscht“
+
+<audio controls src="/tour/material/5-407/wpaaudio.mp3"></audio>
+
+Schüler des Georg-Cantor-Gymnasiums bekommen in der 10. Klasse die Möglichkeit, **eine wissenschaftlich praktische Arbeit**, kurz WPA, zu schreiben.
+**Ziel des Ganzen ist es, den Schülern das wissenschaftliche Arbeiten näher zu bringen, eigene Erkenntnisse zu sammeln, diese fachlich korrekt darzustellen und zu präsentieren.**
+
+
+Über die sehr guten Kontakte der Schule zur Martin-Luther-Universität gelingt es, außerschulische Betreuer für die Arbeit zu finden. Ich persönlich habe sehr positive Erfahrungen mit meinem Betreuer gemacht. Er war sehr engagiert und hat mich auch tatkräftig unterstützt, die Methoden und Experimente zu verstehen. Zudem ließ er mich viele Dinge selber tun. So arbeitete ich zum ersten Mal mit einem Programm zum Erstellen von 3D-Modellen und konstruierte mit diesem mein Forschungsobjekt, eine Flussbatterie.
+
+{{< gallery dir="/tour/material/5-407/wpa/" >}}
+
+Ich bin immer sehr gerne in die Uni gegangen, weil ich wusste, dass ich gleich wieder etwas lernen werde, was mir später beim Studium weiterhelfen würde. Ich kann jedem jungen Wissenschaftler und Cantorianer nur empfehlen, eine WPA zu schreiben. Die hat glücklicherweise nicht nur Nutzen in der 10. Klasse, sondern ich konnte mich mit dieser Arbeit auch beim Wettbewerb „Jugend forscht“ beteiligen.
+
+#### Was ist „Jugend forscht“?
+
+**„Jugend forscht“ ist ein Wettbewerb für Nachwuchswissenschaftler, die Spaß daran haben, selbständig Erkenntnisse zu sammeln und diese auch zu präsentieren.** 
+Für mich persönlich war die Teilnahme eine tolle Erfahrung. Man erhält konstruktive Kritik von der Jury und verbessert so seine Fähigkeiten im Präsentieren. Zudem bekommt man die die Möglichkeit, Kontakt zu gleichaltrigen Wissenschaftsinteressierten zu knüpfen und natürlich auch tolle Preise zu gewinnen. Eine Teilnahme lohnt sich auch schon in jüngeren Jahren, um so die Grundlagen des wissenschaftlichen Arbeitens kennenzulernen und dadurch einen Vorsprung  gegenüber anderen zu haben. Außerdem lassen sich spätere Inhalte des Unterrichts leichter verstehen.  Als positiv empfand ich auch, dass man von der Schule zusätzliche Unterstützung bekommt.
+
+
+**Tim Großmann (Klasse 12)**

content/tour/content/6-003/jia-1.md

@@ -0,0 +1,4 @@
+---
+---
+
+Mit LEGO hat sicher jeder schon Kontakt gehabt. Doch hier lernst du mit LEGO Mindstorms Education eine ganz neue Sichtweise kennen. Baue kreativ deinen eigenen Roboter und programmiere ihn so, dass er die Aufgaben am besten lösen kann. Auch hier wirst du in einem Team gegen deine Mitschüler antreten. Möge das beste Team gewinnen!

content/tour/content/6-003/jia-2.md

@@ -0,0 +1,4 @@
+---
+---
+
+Auf die Plätze, fertig, los! So wird das Startsignal beim jährlichen StromerCup des BZE auch in den nächsten Jahren wieder lauten. Denn zu diesem Wettkampf treten wir als Schule mit acht Teams an und versuchen die ersten Plätze für uns zu gewinnen. Baue aus leichtem Kunststoff die Karosserie und das Innere mit einem Elektromotor. So ensteht dein eigenes Elektroauto. Tritt dabei nicht nur gegen andere Schulen der Region an, sondern auch gegen deine Mitschüler in kleinen Teams. Bist du bereit das bessere Auto zu bauen? Na dann, worauf wartest du...!?

content/tour/content/6-003/jia-3.md

@@ -0,0 +1,4 @@
+---
+---
+
+In diesem Halbjahr bauen wir unser eigenes Windkraftrad! Du wirst dir in Teams spannende Lösungen überlegen und handwerklich diese dann an zahlreichen Maschinen und Materialien umsetzen. Am Ende gewinnt das Team, welches die innovativste Lösung gefunden hat.

content/tour/content/6-003/jia-4.md

@@ -0,0 +1,4 @@
+---
+---
+
+Du hast dir sicher schon einmal eine Cola-Dose oder einen Schokoriegel aus einem Automaten genommen, oder? Hast du dich dabei auch gefragt, wie solch ein Automat überhaupt funktioniert? Hier lernst du nicht nur dessen Funktionsweise kennen, sondern du baust deinen eigenen! Dieser wird mit Mikrocontroller gesteuert. Das Gehäuse gestaltest du aus Metallbau. Sei neugierig auf eine spannende Reise in das Innere eines solchen Automaten.

content/tour/content/6-003/jia.md

@@ -0,0 +1,8 @@
+---
+---
+
+Die Junior-Ingenieur-Akademie wird an unserer Schule durch die Deutsche Telekom Stiftung ermöglicht. Mithilfe dieser Unterstützung gelang es, Schülerinnen und Schülern im Wahlpflichtbereich der gymnasialen Mittelstufe für technische Inhalte zu begeistern und den Beruf des Ingenieurs vorzustellen. Durch sowohl zahlreiche Kooperationspartner wie die HS Merseburg als auch Wirtschaftsunternehmen, wird eine fach- und schulübergreifende Lernumgebung geschaffen, die gleichzeitig Berufsorientierung als auch Studienpropädeutik vermittelt. Eines unserer Highlights ist das Austauschprojekt mit unserer Partnerschule in Budapest. Durch unsere Kooperation mit dem Deutschen-Nationalitäten-Gymnasium Budapest gelang es, technische Bildung landesübergreifend zu initiieren und einen beiderseitigen Erfahrungsaustausch zu realisieren. Auch dieses Projekt wird durch die Deutsche Telekom Stiftung gefördert.
+
+{{< card link="https://www.telekom-stiftung.de/projekte/junior-ingenieur-akademie" title="Homepage der Junior-Ingenieur-Akademie" >}}
+
+Weiterhin haben wir uns eine Schulpartnerschaft mit dem Deutschen Nationalitätengymnasium in Budapest aufgebaut. Wir besuchen uns jeweils einmal im Jahr und erleben eine ganze Woche lang spannende Ausflüge, technisch interessante Projekte in der Schule und sicherlich aufregende Erfahrungen am Wochenende mit den Gastschülern. Wenn auch du an diesem interkulturellen Austausch teilnehmen möchtest, dann komm zu uns an die Schule und ab der Klasse 8 in die JIA! Wir freuen uns auf dich!

content/tour/content/6-003/sfz.md

@@ -0,0 +1,5 @@
+---
+---
+
+<audio controls src="/tour/material/6-003/Audio_SFZ.mp3"></audio>
+<iframe src="/tour/material/6-003/SFZ-Flyer_ilm_final.pdf" width="100%" height="600px"></iframe>

content/tour/content/7-402/lyrikprojekt.md

@@ -0,0 +1,10 @@
+---
+---
+
+### „Bewusstsein“: ein Gedicht von Nico Diener
+
+<audio controls src="/tour/material/7-402/Bewusstsein.mp3"></audio>
+
+### „Ohne Titel“: Ein Gedicht von Frauke Reckmann
+
+<audio controls src="/tour/material/7-402/GedichtFraukeReckmann.mp3"></audio>

content/tour/content/7-402/szenische-lesungen.md

@@ -0,0 +1,10 @@
+---
+---
+
+### Geld, Geld, Geld! Szenische Lesung aus „Der Geizige“
+
+<audio controls src="/tour/material/7-402/dergeizige.mp3"></audio>
+
+### Mephistos Wette: Lesung aus Goethes „Faust“
+
+<video class="video-js vjs-fluid" controls src="/tour/material/7-402/Faust Richard Vasil.mp4"></video>

content/tour/content/7-402/tabletklasse.md

@@ -0,0 +1,7 @@
+---
+---
+
+Wir laden dich ein, einen Einblick zu bekommen, wie wir uns für das Weiterentwickeln des Unterrichts einsetzen.
+Dabei stellen wir gleich auf die Probe, was wir im Deutschunterricht über das Argumentieren gelernt haben!
+
+<video class="video-js vjs-fluid" controls src="/tour/material/7-402/tabletklasse.mp4"></video>

content/tour/content/8-102/englisch.md

@@ -0,0 +1,15 @@
+---
+---
+
+### With English around the world
+
+Am Georg-Cantor-Gymnasium wird Englisch **ab Klasse 5 als erste Fremdsprache** unterrichtet.
+
+Die Bücher von Green Line begleiten euch durch die Schuljahre. Ihr lernt nicht nur verschiedene Regionen von Großbritannien kennen, sondern auch andere englischsprachige Länder wie die USA, Australien und Südafrika.  
+  
+Arbeitshefte, Hör-CDs und Videos sorgen für Abwechslung und erleichtern das Erlernen der Sprache.
+
+{{< gallery dir="/tour/material/8-102/englisch/" >}}
+
+Das Georg-Cantor-Gymnasium hat sich auch die Förderung sprachbegabter Schüler auf die Fahnen geschrieben, vor allem durch die Beteiligung an verschiedenen Sprachwettbewerben.
+Neben The Big Challenge gehört vor allem der Bundeswettbewerb Fremdsprachen dazu, bei dem Schüler unserer Schule schon wiederholt vordere Plätze auf Landes-und Bundesebene belegt haben.

content/tour/content/8-102/frz.md

@@ -0,0 +1,18 @@
+---
+---
+
+Bonjour,  
+  
+wenn ihr in die 7. Klasse kommt, werdet ihr eine zweite Fremdsprache wählen. Das kann Französisch sein.  
+  
+Französisch wird übrigens nicht nur in Frankreich gesprochen, sondern auch in vielen anderen Ländern der Welt.
+
+![](/tour/material/8-102/frz-karte.webp)
+
+In Europa sind dies Belgien, die Schweiz und Luxemburg.  
+  
+Wie du es schon aus dem Englisch-Unterricht kennst, wirst du hier Texte lesen und hören, lernst viel über die Menschen, die Französisch sprechen, lernst Lieder und Filme in französischer Sprache kennen und wirst dich am Ende auch in dieser Sprache mündlich und schriftlich verständigen können.  
+  
+Wir arbeiten mit Materialien des Cornelsen-Verlags.  
+  
+À plus!

content/tour/content/8-102/latein.md

@@ -0,0 +1,23 @@
+---
+---
+
+SALVETE liebe Besucher,  
+  
+was haben:
+- Caesars „Gallischer Krieg“
+- Ovids „Metamorphosen“
+- die 1. Beschreibung eines Vulkanausbruches von Plinius
+- das englische Grundgesetz von 1215
+- die Hexenprozesse im Mittelalter
+- das älteste Buch über Fechtkunst aus dem 13. Jahrhundert
+- die Erzählungen über die Entdeckungsfahrten des Kolumbus
+- mathematische Lehrbücher aus dem 18. Jahrhundert
+- die Doktorarbeit des großen Mathematikers Georg Cantor
+  
+**gemeinsam?**  
+  
+**RICHTIG!** Sie sind alle erstmals in Latein verfasst worden, denn Latein ist bis ins 20. Jahrhundert die Sprache der Wissenschaft und noch lange ist nicht alles übersetzt und diskutiert.  
+  
+**Neugierig?** Antworten auf viele Fragen findet Ihr im Lateinunterricht.  
+  
+**INTRATE et AUDITE et SPECTATE!**

content/tour/content/8-102/rallye.md

@@ -0,0 +1,6 @@
+---
+---
+
+Für alle von euch, die gerne mit dem Smartphone auf Schnitzeljagd gehen, ist die Cantor-Rallye genau das Richtige. Das folgende Video erklärt, was euch erwartet!
+
+<video class="video-js vjs-fluid" controls src="/tour/material/8-102/Chronik2.mp4"></video>

content/tour/content/8-102/spanisch.md

@@ -0,0 +1,13 @@
+---
+---
+
+### ¿Aprender español?
+
+**Spanisch kannst du am Georg-Cantor-Gymnasium als dritte Fremdsprache ab Klasse 9 lernen.**
+
+- Der Einstieg ins Spanische wird dir nicht schwerfallen, weil Spanisch – wie auch Französisch – eine romanische Sprache ist. Beide Sprachen haben eine Vorläufersprache: Latein.
+- Ähnlich wie in Latein gibt es auch bei der Aussprache nur wenig Schwierigkeiten.
+- In über 20 Ländern ist Spanisch Amtssprache. Du kannst dir eine völlig neue Welt erschließen. Denke einmal an all die Länder, in denen Spanisch gesprochen wird: natürlich Spanien – dazu Mexiko, große Teile der USA und fast ganz Mittel- und Südamerika.
+- Oder ganz praktisch: Denke einfach an die Sommerhits von Álvaro Soler, die Tapas beim Spanier, die Tacos beim Mexikaner, die spanischen Filme im Stream, ...
+
+### ¿Nos vemos en agosto?

content/tour/content/9-306/eltern.md

@@ -0,0 +1,17 @@
+---
+---
+
+### Das Fach Geographie
+
+- Schülerinnen und Schüler für die Schönheit der Erde aufschließen
+- Sensibilisierung für allgemeine und regionale geographische Probleme
+- Schulung der räumlichen Orientierungsfähigkeit
+                
+### Die Fächer Ethik und Religion
+
+- Befähigung zur ethischen Urteilsbildung, zum Dialog mit Anderen und zur Gestaltung eines guten Lebens
+- Diskussion über Fragen, die Menschen schon immer bewegten
+- Bezug auf aktuelle Probleme und Raum für Kreatives (Collagen, Comics, Hörspiele usw.)
+- Weitere Hinweise zum Fach ev. Religion finden Sie [hier](https://www.religionsunterricht-ekm.de)
+
+{{< gallery dir="/tour/material/9-306/reli-ethik/" >}}

content/tour/content/9-306/ethik-s.md

@@ -0,0 +1,8 @@
+---
+---
+
+### Ethikunterricht – Was lerne ich da und wofür brauche ich das?
+
+![](/tour/material/9-306/infos_es.webp)
+
+„Ethik“ vermittelt nicht nur, was „richtiges“ Verhalten ist oder welche Werte für uns wichtig sind. Im Ethikunterricht wirst du vielen Fragen auf den Grund gehen. Manche betreffen dich ganz persönlich, andere alle Menschen. Daher ist der Austausch untereinander wichtiger Teil des Unterrichts.

content/tour/content/9-306/reli-s.md

@@ -0,0 +1,11 @@
+---
+---
+
+### Religionsunterricht – Was lerne ich da, und wofür brauche ich das?
+
+![](/tour/material/9-306/infos_rs.webp)
+
+Im Religionsunterricht wirst du auf einige dieser Fragen Antworten bekommen. Auf andere Fragen wird er dir keine klaren Antworten geben, jedoch Zeit und Raum, darüber nachzudenken und dich mit anderen auszutauschen. Religionsunterricht bedeutet nicht, dass man „Glauben lernt“ oder der Lehrer „erklärt“, wie man „glaubt“.
+Vielmehr begeben wir uns im Religionsunterricht gemeinsam auf die Suche, um Antworten auf Fragen zu finden, die uns in unserem Leben bewegen.  
+  
+Weitere Informationen zum Fach findest Du [hier](https://bit.ly/3r6jjcG).

go.mod

@@ -0,0 +1,5 @@
+module git.cantorgymnasium.de/gcg/marzipano
+
+go 1.19
+
+require github.com/hugomods/icons/vendors/mdi v0.3.6 // indirect

go.sum

@@ -0,0 +1,3 @@
+github.com/hugomods/icons v0.6.4 h1:SeDMpN2kjc8mbuXfi8zED4IN5IGZmqJdmmUQr9tIpxw=
+github.com/hugomods/icons/vendors/mdi v0.3.6 h1:CGMCi7aEHKBOYMdyKJF8FmEt1+9vV5Hvptp3qHY25Bo=
+github.com/hugomods/icons/vendors/mdi v0.3.6/go.mod h1:XDQZ9k0Xmxy6Xh7idvjUkfb5DhDJmQPHCavlRHymSg8=

hugo.yml

@@ -0,0 +1,17 @@
+baseURL: https://vr.cantorgymnasium.de/
+languageCode: de-DE
+disableKinds:
+- taxonomy
+- term
+- robotsTXT
+- sitemap
+- rss
+build:
+  noJSConfigInAssets: true
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+module:
+  imports:
+    - path: github.com/hugomods/icons/vendors/mdi

layouts/_default/single.html

@@ -0,0 +1,3 @@
+<div class="content">
+	{{ .Content }}
+</div>

layouts/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>{{ "/tour" | absURL }}/</title>
+	<link rel="canonical" href="{{ `/tour` | absURL }}" />
+	<meta name="robots" content="noindex">
+	<meta charset="utf-8" />
+	<meta http-equiv="refresh" content="0; url={{ `/tour` | absURL }}" />
+</head>
+
+</html>

layouts/partials/mdi.html

@@ -0,0 +1 @@
+{{ partial "icons/icon" (dict "vendor" "mdi" "name" .) }}

layouts/shortcodes/card.html

@@ -0,0 +1,6 @@
+<div class="shortcode card border-primary rounded-0 hover-shadow mb-4">
+	<div class="card-body mb-0">
+	  <h4 class="card-title"><a class="text-decoration-none" href="{{ .Get `link` }}">{{ .Get "title" }}</a></h4>
+	  <a href="{{ .Get `link` }}" class="mb-0 btn btn-primary btn-sm text-decoration-none">Mehr anzeigen</a>
+	</div>
+</div>  

layouts/shortcodes/collapsible.html

@@ -0,0 +1,10 @@
+<div class="shortcode card border-primary rounded-2 hover-shadow mb-4">
+	<div class="card-body mb-0">
+	  <details>
+		<summary>{{ .Get "title" }}</summary>
+		<div class="content text-justify">
+		  <div>{{ .Inner | markdownify | emojify }}</div>
+		</div>
+	  </details>
+	</div>
+</div>

layouts/shortcodes/gallery.html

@@ -0,0 +1,19 @@
+<div class="shortcode row">
+	{{ $dir := trim (.Get "dir") "/" }}
+	{{ with $dir }}
+		{{ $files := readDir (print "/static/" .) }}
+		{{ range $files }}
+		  {{ $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
+	    {{ if $isimg }}
+	      {{ $linkURL := print (trim $.Site.BaseURL "/") "/" $dir "/" .Name | absURL }}
+        <div class="col-lg-3 col-md-4 col-sm-6">
+          <a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}">
+            <div class="ratio ratio-4x3">
+              <img class="img-thumbnail w-100 object-cover" src="{{ $linkURL }}">
+            </div>
+          </a>
+        </div>
+	    {{ end }}
+	  {{ end }}
+	{{ end }}
+</div>

layouts/shortcodes/slider.html

@@ -0,0 +1,33 @@
+{{ $dir := (.Get "dir") }}
+{{ if $dir }}
+<div class="shortcode card border-primary rounded-3">
+  <div class="carousel slide mb-0" data-bs-ride="true" id="slider-{{ md5 $dir }}">
+    {{ $images := slice }}
+    {{ range readDir (print "/static" $dir) }}
+      {{ if (lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)") }}
+        {{ $images = $images | append . }}
+      {{ end }}
+    {{ end }}
+    <div class="carousel-indicators mb-0">
+    {{ range $index, $image := $images }}
+      <button type="button mb-5" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide-to="{{ $index }}" {{ if eq $index 0 }}class="active"{{ end }}></button>
+    {{ end }}
+    </div>
+    <div class="carousel-inner mb-0">
+      {{ range $index, $image := $images }}
+        <div class="carousel-item mb-0 {{ if eq $index 0 }}active{{end}}">
+          <img src="{{ print $.Site.BaseURL $dir `/` $image.Name | absURL }}" class="d-block w-100 mb-0 rounded-3">
+        </div>
+    {{ end }}
+    </div>
+    <button class="carousel-control-prev mb-0" type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Zurück</span>
+    </button>
+    <button class="carousel-control-next mb-0" type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Vor</span>
+    </button>
+  </div>
+</div>
+{{ end }}

layouts/tour/list.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <title>Digitaler Rundgang durch das Georg-Cantor-Gymnasium</title>
+  <meta charset="utf-8">
+  <meta name="viewport"
+    content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
+  <link rel="stylesheet" href="https://assets.cantorgymnasium.de/fonts/fira/fira.css" />
+  <link rel="stylesheet" href="https://assets.cantorgymnasium.de/fonts/ubuntu/ubuntu.min.css" />
+  <link rel="stylesheet" href="https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.css" />
+  <link rel="stylesheet" href="https://assets.cantorgymnasium.de/videojs/v8/video-js.min.css"  />
+  <link rel="stylesheet" href="https://cantorgymnasium.de/css/style.min.css" />
+  <link rel="stylesheet" href="{{ (resources.Get `style.css`).Permalink }}">
+  <link rel="icon" href="https://cantorgymnasium.de/media/favicon.png" type="image/x-icon" />
+  <link rel="shortcut icon" href="https://cantorgymnasium.de/media/favicon.png" type="image/x-icon" />
+  <link rel="apple-touch-icon" sizes="120x120" href="https://cantorgymnasium.de/media/favicon.png" />
+  <link rel="apple-touch-icon" sizes="152x152" href="https://cantorgymnasium.de/media/favicon.png" />
+  <script src="https://assets.cantorgymnasium.de/jquery/v3.7/jquery.min.js"></script>
+  <script src="https://assets.cantorgymnasium.de/bootstrap/v5/js/bootstrap.bundle.min.js"></script>
+  <script src="https://assets.cantorgymnasium.de/videojs/v8/video.min.js"></script>
+  <script src="https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.js"></script>
+</head>
+
+<body class="multiple-scenes view-control-buttons">
+  <div class="preloader">
+    <div>
+      <div>
+        <img src="https://cantorgymnasium.de/media/logo_lg_white.webp" width="222px" alt="preloader">
+      </div>
+      <div>
+        <img src="https://cantorgymnasium.de/media/load.svg" width="222px" alt="preloader">
+      </div>
+    </div>
+  </div>
+
+  <div id="pano"></div>
+
+  <div id="sceneList">
+    <div class="scene" data-id="0-schulhof">
+      {{ partial "mdi" "town-hall" }}
+      <span>Schulhof</span>
+    </div>
+    <div class="scene" data-id="1-schulleiter">
+      {{ partial "mdi" "door-open" }}
+      <span>Einführung</span>
+    </div>
+    <div class="scene" data-id="2-305">
+      {{ partial "mdi" "square-root" }}
+      <span>Mathematik/Informatik</span>
+    </div>
+    <div class="scene" data-id="3-312">
+      {{ partial "mdi" "lightbulb-variant-outline" }}
+      <span>Physik</span>
+    </div>
+    <div class="scene" data-id="4-112">
+      {{ partial "mdi" "leaf" }}
+      <span>Biologie</span>
+    </div>
+    <div class="scene" data-id="5-407">
+      {{ partial "mdi" "flask" }}
+      <span>Chemie</span>
+    </div>
+    <div class="scene" data-id="6-003">
+      {{ partial "mdi" "memory" }}
+      <span>Technik</span>
+    </div>
+    <div class="scene" data-id="7-402">
+      {{ partial "mdi" "book-open-page-variant" }}
+      <span>Deutsch/Geschichte</span>
+    </div>
+    <div class="scene" data-id="8-102">
+      {{ partial "mdi" "translate" }}
+      <span>Fremdsprachen</span>
+    </div>
+    <div class="scene" data-id="9-306">
+      {{ partial "mdi" "earth" }}
+      <span>Ethik/Religion/Geographie</span>
+    </div>
+    <div class="scene" data-id="10-213">
+      {{ partial "mdi" "brush-outline" }}
+      <span>Kunst</span>
+    </div>
+    <div class="scene" data-id="11-schlercafe">
+      {{ partial "mdi" "vote-outline" }}
+      <span>Schülercaf&eacute;</span>
+    </div>
+    <div class="scene" data-id="12-205">
+      {{ partial "mdi" "crowd" }}
+      <span>Lernwerkstatt</span>
+    </div>
+    <div class="scene" data-id="13-aula">
+      {{ partial "mdi" "drama-masks" }}
+      <span>Aula</span>
+    </div>
+    <div class="scene" data-id="14-nachtpano">
+      {{ partial "mdi" "exit-run" }}
+      <span>Auf Wiedersehen!</span>
+    </div>
+    <a class="scene" href="https://cantorgymnasium.de/anmeldung/">
+      {{ partial "mdi" "form-select" }}
+      <span>Aufnahmeverfahren</span>
+    </a>
+    <a class="scene" href="https://cantorgymnasium.de/pages/impressum/">
+      {{ partial "mdi" "information-outline" }}
+      <span>Impressum</span>
+    </a>
+    <a class="scene" href="https://cantorgymnasium.de/pages/datenschutz/">
+      {{ partial "mdi" "format-section" }}
+      <span>Datenschutz</span>
+    </a>
+  </div>
+
+  <div id="titleBar">
+    <h1 class="sceneName text-white"></h1>
+  </div>
+
+  <div class="button" id="autorotateToggle">
+    {{ partial "icons/icon" (dict "vendor" "mdi" "name" "pause-circle-outline" "className" "on") }}
+    {{ partial "icons/icon" (dict "vendor" "mdi" "name" "play-circle-outline" "className" "off") }}
+  </div>
+
+  <div class="button" id="fullscreenToggle">
+    {{ partial "icons/icon" (dict "vendor" "mdi" "name" "fullscreen-exit" "className" "on") }}
+    {{ partial "icons/icon" (dict "vendor" "mdi" "name" "fullscreen" "className" "off") }}
+  </div>
+
+  <div class="button" id="sceneListToggle">
+    {{ partial "icons/icon" (dict "vendor" "mdi" "name" "backburger" "className" "on") }}
+    {{ partial "icons/icon" (dict "vendor" "mdi" "name" "forwardburger" "className" "off") }}
+  </div>
+
+  <div class="viewControlButtons">
+    <div class="button viewControlButton" id="viewUp">
+      {{ partial "mdi" "chevron-up-circle-outline" }}
+    </div>
+    <div class="button viewControlButton" id="viewDown">
+      {{ partial "mdi" "chevron-down-circle-outline" }}
+    </div>
+    <div class="button viewControlButton" id="viewLeft">
+      {{ partial "mdi" "chevron-left-circle-outline" }}
+    </div>
+    <div class="button viewControlButton" id="viewRight">
+      {{ partial "mdi" "chevron-right-circle-outline" }}
+    </div>
+    <div class="button viewControlButton" id="viewIn">
+      {{ partial "mdi" "magnify-plus-outline" }}
+    </div>
+    <div class="button viewControlButton" id="viewOut">
+      {{ partial "mdi" "magnify-minus-outline" }}
+    </div>
+  </div>
+
+  <div class="modal modal-lg" id="modal-intro" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">{{ .Title }}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="content">
+            {{ .Content }}
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-primary" data-bs-target="#modal-video" data-bs-toggle="modal">{{ .Params.button
+            }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal modal-lg" id="modal-video" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">{{ .Title }}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <video class="video-js vjs-fluid" controls src="{{ .Params.video }}" data-setup='{}'></video>
+      </div>
+    </div>
+  </div>
+
+  <script src="{{ (resources.Get `marzipano.js` | minify).Permalink }}"></script>
+  <script type="module" src="{{ (resources.Get `index.js` | js.Build | minify).Permalink }}"></script>
+</body>
+
+</html>