115 lines
3.0 KiB
HTML
115 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>UDrone</title>
|
||
|
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||
|
|
<link rel="stylesheet" type="text/css" href="./node_modules/flight-indicators-js/css/flight-indicators.css" />
|
||
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet">
|
||
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script>
|
||
|
|
<style>
|
||
|
|
body { margin: 0; padding: 0; font-family: sans-serif;}
|
||
|
|
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
||
|
|
#ui {
|
||
|
|
z-index: 99999;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
div.instrument .box {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
transition: transform .3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-menu {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 10000;
|
||
|
|
}
|
||
|
|
.menu {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background-color: #edece1;
|
||
|
|
padding: 10px 0;
|
||
|
|
margin: 0;
|
||
|
|
border-bottom-left-radius: 5px;
|
||
|
|
border-bottom-right-radius: 5px;
|
||
|
|
border-top-right-radius: 5px;
|
||
|
|
}
|
||
|
|
.menu > li > a {
|
||
|
|
|
||
|
|
font: inherit;
|
||
|
|
border: 0;
|
||
|
|
padding: 10px 30px 10px 15px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
text-decoration: unset;
|
||
|
|
color: #000;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
.menu > li > a:hover {
|
||
|
|
background:#f1f3f7;
|
||
|
|
color: #013b01;
|
||
|
|
}
|
||
|
|
.menu > li {
|
||
|
|
text-decoration: none;
|
||
|
|
list-style-type: none; /* Remove bullets */
|
||
|
|
padding: 0; /* Remove padding */
|
||
|
|
margin: 0; /* Remove margins */
|
||
|
|
}
|
||
|
|
.menu > li > a > i {
|
||
|
|
padding-right: 10px;
|
||
|
|
}
|
||
|
|
.menu > li.trash > a:hover {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mapboxgl-popup {
|
||
|
|
max-width: 400px;
|
||
|
|
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
#data {
|
||
|
|
display: block;
|
||
|
|
position: fixed;
|
||
|
|
width: 200px;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 10px;
|
||
|
|
background-color: #00000047;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- <iframe width="300" style="position: absolute; z-index: 99999; right: 0;" height="230" src="http://www.youtube.com/embed/yotbnhfRgMY?autoplay=1" frameborder="0" allowfullscreen></iframe> -->
|
||
|
|
<div id="ui" style="height: 200px;">
|
||
|
|
<span id="attitude"></span>
|
||
|
|
<span id="heading"></span>
|
||
|
|
<div id="data">
|
||
|
|
<strong>PI 777</strong> (<span id="status"></span>)<br><br>
|
||
|
|
<strong>MODE:</strong> <span id="mode">manual</span><br>
|
||
|
|
<strong>ARMED:</strong> <span id="armed">false</span><br>
|
||
|
|
<strong>BATT:</strong> <span id="batt">0</span>%
|
||
|
|
<strong>SAT:</strong> <span id="satellites_visible">0</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="contextMenu" class="context-menu" style="display: none">
|
||
|
|
<ul class="menu">
|
||
|
|
<li class="action"><a href="#">Бомбити сюди</a></li>
|
||
|
|
<li class="action"><a href="#">Дивитись туди</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="drone" style="cursor:pointer">
|
||
|
|
<span style="color: #c9003c; font-weight: bold">PI</span> <span style="color: #ffc9d9; font-weight: bold">777</span><br>
|
||
|
|
<img src="https://i.imgur.com/1gB9w4E.png" width="32px" alt="">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="map"></div>
|
||
|
|
<script src="./dist/bundle.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|