59 lines
2.8 KiB
HTML
59 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IDFC</title>
|
|
<link rel="icon" href="img/favicon.ico">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
|
|
<script src="https://unpkg.com/mqtt@5.13.1/dist/mqtt.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<link rel="stylesheet" href="main.css">
|
|
<script src="main.js"></script>
|
|
</head>
|
|
<body>
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title has-text-primary">The M5 - MQTT Project</h1>
|
|
<h2 class="subtitle has-text-primary-light">by Patrik, Hazel and Reinhold</h2>
|
|
</div>
|
|
<div class="container m-5">
|
|
<div class="panel">
|
|
<form id="tabs" class="panel-tabs is-justify-content-flex-start has-text-success-light">
|
|
<input type="radio" id="chart-tab" name="tabs" data-tab="chart" checked/>
|
|
<label for="chart-tab" class="m-3">Chart</label>
|
|
|
|
<input type="radio" id="value-tab" name="tabs" data-tab="values"/>
|
|
<label for="value-tab" class="m-3">Values</label>
|
|
|
|
<input type="radio" id="connection-tab" name="tabs" data-tab="connection"/>
|
|
<label for="connection-tab" class="m-3">Connection</label>
|
|
</form>
|
|
<div id="block" class="panel-block has-background-grey">
|
|
<div id="chart" class="container" data-tab="chart">
|
|
<canvas></canvas>
|
|
</div>
|
|
<div class="container" data-tab="values">
|
|
<div class="smart-grid">
|
|
<div id="values" class="grid p-6"></div>
|
|
</div>
|
|
</div>
|
|
<div class="container" data-tab="connection" style="display: none;">
|
|
<div class="fixed-grid has-2-cols">
|
|
<div id="connection-grid" class="grid pr-6 has-text-success-light has-text-weight-semibold">
|
|
<label for="connection-broker" class="cell mx-6">Broker:</label>
|
|
<input id="connection-broker" class="cell input is-primary"/>
|
|
<label for="connection-topic" class="cell mx-6">Topic:</label>
|
|
<input id="connection-topic" class="cell input is-primary"/>
|
|
<button id="connection-submit" class="button cell is-primary is-col-start-2">Submit</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div id="toaster"></div>
|
|
</body>
|
|
</html>
|