Initialize reverse proxy and TLS workshop lab setup

2026-03-07 17:21:22 +01:00
commit 3047413a41
22 changed files with 2062 additions and 0 deletions
@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HTL Reverse Proxy Lab</title>
+    <style>
+      :root {
+        --bg: #081825;
+        --panel: #10273d;
+        --panel-soft: #163450;
+        --text: #e9f2fb;
+        --muted: #b7cbdf;
+        --accent: #4ecdc4;
+        --line: #315678;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        font-family: "Fira Sans", "Segoe UI", sans-serif;
+        color: var(--text);
+        background:
+          radial-gradient(circle at 100% 0%, #1f4060 0%, transparent 45%),
+          radial-gradient(circle at 0% 100%, #14324a 0%, transparent 35%),
+          var(--bg);
+        min-height: 100vh;
+        padding: 1.2rem;
+      }
+
+      main {
+        width: min(1100px, 100%);
+        margin: 0 auto;
+        display: grid;
+        gap: 1rem;
+      }
+
+      .panel {
+        background: var(--panel);
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        padding: 1.1rem;
+      }
+
+      h1,
+      h2,
+      h3 {
+        margin-top: 0;
+      }
+
+      p,
+      li {
+        color: var(--muted);
+        line-height: 1.5;
+      }
+
+      code {
+        background: #0d1f31;
+        border: 1px solid #2d4f6e;
+        border-radius: 6px;
+        padding: 0.1rem 0.35rem;
+      }
+
+      a {
+        color: var(--accent);
+      }
+
+      .links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+
+      .pill {
+        display: inline-block;
+        text-decoration: none;
+        background: #11314b;
+        border: 1px solid #2a5d84;
+        border-radius: 999px;
+        padding: 0.35rem 0.75rem;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        gap: 0.8rem;
+      }
+
+      .card {
+        background: var(--panel-soft);
+        border: 1px solid #2d5577;
+        border-radius: 12px;
+        padding: 0.9rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section class="panel">
+        <h1>HTL Reverse Proxy & TLS Lab</h1>
+        <p>
+          Basis läuft mit HTTP. Ziel im Workshop: Reverse Proxy verstehen und HTTPS/TLS manuell
+          aufbauen.
+        </p>
+        <div class="links">
+          <a class="pill" href="/service/a">Backend A</a>
+          <a class="pill" href="/service/b">Backend B</a>
+          <a class="pill" href="/challenges.html">Challenges</a>
+          <a class="pill" href="/hints.html">Hints</a>
+          <a class="pill" href="/solutions.html">Solutions</a>
+        </div>
+      </section>
+
+      <section class="panel">
+        <h2>Setup Quickcheck</h2>
+        <ul>
+          <li><code>curl http://localhost:8080/service/a</code></li>
+          <li><code>curl http://localhost:8080/service/b</code></li>
+          <li><code>./scripts/compose.sh ps</code></li>
+        </ul>
+      </section>
+
+      <section class="panel">
+        <h2>Saubere Struktur</h2>
+        <div class="grid">
+          <article class="card">
+            <h3>Challenges</h3>
+            <ul>
+              <li>Aufgaben mit Ziel und Anforderungen</li>
+              <li>Done-Checks pro Aufgabe</li>
+              <li>Fokus: Reverse Proxy + TLS</li>
+            </ul>
+          </article>
+          <article class="card">
+            <h3>Hints</h3>
+            <ul>
+              <li>Kompakte Hilfe fuer Blocker</li>
+              <li>Easy-RSA / CA Import</li>
+              <li>Wireshark Filter</li>
+            </ul>
+          </article>
+          <article class="card">
+            <h3>Solutions</h3>
+            <ul>
+              <li>Konkrete Musterloesungen</li>
+              <li>Snippets fuer Nginx/Compose</li>
+              <li>Korrekturhilfe</li>
+            </ul>
+          </article>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>