200 lines
7.3 KiB
HTML
Raw Normal View History

2022-04-14 22:48:39 +02:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>%DEVICE_NAME%</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/custom.css">
<script src="static/js/jquery-3.3.1.min.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="static/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
<link rel="manifest" href="static/img/site.webmanifest">
<link rel="mask-icon" href="static/img/safari-pinned-tab.svg" color="#111111">
<link rel="shortcut icon" href="static/img/favicon.ico">
<meta name="msapplication-TileColor" content="#111111">
<meta name="msapplication-config" content="static/img/browserconfig.xml">
<meta name="theme-color" content="#111111">
2022-05-15 16:37:34 +02:00
<script type="text/javascript">
var opacity = 0;
var intervalID = 0;
window.onload = setTimeout(() => { fadeout(); }, 4000);
function fadeout() {
intervalID = setInterval(hide, 200);
}
function hide() {
var responseMessage = document.getElementById("responseMessage");
opacity =
Number(window.getComputedStyle(responseMessage).getPropertyValue("opacity"))
if (opacity > 0) {
opacity = opacity - 0.1;
responseMessage.style.opacity = opacity
}
else {
responseMessage.remove()
clearInterval(intervalID);
}
}
</script>
2022-04-14 22:48:39 +02:00
</head>
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
2022-04-14 22:48:39 +02:00
<a class="navbar-brand" href="#">
<img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
%DEVICE_NAME%</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
2022-04-16 16:14:05 +02:00
<div class="collapse navbar-collapse pr-2 mt-2 bg-secondary" id="navbarNavAltMarkup">
<ul class="navbar-nav nav align-items-end">
<li class="nav-item">
<a class="nav-link active" href="#tab_home" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab_settings" data-toggle="tab">Settings</a>
</li>
</ul>
</div>
</nav>
</header>
2022-04-14 22:48:39 +02:00
<main class="container-fluid py-3 flex-fill">
2022-04-14 22:48:39 +02:00
<!-- Tabs Content -->
<div class="tab-content">
<!-- Div Tab Home-->
<div class="tab-pane fade show active" id="tab_home" role="tabpanel">
<!-- Jumbotron -->
<div class="jumbotron text-center">
<p class="p-4">
<img src="static/img/logo.png">
</p>
<h3>%DEVICE_NAME%</h3>
</div>
2022-05-15 16:37:34 +02:00
<!-- AlertMessageBox-->
<div id="responseMessage" class="alert alert-%RESP_MESSAGE_TYPE%" %SHOW_RESP_MESSAGE%>
%RESP_MESSAGE%
</div>
2022-04-14 22:48:39 +02:00
<div class="container-fluid pb-5">
2022-05-15 16:37:34 +02:00
<h4>BATTERY: %BATTERY_TYPE%</h4>
2022-04-14 22:48:39 +02:00
<div class="progress">
<div class="progress-bar text-light" role="progressbar" aria-valuenow="%BAT_REMAIN_CAPACITY%"
aria-valuemin="0" aria-valuemax="100" style="width: %BAT_REMAIN_CAPACITY%&#37;">
2022-04-14 22:48:39 +02:00
%BAT_REMAIN_CAPACITY%&#37; / %BAT_VOLTAGE% V
</div>
</div>
</div>
<div class="container-fluid pb-5">
2022-05-15 16:37:34 +02:00
<h4>FACTIONS</h4>
2022-04-14 22:48:39 +02:00
<div class="table-responsive">
<table class="table text-light text-center">
<thead>
<tr>
2022-05-15 16:37:34 +02:00
<th scope="col">Faction</td>
<th scope="col">Time</td>
2022-04-14 22:48:39 +02:00
</tr>
</thead>
<tbody>
<tr>
<td class="align-items-center justify-content-center" scope="col">
<a href="#">
<img src="static/img/logo_fac1.png" class="img-responsive" alt="" />
<div class="desc">
<p class="desc_content">%NAME_FAC_1%</p>
</div>
</a>
</td>
<td class="align-items-center justify-content-center" scope="col">%POINTS_FAC_1%</td>
</tr>
<tr>
<td class="align-items-center justify-content-center" scope="col">
<a href="#">
<img src="static/img/logo_fac2.png" class="img-responsive" alt="" />
<div class="desc">
<p class="desc_content">%NAME_FAC_2%</p>
</div>
</a>
</td>
<td class="align-items-center justify-content-center" scope="col">%POINTS_FAC_2%</td>
</tr>
<tr>
<td class="align-items-center justify-content-center" scope="col">
<a href="#">
<img src="static/img/logo_fac3.png" class="img-responsive" alt="" />
<div class="desc">
<p class="desc_content">%NAME_FAC_3%</p>
</div>
</a>
</td>
<td class="align-items-center justify-content-center" scope="col">%POINTS_FAC_3%</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid pb-5" %SHOW_DTC_TABLE%>
<h4>Fehlercodes</h4>
<table class="table text-light">
<tbody>
<tr>
<th class="col-md-4" scope="col">Timestamp</td>
<th class="col-md-4" scope="col">DTC</td>
<th class="col-md-4" scope="col">active</td>
</tr>
%DTC_TABLE%
</tbody>
</table>
</div>
</div>
<!-- Div Tab Home-->
<!-- Div Tab Settings-->
<div class="tab-pane fade" id="tab_settings" role="tabpanel">
<h3>Settings</h3>
2022-04-14 22:48:39 +02:00
<hr>
2022-05-15 16:37:34 +02:00
<form method="POST">
<div class="form-group row">
<label for="commandInput" class="col-sm-2 col-form-label">Command</label>
<div class="col-sm-10">
2022-05-15 16:37:34 +02:00
<input type="text" name="commandInput" class="form-control bg-light" id="commandInput"
placeholder="type command here...">
2022-04-14 22:48:39 +02:00
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button name="cmdsubmit" type="submit" class="btn btn-primary float-right">Apply</button>
2022-04-14 22:48:39 +02:00
</div>
</div>
</form>
</div>
<!-- Div Tab Settings-->
</div>
<!-- Tabs Content -->
</main>
<!-- Footer -->
<footer class="fixed-bottom bg-secondary font-weight-light text-light text-center py-3">
<!-- Copyright -->
<span class=" footer-copyright">
© 2022 <a class="text-reset fw-bold" href="https://hiabuto.de/">Hiabuto Defence Systems</a>
</span>
<!-- Copyright -->
2022-04-14 22:48:39 +02:00
</footer>
<!-- Footer -->
</body>
</html>