DurstRechner/index.html

86 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="theme-color" content="#2196f3"/>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="stylesheet.css">
<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">
<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>
</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>
<script>
// Install the service worker for offline capabilities
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('service-worker.js')
.then(reg => console.log('Service Worker registered', reg))
.catch(err => console.error('SW registration failed', err));
});
}
</script>
</body>
</html>