uni/slides/dhbw-2026/assets/demos/js-frameworks-overview.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>JavaScript Frameworks – Übersicht</title>
<style>
  :root {
    --dark: #1a1a2e;
    --muted: #6b7280;
  }
  html, body { margin: 0; padding: 0; background: #fff; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
  body { padding: 24px 28px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  h1 { margin: 0 0 4px; font-size: 1.45rem; text-align: center; }
  .sub { color: var(--muted); margin-bottom: 24px; font-size: 0.88rem; text-align: center; }

  .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

  .col {
    border-radius: 12px; padding: 18px 12px 16px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .col.active { outline: 2px solid var(--dark); outline-offset: 2px; }

  .col-title {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--dark); text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.12); padding-bottom: 8px; margin-bottom: 2px;
  }
  .items { display: flex; flex-direction: column; gap: 6px; }
  .item {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.82rem; font-weight: 600;
  }
  .item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .item .note { font-size: 0.7rem; font-weight: 400; color: var(--muted); display: block; }

  .css-col    { background: #f1f5f9; }
  .fe-col     { background: #fce7f3; }
  .render-col { background: #ede9fe; }
  .build-col  { background: #dbeafe; }
  .be-col     { background: #d1fae5; }
</style>
</head>
<body>
  <h1>JavaScript Frameworks – Übersicht</h1>
  <p class="sub">Kategorien des modernen JS-Ökosystems</p>

  <div class="grid">

    <div class="col css-col">
      <div class="col-title">CSS Frameworks</div>
      <div class="items">
        <div class="item"><div class="dot" style="background:#38bdf8"></div><span>Tailwind CSS<span class="note">Utility-first</span></span></div>
        <div class="item"><div class="dot" style="background:#7c3aed"></div><span>Bootstrap<span class="note">Komponenten</span></span></div>
        <div class="item"><div class="dot" style="background:#e879f9"></div><span>Pico CSS<span class="note">Classless</span></span></div>
        <div class="item"><div class="dot" style="background:#f97316"></div><span>UnoCSS<span class="note">Atomic</span></span></div>
      </div>
    </div>

    <div class="col fe-col">
      <div class="col-title">Frontend Frameworks</div>
      <div class="items">
        <div class="item"><div class="dot" style="background:#61dafb"></div><span>React<span class="note">Meta / Virtual DOM</span></span></div>
        <div class="item"><div class="dot" style="background:#ff3e00"></div><span>Svelte<span class="note">Compiler-based</span></span></div>
        <div class="item"><div class="dot" style="background:#42b883"></div><span>Vue<span class="note">Progressive</span></span></div>
        <div class="item"><div class="dot" style="background:#dd0031"></div><span>Angular<span class="note">Google / Full</span></span></div>
      </div>
    </div>

    <div class="col render-col">
      <div class="col-title">Rendering Frameworks</div>
      <div class="items">
        <div class="item"><div class="dot" style="background:#000"></div><span>Next.js<span class="note">React / SSR</span></span></div>
        <div class="item"><div class="dot" style="background:#ff3e00"></div><span>SvelteKit<span class="note">Svelte / SSR</span></span></div>
        <div class="item"><div class="dot" style="background:#42b883"></div><span>Nuxt<span class="note">Vue / SSR</span></span></div>
        <div class="item"><div class="dot" style="background:#ff5d01"></div><span>Astro<span class="note">Islands Arch.</span></span></div>
        <div class="item"><div class="dot" style="background:#0ea5e9"></div><span>Gatsby<span class="note">React / SSG</span></span></div>
      </div>
    </div>

    <div class="col build-col">
      <div class="col-title">Build Tools &amp; Bundler</div>
      <div class="items">
        <div class="item"><div class="dot" style="background:#646cff"></div><span>Vite<span class="note">Dev-Server / HMR</span></span></div>
        <div class="item"><div class="dot" style="background:#2b3a42"></div><span>Webpack<span class="note">Bundler</span></span></div>
        <div class="item"><div class="dot" style="background:#f9b640"></div><span>esbuild<span class="note">Go / ultra-fast</span></span></div>
        <div class="item"><div class="dot" style="background:#3178c6"></div><span>tsc<span class="note">TypeScript</span></span></div>
        <div class="item"><div class="dot" style="background:#cc3534"></div><span>Rollup<span class="note">Libraries</span></span></div>
      </div>
    </div>

    <div class="col be-col active">
      <div class="col-title">Backend Frameworks</div>
      <div class="items">
        <div class="item"><div class="dot" style="background:#68a063"></div><span>Express<span class="note">Minimal / de-facto</span></span></div>
        <div class="item"><div class="dot" style="background:#3178c6"></div><span>Fastify<span class="note">Performant</span></span></div>
        <div class="item"><div class="dot" style="background:#5a45ff"></div><span>AdonisJS<span class="note">Full-stack</span></span></div>
        <div class="item"><div class="dot" style="background:#e11d48"></div><span>NestJS<span class="note">Angular-style</span></span></div>
        <div class="item"><div class="dot" style="background:#000"></div><span>Hono<span class="note">Edge-ready</span></span></div>
      </div>
    </div>

  </div>
</body>
</html>