Aufgaben-Python/courses/html_css/15_moderne_ui_komponenten/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <link rel="icon" type="image/svg+xml" href="../../../assets/favicon.svg">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 15: Moderne UI-Komponenten &amp; Glassmorphism</title>
  <link rel="stylesheet" href="../../../assets/style.css">
  <style>
    .glass-preview-container {
      background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #3b82f6 100%);
      padding: 36px;
      border-radius: var(--radius-md);
      margin: 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .glass-preview-card {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: var(--radius-md);
      padding: 24px;
      color: white;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
      max-width: 400px;
    }
  </style>
</head>
<body>
  <div class="app-layout">
    <div class="app-main">
      <header>
        <div class="header-container">
          <div class="header-badge">💎 Lehrpfad 4: CSS-Architektur &amp; UI Master</div>
          <h1>CSS 15: Moderne UI-Komponenten &amp; Glassmorphism</h1>
          <p>Erschaffe High-End Web-Designs: Glassmorphism mit backdrop-filter, native Dialog-Modals, Pure-CSS Tooltips und Badge-Systeme.</p>
        </div>
      </header>

      <main class="container">
        <!-- 1. GLASSMORPHISM PREVIEW -->
        <section class="card">
          <h2>🔮 1. Der Glassmorphism-Effekt</h2>
          <p>Glassmorphism erzeugt eine futuristische Milchglas-Optik, indem es den darunterliegenden Hintergrund weichzeichnet:</p>

          <div class="glass-preview-container">
            <div class="glass-preview-card">
              <div style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9;">✦ FROSTED GLASS UI</div>
              <h3 style="font-size: 1.3rem; margin: 6px 0;">Glassmorphism Card</h3>
              <p style="font-size: 0.9rem; opacity: 0.95;">Lichtbrechung und Transparenz ganz ohne Grafikprogramm – direkt in nativem CSS.</p>
            </div>
          </div>

          <pre><code>.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}</code></pre>
        </section>

        <!-- 2. NATIVE DIALOGE & TOOLTIPS -->
        <section class="card">
          <h2>💬 2. Natives HTML5 &lt;dialog&gt; &amp; CSS Tooltips</h2>
          <p>Keine schweren JavaScript-Plugins mehr: Das HTML5 <code>&lt;dialog&gt;</code> Element bringt Barrierefreiheit und <code>::backdrop</code> out of the box mit.</p>

          <pre><code>/* 🎯 Modal-Hintergrund abdunkeln und weichzeichnen: */
dialog::backdrop {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
}

/* 🎯 Pure CSS Tooltip über data-tooltip: */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-tooltip]:hover::after {
  opacity: 1;
}</code></pre>

          <div class="box box-analogie">
            <div class="box-title">🪟 Didaktische Analogie: Das Milchglasfenster</div>
            <p>Ein normales Fensterglas lässt alles scharf durch (normale `opacity`). <strong>Backdrop-Filter</strong> wirkt wie ein Milchglasfenster mit Regentropfen: Licht und Farben schimmern durch, aber die Details dahinter verschwimmen in einem sanften Glow.</p>
          </div>
        </section>

        <!-- 3. AUFGABEN CHECKLISTE -->
        <section class="card">
          <h2>🎯 Aufgaben &amp; Checkliste in <code>aufgabe.html</code></h2>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t1">
            <label class="task-label" for="t1"><strong>TODO 1:</strong> <code>.glass-card</code> mit <code>backdrop-filter: blur(16px)</code>, Transparenz und Glaskante stylen.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t2">
            <label class="task-label" for="t2"><strong>TODO 2:</strong> <code>dialog</code> und Pseudo-Element <code>dialog::backdrop</code> mit Weichzeichner ausstatten.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t3">
            <label class="task-label" for="t3"><strong>TODO 3:</strong> Pure-CSS Tooltip mit <code>[data-tooltip]::after</code> umsetzen.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t4">
            <label class="task-label" for="t4"><strong>TODO 4:</strong> Modernes Badge-System mit <code>.badge</code> und Varianten definieren.</label>
          </div>

          <div style="margin-top: 25px; display: flex; gap: 12px; flex-wrap: wrap;">
            <a href="../../../workspace.html?course=html_css&track=track_4_modern_ui_and_master&chapter=15_moderne_ui_komponenten" class="btn" style="background: #ec4899; color: #fff; font-weight: 700;">💻 In Web-IDE öffnen &rarr;</a>
            <a href="../14_dark_mode_und_themes/index.html" class="btn btn-secondary">&larr; Zurück zu CSS 14</a>
            <a href="../16_master_abschlussprojekt_saas_landingpage/index.html" class="btn btn-secondary">Weiter zum Master-Projekt (CSS 16) &rarr;</a>
          </div>
        </section>
      </main>
    </div>
  </div>
</body>
</html>