108 lines
5.0 KiB
HTML
108 lines
5.0 KiB
HTML
<!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 & Libraries</div>
|
||
<div class="label lbl-frameworks">Frontend / Backend Frameworks</div>
|
||
<div class="label lbl-bundlers">Bundler & 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>
|