dennis.heinrich/DurstRechner
1
0
Fork 0
mirror of https://github.com/cloudmaker97/DurstRechner.git synced 2025-12-05 23:48:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Vorbereitung mit Bootstrap CSS

Browse source
This commit is contained in:
Dennis Heinrich 2025-04-05 19:33:56 +02:00
parent 10d7384305
commit 358fcc2745
8 changed files with 121 additions and 266 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
node_modules

92
index.html
View file

@ -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>
</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>
</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="tab tab-settings">
<h2>Einstellungen</h2>
<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) {

14
package.json Normal file
View 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
View 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
View file

@ -0,0 +1 @@
import './theme.js'

15
script/theme.js Normal file
View 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);
})
});

10
service-worker.js
View file

@ -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',

209
stylesheet.css
View file

@ -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: ' €';
}