120 lines
5.2 KiB
HTML
120 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>erdbeerhannah 🍓💶 - Start</title>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<style>
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.container {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
padding-top: 10vh;
|
|
}
|
|
</style>
|
|
<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>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="mb-4">Willkommen beim erdbeerrechner 🍓💶</h1>
|
|
<p class="lead mb-5">Erstelle deine eigene, anpassbare Kassen-Instanz für deinen Verkaufsstand.</p>
|
|
<form method="post" class="bg-white p-4 shadow-sm rounded" style="max-width: 400px; width: 100%;">
|
|
<div class="form-group text-left">
|
|
<label for="password">Admin Passwort (optional)</label>
|
|
<input type="password" class="form-control" name="password" id="password" placeholder="Passwort...">
|
|
<small class="form-text text-muted">Dieses Passwort wird für den /admin Bereich benötigt.</small>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-lg shadow-sm w-100">Neue Kasse erstellen</button>
|
|
</form>
|
|
|
|
<div class="mt-5 w-100" id="saved-instances-container" style="display: none; max-width: 500px;">
|
|
<h4 class="mb-3 text-secondary">Gespeicherte Kassen:</h4>
|
|
<ul class="list-group shadow-sm" id="saved-instances-list">
|
|
</ul>
|
|
</div>
|
|
<div class="mt-5 text-muted pb-4">
|
|
<small>Made with ♥️, marmalade and zero knowledge in <a href="https://kiel-sailing-city.de/"
|
|
target="_blank">Kiel Strawberry City.</a><br>
|
|
Version: {{ version }}</small>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('/sw.js');
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
let saved = JSON.parse(localStorage.getItem('erdbeerkassen')) || [];
|
|
if (saved.length > 0) {
|
|
document.getElementById('saved-instances-container').style.display = 'block';
|
|
const list = document.getElementById('saved-instances-list');
|
|
|
|
[...saved].reverse().forEach(instance => {
|
|
const li = document.createElement('li');
|
|
li.className = 'list-group-item d-flex justify-content-between align-items-center flex-wrap text-left';
|
|
|
|
const link = document.createElement('a');
|
|
link.href = '/' + instance.id;
|
|
link.textContent = 'Kasse ' + instance.id.substring(0, 8);
|
|
link.className = 'font-weight-bold flex-grow-1 text-decoration-none';
|
|
|
|
const btnGroup = document.createElement('div');
|
|
|
|
const deleteBtn = document.createElement('button');
|
|
deleteBtn.className = 'btn btn-sm btn-outline-danger mr-2';
|
|
deleteBtn.textContent = '🗑️';
|
|
deleteBtn.title = 'Aus Liste entfernen';
|
|
deleteBtn.onclick = () => {
|
|
saved = saved.filter(i => i.id !== instance.id);
|
|
localStorage.setItem('erdbeerkassen', JSON.stringify(saved));
|
|
li.remove();
|
|
if (list.children.length === 0) {
|
|
document.getElementById('saved-instances-container').style.display = 'none';
|
|
}
|
|
};
|
|
|
|
const shareBtn = document.createElement('button');
|
|
shareBtn.className = 'btn btn-sm btn-outline-primary';
|
|
shareBtn.textContent = '📤 Teilen';
|
|
shareBtn.onclick = () => {
|
|
const url = window.location.origin + '/' + instance.id;
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: 'erdbeerrechner 🍓💶',
|
|
url: url
|
|
}).catch(console.error);
|
|
} else {
|
|
navigator.clipboard.writeText(url);
|
|
alert('URL in die Zwischenablage kopiert!');
|
|
}
|
|
};
|
|
|
|
btnGroup.appendChild(deleteBtn);
|
|
btnGroup.appendChild(shareBtn);
|
|
|
|
li.appendChild(link);
|
|
li.appendChild(btnGroup);
|
|
list.appendChild(li);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |