mirror of
https://github.com/cloudmaker97/DurstRechner.git
synced 2025-12-06 07:58:39 +00:00
Compare commits
No commits in common. "358fcc274513f085130544dd748db64a2562c56d" and "cd1d3f250bb7ba8baf4a3719882bf27cb7de0781" have entirely different histories.
358fcc2745
...
cd1d3f250b
10 changed files with 79 additions and 135 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1 +0,0 @@
|
||||||
node_modules
|
|
||||||
14
README.md
14
README.md
|
|
@ -1,14 +0,0 @@
|
||||||
# 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" data-bs-theme="dark">
|
<html lang="de">
|
||||||
<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,51 +9,26 @@
|
||||||
<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 class="d-flex flex-column vh-100">
|
<body>
|
||||||
<nav class="navbar navbar-expand-lg border-bottom mb-3">
|
<header>
|
||||||
<div class="container-fluid">
|
<h1><span class="emoji"></span> Der Durstrechner</h1>
|
||||||
<a class="navbar-brand" href="#">Durstrechner</a>
|
<button>Einstellungen</button>
|
||||||
<form class="d-flex" role="search">
|
</header>
|
||||||
<button class="btn" data-toggle-bs-theme><i class="bi bi-lightbulb-fill"></i> Tag / Nacht</button>
|
<div class="slot">
|
||||||
<button class="btn">Einstellungen</button>
|
<aside class="calculator">
|
||||||
</form>
|
<div>
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<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>
|
||||||
<div class="col-9">
|
</aside>
|
||||||
<div class="row row-cols-6 row-gap-3">
|
<main class="controls">
|
||||||
<div class="col product-box">
|
<div>
|
||||||
<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
14
package.json
|
|
@ -1,14 +0,0 @@
|
||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
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 +0,0 @@
|
||||||
import './theme.js'
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
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,19 +1,10 @@
|
||||||
const CACHE_NAME = 'durst-rechner-v2';
|
const CACHE_NAME = 'produkt-rechner-v1';
|
||||||
|
|
||||||
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,3 +1,65 @@
|
||||||
.currency-value::after {
|
:root {
|
||||||
content: ' €';
|
--header-background-color: #171717;
|
||||||
|
--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