diff --git a/DeskHub-Webseite/api/public/v1/plugin_webhook.php b/DeskHub-Webseite/api/public/v1/plugin_webhook.php new file mode 100644 index 00000000..4b7f0326 --- /dev/null +++ b/DeskHub-Webseite/api/public/v1/plugin_webhook.php @@ -0,0 +1,50 @@ +&e= + * Das Plugin muss die Berechtigung "api.public" anfordern und prüft die Echtheit jeder Anfrage selbst (siehe plugin_register_webhook()). + * Hier gibt es nur: Methode POST, höchstens 256 KB, Aufruf des Handlers, Antwort als JSON oder Text. + */ +require_once __DIR__ . '/../../../includes/bootstrap.php'; + +header('Cache-Control: no-store'); +header('X-Content-Type-Options: nosniff'); + +function webhook_fail(int $status, string $message): never +{ + http_response_code($status); + header('Content-Type: application/json; charset=utf-8'); + echo json_encode(['error' => $message], JSON_UNESCAPED_UNICODE); + exit; +} + +if (($_SERVER['REQUEST_METHOD'] ?? '') !== 'POST') { + header('Allow: POST'); + webhook_fail(405, 'Nur POST.'); +} +$slug = (string) ($_GET['p'] ?? ''); +$endpoint = (string) ($_GET['e'] ?? ''); +$handler = plugin_state()['webhooks'][$slug][$endpoint] ?? null; +if (!is_callable($handler)) webhook_fail(404, 'Unbekannte Adresse.'); + +$body = (string) file_get_contents('php://input', false, null, 0, 262145); +if (strlen($body) > 262144) webhook_fail(413, 'Anfrage zu groß.'); +$headers = []; +foreach ($_SERVER as $k => $v) { + if (str_starts_with($k, 'HTTP_')) $headers[strtolower(str_replace('_', '-', substr($k, 5)))] = (string) $v; +} +if (isset($_SERVER['CONTENT_TYPE'])) $headers['content-type'] = (string) $_SERVER['CONTENT_TYPE']; + +$result = plugin_guard($slug, fn() => $handler(['method' => 'POST', 'headers' => $headers, 'body' => $body, 'query' => $_GET, 'ip' => client_ip()]), null); +if (!is_array($result)) webhook_fail(500, 'Fehler im Plugin.'); + +http_response_code((int) ($result['status'] ?? 200)); +foreach ((array) ($result['headers'] ?? []) as $name => $value) { + if (preg_match('/^[A-Za-z0-9-]+$/', (string) $name) && !preg_match('/[\r\n]/', (string) $value)) header($name . ': ' . $value); +} +if (isset($result['json'])) { + header('Content-Type: application/json; charset=utf-8'); + echo json_encode($result['json'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); +} else { + echo (string) ($result['body'] ?? ''); +} diff --git a/DeskHub-Webseite/csat.php b/DeskHub-Webseite/csat.php new file mode 100644 index 00000000..8fefe38a --- /dev/null +++ b/DeskHub-Webseite/csat.php @@ -0,0 +1,65 @@ + +
+ +

Link nicht gültig

+

Dieser Bewertungslink ist ungültig oder abgelaufen.

+ +

Vielen Dank!

+

+

Ihre Bewertung für Ticket # ist bei uns angekommen.

+ +

Bereits bewertet

+

Sie haben Ticket # schon bewertet. Vielen Dank!

+ +

Wie zufrieden waren Sie?

+

Ticket # –

+
+
+ +
+ = 1; $i--): ?> + required> + + +
+ +

1 Stern = unzufrieden · 5 Sterne = sehr zufrieden

+ + +
+
+ +
+ diff --git a/DeskHub-Webseite/lang.php b/DeskHub-Webseite/lang.php new file mode 100644 index 00000000..a4d950c3 --- /dev/null +++ b/DeskHub-Webseite/lang.php @@ -0,0 +1,20 @@ + time() + 365 * 86400, + 'path' => '/', + 'secure' => request_is_https(), + 'httponly' => true, + 'samesite' => 'Lax', + ]); +} +header('Cache-Control: no-store'); +redirect(i18n_safe_back((string) ($_GET['back'] ?? '/'))); diff --git a/DeskHub-Webseite/login.php b/DeskHub-Webseite/login.php index 48be92aa..720ac43c 100644 --- a/DeskHub-Webseite/login.php +++ b/DeskHub-Webseite/login.php @@ -5,8 +5,9 @@ if (current_user()) { redirect('/home.php'); } $errors = []; -if ($_SERVER['REQUEST_METHOD'] === 'POST') { - verify_csrf(); +if ($_SERVER['REQUEST_METHOD'] === 'POST' && !csrf_valid()) { + $errors[] = 'Die Anmeldeseite war zu lange geöffnet und die Sitzung ist abgelaufen. Bitte melden Sie sich jetzt noch einmal an.'; +} elseif ($_SERVER['REQUEST_METHOD'] === 'POST') { $email = trim($_POST['email'] ?? ''); $pass = $_POST['password'] ?? ''; @@ -62,6 +63,7 @@ $imprintHtml = get_setting('footer_imprint_html', ''); +
@@ -148,5 +150,10 @@ $imprintHtml = get_setting('footer_imprint_html', ''); Copyright © – Alle Rechte vorbehalten. + diff --git a/DeskHub-Webseite/status.php b/DeskHub-Webseite/status.php new file mode 100644 index 00000000..314ac63c --- /dev/null +++ b/DeskHub-Webseite/status.php @@ -0,0 +1,72 @@ +Seite nicht gefunden

Die angeforderte Seite existiert nicht.

Zurück zur Startseite

'; + require __DIR__ . '/includes/footer_customer.php'; + exit; +} + +$states = status_component_states(); +$overall = status_overall($pdo); +$components = status_components($pdo); +$incidents = status_incidents($pdo, 14); +$open = array_values(array_filter($incidents, fn($i) => $i['status'] !== 'resolved')); +$past = array_values(array_filter($incidents, fn($i) => $i['status'] === 'resolved')); +$incStates = status_incident_states(); + +// Aktualisiert sich selbst, damit eine offene Seite nicht veraltet +header('Cache-Control: no-cache'); +header('Refresh: 120'); +require __DIR__ . '/includes/header_customer.php'; +?> +
+

+
+ +
Stand: Uhr
+
+ + +
+ + +
Betrifft:
+ +
· +
+ +
+ + +
+

Es sind noch keine Dienste eingetragen.

+ $c): $st = $states[$c['status']] ?? $states['operational']; ?> +
+
+ +
+ +
+ +

Vergangene Meldungen (letzte 14 Tage)

+

Keine Störungen in den letzten 14 Tagen.

+ +
+ · · behoben + +
+ +
+ +
+ diff --git a/DeskHub-Webseite/ticket_new.php b/DeskHub-Webseite/ticket_new.php index 75dda7ef..428c8970 100644 --- a/DeskHub-Webseite/ticket_new.php +++ b/DeskHub-Webseite/ticket_new.php @@ -252,6 +252,25 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { } } +// Ticket-Vorlagen: ?template=ID füllt das Formular vor (nur Vorlagen, die für Kunden sichtbar sind) +$ticketTemplates = []; +$activeTemplateId = 0; +try { + $ticketTemplates = ticket_templates_list(get_db(), true); + if ($_SERVER['REQUEST_METHOD'] !== 'POST' && (int) ($_GET['template'] ?? 0) > 0) { + $tpl = ticket_template_get(get_db(), (int) $_GET['template'], true); + if ($tpl) { + $activeTemplateId = (int) $tpl['id']; + $_POST['subject'] = (string) $tpl['subject']; + $_POST['message'] = (string) ($tpl['body'] ?? ''); + if ($tpl['department_id']) $_POST['department_id'] = (string) $tpl['department_id']; + if ($tpl['help_topic_id']) $_POST['help_topic_id'] = (string) $tpl['help_topic_id']; + if ($tpl['priority_id']) $_POST['priority_id'] = (string) $tpl['priority_id']; + } + } +} catch (Throwable $e) { + $ticketTemplates = []; // Datenbank noch nicht aktualisiert: Formular funktioniert wie bisher +} $pageTitle = 'Neues Ticket'; $activePage = 'new'; require __DIR__ . '/includes/header_customer.php'; @@ -266,6 +285,17 @@ require __DIR__ . '/includes/header_customer.php'; Meine Tickets + +
+
Womit können wir helfen? Eine Vorlage füllt das Formular für Sie vor:
+
+ + > + + Ohne Vorlage +
+
+
diff --git a/DeskHub-Webseite/tools/demo-video/compose.sh b/DeskHub-Webseite/tools/demo-video/compose.sh new file mode 100644 index 00000000..dabef33d --- /dev/null +++ b/DeskHub-Webseite/tools/demo-video/compose.sh @@ -0,0 +1,33 @@ +#!/usr/bin/env bash +# tools/demo-video/compose.sh: setzt die Aufnahme (raw.mp4) in ein modernes 1080p-Video: Farbverlauf-Hintergrund, abgerundetes Fenster mit Schatten, +# selbst erzeugte Musik (make_music.js) mit Ein- und Ausblenden. Außerdem eine kurze GIF-Vorschau. +# bash tools/demo-video/compose.sh +set -euo pipefail +RAW="${1:?raw.mp4 fehlt}" +OUT="${2:?Zielordner fehlt}" +HERE="$(cd "$(dirname "$0")" && pwd)" +WORK="$OUT/.build"; rm -rf "$WORK"; mkdir -p "$WORK" +DUR="$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$RAW")" + +# Maske mit runden Ecken (Fenstergröße 1600x1000, Radius 26) +ffmpeg -loglevel error -y -f lavfi -i "color=c=black:s=1600x1000" -frames:v 1 \ + -vf "format=gray,geq=lum='if(lte(hypot(max(max(26-X,X-(W-1-26)),0),max(max(26-Y,Y-(H-1-26)),0)),26),255,0)'" "$WORK/mask.png" + +# Musik +node "$HERE/make_music.js" "$WORK/music.wav" "$RAW.events.json" + +ffmpeg -loglevel error -y -i "$RAW" -loop 1 -framerate 30 -i "$WORK/mask.png" -i "$WORK/music.wav" \ + -f lavfi -i "gradients=s=1920x1080:c0=0A5F95:c1=0E8C7C:x0=0:y0=0:x1=1920:y1=1080:d=$DUR:r=30" \ + -filter_complex "[0:v]scale=1600:1000:flags=lanczos,format=yuva420p[rec];\ +[1:v]format=gray,split[m1][m2];\ +[rec][m1]alphamerge[win];\ +[m2]pad=1760:1160:80:80:black,boxblur=38:3[mb];color=c=black:s=1760x1160,format=yuva420p[blka];[mb]format=gray[mbg];[blka][mbg]alphamerge,colorchannelmixer=aa=0.55[sh];\ +[3:v]format=yuv420p[bg];\ +[bg][sh]overlay=80:-18[t1];[t1][win]overlay=160:40,format=yuv420p[v]" \ + -map "[v]" -map 2:a \ + -c:v libx264 -crf 19 -preset medium -r 30 -c:a aac -b:a 160k -shortest -movflags +faststart "$OUT/deskhub-demo.mp4" + +# GIF-Vorschau: der Teil mit dem digitalen Assistenten (kleiner, für die README) +ffmpeg -loglevel error -y -ss 4 -t 16 -i "$OUT/deskhub-demo.mp4" -an -vf "fps=8,scale=760:-1:flags=lanczos,split[a][b];[a]palettegen=max_colors=128[p];[b][p]paletteuse=dither=bayer:bayer_scale=4" "$OUT/deskhub-demo.gif" +rm -rf "$WORK" +ls -la "$OUT"/deskhub-demo.* diff --git a/DeskHub-Webseite/tools/demo-video/make_music.js b/DeskHub-Webseite/tools/demo-video/make_music.js new file mode 100644 index 00000000..df842198 --- /dev/null +++ b/DeskHub-Webseite/tools/demo-video/make_music.js @@ -0,0 +1,143 @@ +'use strict'; +/** + * tools/demo-video/make_music.js: erzeugt Musik und Geräusche für das Demo-Video selbst (reine Synthese, keine Aufnahmen, keine Samples, + * keine fremden Melodien). Das Stück ist damit ein eigenes Werk ohne Rechte Dritter und nicht bei GEMA oder einer anderen Verwertungsgesellschaft angemeldet. + * node tools/demo-video/make_music.js + * Die Musik folgt den Kapiteln der Aufnahme (Titel, Portal, Mitarbeiterbereich, Assistent, Windows, Android, Abspann): erst weiche Flächen, + * dann Zupf-Arpeggio und Bass, im Mitarbeiterbereich kommt ein leichter Beat dazu, im Assistenten-Kapitel wird es voll, beim Windows-Programm + * wieder ruhiger, vor dem Abspann baut ein Riser auf, und zum Schluss klingt ein großer Akkord aus. Dazu Tipp-, Klick-, Übergangs- und + * Hervorhebungsgeräusche genau zu den Zeitpunkten, die record.js mitgeschrieben hat. + */ +const fs = require('fs'); + +const OUT = process.argv[2] || 'music.wav'; +const info = process.argv[3] && fs.existsSync(process.argv[3]) ? JSON.parse(fs.readFileSync(process.argv[3], 'utf8')) : { duration: parseFloat(process.argv[3] || '100'), events: [] }; +const SECONDS = Math.ceil(info.duration) + 1; +const SR = 44100; +const BPM = 100; +const BEAT = 60 / BPM; +const BAR = 4 * BEAT; +const N = Math.floor(SECONDS * SR); +const M_L = new Float32Array(N), M_R = new Float32Array(N); // Musik +const S_L = new Float32Array(N), S_R = new Float32Array(N); // Geräusche + +const hz = (midi) => 440 * Math.pow(2, (midi - 69) / 12); +const CHORDS = [[57, 60, 64, 67], [53, 57, 60, 64], [48, 52, 55, 59], [55, 59, 62, 64]]; // Am7, Fmaj7, Cmaj7, G6 +const BASS = [45, 41, 36, 43]; +let seed = 987654321; const rnd = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296 * 2 - 1; }; + +// ── Kapitel mit den Zeitpunkten der Aufnahme, Anfänge auf den nächsten Schlag gerastet ── +const chapters = info.events.filter((e) => e.type === 'chapter').map((e) => ({ name: e.name, t: Math.ceil(e.t / BEAT) * BEAT, raw: e.t })); +if (!chapters.length) chapters.push({ name: 'portal', t: 0, raw: 0 }); +const PLAN = { + intro: { bell: 1 }, portal: { arp: 1, bass: 1 }, staff: { arp: 1, bass: 1, kick: 1, hat: 1 }, + assistant: { arp: 1, arp2: 1, bass: 1, kick: 2, hat: 1, shaker: 1 }, windows: { arp: 1, bass: 1, soft: 1 }, + android: { arp: 1, bass: 1, riser: 1 }, outro: { bell: 1, final: 1 }, +}; +const planAt = (t) => { let c = chapters[0]; for (const ch of chapters) if (ch.t <= t + 1e-6) c = ch; return { name: c.name, ...(PLAN[c.name] || {}) }; }; +const chapterStart = (name) => (chapters.find((c) => c.name === name) || {}).raw; + +// ── Klangerzeuger ── +function tone(buf, start, dur, f, gain, pan, kind, attack, release) { + const [bl, br] = buf; + const n0 = Math.floor(start * SR), n1 = Math.min(N, Math.floor((start + dur + release) * SR)); + const gl = gain * (1 - pan), gr = gain * (1 + pan); + for (let i = Math.max(0, n0); i < n1; i++) { + const t = (i - n0) / SR; + let env, s; + if (kind === 'pluck') { env = Math.exp(-t * 5.2) * Math.min(1, t / 0.004); s = 0.7 * Math.sin(2 * Math.PI * f * t) + 0.2 * Math.sin(4 * Math.PI * f * t) + 0.1 * Math.sin(6 * Math.PI * f * t); } + else if (kind === 'bell') { env = Math.exp(-t * 1.7) * Math.min(1, t / 0.003); s = Math.sin(2 * Math.PI * f * t) + 0.5 * Math.sin(2 * Math.PI * f * 2.76 * t) * Math.exp(-t * 3) + 0.25 * Math.sin(2 * Math.PI * f * 5.4 * t) * Math.exp(-t * 6); } + else { env = t < attack ? t / attack : 1; if (t > dur) env *= Math.max(0, 1 - (t - dur) / release); s = Math.sin(2 * Math.PI * f * t) + 0.35 * Math.sin(2 * Math.PI * f * 1.004 * t) + 0.15 * Math.sin(4 * Math.PI * f * t); } + const v = s * env; bl[i] += v * gl; br[i] += v * gr; + } +} +const mus = [M_L, M_R], sfx = [S_L, S_R]; +function kick(start, gain) { + const n0 = Math.floor(start * SR), n1 = Math.min(N, n0 + Math.floor(0.35 * SR)); let ph = 0; + for (let i = n0; i < n1; i++) { const t = (i - n0) / SR; ph += 2 * Math.PI * (48 + 90 * Math.exp(-t * 28)) / SR; const v = Math.sin(ph) * Math.exp(-t * 9) * gain; M_L[i] += v; M_R[i] += v; } +} +function hat(start, gain, len = 0.07) { + const n0 = Math.floor(start * SR), n1 = Math.min(N, n0 + Math.floor(len * SR)); let prev = 0; + for (let i = n0; i < n1; i++) { const t = (i - n0) / SR; const x = rnd(); const hp = x - prev * 0.97; prev = x; const v = hp * Math.exp(-t * (len < 0.05 ? 90 : 60)) * gain; M_L[i] += v * 0.9; M_R[i] += v * 1.1; } +} +/** Rauschen mit gleitender Filterfrequenz: Übergangs-Wusch (auf = true) oder Riser. */ +function sweep(buf, start, dur, gain, from, to, shape) { + const [bl, br] = buf; const n0 = Math.floor(start * SR), n1 = Math.min(N, Math.floor((start + dur) * SR)); let lp = 0, lp2 = 0; + for (let i = Math.max(0, n0); i < n1; i++) { + const k = (i - n0) / (n1 - n0), fc = from * Math.pow(to / from, k), a = Math.min(0.99, 2 * Math.PI * fc / SR); + const x = rnd(); lp += a * (x - lp); lp2 += a * (lp - lp2); + const bp = lp - lp2; // einfacher Bandpass + const env = shape === 'swell' ? Math.pow(k, 1.6) : Math.sin(Math.PI * Math.min(1, k * 1.15)) ** 1.5; + const v = bp * env * gain * 7; bl[i] += v * (1 - 0.3 * (k - .5)); br[i] += v * (1 + 0.3 * (k - .5)); + } +} +function key(t) { const g = 0.05 + 0.02 * rnd(); const f = 1800 + 500 * rnd(); const n0 = Math.floor(t * SR), n1 = Math.min(N, n0 + Math.floor(0.03 * SR)); let prev = 0; + for (let i = n0; i < n1; i++) { const u = (i - n0) / SR; const x = rnd(); const hp = x - prev * 0.9; prev = x; const v = (hp * 0.6 + Math.sin(2 * Math.PI * f * u) * 0.5) * Math.exp(-u * 230) * g; S_L[i] += v; S_R[i] += v; } } +function click(t) { const n0 = Math.floor(t * SR), n1 = Math.min(N, n0 + Math.floor(0.09 * SR)); let ph = 0, prev = 0; + for (let i = n0; i < n1; i++) { const u = (i - n0) / SR; ph += 2 * Math.PI * (880 - 520 * Math.min(1, u * 14)) / SR; const x = rnd(); const hp = x - prev * 0.8; prev = x; const v = (Math.sin(ph) * 0.8 + hp * 0.3) * Math.exp(-u * 60) * 0.13; S_L[i] += v; S_R[i] += v; } } +function pop(t) { const n0 = Math.floor(t * SR), n1 = Math.min(N, n0 + Math.floor(0.2 * SR)); let ph = 0; + for (let i = n0; i < n1; i++) { const u = (i - n0) / SR; ph += 2 * Math.PI * (520 + 520 * Math.min(1, u * 9)) / SR; const v = Math.sin(ph) * Math.exp(-u * 14) * 0.09; S_L[i] += v; S_R[i] += v; } } +function ding(t) { tone(sfx, t, 0.05, 1568, 0.07, -0.1, 'bell', 0, 0.05); tone(sfx, t + 0.0, 0.05, 2349, 0.035, 0.12, 'bell', 0, 0.05); } +function boom(t) { const n0 = Math.floor(t * SR), n1 = Math.min(N, n0 + Math.floor(1.8 * SR)); let ph = 0; + for (let i = n0; i < n1; i++) { const u = (i - n0) / SR; ph += 2 * Math.PI * (38 + 70 * Math.exp(-u * 9)) / SR; const v = Math.sin(ph) * Math.exp(-u * 2.2) * 0.55; M_L[i] += v; M_R[i] += v; } } + +// ── Musik nach Takten ── +const bars = Math.ceil(SECONDS / BAR) + 1; +const finalStart = (chapters.find((c) => c.name === 'outro') || { t: SECONDS - 6 }).t; +for (let bar = 0; bar < bars; bar++) { + const t0 = bar * BAR, ci = Math.floor(bar / 2) % 4, chord = CHORDS[ci]; + const p = planAt(t0), isOutro = t0 >= finalStart - 1e-6; + // Flächen: ständig, im Abspann und beim Windows-Teil etwas anders gewichtet + if (bar % 2 === 0) chord.forEach((m, k) => tone(mus, t0, 2 * BAR - 0.1, hz(m), isOutro ? 0.10 : 0.075, (k - 1.5) * 0.25, 'pad', 1.4, 2.0)); + if (p.bass && !isOutro) { tone(mus, t0, BEAT * 1.5, hz(BASS[ci]), 0.2, 0, 'pad', 0.02, 0.4); tone(mus, t0 + BEAT * 2.5, BEAT * 1.2, hz(BASS[ci]), 0.16, 0, 'pad', 0.02, 0.4); } + for (let s = 0; s < 8; s++) { + const tt = t0 + s * BEAT / 2, q = planAt(tt); + if (q.arp && s % 1 === 0) { + const order = [0, 2, 3, 2, 1, 3, 2, 1]; + tone(mus, tt, 0.5, hz(chord[order[s]] + 12), (q.soft ? 0.08 : 0.11) + (s % 2 ? 0 : 0.03), (s % 4 - 1.5) * 0.18, 'pluck', 0, 0); + if (q.arp2 && s % 2) tone(mus, tt, 0.4, hz(chord[order[(s + 3) % 8]] + 24), 0.05, (s % 4 - 1.5) * -0.2, 'pluck', 0, 0); + } + if (q.bell && s % 4 === 0 && !(isOutro && s % 2)) tone(mus, tt, 1.2, hz(chord[(s / 4 + bar) % 4 | 0] + 12), isOutro ? 0.09 : 0.06, (s - 3) * 0.1, 'bell', 0, 0); + if (q.kick && s % 4 === 0) kick(tt, 0.46); + else if (q.kick === 2 && s % 2 === 0) kick(tt, 0.3); + if (q.hat && s % 2) hat(tt, 0.06); + if (q.shaker) hat(tt + BEAT / 4, 0.025, 0.04); + } +} +// Übergänge in der Musik: Riser vor dem Abspann, großer Schlag und heller Schlussakkord +const outroT = chapterStart('outro'); +if (outroT !== undefined) { + sweep(mus, Math.max(0, outroT - 2.6), 2.6, 0.2, 300, 5200, 'swell'); + boom(outroT); + [60, 64, 67, 72, 76].forEach((m, k) => tone(mus, outroT, 6, hz(m), 0.06, (k - 2) * 0.2, 'pad', 0.4, 2.5)); +} +// einfaches Echo für Raumgefühl (nur Musik) +const D1 = Math.floor(0.375 * SR), D2 = Math.floor(0.5 * SR); +for (let i = D1; i < N; i++) { M_L[i] += M_R[i - D1] * 0.28; M_R[i] += M_L[i - D1] * 0.28; } +for (let i = D2; i < N; i++) { M_L[i] += M_L[i - D2] * 0.14; M_R[i] += M_R[i - D2] * 0.14; } + +// ── Geräusche nach den Ereignissen der Aufnahme ── +let lastKey = -1; +for (const e of info.events) { + if (e.type === 'key') { if (e.t - lastKey > 0.025) key(e.t); lastKey = e.t; } + else if (e.type === 'click') click(e.t); + else if (e.type === 'whoosh') sweep(sfx, Math.max(0, e.t - 0.1), 0.85, 0.075, 350, 3800, 'whoosh'); + else if (e.type === 'pop') pop(e.t); + else if (e.type === 'ding') ding(e.t); +} + +// ── mischen: Musik leiser als Geräusche, normalisieren, sanft ein- und ausblenden ── +const MUSIC_GAIN = 0.85, SFX_GAIN = 1.0; +let peak = 0; for (let i = 0; i < N; i++) { const a = M_L[i] * MUSIC_GAIN + S_L[i] * SFX_GAIN, b = M_R[i] * MUSIC_GAIN + S_R[i] * SFX_GAIN; peak = Math.max(peak, Math.abs(a), Math.abs(b)); } +const g = 0.72 / (peak || 1); +const buf = Buffer.alloc(44 + N * 4); +buf.write('RIFF', 0); buf.writeUInt32LE(36 + N * 4, 4); buf.write('WAVEfmt ', 8); buf.writeUInt32LE(16, 16); buf.writeUInt16LE(1, 20); buf.writeUInt16LE(2, 22); +buf.writeUInt32LE(SR, 24); buf.writeUInt32LE(SR * 4, 28); buf.writeUInt16LE(4, 32); buf.writeUInt16LE(16, 34); buf.write('data', 36); buf.writeUInt32LE(N * 4, 40); +for (let i = 0; i < N; i++) { + const t = i / SR, fade = Math.min(1, t / 1.2) * Math.min(1, (SECONDS - t) / 3.2); + const a = (M_L[i] * MUSIC_GAIN + S_L[i] * SFX_GAIN) * g * fade, b = (M_R[i] * MUSIC_GAIN + S_R[i] * SFX_GAIN) * g * fade; + buf.writeInt16LE(Math.max(-32767, Math.min(32767, Math.round(a * 32767))), 44 + i * 4); + buf.writeInt16LE(Math.max(-32767, Math.min(32767, Math.round(b * 32767))), 46 + i * 4); +} +fs.writeFileSync(OUT, buf); +console.log(`Musik und Geräusche: ${OUT} (${SECONDS} s, ${info.events.length} Ereignisse, Kapitel: ${chapters.map((c) => c.name + '@' + c.raw.toFixed(1)).join(', ')})`); diff --git a/DeskHub-Webseite/tools/demo-video/record.js b/DeskHub-Webseite/tools/demo-video/record.js new file mode 100644 index 00000000..0a607d6f --- /dev/null +++ b/DeskHub-Webseite/tools/demo-video/record.js @@ -0,0 +1,265 @@ +'use strict'; +/** + * tools/demo-video/record.js: nimmt das Demo-Video als echte Bewegung auf (30 Bilder pro Sekunde): Mauszeiger, Tippen, Klicken, Scrollen, + * Hervorhebungen, weiche Übergänge und animierte Bildunterschriften, erst im Browser (mit der Demo-Installation), dann im Windows-Programm. + * Nebenbei schreibt es .events.json (Zeitpunkte von Kapiteln, Klicks, Tastenanschlägen, Übergängen). make_music.js erzeugt daraus + * Musik und Geräusche, die genau zum Bild passen. + * 1. php tools/demo-video/seed_demo.php 2. php -S 127.0.0.1:8097 -t & + * 3. electron tools/demo-video/record.js 4. bash tools/demo-video/compose.sh + */ +const { app, BrowserWindow } = require('electron'); +const { spawn } = require('child_process'); +const fs = require('fs'); +const path = require('path'); + +const OUT = path.resolve(process.argv[2] || 'raw.mp4'); +const BASE = 'http://127.0.0.1:8097'; +const MOCK = path.resolve(__dirname, '..', '..', '..', 'desktop', 'test', 'mock.html'); +const W = 1440, H = 900, FPS = 30; +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); + +app.disableHardwareAcceleration(); + +// ── Gerüst, das in jede Seite eingesetzt wird: Zeiger, Klick-Welle, Hervorhebung, Bildunterschrift, Überblendung ── +const OVERLAY = `(() => { if (window.__ov) return; window.__ov = true; + const st = document.createElement('style'); st.textContent = \` + #__cur{position:fixed;left:0;top:0;width:30px;height:30px;z-index:2147483647;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))} + #__rip{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(14,138,201,.35);border:3px solid #0E8AC9;z-index:2147483646;pointer-events:none;opacity:0} + #__spot{position:fixed;z-index:2147483640;border-radius:16px;box-shadow:0 0 0 9999px rgba(6,18,28,.58),0 0 0 3px rgba(255,255,255,.92),0 0 28px 6px rgba(18,165,148,.55);transition:all .6s cubic-bezier(.2,.8,.2,1);opacity:0;pointer-events:none} + #__cap{position:fixed;left:50%;bottom:34px;transform:translate(-50%,40px);opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);z-index:2147483645;display:flex;align-items:center;gap:14px;background:rgba(8,24,36,.94);color:#fff;border-radius:50px;padding:12px 30px 12px 12px;box-shadow:0 14px 36px rgba(0,0,0,.45);font:600 22px 'Segoe UI',Arial,sans-serif;max-width:1260px} + #__cap.on{opacity:1;transform:translate(-50%,0)} + #__cap .n{flex:none;background:linear-gradient(135deg,#0E7FBF,#12A594);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px} + #__cap small{display:block;font-weight:400;font-size:15px;opacity:.78;margin-top:2px} + #__cover{position:fixed;left:0;top:0;right:0;bottom:0;background:#0b1f2e;z-index:2147483647;opacity:1;transition:opacity .45s ease;pointer-events:none} + html{scroll-behavior:auto!important}\`; + document.documentElement.appendChild(st); + const cur = document.createElement('div'); cur.id = '__cur'; + cur.innerHTML = ''; + const rip = document.createElement('div'); rip.id = '__rip'; + const spot = document.createElement('div'); spot.id = '__spot'; + const cap = document.createElement('div'); cap.id = '__cap'; + const cover = document.createElement('div'); cover.id = '__cover'; + document.documentElement.append(spot, cur, rip, cap, cover); + window.__pos = window.__pos || { x: 700, y: 520 }; + const place = (x, y) => { cur.style.transform = 'translate(' + x + 'px,' + y + 'px)'; }; + place(window.__pos.x, window.__pos.y); + window.__move = (x, y, ms) => new Promise((res) => { const from = { ...window.__pos }, t0 = performance.now(); + const f = (t) => { const k = Math.min(1, (t - t0) / ms), e = k < .5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2; + const lift = Math.sin(k * Math.PI) * 18; + place(from.x + (x - from.x) * e, from.y + (y - from.y) * e - lift); if (k < 1) requestAnimationFrame(f); else { window.__pos = { x, y }; place(x, y); res(); } }; + requestAnimationFrame(f); }); + window.__ripple = (x, y) => { rip.style.left = x + 'px'; rip.style.top = y + 'px'; rip.animate([{ opacity: .9, transform: 'scale(.3)' }, { opacity: 0, transform: 'scale(1.6)' }], { duration: 520, easing: 'ease-out' }); }; + window.__scrollTo = (el, y, ms) => new Promise((res) => { const from = el.scrollTop, t0 = performance.now(); + const f = (t) => { const k = Math.min(1, (t - t0) / ms), e = k < .5 ? 2 * k * k : 1 - Math.pow(-2 * k + 2, 2) / 2; el.scrollTop = from + (y - from) * e; if (k < 1) requestAnimationFrame(f); else res(); }; + requestAnimationFrame(f); }); + window.__caption = (n, text, sub) => { cap.innerHTML = '
' + n + '
' + text + (sub ? '' + sub + '' : '') + '
'; requestAnimationFrame(() => cap.classList.add('on')); }; + window.__hideCaption = () => cap.classList.remove('on'); + window.__spot = (x, y, w, h) => { spot.style.left = x + 'px'; spot.style.top = y + 'px'; spot.style.width = w + 'px'; spot.style.height = h + 'px'; spot.style.opacity = 1; }; + window.__spotOff = () => { spot.style.opacity = 0; }; + window.__cover = (on) => { cover.style.opacity = on ? 1 : 0; }; +})()`; + +let win, ff, latest = null, lastBuf = null, size = null, written = 0, t0 = 0, pump = null; +let step = 0; +const events = []; +const evt = (type, extra) => { if (t0) events.push({ t: +((Date.now() - t0) / 1000).toFixed(3), type, ...(extra || {}) }); }; +const ev = async (js) => { try { return await win.webContents.executeJavaScript(js, true); } catch (e) { console.log('Fehler im Skript:', String(e).slice(0, 160), '\n ', js.slice(0, 120)); return null; } }; + +function startRecording() { + ff = spawn('ffmpeg', ['-loglevel', 'error', '-y', '-f', 'rawvideo', '-pix_fmt', 'bgra', '-s', `${size.width}x${size.height}`, '-r', String(FPS), '-i', '-', + '-vf', `scale=${W}:${H}:flags=lanczos`, '-c:v', 'libx264', '-crf', '15', '-preset', 'fast', '-pix_fmt', 'yuv420p', OUT], { stdio: ['pipe', 'inherit', 'inherit'] }); + t0 = Date.now(); written = 0; + pump = setInterval(() => { + if (!latest) return; + if (latest !== lastBuf) { lastBuf = latest; lastBuf.buf = latest.toBitmap(); } + const target = Math.floor(((Date.now() - t0) * FPS) / 1000); + while (written < target && ff.stdin.writableLength < 150e6) { ff.stdin.write(lastBuf.buf); written += 1; } + }, 8); +} +async function stopRecording() { + clearInterval(pump); + await new Promise((r) => ff.stdin.end(r)); + await new Promise((r) => ff.on('close', r)); +} + +// ── Bausteine für Szenen ── +const find = (spec) => `(() => { const s = ${JSON.stringify(spec)}; if (typeof s === 'string') return document.querySelector(s); + return [...document.querySelectorAll(s.sel)].find((e) => (e.textContent || '').toLowerCase().includes(s.text.toLowerCase()) && e.getBoundingClientRect().width > 0 && (e.innerText || '').trim().length < 400); })()`; +const center = async (spec) => ev(`(() => { const el = ${find(spec)}; if (!el) return null; el.scrollIntoView({ block: 'nearest' }); const r = el.getBoundingClientRect(); return { x: r.left + Math.min(r.width / 2, 120), y: r.top + r.height / 2 }; })()`); +async function move(spec, ms = 800) { const c = await center(spec); if (!c) { console.log('Nicht gefunden:', JSON.stringify(spec)); return null; } await ev(`window.__move(${c.x}, ${c.y}, ${ms})`); return c; } +async function click(spec, { wait = 400, ms = 800 } = {}) { + const c = await move(spec, ms); if (!c) return; + await ev(`window.__ripple(${c.x}, ${c.y})`); evt('click'); await sleep(150); + await ev(`(() => { const el = ${find(spec)}; if (el) el.click(); })()`); await sleep(wait); +} +async function type(spec, text, per = 55) { + await click(spec, { wait: 120, ms: 650 }); + for (const ch of text) { + await ev(`(() => { const el = ${find(spec)}; el.value += ${JSON.stringify(ch)}; el.dispatchEvent(new Event('input', { bubbles: true })); })()`); + evt('key'); + await sleep(per + Math.random() * 35); + } + await sleep(200); +} +async function scroll(selector, y, ms = 1300) { await ev(`window.__scrollTo(${selector === 'page' ? 'document.scrollingElement' : `document.querySelector(${JSON.stringify(selector)})`}, ${y}, ${ms})`); await sleep(150); } +async function caption(text, sub) { step += 1; evt('caption'); await ev(`window.__caption(${step}, ${JSON.stringify(text)}, ${JSON.stringify(sub || '')})`); } +const hide = async () => { await ev(`window.__hideCaption()`); await sleep(420); }; +/** Element (oder der übergeordnete Kasten) hervorheben; der Rest der Seite wird abgedunkelt. */ +async function spot(spec, { closest = '', pad = 12 } = {}) { + const r = await ev(`(() => { let el = ${find(spec)}; if (!el) return null; ${closest ? `el = el.closest(${JSON.stringify(closest)}) || el;` : ''} el.scrollIntoView({ block: 'center' }); const b = el.getBoundingClientRect(); return { x: b.left, y: b.top, w: b.width, h: b.height }; })()`); + if (!r) { console.log('Hervorhebung: nicht gefunden', JSON.stringify(spec)); return; } + evt('pop'); + await ev(`window.__spot(${r.x - pad}, ${r.y - pad}, ${r.w + 2 * pad}, ${r.h + 2 * pad})`); +} +const unspot = async () => { await ev(`window.__spotOff()`); await sleep(500); }; +const chapter = (name) => evt('chapter', { name }); + +const CLEAN = `(() => { document.querySelectorAll('div,p,section').forEach((e) => { if (e.children.length < 6 && /SQLite-Modus aktiv/.test(e.textContent) && e.textContent.length < 260) e.remove(); }); document.getElementById('session-timer-bar')?.remove(); })()`; +const inject = async () => { await ev(OVERLAY); await ev(CLEAN); }; +/** Seite laden: erst überblenden, dann laden, Gerüst einsetzen, wieder aufblenden. */ +async function go(url, opts = {}) { + if (win.webContents.getURL() && !opts.first) { evt('whoosh'); await ev(`window.__cover && window.__cover(true)`); await sleep(480); } + const loaded = new Promise((r) => win.webContents.once('did-finish-load', r)); + if (opts.file) win.loadFile(opts.file); else win.loadURL(opts.raw ? url : BASE + url); + await loaded; await sleep(120); + await inject(); await sleep(250); + await ev(`window.__cover(false)`); await sleep(520); +} +const waitLoad = () => new Promise((r) => win.webContents.once('did-finish-load', r)); +async function nav(clickFn) { const l = waitLoad(); await clickFn(); evt('whoosh'); await l; await sleep(120); await inject(); await ev(`window.__cover(false)`); await sleep(450); } + +const card = (html, css = '') => 'data:text/html;charset=utf-8,' + encodeURIComponent(`
${html}
`); + +app.whenReady().then(async () => { + win = new BrowserWindow({ width: W, height: H, show: false, useContentSize: true, webPreferences: { offscreen: true, contextIsolation: false, nodeIntegration: false, backgroundThrottling: false } }); + win.webContents.setFrameRate(FPS); + win.webContents.on('paint', (e, dirty, image) => { latest = image; if (!size) size = image.getSize(); }); + win.webContents.on('console-message', () => {}); + await win.loadURL(card('')); + await sleep(500); + startRecording(); + try { + // ── Titel ── + chapter('intro'); + await win.loadURL(card('
Das Helpdesk-System zum Selbsthosten
Kundenportal
Digitaler Assistent
Windows
Android
')); + await sleep(3300); + + // ── 1. Kundenportal und digitaler Assistent ── + chapter('portal'); + await go('/home.php', { first: true }); + await caption('Kundenportal', 'Hilfe finden und Tickets verfolgen'); + await sleep(700); + await scroll('page', 360, 1400); await scroll('page', 0, 1000); + await hide(); + await click('#as-bubble', { wait: 900 }); + await caption('Digitaler Assistent', 'Antwortet aus Wissensdatenbank und eigenen Antworten'); + await type('#as-input', 'Wie lange dauert der Versand?'); + await click('#as-send'); await sleep(1100); evt('ding'); await sleep(1400); + await click({ sel: '.as-btns button', text: 'Das hat geholfen' }, { wait: 800 }); + await type('#as-input', 'Wie kann ich meinen Vertrag beenden?'); + await click('#as-send'); await sleep(1500); + await hide(); + await caption('Keine Antwort gefunden?', 'Der Assistent bietet an, ein Ticket zu erstellen'); + await sleep(900); + await click({ sel: '.as-btns button', text: 'Ticket erstellen' }, { wait: 1500 }); + await hide(); + + // ── 2. Mitarbeiterbereich ── + chapter('staff'); + await go('/staff/login.php'); + await caption('Mitarbeiterbereich', 'Anmelden mit dem eigenen Konto'); + await type('#email', 'lena@demo.example', 45); + await type('#password', 'Demo-Passwort-1234', 45); + await nav(() => click('form button[type=submit]', { wait: 100 })); + await hide(); + await go('/staff/dashboard.php'); + await caption('Übersicht', 'Kennzahlen, Status des Teams und Berichte'); + await sleep(1200); + await scroll('page', 420, 1600); await sleep(500); await scroll('page', 0, 1200); + await hide(); + await nav(() => click({ sel: '.sidebar a, nav a, aside a', text: 'Tickets' }, { wait: 100 })); + await caption('Tickets', 'Filter, Tabs und gespeicherte Ansichten'); + await sleep(1400); + await nav(() => click({ sel: 'a', text: 'Wiedervorlage' }, { wait: 100 })); + await sleep(1100); + await nav(() => click({ sel: 'a', text: 'Offen' }, { wait: 100 })); + await sleep(700); + await hide(); + await go('/staff/ticket_view.php?n=260102'); + await caption('Ticket bearbeiten', 'Verlauf, Antworten und interne Notizen'); + await sleep(1500); + await scroll('page', 700, 1500); + await hide(); + await caption('Wiedervorlage und Beobachter', 'Später wieder vorlegen, passende Artikel dazu'); + await sleep(500); + await spot({ sel: 'span', text: 'Wiedervorlage' }, { closest: '.card', pad: 8 }); + await sleep(2200); + await unspot(); + await ev(`(() => { const s = document.querySelector('select[name=snooze_choice]'); if (s) s.value = '3h'; })()`); + await nav(() => click({ sel: 'button', text: 'Auf später legen' }, { wait: 100 })); + await sleep(1500); + await hide(); + + // ── 3. Digitaler Assistent: Verwaltung ── + chapter('assistant'); + await go('/staff/assistant.php'); + await caption('Assistenten verwalten', 'Einstellungen, Antworten, Fragen-Log'); + await sleep(1300); + await nav(() => click({ sel: 'a', text: 'Zusätzliche Antworten' }, { wait: 100 })); + await sleep(1100); + await nav(() => click({ sel: 'a', text: 'Fragen-Log' }, { wait: 100 })); + await sleep(500); + await hide(); + await caption('Was blieb ohne Antwort?', 'Mit einem Klick eine neue Antwort anlegen'); + await spot({ sel: 'b, strong', text: 'Häufige Fragen ohne Antwort' }, { closest: 'div', pad: 10 }); + await sleep(2300); + await unspot(); + await nav(() => click({ sel: 'a', text: 'Keine Antwort' }, { wait: 100 })); + await sleep(1400); + await hide(); + + // ── 4. Windows-Programm ── + chapter('windows'); + await go('', { file: MOCK }); + await ev(`(() => { const o = window.deskhub.api; window.deskhub.api = async (r) => { const res = await o(r); return res.error && /^Mock:/.test(res.error.message) ? { data: { items: [], rules: [], holidays: [], hours: [], staffOptions: [], departments: [], permissionKeys: [], fieldOptions: [], operatorOptions: [], actionOptions: [] } } : res; }; go('dashboard'); })()`); + await sleep(900); + await caption('Windows-Programm', 'Dieselben Funktionen auf dem Desktop'); + await sleep(1800); + await click({ sel: '.side .nav, .side button, .side a', text: 'Tickets' }, { wait: 1200 }); + await click({ sel: 'tr.click, tr', text: 'Drucker druckt nicht' }, { wait: 1500 }); + await hide(); + await caption('Auf später legen und beobachten', 'Auch im Windows-Programm'); + await click({ sel: 'button', text: 'Auf später' }, { wait: 1500 }); + await ev(`document.querySelector('.modal-bg')?.remove()`); + await ev(`state.staff.role = 'admin'; go('admin', 'assistant')`); evt('whoosh'); await sleep(1000); + await hide(); + await caption('Assistent im Windows-Programm', 'Antworten, Fragen-Log, Wörter, Ausprobieren'); + await click({ sel: '.tabs button', text: 'Fragen-Log' }, { wait: 2200 }); + await hide(); + + // ── 5. Android und Abspann ── + chapter('android'); + evt('whoosh'); + await win.loadURL(card('

Android-App

  • Neues, helles Design mit schwebender Navigation
  • Wiedervorlage, Beobachten, „Dazu passend“
  • Digitalen Assistenten komplett verwalten
  • Widget in drei Größen, hell und dunkel
')); + await sleep(3700); + chapter('outro'); + evt('whoosh'); + await win.loadURL(card('
Kundenportal · Weboberfläche · Windows · Android
Mehr in der README
')); + await sleep(4200); + } catch (e) { console.error('Fehler:', e); process.exitCode = 1; } + const total = (Date.now() - t0) / 1000; + await stopRecording(); + fs.writeFileSync(OUT + '.events.json', JSON.stringify({ duration: +total.toFixed(3), events }, null, 1)); + console.log(`Aufnahme fertig: ${OUT} (${(written / FPS).toFixed(1)} Sekunden, ${size.width}x${size.height}), ${events.length} Ereignisse`); + app.quit(); +}); diff --git a/DeskHub-Webseite/version.php b/DeskHub-Webseite/version.php index 22a0ab74..1db218f8 100644 --- a/DeskHub-Webseite/version.php +++ b/DeskHub-Webseite/version.php @@ -1,7 +1,7 @@