elpatron
5c8c4a947e
- Admin: Artikel löschen (min. 1 erforderlich) - Admin: Neue Artikel hinzufügen - Admin: Update-Logik für variable Artikelanzahl - Kasse: Dynamische items/Session pro Produkt - Kasse: CSS Grid Layout - alle Artikel fit auf einen Bildschirm - Kasse: Leerzustand wenn keine Artikel Made-with: Cursor
191 lines
6.3 KiB
HTML
191 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="content-Type" content="text/html; utf-8" />
|
|
<meta http-equiv="Pragma" content="cache" />
|
|
<meta name="robots" content="noindex,nofollow" />
|
|
<title>erdbeerhannah 🍓💶</title>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<meta name="theme-color" content="#dc3545">
|
|
<link rel="apple-touch-icon" href="/static/icon-192x192.png">
|
|
<script defer data-domain="erdbeerhannah.elpatron.me" src="https://plausible.elpatron.me/js/script.js"></script>
|
|
<style>
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.kasse-container {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.kasse-header {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 1rem;
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.article-grid {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat({{ grid_cols }}, 1fr);
|
|
grid-template-rows: repeat({{ grid_rows }}, 1fr);
|
|
gap: 4px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.article-tile {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 0;
|
|
}
|
|
|
|
.article-tile .btn {
|
|
width: 100%;
|
|
height: 100%;
|
|
white-space: normal;
|
|
font-size: clamp(0.9rem, 4vw, 1.5rem);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.kasse-sum-row {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 0.5rem;
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.kasse-reset {
|
|
flex-shrink: 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.kasse-footer {
|
|
flex-shrink: 0;
|
|
padding: 0.5rem;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.input-container input {
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
width: 120px;
|
|
}
|
|
|
|
.empty-state {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: #6c757d;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<form method="post" class="kasse-container container-fluid">
|
|
<div class="kasse-header">
|
|
<span>erdbeerrechner 🍓💶</span>
|
|
<a href="{{ url_for('admin', instance_id=instance_id) }}"
|
|
class="btn btn-outline-secondary">⚙️ Setup</a>
|
|
</div>
|
|
|
|
<div class="article-grid">
|
|
{% if not products %}
|
|
<div class="empty-state">
|
|
Keine Artikel. Bitte im <a href="{{ url_for('admin', instance_id=instance_id) }}">Admin</a> hinzufügen.
|
|
</div>
|
|
{% else %}
|
|
{% for pos, prod in products|dictsort %}
|
|
<div class="article-tile">
|
|
<button type="submit" name="position" value="{{ pos }}" title="{{ prod['name'] }}"
|
|
class="btn {{ prod['color_class'] }}">
|
|
{{ prod['icon'] }}<br>
|
|
{{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€<br>
|
|
({{ items.get(pos, 0) }})
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="kasse-sum-row">
|
|
<span title="Summe">🫰 {{ gesamtwert.replace('.', ',') }}€</span>
|
|
<div class="input-container">
|
|
<input type="number" step="0.01" class="form-control" name="given"
|
|
placeholder="{{ given }}" value="{% if given != '0' %}{{ given }}{% endif %}">
|
|
<button type="submit" name="action" value="calculate_change"
|
|
title="Wechselgeld berechnen" class="btn btn-primary btn-sm">🧾 Berechnen</button>
|
|
</div>
|
|
<span title="Wechselgeld" class="{{ background }}">🪙 {{ change.replace('.', ',') }}€</span>
|
|
</div>
|
|
|
|
<div class="kasse-reset">
|
|
<button type="submit" name="action" value="reset" class="btn btn-dark btn-block">Reset 🦭</button>
|
|
</div>
|
|
|
|
<div class="kasse-footer">
|
|
Made with ♥️, marmalade and zero knowledge in <a href="https://kiel-sailing-city.de/"
|
|
target="_blank">Kiel Strawberry City.</a><br>
|
|
Version: {{ version }}, Instanz: {{ instance_id[:8] }}...
|
|
<button type="button" onclick="shareInstance()" class="btn btn-sm btn-outline-primary ml-2">📤 URL Teilen</button>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('/sw.js');
|
|
});
|
|
}
|
|
|
|
// Save instance to localStorage for the landing page
|
|
const instanceId = "{{ instance_id }}";
|
|
let saved = JSON.parse(localStorage.getItem('erdbeerkassen')) || [];
|
|
// Optional: remove if exists so it gets pushed to the end (most recent)
|
|
saved = saved.filter(i => i.id !== instanceId);
|
|
saved.push({ id: instanceId, date: new Date().toISOString() });
|
|
localStorage.setItem('erdbeerkassen', JSON.stringify(saved));
|
|
|
|
function shareInstance() {
|
|
const url = window.location.href;
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: 'erdbeerrechner 🍓💶',
|
|
url: url
|
|
}).catch(console.error);
|
|
} else {
|
|
navigator.clipboard.writeText(url);
|
|
alert('URL in die Zwischenablage kopiert!');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |