133 lines
3.3 KiB
HTML
133 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Lotto-Ziehungen</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
||
<link rel="icon" href="/static/favicon.ico">
|
||
<style>
|
||
body {
|
||
font-family: "Segoe UI", Arial, sans-serif;
|
||
background: #f6f6f6;
|
||
color: #222;
|
||
margin: 0;
|
||
padding: 2rem;
|
||
}
|
||
main {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
||
padding: 2rem 2.5rem;
|
||
}
|
||
h1 {
|
||
margin-top: 0;
|
||
font-size: 1.9rem;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
p.service-note {
|
||
text-align: center;
|
||
margin-top: 0.3rem;
|
||
margin-bottom: 1.8rem;
|
||
font-size: 0.95rem;
|
||
color: #666;
|
||
font-style: italic;
|
||
}
|
||
form {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.6rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
label { font-weight: 500; }
|
||
input, select, button {
|
||
padding: 0.35rem 0.6rem;
|
||
border: 1px solid #bbb;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
font-size: 0.95rem;
|
||
}
|
||
button {
|
||
background: #0a6;
|
||
color: #fff;
|
||
border: none;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
button:hover { background: #098557; }
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 0.5rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
th, td {
|
||
border: 1px solid #ddd;
|
||
padding: 0.45rem 0.5rem;
|
||
text-align: center;
|
||
}
|
||
th {
|
||
background: #efefef;
|
||
font-weight: 600;
|
||
}
|
||
.numbers { text-align: left; }
|
||
.badge {
|
||
display: inline-block;
|
||
background: #0a6;
|
||
color: white;
|
||
padding: 0.25em 0.5em;
|
||
border-radius: 0.4em;
|
||
margin: 0 0.1em;
|
||
font-weight: 600;
|
||
}
|
||
.muted {
|
||
color: #555;
|
||
font-size: 0.9rem;
|
||
margin-top: 0.5rem;
|
||
text-align: right;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<h1>Lotto-Ziehungen</h1>
|
||
<p class="service-note">Ein Service der Hintergasse – Angaben ohne Gewähr!</p>
|
||
|
||
<form hx-get="/ui/draws" hx-target="#results" hx-trigger="change, submit" hx-swap="innerHTML">
|
||
<label for="game">Spiel:</label>
|
||
<select name="game" id="game">
|
||
<option value="6aus49">6 aus 49</option>
|
||
<option value="euro">Eurojackpot</option>
|
||
</select>
|
||
|
||
<label for="date_from">von:</label>
|
||
<input type="date" name="date_from" />
|
||
|
||
<label for="date_to">bis:</label>
|
||
<input type="date" name="date_to" />
|
||
|
||
<label for="order">Sortierung:</label>
|
||
<select name="order">
|
||
<option value="desc" selected>neueste zuerst</option>
|
||
<option value="asc">älteste zuerst</option>
|
||
</select>
|
||
|
||
<label for="limit">Limit:</label>
|
||
<input type="number" name="limit" value="{{ page_size }}" min="1" max="500" />
|
||
|
||
<button type="submit">Anzeigen</button>
|
||
</form>
|
||
|
||
<div id="results" hx-get="/ui/draws" hx-trigger="load" hx-target="#results" hx-swap="innerHTML"></div>
|
||
</main>
|
||
</body>
|
||
</html>
|