mirror of
https://github.com/cloudmaker97/DurstRechner.git
synced 2025-12-06 07:58:39 +00:00
Compare commits
4 commits
cd1d3f250b
...
358fcc2745
| Author | SHA1 | Date | |
|---|---|---|---|
| 358fcc2745 | |||
| 10d7384305 | |||
| 495494f613 | |||
| 62f7ae843d |
10 changed files with 135 additions and 79 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
node_modules
|
||||||
14
README.md
Normal file
14
README.md
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
# Der Durstrechner
|
||||||
|
|
||||||
|
Der Durstrechner ist eine einfache Webanwendung, die den Getränkeverkauf bei Veranstaltungen unterstützt.
|
||||||
|
Die Anwendung ermöglicht das einfache Rechnen von Bestellsummen für eine diverse Getränkeauswahl. Die Anwendung
|
||||||
|
ist auch offline verfügbar und kann ohne Internetverbindung genutzt werden (Service-Worker). Für die erstmalige
|
||||||
|
Einrichtung wird eine Internetverbindung empfohlen (das einmalige Aufrufen der Seite im Browser mit einer Internetverbindung
|
||||||
|
genügt).
|
||||||
|
|
||||||
|
## Entwicklung
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Startet den Entwicklungsserver
|
||||||
|
npx http-server -o .
|
||||||
|
```
|
||||||
53
index.html
53
index.html
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de" data-bs-theme="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
|
@ -9,26 +9,51 @@
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
|
||||||
|
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
|
||||||
<title>Der Durstrechner</title>
|
<title>Der Durstrechner</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="d-flex flex-column vh-100">
|
||||||
<header>
|
<nav class="navbar navbar-expand-lg border-bottom mb-3">
|
||||||
<h1><span class="emoji"></span> Der Durstrechner</h1>
|
<div class="container-fluid">
|
||||||
<button>Einstellungen</button>
|
<a class="navbar-brand" href="#">Durstrechner</a>
|
||||||
</header>
|
<form class="d-flex" role="search">
|
||||||
<div class="slot">
|
<button class="btn" data-toggle-bs-theme><i class="bi bi-lightbulb-fill"></i> Tag / Nacht</button>
|
||||||
<aside class="calculator">
|
<button class="btn">Einstellungen</button>
|
||||||
<div>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</nav>
|
||||||
<main class="controls">
|
|
||||||
<div>
|
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3">
|
||||||
|
<ul class="list-group d-none">
|
||||||
|
<li class="list-group-item">Test</li>
|
||||||
|
</ul>
|
||||||
|
<div class="alert alert-info">Keine Produkte ausgewählt</div>
|
||||||
|
<hr>
|
||||||
|
<button class="btn btn-secondary btn-lg w-100">
|
||||||
|
<span class="currency-value" data-total-value>0,00</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
|
<div class="row row-cols-6 row-gap-3">
|
||||||
|
<div class="col product-box">
|
||||||
|
<div class="card">
|
||||||
|
<img src="https://placehold.co/250x250" alt="Produktbild" class="card-img-top">
|
||||||
|
<div class="card-body">
|
||||||
|
<span>Wasser mit Kohlensäure</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="script/all.js" type="module"></script>
|
||||||
<script>
|
<script>
|
||||||
// Install the service worker for offline capabilities
|
// Install the service worker for offline capabilities
|
||||||
if ('serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
|
|
|
||||||
14
package.json
Normal file
14
package.json
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"name": "durst-rechner",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "Dennis Heinrich",
|
||||||
|
"license": "proprietary",
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "5.3.5",
|
||||||
|
"bootstrap-icons": "^1.11.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
39
pnpm-lock.yaml
Normal file
39
pnpm-lock.yaml
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
lockfileVersion: '9.0'
|
||||||
|
|
||||||
|
settings:
|
||||||
|
autoInstallPeers: true
|
||||||
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
|
importers:
|
||||||
|
|
||||||
|
.:
|
||||||
|
dependencies:
|
||||||
|
bootstrap:
|
||||||
|
specifier: 5.3.5
|
||||||
|
version: 5.3.5(@popperjs/core@2.11.8)
|
||||||
|
bootstrap-icons:
|
||||||
|
specifier: ^1.11.3
|
||||||
|
version: 1.11.3
|
||||||
|
|
||||||
|
packages:
|
||||||
|
|
||||||
|
'@popperjs/core@2.11.8':
|
||||||
|
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
|
||||||
|
|
||||||
|
bootstrap-icons@1.11.3:
|
||||||
|
resolution: {integrity: sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==}
|
||||||
|
|
||||||
|
bootstrap@5.3.5:
|
||||||
|
resolution: {integrity: sha512-ct1CHKtiobRimyGzmsSldEtM03E8fcEX4Tb3dGXz1V8faRwM50+vfHwTzOxB3IlKO7m+9vTH3s/3C6T2EAPeTA==}
|
||||||
|
peerDependencies:
|
||||||
|
'@popperjs/core': ^2.11.8
|
||||||
|
|
||||||
|
snapshots:
|
||||||
|
|
||||||
|
'@popperjs/core@2.11.8': {}
|
||||||
|
|
||||||
|
bootstrap-icons@1.11.3: {}
|
||||||
|
|
||||||
|
bootstrap@5.3.5(@popperjs/core@2.11.8):
|
||||||
|
dependencies:
|
||||||
|
'@popperjs/core': 2.11.8
|
||||||
1
script/all.js
Normal file
1
script/all.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
import './theme.js'
|
||||||
0
script/calculator.js
Normal file
0
script/calculator.js
Normal file
15
script/theme.js
Normal file
15
script/theme.js
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
function setBootstrapTheme(theme) {
|
||||||
|
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||||
|
localStorage.setItem('bootstrap-theme', theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
setBootstrapTheme(localStorage.getItem('bootstrap-theme') || 'light');
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-toggle-bs-theme]').forEach(element => {
|
||||||
|
element.addEventListener('click', event => {
|
||||||
|
const theme = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
|
||||||
|
setBootstrapTheme(theme);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,10 +1,19 @@
|
||||||
const CACHE_NAME = 'produkt-rechner-v1';
|
const CACHE_NAME = 'durst-rechner-v2';
|
||||||
|
|
||||||
const FILES_TO_CACHE = [
|
const FILES_TO_CACHE = [
|
||||||
'/',
|
'/',
|
||||||
'/index.html',
|
'/index.html',
|
||||||
'/manifest.json',
|
'/manifest.json',
|
||||||
'/service-worker.js',
|
'/service-worker.js',
|
||||||
'/stylesheet.css',
|
'/stylesheet.css',
|
||||||
|
'/script/all.js',
|
||||||
|
'/script/calculator.js',
|
||||||
|
'/script/theme.js',
|
||||||
|
'/node_modules/bootstrap/dist/css/bootstrap.min.css',
|
||||||
|
'/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
|
||||||
|
'/node_modules/bootstrap-icons/font/bootstrap-icons.min.css',
|
||||||
|
'/node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2',
|
||||||
|
'/node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff',
|
||||||
'/favicon/android-chrome-192x192.png',
|
'/favicon/android-chrome-192x192.png',
|
||||||
'/favicon/android-chrome-512x512.png',
|
'/favicon/android-chrome-512x512.png',
|
||||||
'/favicon/apple-touch-icon.png',
|
'/favicon/apple-touch-icon.png',
|
||||||
|
|
|
||||||
|
|
@ -1,65 +1,3 @@
|
||||||
:root {
|
.currency-value::after {
|
||||||
--header-background-color: #171717;
|
content: ' €';
|
||||||
--header-text-color: white;
|
|
||||||
--header-button-background-color: #676767;
|
|
||||||
--header-button-color: #eaeaea;
|
|
||||||
--aside-background-color: #dfdfdf;
|
|
||||||
--aside-text-color: #000;
|
|
||||||
--box-padding: 1em;
|
|
||||||
}
|
|
||||||
html, body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-family: sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
background-color: var(--header-background-color);
|
|
||||||
color: var(--header-text-color);
|
|
||||||
padding: .5em;
|
|
||||||
}
|
|
||||||
header h1 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
transform: translateY(-.1em);
|
|
||||||
user-select: none;
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
header button {
|
|
||||||
margin-left: auto;
|
|
||||||
background-color: var(--header-button-background-color);
|
|
||||||
color: var(--header-button-color);
|
|
||||||
}
|
|
||||||
header h1 > span.emoji {
|
|
||||||
padding-right: .4em;
|
|
||||||
}
|
|
||||||
header h1 > span.emoji:before {
|
|
||||||
content: "🍺";
|
|
||||||
}
|
|
||||||
.slot {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
aside.calculator {
|
|
||||||
display: flex;
|
|
||||||
flex: 1 0 0;
|
|
||||||
background-color: var(--aside-background-color);
|
|
||||||
height: 100%;
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
|
||||||
}
|
|
||||||
main.controls {
|
|
||||||
display: flex;
|
|
||||||
flex: 4 0 0;
|
|
||||||
}
|
|
||||||
aside.calculator > div,
|
|
||||||
main.controls > div {
|
|
||||||
padding: var(--box-padding);
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue