public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dhbw: neuer kurs technik I — 4 kapitel + demo assets

Browse Source
This commit is contained in:
Michael Czechowski
2026-05-04 20:05:46 +02:00
parent 5c419c9ed1
commit 841a7ced76
19 changed files with 1967 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
slides/dhbw/assets/demos/web-ecosystem-rings.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Web Ecosystem – Schichten</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: 20px 28px; display: flex; flex-direction: column; align-items: center; }
h1 { margin: 0 0 4px; font-size: 1.45rem; text-align: center; }
.sub { color: var(--muted); margin-bottom: 20px; font-size: 0.88rem; text-align: center; }
.rings-wrap { position: relative; width: 520px; height: 520px; }
.ring {
position: absolute; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
top: 50%; left: 50%; transform: translate(-50%, -50%);
}
/* layers from outside in */
.r-css-libs { width: 520px; height: 520px; background: #f0fdf4; border: 2px solid #86efac; }
.r-frameworks{ width: 400px; height: 400px; background: #eff6ff; border: 2px solid #93c5fd; }
.r-bundlers { width: 290px; height: 290px; background: #fdf4ff; border: 2px solid #d8b4fe; }
.r-postcss { width: 196px; height: 196px; background: #fff7ed; border: 2px solid #fdba74; }
.r-core { width: 116px; height: 116px; background: var(--dark); border: none; color: #fff; flex-direction: column; gap: 2px; text-align: center; }
.r-core span { font-size: 0.72rem; font-weight: 700; line-height: 1.3; }
/* floating labels */
.label {
position: absolute; font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
background: rgba(255,255,255,0.85); padding: 2px 7px;
border-radius: 99px; white-space: nowrap;
}
/* ring label positions — top of each ring */
.lbl-css-libs { top: 12px; left: 50%; transform: translateX(-50%); color: #16a34a; }
.lbl-frameworks { top: 72px; left: 50%; transform: translateX(-50%); color: #2563eb; }
.lbl-bundlers { top: 128px; left: 50%; transform: translateX(-50%); color: #7c3aed; }
.lbl-postcss { top: 178px; left: 50%; transform: translateX(-50%); color: #ea580c; }
/* item pills scattered in each ring band */
.pill {
position: absolute; font-size: 0.7rem; font-weight: 600;
padding: 3px 9px; border-radius: 99px; white-space: nowrap;
background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.10);
}
</style>
</head>
<body>
<h1>Web Ecosystem – Schichten</h1>
<p class="sub">Von innen nach außen: Kern → Standards → Werkzeuge → Frameworks → CSS-Utilities</p>
<div class="rings-wrap">
<!-- Rings (painted back-to-front) -->
<div class="ring r-css-libs"></div>
<div class="ring r-frameworks"></div>
<div class="ring r-bundlers"></div>
<div class="ring r-postcss"></div>
<div class="ring r-core">
<span>JS</span>
<span>HTML</span>
<span>CSS</span>
</div>
<!-- Ring labels -->
<div class="label lbl-css-libs">CSS Utilities &amp; Libraries</div>
<div class="label lbl-frameworks">Frontend / Backend Frameworks</div>
<div class="label lbl-bundlers">Bundler &amp; Build Tools</div>
<div class="label lbl-postcss">PostCSS / Preprocessors</div>
<!-- CSS Libs band (outer ring) -->
<div class="pill" style="top:52px; left:30px; color:#16a34a;">Tailwind</div>
<div class="pill" style="top:60px; right:24px; color:#16a34a;">Bootstrap</div>
<div class="pill" style="bottom:52px;left:38px; color:#16a34a;">shadcn/ui</div>
<div class="pill" style="bottom:56px;right:28px;color:#16a34a;">Pico CSS</div>
<div class="pill" style="top:50%; left:4px; transform:translateY(-50%); color:#16a34a;">UnoCSS</div>
<div class="pill" style="top:50%; right:4px; transform:translateY(-50%); color:#16a34a;">DaisyUI</div>
<!-- Frameworks band -->
<div class="pill" style="top:88px; left:86px; color:#2563eb;">React</div>
<div class="pill" style="top:88px; right:72px; color:#2563eb;">Vue</div>
<div class="pill" style="bottom:88px;left:72px; color:#2563eb;">Svelte</div>
<div class="pill" style="bottom:88px;right:60px;color:#2563eb;">Angular</div>
<div class="pill" style="top:42%; left:60px; color:#2563eb;">Next.js</div>
<div class="pill" style="top:56%; left:60px; color:#2563eb;">Express</div>
<div class="pill" style="top:46%; right:54px; color:#2563eb;">Nuxt</div>
<div class="pill" style="top:58%; right:54px; color:#2563eb;">Fastify</div>
<!-- Bundlers band -->
<div class="pill" style="top:148px; left:145px; color:#7c3aed;">Vite</div>
<div class="pill" style="top:148px; right:132px;color:#7c3aed;">Webpack</div>
<div class="pill" style="bottom:145px;left:134px;color:#7c3aed;">esbuild</div>
<div class="pill" style="bottom:145px;right:120px;color:#7c3aed;">Rollup</div>
<!-- PostCSS band -->
<div class="pill" style="top:196px; left:50%; transform:translateX(-50%); color:#ea580c;">PostCSS</div>
<div class="pill" style="bottom:196px;left:50%;transform:translateX(-50%); color:#ea580c;">Sass / SCSS</div>
</div>
</body>
</html>