From 358fcc274513f085130544dd748db64a2562c56d Mon Sep 17 00:00:00 2001
From: Dennis Heinrich <der@dennis-heinri.ch>
Date: Sat, 5 Apr 2025 19:33:56 +0200
Subject: [PATCH] Vorbereitung mit Bootstrap CSS

---
 .gitignore        |   1 +
 index.html        |  96 +++++++++------------
 package.json      |  14 +++
 pnpm-lock.yaml    |  39 +++++++++
 script/all.js     |   1 +
 script/theme.js   |  15 ++++
 service-worker.js |  10 ++-
 stylesheet.css    | 211 +---------------------------------------------
 8 files changed, 121 insertions(+), 266 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 package.json
 create mode 100644 pnpm-lock.yaml
 create mode 100644 script/all.js
 create mode 100644 script/theme.js
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/index.html b/index.html
index 8e637f5..94c5443 100644
--- 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,69 +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>
-                <div class="line-items">
-                    <div class="item">
-                        <span class="amount">1</span>
-                        <span class="value">5,50</span>
-                        <span class="name">Longdrink</span>
-                        <button class="remove">X</button>
+<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>
+
+    <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 class="calculator-summary">
-                    <span class="value">5,50</span>
-                </div>
-                <div class="calculator-action">
-                    <button>Abschluss</button>
-                </div>
             </div>
-        </aside>
-        <main class="controls">
-            <div>
-                <div class="tab tab-controls active">
-                    <div class="product-grid">
-                        <button class="product">
-                            <img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
-                            <span class="product-meta">
-                                <span class="name">Longdrink with venice Ice and ctara asf as</span>
-                            </span>
-                        </button>
-                        <button class="product">
-                            <img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
-                            <span class="product-meta">
-                                <span class="name">Wasser mit fadem Beigeschmack</span>
-                            </span>
-                        </button>
-                        <button class="product">
-                            <img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
-                            <span class="product-meta">
-                                <span class="name">Longdrink with venice Ice and ctara asf as</span>
-                            </span>
-                        </button>
-                        <button class="product">
-                            <img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
-                            <span class="product-meta">
-                                <span class="name">Longdrink with venice Ice and ctara asf as</span>
-                            </span>
-                        </button>
-                    </div>
-                </div>
-                <div class="tab tab-settings">
-                    <h2>Einstellungen</h2>
-                </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>
         // Install the service worker for offline capabilities
         if ('serviceWorker' in navigator) {
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..aff8ebd
--- /dev/null
+++ 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"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..3021a59
--- /dev/null
+++ 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
diff --git a/script/all.js b/script/all.js
new file mode 100644
index 0000000..4da7e10
--- /dev/null
+++ b/script/all.js
@@ -0,0 +1 @@
+import './theme.js'
\ No newline at end of file
diff --git a/script/theme.js b/script/theme.js
new file mode 100644
index 0000000..38bb8dc
--- /dev/null
+++ 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);
+    })
+});
+
+
diff --git a/service-worker.js b/service-worker.js
index 96a966c..643032e 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'durst-rechner-v1';
+const CACHE_NAME = 'durst-rechner-v2';
 
 const FILES_TO_CACHE = [
     '/',
@@ -6,6 +6,14 @@ const FILES_TO_CACHE = [
     '/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',
diff --git a/stylesheet.css b/stylesheet.css
index 3cdcc00..6080ed7 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -1,208 +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;
-    --currency-symbol: " €";
-    --amount-times-symbol: "x ";
-    --product-button-background-color: #f0f0f0;
-    --product-button-hover-background-color: #e0e0e0;
-    --product-button-color: #000;
-    --product-button-border-color: #000;
-    --product-button-border-radius: 5px;
-}
-
-html, body {
-    height: 100%;
-    width: 100vw;
-}
-
-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;
-
-    h1 {
-        margin: 0;
-        padding: 0;
-        transform: translateY(-.1em);
-        user-select: none;
-        font-size: 1.1em;
-
-        > span.emoji {
-            padding-right: .4em;
-
-            &:before {
-                content: "🍺";
-            }
-        }
-    }
-
-    button {
-        margin-left: auto;
-        background-color: var(--header-button-background-color);
-        color: var(--header-button-color);
-    }
-}
-
-.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%;
-    min-width: 300px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
-
-    > div {
-        display: flex;
-        flex-direction: column;
-        padding: var(--box-padding);
-        box-sizing: border-box;
-        width: 100%;
-    }
-
-    .line-items {
-        display: flex;
-        flex-direction: column;
-        flex: 1 0 0;
-        box-sizing: border-box;
-        gap: .3em;
-        overflow-y: auto;
-
-        .item {
-            display: flex;
-            font-size: 1.3em;
-
-            .value {
-                margin-right: .2em;
-                &::after {
-                    content: var(--currency-symbol);
-                }
-            }
-
-            .amount {
-                margin-right: .4em;
-                &::after {
-                    content: var(--amount-times-symbol);
-                }
-            }
-
-            > .remove {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                width: 1.5em;
-                height: 1.5em;
-                margin-left: auto;
-                padding: .8em;
-            }
-        }
-    }
-
-    .line-summary {
-        display: flex;
-        flex-direction: column;
-        flex: 1 0 0;
-        box-sizing: border-box;
-    }
-
-    .calculator-summary {
-        > .value {
-            display: flex;
-            font-size: 1.8em;
-            justify-content: center;
-            margin-bottom: .2em;
-
-            &::after {
-                content: var(--currency-symbol);
-                padding-left: .2em;
-            }
-        }
-    }
-
-    .calculator-action {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-
-        button {
-            display: flex;
-            width: 100%;
-            justify-content: center;
-            border: 1px solid black;
-            padding: .5em;
-            font-size: 1.2em;
-        }
-    }
-}
-
-main.controls {
-    display: flex;
-    flex: 4 0 0;
-
-    > div {
-        display: flex;
-        flex-direction: column;
-        gap: .5em;
-        padding: var(--box-padding);
-        box-sizing: border-box;
-        width: 100%;
-
-        > .tab {
-            display: none;
-
-            &.active {
-                display: block;
-            }
-
-            &.tab-controls {
-                .product-grid {
-                    display: grid;
-                    grid-template-columns: repeat(4, 1fr);
-                    gap: .5em;
-                    overflow-y: auto;
-                    padding: var(--box-padding);
-
-                    button.product {
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: start;
-                        align-items: center;
-                        padding: 1em;
-                        border: 1px solid var(--product-button-border-color);
-                        border-radius: var(--product-button-border-radius);
-                        background-color: var(--product-button-background-color);
-                        color: var(--product-button-color);
-                        &:hover, &:focus-visible {
-                            background-color: var(--product-button-hover-background-color);
-                        }
-
-                        > .product-meta {
-                            display: flex;
-                            margin-top: .5em;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+.currency-value::after {
+    content: ' €';
+}
\ No newline at end of file
