Workspace: Wissens-Bibliothek -- 20 Kategorien, Suche, Filter, Pflege
Wichtigster Befund vorab: Es gab noch KEINEN PDF-Bereich. Weder auf der Website (28 Seiten, keine davon Anleitungen) noch auf dem Server (null PDFs). Es wurde also nichts umstrukturiert, sondern neu gebaut -- und damit war die erste Frage nicht "wie sieht es aus", sondern "wie kommen die PDFs spaeter rein". Eine feste Liste im Code waere nach drei Monaten unbrauchbar gewesen. Filipe hat entschieden: eigener Pflegebereich, und alles nur fuer das Team. Die Bibliothek liegt deshalb komplett im Workspace hinter dem Login, nicht auf der oeffentlichen Seite. GLIEDERUNG Zwanzig Kategorien woertlich nach Vorgabe, gebuendelt in sechs Welten: TikTok, Streaming einrichten, Bild & Ton, Uebertragung & Aussehen, Inhalt & Menschen, Hilfe & Schnellstart. Zwanzig gleich aussehende Kacheln untereinander findet niemand -- gebuendelt sucht man erst die Welt, und darin stehen nur noch drei bis vier. Jede Welt hat ihre eigene Farbe, jede Kategorie ihr eigenes Symbol (20 verschiedene, keins doppelt). Die Kategorietexte sind Filipes Beschreibungen -- sie beantworten beim Einsortieren die einzige Frage, die man wirklich hat. Die Gliederung steht im Code, nicht in der Datenbank: Sie ist eine bewusste Ordnung, keine Nutzdaten. JEDE PDF HAT GENAU EINE HAUPTKATEGORIE, alles Weitere laeuft ueber Tags -- so gibt es jede Anleitung nur einmal, sie ist aber ueber mehrere Begriffe auffindbar. Genau wie gefordert. SUCHE UND FILTER Suche ueber Titel, Beschreibung, Tags und Dateiname. Filter nach Stufe (Einsteiger / Fortgeschritten / Profi), Geraet und Tag. Zwei Details: - "PC" zeigt auch die Anleitungen, die fuer BEIDE Geraete gelten -- sonst filtert man sich versehentlich die Haelfte weg. - Der Tag-Filter sucht mit Kommas drumherum, sonst wuerde "pc" auch bei "pc-spiele" anschlagen. Sobald gesucht oder gefiltert wird, verschwinden die Kacheln und es erscheinen Treffer. Wer sucht, will nicht erst noch klicken. Der Zustand steht in der Adresse (?k=obs&tag=...). Damit funktionieren Zurueck-Taste, Neuladen und Weiterschicken. Eine Kategorie, die man niemandem verlinken kann, ist keine Seite. Geprueft. SICHERHEIT Hochgeladen wird nur, was WIRKLICH eine PDF ist -- geprueft an den ersten Bytes (%PDF-), nicht an der Dateiendung. Die kann jeder umbenennen. Geprueft mit einer als .pdf getarnten HTML-Datei mit Skript: abgewiesen. Nur weil diese Pruefung existiert, darf die Datei ueberhaupt im Browser angezeigt werden statt bloss heruntergeladen -- und selbst dann mit strenger CSP und nosniff. Lesen darf jeder Angemeldete, pflegen nur DogFather. Geprueft: Creator und Scout bekommen 403 beim Hochladen und sehen keine Bearbeiten-Knoepfe. Ohne Anmeldung ist auch die Datei selbst nicht erreichbar (401). Bricht das Anlegen nach dem Schreiben ab, wird die Datei wieder geloescht -- sonst laege sie fuer immer verwaist auf der Platte. Beim Bearbeiten wird die Datei bewusst NICHT ersetzt. Wer eine neue Fassung hat, stellt sie neu ein. So bleibt nachvollziehbar, was wann galt. Geprueft: 20 Kacheln, 20 verschiedene Symbole, Kategorie oeffnen, Suche, Tag-Klick, Browser-Zurueck, Handy ohne Ueberlauf, 0 Konsolenfehler.
This commit is contained in:
@@ -0,0 +1,241 @@
|
||||
/* ===================================================================
|
||||
Wissens-Bibliothek.
|
||||
|
||||
Zwanzig Kategorien sind viel. Damit sie trotzdem in einem Blick
|
||||
erfassbar bleiben, sind sie in sechs Welten gebuendelt, und jede Welt
|
||||
hat ihre eigene Farbe. Man sucht dann nicht unter zwanzig gleichen
|
||||
Kacheln, sondern erst die Welt -- und da stehen nur noch drei bis vier.
|
||||
|
||||
Die Farben sind gedeckt und tragen nur den Symbolring, nicht die
|
||||
ganze Kachel. Zwanzig farbige Flaechen waeren ein Flickenteppich.
|
||||
=================================================================== */
|
||||
|
||||
/* ---------- Suche und Filter ---------------------------------------------- */
|
||||
|
||||
.suchleiste {
|
||||
display: grid; gap: 12px; margin-bottom: 30px;
|
||||
padding: 16px 18px;
|
||||
background: rgba(255, 255, 255, .028);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius);
|
||||
}
|
||||
.suchleiste__feld { position: relative; display: flex; align-items: center; }
|
||||
.suchleiste__lupe {
|
||||
position: absolute; left: 13px; width: 17px; height: 17px;
|
||||
fill: none; stroke: var(--text-still); stroke-width: 1.8; stroke-linecap: round;
|
||||
pointer-events: none;
|
||||
}
|
||||
.suchleiste__feld input {
|
||||
width: 100%; padding: 11px 14px 11px 40px;
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text); font: inherit;
|
||||
}
|
||||
.suchleiste__feld input:focus {
|
||||
outline: none; border-color: rgba(63, 189, 245, .6);
|
||||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
||||
}
|
||||
.suchleiste__feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
|
||||
|
||||
.suchleiste__filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||
.suchleiste__filter .feld-schild { margin: 0; }
|
||||
.suchleiste__filter select {
|
||||
padding: 8px 11px; min-width: 118px;
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text); font: inherit; font-size: .85rem;
|
||||
}
|
||||
.suchleiste__filter select:focus {
|
||||
outline: none; border-color: rgba(63, 189, 245, .6);
|
||||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
||||
}
|
||||
|
||||
/* ---------- Bloecke -------------------------------------------------------- */
|
||||
|
||||
.block { margin-bottom: 34px; }
|
||||
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
|
||||
.block__titel {
|
||||
margin: 0; font-size: .78rem; font-weight: 700;
|
||||
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
||||
}
|
||||
.block__zahl {
|
||||
min-width: 22px; padding: 1px 8px; text-align: center;
|
||||
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
||||
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
||||
}
|
||||
|
||||
/* ---------- Kacheln --------------------------------------------------------- */
|
||||
|
||||
.kacheln {
|
||||
display: grid; gap: 11px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
|
||||
}
|
||||
|
||||
.kachel {
|
||||
--w: var(--akzent);
|
||||
position: relative; display: flex; align-items: flex-start; gap: 14px;
|
||||
padding: 15px 16px;
|
||||
text-decoration: none; color: var(--text);
|
||||
border: 1px solid transparent; border-radius: 13px;
|
||||
background:
|
||||
linear-gradient(#111825, #0c1320) padding-box,
|
||||
linear-gradient(150deg,
|
||||
color-mix(in srgb, var(--w) 42%, transparent),
|
||||
rgba(255, 255, 255, .06) 55%,
|
||||
color-mix(in srgb, var(--w) 16%, transparent)) border-box;
|
||||
transition: transform .16s ease, box-shadow .2s ease;
|
||||
}
|
||||
.kachel::after {
|
||||
content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 1px;
|
||||
background: linear-gradient(90deg, transparent,
|
||||
color-mix(in srgb, var(--w) 45%, transparent), transparent);
|
||||
}
|
||||
.kachel:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--w) 85%, transparent);
|
||||
}
|
||||
.kachel:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
|
||||
}
|
||||
.kachel[data-leer="ja"] { opacity: .55; }
|
||||
.kachel[data-leer="ja"]:hover { opacity: 1; }
|
||||
|
||||
.kachel__ring {
|
||||
flex: none; display: grid; place-items: center;
|
||||
width: 42px; height: 42px; border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--w) 13%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--w) 30%, transparent);
|
||||
}
|
||||
.kachel__symbol {
|
||||
width: 21px; height: 21px;
|
||||
fill: none; stroke: var(--w); stroke-width: 1.6;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.kachel__text { min-width: 0; flex: 1; }
|
||||
.kachel__name { display: block; font-size: .93rem; font-weight: 650; line-height: 1.3; }
|
||||
.kachel__beschreibung {
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||||
overflow: hidden; margin-top: 3px;
|
||||
font-size: .78rem; color: var(--text-still); line-height: 1.45;
|
||||
}
|
||||
.kachel__zahl {
|
||||
flex: none; min-width: 26px; padding: 2px 8px; align-self: flex-start;
|
||||
text-align: center; font-size: .75rem; font-weight: 700;
|
||||
color: color-mix(in srgb, var(--w) 55%, #ffffff);
|
||||
background: color-mix(in srgb, var(--w) 12%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--w) 26%, transparent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* Eine Farbe je Welt -- die Reihenfolge folgt der Gliederung. */
|
||||
.block[data-welt="tiktok"] .kachel { --w: #3fbdf5; }
|
||||
.block[data-welt="aufbau"] .kachel { --w: #8a76ff; }
|
||||
.block[data-welt="bildton"] .kachel { --w: #5fc99a; }
|
||||
.block[data-welt="technik"] .kachel { --w: #e8b877; }
|
||||
.block[data-welt="inhalt"] .kachel { --w: #e88fb4; }
|
||||
.block[data-welt="hilfe"] .kachel { --w: #8e9cb0; }
|
||||
|
||||
/* ---------- Karte einer Anleitung -------------------------------------------- */
|
||||
|
||||
.karten { display: grid; gap: 10px; }
|
||||
|
||||
.pdf {
|
||||
padding: 15px 17px;
|
||||
background: rgba(255, 255, 255, .03);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
transition: border-color .18s ease;
|
||||
}
|
||||
.pdf:hover { border-color: rgba(255, 255, 255, .18); }
|
||||
.pdf[data-wichtig="ja"] {
|
||||
border-color: rgba(232, 192, 125, .32);
|
||||
background: rgba(232, 192, 125, .045);
|
||||
}
|
||||
|
||||
.pdf__kopf { display: flex; gap: 14px; align-items: flex-start; }
|
||||
.pdf__ring {
|
||||
flex: none; display: grid; place-items: center;
|
||||
width: 38px; height: 38px; border-radius: 11px;
|
||||
background: rgba(63, 189, 245, .1);
|
||||
border: 1px solid rgba(63, 189, 245, .24);
|
||||
}
|
||||
.pdf__symbol {
|
||||
width: 19px; height: 19px;
|
||||
fill: none; stroke: var(--akzent); stroke-width: 1.6;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.pdf__mitte { min-width: 0; flex: 1; }
|
||||
.pdf__titel { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.35; }
|
||||
.pdf__text { margin: 4px 0 0; font-size: .86rem; color: var(--text-leise); max-width: 78ch; }
|
||||
.pdf__fuss { margin: 9px 0 0; font-size: .75rem; color: var(--text-still); }
|
||||
|
||||
.pdf__marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
|
||||
.marke-stufe, .marke-geraet, .marke-wichtig, .marke-tag {
|
||||
padding: 3px 9px; border-radius: 999px;
|
||||
font: inherit; font-size: .71rem; font-weight: 600;
|
||||
border: 1px solid var(--rand); color: var(--text-still);
|
||||
background: transparent;
|
||||
}
|
||||
.marke-stufe[data-stufe="einsteiger"] {
|
||||
color: #5fc99a; border-color: rgba(95, 201, 154, .38); background: rgba(95, 201, 154, .1);
|
||||
}
|
||||
.marke-stufe[data-stufe="fortgeschritten"] {
|
||||
color: #e8b877; border-color: rgba(232, 184, 119, .38); background: rgba(232, 184, 119, .1);
|
||||
}
|
||||
.marke-stufe[data-stufe="profi"] {
|
||||
color: #e88fb4; border-color: rgba(232, 143, 180, .4); background: rgba(232, 143, 180, .1);
|
||||
}
|
||||
.marke-geraet { color: var(--text-leise); }
|
||||
.marke-wichtig {
|
||||
color: #e8c07d; border-color: rgba(232, 192, 125, .4); background: rgba(232, 192, 125, .1);
|
||||
}
|
||||
.marke-tag { cursor: pointer; transition: color .16s ease, border-color .16s ease; }
|
||||
.marke-tag:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .42); }
|
||||
|
||||
.pdf__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
|
||||
|
||||
/* ---------- Formular ---------------------------------------------------------- */
|
||||
|
||||
.haken { display: flex; align-items: center; gap: 9px; font-size: .87rem; cursor: pointer; }
|
||||
.haken input { width: 17px; height: 17px; accent-color: var(--akzent); cursor: pointer; }
|
||||
|
||||
.tag-vorschlag { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
|
||||
.tag-knopf {
|
||||
padding: 4px 10px; cursor: pointer;
|
||||
background: transparent; border: 1px dashed var(--rand); border-radius: 999px;
|
||||
color: var(--text-still); font: inherit; font-size: .74rem;
|
||||
transition: color .16s ease, border-color .16s ease;
|
||||
}
|
||||
.tag-knopf:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .45); border-style: solid; }
|
||||
|
||||
#n-datei {
|
||||
width: 100%; padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, .04);
|
||||
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text-leise); font: inherit; font-size: .85rem; cursor: pointer;
|
||||
}
|
||||
#n-datei::file-selector-button {
|
||||
margin-right: 12px; padding: 6px 13px; cursor: pointer;
|
||||
background: rgba(63, 189, 245, .12);
|
||||
border: 1px solid rgba(63, 189, 245, .3); border-radius: 8px;
|
||||
color: var(--akzent); font: inherit; font-size: .8rem; font-weight: 600;
|
||||
}
|
||||
|
||||
.leer-hinweis {
|
||||
display: grid; gap: 12px; justify-items: center;
|
||||
padding: 34px 22px; margin-bottom: 26px; text-align: center;
|
||||
color: var(--text-still); font-size: .92rem;
|
||||
border: 1px dashed var(--rand); border-radius: var(--radius);
|
||||
}
|
||||
.leer-hinweis p { margin: 0; max-width: 52ch; }
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.kacheln { grid-template-columns: 1fr; }
|
||||
.suchleiste__filter { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; }
|
||||
.suchleiste__filter .knopf-still { grid-column: 1 / -1; justify-self: start; }
|
||||
.pdf__ring { display: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kachel, .pdf, .marke-tag, .tag-knopf { transition: none; }
|
||||
.kachel:hover { transform: none; }
|
||||
}
|
||||
@@ -21,6 +21,7 @@
|
||||
{ name: 'Creator-Profile', phase: 1, rollen: ['admin', 'scout'], ziel: 'profil.html' },
|
||||
{ name: 'Mein Profil', phase: 1, rollen: ['creator'], ziel: 'profil.html' },
|
||||
{ name: 'Start-Check', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'startcheck.html' },
|
||||
{ name: 'Wissens-Bibliothek', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'wissen.html' },
|
||||
{ name: 'Aufgaben', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'aufgaben.html' },
|
||||
{ name: 'Kalender', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'kalender.html' },
|
||||
{ name: 'Dateien', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'dateien.html' },
|
||||
|
||||
@@ -0,0 +1,444 @@
|
||||
/* ===================================================================
|
||||
Wissens-Bibliothek.
|
||||
|
||||
Zwei Ansichten, eine Seite: die Übersicht mit den Kacheln und die
|
||||
Liste innerhalb einer Kategorie. Der Zustand steht in der Adresse
|
||||
(?k=...), damit Zurück, Neuladen und Weiterschicken funktionieren --
|
||||
eine Kategorie, die man niemandem verlinken kann, ist keine Seite.
|
||||
|
||||
Sobald gesucht oder gefiltert wird, verschwinden die Kacheln und es
|
||||
erscheinen Treffer. Wer sucht, will nicht erst noch klicken.
|
||||
=================================================================== */
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
let aufbau = null;
|
||||
let bearbeite = null; // id, wenn ein vorhandener Eintrag geändert wird
|
||||
|
||||
const el = (tag, klasse, text) => {
|
||||
const k = document.createElement(tag);
|
||||
if (klasse) k.className = klasse;
|
||||
if (text !== undefined) k.textContent = text;
|
||||
return k;
|
||||
};
|
||||
const melde = (t) => { $('fehler').textContent = t || ''; };
|
||||
const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '');
|
||||
const groesse = (b) => (b >= 1048576 ? (b / 1048576).toFixed(1) + ' MB' : Math.round(b / 1024) + ' KB');
|
||||
|
||||
function symbol(name, klasse) {
|
||||
const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
s.setAttribute('viewBox', '0 0 24 24');
|
||||
s.setAttribute('aria-hidden', 'true');
|
||||
if (klasse) s.setAttribute('class', klasse);
|
||||
const u = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
||||
u.setAttribute('href', '#s-' + name);
|
||||
s.append(u);
|
||||
return s;
|
||||
}
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
return a;
|
||||
}
|
||||
|
||||
/* ---------- Zustand in der Adresse ------------------------------------- */
|
||||
|
||||
const zustand = () => {
|
||||
const p = new URLSearchParams(location.search);
|
||||
return {
|
||||
k: p.get('k') || '', q: p.get('q') || '',
|
||||
stufe: p.get('stufe') || '', geraet: p.get('geraet') || '', tag: p.get('tag') || '',
|
||||
};
|
||||
};
|
||||
|
||||
function setzeZustand(neu, ersetzen = false) {
|
||||
const z = { ...zustand(), ...neu };
|
||||
const p = new URLSearchParams();
|
||||
for (const [n, w] of Object.entries(z)) if (w) p.set(n, w);
|
||||
const ziel = location.pathname + (p.toString() ? '?' + p : '');
|
||||
if (ersetzen) history.replaceState(null, '', ziel); else history.pushState(null, '', ziel);
|
||||
/* Gefiltert wird auf dem Server, nicht im Browser. Sonst muesste die
|
||||
ganze Bibliothek beim ersten Aufruf mitgeladen werden, auch wenn
|
||||
man nur eine Kategorie sehen will. */
|
||||
laden_();
|
||||
}
|
||||
|
||||
const filtertAktiv = () => {
|
||||
const z = zustand();
|
||||
return !!(z.q || z.stufe || z.geraet || z.tag);
|
||||
};
|
||||
|
||||
/* ---------- Kachelübersicht -------------------------------------------- */
|
||||
|
||||
function uebersicht(ziel, neuLetzte) {
|
||||
/* Neu & wichtig zuerst -- der Einstieg für alle, die nicht suchen,
|
||||
sondern sehen wollen, was dazugekommen ist. */
|
||||
if (neuLetzte.length) {
|
||||
const s = el('section', 'block');
|
||||
const kopf = el('div', 'block__kopf');
|
||||
kopf.append(el('h2', 'block__titel', 'Neu & wichtig'));
|
||||
s.append(kopf);
|
||||
const box = el('div', 'karten');
|
||||
for (const e of neuLetzte) box.append(karte(e));
|
||||
s.append(box);
|
||||
ziel.append(s);
|
||||
}
|
||||
|
||||
for (const welt of aufbau.welten) {
|
||||
const kats = aufbau.kategorien.filter((k) => k.welt === welt.schluessel);
|
||||
if (!kats.length) continue;
|
||||
const s = el('section', 'block');
|
||||
/* Traegt die Farbe der Welt an alle Kacheln darin weiter. */
|
||||
s.dataset.welt = welt.schluessel;
|
||||
const kopf = el('div', 'block__kopf');
|
||||
kopf.append(el('h2', 'block__titel', welt.name));
|
||||
const summe = kats.reduce((n, k) => n + k.anzahl, 0);
|
||||
kopf.append(el('span', 'block__zahl', String(summe)));
|
||||
s.append(kopf);
|
||||
|
||||
const raster = el('div', 'kacheln');
|
||||
for (const k of kats) {
|
||||
const a = el('a', 'kachel');
|
||||
a.href = '?k=' + encodeURIComponent(k.schluessel);
|
||||
a.addEventListener('click', (e) => { e.preventDefault(); setzeZustand({ k: k.schluessel, q: '' }); });
|
||||
if (!k.anzahl) a.dataset.leer = 'ja';
|
||||
|
||||
const ring = el('span', 'kachel__ring');
|
||||
ring.append(symbol(k.symbol, 'kachel__symbol'));
|
||||
a.append(ring);
|
||||
|
||||
const text = el('span', 'kachel__text');
|
||||
text.append(el('span', 'kachel__name', k.name));
|
||||
text.append(el('span', 'kachel__beschreibung', k.beschreibung));
|
||||
a.append(text);
|
||||
|
||||
const zahl = el('span', 'kachel__zahl', k.anzahl ? String(k.anzahl) : '–');
|
||||
zahl.title = k.anzahl === 1 ? '1 Anleitung' : k.anzahl + ' Anleitungen';
|
||||
a.append(zahl);
|
||||
raster.append(a);
|
||||
}
|
||||
s.append(raster);
|
||||
ziel.append(s);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Karte einer Anleitung -------------------------------------- */
|
||||
|
||||
function karte(e) {
|
||||
const kat = aufbau.kategorien.find((k) => k.schluessel === e.kategorie);
|
||||
const k = el('article', 'pdf');
|
||||
if (e.wichtig) k.dataset.wichtig = 'ja';
|
||||
|
||||
const kopf = el('div', 'pdf__kopf');
|
||||
const ring = el('span', 'pdf__ring');
|
||||
ring.append(symbol(kat ? kat.symbol : 'haken', 'pdf__symbol'));
|
||||
kopf.append(ring);
|
||||
|
||||
const mitte = el('div', 'pdf__mitte');
|
||||
mitte.append(el('h3', 'pdf__titel', e.titel));
|
||||
if (e.beschreibung) mitte.append(el('p', 'pdf__text', e.beschreibung));
|
||||
|
||||
const marken = el('div', 'pdf__marken');
|
||||
const stufe = el('span', 'marke-stufe', aufbau.stufen[e.stufe] || e.stufe);
|
||||
stufe.dataset.stufe = e.stufe;
|
||||
marken.append(stufe);
|
||||
if (e.geraet && e.geraet !== 'egal') marken.append(el('span', 'marke-geraet', aufbau.geraete[e.geraet]));
|
||||
if (e.wichtig) marken.append(el('span', 'marke-wichtig', 'Wichtig'));
|
||||
for (const t of e.tags) {
|
||||
const b = el('button', 'marke-tag', '#' + t);
|
||||
b.type = 'button';
|
||||
b.title = 'Nach diesem Tag filtern';
|
||||
b.addEventListener('click', () => setzeZustand({ tag: t }));
|
||||
marken.append(b);
|
||||
}
|
||||
mitte.append(marken);
|
||||
|
||||
const fuss = el('p', 'pdf__fuss');
|
||||
fuss.append(document.createTextNode(
|
||||
(kat ? kat.name + ' · ' : '')
|
||||
+ 'veröffentlicht ' + datum(e.veroeffentlicht)
|
||||
+ (e.aktualisiert && e.aktualisiert !== e.veroeffentlicht
|
||||
? ' · aktualisiert ' + datum(e.aktualisiert) : '')
|
||||
+ ' · ' + groesse(e.groesse)));
|
||||
mitte.append(fuss);
|
||||
kopf.append(mitte);
|
||||
k.append(kopf);
|
||||
|
||||
const knoepfe = el('div', 'pdf__knoepfe');
|
||||
const ansehen = el('a', 'knopf knopf--klein', 'Öffnen');
|
||||
ansehen.href = `/workspace/api/wissen/${e.id}/datei?modus=ansehen`;
|
||||
ansehen.target = '_blank';
|
||||
ansehen.rel = 'noopener';
|
||||
const laden = el('a', 'knopf-still', 'Herunterladen');
|
||||
laden.href = `/workspace/api/wissen/${e.id}/datei`;
|
||||
knoepfe.append(ansehen, laden);
|
||||
|
||||
if (aufbau.darf_pflegen) {
|
||||
const aendern = el('button', 'knopf-still', 'Bearbeiten');
|
||||
aendern.type = 'button';
|
||||
aendern.addEventListener('click', () => formularOeffnen(e));
|
||||
const weg = el('button', 'knopf-still knopf-still--warn', 'Löschen');
|
||||
weg.type = 'button';
|
||||
weg.addEventListener('click', async () => {
|
||||
if (!confirm(`„${e.titel}" wirklich löschen?\n\nDie PDF wird dabei auch vom Server entfernt.`)) return;
|
||||
const a = await hole('/workspace/api/wissen/' + e.id, { method: 'DELETE' });
|
||||
if (!a.ok) { melde('Löschen hat nicht geklappt.'); return; }
|
||||
await laden_();
|
||||
});
|
||||
knoepfe.append(aendern, weg);
|
||||
}
|
||||
k.append(knoepfe);
|
||||
return k;
|
||||
}
|
||||
|
||||
/* ---------- Zeichnen ----------------------------------------------------- */
|
||||
|
||||
let daten = { eintraege: [], neu: [] };
|
||||
|
||||
function zeichne() {
|
||||
const z = zustand();
|
||||
const ziel = $('inhalt');
|
||||
ziel.textContent = '';
|
||||
ziel.setAttribute('aria-busy', 'false');
|
||||
|
||||
/* Kopf an die Ansicht anpassen */
|
||||
const kat = aufbau.kategorien.find((k) => k.schluessel === z.k);
|
||||
if (kat) {
|
||||
$('titel').textContent = kat.name;
|
||||
$('unterzeile').textContent = kat.beschreibung;
|
||||
} else {
|
||||
$('titel').textContent = 'Wissens-Bibliothek';
|
||||
$('unterzeile').textContent = aufbau.gesamt
|
||||
? `${aufbau.gesamt} Anleitung${aufbau.gesamt === 1 ? '' : 'en'} zu TikTok, Livestreaming, Technik und Content.`
|
||||
: 'Noch keine Anleitung eingestellt.';
|
||||
}
|
||||
$('f-weg').hidden = !(filtertAktiv() || z.k);
|
||||
|
||||
/* Suchen oder filtern schlägt die Kachelansicht -- wer sucht, will
|
||||
Treffer sehen, nicht erst noch eine Kachel anklicken. */
|
||||
if (!z.k && !filtertAktiv()) {
|
||||
if (!aufbau.gesamt) {
|
||||
const leer = el('div', 'leer-hinweis');
|
||||
leer.append(el('p', null, 'Die Bibliothek ist noch leer.'));
|
||||
leer.append(el('p', 'leise', aufbau.darf_pflegen
|
||||
? 'Mit „PDF hinzufügen“ oben rechts geht es los. Die zwanzig Kategorien stehen schon bereit.'
|
||||
: 'Sobald DogFather Anleitungen einstellt, erscheinen sie hier.'));
|
||||
ziel.append(leer);
|
||||
}
|
||||
uebersicht(ziel, daten.neu);
|
||||
return;
|
||||
}
|
||||
|
||||
const liste = daten.eintraege;
|
||||
if (!liste.length) {
|
||||
const leer = el('div', 'leer-hinweis');
|
||||
leer.append(el('p', null, kat && !filtertAktiv()
|
||||
? 'In dieser Kategorie liegt noch keine Anleitung.'
|
||||
: 'Dazu wurde nichts gefunden.'));
|
||||
const b = el('button', 'knopf-still', 'Filter zurücksetzen');
|
||||
b.type = 'button';
|
||||
b.addEventListener('click', () => setzeZustand({ k: '', q: '', stufe: '', geraet: '', tag: '' }));
|
||||
leer.append(b);
|
||||
ziel.append(leer);
|
||||
return;
|
||||
}
|
||||
|
||||
const kopf = el('div', 'block__kopf');
|
||||
kopf.append(el('h2', 'block__titel', filtertAktiv() ? 'Treffer' : 'Anleitungen'));
|
||||
kopf.append(el('span', 'block__zahl', String(liste.length)));
|
||||
ziel.append(kopf);
|
||||
|
||||
const box = el('div', 'karten');
|
||||
for (const e of liste) box.append(karte(e));
|
||||
ziel.append(box);
|
||||
}
|
||||
|
||||
async function laden_() {
|
||||
const z = zustand();
|
||||
const p = new URLSearchParams();
|
||||
for (const [n, w] of Object.entries(z)) if (w) p.set(n, w);
|
||||
try {
|
||||
const [a1, a2] = await Promise.all([
|
||||
hole('/workspace/api/wissen/aufbau'),
|
||||
hole('/workspace/api/wissen?' + p),
|
||||
]);
|
||||
if (!a1.ok || !a2.ok) { melde('Die Bibliothek konnte nicht geladen werden.'); return; }
|
||||
aufbau = await a1.json();
|
||||
daten = await a2.json();
|
||||
fuelleFilter();
|
||||
zeichne();
|
||||
} catch { /* umgeleitet */ }
|
||||
}
|
||||
|
||||
/* ---------- Filterfelder ------------------------------------------------- */
|
||||
|
||||
let filterGefuellt = false;
|
||||
function fuelleFilter() {
|
||||
const z = zustand();
|
||||
const setz = (id, eintraege, wert) => {
|
||||
const f = $(id);
|
||||
f.textContent = '';
|
||||
const alle = document.createElement('option');
|
||||
alle.value = ''; alle.textContent = 'Alle';
|
||||
f.append(alle);
|
||||
for (const [w, name] of eintraege) {
|
||||
const o = document.createElement('option');
|
||||
o.value = w; o.textContent = name;
|
||||
f.append(o);
|
||||
}
|
||||
f.value = wert || '';
|
||||
};
|
||||
setz('f-stufe', Object.entries(aufbau.stufen), z.stufe);
|
||||
setz('f-geraet', [['pc', 'PC'], ['handy', 'Handy']], z.geraet);
|
||||
setz('f-tag', aufbau.tags.map((t) => [t, '#' + t]), z.tag);
|
||||
$('q').value = z.q;
|
||||
|
||||
if (filterGefuellt) return;
|
||||
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-weg').addEventListener('click', () => setzeZustand({ k: '', q: '', stufe: '', geraet: '', tag: '' }));
|
||||
let warte = null;
|
||||
$('q').addEventListener('input', () => {
|
||||
clearTimeout(warte);
|
||||
warte = setTimeout(() => setzeZustand({ q: $('q').value.trim() }, true), 260);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('popstate', laden_);
|
||||
|
||||
/* ---------- Formular ------------------------------------------------------ */
|
||||
|
||||
function formularOeffnen(eintrag) {
|
||||
bearbeite = eintrag ? eintrag.id : null;
|
||||
$('neu-titel').textContent = eintrag ? 'Anleitung bearbeiten' : 'Neue Anleitung';
|
||||
$('n-speichern').textContent = eintrag ? 'Änderungen speichern' : 'Veröffentlichen';
|
||||
/* Beim Bearbeiten wird die Datei nicht ersetzt -- wer eine neue
|
||||
Fassung hat, stellt sie neu ein und löscht die alte. So bleibt
|
||||
nachvollziehbar, was wann galt. */
|
||||
$('n-datei-block').hidden = !!eintrag;
|
||||
$('n-titel').value = eintrag ? eintrag.titel : '';
|
||||
$('n-beschreibung').value = eintrag ? (eintrag.beschreibung || '') : '';
|
||||
$('n-kategorie').value = eintrag ? eintrag.kategorie : (zustand().k || aufbau.kategorien[0].schluessel);
|
||||
$('n-stufe').value = eintrag ? eintrag.stufe : 'einsteiger';
|
||||
$('n-geraet').value = eintrag ? eintrag.geraet : 'egal';
|
||||
$('n-tags').value = eintrag ? eintrag.tags.join(', ') : '';
|
||||
$('n-wichtig').checked = !!(eintrag && eintrag.wichtig);
|
||||
$('n-datum').value = eintrag ? eintrag.veroeffentlicht : new Date().toISOString().slice(0, 10);
|
||||
$('n-fehler').textContent = '';
|
||||
$('neu-block').hidden = false;
|
||||
$('neu-auf').hidden = true;
|
||||
$('n-titel').focus();
|
||||
$('neu-block').scrollIntoView({ block: 'start', behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function formularSchliessen() {
|
||||
$('neu-block').hidden = true;
|
||||
$('neu-auf').hidden = !aufbau.darf_pflegen;
|
||||
$('neu-form').reset();
|
||||
$('n-dateiname').textContent = 'Höchstens 40 MB. Nur echte PDF-Dateien.';
|
||||
bearbeite = null;
|
||||
}
|
||||
|
||||
function fuelleFormular() {
|
||||
const setz = (id, eintraege) => {
|
||||
const f = $(id);
|
||||
f.textContent = '';
|
||||
for (const [w, name] of eintraege) {
|
||||
const o = document.createElement('option');
|
||||
o.value = w; o.textContent = name;
|
||||
f.append(o);
|
||||
}
|
||||
};
|
||||
setz('n-kategorie', aufbau.kategorien.map((k) => [k.schluessel, k.nr + '. ' + k.name]));
|
||||
setz('n-stufe', Object.entries(aufbau.stufen));
|
||||
setz('n-geraet', Object.entries(aufbau.geraete));
|
||||
|
||||
const v = $('n-vorschlaege');
|
||||
v.textContent = '';
|
||||
for (const t of aufbau.tag_vorschlaege) {
|
||||
const b = el('button', 'tag-knopf', '#' + t);
|
||||
b.type = 'button';
|
||||
b.addEventListener('click', () => {
|
||||
const jetzt = $('n-tags').value.split(',').map((x) => x.trim()).filter(Boolean);
|
||||
if (jetzt.includes(t)) return;
|
||||
jetzt.push(t);
|
||||
$('n-tags').value = jetzt.join(', ');
|
||||
});
|
||||
v.append(b);
|
||||
}
|
||||
}
|
||||
|
||||
$('neu-auf').addEventListener('click', () => formularOeffnen(null));
|
||||
$('neu-zu').addEventListener('click', formularSchliessen);
|
||||
$('n-datei').addEventListener('change', () => {
|
||||
const d = $('n-datei').files[0];
|
||||
$('n-dateiname').textContent = d
|
||||
? `${d.name} · ${groesse(d.size)}`
|
||||
: 'Höchstens 40 MB. Nur echte PDF-Dateien.';
|
||||
});
|
||||
|
||||
$('neu-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
$('n-fehler').textContent = '';
|
||||
const knopf = $('n-speichern');
|
||||
const angaben = {
|
||||
titel: $('n-titel').value.trim(),
|
||||
beschreibung: $('n-beschreibung').value.trim(),
|
||||
kategorie: $('n-kategorie').value,
|
||||
stufe: $('n-stufe').value,
|
||||
geraet: $('n-geraet').value,
|
||||
tags: $('n-tags').value,
|
||||
wichtig: $('n-wichtig').checked ? '1' : '0',
|
||||
veroeffentlicht: $('n-datum').value,
|
||||
};
|
||||
if (angaben.titel.length < 3) { $('n-fehler').textContent = 'Der Titel fehlt.'; return; }
|
||||
|
||||
knopf.disabled = true;
|
||||
try {
|
||||
let a;
|
||||
if (bearbeite) {
|
||||
a = await hole('/workspace/api/wissen/' + bearbeite, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(angaben),
|
||||
});
|
||||
} else {
|
||||
const datei = $('n-datei').files[0];
|
||||
if (!datei) { $('n-fehler').textContent = 'Wähle eine PDF-Datei aus.'; return; }
|
||||
const kopf = { 'Content-Type': 'application/pdf', 'x-dateiname': encodeURIComponent(datei.name) };
|
||||
for (const [n, w] of Object.entries(angaben)) kopf['x-' + n] = encodeURIComponent(w);
|
||||
a = await hole('/workspace/api/wissen', { method: 'POST', headers: kopf, body: datei });
|
||||
}
|
||||
if (!a.ok) {
|
||||
$('n-fehler').textContent = (await a.json().catch(() => ({}))).fehler || 'Das hat nicht geklappt.';
|
||||
return;
|
||||
}
|
||||
formularSchliessen();
|
||||
melde('');
|
||||
$('n-stand').textContent = '';
|
||||
await laden_();
|
||||
} catch { /* umgeleitet */ } finally { knopf.disabled = false; }
|
||||
});
|
||||
|
||||
/* ---------- Start --------------------------------------------------------- */
|
||||
|
||||
(async () => {
|
||||
let ich;
|
||||
try {
|
||||
const a = await hole('/workspace/api/ich');
|
||||
if (!a.ok) { location.assign('/workspace/'); return; }
|
||||
ich = await a.json();
|
||||
} catch { return; }
|
||||
$('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
|
||||
|
||||
await laden_();
|
||||
if (aufbau) {
|
||||
fuelleFormular();
|
||||
$('neu-auf').hidden = !aufbau.darf_pflegen;
|
||||
}
|
||||
})();
|
||||
})();
|
||||
@@ -0,0 +1,151 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>Wissens-Bibliothek · Creator Workspace</title>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css" />
|
||||
<link rel="stylesheet" href="assets/css/start.css" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css" />
|
||||
<link rel="stylesheet" href="assets/css/wissen.css" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
|
||||
<header class="kopfleiste">
|
||||
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
|
||||
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M14.5 5.5 8 12l6.5 6.5" />
|
||||
</svg>
|
||||
<span class="zurueck-knopf__text">Zurück</span>
|
||||
</button>
|
||||
<p class="marke"><a class="zurueck" href="start.html">Creator Workspace</a> · Wissen</p>
|
||||
<div class="kopfleiste__rechts">
|
||||
<span class="wer" id="wer">…</span>
|
||||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Symbolvorrat. Einmal im Dokument, überall per <use> verwendbar -->
|
||||
<svg style="display:none" aria-hidden="true">
|
||||
<defs>
|
||||
<g id="s-tiktok"><path d="M14 4v9.2a3.3 3.3 0 1 1-2.6-3.2"/><path d="M14 4c.4 2.2 2 3.7 4.4 3.9"/></g>
|
||||
<g id="s-schild"><path d="M12 3.6 5.6 6.2v5c0 3.6 2.5 6.9 6.4 8.2 3.9-1.3 6.4-4.6 6.4-8.2v-5z"/><path d="m9.4 11.8 1.9 1.9 3.4-3.6"/></g>
|
||||
<g id="s-pokal"><path d="M8 4h8v4.5a4 4 0 0 1-8 0z"/><path d="M8 5.5H5.6v1.2A2.6 2.6 0 0 0 8.2 9.3"/><path d="M16 5.5h2.4v1.2a2.6 2.6 0 0 1-2.6 2.6"/><path d="M12 12.6V16"/><path d="M8.8 19.4h6.4l-.8-3.4H9.6z"/></g>
|
||||
<g id="s-glocke"><path d="M6.6 17.2c1-.9 1.4-2 1.4-3.4v-2.5a4 4 0 0 1 8 0v2.5c0 1.4.4 2.5 1.4 3.4z"/><path d="M10.2 20a2 2 0 0 0 3.6 0"/></g>
|
||||
<g id="s-monitor"><rect x="3.4" y="5" width="17.2" height="11.4" rx="1.6"/><path d="M9 20h6M12 16.6V20"/></g>
|
||||
<g id="s-ebenen"><path d="m12 3.6 8 4-8 4-8-4z"/><path d="m4.6 12 7.4 3.7 7.4-3.7"/><path d="m4.6 16.2 7.4 3.7 7.4-3.7"/></g>
|
||||
<g id="s-handy"><rect x="7" y="2.8" width="10" height="18.4" rx="2.2"/><path d="M10.6 5.6h2.8"/><path d="M11.2 18.4h1.6"/></g>
|
||||
<g id="s-kamera"><rect x="3" y="6.6" width="13.4" height="10.8" rx="2"/><path d="m16.4 12 4.6-3v6z"/></g>
|
||||
<g id="s-licht"><circle cx="12" cy="10.6" r="4.2"/><path d="M12 2.6v1.8M12 16.8v1.6M4.2 10.6H2.6M21.4 10.6h-1.6M6.5 5.1 5.3 3.9M18.7 3.9l-1.2 1.2M6.5 16.1l-1.2 1.2M18.7 17.3l-1.2-1.2"/><path d="M10.2 20.8h3.6"/></g>
|
||||
<g id="s-mikrofon"><rect x="9.4" y="2.8" width="5.2" height="10.4" rx="2.6"/><path d="M6 11.4a6 6 0 0 0 12 0"/><path d="M12 17.4V21M9.4 21h5.2"/></g>
|
||||
<g id="s-regler"><path d="M6.5 3.6v6.2M6.5 14.2v6.2M12 3.6v10.6M12 18.6v1.8M17.5 3.6v2.2M17.5 10.2v10.2"/><circle cx="6.5" cy="12" r="2.2"/><circle cx="12" cy="16.4" r="2.2"/><circle cx="17.5" cy="8" r="2.2"/></g>
|
||||
<g id="s-stecker"><path d="M9 2.8v5.4M15 2.8v5.4"/><path d="M6.4 8.2h11.2v3a5.6 5.6 0 0 1-11.2 0z"/><path d="M12 16.8V21"/></g>
|
||||
<g id="s-wlan"><path d="M3.2 8.6a13 13 0 0 1 17.6 0"/><path d="M6.4 12.2a8.4 8.4 0 0 1 11.2 0"/><path d="M9.5 15.7a4 4 0 0 1 5 0"/><circle cx="12" cy="19.2" r="1.1" fill="currentColor" stroke="none"/></g>
|
||||
<g id="s-rahmen"><rect x="3.2" y="4.6" width="17.6" height="14.8" rx="2"/><path d="M3.2 9.2h17.6"/><path d="M8 9.2v10.2"/></g>
|
||||
<g id="s-zahnrad"><circle cx="12" cy="12" r="3.2"/><path d="M12 2.8v2.6M12 18.6v2.6M21.2 12h-2.6M5.4 12H2.8M18.5 5.5l-1.9 1.9M7.4 16.6l-1.9 1.9M18.5 18.5l-1.9-1.9M7.4 7.4 5.5 5.5"/></g>
|
||||
<g id="s-kalender"><rect x="3.6" y="5" width="16.8" height="15" rx="2"/><path d="M3.6 9.8h16.8M8.4 2.8v4M15.6 2.8v4"/><path d="M8 13.6h3M8 16.8h8"/></g>
|
||||
<g id="s-menschen"><circle cx="9" cy="8.4" r="3.2"/><path d="M3.4 19.4c0-3.1 2.5-5.6 5.6-5.6s5.6 2.5 5.6 5.6"/><path d="M16.2 6.2a3 3 0 0 1 0 5.8"/><path d="M17 14.2c2.1.6 3.6 2.5 3.6 5.2"/></g>
|
||||
<g id="s-wachstum"><path d="M3.6 18.6 9 12l3.6 3.2 7.2-8"/><path d="M15.4 6.6h4.8v4.8"/></g>
|
||||
<g id="s-werkzeug"><path d="M15.4 7.4a3.8 3.8 0 0 1 5-5l-2.7 2.7.6 2.4 2.4.6 2.7-2.7"/><path d="M15.4 7.4 4.2 18.6a2 2 0 0 0 2.8 2.8L18.2 10.2"/></g>
|
||||
<g id="s-haken"><rect x="4" y="3.4" width="16" height="17.2" rx="2.2"/><path d="m8.2 9.6 2 2 4-4.2"/><path d="m8.2 16 2 2 4-4.2"/></g>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<main class="inhalt inhalt--breit">
|
||||
|
||||
<section class="kopf-zeile">
|
||||
<div>
|
||||
<p class="marke">Anleitungen & Checklisten</p>
|
||||
<h1 class="titel" id="titel">Wissens-Bibliothek</h1>
|
||||
<p class="unterzeile" id="unterzeile">Alles zu TikTok, Livestreaming, Technik und Content – an einer Stelle.</p>
|
||||
</div>
|
||||
<div class="steuerung">
|
||||
<button type="button" class="knopf knopf--klein" id="neu-auf" hidden>PDF hinzufügen</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||||
|
||||
<!-- Suche und Filter: gelten immer, auch innerhalb einer Kategorie -->
|
||||
<section class="suchleiste">
|
||||
<div class="suchleiste__feld">
|
||||
<svg class="suchleiste__lupe" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="6.5"/><path d="M15.8 15.8 20 20"/>
|
||||
</svg>
|
||||
<input id="q" type="search" placeholder="Anleitung suchen – Titel, Beschreibung oder Tag" aria-label="Suchen" maxlength="80" />
|
||||
</div>
|
||||
<div class="suchleiste__filter">
|
||||
<label class="feld-schild" for="f-stufe">Stufe</label>
|
||||
<select id="f-stufe"><option value="">Alle</option></select>
|
||||
<label class="feld-schild" for="f-geraet">Gerät</label>
|
||||
<select id="f-geraet"><option value="">Alle</option></select>
|
||||
<label class="feld-schild" for="f-tag">Tag</label>
|
||||
<select id="f-tag"><option value="">Alle</option></select>
|
||||
<button type="button" class="knopf-still" id="f-weg" hidden>Filter zurücksetzen</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Formular zum Anlegen und Ändern (nur DogFather) -->
|
||||
<section class="neu" id="neu-block" hidden>
|
||||
<h2 class="neu__titel" id="neu-titel">Neue Anleitung</h2>
|
||||
<form id="neu-form">
|
||||
<div class="neu__raster">
|
||||
<div class="feld feld--breit">
|
||||
<label class="feld-schild" for="n-titel">Titel</label>
|
||||
<input id="n-titel" maxlength="140" required placeholder="z. B. OBS für TikTok LIVE einrichten" />
|
||||
</div>
|
||||
<div class="feld feld--breit">
|
||||
<label class="feld-schild" for="n-beschreibung">Kurze Beschreibung</label>
|
||||
<input id="n-beschreibung" maxlength="400" placeholder="In einem Satz: Was lernt man hier?" />
|
||||
</div>
|
||||
<div class="feld feld--breit">
|
||||
<label class="feld-schild" for="n-kategorie">Hauptkategorie</label>
|
||||
<select id="n-kategorie" required></select>
|
||||
</div>
|
||||
<div class="feld">
|
||||
<label class="feld-schild" for="n-stufe">Stufe</label>
|
||||
<select id="n-stufe"></select>
|
||||
</div>
|
||||
<div class="feld">
|
||||
<label class="feld-schild" for="n-geraet">Gerät</label>
|
||||
<select id="n-geraet"></select>
|
||||
</div>
|
||||
<div class="feld">
|
||||
<label class="feld-schild" for="n-datum">Veröffentlicht am</label>
|
||||
<input id="n-datum" type="date" />
|
||||
</div>
|
||||
<div class="feld feld--breit">
|
||||
<label class="feld-schild" for="n-tags">Tags <span class="leise">(mit Komma trennen, höchstens 8)</span></label>
|
||||
<input id="n-tags" maxlength="200" placeholder="tiktok, obs, pc" />
|
||||
<div class="tag-vorschlag" id="n-vorschlaege"></div>
|
||||
</div>
|
||||
<div class="feld feld--breit" id="n-datei-block">
|
||||
<label class="feld-schild" for="n-datei">PDF-Datei</label>
|
||||
<input id="n-datei" type="file" accept="application/pdf,.pdf" />
|
||||
<p class="leise" id="n-dateiname">Höchstens 40 MB. Nur echte PDF-Dateien.</p>
|
||||
</div>
|
||||
<div class="feld feld--breit">
|
||||
<label class="haken"><input type="checkbox" id="n-wichtig" /> <span>Als besonders wichtig oben anzeigen</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fehler" id="n-fehler" role="alert" aria-live="polite"></p>
|
||||
<div class="neu__knoepfe">
|
||||
<button type="submit" class="knopf knopf--klein" id="n-speichern">Veröffentlichen</button>
|
||||
<button type="button" class="knopf-still" id="neu-zu">Abbrechen</button>
|
||||
<span class="leise" id="n-stand"></span>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<div id="inhalt" aria-busy="true"><p class="leise">Bibliothek wird geladen …</p></div>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/kopf.js" defer></script>
|
||||
<script src="assets/js/wissen.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user