diverse Anpassungen
This commit is contained in:
parent
2c85531360
commit
e7d26abf2f
3 changed files with 333 additions and 335 deletions
|
|
@ -5,104 +5,108 @@
|
|||
<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">
|
||||
<link rel="icon" href="{{ request.url_for('static', path='favicon.ico') if request else '/static/favicon.ico' }}">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
background: #f6f6f6;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
:root{
|
||||
--brand-green:#0a6;
|
||||
--brand-green-dark:#085f42;
|
||||
--table-border:#ddd;
|
||||
--paper:#fff;
|
||||
--bg:#f6f6f6;
|
||||
--ink:#222;
|
||||
--muted:#666;
|
||||
--gold:#c6a100;
|
||||
--gold2:#f1d65c;
|
||||
}
|
||||
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;
|
||||
body{
|
||||
font-family:"Segoe UI", Arial, sans-serif;
|
||||
background:var(--bg);
|
||||
color:var(--ink);
|
||||
margin:0; padding:2rem;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
font-size: 1.9rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.02em;
|
||||
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;
|
||||
}
|
||||
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; }
|
||||
.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; }
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
/* 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;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 0.45rem 0.5rem;
|
||||
text-align: center;
|
||||
.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);
|
||||
}
|
||||
th {
|
||||
background: #efefef;
|
||||
font-weight: 600;
|
||||
/* 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);
|
||||
}
|
||||
.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;
|
||||
/* 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;
|
||||
}
|
||||
.muted {
|
||||
color: #555;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
text-align: right;
|
||||
.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>
|
||||
<h1>Lotto-Ziehungen</h1>
|
||||
<!-- 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>
|
||||
|
||||
<form hx-get="/ui/draws" hx-target="#results" hx-trigger="change, submit" hx-swap="innerHTML">
|
||||
<!-- 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>
|
||||
|
|
@ -127,7 +131,13 @@
|
|||
<button type="submit">Anzeigen</button>
|
||||
</form>
|
||||
|
||||
<div id="results" hx-get="/ui/draws" hx-trigger="load" hx-target="#results" hx-swap="innerHTML"></div>
|
||||
<!-- Ergebnisliste -->
|
||||
<div id="results"
|
||||
hx-get="/ui/draws"
|
||||
hx-trigger="load"
|
||||
hx-target="#results"
|
||||
hx-swap="innerHTML"></div>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue