119 lines
3.4 KiB
HTML
119 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Panel admina — kolejka</title>
|
|
<style>
|
|
body{font-family:Helvetica,Arial;margin:20px}
|
|
.grid{display:flex;gap:16px;align-items:flex-start}
|
|
.col{flex:1;padding:10px;border:1px solid #eee;border-radius:6px;background:#fafafa}
|
|
h2{margin-top:0}
|
|
.inline-form{display:inline-block;margin:3px}
|
|
.btn{padding:6px 10px;border-radius:4px;border:1px solid #888;background:#f0f0f0;cursor:pointer}
|
|
.num-label{font-size:18px;margin-right:8px;display:inline-block;width:40px;text-align:center}
|
|
|
|
.controls {
|
|
display:flex;
|
|
gap:16px;
|
|
align-items:flex-start;
|
|
}
|
|
/* kolumna z akcjami po lewej */
|
|
.left {
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
flex:1;
|
|
max-width:300px;
|
|
margin-bottom: 10px;
|
|
}
|
|
/* kontener dla przycisku reset wypychany na dół */
|
|
.reset-wrap {
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:flex-end; /* wypycha zawartość na dół kolumny */
|
|
align-items:flex-start;
|
|
min-height:50px; /* wysokość bloku; dostosuj */
|
|
}
|
|
|
|
|
|
/* Responsive: na wąskich ekranach kolumny jedna pod drugą */
|
|
@media (max-width:700px){
|
|
.controls { flex-direction:column; }
|
|
.controls .reset-wrap { min-height:120px; }
|
|
.grid{flex-direction:column}
|
|
.num-label{width:60px}
|
|
.col{width:100%; box-sizing:border-box}
|
|
body{font-size:16px}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Panel admina</h2>
|
|
|
|
<div class="left">
|
|
<form method="post" style="display:inline">
|
|
<button class="btn" name="action" value="add" style="background:#4caf50;color:#fff;border:none;padding:8px 12px;border-radius:6px">
|
|
Dodaj numer
|
|
</button>
|
|
</form>
|
|
<!-- inne przyciski/opcje admina można tu dodać -->
|
|
</div>
|
|
|
|
|
|
<div class="grid">
|
|
<div class="col">
|
|
<h3>Oczekujące</h3>
|
|
{% for n in waiting %}
|
|
<form class="inline-form" method="post">
|
|
<input type="hidden" name="num" value="{{n}}">
|
|
<button class="btn" name="action" value="call">{{n}}</button>
|
|
</form>
|
|
{% else %}
|
|
<p>brak</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Wywołane (obecne)</h3>
|
|
{% for n in called %}
|
|
<div style="margin-bottom:8px;display:flex;align-items:center;flex-wrap:wrap">
|
|
<span class="num-label">{{n}}</span>
|
|
|
|
<form style="display:inline-block;margin-right:6px" method="post">
|
|
<input type="hidden" name="num" value="{{n}}">
|
|
<button class="btn" name="action" value="done">Przyszedł / Usuń</button>
|
|
</form>
|
|
|
|
<form style="display:inline-block" method="post">
|
|
<input type="hidden" name="num" value="{{n}}">
|
|
<button class="btn" name="action" value="return">Wróć do kolejki</button>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<p>brak</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Obsłużone</h3>
|
|
{% for n in done %}
|
|
<div>{{n}}</div>
|
|
{% else %}
|
|
<p>brak</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reset-wrap">
|
|
<form method="post">
|
|
<button class="btn" name="action" value="reset" style="background:#e53935;color:#fff;border:none;padding:8px 12px;border-radius:6px">
|
|
Reset — usuń wszystkie
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|