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
DurstRechner/index.html

165 lines
8.9 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de" data-bs-theme="dark">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="theme-color" content="#2196f3"/>
<link rel="manifest" href="assets/manifest.json">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/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">
<link rel="stylesheet" href="assets/style/stylesheet.css">
<title>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">
<span class="navbar-brand d-flex gap-2" href="#">
<span>Der Durstrechner</span>
<a href="https://github.com/cloudmaker97/DurstRechner" class="text-white visually-hidden" title="Projekt auf GitHub" data-github-ref style="width: 20px; height: 20px;">
<i class="bi bi-github"></i>
</a>
</span>
<form class="d-flex" role="search" method="dialog">
<button class="btn" data-toggle-bs-theme>
<i class="bi bi-lightbulb-fill"></i> <span class="d-none d-md-inline-block">Tag / Nacht</span>
</button>
<button class="btn" data-toggle-tab>
<i class="bi bi-gear"></i> <span class="d-none d-md-inline-block">Einstellungen</span>
</button>
</form>
</div>
</nav>
<main class="container-fluid flex-grow-1">
<div data-tab="products" class="row">
<aside class="col-12 col-md-4 cart">
<li class="list-group-item d-flex justify-content-between" data-template="product-line-item">
<span class="line-item-details">
<span class="amount quantity-value" data-attr="quantity">5</span>
<span class="price currency-value" data-attr="value">2,50</span>
<span class="name name-value" data-attr="name">Wasser mit Kohlensäure</span>
</span>
<i class="bi bi-dash-circle"></i>
</li>
<li class="list-group-item product-deposit" data-template="product-deposit">
Zzgl. <span data-attr="deposit" class="currency-value">0,00</span> Pfand
</li>
<ul class="list-group cart-items">
</ul>
<div class="alert alert-info cart-empty">Keine Produkte ausgewählt</div>
<hr>
<button class="btn btn-secondary btn-lg w-100 cart-value mb-3">
<span class="currency-value" data-total-value>0,00</span>
</button>
</aside>
<div class="col-12 col-md-8">
<div class="product-list">
<div class="col product-box" data-template="product" data-id="0">
<div class="card">
<img data-attr="image"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+BCQAHBQICJmhD1AAAAABJRU5ErkJggg=="
alt="Produktbild" class="card-img-top" loading="eager">
<div class="card-body">
<small data-attr="price" class="currency-value">0,00</small>
<i class="separator"></i>
<small data-attr="name">Wasser mit Kohlensäure</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-tab="settings" class="row d-none">
<aside class="col-12 col-md-6">
<form class="card mb-2" method="dialog" id="new-product">
<h5 class="card-header">Neues Produkt</h5>
<div class="card-body">
<div class="mb-2">
<label for="product-name" class="form-label">Name des Produkts</label>
<input type="text" class="form-control" placeholder="Tolles Produkt" id="product-name" required>
</div>
<div class="mb-2">
<label for="product-price" class="form-label">Preis</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon1">€</span>
<input type="number" class="form-control" step="0.01" value="" id="product-price" required>
</div>
</div>
<div class="mb-2">
<label for="product-deposit" class="form-label">Pfand</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon2">€</span>
<input type="number" class="form-control" step="0.01" value="" id="product-deposit" required>
</div>
</div>
<div class="mb-2">
<label for="product-image" class="form-label">Bild auswählen</label>
<input type="file" class="form-control" placeholder="Tolles Produkt" id="product-image">
</div>
<input type="submit" class="btn btn-success" value="Speichern" id="create-product">
</div>
</form>
<div class="card">
<h5 class="card-header">Export / Import</h5>
<div class="card-body">
<details class="mb-2">
<summary>Exportieren und Importieren</summary>
<p>
Die Daten können im JSON-Format exportiert und importiert werden.
Um Speicherplatz zu sparen, sollte das Bild im Format 1:1 vorliegen.
Ideal ist eine Bildgröße von 250x250 Pixel. Wenn ein Bild über eine URL bereitgestellt wird,
lädt die Software das Bild herunter und speichert es in der JSON-Datei als Base64-kodierte
Version. Die ursprüngliche URL wird dabei nicht mehr gespeichert.
</p>
<label class="w-100 form-label">
<b>Text zum Kopieren und Einfügen:</b>
<textarea class="form-control mt-1" id="input-export-import" spellcheck="false"></textarea>
</label>
</details>
<details>
<summary>Testdaten installieren</summary>
<p>
Über den Knopf "Testdaten einspielen" können Testdaten in die Software importiert werden
oder auch angezeigt werden. Die Daten können nach eigenen Belieben bearbeitet werden. Die
Testdaten könnten einen kleinen Augenblick laden, da sie erst heruntergeladen werden müssen.
</p>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary" data-action="import-testdata">
Testdaten einspielen
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Testdaten einspielen</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="./assets/example/example.json">Import-Datei anzeigen</a></li>
<li><a class="dropdown-item" href="./assets/example/example_urls.json">Import-Datei mit URLs anzeigen</a></li>
</ul>
</div>
</details>
</div>
</div>
</aside>
<div class="col-12 col-md-6 mt-2 mt-md-0">
<div class="card">
<h5 class="card-header">Produkte entfernen</h5>
<div class="card-body">
<p class="mb-2">Hier können Produkte entfernt werden, die nicht mehr benötigt werden.</p>
<li class="list-group-item" data-template="settings-product">Test</li>
<ul class="list-group settings-product-list">
</ul>
</div>
</div>
</div>
</div>
</main>
<script src="assets/script/all.js" type="module"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink