143 lines
No EOL
5.2 KiB
HTML
143 lines
No EOL
5.2 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="{{ request.url_for('static', path='favicon.ico') if request else '/static/favicon.ico' }}">
|
||
<style>
|
||
:root{
|
||
--brand-green:#0a6;
|
||
--brand-green-dark:#085f42;
|
||
--table-border:#ddd;
|
||
--paper:#fff;
|
||
--bg:#f6f6f6;
|
||
--ink:#222;
|
||
--muted:#666;
|
||
--gold:#c6a100;
|
||
--gold2:#f1d65c;
|
||
}
|
||
body{
|
||
font-family:"Segoe UI", Arial, sans-serif;
|
||
background:var(--bg);
|
||
color:var(--ink);
|
||
margin:0; padding:2rem;
|
||
}
|
||
main{
|
||
max-width:960px; margin:0 auto;
|
||
background:var(--paper);
|
||
border:1px solid #ddd; border-radius:8px;
|
||
box-shadow:0 2px 5px rgba(0,0,0,.05);
|
||
padding:2rem 2.5rem;
|
||
}
|
||
.brandbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.2rem; }
|
||
.brand-left{ display:flex; align-items:center; gap:.8rem; }
|
||
.brand-left img{ height:54px; width:auto; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
|
||
h1{ margin:0; font-size:1.9rem; font-weight:600; letter-spacing:.02em; }
|
||
|
||
/* Kugeln */
|
||
.balls{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
|
||
.ball, .star{
|
||
display:inline-flex; align-items:center; justify-content:center;
|
||
width:34px; height:34px; border-radius:50%;
|
||
font-weight:700; font-size:.95rem; color:#fff;
|
||
box-shadow:inset 0 2px 6px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.08);
|
||
user-select:none;
|
||
}
|
||
.ball{
|
||
background:radial-gradient(120% 120% at 30% 30%, #15b77d 0%, var(--brand-green) 55%, var(--brand-green-dark) 100%);
|
||
text-shadow:0 1px 1px rgba(0,0,0,.35);
|
||
border:1px solid var(--brand-green-dark);
|
||
}
|
||
/* Superzahl jetzt goldfarben */
|
||
.super-ball {
|
||
background: radial-gradient(120% 120% at 30% 30%, var(--gold2) 0%, var(--gold) 70%, #8a6f00 100%);
|
||
color: #231;
|
||
border: 1px solid #a88600;
|
||
font-weight: 800;
|
||
text-shadow: 0 1px 1px rgba(255,255,255,.4);
|
||
}
|
||
/* Eurojackpot Sterne */
|
||
.star{
|
||
background:radial-gradient(120% 120% at 30% 30%, var(--gold2) 0%, var(--gold) 70%, #8a6f00 100%);
|
||
color:#231; border:1px solid #a88600; font-weight:800;
|
||
}
|
||
.balls .label{
|
||
margin-left:.5rem; font-size:.85rem; color:#666; font-weight:600; white-space:nowrap;
|
||
}
|
||
|
||
p.service-note{ text-align:center; margin:.4rem 0 1.6rem 0; font-size:.95rem; color:var(--muted); font-style:italic; }
|
||
|
||
form{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem; margin-bottom:1rem; }
|
||
label{ font-weight:500; }
|
||
input, select, button{ padding:.35rem .6rem; border:1px solid #bbb; border-radius:4px; background:#fff; font-size:.95rem; }
|
||
button{ background:var(--brand-green); color:#fff; border:none; font-weight:600; cursor:pointer; transition:background .2s; }
|
||
button:hover{ background:#098557; }
|
||
|
||
table{ width:100%; border-collapse:collapse; margin-top:.5rem; font-size:.95rem; }
|
||
th, td{ border:1px solid var(--table-border); padding:.45rem .5rem; text-align:center; }
|
||
th{ background:#efefef; font-weight:600; }
|
||
.numbers{ text-align:left; }
|
||
.badge{ display:inline-block; background:var(--brand-green); color:#fff; padding:.25em .5em; border-radius:.4em; margin:0 .1em; font-weight:600; }
|
||
.muted{ color:#555; font-size:.9rem; margin-top:.5rem; text-align:right; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<!-- Kopf mit Logo links + dynamischen Kugeln rechts -->
|
||
<div class="brandbar">
|
||
<div class="brand-left">
|
||
<img src="{{ request.url_for('static', path='logo.png') }}" alt="Hintergasse Logo">
|
||
<h1>Lotto-Ziehungen</h1>
|
||
</div>
|
||
<div id="header-balls"
|
||
hx-get="/ui/header"
|
||
hx-include="#filter-form"
|
||
hx-trigger="load, change from:#filter-form"
|
||
hx-target="#header-balls"
|
||
hx-swap="innerHTML"></div>
|
||
</div>
|
||
|
||
<p class="service-note">Ein Service der Hintergasse – Angaben ohne Gewähr!</p>
|
||
|
||
<!-- Filterformular -->
|
||
<form id="filter-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>
|
||
|
||
<!-- Ergebnisliste -->
|
||
<div id="results"
|
||
hx-get="/ui/draws"
|
||
hx-trigger="load"
|
||
hx-target="#results"
|
||
hx-swap="innerHTML"></div>
|
||
|
||
</main>
|
||
</body>
|
||
</html> |