Init repository

2 years ago · e023b9df8b
commit e023b9df8b
5 changed files with 143 additions and 0 deletions
--- a/css/bootstrap.min.css
+++ b/css/bootstrap.min.css
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,49 @@
+section {
+  margin-top: 60px;
+  margin-bottom: 60px;
+}
+
+h1,h2 {
+  padding: 1em;
+}
+
+@media (min-width:576px) {
+ .container,
+ .container-sm {
+  max-width:540px
+ }
+}
+@media (min-width:768px) {
+ .container,
+ .container-md,
+ .container-sm {
+  max-width:720px
+ }
+}
+@media (min-width:992px) {
+ .container,
+ .container-lg,
+ .container-md,
+ .container-sm {
+  max-width:960px
+ }
+}
+@media (min-width:1200px) {
+ .container,
+ .container-lg,
+ .container-md,
+ .container-sm,
+ .container-xl {
+  max-width:720px
+ }
+}
+@media (min-width:1400px) {
+ .container,
+ .container-lg,
+ .container-md,
+ .container-sm,
+ .container-xl,
+ .container-xxl {
+  max-width:720px;
+ }
+}
--- a/img/schiff.png
+++ b/img/schiff.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+    <link href="/css/style.css" rel="stylesheet">
+
+    <title>Virtuelle Predigerkirche</title>
+  </head>
+  <body>
+    <section class="container">
+      <center><h1>Virtuelle Predigerkirche</h1></center>
+      <noscript>
+        <div class="alert alert-danger">
+          Dein JavaScript ist dekativiert. Die Virtuelle Predigerkirche ist ein Spiel in deinem Browser. Aus diesem Grund musst du JavaScript aktiviert haben.
+        </div>
+      </noscript>
+      <img src="/img/schiff.png" class="img-fluid">
+    </section>
+
+    <section class="container">
+      <p>Du benötigst zum spielen eine Tastatur. Bewegen kannst du dich mit W,A,S,D oder den Pfeiltasten.</p>
+      <div class="d-grid gap-2">
+        <a href="https://play.world.fem-net.de/_/global/prediger.riese.space/map/mes.json" class="btn btn-primary btn-lg">Play</a>
+      </div>
+    </section>
+
+    <section class="container">
+      <h2>Konfi Welt</h2>
+      <p>Den Code für die Konfi Welt bekommst du von deiner Gruppenleitung.</p>
+      <div class="input-group mb-3 has-validation">
+        <input type="text" class="form-control" placeholder="Welt-Code" id="konfi-code" required>
+        <button class="btn btn-outline-secondary" type="button" id="konfi-button">Play</button>
+        <div class="valid-feedback">
+          Der Welt-Code sieht gut aus :D
+        </div>
+        <div class="invalid-feedback">
+          Der Welt-Code ist nicht erlaubt.
+        </div>
+      </div>
+    </section>
+
+    <script src="/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
+    <script>
+      var konfi_button = document.getElementById("konfi-button");
+      var konfi_code = document.getElementById("konfi-code");
+
+      var valid_world_code = (world_code) => {
+        let re = /^[a-zA-Z0-9]+$/;
+        return re.test(world_code);
+      }
+
+      konfi_button.addEventListener("click", () => {
+        if (valid_world_code(konfi_code.value)) {
+          location.href = "https://play.world.fem-net.de/_/" + konfi_code.value + "/prediger.riese.space/map/konfi.json";
+          konfi_code.classList.remove("is-invalid");
+          konfi_code.classList.add("is-valid");
+        }
+        else {
+          konfi_code.classList.remove("is-valid");
+          konfi_code.classList.add("is-invalid");
+        }
+      });
+
+      konfi_code.addEventListener("change", () => {
+        if (valid_world_code(konfi_code.value)) {
+          konfi_code.classList.remove("is-invalid");
+          konfi_code.classList.add("is-valid");
+        }
+        else {
+          konfi_code.classList.remove("is-valid");
+          konfi_code.classList.add("is-invalid");
+        }
+      })
+    </script>
+
+  </body>
+</html>
--- a/js/bootstrap.bundle.min.js
+++ b/js/bootstrap.bundle.min.js