Add tutorial board page

a2b378d2 · Jonas Zohren · 4d01f88b · a2b378d2 · a2b378d2 · a2b378d2
Commit a2b378d2 authored 4 years ago by Jonas Zohren
--- a/public/images/tutorial_01.png
+++ b/public/images/tutorial_01.png
--- a/public/images/tutorial_02.png
+++ b/public/images/tutorial_02.png
--- a/public/images/tutorial_03.png
+++ b/public/images/tutorial_03.png
--- a/public/images/tutorial_04.png
+++ b/public/images/tutorial_04.png
--- a/public/infobrett-entrypoint.html
+++ b/public/infobrett-entrypoint.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <title>OH14 Work Adventure Infoboard entrypoint</title>
+
+    <link rel="icon" type="image/png" href="./favicon.png" />
+    <link rel="stylesheet" href="./global.css" />
+</head>
+
+<body>
+    <main>
+        <article>
+            <h3>Willkommen auf dem <i>Work Adventure</i> der Fachschaft!</h3>
+            <p>
+                Hier eine kurze Benutzungsanleitung:
+            <ul>
+                <li>
+                    Mit den WASD-Tasten kannst du dich bewegen. Du hast es ja bereits hier her geschafft.
+                </li>
+                <li>
+                    Solltest du anderen Spielern begegnen, erscheint ein Kreis um euch und ihr könnt euch sehen und
+                    miteinander sprechen.
+                    <br>
+                    <img src="./images/tutorial_01.png" alt="" style="max-height: 25rem;">
+                </li>
+                <li>
+                    Das funktioniert mit bis zu 4 Leuten, danach wird der Kreis rot und keine weitere Leute können der
+                    Unterhaltung beitreten.
+                    <br>
+                    <img src="./images/tutorial_02.png" alt="" style="max-height: 25rem;">
+                </li>
+                <li>
+                    Größere Unterhaltungen können in Zonen geführt werden, die durch das Kamera-mit-Menschen-Symbol
+                    markiert sind. Bleibt ihr dort stehen, tretet ihr einem Jitsi-Video-Meeting bei.
+                    <br>
+                    <img src="./images/tutorial_03.png" alt="" style="max-height: 25rem;">
+                </li>
+                <li>
+                    Fenster, die sich über den rechten Bildschirmteil legen (wie dieses hier oder ein
+                    Jitsi-Video-Meeting), könnt ihr schließen, in dem ihr in der
+                    rechten oberen Bildschirmecke auf das kleine X klickt.
+                    Danach solltet ihr euch wieder frei bewegen können.
+                    <br>
+                    <img src="./images/tutorial_04.png" alt="" style="max-height: 25rem;">
+                </li>
+            </ul>
+            </p>
+        </article>
+    </main>
+</body>
+
+</html>
\ No newline at end of file