93 lines
3.4 KiB
HTML
93 lines
3.4 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ title }}</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<link rel="icon" href="{{ url_for('static', filename='gimmiCoffee_Logo.png') }}" type="image/png">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="site-title">gimmiCoffee</div>
|
|
<div class="user-actions">
|
|
<span class="username">Max Mustermann</span>
|
|
<a href="/logout" class="logout">Logout</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main-container">
|
|
|
|
<section class="left">
|
|
<div class="info">ESP-Conn Infos</div>
|
|
|
|
<div class="button-grid">
|
|
<div class="grid-button deniePress">
|
|
<div class="top-left-text">Kaffeeee</div>
|
|
<div class="center-number">Kaffee Machen</div>
|
|
</div>
|
|
<div class="grid-button initBackRed" id="machine-status-butt" onclick="toggleMachine()">
|
|
<div class="top-left-text">Maschine</div>
|
|
<div class="center-number" id="machine-status">AUS</div>
|
|
</div>
|
|
<div class="grid-button deniePress">
|
|
<div class="top-left-text">Maschiene</div>
|
|
<div class="center-number">Nicht Bereit</div>
|
|
</div>
|
|
|
|
<div class="grid-button deniePress">
|
|
<div class="top-left-text">Fehler</div>
|
|
<div class="center-number">Wasser leer?</div>
|
|
</div>
|
|
<div class="grid-button deniePress">
|
|
<div class="top-left-text">Wasser</div>
|
|
<div class="center-number">Aufgefüllt</div>
|
|
</div>
|
|
<div class="grid-button deniePress">
|
|
<div class="top-left-text">Bohnen</div>
|
|
<div class="center-number">Nachgefüllt</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="right stats-box">
|
|
<h2 class="stats-title">Statistiken</h2>
|
|
<div class="clickable">
|
|
<div class="top-left-text">Coffee made</div>
|
|
<div class="center-number">XXX</div>
|
|
</div>
|
|
<div class="clickable">
|
|
<div class="top-left-text">Bohnen Füllstand</div>
|
|
<div class="center-number">XX%</div>
|
|
</div>
|
|
<div class="clickable">
|
|
<div class="top-left-text">Wasser Füllstand</div>
|
|
<div class="center-number">XX%</div>
|
|
</div>
|
|
<div class="clickable">
|
|
<div class="top-left-text">Bohnen nachgefüllt</div>
|
|
<div class="center-number">XX</div>
|
|
</div>
|
|
<div class="clickable">
|
|
<div class="top-left-text">Wasser nachgefüllt</div>
|
|
<div class="center-number">XX</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<script>
|
|
function toggleMachine() {
|
|
document.getElementById("machine-status").innerText = "PENDING";
|
|
document.getElementById("machine-status-butt").classList.add("blink-orange");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
<!--<script src="{{ url_for('static', filename='script.js') }}"></script>-->
|