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>
|
||||
<html lang="de" data-bs-theme="dark">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<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="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="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>
|
||||
</head>
|
||||
<body class="d-flex flex-column vh-100">
|
||||
<nav class="navbar navbar-expand-lg border-bottom mb-3">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Durstrechner</a>
|
||||
<form class="d-flex" role="search">
|
||||
<button class="btn" data-toggle-bs-theme><i class="bi bi-lightbulb-fill"></i> Tag / Nacht</button>
|
||||
<button class="btn">Einstellungen</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<body>
|
||||
<header>
|
||||
<h1><span class="emoji"></span> Der Durstrechner</h1>
|
||||
<button>Einstellungen</button>
|
||||
</header>
|
||||
<div class="slot">
|
||||
<aside class="calculator">
|
||||
<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>
|
||||
</aside>
|
||||
<main class="controls">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="script/all.js" type="module"></script>
|
||||
<script>
|
||||
// Install the service worker for offline capabilities
|
||||
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 = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/manifest.json',
|
||||
'/service-worker.js',
|
||||
'/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-512x512.png',
|
||||
'/favicon/apple-touch-icon.png',
|
||||
|
|
|
|||
|
|
@ -1,3 +1,65 @@
|
|||
.currency-value::after {
|
||||
content: ' €';
|
||||
:root {
|
||||
--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