Files
erdbeerhannah/templates/index.html
2024-05-27 11:04:24 +02:00

122 lines
5.7 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="INDEX,FOLLOW" />
<meta http-equiv="content-Language" content="de" />
<meta name="description" content="Viele Erdbeerstände in Deutschland haben keine elektronische Kasse. Aufgrund der geringen Zahl unterschiedlicher Artikel bietet sich diese simple Rechner-App an, die bis zu sechs verschiedene Artikel in unterschiedlicher Stückzahl summieren kann." />
<meta name="keywords" content="rechner calculator bargeld artikel obst erdbeeren spargel kirschen verkaufsstand wechselgeld" />
<meta name="author" content="Markus Busche" />
<meta name="publisher" content="Markus Busche" />
<meta name="copyright" content="2024 Markus Busche" />
<meta name="audience" content="Alle" />
<meta name="page-type" content="HTML-Formular" />
<meta name="page-topic" content="Dienstleistung" />
<meta http-equiv="Reply-to" content="m.busche@mailbox.org" />
<meta name="expires" content="" />
<meta name="revisit-after" content="2 days" />
<title>erdbeerhannah 🍓💶</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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); /* Höhe der Zeilen dynamisch anpassen */
vertical-align: middle;
text-align: center;
}
.btn {
width: 100%; /* Button füllt die Zelle */
height: 100%; /* Button füllt die Zelle */
}
.bold-row {
font-weight: bold;
font-size: 250%;
}
.large-font {
font-size: 300%;
}
.custom-btn-size {
font-size: 180%;
}
.custom-btn-size-med {
font-size: 150%;
}
.input-container {
display: flex;
flex-direction: column; /* Ändert die Richtung der Flex-Elemente zu Spalten */
align-items: center;
justify-content: center;
height: 100%;
}
.input-container input {
margin-bottom: 10px;
width: 80%; /* Setzt die Breite des Eingabefelds */
}
.input-container button {
width: 80%; /* Setzt die Breite des Buttons */
}
</style>
</head>
<body>
<div class="container-fluid table-container">
<table class="table table-bordered">
<form method="post">
<tbody>
<tr class="bold-row">
<td colspan="3">Erdbeerkasse 🍓💶</td>
</tr>
<tr>
<td><button type="submit" name="wert" value="5.8" class="btn btn-xl btn-primary custom-btn-size">🍓 5,80€ ({{ item1 }})</button></td>
<td><button type="submit" name="wert" value="4.8" class="btn btn-xl btn-danger custom-btn-size">🫙🫙 4,80€ ({{ item2 }})</button></td>
<td><button type="submit" name="wert" value="3.3" class="btn btn-xl btn-danger custom-btn-size">🫙 3,30€ ({{ item3 }})</button></td>
</tr>
<tr>
<td><button type="submit" name="wert" value="8.8" class="btn btn-xl btn-warning custom-btn-size">🧃🧃 8,80€ ({{ item4 }})</button></td>
<td><button type="submit" name="wert" value="5.5" class="btn btn-xl btn-warning custom-btn-size">🧃 5,50€ ({{ item5 }})</button></td>
<td><button type="submit" name="wert" value="0.2" class="btn btn-xl btn-success custom-btn-size">🛍️ 0,20€ ({{ item6 }})</button></td>
</tr>
<tr>
<td class="bold-row">🫰 {{ gesamtwert }}€</td>
<td>
<div class="input-container">
<input type="text" class="form-control" name="given" placeholder="{{ given }}">
<button type="submit" name="wert" value="-2" class="btn btn-xl btn-primary custom-btn-size-med">🧾</button>
</div>
</td>
<td class="bold-row {{ background }}">🪙 {{ change }}€</td>
</tr>
<tr>
<td colspan="3"><button type="submit" name="wert" value="0" id="reset" class="btn btn-xl btn-dark custom-btn-size">Reset 🦭</button></td>
</tr>
<tr>
<td colspan="3">Made with ♥️, marmalade and zero kowledge in Kiel Strawberry City.<br>
Version: 1.0.3/2024-05-27<br>
<a href="https://gitea.elpatron.me/elpatron/erdbeerhannah/src/branch/main/README.md" target="_blank">Weitere Infos</a></td>
</tr>
</tbody>
</form>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>