Vorbereitung mit Bootstrap CSS

README hinzugefügt
Nested CSS und kleinere Design-Anpassungen
2025-12-05 23:48:39 +00:00 · 2025-04-05 19:33:56 +02:00 · 2025-04-05 13:03:13 +02:00 · 2025-04-05 12:58:12 +02:00 · 2025-04-05 12:09:08 +02:00
10 changed files with 135 additions and 79 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/README.md
+++ b/README.md
@ -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 . 
+```
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="de">
+<html lang="de" data-bs-theme="dark">
 <head>
    <meta charset="UTF-8"/>
    <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="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>
-    <header>
-        <h1><span class="emoji"></span> Der Durstrechner</h1>
-        <button>Einstellungen</button>
-    </header>
-    <div class="slot">
-        <aside class="calculator">
-            <div>
-
+<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>
-        </aside>
-        <main class="controls">
-            <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 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>
-        </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) {
--- a/package.json
+++ b/package.json
@ -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"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -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
--- a/script/all.js
+++ b/script/all.js
@ -0,0 +1 @@
+import './theme.js'
--- a/script/calculator.js
+++ b/script/calculator.js
--- a/script/theme.js
+++ b/script/theme.js
@ -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);
+    })
+});
+
+
--- a/service-worker.js
+++ b/service-worker.js
@ -1,10 +1,19 @@
-const CACHE_NAME = 'produkt-rechner-v1';
+const CACHE_NAME = 'durst-rechner-v2';
+
 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',
--- a/stylesheet.css
+++ b/stylesheet.css
@ -1,65 +1,3 @@
-: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;
+.currency-value::after {
+    content: ' €';
 }
Author	SHA1	Message	Date
Dennis Heinrich	358fcc2745	Vorbereitung mit Bootstrap CSS	2025-04-05 19:33:56 +02:00
Dennis Heinrich	10d7384305	README hinzugefügt	2025-04-05 13:03:13 +02:00
Dennis Heinrich	495494f613	Nested CSS und kleinere Design-Anpassungen	2025-04-05 12:58:12 +02:00
Dennis Heinrich	62f7ae843d	Layout für Line-Items und Produkte hinzugefügt	2025-04-05 12:09:08 +02:00