udrone/map.html

131 lines
3.5 KiB
HTML
Raw Normal View History

2022-08-18 22:20:07 +03:00
<!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;
}
2022-09-22 23:18:43 +03:00
.instrument .hidden {
display: none;
2022-08-18 22:20:07 +03:00
}
.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;
}
2022-09-22 23:18:43 +03:00
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
background-color: #232323;
}
.mapboxgl-ctrl-group button {
background-color: #232323;
color: #fff;
font-weight: bold;
}
2022-08-18 22:20:07 +03:00
.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 {
2022-09-22 23:18:43 +03:00
display: block;
2022-08-18 22:20:07 +03:00
position: fixed;
2022-09-22 23:18:43 +03:00
width: 50%;
border-radius: 25px;
height: 25px;
line-height: 25px;
padding: 10px 25px;
2022-08-18 22:20:07 +03:00
top: 0;
left: 0;
margin: 10px;
2022-09-22 23:18:43 +03:00
background-color: #232323;
2022-08-18 22:20:07 +03:00
color: #fff;
2022-09-23 12:12:16 +03:00
border: #838383 solid 1px;
2022-08-18 22:20:07 +03:00
}
2022-09-22 23:18:43 +03:00
#data > .data_el {
padding-right: 10%;
display: inline;
}
2022-08-18 22:20:07 +03:00
</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">
2022-09-22 23:18:43 +03:00
<div class="data_el"><strong>PI 777</strong> (<span id="status"></span>)</div>
<div class="data_el"><strong>MODE:</strong> <span id="mode" style="color: #b4abff;">manual</span></div>
<div class="data_el"><strong>ARMED:</strong> <span id="armed" style="color: #ff9797;">false</span></div>
<div class="data_el"><strong>BATT:</strong> <span id="batt" style="color: #a2ff97;">0</span>%</div>
<div class="data_el"><strong>SAT:</strong> <span id="satellites_visible" style="color: #97e6ff;">0</span></div>
2022-08-18 22:20:07 +03:00
</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>
2022-09-22 23:18:43 +03:00
<img src="/img/drone-icon.png" width="32px" alt="">
2022-08-18 22:20:07 +03:00
</div>
<div id="map"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>