Restyle to match Werte-App layout: light theme, bordered container
- Cream background (#FFFFDD), 2px black border, rounded container - Current value card with #CCCCFF background - White chart area with border - Footer with border-top matching Werte-App style Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
+57
-33
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip, Filler } from 'chart.js';
|
||||
import 'chart.js/auto';
|
||||
import { Chart } from 'chart.js';
|
||||
|
||||
type Measurement = { timestamp: number; soil_moisture: number };
|
||||
|
||||
@@ -21,7 +21,9 @@
|
||||
|
||||
function updateChart() {
|
||||
if (!chart) return;
|
||||
chart.data.labels = data.map(d => new Date(d.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }));
|
||||
chart.data.labels = data.map(d =>
|
||||
new Date(d.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
|
||||
);
|
||||
chart.data.datasets[0].data = data.map(d => d.soil_moisture);
|
||||
chart.update();
|
||||
}
|
||||
@@ -34,8 +36,8 @@
|
||||
datasets: [{
|
||||
label: 'Bodenfeuchte (%)',
|
||||
data: [],
|
||||
borderColor: '#4ade80',
|
||||
backgroundColor: 'rgba(74, 222, 128, 0.1)',
|
||||
borderColor: '#2980b9',
|
||||
backgroundColor: 'rgba(133, 183, 215, 0.2)',
|
||||
borderWidth: 2,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
@@ -48,14 +50,14 @@
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
ticks: { color: '#9ca3af', maxTicksLimit: 8 },
|
||||
grid: { color: '#374151' },
|
||||
ticks: { color: '#555', maxTicksLimit: 8 },
|
||||
grid: { color: '#e5e7eb' },
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
ticks: { color: '#9ca3af', callback: v => `${v} %` },
|
||||
grid: { color: '#374151' },
|
||||
ticks: { color: '#555', callback: v => `${v} %` },
|
||||
grid: { color: '#e5e7eb' },
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
@@ -81,33 +83,55 @@
|
||||
const latest = $derived(data.at(-1));
|
||||
</script>
|
||||
|
||||
<main class="min-h-screen bg-gray-950 text-gray-100 p-8 flex flex-col">
|
||||
<h1 class="text-2xl font-semibold mb-1">Bodenfeuchte</h1>
|
||||
<p class="text-sm text-gray-400 mb-6">
|
||||
Letzte 6 Stunden · Aktualisierung: {lastUpdate || '…'}
|
||||
</p>
|
||||
<svelte:head>
|
||||
<title>Bodenfeuchte</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if latest}
|
||||
<div class="mb-8 inline-block bg-gray-800 rounded-xl px-6 py-4">
|
||||
<span class="text-5xl font-bold text-green-400">{latest.soil_moisture.toFixed(1)}</span>
|
||||
<span class="text-2xl text-gray-400 ml-2">%</span>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
{new Date(latest.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
|
||||
</p>
|
||||
<div class="min-h-screen py-8 px-4" style="background:#f4f4f5; font-family: Arial, Helvetica, sans-serif;">
|
||||
<div class="mx-auto flex flex-col" style="max-width:56rem; border:2px solid black; border-radius:0.75rem; background:#FFFFDD; min-height:calc(100vh - 4rem);">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="px-8 pt-6 pb-4 border-b-2 border-black">
|
||||
<h1 class="text-3xl font-bold text-center">Bodenfeuchte</h1>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="bg-gray-900 rounded-2xl p-4" style="height: 360px;">
|
||||
{#if data.length === 0}
|
||||
<div class="flex items-center justify-center h-full text-gray-500">
|
||||
Noch keine Daten vorhanden
|
||||
<!-- Content -->
|
||||
<div class="flex-1 px-8 py-6 flex flex-col gap-6">
|
||||
|
||||
<!-- Aktueller Wert -->
|
||||
<div style="background:#CCCCFF; border:2px solid black; border-radius:0.5rem;" class="px-6 py-4 flex items-center justify-between">
|
||||
<span class="text-gray-600 text-sm">Aktueller Wert</span>
|
||||
{#if latest}
|
||||
<div class="text-right">
|
||||
<span class="text-4xl font-bold">{latest.soil_moisture.toFixed(1)}</span>
|
||||
<span class="text-xl text-gray-500 ml-1">%</span>
|
||||
<p class="text-xs text-gray-500 mt-0.5">
|
||||
{new Date(latest.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="text-gray-400 text-sm">–</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<canvas bind:this={canvas} class={data.length === 0 ? 'hidden' : ''}></canvas>
|
||||
</div>
|
||||
|
||||
<footer class="mt-auto pt-8 flex justify-between text-xs text-gray-600">
|
||||
<a href="mailto:rexfue@gmail.com" class="hover:text-gray-400 transition-colors">rexfue@gmail.com</a>
|
||||
<span>v{__APP_VERSION__} · {__BUILD_DATE__}</span>
|
||||
</footer>
|
||||
</main>
|
||||
<!-- Diagramm -->
|
||||
<div style="border:2px solid black; border-radius:0.5rem; background:white; height:340px;" class="p-4">
|
||||
<p class="text-xs text-gray-400 mb-2">Letzte 6 Stunden · Stand: {lastUpdate || '…'}</p>
|
||||
{#if data.length === 0}
|
||||
<div class="flex items-center justify-center h-full text-gray-400 text-sm">
|
||||
Noch keine Daten vorhanden
|
||||
</div>
|
||||
{/if}
|
||||
<canvas bind:this={canvas} class={data.length === 0 ? 'hidden' : 'w-full'} style="height:280px;"></canvas>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-8 py-4 border-t-2 border-black flex justify-between text-xs text-gray-500">
|
||||
<a href="mailto:rexfue@gmail.com" class="hover:text-gray-800 transition-colors">rexfue@gmail.com</a>
|
||||
<span>v{__APP_VERSION__} · {__BUILD_DATE__}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user