add dark mode js demo on chapter 3 slide

2026-04-20 12:54:52 +02:00
parent 0367f07166
commit 754ff9436c
4 changed files with 85 additions and 0 deletions
--- a/slides/223015c/assets/demos/js-darkmode-frame.html
+++ b/slides/223015c/assets/demos/js-darkmode-frame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: Dark Mode</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/darkmode.html</span>
+    </div>
+    <iframe src="./js-darkmode.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
--- a/slides/223015c/assets/demos/js-darkmode.html
+++ b/slides/223015c/assets/demos/js-darkmode.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Dark Mode Toggle</title>
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      padding: 1.5rem;
+      transition: background .2s, color .2s;
+    }
+    button {
+      font: inherit;
+      padding: 8px 16px;
+      border: 1px solid #9ca3af;
+      border-radius: 6px;
+      background: #f3f4f6;
+      cursor: pointer;
+    }
+    .dark-mode {
+      background: #1a1a1a;
+      color: #eee;
+    }
+    .dark-mode button {
+      background: #2a2a2a;
+      color: #eee;
+      border-color: #555;
+    }
+    h2 { margin-top: 0; }
+  </style>
+</head>
+<body class="dark-mode">
+  <h2>Hallo Welt!</h2>
+  <p>Diese Seite wechselt zwischen hellem und dunklem Modus.</p>
+  <button id="darkModeToggle">☀️ Light Mode</button>
+  <script>
+    const toggleButton = document.querySelector("#darkModeToggle");
+    const body = document.body;
+    toggleButton.addEventListener("click", () => {
+      body.classList.toggle("dark-mode");
+      if (body.classList.contains("dark-mode")) {
+        toggleButton.textContent = "☀️ Light Mode";
+      } else {
+        toggleButton.textContent = "🌙 Dark Mode";
+      }
+    });
+  </script>
+</body>
+</html>
--- a/slides/223015c/assets/demos/js-darkmode.png
+++ b/slides/223015c/assets/demos/js-darkmode.png