HitonabiandClaude Opus 5.5
0d2687436e
- Gemeinsamer Lagekopf für beide Cockpits (Statusblock mit Schein, Kacheln mit Logo/Symbol und Zustandspunkt); KI-Box-Lampen als Dienst-Kacheln, Texte in normaler Schreibung. Alte Lampen-Komponente und Leuchtenfarben entfernt. - Instrumente, Zählwerk, Checkliste, Flugplan, Radar-Kasten im neuen Stil; Instrumente ruhig in Indigo, Farbe für Zustände erst ab der Grenze. - Übrige Seiten (Updates, Modelle, Nutzung, Suche, Monitoring, Dienste, Einstellungen, Protokoll, Dialoge): Glasflächen, feine Linien, Etiketten statt Instrumenten-Schild, Glas-Eingabefelder, deckende Dialoge. - Dienste der KI-Box und Geräte im Monitoring mit Symbol bzw. Logo. - Einstellungen: Karten mit Bereichs-Schein; Lizenzhinweis der Logos. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
39 lines
1.8 KiB
TypeScript
39 lines
1.8 KiB
TypeScript
import { laufzeit } from "@/lib/zeit"
|
||
|
||
// Alle Maße hängen an der Schriftgröße der Zeile (em), und die wächst mit der Breite des Feldes
|
||
// (cqw): So passt „TT T SS H“ auch in die schmale Hälfte eines 320-px-Handys, und am PC bleibt
|
||
// es bei den alten 38 × 56 px je Ziffer.
|
||
function Ziffer({ z }: { z: string }) {
|
||
return (
|
||
<span className="ziffern inline-flex h-[1.75em] w-[1.1875em] shrink-0 items-center justify-center rounded-lg border border-white/10 bg-gradient-to-b from-white/[0.07] to-white/[0.02] font-medium shadow-[inset_0_1px_0_rgb(255_255_255/0.06)]">
|
||
{z}
|
||
</span>
|
||
)
|
||
}
|
||
|
||
/** Laufzeit als mechanisches Zählwerk: TT T SS H. */
|
||
export function Zaehlwerk({ sekunden }: { sekunden: number | null | undefined }) {
|
||
const lz = laufzeit(sekunden)
|
||
const tage = String(Math.min(lz?.[0] ?? 0, 99)).padStart(2, "0")
|
||
const std = String(lz?.[1] ?? 0).padStart(2, "0")
|
||
const text = lz ? `Laufzeit ohne Neustart: ${lz[0]} Tage, ${lz[1]} Stunden` : "Laufzeit unbekannt"
|
||
return (
|
||
<figure className="@container m-0 flex min-w-0 flex-col items-center justify-end gap-1">
|
||
{/* Höhe wie die Rundinstrumente daneben (200 × 150, also ¾ der Breite). */}
|
||
<div
|
||
aria-label={text}
|
||
role="img"
|
||
className="flex h-[min(75cqw,150px)] items-center gap-[0.1875em] pb-[min(10cqw,20px)] text-[length:clamp(14px,14.5cqw,32px)]"
|
||
>
|
||
<Ziffer z={lz ? tage[0] : "–"} />
|
||
<Ziffer z={lz ? tage[1] : "–"} />
|
||
<span className="etikett mr-[0.444em] ml-[0.111em] text-[0.5625em] text-text-3">T</span>
|
||
<Ziffer z={lz ? std[0] : "–"} />
|
||
<Ziffer z={lz ? std[1] : "–"} />
|
||
<span className="etikett ml-[0.111em] text-[0.5625em] text-text-3">H</span>
|
||
</div>
|
||
<figcaption className="etikett text-[11.5px] tracking-[0.14em] text-text-3">Ohne Neustart</figcaption>
|
||
</figure>
|
||
)
|
||
}
|