125 lines
4.7 KiB
HTML
125 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>TypeScript → JavaScript Compilation</title>
|
|
<style>
|
|
:root {
|
|
--dark: #1a1a2e;
|
|
--muted: #6b7280;
|
|
--border: #cbd5e1;
|
|
--bg-soft: #f8fafc;
|
|
--ts: #3178c6;
|
|
--js: #f7df1e;
|
|
--remove: #dc2626;
|
|
}
|
|
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; }
|
|
|
|
.panels { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: start; gap: 0; }
|
|
|
|
.panel { border: 2px solid var(--border); border-radius: 10px; overflow: hidden; }
|
|
.panel-head {
|
|
padding: 8px 14px; font-size: 0.78rem; font-weight: 700;
|
|
text-transform: uppercase; letter-spacing: 0.07em;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.panel-body { padding: 14px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
|
|
|
|
.ts .panel-head { background: var(--ts); color: #fff; }
|
|
.strip .panel-head { background: #fee2e2; color: var(--remove); }
|
|
.js .panel-head { background: var(--js); color: var(--dark); }
|
|
|
|
pre {
|
|
margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
|
font-size: 0.78rem; line-height: 1.65; white-space: pre;
|
|
}
|
|
.removed { color: var(--remove); text-decoration: line-through; background: #fee2e2; border-radius: 2px; }
|
|
.kept { color: #166534; }
|
|
.kw { color: var(--ts); }
|
|
.kw-js { color: #ca8a04; }
|
|
.type-ann{ color: #7c3aed; }
|
|
.str { color: #16a34a; }
|
|
.fn { color: #0369a1; }
|
|
|
|
.arrow-col {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
justify-content: center; padding-top: 52px; gap: 4px;
|
|
}
|
|
.arrow-shaft { width: 2px; height: 32px; background: var(--muted); }
|
|
.arrow-head { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--muted); }
|
|
.arrow-label { font-size: 0.68rem; color: var(--muted); writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.05em; margin-top: 4px; white-space: nowrap; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>TypeScript → JavaScript Compilation</h1>
|
|
<p class="sub">Der TypeScript-Compiler entfernt alle Typ-Annotationen — nur JavaScript bleibt</p>
|
|
|
|
<div class="panels">
|
|
|
|
<!-- TypeScript -->
|
|
<div class="panel ts">
|
|
<div class="panel-head">📘 TypeScript-Datei</div>
|
|
<div class="panel-body">
|
|
<pre><span class="kw">type</span> <span class="type-ann">Result</span> = <span class="str">"pass"</span> | <span class="str">"fail"</span>;
|
|
|
|
<span class="kw">function</span> <span class="fn">verify</span>(result: <span class="type-ann">Result</span>) {
|
|
<span class="kw">if</span> (result === <span class="str">"pass"</span>) {
|
|
console.<span class="fn">log</span>(<span class="str">"Passed"</span>);
|
|
} <span class="kw">else</span> {
|
|
console.<span class="fn">log</span>(<span class="str">"Failed"</span>);
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Arrow 1 -->
|
|
<div class="arrow-col">
|
|
<div class="arrow-shaft"></div>
|
|
<div class="arrow-head"></div>
|
|
<div class="arrow-label">tsc</div>
|
|
</div>
|
|
|
|
<!-- Strip phase -->
|
|
<div class="panel strip">
|
|
<div class="panel-head">✂️ Typen werden entfernt</div>
|
|
<div class="panel-body">
|
|
<pre><span class="removed">type Result = "pass" | "fail";</span>
|
|
|
|
<span class="kw">function</span> <span class="fn">verify</span>(result<span class="removed">: Result</span>) {
|
|
<span class="kw">if</span> (result === <span class="str">"pass"</span>) {
|
|
console.<span class="fn">log</span>(<span class="str">"Passed"</span>);
|
|
} <span class="kw">else</span> {
|
|
console.<span class="fn">log</span>(<span class="str">"Failed"</span>);
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Arrow 2 -->
|
|
<div class="arrow-col">
|
|
<div class="arrow-shaft"></div>
|
|
<div class="arrow-head"></div>
|
|
<div class="arrow-label">output</div>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<div class="panel js">
|
|
<div class="panel-head">📄 JavaScript-Datei</div>
|
|
<div class="panel-body">
|
|
<pre><span class="kw-js">function</span> <span class="fn">verify</span>(result) {
|
|
<span class="kw-js">if</span> (result === <span class="str">"pass"</span>) {
|
|
console.<span class="fn">log</span>(<span class="str">"Passed"</span>);
|
|
} <span class="kw-js">else</span> {
|
|
console.<span class="fn">log</span>(<span class="str">"Failed"</span>);
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|