176 lines
6.6 KiB
HTML
176 lines
6.6 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">
|
|
<style>
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
.table-container {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
height: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.table td {
|
|
height: calc(100vh / 6);
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
height: 100%;
|
|
white-space: normal;
|
|
}
|
|
|
|
.bold-row {
|
|
font-weight: bold;
|
|
font-size: 250%;
|
|
}
|
|
|
|
.custom-btn-size {
|
|
font-size: 180%;
|
|
}
|
|
|
|
.custom-btn-size-med {
|
|
font-size: 150%;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.input-container input {
|
|
margin-bottom: 10px;
|
|
width: 80%;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.input-container button {
|
|
width: 80%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid table-container">
|
|
<table class="table table-bordered">
|
|
<form method="post">
|
|
<tbody>
|
|
<tr class="bold-row">
|
|
<td colspan="2">erdbeerrechner 🍓💶</td>
|
|
<td><a href="{{ url_for('admin', instance_id=instance_id) }}"
|
|
class="btn btn-outline-secondary custom-btn-size-med">⚙️ Setup</a></td>
|
|
</tr>
|
|
<tr>
|
|
{% for i in range(1, 4) %}
|
|
{% set prod = products[i] %}
|
|
<td>
|
|
<button type="submit" name="position" value="{{ i }}" title="{{ prod['name'] }}"
|
|
class="btn btn-xl {{ prod['color_class'] }} custom-btn-size">
|
|
{{ prod['icon'] }} <br> {{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€ <br>
|
|
({{ items[i] }})
|
|
</button>
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
<tr>
|
|
{% for i in range(4, 7) %}
|
|
{% set prod = products[i] %}
|
|
<td>
|
|
<button type="submit" name="position" value="{{ i }}" title="{{ prod['name'] }}"
|
|
class="btn btn-xl {{ prod['color_class'] }} custom-btn-size">
|
|
{{ prod['icon'] }} <br> {{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€ <br>
|
|
({{ items[i] }})
|
|
</button>
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
<tr>
|
|
<td title="Summe" class="bold-row">🫰 {{ gesamtwert.replace('.', ',') }}€</td>
|
|
<td>
|
|
<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-xl btn-primary custom-btn-size-med">🧾
|
|
Berechnen</button>
|
|
</div>
|
|
</td>
|
|
<td title="Wechselgeld" class="bold-row {{ background }}">🪙 {{ change.replace('.', ',') }}€
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3">
|
|
<button type="submit" name="action" value="reset" id="reset"
|
|
class="btn btn-xl btn-dark custom-btn-size">Reset 🦭</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3">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>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</form>
|
|
</table>
|
|
</div>
|
|
<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> |