branch-coexist: 3 neue decks 223015b-2026 / 223015c-2026 / dhbw-2026 daneben main
per user-request einen branch der main-content UND rewrite-content trägt — saubere separierung statt symlink/merge-conflict. struktur: - slides/<course>/ → main-content restored, eigene assets (kein new-demo-leak) - slides/<course>-2026/ → rewrite-content, eigene assets (komplett kopiert + new demos) Makefile: COURSES += 223015b-2026 223015c-2026 dhbw-2026 mit eigenen NAME/KAPITEL/DEPLOY/KLAUSUR-konfig. Klausur für b+c=1, dhbw=leer. Deploy-paths /hdm/223015b-2026 etc. make build durchlaufen für alle 6 decks, 0 fehler. dedup: 223015c+dhbw assets identisch in beiden ordnern (kein neu-demos auf b ergänzt). 223015b 86 → 120 files in -2026 (= +34 neue eroeffner/usb-c-drei-achsen/container-vs-codec/etc).
This commit is contained in:
@@ -7,13 +7,13 @@
|
|||||||
# -----------------------------------------------------------------------------
|
# -----------------------------------------------------------------------------
|
||||||
# Course registry
|
# Course registry
|
||||||
# -----------------------------------------------------------------------------
|
# -----------------------------------------------------------------------------
|
||||||
COURSES = 223015b 223015c dhbw
|
COURSES = 223015b 223015c dhbw 223015b-2026 223015c-2026 dhbw-2026
|
||||||
SLIDES_DIR = slides
|
SLIDES_DIR = slides
|
||||||
DEPLOY_HOST = tengo@tuttle.uberspace.de
|
DEPLOY_HOST = tengo@tuttle.uberspace.de
|
||||||
|
|
||||||
# Per-course settings: NAME, KAPITEL, DEPLOY, PORT, KLAUSUR (1 or empty)
|
# Per-course settings: NAME, KAPITEL, DEPLOY, PORT, KLAUSUR (1 or empty)
|
||||||
223015b_NAME = Dateiformate, Schnittstellen, Speichermedien
|
223015b_NAME = Dateiformate, Schnittstellen, Speichermedien
|
||||||
223015b_KAPITEL = 00-intro 01-daten-grundlagen 02-kompression 03-inhalte-bild-audio-video 04-speicher-schnittstellen 05-distribution-metadaten klausurfolien klausurfragen
|
223015b_KAPITEL = 00-intro 01-grundlagen-text-audio 02-bild-audio-video 03-speichermedien-schnittstellen 04-distribution-apis-zukunft 05-vertiefung-offene-fragen klausurfolien klausurfragen
|
||||||
223015b_DEPLOY = /home/tengo/html/hdm/223015b
|
223015b_DEPLOY = /home/tengo/html/hdm/223015b
|
||||||
223015b_KLAUSUR = 1
|
223015b_KLAUSUR = 1
|
||||||
|
|
||||||
@@ -27,6 +27,22 @@ dhbw_KAPITEL = 01_web_eng 02_css_extended 03_nodejs_basics 04_nodejs_advanced 05
|
|||||||
dhbw_DEPLOY = /home/tengo/html/dhbw
|
dhbw_DEPLOY = /home/tengo/html/dhbw
|
||||||
dhbw_KLAUSUR =
|
dhbw_KLAUSUR =
|
||||||
|
|
||||||
|
# -- 2026-rewrite versions --------------------------------------------------
|
||||||
|
223015b-2026_NAME = Dateiformate, Schnittstellen, Speichermedien (Rewrite 2026)
|
||||||
|
223015b-2026_KAPITEL = 00-intro 01-daten-grundlagen 02-kompression 03-inhalte-bild-audio-video 04-speicher-schnittstellen 05-distribution-metadaten klausurfolien klausurfragen
|
||||||
|
223015b-2026_DEPLOY = /home/tengo/html/hdm/223015b-2026
|
||||||
|
223015b-2026_KLAUSUR = 1
|
||||||
|
|
||||||
|
223015c-2026_NAME = Internettechnologien (Rewrite 2026)
|
||||||
|
223015c-2026_KAPITEL = 00-intro 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausurfolien klausurfragen
|
||||||
|
223015c-2026_DEPLOY = /home/tengo/html/hdm/223015c-2026
|
||||||
|
223015c-2026_KLAUSUR = 1
|
||||||
|
|
||||||
|
dhbw-2026_NAME = Technik I – Grundlagen IT (Rewrite 2026)
|
||||||
|
dhbw-2026_KAPITEL = 01_web_eng 02_css_extended 03_nodejs_basics 04_nodejs_advanced 05_testing 06_typescript 07_docker 08_best_practices
|
||||||
|
dhbw-2026_DEPLOY = /home/tengo/html/dhbw-2026
|
||||||
|
dhbw-2026_KLAUSUR =
|
||||||
|
|
||||||
# Courses with klausur extraction enabled
|
# Courses with klausur extraction enabled
|
||||||
KLAUSUR_COURSES = $(foreach c,$(COURSES),$(if $($(c)_KLAUSUR),$(c),))
|
KLAUSUR_COURSES = $(foreach c,$(COURSES),$(if $($(c)_KLAUSUR),$(c),))
|
||||||
ROOT_DEPLOY = /home/tengo/html/hdm
|
ROOT_DEPLOY = /home/tengo/html/hdm
|
||||||
|
|||||||
@@ -0,0 +1,192 @@
|
|||||||
|
---
|
||||||
|
marp: true
|
||||||
|
theme: gaia
|
||||||
|
paginate: true
|
||||||
|
backgroundColor: #fff
|
||||||
|
header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
|
||||||
|
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
|
||||||
|
title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
|
||||||
|
---
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--color-foreground: #1a1a2e;
|
||||||
|
--color-highlight: #1e5f8a;
|
||||||
|
--color-dimmed: #4a4a6a;
|
||||||
|
}
|
||||||
|
section.invert {
|
||||||
|
--color-foreground: #fff;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #1e5f8a;
|
||||||
|
}
|
||||||
|
section.invert h1 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background: #0f0f23;
|
||||||
|
color: #5fb3e4;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 3px solid #1e5f8a;
|
||||||
|
}
|
||||||
|
pre code {
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
background: #0f0f23;
|
||||||
|
padding: 0.15em 0.4em;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||||||
|
}
|
||||||
|
section code:not(.hljs) { color: #5fb3e4 !important; }
|
||||||
|
section code.hljs { color: #f8f8f8 !important; }
|
||||||
|
a {
|
||||||
|
color: var(--color-highlight);
|
||||||
|
}
|
||||||
|
section.klausur {
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
135deg,
|
||||||
|
#e3f2fd,
|
||||||
|
#e3f2fd 40px,
|
||||||
|
#fff 40px,
|
||||||
|
#fff 80px
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
|
@media print {
|
||||||
|
section.klausur {
|
||||||
|
background: #e3f2fd !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
section.aufgabe {
|
||||||
|
background: #e3f2fd !important;
|
||||||
|
}
|
||||||
|
section.aufgabe footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- _class: invert -->
|
||||||
|
<!-- _header: '' -->
|
||||||
|
<!-- _backgroundColor: #000 -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
|
||||||
|
|
||||||
|
**223015b** · Modul "Technik 1" · 1. Semester
|
||||||
|
Digital- und Medienwirtschaft
|
||||||
|
Hochschule der Medien Stuttgart
|
||||||
|
|
||||||
|
**Sommersemester 2026**
|
||||||
|
|
||||||
|
[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: '' -->
|
||||||
|
<!-- _footer: '' -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _class: lead -->
|
||||||
|
|
||||||
|
# Herzlich willkommen!
|
||||||
|
## Einführung
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Über mich
|
||||||
|
|
||||||
|
**Michael Werner Czechowski**
|
||||||
|
|
||||||
|
- Systems and Platform Engineer
|
||||||
|
- Schwerpunkte:
|
||||||
|
- Web-Technologien, Barriere-Armut, Systemarchitektur, Open Source
|
||||||
|
- Hintergrund:
|
||||||
|
- Philosophie (Uni Stuttgart)
|
||||||
|
- Wirtschaftsinformatik (Leibniz-FH Hannover)
|
||||||
|
- Kontakt: lb-czechowski@hdm-stuttgart.de
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Warum dieses Modul?
|
||||||
|
|
||||||
|
**Digitale Medien sind überall.**
|
||||||
|
|
||||||
|
* Warum enthalten Fotos oft Informationen über den Aufnahmeort?
|
||||||
|
* Warum lassen sich gelöschte Dateien wiederherstellen?
|
||||||
|
* Warum benötigt eine Minute 4K-Video unkomprimiert 45 GB Speicher?
|
||||||
|
* Warum zeigt eine "1 TB"-Festplatte nur 931 GB an?
|
||||||
|
* Warum ist USB-C nicht gleich USB-C?
|
||||||
|
* Ziel: **→ Mitreden können!**
|
||||||
|
|
||||||
|
<!--
|
||||||
|
1. EXIF (Exchangeable Image File Format)-Metadaten speichern GPS-Koordinaten, Kameramodell und Zeitstempel automatisch. Die meisten wissen nicht, dass diese Daten beim Versenden mitgeschickt werden. → Kapitel 4: Metadaten
|
||||||
|
|
||||||
|
2. Beim Löschen wird nur der Verzeichniseintrag im Dateisystem entfernt, nicht die Daten selbst. Die Bits bleiben auf dem Datenträger, bis sie überschrieben werden. → Kapitel 3: Dateisysteme
|
||||||
|
|
||||||
|
3. 3840 × 2160 Pixel × 3 Byte (RGB) × 30 Bilder/Sek × 60 Sek = ~45 GB. Codecs wie H.264/H.265 komprimieren um Faktor 100+. → Kapitel 1+2: Kompression
|
||||||
|
|
||||||
|
4. Hersteller rechnen dezimal (1 TB = 10¹² Bytes), Betriebssysteme binär (1 TiB = 2⁴⁰ Bytes). Die Differenz beträgt bei Terabyte bereits ~10%. → Kapitel 1: Dateneinheiten
|
||||||
|
|
||||||
|
5. USB-C ist nur die Steckerform. Dahinter können USB 2.0 (480 Mbit/s), USB 3.2 (20 Gbit/s) oder Thunderbolt 4 (40 Gbit/s) laufen — gleiches Kabel, völlig unterschiedliche Leistung. → Kapitel 3: Schnittstellen
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Kurze Umfrage
|
||||||
|
|
||||||
|
**Bitte Hand heben:**
|
||||||
|
|
||||||
|
* Wer kennt den Unterschied zwischen analog und digital?
|
||||||
|
* Wer hat schon mal eine Datei von einem Format in ein anderes konvertiert?
|
||||||
|
* Wer hat schon mal Metadaten aus einem Foto entfernt?
|
||||||
|
* Wer hat schon mal ein Backup verloren?
|
||||||
|
* Wer hat schon mal ein Backup wiederhergestellt?
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Niveau der Gruppe einschätzen
|
||||||
|
Keine falschen Antworten
|
||||||
|
Zeigt, wo wir starten
|
||||||
|
API = Application Programming Interface
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Kursübersicht
|
||||||
|
|
||||||
|
**Kapitel:**
|
||||||
|
|
||||||
|
* 1. **Grundlagen**, Text & Audio (Bits, Bytes, Zeichenkodierung, MP3)
|
||||||
|
* 2. Bild- & Video-**Kompression** (JPEG, PNG, H.264/H.265)
|
||||||
|
* 3. **Speichermedien** & **Schnittstellen** (HDD, SSD, USB, Thunderbolt)
|
||||||
|
* 4. **Distribution** und Verteilung (Streaming, REST, Cloud)
|
||||||
|
* Vertiefung & offene Fragen
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _class: klausur -->
|
||||||
|
<!-- _header: '' -->
|
||||||
|
<!-- _footer: '' -->
|
||||||
|
<!-- _backgroundColor: #e3f2fd -->
|
||||||
|
|
||||||
|
# Prüfungsleistung
|
||||||
|
|
||||||
|
**Nach aktuellem Kenntnisstand:**
|
||||||
|
|
||||||
|
* 90 min insg. (Technik 1)
|
||||||
|
* Schriftliche Klausur (digital)
|
||||||
|
* Teils offene Fragen
|
||||||
|
* Kein Coding/Programmieren
|
||||||
|
* **Prüfungsrelevante Folien:**
|
||||||
|
- Gestreift oder Vollton (PDF) markiert
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 484 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 956 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
@@ -0,0 +1,311 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>ASCII-Tabelle</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #1e5f8a;
|
||||||
|
--dark: #1a1a2e;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--border: #cbd5e1;
|
||||||
|
--bg-soft: #f8fafc;
|
||||||
|
--c-ctrl: #e5e7eb; /* control */
|
||||||
|
--c-ctrl-text: #4b5563;
|
||||||
|
--c-space: #fef3c7; /* space */
|
||||||
|
--c-punct: #ddd6fe; /* punctuation */
|
||||||
|
--c-digit: #bfdbfe; /* digits */
|
||||||
|
--c-upper: #bbf7d0; /* uppercase */
|
||||||
|
--c-lower: #fed7aa; /* lowercase */
|
||||||
|
--c-del: #fecaca; /* DEL */
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||||
|
body { padding: 18px 24px; }
|
||||||
|
h1 { text-align: center; margin: 0 0 2px; font-size: 1.5rem; }
|
||||||
|
.sub { text-align: center; color: var(--muted); margin-bottom: 14px; font-size: 0.9rem; }
|
||||||
|
.sub strong { color: var(--dark); }
|
||||||
|
|
||||||
|
.table-wrap { display: flex; justify-content: center; }
|
||||||
|
|
||||||
|
table.ascii {
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 3px;
|
||||||
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
|
}
|
||||||
|
table.ascii th, table.ascii td {
|
||||||
|
width: 68px;
|
||||||
|
height: 60px;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
table.ascii th {
|
||||||
|
background: var(--dark); color: #fff;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 56px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
table.ascii th.row { width: 64px; }
|
||||||
|
table.ascii th .b { display: block; font-size: 0.68rem; opacity: 0.7; font-weight: 400; margin-top: 2px; letter-spacing: 0.04em; }
|
||||||
|
|
||||||
|
table.ascii td {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
td .hex { position: absolute; top: 3px; left: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 700; }
|
||||||
|
td .dec { position: absolute; bottom: 3px; right: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 400; }
|
||||||
|
td .ch { font-size: 1.45rem; font-weight: 700; line-height: 1; }
|
||||||
|
td.ctrl .ch { font-size: 0.82rem; font-weight: 700; }
|
||||||
|
td.ctrl .ch small { display: block; font-size: 0.6rem; font-weight: 400; color: var(--muted); margin-top: 2px; letter-spacing: 0; }
|
||||||
|
|
||||||
|
td.ctrl { background: var(--c-ctrl); color: var(--c-ctrl-text); }
|
||||||
|
td.space { background: var(--c-space); }
|
||||||
|
td.punct { background: var(--c-punct); }
|
||||||
|
td.digit { background: var(--c-digit); }
|
||||||
|
td.upper { background: var(--c-upper); }
|
||||||
|
td.lower { background: var(--c-lower); }
|
||||||
|
td.del { background: var(--c-del); color: var(--c-ctrl-text); }
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
margin: 14px auto 0;
|
||||||
|
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.legend .item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); }
|
||||||
|
.legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
|
||||||
|
.legend .swatch.ctrl { background: var(--c-ctrl); }
|
||||||
|
.legend .swatch.space { background: var(--c-space); }
|
||||||
|
.legend .swatch.punct { background: var(--c-punct); }
|
||||||
|
.legend .swatch.digit { background: var(--c-digit); }
|
||||||
|
.legend .swatch.upper { background: var(--c-upper); }
|
||||||
|
.legend .swatch.lower { background: var(--c-lower); }
|
||||||
|
.legend .swatch.del { background: var(--c-del); }
|
||||||
|
|
||||||
|
.meta-row {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex; gap: 18px; justify-content: center;
|
||||||
|
font-size: 0.85rem; color: var(--muted);
|
||||||
|
}
|
||||||
|
.meta-row strong { color: var(--dark); }
|
||||||
|
.meta-row code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>ASCII-Tabelle (1963) · 7 Bit · 128 Zeichen</h1>
|
||||||
|
<div class="sub">Spalte = High-Nibble (Hex 0–7) · Zeile = Low-Nibble (Hex 0–F) · <strong>Hex</strong> oben, <strong>Dezimal</strong> unten</div>
|
||||||
|
|
||||||
|
<div class="table-wrap">
|
||||||
|
<table class="ascii">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="row">↓ Low<br>→ High</th>
|
||||||
|
<th>0<span class="b">0000</span></th>
|
||||||
|
<th>1<span class="b">0001</span></th>
|
||||||
|
<th>2<span class="b">0010</span></th>
|
||||||
|
<th>3<span class="b">0011</span></th>
|
||||||
|
<th>4<span class="b">0100</span></th>
|
||||||
|
<th>5<span class="b">0101</span></th>
|
||||||
|
<th>6<span class="b">0110</span></th>
|
||||||
|
<th>7<span class="b">0111</span></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th class="row">0<span class="b">0000</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">00</span><span class="ch">NUL<small>null</small></span><span class="dec">0</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">10</span><span class="ch">DLE<small>data link esc</small></span><span class="dec">16</span></td>
|
||||||
|
<td class="space"><span class="hex">20</span><span class="ch">SP<small>space</small></span><span class="dec">32</span></td>
|
||||||
|
<td class="digit"><span class="hex">30</span><span class="ch">0</span><span class="dec">48</span></td>
|
||||||
|
<td class="punct"><span class="hex">40</span><span class="ch">@</span><span class="dec">64</span></td>
|
||||||
|
<td class="upper"><span class="hex">50</span><span class="ch">P</span><span class="dec">80</span></td>
|
||||||
|
<td class="punct"><span class="hex">60</span><span class="ch">`</span><span class="dec">96</span></td>
|
||||||
|
<td class="lower"><span class="hex">70</span><span class="ch">p</span><span class="dec">112</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">1<span class="b">0001</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">01</span><span class="ch">SOH<small>start hdr</small></span><span class="dec">1</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">11</span><span class="ch">DC1<small>XON</small></span><span class="dec">17</span></td>
|
||||||
|
<td class="punct"><span class="hex">21</span><span class="ch">!</span><span class="dec">33</span></td>
|
||||||
|
<td class="digit"><span class="hex">31</span><span class="ch">1</span><span class="dec">49</span></td>
|
||||||
|
<td class="upper"><span class="hex">41</span><span class="ch">A</span><span class="dec">65</span></td>
|
||||||
|
<td class="upper"><span class="hex">51</span><span class="ch">Q</span><span class="dec">81</span></td>
|
||||||
|
<td class="lower"><span class="hex">61</span><span class="ch">a</span><span class="dec">97</span></td>
|
||||||
|
<td class="lower"><span class="hex">71</span><span class="ch">q</span><span class="dec">113</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">2<span class="b">0010</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">02</span><span class="ch">STX<small>start txt</small></span><span class="dec">2</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">12</span><span class="ch">DC2</span><span class="dec">18</span></td>
|
||||||
|
<td class="punct"><span class="hex">22</span><span class="ch">"</span><span class="dec">34</span></td>
|
||||||
|
<td class="digit"><span class="hex">32</span><span class="ch">2</span><span class="dec">50</span></td>
|
||||||
|
<td class="upper"><span class="hex">42</span><span class="ch">B</span><span class="dec">66</span></td>
|
||||||
|
<td class="upper"><span class="hex">52</span><span class="ch">R</span><span class="dec">82</span></td>
|
||||||
|
<td class="lower"><span class="hex">62</span><span class="ch">b</span><span class="dec">98</span></td>
|
||||||
|
<td class="lower"><span class="hex">72</span><span class="ch">r</span><span class="dec">114</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">3<span class="b">0011</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">03</span><span class="ch">ETX<small>end txt</small></span><span class="dec">3</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">13</span><span class="ch">DC3<small>XOFF</small></span><span class="dec">19</span></td>
|
||||||
|
<td class="punct"><span class="hex">23</span><span class="ch">#</span><span class="dec">35</span></td>
|
||||||
|
<td class="digit"><span class="hex">33</span><span class="ch">3</span><span class="dec">51</span></td>
|
||||||
|
<td class="upper"><span class="hex">43</span><span class="ch">C</span><span class="dec">67</span></td>
|
||||||
|
<td class="upper"><span class="hex">53</span><span class="ch">S</span><span class="dec">83</span></td>
|
||||||
|
<td class="lower"><span class="hex">63</span><span class="ch">c</span><span class="dec">99</span></td>
|
||||||
|
<td class="lower"><span class="hex">73</span><span class="ch">s</span><span class="dec">115</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">4<span class="b">0100</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">04</span><span class="ch">EOT<small>end trans</small></span><span class="dec">4</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">14</span><span class="ch">DC4</span><span class="dec">20</span></td>
|
||||||
|
<td class="punct"><span class="hex">24</span><span class="ch">$</span><span class="dec">36</span></td>
|
||||||
|
<td class="digit"><span class="hex">34</span><span class="ch">4</span><span class="dec">52</span></td>
|
||||||
|
<td class="upper"><span class="hex">44</span><span class="ch">D</span><span class="dec">68</span></td>
|
||||||
|
<td class="upper"><span class="hex">54</span><span class="ch">T</span><span class="dec">84</span></td>
|
||||||
|
<td class="lower"><span class="hex">64</span><span class="ch">d</span><span class="dec">100</span></td>
|
||||||
|
<td class="lower"><span class="hex">74</span><span class="ch">t</span><span class="dec">116</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">5<span class="b">0101</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">05</span><span class="ch">ENQ<small>enquiry</small></span><span class="dec">5</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">15</span><span class="ch">NAK</span><span class="dec">21</span></td>
|
||||||
|
<td class="punct"><span class="hex">25</span><span class="ch">%</span><span class="dec">37</span></td>
|
||||||
|
<td class="digit"><span class="hex">35</span><span class="ch">5</span><span class="dec">53</span></td>
|
||||||
|
<td class="upper"><span class="hex">45</span><span class="ch">E</span><span class="dec">69</span></td>
|
||||||
|
<td class="upper"><span class="hex">55</span><span class="ch">U</span><span class="dec">85</span></td>
|
||||||
|
<td class="lower"><span class="hex">65</span><span class="ch">e</span><span class="dec">101</span></td>
|
||||||
|
<td class="lower"><span class="hex">75</span><span class="ch">u</span><span class="dec">117</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">6<span class="b">0110</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">06</span><span class="ch">ACK<small>ack</small></span><span class="dec">6</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">16</span><span class="ch">SYN</span><span class="dec">22</span></td>
|
||||||
|
<td class="punct"><span class="hex">26</span><span class="ch">&</span><span class="dec">38</span></td>
|
||||||
|
<td class="digit"><span class="hex">36</span><span class="ch">6</span><span class="dec">54</span></td>
|
||||||
|
<td class="upper"><span class="hex">46</span><span class="ch">F</span><span class="dec">70</span></td>
|
||||||
|
<td class="upper"><span class="hex">56</span><span class="ch">V</span><span class="dec">86</span></td>
|
||||||
|
<td class="lower"><span class="hex">66</span><span class="ch">f</span><span class="dec">102</span></td>
|
||||||
|
<td class="lower"><span class="hex">76</span><span class="ch">v</span><span class="dec">118</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">7<span class="b">0111</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">07</span><span class="ch">BEL<small>bell 🔔</small></span><span class="dec">7</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">17</span><span class="ch">ETB</span><span class="dec">23</span></td>
|
||||||
|
<td class="punct"><span class="hex">27</span><span class="ch">'</span><span class="dec">39</span></td>
|
||||||
|
<td class="digit"><span class="hex">37</span><span class="ch">7</span><span class="dec">55</span></td>
|
||||||
|
<td class="upper"><span class="hex">47</span><span class="ch">G</span><span class="dec">71</span></td>
|
||||||
|
<td class="upper"><span class="hex">57</span><span class="ch">W</span><span class="dec">87</span></td>
|
||||||
|
<td class="lower"><span class="hex">67</span><span class="ch">g</span><span class="dec">103</span></td>
|
||||||
|
<td class="lower"><span class="hex">77</span><span class="ch">w</span><span class="dec">119</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">8<span class="b">1000</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">08</span><span class="ch">BS<small>backspace</small></span><span class="dec">8</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">18</span><span class="ch">CAN</span><span class="dec">24</span></td>
|
||||||
|
<td class="punct"><span class="hex">28</span><span class="ch">(</span><span class="dec">40</span></td>
|
||||||
|
<td class="digit"><span class="hex">38</span><span class="ch">8</span><span class="dec">56</span></td>
|
||||||
|
<td class="upper"><span class="hex">48</span><span class="ch">H</span><span class="dec">72</span></td>
|
||||||
|
<td class="upper"><span class="hex">58</span><span class="ch">X</span><span class="dec">88</span></td>
|
||||||
|
<td class="lower"><span class="hex">68</span><span class="ch">h</span><span class="dec">104</span></td>
|
||||||
|
<td class="lower"><span class="hex">78</span><span class="ch">x</span><span class="dec">120</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">9<span class="b">1001</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">09</span><span class="ch">HT<small>tab ⇥</small></span><span class="dec">9</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">19</span><span class="ch">EM</span><span class="dec">25</span></td>
|
||||||
|
<td class="punct"><span class="hex">29</span><span class="ch">)</span><span class="dec">41</span></td>
|
||||||
|
<td class="digit"><span class="hex">39</span><span class="ch">9</span><span class="dec">57</span></td>
|
||||||
|
<td class="upper"><span class="hex">49</span><span class="ch">I</span><span class="dec">73</span></td>
|
||||||
|
<td class="upper"><span class="hex">59</span><span class="ch">Y</span><span class="dec">89</span></td>
|
||||||
|
<td class="lower"><span class="hex">69</span><span class="ch">i</span><span class="dec">105</span></td>
|
||||||
|
<td class="lower"><span class="hex">79</span><span class="ch">y</span><span class="dec">121</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">A<span class="b">1010</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">0A</span><span class="ch">LF<small>↵ newline</small></span><span class="dec">10</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">1A</span><span class="ch">SUB<small>EOF DOS</small></span><span class="dec">26</span></td>
|
||||||
|
<td class="punct"><span class="hex">2A</span><span class="ch">*</span><span class="dec">42</span></td>
|
||||||
|
<td class="punct"><span class="hex">3A</span><span class="ch">:</span><span class="dec">58</span></td>
|
||||||
|
<td class="upper"><span class="hex">4A</span><span class="ch">J</span><span class="dec">74</span></td>
|
||||||
|
<td class="upper"><span class="hex">5A</span><span class="ch">Z</span><span class="dec">90</span></td>
|
||||||
|
<td class="lower"><span class="hex">6A</span><span class="ch">j</span><span class="dec">106</span></td>
|
||||||
|
<td class="lower"><span class="hex">7A</span><span class="ch">z</span><span class="dec">122</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">B<span class="b">1011</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">0B</span><span class="ch">VT</span><span class="dec">11</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">1B</span><span class="ch">ESC<small>escape</small></span><span class="dec">27</span></td>
|
||||||
|
<td class="punct"><span class="hex">2B</span><span class="ch">+</span><span class="dec">43</span></td>
|
||||||
|
<td class="punct"><span class="hex">3B</span><span class="ch">;</span><span class="dec">59</span></td>
|
||||||
|
<td class="upper"><span class="hex">4B</span><span class="ch">K</span><span class="dec">75</span></td>
|
||||||
|
<td class="punct"><span class="hex">5B</span><span class="ch">[</span><span class="dec">91</span></td>
|
||||||
|
<td class="lower"><span class="hex">6B</span><span class="ch">k</span><span class="dec">107</span></td>
|
||||||
|
<td class="punct"><span class="hex">7B</span><span class="ch">{</span><span class="dec">123</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">C<span class="b">1100</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">0C</span><span class="ch">FF<small>form feed</small></span><span class="dec">12</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">1C</span><span class="ch">FS</span><span class="dec">28</span></td>
|
||||||
|
<td class="punct"><span class="hex">2C</span><span class="ch">,</span><span class="dec">44</span></td>
|
||||||
|
<td class="punct"><span class="hex">3C</span><span class="ch"><</span><span class="dec">60</span></td>
|
||||||
|
<td class="upper"><span class="hex">4C</span><span class="ch">L</span><span class="dec">76</span></td>
|
||||||
|
<td class="punct"><span class="hex">5C</span><span class="ch">\</span><span class="dec">92</span></td>
|
||||||
|
<td class="lower"><span class="hex">6C</span><span class="ch">l</span><span class="dec">108</span></td>
|
||||||
|
<td class="punct"><span class="hex">7C</span><span class="ch">|</span><span class="dec">124</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">D<span class="b">1101</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">0D</span><span class="ch">CR<small>carriage</small></span><span class="dec">13</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">1D</span><span class="ch">GS</span><span class="dec">29</span></td>
|
||||||
|
<td class="punct"><span class="hex">2D</span><span class="ch">-</span><span class="dec">45</span></td>
|
||||||
|
<td class="punct"><span class="hex">3D</span><span class="ch">=</span><span class="dec">61</span></td>
|
||||||
|
<td class="upper"><span class="hex">4D</span><span class="ch">M</span><span class="dec">77</span></td>
|
||||||
|
<td class="punct"><span class="hex">5D</span><span class="ch">]</span><span class="dec">93</span></td>
|
||||||
|
<td class="lower"><span class="hex">6D</span><span class="ch">m</span><span class="dec">109</span></td>
|
||||||
|
<td class="punct"><span class="hex">7D</span><span class="ch">}</span><span class="dec">125</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">E<span class="b">1110</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">0E</span><span class="ch">SO</span><span class="dec">14</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">1E</span><span class="ch">RS</span><span class="dec">30</span></td>
|
||||||
|
<td class="punct"><span class="hex">2E</span><span class="ch">.</span><span class="dec">46</span></td>
|
||||||
|
<td class="punct"><span class="hex">3E</span><span class="ch">></span><span class="dec">62</span></td>
|
||||||
|
<td class="upper"><span class="hex">4E</span><span class="ch">N</span><span class="dec">78</span></td>
|
||||||
|
<td class="punct"><span class="hex">5E</span><span class="ch">^</span><span class="dec">94</span></td>
|
||||||
|
<td class="lower"><span class="hex">6E</span><span class="ch">n</span><span class="dec">110</span></td>
|
||||||
|
<td class="punct"><span class="hex">7E</span><span class="ch">~</span><span class="dec">126</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="row">F<span class="b">1111</span></th>
|
||||||
|
<td class="ctrl"><span class="hex">0F</span><span class="ch">SI</span><span class="dec">15</span></td>
|
||||||
|
<td class="ctrl"><span class="hex">1F</span><span class="ch">US</span><span class="dec">31</span></td>
|
||||||
|
<td class="punct"><span class="hex">2F</span><span class="ch">/</span><span class="dec">47</span></td>
|
||||||
|
<td class="punct"><span class="hex">3F</span><span class="ch">?</span><span class="dec">63</span></td>
|
||||||
|
<td class="upper"><span class="hex">4F</span><span class="ch">O</span><span class="dec">79</span></td>
|
||||||
|
<td class="punct"><span class="hex">5F</span><span class="ch">_</span><span class="dec">95</span></td>
|
||||||
|
<td class="lower"><span class="hex">6F</span><span class="ch">o</span><span class="dec">111</span></td>
|
||||||
|
<td class="del"><span class="hex">7F</span><span class="ch">DEL</span><span class="dec">127</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="legend">
|
||||||
|
<div class="item"><span class="swatch ctrl"></span>Steuerzeichen (0–31)</div>
|
||||||
|
<div class="item"><span class="swatch space"></span>Leerzeichen (32)</div>
|
||||||
|
<div class="item"><span class="swatch punct"></span>Satzzeichen</div>
|
||||||
|
<div class="item"><span class="swatch digit"></span>Ziffern (48–57)</div>
|
||||||
|
<div class="item"><span class="swatch upper"></span>Großbuchstaben (65–90)</div>
|
||||||
|
<div class="item"><span class="swatch lower"></span>Kleinbuchstaben (97–122)</div>
|
||||||
|
<div class="item"><span class="swatch del"></span>DEL (127)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="meta-row">
|
||||||
|
<span><strong>Beispiel:</strong> <code>A</code> = Hex <code>41</code> = Dez <code>65</code> = Bin <code>0100 0001</code></span>
|
||||||
|
<span><strong>Trick:</strong> Ziffern <code>0–9</code> liegen bei <code>30–39</code> · <code>'A'+1='B'</code> · Groß ↔ Klein: Bit 5 togglen</span>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,180 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Byte-Fluss: Bit → Hex → ASCII</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #1a1a2e;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--border: #cbd5e1;
|
||||||
|
--bg-soft: #f8fafc;
|
||||||
|
--byte-border: #94a3b8;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||||
|
body { padding: 22px 28px; }
|
||||||
|
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
|
||||||
|
.sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
|
||||||
|
|
||||||
|
.stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
|
||||||
|
|
||||||
|
.file {
|
||||||
|
width: 100%; box-sizing: border-box;
|
||||||
|
border: 2px solid var(--dark);
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--bg-soft);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
.file .head {
|
||||||
|
background: var(--dark); color: #fff; padding: 8px 14px;
|
||||||
|
font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
|
||||||
|
display: flex; justify-content: space-between; align-items: center;
|
||||||
|
}
|
||||||
|
.file .head .name { font-family: ui-monospace, monospace; }
|
||||||
|
.file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
|
||||||
|
.file .body { padding: 12px 14px; }
|
||||||
|
|
||||||
|
.row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
|
||||||
|
.row-bytes:last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
|
.byte-bin {
|
||||||
|
border: 1px solid var(--byte-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 4px 7px;
|
||||||
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: #fff;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
.byte-hex {
|
||||||
|
border: 1px solid var(--byte-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 6px 0;
|
||||||
|
font-family: ui-monospace, monospace;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: #fff;
|
||||||
|
min-width: 88px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.byte-ascii {
|
||||||
|
border: 1px solid var(--byte-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 6px 0;
|
||||||
|
font-family: ui-monospace, monospace;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: #fff;
|
||||||
|
min-width: 88px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.byte-ascii.np { color: var(--muted); font-style: italic; }
|
||||||
|
|
||||||
|
.truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
|
||||||
|
|
||||||
|
.arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
|
||||||
|
.arrow {
|
||||||
|
width: 0; height: 0;
|
||||||
|
border-left: 11px solid transparent;
|
||||||
|
border-right: 11px solid transparent;
|
||||||
|
border-top: 14px solid var(--hl);
|
||||||
|
}
|
||||||
|
.arrow-label {
|
||||||
|
font-size: 0.78rem; color: var(--hl); font-weight: 700;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
margin-top: 12px;
|
||||||
|
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
|
||||||
|
font-size: 0.85rem; color: var(--muted);
|
||||||
|
}
|
||||||
|
.legend strong { color: var(--dark); }
|
||||||
|
.legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
|
||||||
|
<div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
|
||||||
|
|
||||||
|
<div class="stage">
|
||||||
|
|
||||||
|
<!-- Stage 1: Bitstream -->
|
||||||
|
<div class="file">
|
||||||
|
<div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow-stack">
|
||||||
|
<div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
|
||||||
|
<div class="arrow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stage 2: Hex -->
|
||||||
|
<div class="file">
|
||||||
|
<div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow-stack">
|
||||||
|
<div class="arrow-label">je 1 Byte → 1 Zeichen</div>
|
||||||
|
<div class="arrow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stage 3: ASCII -->
|
||||||
|
<div class="file">
|
||||||
|
<div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-bytes">
|
||||||
|
<span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="legend">
|
||||||
|
<span><code>␣</code> = Leerzeichen (0x20)</span>
|
||||||
|
<span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
|
||||||
|
<span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
@@ -0,0 +1,117 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Byte für Byte — drei Brillen</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #1a1a2e;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--border: #cbd5e1;
|
||||||
|
--bg-soft: #f8fafc;
|
||||||
|
--bin-bg: #0f0f23;
|
||||||
|
--bin-fg: #e5e7eb;
|
||||||
|
--binary-mark: #ef4444;
|
||||||
|
--ascii-ok: #16a34a;
|
||||||
|
--ctrl: #9ca3af;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||||
|
body { padding: 28px 32px; }
|
||||||
|
h1 { text-align: center; margin: 0 0 4px; font-size: 1.75rem; }
|
||||||
|
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1rem; }
|
||||||
|
.sub code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
|
||||||
|
|
||||||
|
.windows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; max-width: 1180px; margin: 0 auto; }
|
||||||
|
|
||||||
|
.window { border: 2px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
|
||||||
|
.window-header { background: var(--bg-soft); padding: 10px 14px; border-bottom: 2px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
|
||||||
|
.window-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
|
||||||
|
.window-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); }
|
||||||
|
|
||||||
|
.window-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
|
||||||
|
|
||||||
|
.window.bin .window-body { background: var(--bin-bg); }
|
||||||
|
.window.bin .row { color: var(--bin-fg); font-size: 1.05rem; letter-spacing: 0.04em; }
|
||||||
|
|
||||||
|
.window.hex .row { color: var(--dark); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em; }
|
||||||
|
|
||||||
|
.window.text .row { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
|
||||||
|
.window.text .glyph.printable { color: var(--ascii-ok); }
|
||||||
|
.window.text .glyph.ctrl { color: var(--ctrl); font-size: 1.1rem; }
|
||||||
|
.window.text .glyph.binary { color: var(--binary-mark); }
|
||||||
|
.window.text .note { font-size: 0.78rem; font-weight: 400; color: var(--muted); margin-left: auto; }
|
||||||
|
|
||||||
|
.footnote { margin-top: 24px; max-width: 1100px; margin-left: auto; margin-right: auto; display: flex; gap: 32px; justify-content: center; font-size: 0.95rem; }
|
||||||
|
.legend { display: flex; align-items: center; gap: 8px; }
|
||||||
|
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 3px; }
|
||||||
|
.swatch.binary { background: #fee2e2; border: 2px solid var(--binary-mark); }
|
||||||
|
.swatch.ascii { background: #dcfce7; border: 2px solid var(--ascii-ok); }
|
||||||
|
.verdict { margin-top: 14px; text-align: center; font-size: 1.05rem; color: var(--dark); }
|
||||||
|
.verdict strong { color: var(--binary-mark); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Byte für Byte</h1>
|
||||||
|
<div class="sub">Eine Datei — drei Brillen. Beispiel: erste 8 Byte einer PNG-Datei.</div>
|
||||||
|
|
||||||
|
<div class="windows">
|
||||||
|
|
||||||
|
<div class="window bin">
|
||||||
|
<div class="window-header">
|
||||||
|
<div class="window-title">Fenster 1</div>
|
||||||
|
<div class="window-name">Bin · rohe 0 und 1</div>
|
||||||
|
</div>
|
||||||
|
<div class="window-body">
|
||||||
|
<div class="row">10001001</div>
|
||||||
|
<div class="row">01010000</div>
|
||||||
|
<div class="row">01001110</div>
|
||||||
|
<div class="row">01000111</div>
|
||||||
|
<div class="row">00001101</div>
|
||||||
|
<div class="row">00001010</div>
|
||||||
|
<div class="row">00011010</div>
|
||||||
|
<div class="row">00001010</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="window hex">
|
||||||
|
<div class="window-header">
|
||||||
|
<div class="window-title">Fenster 2</div>
|
||||||
|
<div class="window-name">Hex · 2 Ziffern pro Byte</div>
|
||||||
|
</div>
|
||||||
|
<div class="window-body">
|
||||||
|
<div class="row">89</div>
|
||||||
|
<div class="row">50</div>
|
||||||
|
<div class="row">4E</div>
|
||||||
|
<div class="row">47</div>
|
||||||
|
<div class="row">0D</div>
|
||||||
|
<div class="row">0A</div>
|
||||||
|
<div class="row">1A</div>
|
||||||
|
<div class="row">0A</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="window text">
|
||||||
|
<div class="window-header">
|
||||||
|
<div class="window-title">Fenster 3</div>
|
||||||
|
<div class="window-name">Text · ASCII oder ✗ (> 126)</div>
|
||||||
|
</div>
|
||||||
|
<div class="window-body">
|
||||||
|
<div class="row"><span class="glyph binary">✗</span><span class="note">137 > 126</span></div>
|
||||||
|
<div class="row"><span class="glyph printable">P</span><span class="note">80</span></div>
|
||||||
|
<div class="row"><span class="glyph printable">N</span><span class="note">78</span></div>
|
||||||
|
<div class="row"><span class="glyph printable">G</span><span class="note">71</span></div>
|
||||||
|
<div class="row"><span class="glyph ctrl">CR</span><span class="note">13 · Steuerz.</span></div>
|
||||||
|
<div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
|
||||||
|
<div class="row"><span class="glyph ctrl">SUB</span><span class="note">26 · Steuerz.</span></div>
|
||||||
|
<div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="verdict">
|
||||||
|
Mindestens ein Byte mit Wert > 126 → <strong>Binärdatei</strong>. Sonst: reine Textdatei.
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@@ -0,0 +1,185 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Byte → Nibble → Hex</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #1a1a2e;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--border: #cbd5e1;
|
||||||
|
--bg-soft: #f8fafc;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||||
|
body { padding: 28px 32px; }
|
||||||
|
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
|
||||||
|
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
|
||||||
|
|
||||||
|
.stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||||
|
|
||||||
|
.level { display: flex; flex-direction: column; align-items: center; }
|
||||||
|
.label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
|
||||||
|
|
||||||
|
/* Level 1: whole byte */
|
||||||
|
.byte {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border: 2px solid var(--dark);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--bg-soft);
|
||||||
|
}
|
||||||
|
.byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
|
||||||
|
.byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
|
||||||
|
|
||||||
|
/* Split arrows */
|
||||||
|
.split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
|
||||||
|
.split .arrow {
|
||||||
|
width: 0; height: 0;
|
||||||
|
border-left: 9px solid transparent;
|
||||||
|
border-right: 9px solid transparent;
|
||||||
|
border-top: 12px solid var(--hl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Level 2: two nibbles */
|
||||||
|
.nibbles { display: flex; gap: 80px; }
|
||||||
|
.nibble {
|
||||||
|
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border: 2px solid var(--hl);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
|
||||||
|
.nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
|
||||||
|
.nibble .meta { font-size: 0.78rem; color: var(--muted); }
|
||||||
|
|
||||||
|
.single-arrow {
|
||||||
|
width: 0; height: 0;
|
||||||
|
border-left: 9px solid transparent;
|
||||||
|
border-right: 9px solid transparent;
|
||||||
|
border-top: 12px solid var(--hl);
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Level 3: hex digits */
|
||||||
|
.hex-digits { display: flex; gap: 80px; }
|
||||||
|
.hex-digit {
|
||||||
|
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||||||
|
padding: 8px 22px;
|
||||||
|
border: 2px solid var(--dark);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--dark);
|
||||||
|
color: var(--hl);
|
||||||
|
}
|
||||||
|
.hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
|
||||||
|
.hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
|
||||||
|
|
||||||
|
/* Merge down to byte */
|
||||||
|
.merge {
|
||||||
|
display: flex; justify-content: center; margin-top: 2px;
|
||||||
|
}
|
||||||
|
.merge-v {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 60px 60px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.merge-v .line {
|
||||||
|
height: 20px;
|
||||||
|
border-right: 2px solid var(--hl);
|
||||||
|
}
|
||||||
|
.merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
|
||||||
|
.bottom-bar { height: 2px; background: var(--hl); width: 120px; }
|
||||||
|
|
||||||
|
/* Final result */
|
||||||
|
.result {
|
||||||
|
margin-top: 14px;
|
||||||
|
padding: 14px 22px;
|
||||||
|
background: #fef3f8;
|
||||||
|
border-left: 4px solid var(--hl);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
.result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
|
||||||
|
.result strong { color: var(--hl); }
|
||||||
|
|
||||||
|
.math {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--dark);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
|
||||||
|
<div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
|
||||||
|
|
||||||
|
<div class="stage">
|
||||||
|
<!-- Level 1 -->
|
||||||
|
<div class="level">
|
||||||
|
<div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
|
||||||
|
<div class="byte">
|
||||||
|
<span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
|
||||||
|
<span class="sep"></span>
|
||||||
|
<span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="split">
|
||||||
|
<div class="arrow"></div>
|
||||||
|
<div class="arrow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Level 2 -->
|
||||||
|
<div class="level">
|
||||||
|
<div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
|
||||||
|
<div class="nibbles">
|
||||||
|
<div class="nibble">
|
||||||
|
<div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
|
||||||
|
<div class="meta">= 4 (dez)</div>
|
||||||
|
</div>
|
||||||
|
<div class="nibble">
|
||||||
|
<div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
|
||||||
|
<div class="meta">= 13 (dez)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="split">
|
||||||
|
<div class="arrow"></div>
|
||||||
|
<div class="arrow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Level 3 -->
|
||||||
|
<div class="level">
|
||||||
|
<div class="label">2 Hex-Ziffern · Symbole 0–F</div>
|
||||||
|
<div class="hex-digits">
|
||||||
|
<div class="hex-digit">
|
||||||
|
<div class="digit">4</div>
|
||||||
|
<div class="meta">Nibble → 1 Ziffer</div>
|
||||||
|
</div>
|
||||||
|
<div class="hex-digit">
|
||||||
|
<div class="digit">D</div>
|
||||||
|
<div class="meta">13 → D</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="result">
|
||||||
|
<code>01001101</code> (bin) = <code>4D</code> (hex) = <strong>77</strong> (dez) = <strong>"M"</strong> (ASCII)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="math">
|
||||||
|
<span class="eq">16 × 16 = 256</span> · <span class="eq">2⁴ × 2⁴ = 2⁸</span> · Darum passt Hex so gut zu Bytes.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</content>
|
||||||
|
</invoke>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
@@ -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>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 140 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
@@ -0,0 +1,120 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Dieselben Byte — drei Perspektiven</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #1a1a2e;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--border: #cbd5e1;
|
||||||
|
--bg-soft: #f8fafc;
|
||||||
|
--magic: #ef4444;
|
||||||
|
--format: #2563eb;
|
||||||
|
--transport: #16a34a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||||
|
body { padding: 24px 28px; }
|
||||||
|
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
|
||||||
|
.sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
|
||||||
|
|
||||||
|
.stage { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
|
||||||
|
|
||||||
|
.row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; }
|
||||||
|
.label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: right; white-space: nowrap; }
|
||||||
|
.label small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 2px; font-size: 0.8em; white-space: nowrap; }
|
||||||
|
|
||||||
|
.panel { padding: 14px 16px; border: 2px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
|
||||||
|
.panel.bin { background: #0f0f23; color: #fff; border-color: var(--dark); }
|
||||||
|
.panel.bin code { color: #e5e7eb; }
|
||||||
|
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; word-break: break-all; line-height: 1.5; }
|
||||||
|
|
||||||
|
.hex-bytes { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||||
|
.hex-byte { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
|
||||||
|
|
||||||
|
.semantic { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
|
||||||
|
.group { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px; min-width: 70px; }
|
||||||
|
.group .bytes { display: flex; gap: 4px; }
|
||||||
|
.group .b { background: #fff; border: 1px solid currentColor; border-radius: 3px; padding: 3px 7px; font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); }
|
||||||
|
.group .tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||||
|
.group .meaning { font-size: 0.78rem; line-height: 1.3; color: var(--dark); }
|
||||||
|
.group.magic { background: #fee2e2; color: var(--magic); }
|
||||||
|
.group.format { background: #dbeafe; color: var(--format); }
|
||||||
|
.group.transport { background: #dcfce7; color: var(--transport); }
|
||||||
|
|
||||||
|
.arrow-row { display: flex; justify-content: center; }
|
||||||
|
.arrow {
|
||||||
|
width: 0; height: 0;
|
||||||
|
border-left: 11px solid transparent;
|
||||||
|
border-right: 11px solid transparent;
|
||||||
|
border-top: 14px solid var(--hl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnote { margin-top: 16px; font-size: 0.88rem; color: var(--muted); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
|
||||||
|
.footnote strong { color: var(--dark); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Dieselben 8 Byte — drei Perspektiven</h1>
|
||||||
|
<div class="sub">PNG-Datei-Anfang: <code style="font-family:ui-monospace,monospace">89 50 4E 47 0D 0A 1A 0A</code></div>
|
||||||
|
|
||||||
|
<div class="stage">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="label">1 · Bitstream<small>was wirklich gespeichert wird</small></div>
|
||||||
|
<div class="panel bin">
|
||||||
|
<code class="mono">10001001 01010000 01001110 01000111 00001101 00001010 00011010 00001010</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow-row"><div class="arrow"></div></div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="label">2 · Hex<small>gruppiert in 8-Bit-Häppchen</small></div>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="hex-bytes">
|
||||||
|
<span class="hex-byte">89</span>
|
||||||
|
<span class="hex-byte">50</span>
|
||||||
|
<span class="hex-byte">4E</span>
|
||||||
|
<span class="hex-byte">47</span>
|
||||||
|
<span class="hex-byte">0D</span>
|
||||||
|
<span class="hex-byte">0A</span>
|
||||||
|
<span class="hex-byte">1A</span>
|
||||||
|
<span class="hex-byte">0A</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow-row"><div class="arrow"></div></div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="label">3 · Bedeutung<small>was die Byte sagen</small></div>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="semantic">
|
||||||
|
<div class="group magic">
|
||||||
|
<div class="bytes"><span class="b">89</span></div>
|
||||||
|
<div class="tag">Magic Byte</div>
|
||||||
|
<div class="meaning">> 127 → "Ich bin Binär, kein Text"</div>
|
||||||
|
</div>
|
||||||
|
<div class="group format">
|
||||||
|
<div class="bytes"><span class="b">50</span><span class="b">4E</span><span class="b">47</span></div>
|
||||||
|
<div class="tag">Format-Kürzel</div>
|
||||||
|
<div class="meaning">P · N · G (ASCII) → "PNG-Datei"</div>
|
||||||
|
</div>
|
||||||
|
<div class="group transport">
|
||||||
|
<div class="bytes"><span class="b">0D</span><span class="b">0A</span><span class="b">1A</span><span class="b">0A</span></div>
|
||||||
|
<div class="tag">Transport-Schutz</div>
|
||||||
|
<div class="meaning">CR · LF · EOF · LF → erkennt kaputte Übertragung</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footnote">
|
||||||
|
Byte ändern sich nicht — nur unsere <strong>Brille</strong>. Bitstream zeigt das <em>was</em>, Hex das <em>wie kompakt</em>, Bedeutung das <em>warum</em>.
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
@@ -0,0 +1,135 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Warum 8 Bit? Adressierung im Speicher</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #1a1a2e;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--border: #cbd5e1;
|
||||||
|
--bg-soft: #f8fafc;
|
||||||
|
--bad: #ef4444;
|
||||||
|
--good: #16a34a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||||
|
body { padding: 24px 28px; }
|
||||||
|
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
|
||||||
|
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
|
||||||
|
|
||||||
|
.stage { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto; }
|
||||||
|
|
||||||
|
.ram-wrap { display: flex; gap: 18px; align-items: stretch; }
|
||||||
|
|
||||||
|
.ram {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 90px 90px 230px;
|
||||||
|
border: 2px solid var(--dark);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg-soft);
|
||||||
|
}
|
||||||
|
.ram .head {
|
||||||
|
background: var(--dark); color: #fff; padding: 8px 10px;
|
||||||
|
font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: center;
|
||||||
|
}
|
||||||
|
.ram .cell {
|
||||||
|
border-top: 1px solid var(--border); padding: 10px 12px;
|
||||||
|
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; font-weight: 700;
|
||||||
|
text-align: center; background: #fff;
|
||||||
|
}
|
||||||
|
.ram .cell.addr { color: var(--muted); background: var(--bg-soft); }
|
||||||
|
.ram .cell.bin { font-size: 0.95rem; letter-spacing: 0.05em; }
|
||||||
|
.ram .row.cur .cell { background: #fef3f8; color: var(--hl); }
|
||||||
|
|
||||||
|
.pointer-side { display: flex; flex-direction: column; gap: 12px; padding-top: 36px; }
|
||||||
|
.ptr-block { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; }
|
||||||
|
.ptr-block.ok { background: #dcfce7; color: var(--good); border: 2px solid var(--good); }
|
||||||
|
.ptr-block.bad { background: #fee2e2; color: var(--bad); border: 2px dashed var(--bad); }
|
||||||
|
.ptr-block.between {
|
||||||
|
background: #fff; color: var(--bad); border: 2px dashed var(--bad);
|
||||||
|
margin: -12px 0 -12px 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
}
|
||||||
|
.ptr-block .ico { font-size: 1.3rem; line-height: 1; }
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex; gap: 22px; padding: 12px 16px; border-top: 1px solid var(--border);
|
||||||
|
font-size: 0.9rem; color: var(--dark);
|
||||||
|
}
|
||||||
|
.legend .row { display: flex; align-items: center; gap: 6px; }
|
||||||
|
.legend .swatch { width: 14px; height: 14px; border-radius: 3px; }
|
||||||
|
|
||||||
|
.conclusion {
|
||||||
|
margin-top: 6px;
|
||||||
|
padding: 14px 22px;
|
||||||
|
background: #fef3f8;
|
||||||
|
border-left: 4px solid var(--hl);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 760px;
|
||||||
|
}
|
||||||
|
.conclusion strong { color: var(--hl); }
|
||||||
|
.conclusion code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Warum 8 Bit? Speicher-Adressierung</h1>
|
||||||
|
<div class="sub">CPU adressiert <strong>byteweise</strong> — halbe Byte existieren nicht.</div>
|
||||||
|
|
||||||
|
<div class="stage">
|
||||||
|
|
||||||
|
<div class="ram-wrap">
|
||||||
|
|
||||||
|
<div class="ram">
|
||||||
|
<div class="head">Adresse</div>
|
||||||
|
<div class="head">Hex</div>
|
||||||
|
<div class="head">Bit (was im Speicher steht)</div>
|
||||||
|
|
||||||
|
<div class="cell addr">0x0000</div>
|
||||||
|
<div class="cell">48</div>
|
||||||
|
<div class="cell bin">01001000</div>
|
||||||
|
|
||||||
|
<div class="cell addr">0x0001</div>
|
||||||
|
<div class="cell">65</div>
|
||||||
|
<div class="cell bin">01100101</div>
|
||||||
|
|
||||||
|
<div class="cell addr">0x0002</div>
|
||||||
|
<div class="cell">6C</div>
|
||||||
|
<div class="cell bin">01101100</div>
|
||||||
|
|
||||||
|
<div class="cell addr">0x0003</div>
|
||||||
|
<div class="cell">6C</div>
|
||||||
|
<div class="cell bin">01101100</div>
|
||||||
|
|
||||||
|
<div class="cell addr">0x0004</div>
|
||||||
|
<div class="cell">6F</div>
|
||||||
|
<div class="cell bin">01101111</div>
|
||||||
|
|
||||||
|
<div class="cell addr">0x0005</div>
|
||||||
|
<div class="cell">21</div>
|
||||||
|
<div class="cell bin">00100001</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pointer-side">
|
||||||
|
<div class="ptr-block ok"><span class="ico">→</span><span>read 0x0000 ✓</span></div>
|
||||||
|
<div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0000.5 — gibt's nicht</span></div>
|
||||||
|
<div class="ptr-block ok"><span class="ico">→</span><span>read 0x0001 ✓</span></div>
|
||||||
|
<div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0001.5 — gibt's nicht</span></div>
|
||||||
|
<div class="ptr-block ok"><span class="ico">→</span><span>read 0x0002 ✓</span></div>
|
||||||
|
<div class="ptr-block ok" style="opacity:0.4"><span class="ico">→</span><span>...</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="conclusion">
|
||||||
|
<strong>Byte = kleinste adressierbare Einheit.</strong><br>
|
||||||
|
Speichercontroller, Bus und CPU sind alle auf 8-Bit-Häppchen ausgelegt.<br>
|
||||||
|
Einzelne Bit lesen → muss erst <code>byte = mem[addr]</code>, dann mit <code>byte & 0b1000_0000</code> Bit isolieren.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@@ -0,0 +1,258 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1440" preserveAspectRatio="none" shape-rendering="crispEdges">
|
||||||
|
<rect x="0" y="0" width="10" height="1440" fill="rgb(255,255,255)"/>
|
||||||
|
<rect x="10" y="0" width="10" height="1440" fill="rgb(254,254,254)"/>
|
||||||
|
<rect x="20" y="0" width="10" height="1440" fill="rgb(253,253,253)"/>
|
||||||
|
<rect x="30" y="0" width="10" height="1440" fill="rgb(252,252,252)"/>
|
||||||
|
<rect x="40" y="0" width="10" height="1440" fill="rgb(251,251,251)"/>
|
||||||
|
<rect x="50" y="0" width="10" height="1440" fill="rgb(250,250,250)"/>
|
||||||
|
<rect x="60" y="0" width="10" height="1440" fill="rgb(249,249,249)"/>
|
||||||
|
<rect x="70" y="0" width="10" height="1440" fill="rgb(248,248,248)"/>
|
||||||
|
<rect x="80" y="0" width="10" height="1440" fill="rgb(247,247,247)"/>
|
||||||
|
<rect x="90" y="0" width="10" height="1440" fill="rgb(246,246,246)"/>
|
||||||
|
<rect x="100" y="0" width="10" height="1440" fill="rgb(245,245,245)"/>
|
||||||
|
<rect x="110" y="0" width="10" height="1440" fill="rgb(244,244,244)"/>
|
||||||
|
<rect x="120" y="0" width="10" height="1440" fill="rgb(243,243,243)"/>
|
||||||
|
<rect x="130" y="0" width="10" height="1440" fill="rgb(242,242,242)"/>
|
||||||
|
<rect x="140" y="0" width="10" height="1440" fill="rgb(241,241,241)"/>
|
||||||
|
<rect x="150" y="0" width="10" height="1440" fill="rgb(240,240,240)"/>
|
||||||
|
<rect x="160" y="0" width="10" height="1440" fill="rgb(239,239,239)"/>
|
||||||
|
<rect x="170" y="0" width="10" height="1440" fill="rgb(238,238,238)"/>
|
||||||
|
<rect x="180" y="0" width="10" height="1440" fill="rgb(237,237,237)"/>
|
||||||
|
<rect x="190" y="0" width="10" height="1440" fill="rgb(236,236,236)"/>
|
||||||
|
<rect x="200" y="0" width="10" height="1440" fill="rgb(235,235,235)"/>
|
||||||
|
<rect x="210" y="0" width="10" height="1440" fill="rgb(234,234,234)"/>
|
||||||
|
<rect x="220" y="0" width="10" height="1440" fill="rgb(233,233,233)"/>
|
||||||
|
<rect x="230" y="0" width="10" height="1440" fill="rgb(232,232,232)"/>
|
||||||
|
<rect x="240" y="0" width="10" height="1440" fill="rgb(231,231,231)"/>
|
||||||
|
<rect x="250" y="0" width="10" height="1440" fill="rgb(230,230,230)"/>
|
||||||
|
<rect x="260" y="0" width="10" height="1440" fill="rgb(229,229,229)"/>
|
||||||
|
<rect x="270" y="0" width="10" height="1440" fill="rgb(228,228,228)"/>
|
||||||
|
<rect x="280" y="0" width="10" height="1440" fill="rgb(227,227,227)"/>
|
||||||
|
<rect x="290" y="0" width="10" height="1440" fill="rgb(226,226,226)"/>
|
||||||
|
<rect x="300" y="0" width="10" height="1440" fill="rgb(225,225,225)"/>
|
||||||
|
<rect x="310" y="0" width="10" height="1440" fill="rgb(224,224,224)"/>
|
||||||
|
<rect x="320" y="0" width="10" height="1440" fill="rgb(223,223,223)"/>
|
||||||
|
<rect x="330" y="0" width="10" height="1440" fill="rgb(222,222,222)"/>
|
||||||
|
<rect x="340" y="0" width="10" height="1440" fill="rgb(221,221,221)"/>
|
||||||
|
<rect x="350" y="0" width="10" height="1440" fill="rgb(220,220,220)"/>
|
||||||
|
<rect x="360" y="0" width="10" height="1440" fill="rgb(219,219,219)"/>
|
||||||
|
<rect x="370" y="0" width="10" height="1440" fill="rgb(218,218,218)"/>
|
||||||
|
<rect x="380" y="0" width="10" height="1440" fill="rgb(217,217,217)"/>
|
||||||
|
<rect x="390" y="0" width="10" height="1440" fill="rgb(216,216,216)"/>
|
||||||
|
<rect x="400" y="0" width="10" height="1440" fill="rgb(215,215,215)"/>
|
||||||
|
<rect x="410" y="0" width="10" height="1440" fill="rgb(214,214,214)"/>
|
||||||
|
<rect x="420" y="0" width="10" height="1440" fill="rgb(213,213,213)"/>
|
||||||
|
<rect x="430" y="0" width="10" height="1440" fill="rgb(212,212,212)"/>
|
||||||
|
<rect x="440" y="0" width="10" height="1440" fill="rgb(211,211,211)"/>
|
||||||
|
<rect x="450" y="0" width="10" height="1440" fill="rgb(210,210,210)"/>
|
||||||
|
<rect x="460" y="0" width="10" height="1440" fill="rgb(209,209,209)"/>
|
||||||
|
<rect x="470" y="0" width="10" height="1440" fill="rgb(208,208,208)"/>
|
||||||
|
<rect x="480" y="0" width="10" height="1440" fill="rgb(207,207,207)"/>
|
||||||
|
<rect x="490" y="0" width="10" height="1440" fill="rgb(206,206,206)"/>
|
||||||
|
<rect x="500" y="0" width="10" height="1440" fill="rgb(205,205,205)"/>
|
||||||
|
<rect x="510" y="0" width="10" height="1440" fill="rgb(204,204,204)"/>
|
||||||
|
<rect x="520" y="0" width="10" height="1440" fill="rgb(203,203,203)"/>
|
||||||
|
<rect x="530" y="0" width="10" height="1440" fill="rgb(202,202,202)"/>
|
||||||
|
<rect x="540" y="0" width="10" height="1440" fill="rgb(201,201,201)"/>
|
||||||
|
<rect x="550" y="0" width="10" height="1440" fill="rgb(200,200,200)"/>
|
||||||
|
<rect x="560" y="0" width="10" height="1440" fill="rgb(199,199,199)"/>
|
||||||
|
<rect x="570" y="0" width="10" height="1440" fill="rgb(198,198,198)"/>
|
||||||
|
<rect x="580" y="0" width="10" height="1440" fill="rgb(197,197,197)"/>
|
||||||
|
<rect x="590" y="0" width="10" height="1440" fill="rgb(196,196,196)"/>
|
||||||
|
<rect x="600" y="0" width="10" height="1440" fill="rgb(195,195,195)"/>
|
||||||
|
<rect x="610" y="0" width="10" height="1440" fill="rgb(194,194,194)"/>
|
||||||
|
<rect x="620" y="0" width="10" height="1440" fill="rgb(193,193,193)"/>
|
||||||
|
<rect x="630" y="0" width="10" height="1440" fill="rgb(192,192,192)"/>
|
||||||
|
<rect x="640" y="0" width="10" height="1440" fill="rgb(191,191,191)"/>
|
||||||
|
<rect x="650" y="0" width="10" height="1440" fill="rgb(190,190,190)"/>
|
||||||
|
<rect x="660" y="0" width="10" height="1440" fill="rgb(189,189,189)"/>
|
||||||
|
<rect x="670" y="0" width="10" height="1440" fill="rgb(188,188,188)"/>
|
||||||
|
<rect x="680" y="0" width="10" height="1440" fill="rgb(187,187,187)"/>
|
||||||
|
<rect x="690" y="0" width="10" height="1440" fill="rgb(186,186,186)"/>
|
||||||
|
<rect x="700" y="0" width="10" height="1440" fill="rgb(185,185,185)"/>
|
||||||
|
<rect x="710" y="0" width="10" height="1440" fill="rgb(184,184,184)"/>
|
||||||
|
<rect x="720" y="0" width="10" height="1440" fill="rgb(183,183,183)"/>
|
||||||
|
<rect x="730" y="0" width="10" height="1440" fill="rgb(182,182,182)"/>
|
||||||
|
<rect x="740" y="0" width="10" height="1440" fill="rgb(181,181,181)"/>
|
||||||
|
<rect x="750" y="0" width="10" height="1440" fill="rgb(180,180,180)"/>
|
||||||
|
<rect x="760" y="0" width="10" height="1440" fill="rgb(179,179,179)"/>
|
||||||
|
<rect x="770" y="0" width="10" height="1440" fill="rgb(178,178,178)"/>
|
||||||
|
<rect x="780" y="0" width="10" height="1440" fill="rgb(177,177,177)"/>
|
||||||
|
<rect x="790" y="0" width="10" height="1440" fill="rgb(176,176,176)"/>
|
||||||
|
<rect x="800" y="0" width="10" height="1440" fill="rgb(175,175,175)"/>
|
||||||
|
<rect x="810" y="0" width="10" height="1440" fill="rgb(174,174,174)"/>
|
||||||
|
<rect x="820" y="0" width="10" height="1440" fill="rgb(173,173,173)"/>
|
||||||
|
<rect x="830" y="0" width="10" height="1440" fill="rgb(172,172,172)"/>
|
||||||
|
<rect x="840" y="0" width="10" height="1440" fill="rgb(171,171,171)"/>
|
||||||
|
<rect x="850" y="0" width="10" height="1440" fill="rgb(170,170,170)"/>
|
||||||
|
<rect x="860" y="0" width="10" height="1440" fill="rgb(169,169,169)"/>
|
||||||
|
<rect x="870" y="0" width="10" height="1440" fill="rgb(168,168,168)"/>
|
||||||
|
<rect x="880" y="0" width="10" height="1440" fill="rgb(167,167,167)"/>
|
||||||
|
<rect x="890" y="0" width="10" height="1440" fill="rgb(166,166,166)"/>
|
||||||
|
<rect x="900" y="0" width="10" height="1440" fill="rgb(165,165,165)"/>
|
||||||
|
<rect x="910" y="0" width="10" height="1440" fill="rgb(164,164,164)"/>
|
||||||
|
<rect x="920" y="0" width="10" height="1440" fill="rgb(163,163,163)"/>
|
||||||
|
<rect x="930" y="0" width="10" height="1440" fill="rgb(162,162,162)"/>
|
||||||
|
<rect x="940" y="0" width="10" height="1440" fill="rgb(161,161,161)"/>
|
||||||
|
<rect x="950" y="0" width="10" height="1440" fill="rgb(160,160,160)"/>
|
||||||
|
<rect x="960" y="0" width="10" height="1440" fill="rgb(159,159,159)"/>
|
||||||
|
<rect x="970" y="0" width="10" height="1440" fill="rgb(158,158,158)"/>
|
||||||
|
<rect x="980" y="0" width="10" height="1440" fill="rgb(157,157,157)"/>
|
||||||
|
<rect x="990" y="0" width="10" height="1440" fill="rgb(156,156,156)"/>
|
||||||
|
<rect x="1000" y="0" width="10" height="1440" fill="rgb(155,155,155)"/>
|
||||||
|
<rect x="1010" y="0" width="10" height="1440" fill="rgb(154,154,154)"/>
|
||||||
|
<rect x="1020" y="0" width="10" height="1440" fill="rgb(153,153,153)"/>
|
||||||
|
<rect x="1030" y="0" width="10" height="1440" fill="rgb(152,152,152)"/>
|
||||||
|
<rect x="1040" y="0" width="10" height="1440" fill="rgb(151,151,151)"/>
|
||||||
|
<rect x="1050" y="0" width="10" height="1440" fill="rgb(150,150,150)"/>
|
||||||
|
<rect x="1060" y="0" width="10" height="1440" fill="rgb(149,149,149)"/>
|
||||||
|
<rect x="1070" y="0" width="10" height="1440" fill="rgb(148,148,148)"/>
|
||||||
|
<rect x="1080" y="0" width="10" height="1440" fill="rgb(147,147,147)"/>
|
||||||
|
<rect x="1090" y="0" width="10" height="1440" fill="rgb(146,146,146)"/>
|
||||||
|
<rect x="1100" y="0" width="10" height="1440" fill="rgb(145,145,145)"/>
|
||||||
|
<rect x="1110" y="0" width="10" height="1440" fill="rgb(144,144,144)"/>
|
||||||
|
<rect x="1120" y="0" width="10" height="1440" fill="rgb(143,143,143)"/>
|
||||||
|
<rect x="1130" y="0" width="10" height="1440" fill="rgb(142,142,142)"/>
|
||||||
|
<rect x="1140" y="0" width="10" height="1440" fill="rgb(141,141,141)"/>
|
||||||
|
<rect x="1150" y="0" width="10" height="1440" fill="rgb(140,140,140)"/>
|
||||||
|
<rect x="1160" y="0" width="10" height="1440" fill="rgb(139,139,139)"/>
|
||||||
|
<rect x="1170" y="0" width="10" height="1440" fill="rgb(138,138,138)"/>
|
||||||
|
<rect x="1180" y="0" width="10" height="1440" fill="rgb(137,137,137)"/>
|
||||||
|
<rect x="1190" y="0" width="10" height="1440" fill="rgb(136,136,136)"/>
|
||||||
|
<rect x="1200" y="0" width="10" height="1440" fill="rgb(135,135,135)"/>
|
||||||
|
<rect x="1210" y="0" width="10" height="1440" fill="rgb(134,134,134)"/>
|
||||||
|
<rect x="1220" y="0" width="10" height="1440" fill="rgb(133,133,133)"/>
|
||||||
|
<rect x="1230" y="0" width="10" height="1440" fill="rgb(132,132,132)"/>
|
||||||
|
<rect x="1240" y="0" width="10" height="1440" fill="rgb(131,131,131)"/>
|
||||||
|
<rect x="1250" y="0" width="10" height="1440" fill="rgb(130,130,130)"/>
|
||||||
|
<rect x="1260" y="0" width="10" height="1440" fill="rgb(129,129,129)"/>
|
||||||
|
<rect x="1270" y="0" width="10" height="1440" fill="rgb(128,128,128)"/>
|
||||||
|
<rect x="1280" y="0" width="10" height="1440" fill="rgb(127,127,127)"/>
|
||||||
|
<rect x="1290" y="0" width="10" height="1440" fill="rgb(126,126,126)"/>
|
||||||
|
<rect x="1300" y="0" width="10" height="1440" fill="rgb(125,125,125)"/>
|
||||||
|
<rect x="1310" y="0" width="10" height="1440" fill="rgb(124,124,124)"/>
|
||||||
|
<rect x="1320" y="0" width="10" height="1440" fill="rgb(123,123,123)"/>
|
||||||
|
<rect x="1330" y="0" width="10" height="1440" fill="rgb(122,122,122)"/>
|
||||||
|
<rect x="1340" y="0" width="10" height="1440" fill="rgb(121,121,121)"/>
|
||||||
|
<rect x="1350" y="0" width="10" height="1440" fill="rgb(120,120,120)"/>
|
||||||
|
<rect x="1360" y="0" width="10" height="1440" fill="rgb(119,119,119)"/>
|
||||||
|
<rect x="1370" y="0" width="10" height="1440" fill="rgb(118,118,118)"/>
|
||||||
|
<rect x="1380" y="0" width="10" height="1440" fill="rgb(117,117,117)"/>
|
||||||
|
<rect x="1390" y="0" width="10" height="1440" fill="rgb(116,116,116)"/>
|
||||||
|
<rect x="1400" y="0" width="10" height="1440" fill="rgb(115,115,115)"/>
|
||||||
|
<rect x="1410" y="0" width="10" height="1440" fill="rgb(114,114,114)"/>
|
||||||
|
<rect x="1420" y="0" width="10" height="1440" fill="rgb(113,113,113)"/>
|
||||||
|
<rect x="1430" y="0" width="10" height="1440" fill="rgb(112,112,112)"/>
|
||||||
|
<rect x="1440" y="0" width="10" height="1440" fill="rgb(111,111,111)"/>
|
||||||
|
<rect x="1450" y="0" width="10" height="1440" fill="rgb(110,110,110)"/>
|
||||||
|
<rect x="1460" y="0" width="10" height="1440" fill="rgb(109,109,109)"/>
|
||||||
|
<rect x="1470" y="0" width="10" height="1440" fill="rgb(108,108,108)"/>
|
||||||
|
<rect x="1480" y="0" width="10" height="1440" fill="rgb(107,107,107)"/>
|
||||||
|
<rect x="1490" y="0" width="10" height="1440" fill="rgb(106,106,106)"/>
|
||||||
|
<rect x="1500" y="0" width="10" height="1440" fill="rgb(105,105,105)"/>
|
||||||
|
<rect x="1510" y="0" width="10" height="1440" fill="rgb(104,104,104)"/>
|
||||||
|
<rect x="1520" y="0" width="10" height="1440" fill="rgb(103,103,103)"/>
|
||||||
|
<rect x="1530" y="0" width="10" height="1440" fill="rgb(102,102,102)"/>
|
||||||
|
<rect x="1540" y="0" width="10" height="1440" fill="rgb(101,101,101)"/>
|
||||||
|
<rect x="1550" y="0" width="10" height="1440" fill="rgb(100,100,100)"/>
|
||||||
|
<rect x="1560" y="0" width="10" height="1440" fill="rgb(99,99,99)"/>
|
||||||
|
<rect x="1570" y="0" width="10" height="1440" fill="rgb(98,98,98)"/>
|
||||||
|
<rect x="1580" y="0" width="10" height="1440" fill="rgb(97,97,97)"/>
|
||||||
|
<rect x="1590" y="0" width="10" height="1440" fill="rgb(96,96,96)"/>
|
||||||
|
<rect x="1600" y="0" width="10" height="1440" fill="rgb(95,95,95)"/>
|
||||||
|
<rect x="1610" y="0" width="10" height="1440" fill="rgb(94,94,94)"/>
|
||||||
|
<rect x="1620" y="0" width="10" height="1440" fill="rgb(93,93,93)"/>
|
||||||
|
<rect x="1630" y="0" width="10" height="1440" fill="rgb(92,92,92)"/>
|
||||||
|
<rect x="1640" y="0" width="10" height="1440" fill="rgb(91,91,91)"/>
|
||||||
|
<rect x="1650" y="0" width="10" height="1440" fill="rgb(90,90,90)"/>
|
||||||
|
<rect x="1660" y="0" width="10" height="1440" fill="rgb(89,89,89)"/>
|
||||||
|
<rect x="1670" y="0" width="10" height="1440" fill="rgb(88,88,88)"/>
|
||||||
|
<rect x="1680" y="0" width="10" height="1440" fill="rgb(87,87,87)"/>
|
||||||
|
<rect x="1690" y="0" width="10" height="1440" fill="rgb(86,86,86)"/>
|
||||||
|
<rect x="1700" y="0" width="10" height="1440" fill="rgb(85,85,85)"/>
|
||||||
|
<rect x="1710" y="0" width="10" height="1440" fill="rgb(84,84,84)"/>
|
||||||
|
<rect x="1720" y="0" width="10" height="1440" fill="rgb(83,83,83)"/>
|
||||||
|
<rect x="1730" y="0" width="10" height="1440" fill="rgb(82,82,82)"/>
|
||||||
|
<rect x="1740" y="0" width="10" height="1440" fill="rgb(81,81,81)"/>
|
||||||
|
<rect x="1750" y="0" width="10" height="1440" fill="rgb(80,80,80)"/>
|
||||||
|
<rect x="1760" y="0" width="10" height="1440" fill="rgb(79,79,79)"/>
|
||||||
|
<rect x="1770" y="0" width="10" height="1440" fill="rgb(78,78,78)"/>
|
||||||
|
<rect x="1780" y="0" width="10" height="1440" fill="rgb(77,77,77)"/>
|
||||||
|
<rect x="1790" y="0" width="10" height="1440" fill="rgb(76,76,76)"/>
|
||||||
|
<rect x="1800" y="0" width="10" height="1440" fill="rgb(75,75,75)"/>
|
||||||
|
<rect x="1810" y="0" width="10" height="1440" fill="rgb(74,74,74)"/>
|
||||||
|
<rect x="1820" y="0" width="10" height="1440" fill="rgb(73,73,73)"/>
|
||||||
|
<rect x="1830" y="0" width="10" height="1440" fill="rgb(72,72,72)"/>
|
||||||
|
<rect x="1840" y="0" width="10" height="1440" fill="rgb(71,71,71)"/>
|
||||||
|
<rect x="1850" y="0" width="10" height="1440" fill="rgb(70,70,70)"/>
|
||||||
|
<rect x="1860" y="0" width="10" height="1440" fill="rgb(69,69,69)"/>
|
||||||
|
<rect x="1870" y="0" width="10" height="1440" fill="rgb(68,68,68)"/>
|
||||||
|
<rect x="1880" y="0" width="10" height="1440" fill="rgb(67,67,67)"/>
|
||||||
|
<rect x="1890" y="0" width="10" height="1440" fill="rgb(66,66,66)"/>
|
||||||
|
<rect x="1900" y="0" width="10" height="1440" fill="rgb(65,65,65)"/>
|
||||||
|
<rect x="1910" y="0" width="10" height="1440" fill="rgb(64,64,64)"/>
|
||||||
|
<rect x="1920" y="0" width="10" height="1440" fill="rgb(63,63,63)"/>
|
||||||
|
<rect x="1930" y="0" width="10" height="1440" fill="rgb(62,62,62)"/>
|
||||||
|
<rect x="1940" y="0" width="10" height="1440" fill="rgb(61,61,61)"/>
|
||||||
|
<rect x="1950" y="0" width="10" height="1440" fill="rgb(60,60,60)"/>
|
||||||
|
<rect x="1960" y="0" width="10" height="1440" fill="rgb(59,59,59)"/>
|
||||||
|
<rect x="1970" y="0" width="10" height="1440" fill="rgb(58,58,58)"/>
|
||||||
|
<rect x="1980" y="0" width="10" height="1440" fill="rgb(57,57,57)"/>
|
||||||
|
<rect x="1990" y="0" width="10" height="1440" fill="rgb(56,56,56)"/>
|
||||||
|
<rect x="2000" y="0" width="10" height="1440" fill="rgb(55,55,55)"/>
|
||||||
|
<rect x="2010" y="0" width="10" height="1440" fill="rgb(54,54,54)"/>
|
||||||
|
<rect x="2020" y="0" width="10" height="1440" fill="rgb(53,53,53)"/>
|
||||||
|
<rect x="2030" y="0" width="10" height="1440" fill="rgb(52,52,52)"/>
|
||||||
|
<rect x="2040" y="0" width="10" height="1440" fill="rgb(51,51,51)"/>
|
||||||
|
<rect x="2050" y="0" width="10" height="1440" fill="rgb(50,50,50)"/>
|
||||||
|
<rect x="2060" y="0" width="10" height="1440" fill="rgb(49,49,49)"/>
|
||||||
|
<rect x="2070" y="0" width="10" height="1440" fill="rgb(48,48,48)"/>
|
||||||
|
<rect x="2080" y="0" width="10" height="1440" fill="rgb(47,47,47)"/>
|
||||||
|
<rect x="2090" y="0" width="10" height="1440" fill="rgb(46,46,46)"/>
|
||||||
|
<rect x="2100" y="0" width="10" height="1440" fill="rgb(45,45,45)"/>
|
||||||
|
<rect x="2110" y="0" width="10" height="1440" fill="rgb(44,44,44)"/>
|
||||||
|
<rect x="2120" y="0" width="10" height="1440" fill="rgb(43,43,43)"/>
|
||||||
|
<rect x="2130" y="0" width="10" height="1440" fill="rgb(42,42,42)"/>
|
||||||
|
<rect x="2140" y="0" width="10" height="1440" fill="rgb(41,41,41)"/>
|
||||||
|
<rect x="2150" y="0" width="10" height="1440" fill="rgb(40,40,40)"/>
|
||||||
|
<rect x="2160" y="0" width="10" height="1440" fill="rgb(39,39,39)"/>
|
||||||
|
<rect x="2170" y="0" width="10" height="1440" fill="rgb(38,38,38)"/>
|
||||||
|
<rect x="2180" y="0" width="10" height="1440" fill="rgb(37,37,37)"/>
|
||||||
|
<rect x="2190" y="0" width="10" height="1440" fill="rgb(36,36,36)"/>
|
||||||
|
<rect x="2200" y="0" width="10" height="1440" fill="rgb(35,35,35)"/>
|
||||||
|
<rect x="2210" y="0" width="10" height="1440" fill="rgb(34,34,34)"/>
|
||||||
|
<rect x="2220" y="0" width="10" height="1440" fill="rgb(33,33,33)"/>
|
||||||
|
<rect x="2230" y="0" width="10" height="1440" fill="rgb(32,32,32)"/>
|
||||||
|
<rect x="2240" y="0" width="10" height="1440" fill="rgb(31,31,31)"/>
|
||||||
|
<rect x="2250" y="0" width="10" height="1440" fill="rgb(30,30,30)"/>
|
||||||
|
<rect x="2260" y="0" width="10" height="1440" fill="rgb(29,29,29)"/>
|
||||||
|
<rect x="2270" y="0" width="10" height="1440" fill="rgb(28,28,28)"/>
|
||||||
|
<rect x="2280" y="0" width="10" height="1440" fill="rgb(27,27,27)"/>
|
||||||
|
<rect x="2290" y="0" width="10" height="1440" fill="rgb(26,26,26)"/>
|
||||||
|
<rect x="2300" y="0" width="10" height="1440" fill="rgb(25,25,25)"/>
|
||||||
|
<rect x="2310" y="0" width="10" height="1440" fill="rgb(24,24,24)"/>
|
||||||
|
<rect x="2320" y="0" width="10" height="1440" fill="rgb(23,23,23)"/>
|
||||||
|
<rect x="2330" y="0" width="10" height="1440" fill="rgb(22,22,22)"/>
|
||||||
|
<rect x="2340" y="0" width="10" height="1440" fill="rgb(21,21,21)"/>
|
||||||
|
<rect x="2350" y="0" width="10" height="1440" fill="rgb(20,20,20)"/>
|
||||||
|
<rect x="2360" y="0" width="10" height="1440" fill="rgb(19,19,19)"/>
|
||||||
|
<rect x="2370" y="0" width="10" height="1440" fill="rgb(18,18,18)"/>
|
||||||
|
<rect x="2380" y="0" width="10" height="1440" fill="rgb(17,17,17)"/>
|
||||||
|
<rect x="2390" y="0" width="10" height="1440" fill="rgb(16,16,16)"/>
|
||||||
|
<rect x="2400" y="0" width="10" height="1440" fill="rgb(15,15,15)"/>
|
||||||
|
<rect x="2410" y="0" width="10" height="1440" fill="rgb(14,14,14)"/>
|
||||||
|
<rect x="2420" y="0" width="10" height="1440" fill="rgb(13,13,13)"/>
|
||||||
|
<rect x="2430" y="0" width="10" height="1440" fill="rgb(12,12,12)"/>
|
||||||
|
<rect x="2440" y="0" width="10" height="1440" fill="rgb(11,11,11)"/>
|
||||||
|
<rect x="2450" y="0" width="10" height="1440" fill="rgb(10,10,10)"/>
|
||||||
|
<rect x="2460" y="0" width="10" height="1440" fill="rgb(9,9,9)"/>
|
||||||
|
<rect x="2470" y="0" width="10" height="1440" fill="rgb(8,8,8)"/>
|
||||||
|
<rect x="2480" y="0" width="10" height="1440" fill="rgb(7,7,7)"/>
|
||||||
|
<rect x="2490" y="0" width="10" height="1440" fill="rgb(6,6,6)"/>
|
||||||
|
<rect x="2500" y="0" width="10" height="1440" fill="rgb(5,5,5)"/>
|
||||||
|
<rect x="2510" y="0" width="10" height="1440" fill="rgb(4,4,4)"/>
|
||||||
|
<rect x="2520" y="0" width="10" height="1440" fill="rgb(3,3,3)"/>
|
||||||
|
<rect x="2530" y="0" width="10" height="1440" fill="rgb(2,2,2)"/>
|
||||||
|
<rect x="2540" y="0" width="10" height="1440" fill="rgb(1,1,1)"/>
|
||||||
|
<rect x="2550" y="0" width="10" height="1440" fill="rgb(0,0,0)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,53 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
|
||||||
|
<rect width="1920" height="1080" fill="#ffffff"/>
|
||||||
|
<text x="960.0" y="100" text-anchor="middle" font-family="sans-serif" font-size="54" fill="#1a1a2e" font-weight="bold">Zoom: die 16 hellsten Abstufungen</text>
|
||||||
|
<rect x="60.00" y="220" width="101.25" height="500" fill="rgb(255,255,255)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="110.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">255</text>
|
||||||
|
<text x="110.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFF</text>
|
||||||
|
<rect x="173.25" y="220" width="101.25" height="500" fill="rgb(254,254,254)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="223.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">254</text>
|
||||||
|
<text x="223.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFE</text>
|
||||||
|
<rect x="286.50" y="220" width="101.25" height="500" fill="rgb(253,253,253)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="337.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">253</text>
|
||||||
|
<text x="337.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFD</text>
|
||||||
|
<rect x="399.75" y="220" width="101.25" height="500" fill="rgb(252,252,252)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="450.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">252</text>
|
||||||
|
<text x="450.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFC</text>
|
||||||
|
<rect x="513.00" y="220" width="101.25" height="500" fill="rgb(251,251,251)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="563.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">251</text>
|
||||||
|
<text x="563.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFB</text>
|
||||||
|
<rect x="626.25" y="220" width="101.25" height="500" fill="rgb(250,250,250)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="676.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">250</text>
|
||||||
|
<text x="676.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFA</text>
|
||||||
|
<rect x="739.50" y="220" width="101.25" height="500" fill="rgb(249,249,249)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="790.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">249</text>
|
||||||
|
<text x="790.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF9</text>
|
||||||
|
<rect x="852.75" y="220" width="101.25" height="500" fill="rgb(248,248,248)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="903.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">248</text>
|
||||||
|
<text x="903.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF8</text>
|
||||||
|
<rect x="966.00" y="220" width="101.25" height="500" fill="rgb(247,247,247)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="1016.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">247</text>
|
||||||
|
<text x="1016.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF7</text>
|
||||||
|
<rect x="1079.25" y="220" width="101.25" height="500" fill="rgb(246,246,246)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="1129.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">246</text>
|
||||||
|
<text x="1129.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF6</text>
|
||||||
|
<rect x="1192.50" y="220" width="101.25" height="500" fill="rgb(245,245,245)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="1243.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">245</text>
|
||||||
|
<text x="1243.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF5</text>
|
||||||
|
<rect x="1305.75" y="220" width="101.25" height="500" fill="rgb(244,244,244)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="1356.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">244</text>
|
||||||
|
<text x="1356.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF4</text>
|
||||||
|
<rect x="1419.00" y="220" width="101.25" height="500" fill="rgb(243,243,243)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="1469.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">243</text>
|
||||||
|
<text x="1469.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF3</text>
|
||||||
|
<rect x="1532.25" y="220" width="101.25" height="500" fill="rgb(242,242,242)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="1582.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">242</text>
|
||||||
|
<text x="1582.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF2</text>
|
||||||
|
<rect x="1645.50" y="220" width="101.25" height="500" fill="rgb(241,241,241)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="1696.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">241</text>
|
||||||
|
<text x="1696.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF1</text>
|
||||||
|
<rect x="1758.75" y="220" width="101.25" height="500" fill="rgb(240,240,240)" stroke="#1a1a2e" stroke-width="3"/>
|
||||||
|
<text x="1809.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">240</text>
|
||||||
|
<text x="1809.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF0</text>
|
||||||
|
<text x="960.0" y="1020" text-anchor="middle" font-family="sans-serif" font-size="28" fill="#4a4a6a" font-style="italic">jede Stufe = Unterschied von 1/255 ≈ 0,4% Helligkeit</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80">
|
||||||
|
<defs>
|
||||||
|
<pattern id="diagonalStripes" patternUnits="userSpaceOnUse" width="80" height="80" patternTransform="rotate(135)">
|
||||||
|
<rect width="40" height="80" fill="#e3f2fd"/>
|
||||||
|
<rect x="40" width="40" height="80" fill="#ffffff"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="100%" height="100%" fill="url(#diagonalStripes)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 401 B |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user