125 lines
5.2 KiB
HTML
Executable File
125 lines
5.2 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kantine Weekly Menu</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="header-content">
|
|
<div class="brand">
|
|
<span class="material-icons-round logo-icon">restaurant_menu</span>
|
|
<div class="brand-text">
|
|
<h1>Kantinen Übersicht</h1>
|
|
<div id="last-updated-subtitle" class="subtitle"></div>
|
|
</div>
|
|
</div>
|
|
<div id="header-week-info" class="header-week-info">
|
|
<!-- Populated by JavaScript -->
|
|
</div>
|
|
<div id="weekly-cost-display" class="weekly-cost hidden">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
<div class="controls">
|
|
<button id="btn-refresh" class="icon-btn" aria-label="Menüdaten aktualisieren"
|
|
title="Menüdaten aktualisieren">
|
|
<span class="material-icons-round">refresh</span>
|
|
</button>
|
|
<div class="nav-group">
|
|
<button id="btn-this-week" class="nav-btn active">Diese Woche</button>
|
|
<button id="btn-next-week" class="nav-btn">Nächste Woche</button>
|
|
</div>
|
|
<button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme">
|
|
<span class="material-icons-round theme-icon">light_mode</span>
|
|
</button>
|
|
<button id="btn-login-open" class="user-badge-btn icon-btn-small">
|
|
<span class="material-icons-round">login</span>
|
|
<span>Anmelden</span>
|
|
</button>
|
|
<div id="user-info" class="user-badge hidden">
|
|
<span class="material-icons-round">person</span>
|
|
<span id="user-id-display"></span>
|
|
<button id="btn-logout" class="icon-btn-small" aria-label="Logout">
|
|
<span class="material-icons-round">logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="login-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Login</h2>
|
|
<button id="btn-login-close" class="icon-btn" aria-label="Close">
|
|
<span class="material-icons-round">close</span>
|
|
</button>
|
|
</div>
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label for="employee-id">Mitarbeiternummer</label>
|
|
<input type="text" id="employee-id" name="employee-id" placeholder="z.B. 2041" required>
|
|
<small class="help-text">Deine offizielle Knapp Mitarbeiternummer.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Passwort</label>
|
|
<input type="password" id="password" name="password" placeholder="Bessa Passwort" required>
|
|
<small class="help-text">Das Passwort für deinen Bessa Account.</small>
|
|
</div>
|
|
<div id="login-error" class="error-msg hidden"></div>
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn-primary wide">Einloggen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="progress-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Menüdaten aktualisieren</h2>
|
|
</div>
|
|
<div class="modal-body" style="padding: 20px;">
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div id="progress-fill" class="progress-fill"></div>
|
|
</div>
|
|
<div id="progress-percent" class="progress-percent">0%</div>
|
|
</div>
|
|
<p id="progress-message" class="progress-message">Initialisierung...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="container">
|
|
<div id="last-updated-banner" class="banner hidden">
|
|
<span class="material-icons-round">update</span>
|
|
<span id="last-updated-text">Gerade aktualisiert</span>
|
|
</div>
|
|
|
|
<div id="loading" class="loading-state">
|
|
<div class="spinner"></div>
|
|
<p>Lade Menüdaten...</p>
|
|
</div>
|
|
|
|
<div id="menu-container" class="menu-grid">
|
|
<!-- Dynamic Content -->
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="app-footer">
|
|
<p>Bessa Knapp-Kantine Wrapper • <span id="current-year">2026</span></p>
|
|
</footer>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
|
|
</html> |