You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/><script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script type="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"> </script><script src="jquery-csv.js"> </script> <meta charset="utf-8"> <title>Track your bike</title> </head> <body> <button onclick="showBike()"> Locate your Bike!</button> <button onclick="loadRoute()"> LoadRoute</button <ul> <li><div class="wrapper"> <div class="panel"> <div class="panel-header"> <h3 class="title">Statistics</h3>
<div class="routes"> <span>Last traveled route</span> </div> </div>
<div class="panel-body"> <div class="categories"> <div class="category"> <span>kilometers traveled</span> <span>2 Km</span> </div> <div class="category"> <span>traveled time</span> <span>2 min</span> </div> </div>
<div class="chart"> <div class="operating-systems"> </div> </div> </div> </div></div></li><li> <div class="container d-flex justify-content-center">
<ul class="list-group mt-5 text-white"> <li class="list-group-item d-flex justify-content-between align-content-center" onclick="displayRoute()">
<div class="d-flex flex-row"> <div class="ml-2"> <h4 class="mb-0">Last traveled Route</h4> <div class="about"> <span id="time">Jan 21, 2020</span> </div> </div> </div>
</li>
</ul> </div> </li> </ul>
<div id="map"></div>
<script type="text/javascript" src="lib/orbitdb.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/ipfs.js" charset="utf-8"></script>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="map.js"></script>
<script type="text/javascript" src="execution.js"></script> <script type="file" src="new.csv"></script> <script> //var currentime = getCurrentTime(); //document.write(getCurrentTime()) //document.getElementById("time").innerHTML = currentime </script> <script> //v//ar csv = './new.csv' // var data = $.csv.toObjects(csv); //console.log(data) //const res = d3.csvParse(csv); //console.log(res);</script>
</script> <style> #map { height: 600px; width: 600px; margin: auto }</style> <style> /** { box-sizing: border-box;} html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; font-family: 'Roboto', sans-serif; background: #d4d1d1; overflow: hidden;}
.panel { width: 300px; height: 400px; background: #e68a43; box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10); border-radius: 6px; overflow: hidden;}
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 0 30px; height: 60px; background: rgb(241, 239, 239);} .title { color: #5E6977; font-weight: 500;} .panel-body { display: flex; height: 340px;}.categories { display: flex; flex-direction: column; justify-content: space-between; flex-basis: 25%; padding: 39px 0px 41px 26px;}.category { display: flex; flex-direction: column;}.category span:first-child { font-weight: 300; font-size: 14px; opacity: 0.6; color: #fff; margin-bottom: 6px;}.category span:last-child { font-size: 32px; font-weight: 300; color: #fff;}.chart { width: 100%; height: 100%; display: flex; flex-direction: column; flex-grow: 2; position: relative;}
|
