DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wissen: Kategoriewahl und Filter ohne Systemmenue

Browse Source 
Filipe: "wieso sieht das so scheisse aus?" -- zum aufgeklappten
Auswahlmenue der Kategorie. Er hat recht, und die Ursache ist dieselbe
wie bei der Rollenwahl: Ein AUFGEKLAPPTES <select> laesst sich nicht
gestalten. Es kommt vom Betriebssystem, in Windows-Weiss, mitten in
einer dunklen Oberflaeche. Bei zwanzig Eintraegen kam dazu, dass man in
so einer Liste nichts findet.

KATEGORIEWAHL: jetzt dieselben sechs Welten, dieselben Farben und
dieselben Symbole wie die Kacheln auf der Seite. Man waehlt aus
demselben Regal, in dem man sonst stoebert. Unter der Wahl steht die
Beschreibung der gewaehlten Kategorie -- die Zeile, die beim
Einsortieren die eigentliche Frage beantwortet.

Nichts ist vorausgewaehlt (ausser man laedt aus einer Kategorie heraus
hoch). Die stille Vorbelegung war der Grund, warum eine PDF ueber
TikTok LIVE Studio unter "TikTok - Grundlagen" landete.

FILTER Stufe und Geraet: ebenfalls Schalter statt Menue. Zwei bis vier
Werte, die sich nie aendern -- dafuer ein Menue zu oeffnen ist ein Klick
zu viel.

Der Tag-Filter bleibt bewusst ein Auswahlfeld: Tags wachsen mit dem
Bestand, eine Schalterreihe waere irgendwann zwei Zeilen lang.

Geprueft: 20 Kategorien in 6 Welten, nichts vorausgewaehlt, Filter
setzen die Adresse (?stufe=einsteiger), Handy ohne Ueberlauf, 0
Konsolenfehler. Testeintrag landete unter der gewaehlten Kategorie.
This commit is contained in:
DogFatherGit
2026-08-31 12:14:18 +02:00
parent 389d8c1213
commit e14d9d5042
15 changed files with 244 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/wissen.css
+85
View File
@@ -324,3 +324,88 @@
border: 1px solid rgba(95, 201, 154, .3); border: 1px solid rgba(95, 201, 154, .3);
border-radius: var(--radius-klein); border-radius: var(--radius-klein);
} }
/* ===================================================================
Kategoriewahl und Filterschalter (31.08.2026).
Beides ersetzt ein <select>. Der Grund ist derselbe wie bei der
Rollenwahl: Ein AUFGEKLAPPTES Systemmenue laesst sich nicht
gestalten -- es kam als weisses Windows-Menue mitten in der dunklen
Oberflaeche. Bei zwanzig Kategorien kam dazu, dass man in so einer
Liste nichts findet.
Hier stehen dieselben sechs Welten und dieselben Farben wie auf den
Kacheln der Seite: Man waehlt aus demselben Regal, in dem man sonst
stoebert.
=================================================================== */
.katwahl { display: grid; gap: 14px; margin-top: 4px; }
.katwahl__welt { --w: var(--akzent); }
.katwahl__welt[data-welt="tiktok"] { --w: #3fbdf5; }
.katwahl__welt[data-welt="aufbau"] { --w: #8a76ff; }
.katwahl__welt[data-welt="bildton"] { --w: #5fc99a; }
.katwahl__welt[data-welt="technik"] { --w: #e8b877; }
.katwahl__welt[data-welt="inhalt"] { --w: #e88fb4; }
.katwahl__welt[data-welt="hilfe"] { --w: #8e9cb0; }
.katwahl__weltname {
margin: 0 0 6px; font-size: .7rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: color-mix(in srgb, var(--w) 55%, #ffffff);
}
.katwahl__reihe { display: flex; gap: 6px; flex-wrap: wrap; }
.katwahl__knopf {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 13px; cursor: pointer; text-align: left;
background: linear-gradient(#1a2230, #151c28);
border: 1px solid var(--rand); border-radius: 10px;
color: var(--text-leise); font: inherit; font-size: .83rem;
transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.katwahl__knopf:hover { color: var(--text); border-color: color-mix(in srgb, var(--w) 45%, transparent); }
.katwahl__knopf:focus-visible {
outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
}
.katwahl__knopf[data-an="ja"] {
color: #fff; font-weight: 600;
border-color: color-mix(in srgb, var(--w) 65%, transparent);
background: linear-gradient(color-mix(in srgb, var(--w) 20%, #1a2230),
color-mix(in srgb, var(--w) 11%, #151c28));
box-shadow: 0 4px 14px -9px var(--w);
}
.katwahl__symbol {
width: 17px; height: 17px; flex: none;
fill: none; stroke: var(--w); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.katwahl__name { white-space: nowrap; }
/* ---------- Filterschalter ------------------------------------------------ */
.filterreihe { display: inline-flex; gap: 4px; }
.filterreihe__knopf {
padding: 7px 12px; cursor: pointer;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--rand); border-radius: 8px;
color: var(--text-still); font: inherit; font-size: .82rem;
transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.filterreihe__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
.filterreihe__knopf[data-an="ja"] {
color: #fff; font-weight: 600;
border-color: rgba(63, 189, 245, .55);
background: rgba(63, 189, 245, .16);
}
.filterreihe__knopf:focus-visible {
outline: none; box-shadow: 0 0 0 3px rgba(63, 189, 245, .3);
}
@media (max-width: 620px) {
.katwahl__knopf { flex: 1 1 100%; }
.filterreihe { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.katwahl__knopf, .filterreihe__knopf { transition: none; }
}
workspace/assets/js/wissen.js
+74 -32
View File
@@ -284,28 +284,44 @@
let filterGefuellt = false; let filterGefuellt = false;
function fuelleFilter() { function fuelleFilter() {
const z = zustand(); const z = zustand();
const setz = (id, eintraege, wert) => { /* Stufe und Geraet als Schalterreihe: zwei bis vier Werte, die sich
nie aendern -- dafuer ein Auswahlmenue zu oeffnen ist ein Klick zu
viel, und aufgeklappt liesse es sich ohnehin nicht gestalten. */
const reihe = (id, eintraege, wert, feldname) => {
const f = $(id); const f = $(id);
f.textContent = ''; f.textContent = '';
const alle = document.createElement('option'); for (const [w, name] of [['', 'Alle'], ...eintraege]) {
alle.value = ''; alle.textContent = 'Alle'; const b = el('button', 'filterreihe__knopf', name);
f.append(alle); b.type = 'button';
for (const [w, name] of eintraege) { b.setAttribute('role', 'radio');
const o = document.createElement('option'); const an = (wert || '') === w;
o.value = w; o.textContent = name; b.setAttribute('aria-checked', an ? 'true' : 'false');
f.append(o); if (an) b.dataset.an = 'ja';
if (w) b.dataset.wert = w;
b.addEventListener('click', () => setzeZustand({ [feldname]: w }));
f.append(b);
} }
f.value = wert || '';
}; };
setz('f-stufe', Object.entries(aufbau.stufen), z.stufe); reihe('f-stufe', Object.entries(aufbau.stufen), z.stufe, 'stufe');
setz('f-geraet', [['pc', 'PC'], ['handy', 'Handy']], z.geraet); reihe('f-geraet', [['pc', 'PC'], ['handy', 'Handy']], z.geraet, 'geraet');
setz('f-tag', aufbau.tags.map((t) => [t, '#' + t]), z.tag);
/* Die Tags wachsen mit dem Bestand -- dafuer bleibt ein Auswahlfeld
richtig, eine Schalterreihe waere irgendwann zwei Zeilen lang. */
const f = $('f-tag');
f.textContent = '';
const alle = document.createElement('option');
alle.value = ''; alle.textContent = 'Alle';
f.append(alle);
for (const tg of aufbau.tags) {
const o = document.createElement('option');
o.value = tg; o.textContent = '#' + tg;
f.append(o);
}
f.value = z.tag || '';
$('q').value = z.q; $('q').value = z.q;
if (filterGefuellt) return; if (filterGefuellt) return;
filterGefuellt = true; filterGefuellt = true;
$('f-stufe').addEventListener('change', () => setzeZustand({ stufe: $('f-stufe').value }));
$('f-geraet').addEventListener('change', () => setzeZustand({ geraet: $('f-geraet').value }));
$('f-tag').addEventListener('change', () => setzeZustand({ tag: $('f-tag').value })); $('f-tag').addEventListener('change', () => setzeZustand({ tag: $('f-tag').value }));
$('f-weg').addEventListener('click', () => setzeZustand({ k: '', q: '', stufe: '', geraet: '', tag: '' })); $('f-weg').addEventListener('click', () => setzeZustand({ k: '', q: '', stufe: '', geraet: '', tag: '' }));
let warte = null; let warte = null;
@@ -317,6 +333,24 @@
window.addEventListener('popstate', laden_); window.addEventListener('popstate', laden_);
/* ---------- Kategoriewahl ------------------------------------------------ */
function setzeKategorie(schluessel) {
for (const b of document.querySelectorAll('.katwahl__knopf')) {
const an = b.dataset.kategorie === schluessel;
if (an) b.dataset.an = 'ja'; else delete b.dataset.an;
b.setAttribute('aria-checked', an ? 'true' : 'false');
}
const hinweis = $('n-kat-hinweis');
if (hinweis) {
const k = aufbau?.kategorien.find((x) => x.schluessel === schluessel);
hinweis.textContent = k ? k.beschreibung : 'Noch keine Kategorie gewählt.';
}
}
const gewaehlteKategorie = () =>
document.querySelector('.katwahl__knopf[data-an="ja"]')?.dataset.kategorie || '';
/* ---------- Formular ------------------------------------------------------ */ /* ---------- Formular ------------------------------------------------------ */
function formularOeffnen(eintrag) { function formularOeffnen(eintrag) {
@@ -335,7 +369,7 @@
nicht bewusst aendert, merkt es nicht. Vorbelegt wird nur, wenn nicht bewusst aendert, merkt es nicht. Vorbelegt wird nur, wenn
man aus EINER Kategorie heraus hochlaedt -- dann ist es eine man aus EINER Kategorie heraus hochlaedt -- dann ist es eine
informierte Annahme, keine geratene. */ informierte Annahme, keine geratene. */
$('n-kategorie').value = eintrag ? eintrag.kategorie : (zustand().k || ''); setzeKategorie(eintrag ? eintrag.kategorie : (zustand().k || ''));
$('n-stufe').value = eintrag ? eintrag.stufe : 'einsteiger'; $('n-stufe').value = eintrag ? eintrag.stufe : 'einsteiger';
$('n-geraet').value = eintrag ? eintrag.geraet : 'egal'; $('n-geraet').value = eintrag ? eintrag.geraet : 'egal';
$('n-tags').value = eintrag ? eintrag.tags.join(', ') : ''; $('n-tags').value = eintrag ? eintrag.tags.join(', ') : '';
@@ -366,25 +400,32 @@
f.append(o); f.append(o);
} }
}; };
/* Nach Welten gruppiert -- dieselbe Gliederung wie auf der Seite. /* Nach Welten gruppiert -- dieselbe Gliederung und dieselben Farben
Zwanzig Eintraege in einer flachen Liste findet man nicht. */ wie die Kacheln auf der Seite. Man waehlt aus demselben Regal, in
dem man sonst stoebert. */
const kf = $('n-kategorie'); const kf = $('n-kategorie');
kf.textContent = ''; kf.textContent = '';
const platzhalter = document.createElement('option');
platzhalter.value = '';
platzhalter.textContent = '— Kategorie wählen —';
platzhalter.disabled = true;
kf.append(platzhalter);
for (const welt of aufbau.welten) { for (const welt of aufbau.welten) {
const gruppe = document.createElement('optgroup'); const kats = aufbau.kategorien.filter((x) => x.welt === welt.schluessel);
gruppe.label = welt.name; if (!kats.length) continue;
for (const k of aufbau.kategorien.filter((x) => x.welt === welt.schluessel)) { const gruppe = el('div', 'katwahl__welt');
const o = document.createElement('option'); gruppe.dataset.welt = welt.schluessel;
o.value = k.schluessel; gruppe.append(el('p', 'katwahl__weltname', welt.name));
o.textContent = k.name; const reihe = el('div', 'katwahl__reihe');
gruppe.append(o); for (const k of kats) {
const b = el('button', 'katwahl__knopf');
b.type = 'button';
b.dataset.kategorie = k.schluessel;
b.setAttribute('role', 'radio');
b.setAttribute('aria-checked', 'false');
b.title = k.beschreibung;
b.append(symbol(k.symbol, 'katwahl__symbol'));
b.append(el('span', 'katwahl__name', k.name));
b.addEventListener('click', () => setzeKategorie(k.schluessel));
reihe.append(b);
} }
if (gruppe.children.length) kf.append(gruppe); gruppe.append(reihe);
kf.append(gruppe);
} }
setz('n-stufe', Object.entries(aufbau.stufen)); setz('n-stufe', Object.entries(aufbau.stufen));
setz('n-geraet', Object.entries(aufbau.geraete)); setz('n-geraet', Object.entries(aufbau.geraete));
@@ -466,7 +507,7 @@
const angaben = { const angaben = {
titel: $('n-titel').value.trim(), titel: $('n-titel').value.trim(),
beschreibung: $('n-beschreibung').value.trim(), beschreibung: $('n-beschreibung').value.trim(),
kategorie: $('n-kategorie').value, kategorie: gewaehlteKategorie(),
stufe: $('n-stufe').value, stufe: $('n-stufe').value,
geraet: $('n-geraet').value, geraet: $('n-geraet').value,
tags: $('n-tags').value, tags: $('n-tags').value,
@@ -476,7 +517,8 @@
if (angaben.titel.length < 3) { $('n-fehler').textContent = 'Der Titel fehlt.'; return; } if (angaben.titel.length < 3) { $('n-fehler').textContent = 'Der Titel fehlt.'; return; }
if (!angaben.kategorie) { if (!angaben.kategorie) {
$('n-fehler').textContent = 'Wähle die Kategorie aus, in der die Anleitung stehen soll.'; $('n-fehler').textContent = 'Wähle die Kategorie aus, in der die Anleitung stehen soll.';
$('n-kategorie').focus(); $('n-kategorie').scrollIntoView({ block: 'center', behavior: 'smooth' });
$('n-kategorie').querySelector('.katwahl__knopf')?.focus();
return; return;
} }
workspace/aufgaben.html
+5 -5
View File
@@ -7,9 +7,9 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -134,7 +134,7 @@
</form> </form>
</dialog> </dialog>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/aufgaben.js?v=202608311131" defer></script> <script src="assets/js/aufgaben.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/bereich.html
+6 -6
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/bereich.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -98,7 +98,7 @@
</main> </main>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/bereich.js?v=202608311131" defer></script> <script src="assets/js/bereich.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/calls.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/calls.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/calls.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -49,8 +49,8 @@
</main> </main>
<script src="assets/js/ki.js?v=202608311131" defer></script> <script src="assets/js/ki.js?v=202608311213" defer></script>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/calls.js?v=202608311131" defer></script> <script src="assets/js/calls.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/dateien.html
+6 -6
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/dateien.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -88,7 +88,7 @@
</main> </main>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/dateien.js?v=202608311131" defer></script> <script src="assets/js/dateien.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/index.html
+2 -2
View File
@@ -25,7 +25,7 @@
type="image/webp" media="(max-width: 899px)" /> type="image/webp" media="(max-width: 899px)" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
</head> </head>
<body class="gate"> <body class="gate">
@@ -143,6 +143,6 @@
</p> </p>
</main> </main>
<script src="assets/js/gate.js?v=202608311131" defer></script> <script src="assets/js/gate.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/kalender.html
+6 -6
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/kalender.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -94,7 +94,7 @@
</main> </main>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/kalender.js?v=202608311131" defer></script> <script src="assets/js/kalender.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/personen.html
+6 -6
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/personen.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/personen.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -93,7 +93,7 @@
</main> </main>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/personen.js?v=202608311131" defer></script> <script src="assets/js/personen.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/profil.html
+6 -6
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/profil.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/profil.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -127,7 +127,7 @@
</main> </main>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/profil.js?v=202608311131" defer></script> <script src="assets/js/profil.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/report.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/report.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/report.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -86,8 +86,8 @@
</main> </main>
<script src="assets/js/ki.js?v=202608311131" defer></script> <script src="assets/js/ki.js?v=202608311213" defer></script>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/report.js?v=202608311131" defer></script> <script src="assets/js/report.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/scouting.html
+6 -6
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/scouting.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -124,7 +124,7 @@
</div> </div>
</div> </div>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/scouting.js?v=202608311131" defer></script> <script src="assets/js/scouting.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/start.html
+4 -4
View File
@@ -7,8 +7,8 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -56,7 +56,7 @@
</p> </p>
</main> </main>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/start.js?v=202608311131" defer></script> <script src="assets/js/start.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/startcheck.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/startcheck.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -65,8 +65,8 @@
</main> </main>
<script src="assets/js/ki.js?v=202608311131" defer></script> <script src="assets/js/ki.js?v=202608311213" defer></script>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/startcheck.js?v=202608311131" defer></script> <script src="assets/js/startcheck.js?v=202608311213" defer></script>
</body> </body>
</html> </html>
workspace/wissen.html
+17 -12
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" /> <meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" /> <link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/gate.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/start.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311213" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202608311131" /> <link rel="stylesheet" href="assets/css/wissen.css?v=202608311213" />
</head> </head>
<body class="start"> <body class="start">
@@ -79,10 +79,10 @@
<input id="q" type="search" placeholder="Anleitung suchen – Titel, Beschreibung oder Tag" aria-label="Suchen" maxlength="80" /> <input id="q" type="search" placeholder="Anleitung suchen – Titel, Beschreibung oder Tag" aria-label="Suchen" maxlength="80" />
</div> </div>
<div class="suchleiste__filter"> <div class="suchleiste__filter">
<label class="feld-schild" for="f-stufe">Stufe</label> <span class="feld-schild">Stufe</span>
<select id="f-stufe"><option value="">Alle</option></select> <div class="filterreihe" id="f-stufe" role="radiogroup" aria-label="Stufe"></div>
<label class="feld-schild" for="f-geraet">Gerät</label> <span class="feld-schild">Gerät</span>
<select id="f-geraet"><option value="">Alle</option></select> <div class="filterreihe" id="f-geraet" role="radiogroup" aria-label="Gerät"></div>
<label class="feld-schild" for="f-tag">Tag</label> <label class="feld-schild" for="f-tag">Tag</label>
<select id="f-tag"><option value="">Alle</option></select> <select id="f-tag"><option value="">Alle</option></select>
<button type="button" class="knopf-still" id="f-weg" hidden>Filter zurücksetzen</button> <button type="button" class="knopf-still" id="f-weg" hidden>Filter zurücksetzen</button>
@@ -119,8 +119,13 @@
<input id="n-beschreibung" maxlength="400" placeholder="In einem Satz: Was lernt man hier?" /> <input id="n-beschreibung" maxlength="400" placeholder="In einem Satz: Was lernt man hier?" />
</div> </div>
<div class="feld feld--breit"> <div class="feld feld--breit">
<label class="feld-schild" for="n-kategorie">Hauptkategorie</label> <span class="feld-schild">Hauptkategorie</span>
<select id="n-kategorie" required></select> <!-- Kein Auswahlmenü: Zwanzig Einträge in einem aufgeklappten
Systemmenü sind unlesbar, und gestalten lässt es sich nicht
(weisses Windows-Menü in dunkler Oberfläche). Hier stehen
dieselben sechs Welten wie auf der Seite. -->
<div class="katwahl" id="n-kategorie" role="radiogroup" aria-label="Hauptkategorie"></div>
<p class="leise" id="n-kat-hinweis">Noch keine Kategorie gewählt.</p>
</div> </div>
<div class="feld"> <div class="feld">
<label class="feld-schild" for="n-stufe">Stufe</label> <label class="feld-schild" for="n-stufe">Stufe</label>
@@ -165,7 +170,7 @@
</main> </main>
<script src="assets/js/kopf.js?v=202608311131" defer></script> <script src="assets/js/kopf.js?v=202608311213" defer></script>
<script src="assets/js/wissen.js?v=202608311131" defer></script> <script src="assets/js/wissen.js?v=202608311213" defer></script>
</body> </body>
</html> </html>