9426406ee5
Setzt den in #84 skizzierten Workflow um: record.html nimmt im Handy-Browser eine Sprachnotiz per MediaRecorder auf und laedt sie unauthentifiziert zu POST /api/v1/agents/{id}/recordings hoch. Ein Klick auf die Personen-Figur jedes registrierten Agenten in der Buero-Visualisierung verlinkt dorthin, ein Zaehler am Schreibtisch zeigt offene Aufnahmen. Der Agent selbst holt seine Warteschlange ueber die bestehenden Api-Key-authentifizierten Endpunkte ab (GET .../recordings, GET /recordings/{id}/audio) und markiert eine Aufnahme nach der Transkription per PATCH als erledigt - die eigentliche Transkription (whisper.cpp/faster-whisper) bleibt agent-seitig, siehe fds2610/Agent#17. Schliesst #85
91 lines
1.5 KiB
CSS
91 lines
1.5 KiB
CSS
/* Aufnahme-Webseite (Issue #85): bewusst schlicht und mobil-first, laeuft im Handy-Browser
|
|
eines Menschen - kein SVG, keine Szene, nur ein einfaches Formular. */
|
|
|
|
:root {
|
|
--color-text: #1f2937;
|
|
--color-accent: #2563eb;
|
|
--color-danger: #dc2626;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding: 24px 16px 48px;
|
|
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
color: var(--color-text);
|
|
background: #eef2f7;
|
|
}
|
|
|
|
.record-header {
|
|
text-align: center;
|
|
}
|
|
|
|
.record-header h1 {
|
|
margin: 0 0 4px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.record-main {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.record-status {
|
|
min-height: 1.4em;
|
|
margin: 0;
|
|
text-align: center;
|
|
color: #475569;
|
|
}
|
|
|
|
.record-status.status-error {
|
|
color: var(--color-danger);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.record-controls {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.record-button {
|
|
min-width: 160px;
|
|
padding: 16px 20px;
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.record-button:disabled {
|
|
opacity: 0.6;
|
|
cursor: default;
|
|
}
|
|
|
|
.record-button-stop {
|
|
background: var(--color-danger);
|
|
}
|
|
|
|
.record-button-discard {
|
|
background: #64748b;
|
|
}
|
|
|
|
.record-preview {
|
|
width: 100%;
|
|
}
|