106 lines
4.4 KiB
HTML
106 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🍓 Erdbeerkasse 🍓</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">🪙 {{ 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 ♥️ and zero kowledge in Kiel Strawberry City.<br>
|
|
Version: 1.0.1/2024-05-26</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>
|