-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
140 lines (126 loc) · 7.25 KB
/
Copy pathindex.html
File metadata and controls
140 lines (126 loc) · 7.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="device-width, initial-scale=1, user-scalable=yes">
<title>Streaming</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Personal CSS -->
<link rel="stylesheet" href="css/estilos.css" type="text/css">
<link rel="icon" type="image/png" href="dron.png">
<!-- Animated CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" type="text/css">
<!-- Bootstrap scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!--VideoJS-->
<link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<!-- JQuery -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<!-- MapBox -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<!-- SignalR -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.3/signalr.min.js"></script>
<!-- Friconix -->
<script defer src="https://friconix.com/cdn/friconix.js"> </script>
<!-- Google fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=fire-animation|shadow-multiple">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark navbar-expand-md bg-faded justify-content-center font-effect-fire-animation">
<a href="index.html" class="navbar-brand d-flex w-50 mr-auto">Drones</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="index.html"><i class="fi-xnsuxl-videocamera-solid fi-2x"></i></a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="admin.html"><i class="fi-xnsuxl-users-cog fi-2x"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/alvaro-de-la-rosa-mora-5ba9851b1/" target="_blank"><i class="fi-snsuxl-linkedin fi-2x"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/uo258175/TFG" target="_blank"><i class="fi-xnsuxl-github fi-2x"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="info.html"><i class="fi-ctluxl-question-mark fi-2x"></i></a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row justify-content-center page-title">
<h1 class="animate__animated animate__zoomInDown font-effect-shadow-multiple title">STREAMING</h1>
</div>
<div class="zig-zag justify-content-center" style="height: fit-content; background-color: darkgray;">
<div class="row animate__animated animate__bounceInUp">
<div id="mapa"></div>
</div>
<div class="row font-effect-shadow-multiple">
<div class="col-lg-6 col-sm-12 text-center table-responsive" style="height: fit-content; margin-bottom: 15px">
<button class="btn btn-primary margin-15" onclick="Volver()">
<i class="fi-xwlrxl-arrow-simple-wide"></i><i class="fi-xnsuxl-map-marker-solid"></i><i class="fi-xwllxl-arrow-simple-wide"></i>
</button>
<table class="table animate__animated animate__fadeInUp" id="tabla">
<thead>
<tr>
<th scope="col"><i class="fi-xnsuxl-radar-solid"></i>Modelo</th>
<th scope="col"><i class="fi-xwluxl-address-card-solid"></i>Matricula</th>
<th scope="col"><i class="fi-cnluxl-arrow solid"></i>Altura</th>
<th scope="col"><i class="fi-cwsuxl-plus-solid"></i>Descripcion</th>
<th scope="col"><i class="fi-xnsuxl-videocamera-solid"></i>Streaming</th>
</tr>
</thead>
<tbody id="tabla-drones">
</tbody>
</table>
</div>
<div class="col-lg-6 col-sm-12 margin-15 align-self-center vjs-16-9" style="margin-bottom: 15px">
<div>
<video id="my-video"
class="video-js vjs-big-play-centered animate__animated animate__fadeInUp"
controls
width="500"
height="300"
preload="auto"
data-setup='{"fluid": true}'>
<source src="bbb.mp4" type="application/x-mpegURL" />
</video>
<!--VideoJS configuration-->
<script src="https://vjs.zencdn.net/7.7.5/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-quality-levels@2.0.9/dist/videojs-contrib-quality-levels.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-hls-quality-selector@1.1.1/dist/videojs-hls-quality-selector.min.js"></script>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark">
<div class="row py-1">
<div class="col-6"><a href="https://www.linkedin.com/in/alvaro-de-la-rosa-mora-5ba9851b1/"><i class="fi-snsuxl-linkedin fi-2x"></i></a></div>
<div class="col-6"><a href="info.html"><i class="fi-ctluxl-question-mark fi-2x"></i></a></div>
</div>
<!-- Copyright -->
<div class="footer-copyright text-center py-1">© 2020 Copyright:
<p>Álvaro de la Rosa Mora</p>
<p><a href="tecnologias.html">Tecnologías empleadas</a></p>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<script src="dron.js"></script>
</body>
</html>