2017-05-03 16:51:00 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
|
2017-05-08 16:18:42 +03:00
|
|
|
<title>Geolocated Audio Messages</title>
|
2017-05-03 16:51:00 +03:00
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
height: 100%;
|
2017-05-08 16:18:42 +03:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
2017-05-03 16:51:00 +03:00
|
|
|
}
|
2017-05-08 16:18:42 +03:00
|
|
|
body {
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont,
|
|
|
|
|
"Segoe UI", "Roboto", "Oxygen",
|
|
|
|
|
"Ubuntu", "Cantarell", "Fira Sans",
|
|
|
|
|
"Droid Sans", "Helvetica Neue", sans-serif;
|
|
|
|
|
}
|
|
|
|
|
#googlemap {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
z-index: -999; /* Set z-index to 0 as it will be on a layer below the contact form */
|
|
|
|
|
}
|
2017-05-03 16:51:00 +03:00
|
|
|
.container {
|
2017-05-08 16:18:42 +03:00
|
|
|
position: relative;
|
2017-05-03 16:51:00 +03:00
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding: 2rem;
|
|
|
|
|
}
|
2017-05-08 16:18:42 +03:00
|
|
|
.controls {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 2rem;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: rgba(255, 240, 245, 0.7);
|
|
|
|
|
z-index: 500;
|
|
|
|
|
}
|
2017-05-03 16:51:00 +03:00
|
|
|
.list {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.fileToUpload {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.btn {
|
2017-05-08 16:18:42 +03:00
|
|
|
height: 3.5rem;
|
|
|
|
|
width: 3.5rem;
|
2017-05-03 16:51:00 +03:00
|
|
|
background: red;
|
|
|
|
|
-webkit-border-radius: 50%;
|
|
|
|
|
-moz-border-radius: 50%;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
text-decoration: none;
|
2017-05-08 16:18:42 +03:00
|
|
|
border: 2px solid red;
|
2017-05-03 16:51:00 +03:00
|
|
|
}
|
|
|
|
|
.btn:hover {
|
2017-05-08 16:18:42 +03:00
|
|
|
border: 2px solid silver;
|
2017-05-03 16:51:00 +03:00
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
.preview {
|
2017-05-08 16:18:42 +03:00
|
|
|
position: relative;
|
2017-05-03 16:51:00 +03:00
|
|
|
margin: 1rem;
|
2017-05-08 16:18:42 +03:00
|
|
|
border: 2px solid silver;
|
|
|
|
|
width: 15rem;
|
|
|
|
|
height: 10rem;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.preview img {
|
|
|
|
|
}
|
|
|
|
|
.position {
|
|
|
|
|
height: 2.5rem;
|
|
|
|
|
color: #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
z-index: 200;
|
|
|
|
|
background-color: silver;
|
|
|
|
|
width: 100%;
|
|
|
|
|
/* text centering */
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
2017-05-03 16:51:00 +03:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2017-05-08 16:18:42 +03:00
|
|
|
<div id="googlemap">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="controls">
|
2017-05-03 16:51:00 +03:00
|
|
|
<label class="btn" for="fileToUpload"></label>
|
2017-05-08 16:18:42 +03:00
|
|
|
<input type="file" id="fileToUpload" class="fileToUpload" accept="video/*" capture="camera"/>
|
2017-05-03 16:51:00 +03:00
|
|
|
</div>
|
|
|
|
|
<div class="container list">
|
|
|
|
|
</div>
|
2017-05-08 16:18:42 +03:00
|
|
|
<script src="//maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyCKEbMb6o42xyt_bvQfeNEHDTj5TbEOf_8"></script>
|
2017-05-03 16:51:00 +03:00
|
|
|
<script src="app.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
