07_js-debug/uebungen/u04_dry-benutzerzugang/index.html

@@ -1,13 +1,28 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Advanced If-Else Statements (Enhanced Nesting)</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
+    <title>Übung 4: Benutzerzugang verwalten</title>
   </head>
   <body>
-    <h1>Advanced If-Else Statements (Enhanced Nesting)</h1>
-
+    <main>
+      <div class="container py-5">
+        <h1>Advanced If-Else Statements (Enhanced Nesting)</h1>
+        <hr />
+        <div class="alert alert-primary">
+          <h2>Übung 4: Benutzerzugang verwalten</h2>
+          <p>
+            In dieser Übung ist es deine Aufgabe, den folgenden Code zu vereinfachen und dabei alle Techniken und
+            Prinzipien anzuwenden, die du bisher gelernt hast. Der vorgegebene Code simuliert ein
+            Benutzerverwaltungssystem mit verschiedenen Berechtigungen und Zuständen. Dein Ziel ist es, die Funktion
+            <code>manageUserAccess</code> zu überarbeiten, um die Logik sauberer und lesbarer zu machen, indem du die
+            Komplexität der verschachtelten Bedingungen reduzierst.
+          </p>
+        </div>
+      </div>
+    </main>
     <script>
       'use strict';