redesign: THERMAL warm brutalist dashboard UI
Complete visual redesign of all dashboard components with a warm brutalist command terminal aesthetic. Features editorial section numbering, IBM Plex typography, sharp zero-radius cards with colored accent strips, film grain overlay, and data-glow effects. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam
parent
f6a42c2dd2
commit
e94a7706ab
12 changed files with 641 additions and 548 deletions
|
|
@ -1,14 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" class="dark">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Daily Briefing</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="bg-slate-950 text-slate-100 antialiased">
|
||||
<body class="antialiased">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Clock as ClockIcon } from "lucide-react";
|
||||
|
||||
/** Live clock with German-locale date. Updates every second. */
|
||||
export default function Clock() {
|
||||
const [now, setNow] = useState(new Date());
|
||||
|
||||
|
|
@ -23,23 +21,24 @@ export default function Clock() {
|
|||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="hidden sm:flex items-center justify-center w-10 h-10 rounded-xl bg-white/5 border border-white/[0.06]">
|
||||
<ClockIcon className="w-5 h-5 text-slate-400" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end sm:items-start">
|
||||
{/* Time display */}
|
||||
<div className="flex items-baseline gap-0.5" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
|
||||
<span className="text-2xl sm:text-3xl font-bold text-white tracking-tight">
|
||||
{hours}:{minutes}
|
||||
<div className="flex flex-col items-end">
|
||||
<div className="flex items-baseline gap-0">
|
||||
<span className="text-2xl sm:text-3xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
|
||||
{hours}
|
||||
</span>
|
||||
<span className="text-sm sm:text-base font-medium text-slate-400">
|
||||
:{seconds}
|
||||
<span className="text-2xl sm:text-3xl font-mono font-bold text-gold/60 tracking-tighter animate-glow-pulse">
|
||||
:
|
||||
</span>
|
||||
<span className="text-2xl sm:text-3xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
|
||||
{minutes}
|
||||
</span>
|
||||
<span className="text-sm font-mono font-medium text-base-500 ml-0.5">
|
||||
{seconds}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Date display */}
|
||||
<p className="text-xs text-slate-500 mt-0.5">{dateStr}</p>
|
||||
<p className="text-[10px] font-mono text-base-500 tracking-wider uppercase mt-0.5">
|
||||
{dateStr}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Home, Lightbulb, ArrowUp, ArrowDown, Thermometer, WifiOff, Wifi } from "lucide-react";
|
||||
import { Home, Lightbulb, ArrowUp, ArrowDown, Thermometer, WifiOff } from "lucide-react";
|
||||
import type { HAData } from "../api";
|
||||
|
||||
interface HomeAssistantProps {
|
||||
|
|
@ -10,12 +10,12 @@ export default function HomeAssistant({ data }: HomeAssistantProps) {
|
|||
|
||||
if (data.error) {
|
||||
return (
|
||||
<div className="glass-card p-5 animate-fade-in">
|
||||
<div className="flex items-center gap-3 text-red-400">
|
||||
<div className="deck-card p-5 animate-fade-in">
|
||||
<div className="flex items-center gap-3 text-cherry">
|
||||
<WifiOff className="w-5 h-5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium">Home Assistant nicht erreichbar</p>
|
||||
<p className="text-xs text-slate-500 mt-0.5">Verbindung fehlgeschlagen</p>
|
||||
<p className="text-xs text-base-600 mt-0.5">Verbindung fehlgeschlagen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -23,74 +23,59 @@ export default function HomeAssistant({ data }: HomeAssistantProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="glass-card p-5 animate-fade-in bg-gradient-to-br from-violet-500/[0.04] to-transparent">
|
||||
<div className="deck-card p-5 animate-fade-in" data-accent="iris">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-violet-500/10 border border-violet-500/20">
|
||||
<Home className="w-4 h-4 text-violet-400" />
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-white">Home Assistant</h3>
|
||||
<div className="flex items-center gap-3">
|
||||
<Home className="w-4 h-4 text-iris" />
|
||||
<h3 className="text-sm font-semibold text-base-900">Home Assistant</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="relative">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${data.online ? "bg-emerald-400" : "bg-red-400"}`}
|
||||
/>
|
||||
{data.online && (
|
||||
<div className="absolute inset-0 w-2 h-2 rounded-full bg-emerald-400 animate-ping opacity-50" />
|
||||
)}
|
||||
</div>
|
||||
<span className={`text-[10px] font-medium ${data.online ? "text-emerald-400" : "text-red-400"}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`status-dot ${data.online ? "bg-mint" : "bg-cherry"}`} />
|
||||
<span className={`text-[10px] font-mono font-medium ${data.online ? "text-mint" : "text-cherry"}`}>
|
||||
{data.online ? "Online" : "Offline"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
{/* Lights Section */}
|
||||
{/* Lights */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Lightbulb className="w-3.5 h-3.5 text-violet-400/70" />
|
||||
<span className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
Lichter
|
||||
</span>
|
||||
<Lightbulb className="w-3 h-3 text-base-500" />
|
||||
<span className="data-label">Lichter</span>
|
||||
</div>
|
||||
<span className="badge bg-violet-500/15 text-violet-300">
|
||||
{data.lights_on}/{data.lights_total} an
|
||||
<span className="tag border-iris/30 text-iris bg-iris/5">
|
||||
{data.lights_on}/{data.lights_total}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{data.lights.length > 0 ? (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
|
||||
<div className="grid grid-cols-4 gap-px bg-base-300">
|
||||
{data.lights.map((light) => {
|
||||
const isOn = light.state === "on";
|
||||
return (
|
||||
<div
|
||||
key={light.entity_id}
|
||||
className={`
|
||||
flex flex-col items-center gap-1.5 px-2 py-2.5 rounded-xl border transition-colors
|
||||
${
|
||||
isOn
|
||||
? "bg-amber-500/10 border-amber-500/20"
|
||||
: "bg-white/[0.02] border-white/[0.04]"
|
||||
}
|
||||
`}
|
||||
className={`flex flex-col items-center gap-1.5 px-2 py-3 transition-colors ${
|
||||
isOn ? "bg-gold/[0.08]" : "bg-base-50"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full transition-colors ${
|
||||
className={`w-2 h-2 transition-all ${
|
||||
isOn
|
||||
? "bg-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.5)]"
|
||||
: "bg-slate-700"
|
||||
? "bg-gold shadow-[0_0_8px_#e8a44a80]"
|
||||
: "bg-base-400"
|
||||
}`}
|
||||
style={{ borderRadius: 0 }}
|
||||
/>
|
||||
<span className="text-[10px] text-center text-slate-400 leading-tight truncate w-full">
|
||||
<span className="text-[9px] text-center text-base-600 leading-tight truncate w-full font-mono">
|
||||
{light.name}
|
||||
</span>
|
||||
{isOn && light.brightness > 0 && (
|
||||
<span className="text-[9px] text-amber-400/70">
|
||||
<span className="text-[9px] font-mono text-gold/70">
|
||||
{Math.round((light.brightness / 255) * 100)}%
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -99,49 +84,47 @@ export default function HomeAssistant({ data }: HomeAssistantProps) {
|
|||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-slate-600">Keine Lichter konfiguriert</p>
|
||||
<p className="text-xs text-base-500">Keine Lichter konfiguriert</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Covers Section */}
|
||||
{/* Covers */}
|
||||
{data.covers.length > 0 && (
|
||||
<section>
|
||||
<div className="flex items-center gap-1.5 mb-3">
|
||||
<ArrowUp className="w-3.5 h-3.5 text-violet-400/70" />
|
||||
<span className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
Rollos
|
||||
</span>
|
||||
<ArrowUp className="w-3 h-3 text-base-500" />
|
||||
<span className="data-label">Rollos</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="space-y-px">
|
||||
{data.covers.map((cover) => {
|
||||
const isOpen = cover.state === "open";
|
||||
const isClosed = cover.state === "closed";
|
||||
return (
|
||||
<div
|
||||
key={cover.entity_id}
|
||||
className="flex items-center justify-between px-3 py-2 rounded-xl bg-white/[0.02] border border-white/[0.04]"
|
||||
className="flex items-center justify-between px-3 py-2 bg-base-100 border-l-2 border-base-300 hover:border-iris transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{isOpen ? (
|
||||
<ArrowUp className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<ArrowUp className="w-3 h-3 text-mint" />
|
||||
) : isClosed ? (
|
||||
<ArrowDown className="w-3.5 h-3.5 text-slate-500" />
|
||||
<ArrowDown className="w-3 h-3 text-base-500" />
|
||||
) : (
|
||||
<ArrowDown className="w-3.5 h-3.5 text-amber-400" />
|
||||
<ArrowDown className="w-3 h-3 text-gold" />
|
||||
)}
|
||||
<span className="text-xs text-slate-300">{cover.name}</span>
|
||||
<span className="text-xs text-base-700">{cover.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{cover.position > 0 && (
|
||||
<span className="text-[10px] text-slate-500" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
|
||||
<span className="text-[10px] font-mono text-base-500">
|
||||
{cover.position}%
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className={`text-[10px] font-medium ${
|
||||
isOpen ? "text-emerald-400" : isClosed ? "text-slate-500" : "text-amber-400"
|
||||
className={`text-[10px] font-mono font-medium ${
|
||||
isOpen ? "text-mint" : isClosed ? "text-base-500" : "text-gold"
|
||||
}`}
|
||||
>
|
||||
{isOpen ? "Offen" : isClosed ? "Zu" : cover.state}
|
||||
|
|
@ -154,31 +137,26 @@ export default function HomeAssistant({ data }: HomeAssistantProps) {
|
|||
</section>
|
||||
)}
|
||||
|
||||
{/* Temperature Sensors Section */}
|
||||
{/* Temperature Sensors */}
|
||||
{data.sensors.length > 0 && (
|
||||
<section>
|
||||
<div className="flex items-center gap-1.5 mb-3">
|
||||
<Thermometer className="w-3.5 h-3.5 text-violet-400/70" />
|
||||
<span className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
Temperaturen
|
||||
</span>
|
||||
<Thermometer className="w-3 h-3 text-base-500" />
|
||||
<span className="data-label">Temperaturen</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="space-y-px">
|
||||
{data.sensors.map((sensor) => (
|
||||
<div
|
||||
key={sensor.entity_id}
|
||||
className="flex items-center justify-between px-3 py-2 rounded-xl bg-white/[0.02] border border-white/[0.04]"
|
||||
>
|
||||
<span className="text-xs text-slate-300">{sensor.name}</span>
|
||||
<span
|
||||
className="text-sm font-semibold text-white"
|
||||
style={{ fontFamily: "'JetBrains Mono', monospace" }}
|
||||
className="flex items-center justify-between px-3 py-2 bg-base-100 border-l-2 border-base-300 hover:border-iris transition-colors"
|
||||
>
|
||||
<span className="text-xs text-base-700">{sensor.name}</span>
|
||||
<span className="text-sm data-value text-base-900">
|
||||
{typeof sensor.state === "number"
|
||||
? sensor.state.toFixed(1)
|
||||
: sensor.state}
|
||||
<span className="text-xs text-slate-500 ml-0.5">{sensor.unit}</span>
|
||||
<span className="text-[10px] text-base-500 ml-0.5">{sensor.unit}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ export default function HourlyForecast({ slots }: HourlyForecastProps) {
|
|||
if (!slots || slots.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="glass-card p-4 animate-fade-in">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3 px-1">
|
||||
Stundenverlauf
|
||||
</h3>
|
||||
<div className="deck-card p-5 animate-fade-in h-full" data-accent="gold">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="section-number">Prognose</span>
|
||||
<span className="section-rule" />
|
||||
</div>
|
||||
|
||||
{/* Horizontal scroll container - hidden scrollbar via globals.css */}
|
||||
<div
|
||||
className="flex gap-2 overflow-x-auto pb-1"
|
||||
className="flex gap-0 overflow-x-auto"
|
||||
style={{ scrollbarWidth: "none" }}
|
||||
>
|
||||
{slots.map((slot, i) => {
|
||||
|
|
@ -27,49 +27,37 @@ export default function HourlyForecast({ slots }: HourlyForecastProps) {
|
|||
<div
|
||||
key={slot.time}
|
||||
className={`
|
||||
flex flex-col items-center gap-1.5 min-w-[4.25rem] px-2.5 py-3 rounded-xl
|
||||
border transition-colors duration-200
|
||||
${
|
||||
isNow
|
||||
? "bg-white/[0.06] border-cyan-500/20"
|
||||
: "bg-white/[0.02] border-white/[0.04] hover:bg-white/[0.04]"
|
||||
}
|
||||
flex flex-col items-center gap-1.5 min-w-[4.5rem] px-3 py-3
|
||||
border-r border-base-300 last:border-r-0 transition-colors
|
||||
${isNow ? "bg-gold/[0.06]" : "hover:bg-base-100"}
|
||||
`}
|
||||
>
|
||||
{/* Time label */}
|
||||
<span
|
||||
className={`text-[11px] font-medium ${isNow ? "text-cyan-400" : "text-slate-500"}`}
|
||||
>
|
||||
<span className={`text-[10px] font-mono font-medium tracking-wider uppercase ${
|
||||
isNow ? "text-gold" : "text-base-500"
|
||||
}`}>
|
||||
{isNow ? "Jetzt" : hour}
|
||||
</span>
|
||||
|
||||
{/* Weather icon */}
|
||||
<span className="text-xl select-none" role="img" aria-label="weather">
|
||||
{slot.icon}
|
||||
</span>
|
||||
|
||||
{/* Temperature */}
|
||||
<span
|
||||
className="text-sm font-bold text-white"
|
||||
style={{ fontFamily: "'JetBrains Mono', monospace" }}
|
||||
>
|
||||
{Math.round(slot.temp)}°
|
||||
<span className={`text-sm data-value ${isNow ? "text-gold data-glow-gold" : "text-base-900"}`}>
|
||||
{Math.round(slot.temp)}°
|
||||
</span>
|
||||
|
||||
{/* Precipitation bar */}
|
||||
{slot.precip_chance > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Droplets className="w-2.5 h-2.5 text-blue-400/60" />
|
||||
<span className="text-[10px] text-blue-400/80">
|
||||
<div className="flex items-center gap-0.5">
|
||||
<Droplets className="w-2.5 h-2.5 text-azure/60" />
|
||||
<span className="text-[9px] font-mono text-azure/80">
|
||||
{slot.precip_chance}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Precip bar visual */}
|
||||
<div className="w-full progress-bar mt-0.5">
|
||||
<div className="w-full bar-track mt-0.5">
|
||||
<div
|
||||
className="progress-fill bg-blue-500/50"
|
||||
className="bar-fill bg-azure/50"
|
||||
style={{ width: `${Math.min(slot.precip_chance, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -81,7 +69,6 @@ export default function HourlyForecast({ slots }: HourlyForecastProps) {
|
|||
);
|
||||
}
|
||||
|
||||
/** Extracts "HH:mm" from an ISO time string or "HH:00" format. */
|
||||
function formatHour(time: string): string {
|
||||
try {
|
||||
const d = new Date(time);
|
||||
|
|
|
|||
|
|
@ -26,25 +26,26 @@ export default function MqttCard({ data }: Props) {
|
|||
const shown = expanded ? filtered : filtered.slice(0, 8);
|
||||
|
||||
return (
|
||||
<div className="glass-card p-5">
|
||||
<div className="deck-card p-5 animate-fade-in" data-accent="iris">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Radio className="w-4 h-4 text-violet-400" />
|
||||
<h3 className="text-sm font-semibold text-white">MQTT</h3>
|
||||
<span className="text-[10px] text-slate-500 font-mono">
|
||||
{data.entities.length} Entit{data.entities.length === 1 ? "ät" : "äten"}
|
||||
<div className="flex items-center gap-3">
|
||||
<Radio className="w-4 h-4 text-iris" />
|
||||
<h3 className="text-sm font-semibold text-base-900">MQTT</h3>
|
||||
<span className="tag border-iris/30 text-iris bg-iris/5">
|
||||
{data.entities.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{data.connected ? (
|
||||
<Zap className="w-3.5 h-3.5 text-violet-400" />
|
||||
<Zap className="w-3.5 h-3.5 text-iris" />
|
||||
) : (
|
||||
<ZapOff className="w-3.5 h-3.5 text-slate-600" />
|
||||
<ZapOff className="w-3.5 h-3.5 text-base-500" />
|
||||
)}
|
||||
<span
|
||||
className={`text-[10px] font-medium ${
|
||||
data.connected ? "text-violet-400" : "text-slate-600"
|
||||
className={`text-[10px] font-mono font-medium ${
|
||||
data.connected ? "text-mint" : "text-cherry"
|
||||
}`}
|
||||
>
|
||||
{data.connected ? "Verbunden" : "Getrennt"}
|
||||
|
|
@ -54,14 +55,10 @@ export default function MqttCard({ data }: Props) {
|
|||
|
||||
{/* Category filter tabs */}
|
||||
{categories.length > 1 && (
|
||||
<div className="flex gap-1.5 mb-3 flex-wrap">
|
||||
<div className="flex gap-1 mb-4 flex-wrap">
|
||||
<button
|
||||
onClick={() => setFilter(null)}
|
||||
className={`text-[10px] px-2 py-0.5 rounded-full border transition-colors ${
|
||||
filter === null
|
||||
? "bg-violet-500/20 border-violet-500/30 text-violet-300"
|
||||
: "bg-white/5 border-white/[0.06] text-slate-500 hover:text-slate-300"
|
||||
}`}
|
||||
className={`tab-btn ${filter === null ? "active" : ""}`}
|
||||
>
|
||||
Alle
|
||||
</button>
|
||||
|
|
@ -69,14 +66,16 @@ export default function MqttCard({ data }: Props) {
|
|||
<button
|
||||
key={cat}
|
||||
onClick={() => setFilter(filter === cat ? null : cat)}
|
||||
className={`text-[10px] px-2 py-0.5 rounded-full border transition-colors ${
|
||||
filter === cat
|
||||
? "bg-violet-500/20 border-violet-500/30 text-violet-300"
|
||||
: "bg-white/5 border-white/[0.06] text-slate-500 hover:text-slate-300"
|
||||
}`}
|
||||
className={`tab-btn ${filter === cat ? "active" : ""} flex items-center gap-1.5`}
|
||||
>
|
||||
{cat}
|
||||
<span className="ml-1 opacity-50">{grouped[cat].length}</span>
|
||||
<span
|
||||
className={`text-[10px] font-bold ${
|
||||
filter === cat ? "text-gold" : "text-base-500"
|
||||
}`}
|
||||
>
|
||||
{grouped[cat].length}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -84,16 +83,16 @@ export default function MqttCard({ data }: Props) {
|
|||
|
||||
{/* Entity list */}
|
||||
{data.entities.length === 0 ? (
|
||||
<div className="text-center py-6">
|
||||
<Radio className="w-8 h-8 text-slate-700 mx-auto mb-2" />
|
||||
<p className="text-xs text-slate-600">
|
||||
<div className="flex flex-col items-center justify-center py-8 text-base-500">
|
||||
<Radio className="w-8 h-8 mb-2 opacity-20" />
|
||||
<p className="text-xs font-mono">
|
||||
{data.connected
|
||||
? "Warte auf MQTT-Nachrichten..."
|
||||
: "MQTT nicht konfiguriert"}
|
||||
? "Warte auf Nachrichten..."
|
||||
: "Nicht konfiguriert"}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
<div className="space-y-px max-h-80 overflow-y-auto">
|
||||
{shown.map((entity) => (
|
||||
<EntityRow key={entity.topic} entity={entity} />
|
||||
))}
|
||||
|
|
@ -104,7 +103,7 @@ export default function MqttCard({ data }: Props) {
|
|||
{filtered.length > 8 && (
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="mt-3 w-full flex items-center justify-center gap-1 text-[10px] text-slate-500 hover:text-slate-300 transition-colors"
|
||||
className="mt-3 w-full flex items-center justify-center gap-1.5 text-[10px] font-mono text-base-500 hover:text-base-700 transition-colors py-1.5"
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
|
|
@ -124,7 +123,7 @@ export default function MqttCard({ data }: Props) {
|
|||
}
|
||||
|
||||
function EntityRow({ entity }: { entity: MqttEntity }) {
|
||||
const age = Math.round((Date.now() / 1000 - entity.timestamp));
|
||||
const age = Math.round(Date.now() / 1000 - entity.timestamp);
|
||||
const ageStr =
|
||||
age < 60
|
||||
? `${age}s`
|
||||
|
|
@ -132,32 +131,41 @@ function EntityRow({ entity }: { entity: MqttEntity }) {
|
|||
? `${Math.floor(age / 60)}m`
|
||||
: `${Math.floor(age / 3600)}h`;
|
||||
|
||||
// Format value for display
|
||||
const displayValue = formatValue(entity.value);
|
||||
const isNumeric = typeof entity.value === "number";
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3 px-2.5 py-1.5 rounded-lg bg-white/[0.02] hover:bg-white/[0.04] transition-colors group">
|
||||
<div className="flex items-center justify-between gap-3 px-3 py-2 bg-base-100 border-l-2 border-base-300 hover:border-iris transition-colors group">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-[11px] text-slate-300 truncate">{entity.name}</p>
|
||||
<p className="text-[9px] text-slate-600 truncate font-mono">{entity.topic}</p>
|
||||
<p className="text-xs text-base-700 truncate">{entity.name}</p>
|
||||
<p className="text-[9px] text-base-500 truncate font-mono mt-0.5">
|
||||
{entity.topic}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<span
|
||||
className={`text-xs font-mono font-medium ${
|
||||
isNumeric ? "text-violet-300" : "text-slate-300"
|
||||
className={`text-sm font-mono font-medium ${
|
||||
isNumeric ? "text-iris data-value" : "text-base-800"
|
||||
}`}
|
||||
>
|
||||
{displayValue}
|
||||
</span>
|
||||
<span className="text-[9px] text-slate-700 w-6 text-right">{ageStr}</span>
|
||||
{(entity as any).unit && (
|
||||
<span className="text-[10px] font-mono text-base-500">
|
||||
{(entity as any).unit}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-[9px] font-mono text-base-500 w-6 text-right opacity-50">
|
||||
{ageStr}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatValue(value: any): string {
|
||||
if (value === null || value === undefined) return "—";
|
||||
if (value === null || value === undefined) return "\u2014";
|
||||
if (typeof value === "boolean") return value ? "ON" : "OFF";
|
||||
if (typeof value === "number") {
|
||||
return Number.isInteger(value) ? value.toString() : value.toFixed(1);
|
||||
|
|
@ -166,10 +174,9 @@ function formatValue(value: any): string {
|
|||
return JSON.stringify(value).slice(0, 40);
|
||||
}
|
||||
const str = String(value);
|
||||
// Common HA/MQTT states → nicer display
|
||||
if (str === "on" || str === "ON") return "ON";
|
||||
if (str === "off" || str === "OFF") return "OFF";
|
||||
if (str === "online") return "Online";
|
||||
if (str === "offline") return "Offline";
|
||||
return str.length > 30 ? str.slice(0, 30) + "…" : str;
|
||||
return str.length > 30 ? str.slice(0, 30) + "\u2026" : str;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useState, useMemo } from "react";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import type { NewsResponse, NewsArticle } from "../api";
|
||||
|
||||
interface NewsGridProps {
|
||||
|
|
@ -14,17 +14,16 @@ const CATEGORIES = [
|
|||
{ key: "allgemein", label: "Allgemein" },
|
||||
] as const;
|
||||
|
||||
/** Map source names to badge colours. */
|
||||
const SOURCE_COLORS: Record<string, string> = {
|
||||
"heise": "bg-orange-500/20 text-orange-300",
|
||||
"golem": "bg-blue-500/20 text-blue-300",
|
||||
"spiegel": "bg-red-500/20 text-red-300",
|
||||
"tagesschau": "bg-sky-500/20 text-sky-300",
|
||||
"zeit": "bg-slate-500/20 text-slate-300",
|
||||
"faz": "bg-emerald-500/20 text-emerald-300",
|
||||
"welt": "bg-indigo-500/20 text-indigo-300",
|
||||
"t3n": "bg-purple-500/20 text-purple-300",
|
||||
"default": "bg-amber-500/15 text-amber-300",
|
||||
heise: "border-gold/40 text-gold bg-gold/5",
|
||||
golem: "border-azure/40 text-azure bg-azure/5",
|
||||
spiegel: "border-cherry/40 text-cherry bg-cherry/5",
|
||||
tagesschau: "border-azure/40 text-azure bg-azure/5",
|
||||
zeit: "border-base-400 text-base-700 bg-base-200",
|
||||
faz: "border-mint/40 text-mint bg-mint/5",
|
||||
welt: "border-iris/40 text-iris bg-iris/5",
|
||||
t3n: "border-iris/40 text-iris bg-iris/5",
|
||||
default: "border-gold/30 text-gold-muted bg-gold/5",
|
||||
};
|
||||
|
||||
function sourceColor(source: string): string {
|
||||
|
|
@ -35,7 +34,6 @@ function sourceColor(source: string): string {
|
|||
return SOURCE_COLORS.default;
|
||||
}
|
||||
|
||||
/** Return a German relative time string like "vor 2 Stunden". */
|
||||
function relativeTime(isoDate: string): string {
|
||||
try {
|
||||
const date = new Date(isoDate);
|
||||
|
|
@ -72,35 +70,34 @@ export default function NewsGrid({ data }: NewsGridProps) {
|
|||
|
||||
return (
|
||||
<div className="animate-fade-in">
|
||||
{/* Header + category tabs */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-400">
|
||||
Nachrichten
|
||||
<span className="ml-2 text-xs font-normal text-slate-600">
|
||||
{filteredArticles.length}
|
||||
</span>
|
||||
</h2>
|
||||
{/* Section header */}
|
||||
<div className="section-label">
|
||||
<span className="section-number">04</span>
|
||||
<h2 className="section-title">Nachrichten</h2>
|
||||
<span className="section-rule" />
|
||||
<span className="text-xs font-mono text-base-500">{filteredArticles.length}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{/* Category tabs */}
|
||||
<div className="flex gap-1 flex-wrap mb-5">
|
||||
{CATEGORIES.map((cat) => (
|
||||
<button
|
||||
key={cat.key}
|
||||
onClick={() => setActiveCategory(cat.key)}
|
||||
className={`category-tab ${activeCategory === cat.key ? "active" : ""}`}
|
||||
className={`tab-btn ${activeCategory === cat.key ? "active" : ""}`}
|
||||
>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Articles grid */}
|
||||
{filteredArticles.length === 0 ? (
|
||||
<div className="glass-card p-8 text-center text-slate-500 text-sm">
|
||||
<div className="deck-card p-8 text-center text-base-500 text-sm">
|
||||
Keine Artikel in dieser Kategorie.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-px bg-base-300">
|
||||
{filteredArticles.map((article) => (
|
||||
<ArticleCard key={article.id} article={article} />
|
||||
))}
|
||||
|
|
@ -116,26 +113,26 @@ function ArticleCard({ article }: { article: NewsArticle }) {
|
|||
href={article.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="glass-card-hover group block p-4 cursor-pointer"
|
||||
className="group block bg-base-50 p-4 hover:bg-base-100 transition-colors relative"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2.5">
|
||||
<span className={`badge ${sourceColor(article.source)}`}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className={`tag ${sourceColor(article.source)}`}>
|
||||
{article.source}
|
||||
</span>
|
||||
<ExternalLink className="w-3 h-3 text-slate-600 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<ArrowUpRight className="w-3 h-3 text-base-400 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-sm font-medium text-slate-200 leading-snug line-clamp-2 group-hover:text-white transition-colors">
|
||||
<h3 className="text-sm font-medium text-base-800 leading-snug line-clamp-2 group-hover:text-base-900 transition-colors">
|
||||
{article.title}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-2 mt-3">
|
||||
<div className="flex items-center gap-3 mt-3 pt-3 border-t border-base-200">
|
||||
{article.category && (
|
||||
<span className="text-[10px] text-slate-600 uppercase tracking-wider">
|
||||
<span className="text-[9px] font-mono text-base-500 uppercase tracking-wider">
|
||||
{article.category}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-[10px] text-slate-600 ml-auto">
|
||||
<span className="text-[9px] font-mono text-base-500 ml-auto">
|
||||
{relativeTime(article.published_at)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,33 @@
|
|||
import { useState } from "react";
|
||||
import { Server, Cpu, HardDrive, Wifi, WifiOff, ChevronDown, ChevronUp, Box } from "lucide-react";
|
||||
import { Server, Cpu, HardDrive, WifiOff, ChevronDown, ChevronUp, Box } from "lucide-react";
|
||||
import type { ServerStats } from "../api";
|
||||
|
||||
interface ServerCardProps {
|
||||
server: ServerStats;
|
||||
}
|
||||
|
||||
/** Return Tailwind text colour class based on percentage thresholds. */
|
||||
function usageColor(pct: number): string {
|
||||
if (pct >= 80) return "text-red-400";
|
||||
if (pct >= 60) return "text-amber-400";
|
||||
return "text-emerald-400";
|
||||
if (pct >= 80) return "text-cherry";
|
||||
if (pct >= 60) return "text-gold";
|
||||
return "text-mint";
|
||||
}
|
||||
|
||||
/** Return SVG stroke colour (hex) based on percentage thresholds. */
|
||||
function usageStroke(pct: number): string {
|
||||
if (pct >= 80) return "#f87171"; // red-400
|
||||
if (pct >= 60) return "#fbbf24"; // amber-400
|
||||
return "#34d399"; // emerald-400
|
||||
if (pct >= 80) return "#e85a5a";
|
||||
if (pct >= 60) return "#e8a44a";
|
||||
return "#4ae8a8";
|
||||
}
|
||||
|
||||
/** Return track background colour based on percentage thresholds. */
|
||||
function usageBarBg(pct: number): string {
|
||||
if (pct >= 80) return "bg-red-500/70";
|
||||
if (pct >= 60) return "bg-amber-500/70";
|
||||
return "bg-emerald-500/70";
|
||||
if (pct >= 80) return "bg-cherry";
|
||||
if (pct >= 60) return "bg-gold";
|
||||
return "bg-mint";
|
||||
}
|
||||
|
||||
function usageGlow(pct: number): string {
|
||||
if (pct >= 80) return "data-glow-cherry";
|
||||
if (pct >= 60) return "data-glow-gold";
|
||||
return "data-glow-mint";
|
||||
}
|
||||
|
||||
export default function ServerCard({ server }: ServerCardProps) {
|
||||
|
|
@ -36,90 +39,88 @@ export default function ServerCard({ server }: ServerCardProps) {
|
|||
const ramPct = Math.round(server.ram.pct);
|
||||
|
||||
return (
|
||||
<div className="glass-card p-5 animate-fade-in bg-gradient-to-br from-emerald-500/[0.04] to-transparent">
|
||||
<div className="deck-card p-5 animate-fade-in" data-accent="mint">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
|
||||
<Server className="w-4 h-4 text-emerald-400" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Server className="w-4 h-4 text-mint" />
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white">{server.name}</h3>
|
||||
<p className="text-[10px] text-slate-500">{server.host}</p>
|
||||
<h3 className="text-sm font-semibold text-base-900">{server.name}</h3>
|
||||
<p className="text-[10px] font-mono text-base-500">{server.host}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StatusDot online={server.online} />
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`status-dot ${server.online ? "bg-mint" : "bg-cherry"}`} />
|
||||
<span className={`text-[10px] font-mono font-medium ${server.online ? "text-mint" : "text-cherry"}`}>
|
||||
{server.online ? "Online" : "Offline"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!server.online ? (
|
||||
<div className="flex items-center justify-center py-8 text-slate-500 text-sm gap-2">
|
||||
<div className="flex items-center justify-center py-8 text-base-500 text-sm gap-2">
|
||||
<WifiOff className="w-4 h-4" />
|
||||
<span>Offline</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
{/* CPU Section */}
|
||||
{/* CPU */}
|
||||
<div className="flex items-center gap-4">
|
||||
<CpuRing pct={cpuPct} size={64} strokeWidth={5} />
|
||||
|
||||
<CpuRing pct={cpuPct} size={60} strokeWidth={4} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<Cpu className="w-3.5 h-3.5 text-slate-500" />
|
||||
<span className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
CPU
|
||||
</span>
|
||||
<Cpu className="w-3 h-3 text-base-500" />
|
||||
<span className="data-label">CPU</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<span className={`text-xl font-bold ${usageColor(cpuPct)}`} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
|
||||
<span className={`text-xl data-value ${usageColor(cpuPct)} ${usageGlow(cpuPct)}`}>
|
||||
{cpuPct}%
|
||||
</span>
|
||||
{server.cpu.temp_c !== null && (
|
||||
<span className="text-xs text-slate-500">
|
||||
{Math.round(server.cpu.temp_c)}°C
|
||||
<span className="text-[10px] font-mono text-base-500">
|
||||
{Math.round(server.cpu.temp_c)}°C
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-600 mt-0.5">
|
||||
<p className="text-[10px] font-mono text-base-500 mt-0.5">
|
||||
{server.cpu.cores} Kerne
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RAM Section */}
|
||||
{/* RAM */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<HardDrive className="w-3.5 h-3.5 text-slate-500" />
|
||||
<span className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
RAM
|
||||
</span>
|
||||
<HardDrive className="w-3 h-3 text-base-500" />
|
||||
<span className="data-label">RAM</span>
|
||||
</div>
|
||||
<span className={`text-xs font-semibold ${usageColor(ramPct)}`} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
|
||||
<span className={`text-xs data-value ${usageColor(ramPct)}`}>
|
||||
{ramPct}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="progress-bar">
|
||||
<div className="bar-track">
|
||||
<div
|
||||
className={`progress-fill ${usageBarBg(ramPct)}`}
|
||||
className={`bar-fill ${usageBarBg(ramPct)}`}
|
||||
style={{ width: `${ramPct}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] text-slate-600 mt-1.5">
|
||||
<p className="text-[10px] font-mono text-base-500 mt-1.5">
|
||||
{server.ram.used_gb.toFixed(1)} / {server.ram.total_gb.toFixed(1)} GB
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Uptime */}
|
||||
{server.uptime && (
|
||||
<p className="text-[10px] text-slate-600">
|
||||
Uptime: <span className="text-slate-400">{server.uptime}</span>
|
||||
<p className="text-[10px] font-mono text-base-500">
|
||||
Uptime: <span className="text-base-700">{server.uptime}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Docker Section */}
|
||||
{/* Docker */}
|
||||
{server.docker && (
|
||||
<div>
|
||||
<button
|
||||
|
|
@ -127,34 +128,32 @@ export default function ServerCard({ server }: ServerCardProps) {
|
|||
className="flex items-center justify-between w-full group"
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Box className="w-3.5 h-3.5 text-slate-500" />
|
||||
<span className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
Docker
|
||||
</span>
|
||||
<span className="badge bg-emerald-500/15 text-emerald-300 ml-1">
|
||||
<Box className="w-3 h-3 text-base-500" />
|
||||
<span className="data-label">Docker</span>
|
||||
<span className="tag border-mint/30 text-mint bg-mint/5 ml-1">
|
||||
{server.docker.running}
|
||||
</span>
|
||||
</div>
|
||||
{dockerExpanded ? (
|
||||
<ChevronUp className="w-3.5 h-3.5 text-slate-600 group-hover:text-slate-400 transition-colors" />
|
||||
<ChevronUp className="w-3 h-3 text-base-500 group-hover:text-base-700 transition-colors" />
|
||||
) : (
|
||||
<ChevronDown className="w-3.5 h-3.5 text-slate-600 group-hover:text-slate-400 transition-colors" />
|
||||
<ChevronDown className="w-3 h-3 text-base-500 group-hover:text-base-700 transition-colors" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{dockerExpanded && server.docker.containers.length > 0 && (
|
||||
<div className="mt-2.5 space-y-1 max-h-48 overflow-y-auto">
|
||||
<div className="mt-2.5 space-y-px max-h-48 overflow-y-auto">
|
||||
{server.docker.containers.map((c) => (
|
||||
<div
|
||||
key={c.name}
|
||||
className="flex items-center justify-between px-2.5 py-1.5 rounded-lg bg-white/[0.02] border border-white/[0.04]"
|
||||
className="flex items-center justify-between px-3 py-1.5 bg-base-100 border-l-2 border-base-300 hover:border-mint transition-colors"
|
||||
>
|
||||
<span className="text-xs text-slate-300 truncate mr-2">{c.name}</span>
|
||||
<span className="text-xs text-base-700 truncate mr-2 font-mono">{c.name}</span>
|
||||
<span
|
||||
className={`text-[10px] font-medium ${
|
||||
className={`text-[10px] font-mono font-medium ${
|
||||
c.status.toLowerCase().includes("up")
|
||||
? "text-emerald-400"
|
||||
: "text-red-400"
|
||||
? "text-mint"
|
||||
: "text-cherry"
|
||||
}`}
|
||||
>
|
||||
{c.status.toLowerCase().includes("up") ? "Running" : c.status}
|
||||
|
|
@ -171,37 +170,7 @@ export default function ServerCard({ server }: ServerCardProps) {
|
|||
);
|
||||
}
|
||||
|
||||
/** Green/Red online indicator dot. */
|
||||
function StatusDot({ online }: { online: boolean }) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="relative">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
online ? "bg-emerald-400" : "bg-red-400"
|
||||
}`}
|
||||
/>
|
||||
{online && (
|
||||
<div className="absolute inset-0 w-2 h-2 rounded-full bg-emerald-400 animate-ping opacity-50" />
|
||||
)}
|
||||
</div>
|
||||
<span className={`text-[10px] font-medium ${online ? "text-emerald-400" : "text-red-400"}`}>
|
||||
{online ? "Online" : "Offline"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** SVG circular progress ring for CPU usage. */
|
||||
function CpuRing({
|
||||
pct,
|
||||
size,
|
||||
strokeWidth,
|
||||
}: {
|
||||
pct: number;
|
||||
size: number;
|
||||
strokeWidth: number;
|
||||
}) {
|
||||
function CpuRing({ pct, size, strokeWidth }: { pct: number; size: number; strokeWidth: number }) {
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const offset = circumference - (pct / 100) * circumference;
|
||||
|
|
@ -209,16 +178,14 @@ function CpuRing({
|
|||
return (
|
||||
<div className="relative flex-shrink-0" style={{ width: size, height: size }}>
|
||||
<svg width={size} height={size} className="-rotate-90">
|
||||
{/* Track */}
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke="rgba(148,163,184,0.1)"
|
||||
stroke="#232326"
|
||||
strokeWidth={strokeWidth}
|
||||
/>
|
||||
{/* Progress */}
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
|
|
@ -226,15 +193,14 @@ function CpuRing({
|
|||
fill="none"
|
||||
stroke={usageStroke(pct)}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeLinecap="butt"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
style={{ transition: "stroke-dashoffset 0.7s ease-out, stroke 0.3s ease" }}
|
||||
/>
|
||||
</svg>
|
||||
{/* Center icon */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Cpu className={`w-4 h-4 ${usageColor(pct)} opacity-50`} />
|
||||
<Cpu className={`w-3.5 h-3.5 ${usageColor(pct)} opacity-40`} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,15 +13,13 @@ const TABS: { key: TabKey; label: string }[] = [
|
|||
{ key: "sams", label: "Sam's" },
|
||||
];
|
||||
|
||||
/** Colour for task priority (1 = highest). */
|
||||
function priorityIndicator(priority: number): { color: string; label: string } {
|
||||
if (priority <= 1) return { color: "bg-red-500", label: "Hoch" };
|
||||
if (priority <= 2) return { color: "bg-amber-500", label: "Mittel" };
|
||||
if (priority <= 3) return { color: "bg-blue-500", label: "Normal" };
|
||||
return { color: "bg-slate-500", label: "Niedrig" };
|
||||
if (priority <= 1) return { color: "bg-cherry", label: "Hoch" };
|
||||
if (priority <= 2) return { color: "bg-gold", label: "Mittel" };
|
||||
if (priority <= 3) return { color: "bg-azure", label: "Normal" };
|
||||
return { color: "bg-base-500", label: "Niedrig" };
|
||||
}
|
||||
|
||||
/** Format a due date string to a short German date. */
|
||||
function formatDueDate(iso: string | null): string | null {
|
||||
if (!iso) return null;
|
||||
try {
|
||||
|
|
@ -30,7 +28,7 @@ function formatDueDate(iso: string | null): string | null {
|
|||
const now = new Date();
|
||||
const diffDays = Math.ceil((d.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays < 0) return "Ueberfaellig";
|
||||
if (diffDays < 0) return "Überfällig";
|
||||
if (diffDays === 0) return "Heute";
|
||||
if (diffDays === 1) return "Morgen";
|
||||
return d.toLocaleDateString("de-DE", { day: "2-digit", month: "short" });
|
||||
|
|
@ -46,12 +44,12 @@ export default function TasksCard({ data }: TasksCardProps) {
|
|||
|
||||
if (data.error) {
|
||||
return (
|
||||
<div className="glass-card p-5 animate-fade-in">
|
||||
<div className="flex items-center gap-3 text-red-400">
|
||||
<div className="deck-card p-5 animate-fade-in">
|
||||
<div className="flex items-center gap-3 text-cherry">
|
||||
<AlertTriangle className="w-5 h-5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium">Aufgaben nicht verfuegbar</p>
|
||||
<p className="text-xs text-slate-500 mt-0.5">Verbindung fehlgeschlagen</p>
|
||||
<p className="text-sm font-medium">Aufgaben nicht verfügbar</p>
|
||||
<p className="text-xs text-base-600 mt-0.5">Verbindung fehlgeschlagen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -62,19 +60,15 @@ export default function TasksCard({ data }: TasksCardProps) {
|
|||
const tasks = group?.open ?? [];
|
||||
|
||||
return (
|
||||
<div className="glass-card p-5 animate-fade-in bg-gradient-to-br from-blue-500/[0.04] to-transparent">
|
||||
<div className="deck-card p-5 animate-fade-in" data-accent="azure">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-500/10 border border-blue-500/20">
|
||||
<CheckSquare className="w-4 h-4 text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-white">Aufgaben</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<CheckSquare className="w-4 h-4 text-azure" />
|
||||
<h3 className="text-sm font-semibold text-base-900">Aufgaben</h3>
|
||||
</div>
|
||||
|
||||
{/* Tab buttons */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 mb-4">
|
||||
{TABS.map((tab) => {
|
||||
const tabGroup = tab.key === "private" ? data.private : data.sams;
|
||||
const openCount = tabGroup?.open_count ?? 0;
|
||||
|
|
@ -84,23 +78,13 @@ export default function TasksCard({ data }: TasksCardProps) {
|
|||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`
|
||||
flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-medium transition-all duration-200
|
||||
${
|
||||
isActive
|
||||
? "bg-blue-500/15 text-blue-300 border border-blue-500/20"
|
||||
: "bg-white/[0.03] text-slate-400 border border-white/[0.04] hover:bg-white/[0.06] hover:text-slate-300"
|
||||
}
|
||||
`}
|
||||
className={`tab-btn ${isActive ? "active" : ""} flex items-center gap-2`}
|
||||
>
|
||||
{tab.label}
|
||||
{openCount > 0 && (
|
||||
<span
|
||||
className={`
|
||||
inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 rounded-full text-[10px] font-bold
|
||||
${isActive ? "bg-blue-500/25 text-blue-200" : "bg-white/[0.06] text-slate-500"}
|
||||
`}
|
||||
>
|
||||
<span className={`text-[10px] font-bold ${
|
||||
isActive ? "text-gold" : "text-base-500"
|
||||
}`}>
|
||||
{openCount}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -109,14 +93,14 @@ export default function TasksCard({ data }: TasksCardProps) {
|
|||
})}
|
||||
</div>
|
||||
|
||||
{/* Task list */}
|
||||
{/* Tasks */}
|
||||
{tasks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-slate-600">
|
||||
<CheckSquare className="w-8 h-8 mb-2 opacity-30" />
|
||||
<p className="text-xs">Alles erledigt!</p>
|
||||
<div className="flex flex-col items-center justify-center py-8 text-base-500">
|
||||
<CheckSquare className="w-8 h-8 mb-2 opacity-20" />
|
||||
<p className="text-xs font-mono">Alles erledigt!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5 max-h-80 overflow-y-auto pr-1">
|
||||
<div className="space-y-px max-h-80 overflow-y-auto">
|
||||
{tasks.map((task) => (
|
||||
<TaskItem key={task.id} task={task} />
|
||||
))}
|
||||
|
|
@ -129,44 +113,36 @@ export default function TasksCard({ data }: TasksCardProps) {
|
|||
function TaskItem({ task }: { task: Task }) {
|
||||
const p = priorityIndicator(task.priority);
|
||||
const due = formatDueDate(task.due_date);
|
||||
const isOverdue = due === "Ueberfaellig";
|
||||
const isOverdue = due === "Überfällig";
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-3 px-3 py-2.5 rounded-xl bg-white/[0.02] border border-white/[0.04] hover:bg-white/[0.04] transition-colors group">
|
||||
{/* Visual checkbox */}
|
||||
<div className="flex items-start gap-3 px-3 py-2.5 bg-base-100 border-l-2 border-base-300 hover:border-azure transition-colors group">
|
||||
<div className="mt-0.5 flex-shrink-0">
|
||||
{task.done ? (
|
||||
<CheckSquare className="w-4 h-4 text-blue-400" />
|
||||
<CheckSquare className="w-4 h-4 text-azure" />
|
||||
) : (
|
||||
<Square className="w-4 h-4 text-slate-600 group-hover:text-slate-400 transition-colors" />
|
||||
<Square className="w-4 h-4 text-base-400 group-hover:text-base-600 transition-colors" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p
|
||||
className={`text-sm leading-snug ${
|
||||
task.done ? "text-slate-600 line-through" : "text-slate-200"
|
||||
}`}
|
||||
>
|
||||
<p className={`text-sm leading-snug ${
|
||||
task.done ? "text-base-500 line-through" : "text-base-800"
|
||||
}`}>
|
||||
{task.title}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 mt-1.5 flex-wrap">
|
||||
{/* Project badge */}
|
||||
{task.project_name && (
|
||||
<span className="badge bg-indigo-500/15 text-indigo-300">
|
||||
<span className="tag border-iris/30 text-iris bg-iris/5">
|
||||
{task.project_name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Due date */}
|
||||
{due && (
|
||||
<span
|
||||
className={`flex items-center gap-1 text-[10px] font-medium ${
|
||||
isOverdue ? "text-red-400" : "text-slate-500"
|
||||
}`}
|
||||
>
|
||||
<span className={`flex items-center gap-1 text-[10px] font-mono font-medium ${
|
||||
isOverdue ? "text-cherry" : "text-base-500"
|
||||
}`}>
|
||||
<Calendar className="w-2.5 h-2.5" />
|
||||
{due}
|
||||
</span>
|
||||
|
|
@ -174,9 +150,8 @@ function TaskItem({ task }: { task: Task }) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Priority dot */}
|
||||
<div className="flex-shrink-0 mt-1.5" title={p.label}>
|
||||
<div className={`w-2 h-2 rounded-full ${p.color}`} />
|
||||
<div className={`w-1.5 h-1.5 ${p.color}`} style={{ borderRadius: 0 }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,36 +6,22 @@ interface WeatherCardProps {
|
|||
accent: "cyan" | "amber";
|
||||
}
|
||||
|
||||
const accentMap = {
|
||||
cyan: {
|
||||
gradient: "from-cyan-500/10 to-cyan-900/5",
|
||||
text: "text-cyan-400",
|
||||
border: "border-cyan-500/20",
|
||||
badge: "bg-cyan-500/15 text-cyan-300",
|
||||
statIcon: "text-cyan-400/70",
|
||||
ring: "ring-cyan-500/10",
|
||||
},
|
||||
amber: {
|
||||
gradient: "from-amber-500/10 to-amber-900/5",
|
||||
text: "text-amber-400",
|
||||
border: "border-amber-500/20",
|
||||
badge: "bg-amber-500/15 text-amber-300",
|
||||
statIcon: "text-amber-400/70",
|
||||
ring: "ring-amber-500/10",
|
||||
},
|
||||
const ACCENT = {
|
||||
cyan: { strip: "gold", text: "text-gold", glow: "data-glow-gold", tag: "border-gold/30 text-gold bg-gold/5" },
|
||||
amber: { strip: "mint", text: "text-mint", glow: "data-glow-mint", tag: "border-mint/30 text-mint bg-mint/5" },
|
||||
} as const;
|
||||
|
||||
export default function WeatherCard({ data, accent }: WeatherCardProps) {
|
||||
const a = accentMap[accent];
|
||||
const a = ACCENT[accent];
|
||||
|
||||
if (data.error) {
|
||||
return (
|
||||
<div className="glass-card p-5 animate-fade-in">
|
||||
<div className="flex items-center gap-3 text-red-400">
|
||||
<div className="deck-card p-5 animate-fade-in">
|
||||
<div className="flex items-center gap-3 text-cherry">
|
||||
<CloudOff className="w-5 h-5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium">Wetter nicht verfuegbar</p>
|
||||
<p className="text-xs text-slate-500 mt-0.5">{data.location || "Unbekannt"}</p>
|
||||
<p className="text-sm font-medium">Wetter nicht verfügbar</p>
|
||||
<p className="text-xs text-base-600 mt-0.5">{data.location || "Unbekannt"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,73 +29,66 @@ export default function WeatherCard({ data, accent }: WeatherCardProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={`glass-card p-5 animate-fade-in bg-gradient-to-br ${a.gradient}`}>
|
||||
{/* Header: location badge */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className={`badge ${a.badge}`}>{data.location}</span>
|
||||
<div className="deck-card corner-marks p-6 animate-fade-in" data-accent={a.strip}>
|
||||
{/* Location tag */}
|
||||
<div className="mb-5">
|
||||
<span className={`tag ${a.tag}`}>{data.location}</span>
|
||||
</div>
|
||||
|
||||
{/* Main row: icon + temp */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
{/* Temperature hero */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span
|
||||
className="text-5xl font-extrabold text-white tracking-tighter"
|
||||
style={{ fontFamily: "'JetBrains Mono', monospace" }}
|
||||
>
|
||||
<div className="flex items-baseline gap-0.5">
|
||||
<span className={`text-5xl font-mono font-bold ${a.text} ${a.glow} tracking-tighter`}>
|
||||
{Math.round(data.temp)}
|
||||
</span>
|
||||
<span className="text-2xl font-light text-slate-400">°</span>
|
||||
<span className="text-xl font-light text-base-500">°</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-400 mt-1 capitalize">{data.description}</p>
|
||||
<p className="text-sm text-base-600 mt-1 capitalize font-light">{data.description}</p>
|
||||
</div>
|
||||
|
||||
<span className="text-5xl select-none" role="img" aria-label="weather">
|
||||
<span className="text-5xl select-none opacity-80" role="img" aria-label="weather">
|
||||
{data.icon}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Stat grid */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<StatItem
|
||||
icon={<Thermometer className={`w-3.5 h-3.5 ${a.statIcon}`} />}
|
||||
label="Gefuehlt"
|
||||
value={`${Math.round(data.feels_like)}\u00B0`}
|
||||
{/* Stats row */}
|
||||
<div className="grid grid-cols-3 gap-px bg-base-300">
|
||||
<StatCell
|
||||
icon={<Thermometer className="w-3 h-3 text-base-500" />}
|
||||
label="Gefühlt"
|
||||
value={`${Math.round(data.feels_like)}°`}
|
||||
/>
|
||||
<StatItem
|
||||
icon={<Droplets className={`w-3.5 h-3.5 ${a.statIcon}`} />}
|
||||
<StatCell
|
||||
icon={<Droplets className="w-3 h-3 text-base-500" />}
|
||||
label="Feuchte"
|
||||
value={`${data.humidity}%`}
|
||||
/>
|
||||
<StatItem
|
||||
icon={<Wind className={`w-3.5 h-3.5 ${a.statIcon}`} />}
|
||||
<StatCell
|
||||
icon={<Wind className="w-3 h-3 text-base-500" />}
|
||||
label="Wind"
|
||||
value={`${Math.round(data.wind_kmh)} km/h`}
|
||||
value={`${Math.round(data.wind_kmh)}`}
|
||||
unit="km/h"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
function StatCell({ icon, label, value, unit }: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string;
|
||||
unit?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-1.5 rounded-xl bg-white/[0.03] border border-white/[0.04] px-2 py-2.5">
|
||||
<div className="flex flex-col items-center gap-1.5 py-3 bg-base-50">
|
||||
{icon}
|
||||
<span
|
||||
className="text-sm font-semibold text-white"
|
||||
style={{ fontFamily: "'JetBrains Mono', monospace" }}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
<span className="text-[10px] uppercase tracking-wider text-slate-500">{label}</span>
|
||||
<div className="flex items-baseline gap-0.5">
|
||||
<span className="text-sm data-value text-base-900">{value}</span>
|
||||
{unit && <span className="text-[9px] text-base-500">{unit}</span>}
|
||||
</div>
|
||||
<span className="data-label">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,135 +14,228 @@ export default function Dashboard() {
|
|||
const { data, loading, error, connected, refresh } = useDashboard();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen text-white">
|
||||
<div className="min-h-screen text-base-800">
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div className="fixed top-0 inset-x-0 z-50 flex items-center justify-center gap-2 bg-red-500/15 border-b border-red-500/20 backdrop-blur-sm px-4 py-2 animate-slide-up">
|
||||
<AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0" />
|
||||
<p className="text-xs text-red-300">{error}</p>
|
||||
<button onClick={refresh} className="ml-3 text-xs text-red-300 hover:text-white underline underline-offset-2 transition-colors">
|
||||
<div className="fixed top-0 inset-x-0 z-50 flex items-center justify-center gap-2 bg-cherry/10 border-b border-cherry/20 px-4 py-2 animate-fade-in">
|
||||
<AlertTriangle className="w-4 h-4 text-cherry flex-shrink-0" />
|
||||
<p className="text-xs text-cherry font-mono">{error}</p>
|
||||
<button
|
||||
onClick={refresh}
|
||||
className="ml-3 text-xs text-cherry hover:text-base-900 underline underline-offset-2 transition-colors font-mono"
|
||||
>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<header className="sticky top-0 z-40 border-b border-white/[0.04] bg-slate-950/80 backdrop-blur-lg">
|
||||
<div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-base sm:text-lg font-bold tracking-tight text-white">Daily Briefing</h1>
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-40 border-b border-base-300 bg-base-50/95 backdrop-blur-sm">
|
||||
<div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="font-serif italic text-lg sm:text-xl text-base-900 tracking-tight">
|
||||
Daily Briefing
|
||||
</h1>
|
||||
<LiveIndicator connected={connected} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={refresh}
|
||||
disabled={loading}
|
||||
className="flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 border border-white/[0.06] hover:bg-white/10 transition-colors disabled:opacity-40"
|
||||
className="flex items-center justify-center w-8 h-8 bg-base-100 border border-base-300 hover:border-base-500 transition-colors disabled:opacity-40"
|
||||
title="Daten aktualisieren"
|
||||
>
|
||||
<RefreshCw className={`w-3.5 h-3.5 text-slate-400 ${loading ? "animate-spin" : ""}`} />
|
||||
<RefreshCw
|
||||
className={`w-3.5 h-3.5 text-base-600 ${loading ? "animate-spin" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
<Link
|
||||
to="/admin"
|
||||
className="flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 border border-white/[0.06] hover:bg-white/10 transition-colors"
|
||||
className="flex items-center justify-center w-8 h-8 bg-base-100 border border-base-300 hover:border-base-500 transition-colors"
|
||||
title="Admin Panel"
|
||||
>
|
||||
<Settings className="w-3.5 h-3.5 text-slate-400" />
|
||||
<Settings className="w-3.5 h-3.5 text-base-600" />
|
||||
</Link>
|
||||
<Clock />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
|
||||
<main className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{loading && !data ? (
|
||||
<LoadingSkeleton />
|
||||
) : data ? (
|
||||
<>
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
|
||||
<div className="space-y-10">
|
||||
{/* Section 01 — Wetter */}
|
||||
<section>
|
||||
<div className="section-label">
|
||||
<span className="section-number">01</span>
|
||||
<h2 className="section-title">Wetter</h2>
|
||||
<span className="section-rule" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-px bg-base-300">
|
||||
<WeatherCard data={data.weather.primary} accent="cyan" />
|
||||
<WeatherCard data={data.weather.secondary} accent="amber" />
|
||||
<div className="md:col-span-2">
|
||||
<HourlyForecast slots={data.weather.hourly} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
|
||||
{/* Section 02 — Infrastruktur */}
|
||||
<section>
|
||||
<div className="section-label">
|
||||
<span className="section-number">02</span>
|
||||
<h2 className="section-title">Infrastruktur</h2>
|
||||
<span className="section-rule" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-px bg-base-300">
|
||||
{data.servers.servers.map((srv) => (
|
||||
<ServerCard key={srv.name} server={srv} />
|
||||
))}
|
||||
<HomeAssistant data={data.ha} />
|
||||
<TasksCard data={data.tasks} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{(data.mqtt?.connected || (data.mqtt?.entities?.length ?? 0) > 0) && (
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
|
||||
<div className="md:col-span-2 xl:col-span-4">
|
||||
<MqttCard data={data.mqtt} />
|
||||
{/* Section 03 — MQTT (conditional) */}
|
||||
{(data.mqtt?.connected ||
|
||||
(data.mqtt?.entities?.length ?? 0) > 0) && (
|
||||
<section>
|
||||
<div className="section-label">
|
||||
<span className="section-number">03</span>
|
||||
<h2 className="section-title">MQTT</h2>
|
||||
<span className="section-rule" />
|
||||
</div>
|
||||
|
||||
<MqttCard data={data.mqtt} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Section 04 — Nachrichten */}
|
||||
<section>
|
||||
<NewsGrid data={data.news} />
|
||||
</section>
|
||||
|
||||
<footer className="text-center pb-4">
|
||||
<p className="text-[10px] text-slate-700">
|
||||
{/* Footer */}
|
||||
<footer className="flex items-center justify-between py-4 border-t border-base-300">
|
||||
<p className="text-[10px] font-mono text-base-500">
|
||||
Letzte Aktualisierung:{" "}
|
||||
<span className="text-base-700">
|
||||
{new Date(data.timestamp).toLocaleTimeString("de-DE", {
|
||||
hour: "2-digit", minute: "2-digit", second: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-[10px] font-mono text-base-500">
|
||||
Daily Briefing v2
|
||||
</p>
|
||||
</footer>
|
||||
</>
|
||||
</div>
|
||||
) : null}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Live indicator ─────────────────────────────────────── */
|
||||
|
||||
function LiveIndicator({ connected }: { connected: boolean }) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white/5 border border-white/[0.06]">
|
||||
<div className="flex items-center gap-2 px-2.5 py-1 border border-base-300">
|
||||
<div className="relative">
|
||||
<div className={`w-1.5 h-1.5 rounded-full ${connected ? "bg-emerald-400" : "bg-slate-600"}`} />
|
||||
{connected && <div className="absolute inset-0 w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping opacity-50" />}
|
||||
<div
|
||||
className={`w-1.5 h-1.5 ${connected ? "bg-mint" : "bg-base-500"}`}
|
||||
style={{ borderRadius: 0 }}
|
||||
/>
|
||||
{connected && (
|
||||
<div
|
||||
className="absolute inset-0 w-1.5 h-1.5 bg-mint animate-ping opacity-40"
|
||||
style={{ borderRadius: 0 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span className={`text-[10px] font-medium ${connected ? "text-emerald-400" : "text-slate-600"}`}>
|
||||
<span
|
||||
className={`text-[10px] font-mono font-medium ${
|
||||
connected ? "text-mint" : "text-base-500"
|
||||
}`}
|
||||
>
|
||||
{connected ? "Live" : "Offline"}
|
||||
</span>
|
||||
{connected ? <Wifi className="w-3 h-3 text-emerald-400/50" /> : <WifiOff className="w-3 h-3 text-slate-600" />}
|
||||
{connected ? (
|
||||
<Wifi className="w-3 h-3 text-mint/50" />
|
||||
) : (
|
||||
<WifiOff className="w-3 h-3 text-base-500" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Loading skeleton ───────────────────────────────────── */
|
||||
|
||||
function LoadingSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6 animate-pulse">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
|
||||
<SkeletonCard className="h-52" />
|
||||
<SkeletonCard className="h-52" />
|
||||
<SkeletonCard className="h-24 md:col-span-2" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => <SkeletonCard key={i} className="h-72" />)}
|
||||
</div>
|
||||
<div className="space-y-10">
|
||||
{/* Section 01 skeleton */}
|
||||
<div>
|
||||
<div className="h-6 w-32 rounded bg-white/5 mb-4" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||
{Array.from({ length: 8 }).map((_, i) => <SkeletonCard key={i} className="h-28" />)}
|
||||
<div className="section-label">
|
||||
<span className="section-number">01</span>
|
||||
<div className="h-3 w-16 bg-base-200" />
|
||||
<span className="section-rule" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-px bg-base-300">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<SkeletonCard key={`w-${i}`} className="h-52" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 02 skeleton */}
|
||||
<div>
|
||||
<div className="section-label">
|
||||
<span className="section-number">02</span>
|
||||
<div className="h-3 w-24 bg-base-200" />
|
||||
<span className="section-rule" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-px bg-base-300">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<SkeletonCard key={`s-${i}`} className="h-72" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 04 skeleton */}
|
||||
<div>
|
||||
<div className="section-label">
|
||||
<span className="section-number">04</span>
|
||||
<div className="h-3 w-28 bg-base-200" />
|
||||
<span className="section-rule" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-px bg-base-300">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<SkeletonCard key={`n-${i}`} className="h-28" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scan loader */}
|
||||
<div className="scan-loader" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SkeletonCard({ className = "" }: { className?: string }) {
|
||||
return (
|
||||
<div className={`glass-card ${className}`}>
|
||||
<div className="p-5 space-y-3">
|
||||
<div className="h-3 w-1/3 rounded bg-white/5" />
|
||||
<div className="h-2 w-2/3 rounded bg-white/[0.03]" />
|
||||
<div className="h-2 w-1/2 rounded bg-white/[0.03]" />
|
||||
<div className={`bg-base-50 ${className}`}>
|
||||
<div className="p-5 space-y-3 animate-pulse">
|
||||
<div className="h-3 w-1/3 bg-base-200" />
|
||||
<div className="h-2 w-2/3 bg-base-200/60" />
|
||||
<div className="h-2 w-1/2 bg-base-200/60" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,115 +8,182 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", system-ui, -apple-system, sans-serif;
|
||||
background: linear-gradient(135deg, #0a0e1a 0%, #0f172a 50%, #0c1220 100%);
|
||||
font-family: "IBM Plex Sans", system-ui, sans-serif;
|
||||
background: #0d0d0f;
|
||||
color: #e8e5e0;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Subtle film grain overlay */
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
opacity: 0.022;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 256px 256px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(148, 163, 184, 0.2);
|
||||
border-radius: 3px;
|
||||
background: #2a2a2e;
|
||||
border-radius: 0;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(148, 163, 184, 0.4);
|
||||
background: #38383d;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #e8a44a40;
|
||||
color: #e8e5e0;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.glass-card {
|
||||
@apply relative overflow-hidden rounded-2xl border border-white/[0.06]
|
||||
bg-white/[0.03] backdrop-blur-md shadow-xl shadow-black/20;
|
||||
/* ── Card System ─────────────────────────────────────────── */
|
||||
.deck-card {
|
||||
@apply relative bg-base-50 border border-base-300 overflow-hidden;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.glass-card-hover {
|
||||
@apply glass-card transition-all duration-300
|
||||
hover:border-white/[0.12] hover:bg-white/[0.05]
|
||||
hover:shadow-2xl hover:shadow-black/30
|
||||
hover:-translate-y-0.5;
|
||||
}
|
||||
|
||||
.glass-card::before {
|
||||
.deck-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.04) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: #2a2a2e;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.accent-glow {
|
||||
position: relative;
|
||||
.deck-card:hover::before {
|
||||
background: #e8a44a;
|
||||
}
|
||||
.accent-glow::after {
|
||||
|
||||
.deck-card[data-accent="gold"]::before { background: #e8a44a; }
|
||||
.deck-card[data-accent="mint"]::before { background: #4ae8a8; }
|
||||
.deck-card[data-accent="cherry"]::before { background: #e85a5a; }
|
||||
.deck-card[data-accent="iris"]::before { background: #a87aec; }
|
||||
.deck-card[data-accent="azure"]::before { background: #5ab4e8; }
|
||||
|
||||
/* Corner markers — technical drawing accent */
|
||||
.corner-marks {
|
||||
@apply relative;
|
||||
}
|
||||
.corner-marks::before,
|
||||
.corner-marks::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-color: #4a4a50;
|
||||
border-style: solid;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.accent-glow:hover::after {
|
||||
opacity: 1;
|
||||
.corner-marks::before {
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
border-width: 1px 1px 0 0;
|
||||
}
|
||||
.corner-marks::after {
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
border-width: 0 0 1px 1px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
@apply text-3xl font-bold tracking-tight;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
/* ── Section Headers ─────────────────────────────────────── */
|
||||
.section-label {
|
||||
@apply flex items-center gap-3 mb-5;
|
||||
}
|
||||
.section-number {
|
||||
@apply font-mono text-[10px] font-semibold tracking-widest text-base-500 uppercase;
|
||||
}
|
||||
.section-title {
|
||||
@apply font-serif italic text-lg text-base-900 tracking-tight;
|
||||
}
|
||||
.section-rule {
|
||||
@apply flex-1 h-px bg-base-300;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
@apply text-xs font-medium uppercase tracking-wider text-slate-400;
|
||||
/* ── Data Values ─────────────────────────────────────────── */
|
||||
.data-value {
|
||||
@apply font-mono font-semibold tracking-tight;
|
||||
}
|
||||
.data-label {
|
||||
@apply text-[10px] font-mono uppercase tracking-[0.15em] text-base-600;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@apply inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px]
|
||||
font-semibold uppercase tracking-wider;
|
||||
.data-glow-gold { text-shadow: 0 0 20px #e8a44a33, 0 0 40px #e8a44a15; }
|
||||
.data-glow-mint { text-shadow: 0 0 20px #4ae8a833, 0 0 40px #4ae8a815; }
|
||||
.data-glow-cherry { text-shadow: 0 0 20px #e85a5a33, 0 0 40px #e85a5a15; }
|
||||
|
||||
/* ── Tags/Badges ─────────────────────────────────────────── */
|
||||
.tag {
|
||||
@apply inline-flex items-center px-2 py-0.5 text-[10px] font-mono font-medium uppercase tracking-wider border;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@apply h-1.5 rounded-full bg-slate-800 overflow-hidden;
|
||||
/* ── Tabs ─────────────────────────────────────────────────── */
|
||||
.tab-btn {
|
||||
@apply px-3 py-1.5 text-xs font-mono font-medium tracking-wider uppercase transition-all duration-150 cursor-pointer select-none border;
|
||||
border-radius: 0;
|
||||
}
|
||||
.tab-btn.active {
|
||||
@apply bg-gold/10 border-gold/40 text-gold;
|
||||
}
|
||||
.tab-btn:not(.active) {
|
||||
@apply bg-transparent border-base-300 text-base-600 hover:text-base-800 hover:border-base-400;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
@apply h-full rounded-full transition-all duration-700 ease-out;
|
||||
/* ── Progress ────────────────────────────────────────────── */
|
||||
.bar-track {
|
||||
@apply h-1 bg-base-200 overflow-hidden;
|
||||
border-radius: 0;
|
||||
}
|
||||
.bar-fill {
|
||||
@apply h-full transition-all duration-700 ease-out;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.category-tab {
|
||||
@apply px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200
|
||||
cursor-pointer select-none;
|
||||
/* ── Scan-line loader ────────────────────────────────────── */
|
||||
.scan-loader {
|
||||
@apply h-px bg-base-200 overflow-hidden relative;
|
||||
}
|
||||
.category-tab.active {
|
||||
@apply bg-white/10 text-white;
|
||||
.scan-loader::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, #e8a44a, transparent);
|
||||
animation: scan 1.5s ease-in-out infinite;
|
||||
}
|
||||
.category-tab:not(.active) {
|
||||
@apply text-slate-400 hover:text-slate-200 hover:bg-white/5;
|
||||
|
||||
/* ── Dividers ────────────────────────────────────────────── */
|
||||
.divider {
|
||||
@apply border-none h-px bg-base-300 my-6;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-gradient {
|
||||
@apply bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
|
|
|
|||
|
|
@ -4,28 +4,73 @@ export default {
|
|||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
surface: {
|
||||
50: "rgba(255,255,255,0.05)",
|
||||
100: "rgba(255,255,255,0.08)",
|
||||
200: "rgba(255,255,255,0.12)",
|
||||
base: {
|
||||
DEFAULT: "#0d0d0f",
|
||||
50: "#161618",
|
||||
100: "#1c1c1f",
|
||||
200: "#232326",
|
||||
300: "#2a2a2e",
|
||||
400: "#38383d",
|
||||
500: "#4a4a50",
|
||||
600: "#6b6966",
|
||||
700: "#8a8783",
|
||||
800: "#b0ada8",
|
||||
900: "#e8e5e0",
|
||||
},
|
||||
gold: {
|
||||
DEFAULT: "#e8a44a",
|
||||
dim: "#e8a44a80",
|
||||
glow: "#e8a44a33",
|
||||
muted: "#c4884a",
|
||||
},
|
||||
mint: {
|
||||
DEFAULT: "#4ae8a8",
|
||||
dim: "#4ae8a880",
|
||||
glow: "#4ae8a833",
|
||||
},
|
||||
cherry: {
|
||||
DEFAULT: "#e85a5a",
|
||||
dim: "#e85a5a80",
|
||||
glow: "#e85a5a33",
|
||||
},
|
||||
iris: {
|
||||
DEFAULT: "#a87aec",
|
||||
dim: "#a87aec80",
|
||||
glow: "#a87aec33",
|
||||
},
|
||||
azure: {
|
||||
DEFAULT: "#5ab4e8",
|
||||
dim: "#5ab4e880",
|
||||
glow: "#5ab4e833",
|
||||
},
|
||||
},
|
||||
backdropBlur: {
|
||||
xs: "2px",
|
||||
fontFamily: {
|
||||
serif: ['"Instrument Serif"', "Georgia", "serif"],
|
||||
sans: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
|
||||
mono: ['"IBM Plex Mono"', "Menlo", "monospace"],
|
||||
},
|
||||
animation: {
|
||||
"fade-in": "fadeIn 0.5s ease-out",
|
||||
"slide-up": "slideUp 0.4s ease-out",
|
||||
"pulse-slow": "pulse 3s ease-in-out infinite",
|
||||
"fade-in": "fadeIn 0.4s ease-out both",
|
||||
"slide-in": "slideIn 0.3s ease-out both",
|
||||
"scan": "scan 1.5s ease-in-out infinite",
|
||||
"glow-pulse": "glowPulse 2s ease-in-out infinite",
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
"0%": { opacity: "0", transform: "translateY(8px)" },
|
||||
"0%": { opacity: "0", transform: "translateY(6px)" },
|
||||
"100%": { opacity: "1", transform: "translateY(0)" },
|
||||
},
|
||||
slideUp: {
|
||||
"0%": { opacity: "0", transform: "translateY(16px)" },
|
||||
"100%": { opacity: "1", transform: "translateY(0)" },
|
||||
slideIn: {
|
||||
"0%": { opacity: "0", transform: "translateX(-8px)" },
|
||||
"100%": { opacity: "1", transform: "translateX(0)" },
|
||||
},
|
||||
scan: {
|
||||
"0%, 100%": { transform: "translateX(-100%)" },
|
||||
"50%": { transform: "translateX(100%)" },
|
||||
},
|
||||
glowPulse: {
|
||||
"0%, 100%": { opacity: "0.5" },
|
||||
"50%": { opacity: "1" },
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue