marijo/fjr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Table updated

Browse source
This commit is contained in:
marijo 2026-06-10 09:40:48 +00:00
parent a764c1732f
commit 68737da735
1 changed files with 29 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

32
index.php
View file

@ -191,6 +191,18 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}
$events = recent_events($eventsFile);
function h($s): string { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }
function event_class(?string $type): string {
return match ($type) {
'odometer' => 'event-odometer',
'oil_change' => 'event-oil',
'front_tyre_change', 'rear_tyre_change' => 'event-tyre',
'shaft_oil_change' => 'event-shaft',
'brake_pads' => 'event-brakes',
'registration' => 'event-registration',
'fuel' => 'event-fuel',
default => 'event-note',
};
}
?>
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>My <?=h($config['bike_name'])?></title>
@ -198,8 +210,8 @@ function h($s): string { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'
<link rel="apple-touch-icon" href="/favicon.svg">
<style>
:root{color-scheme:dark;--bg:#0b0b0b;--card:#1b1b1b;--field:#101010;--line:#333;--text:#f2f2f2;--muted:#aaa;--green:#2f8f3a;--blue:#2d6cdf;--orange:#d9822b}
*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;margin:0;background:linear-gradient(rgba(11,11,11,.82),rgba(11,11,11,.92)),url('/img/fjr.jpg') center top/cover fixed no-repeat,var(--bg);color:var(--text);font-size:16px;-webkit-text-size-adjust:100%}.wrap{max-width:850px;margin:auto;padding:14px;padding-bottom:34px}h1{font-size:26px;margin:4px 0 12px}.topbar{display:flex;align-items:center;gap:12px}.logo{width:64px;height:64px;object-fit:contain;border-radius:0;background:transparent;padding:0;border:0;box-shadow:none}h2{font-size:20px;margin:0 0 12px}.card{background:rgba(27,27,27,.88);backdrop-filter:blur(3px);border:1px solid var(--line);border-radius:18px;padding:16px;margin:12px 0;box-shadow:0 8px 24px #0004}label{display:block;margin-top:14px;margin-bottom:6px;color:#d0d0d0;font-weight:650}input,select,textarea,button{width:100%;font:inherit;font-size:18px;padding:15px 14px;border-radius:14px;border:1px solid #444;background:var(--field);color:var(--text)}select{min-height:54px}textarea{resize:vertical}button{background:var(--green);border:0;margin-top:16px;font-weight:800;min-height:56px;touch-action:manipulation}.bikePhoto{width:100%;max-height:330px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 8px 24px #0006;margin:0 0 12px}.hero{text-decoration:none;color:inherit;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;align-items:stretch}.heroBox{background:rgba(16,16,16,.84);border:1px solid #2a2a2a;border-radius:14px;padding:13px}.heroBox.main{border-color:#3b5f45}.icon{font-size:22px;margin-right:6px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stat{background:rgba(16,16,16,.84);border:1px solid #2a2a2a;border-radius:14px;padding:13px;min-height:112px}.big{font-size:30px;line-height:1.05;font-weight:850}.ok{background:#17351a;border-color:var(--green)}.muted{color:var(--muted);font-size:13px}table{width:100%;border-collapse:collapse;font-size:14px}td,th{border-bottom:1px solid var(--line);padding:9px 6px;text-align:left;vertical-align:top}.pill{display:inline-block;background:#333;border-radius:999px;padding:4px 8px;white-space:nowrap}
@media (max-width:520px){.logo{width:52px;height:52px}.wrap{padding:10px}.card{border-radius:16px;padding:14px;margin:10px 0}h1{font-size:24px}.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr;gap:8px}.stat{padding:11px;min-height:104px}.stat b{font-size:15px}.big{font-size:26px}input,select,textarea,button{font-size:17px;padding:14px 12px}.card table{display:block;overflow-x:auto;white-space:nowrap}}
*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;margin:0;background:linear-gradient(rgba(11,11,11,.82),rgba(11,11,11,.92)),url('/img/fjr.jpg') center top/cover fixed no-repeat,var(--bg);color:var(--text);font-size:16px;-webkit-text-size-adjust:100%}.wrap{max-width:850px;margin:auto;padding:14px;padding-bottom:34px}h1{font-size:26px;margin:4px 0 12px}.topbar{display:flex;align-items:center;gap:12px}.logo{width:64px;height:64px;object-fit:contain;border-radius:0;background:transparent;padding:0;border:0;box-shadow:none}h2{font-size:20px;margin:0 0 12px}.card{background:rgba(27,27,27,.88);backdrop-filter:blur(3px);border:1px solid var(--line);border-radius:18px;padding:16px;margin:12px 0;box-shadow:0 8px 24px #0004}label{display:block;margin-top:14px;margin-bottom:6px;color:#d0d0d0;font-weight:650}input,select,textarea,button{width:100%;font:inherit;font-size:18px;padding:15px 14px;border-radius:14px;border:1px solid #444;background:var(--field);color:var(--text)}select{min-height:54px}textarea{resize:vertical}button{background:var(--green);border:0;margin-top:16px;font-weight:800;min-height:56px;touch-action:manipulation}.bikePhoto{width:100%;max-height:330px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 8px 24px #0006;margin:0 0 12px}.hero{text-decoration:none;color:inherit;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;align-items:stretch}.heroBox{background:rgba(16,16,16,.84);border:1px solid #2a2a2a;border-radius:14px;padding:13px}.heroBox.main{border-color:#3b5f45}.icon{font-size:22px;margin-right:6px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stat{background:rgba(16,16,16,.84);border:1px solid #2a2a2a;border-radius:14px;padding:13px;min-height:112px}.big{font-size:30px;line-height:1.05;font-weight:850}.ok{background:#17351a;border-color:var(--green)}.muted{color:var(--muted);font-size:13px}.historyList{display:grid;gap:10px}.historyItem{position:relative;overflow:hidden;background:rgba(16,16,16,.82);border:1px solid #2a2a2a;border-left:5px solid #555;border-radius:14px;padding:12px 13px;box-shadow:0 4px 14px #0003}.historyItem:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--event-glow,transparent),transparent 46%);opacity:.16;pointer-events:none}.historyNote{position:relative;color:#f2f2f2;font-size:16px;font-weight:750;line-height:1.35;overflow-wrap:anywhere}.historyNote.emptyNote{color:var(--muted);font-weight:650;font-style:italic}.historyMeta{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px}.eventType{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#303030;color:#f5f5f5;font-size:13px;font-weight:800;line-height:1.1}.historyDate{color:var(--muted);font-size:13px}.historyKm{margin-left:auto;font-size:16px;font-weight:900;white-space:nowrap;color:#fff}.event-odometer{border-left-color:#555;--event-glow:#555}.event-oil{border-left-color:var(--orange);--event-glow:#d9822b}.event-tyre{border-left-color:#8b7cf6;--event-glow:#8b7cf6}.event-shaft{border-left-color:#b7a05b;--event-glow:#b7a05b}.event-brakes{border-left-color:#dc3545;--event-glow:#dc3545}.event-registration{border-left-color:var(--green);--event-glow:#2f8f3a}.event-fuel{border-left-color:#00a896;--event-glow:#00a896}.event-note{border-left-color:#777;--event-glow:#777}.event-odometer .eventType{background:#18325f}.event-oil .eventType{background:#553113}.event-tyre .eventType{background:#332b64}.event-shaft .eventType{background:#4a4124}.event-brakes .eventType{background:#561b22}.event-registration .eventType{background:#17351a}.event-fuel .eventType{background:#0f463d}.event-note .eventType{background:#333}.emptyHistory{color:var(--muted);padding:8px 0}
@media (max-width:520px){.logo{width:52px;height:52px}.wrap{padding:10px}.card{border-radius:16px;padding:14px;margin:10px 0}h1{font-size:24px}.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr;gap:8px}.stat{padding:11px;min-height:104px}.stat b{font-size:15px}.big{font-size:26px}input,select,textarea,button{font-size:17px;padding:14px 12px}.historyNote{font-size:17px}.historyKm{margin-left:0;font-size:18px}}
@media (max-width:360px){.grid{grid-template-columns:1fr}.big{font-size:28px}}
</style>
</head><body><div class="wrap">
@ -241,5 +253,19 @@ foreach ([ 'oil_change'=>'Oil', 'front_tyre_change'=>'Front tyre', 'rear_tyre_ch
<label>Note (optional)</label><textarea name="note" rows="3" placeholder="brand, details, reminder..."></textarea>
<button>Save + publish MQTT</button>
</form></div>
<div class="card"><h2>Recent history</h2><table><tr><th>Date</th><th>Type</th><th>Km</th><th>Note</th></tr><?php foreach ($events as $e): ?><tr><td><?=h(eu_date($e['time'] ?? ''))?></td><td><span class="pill"><?=h($e['label']??$e['type']??'')?></span></td><td><?=number_format((int)($e['km']??0))?></td><td><?=h($e['note']??'')?></td></tr><?php endforeach; ?></table></div>
<div class="card"><h2>Recent history</h2><div class="historyList">
<?php if (!$events): ?>
<div class="emptyHistory">No history yet.</div>
<?php endif; ?>
<?php foreach ($events as $e): $note = trim((string)($e['note'] ?? '')); $isOdometer = ($e['type'] ?? '') === 'odometer'; ?>
<article class="historyItem <?=h(event_class($e['type'] ?? null))?>">
<div class="historyNote<?=$note === '' ? ' emptyNote' : ''?>"><?=h($note === '' ? 'No note' : $note)?></div>
<div class="historyMeta">
<?php if (!$isOdometer): ?><span class="eventType"><?=h($e['label']??$e['type']??'')?></span><?php endif; ?>
<span class="historyDate"><?=h(eu_date($e['time'] ?? ''))?></span>
<span class="historyKm"><?=number_format((int)($e['km']??0))?> km</span>
</div>
</article>
<?php endforeach; ?>
</div></div>
</div></body></html>