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

a11y feinschliff, hex-dec-table neu, operable-folie verbessert, anatomie klausur

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-22 11:54:51 +02:00
parent ec800d28ae
commit 79aaa14c29
5 changed files with 108 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
slides/223015c/assets/demos/hex-dec-table.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Hex → Dezimal</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
body { padding: 28px; }
h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
.sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
thead th { background: #1a1a2e; color: #fff; }
tbody th { background: #334155; color: #fff; font-weight: 600; }
tbody td.ascii { background: #f3f4f6; }
tbody td.nonascii { background: #fff; color: #6b7280; }
.corner { background: #0f0f23; color: #d63384; }
.legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
.sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
.example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
</style>
</head>
<body>
<h1>Hex → Dezimal</h1>
<div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
<table>
<thead>
<tr>
<th class="corner">×16 / +</th>
<th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
<th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="legend">
<span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
<span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
</div>
<div class="example">
<strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
</div>
<script>
const rows = '0123456789ABCDEF';
const tb = document.querySelector('tbody');
for (let r = 0; r < 16; r++) {
const tr = document.createElement('tr');
const th = document.createElement('th');
th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
tr.appendChild(th);
for (let c = 0; c < 16; c++) {
const td = document.createElement('td');
const v = r*16 + c;
td.textContent = v;
td.className = v <= 127 ? 'ascii' : 'nonascii';
tr.appendChild(td);
}
tb.appendChild(tr);
}
</script>
</body>
</html>