Init commit

2022-08-18 22:20:07 +03:00
parent 7783eda507
commit b5203d93dd
36 changed files with 11330 additions and 0 deletions
--- a/map.html
+++ b/map.html
@@ -0,0 +1,115 @@
+<!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>