56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>6aus49 – Auswertung</title>
|
||
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
||
<style>
|
||
body { max-width: 1100px; margin: auto; }
|
||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: .5rem; }
|
||
.nowrap { white-space: nowrap; }
|
||
.numbers span { display:inline-block; min-width: 2.2ch; text-align: center; }
|
||
.badge { border: 1px solid var(--pico-primary); border-radius: 4px; padding: 0 .3rem; margin: 0 .1rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>6aus49 – Ziehungen</h1>
|
||
|
||
<!-- Reduziertes Filterformular -->
|
||
<form id="filterForm" class="grid"
|
||
hx-get="/ui/draws"
|
||
hx-target="#result"
|
||
hx-trigger="change, submit"
|
||
hx-include="#filterForm">
|
||
<label>
|
||
Von
|
||
<input type="date" name="date_from">
|
||
</label>
|
||
<label>
|
||
Bis
|
||
<input type="date" name="date_to">
|
||
</label>
|
||
<label>
|
||
Limit
|
||
<input type="number" name="limit" min="1" max="500" value="10">
|
||
</label>
|
||
<label>
|
||
Reihenfolge
|
||
<select name="order">
|
||
<option value="desc" selected>Neueste zuerst</option>
|
||
<option value="asc">Älteste zuerst</option>
|
||
</select>
|
||
</label>
|
||
<div style="grid-column: 1 / -1; display:flex; gap:.5rem;">
|
||
<button type="submit" class="primary">Anzeigen</button>
|
||
<button type="reset">Zurücksetzen</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- Ergebniscontainer: lädt initial -->
|
||
<div id="result" hx-get="/ui/draws" hx-trigger="load" hx-target="#result">
|
||
<!-- Tabelle wird hier eingefügt -->
|
||
</div>
|
||
</body>
|
||
</html>
|