104 lines
5.6 KiB
HTML
104 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hestia</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/mqtt/dist/mqtt.js"></script>
|
|
<script type="module">
|
|
import { refreshState, togglePower } from './assets/hestia.js';
|
|
window.togglePower = togglePower;
|
|
window.startup = startup;
|
|
window.shutdown = shutdown;
|
|
window.refreshState = refreshState;
|
|
</script>
|
|
</head>
|
|
|
|
<body class="bg-gray-900 text-white font-sans">
|
|
<marquee style="color: yellow; background-color: red; font-weight: bold;">
|
|
PELLET STOVE FREE TRIAL HAS ENDED, PLEASE PURCHASE A LICENSE NOW!
|
|
</marquee>
|
|
|
|
<div class="container mx-auto py-8 max-w-md">
|
|
<h1 class="text-3xl text-center text-purple-400 font-bold mb-8">Hestia Control Panel</h1>
|
|
|
|
<div class="controls-container bg-gray-800 p-6 rounded-lg shadow-lg space-y-4">
|
|
<table class="min-w-full bg-gray-900 text-white rounded-lg shadow-lg">
|
|
<thead>
|
|
<tr class="border-b border-gray-700">
|
|
<th class="py-2 px-4 text-left text-purple-400">Element</th>
|
|
<th class="py-2 px-4 text-left text-purple-400">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b border-gray-700">
|
|
<td class="py-2 px-4">Igniter</td>
|
|
<td class="py-2 px-4" id="igniter-status">Placeholder</td>
|
|
</tr>
|
|
<tr class="border-b border-gray-700">
|
|
<td class="py-2 px-4">Exhaust</td>
|
|
<td class="py-2 px-4" id="exhaust-status">Placeholder</td>
|
|
</tr>
|
|
<tr class="border-b border-gray-700">
|
|
<td class="py-2 px-4">Auger</td>
|
|
<td class="py-2 px-4" id="auger-status">Placeholder</td>
|
|
</tr>
|
|
<!-- PoF -->
|
|
<tr class="border-b border-gray-700">
|
|
<td class="py-2 px-4">Proof of Fire</td>
|
|
<td class="py-2 px-4" id="pof-status">Placeholder</td>
|
|
</tr>
|
|
<!-- Vacuum -->
|
|
<tr>
|
|
<td class="py-2 px-4">Vacuum</td>
|
|
<td class="py-2 px-4" id="vacuum-status">Placeholder</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="button-container flex">
|
|
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="igniter-toggle-btn" value="Toggle Igniter" name="igniterToggle" onclick="togglePower('igniter')">
|
|
</div>
|
|
<div class="button-container flex mt-4">
|
|
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="exhaust-toggle-btn" value="Toggle Exhaust" name="exhaustToggle" onclick="togglePower('exhaust')">
|
|
</div>
|
|
<div class="button-container flex mt-4">
|
|
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="auger-toggle-btn" value="Toggle Auger" name="augerToggle" onclick="togglePower('auger')">
|
|
</div>
|
|
<div class="button-container flex mt-4">
|
|
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="start-btn" value="Startup" name="startButton" onclick="startup()">
|
|
</div>
|
|
<div class="button-container flex mt-4">
|
|
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="stop-btn" value="Shutdown" name="stopButton" onclick="shutdown()">
|
|
</div>
|
|
<form action="/" method="post">
|
|
<!-- Set feed rates -->
|
|
<div class="form-group mt-4">
|
|
<label for="feedRate" class="block text-sm font-medium text-purple-400">Feed Rate:</label>
|
|
<select name="feedRate" class="form-control bg-gray-700 text-white mt-1 block w-full rounded border-gray-600 focus:border-purple-500 focus:ring-purple-500 py-2 px-4">
|
|
<option value="500">Low</option>
|
|
<option value="625">Medium-Low</option>
|
|
<option value="750">Medium</option>
|
|
<option value="875">Medium-High</option>
|
|
<option value="1000">High</option>
|
|
</select>
|
|
</div>
|
|
<div class="button-container flex justify-end mt-4">
|
|
<input class="btn bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded w-full" type="submit" id="reload" value="Set Feed Rate" name="reload">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="text-center my-8">
|
|
<img src="./assets/dancing_jesus.gif" class="img-fluid mx-auto rounded-lg shadow-lg" alt="Dancing Jesus">
|
|
</div>
|
|
|
|
<div class="controls-container bg-gray-800 p-6 rounded-lg shadow-lg" id="quitContainer">
|
|
<input class="btn bg-green-200 hover:bg-green-400 text-black font-bold py-2 px-4 rounded w-full" type="submit" id="reload" value="Refresh State" name="refresh">
|
|
<input class="btn bg-red-600 hover:bg-red-700 text-white py-2 font-bold rounded w-full mt-4" type="submit" id="quit" value="Quit!!" name="quit">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |