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>
<meta charset="utf-8"> <title>Track your bike</title> </head> <body> <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">
<div class="d-flex flex-row"> <div class="ml-2"> <h4 class="mb-0">Route 1</h4> <div class="about"> <span>Jan 21, 2020</span> </div> </div> </div>
</li>
<li class="list-group-item d-flex justify-content-between align-content-center">
<div class="d-flex flex-row"> <div class="ml-2"> <h4 class="mb-0">Route 2</h4> <div class="about"> <span>Jan 22, 2020</span> </div> </div> </div>
</li> </ul> </div>
<div id="map"></div><div class="wrapper"> <div class="panel"> <div class="panel-header"> <h3 class="title">Statistics</h3>
<div class="routes"> <span>Route X</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>
<script src="example.js"></script> <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 src="https://unpkg.com/ipfs@0.35.0/dist/index.min.js"></script> --><script src="https://www.unpkg.com/orbit-db/dist/orbitdb.min.js"></script><script> </script><script> //const initIPFS = async (IPFS, ORBITDB) => {
// Create IPFS instance // const ipfsOptions = { repo: '/orbitdb/examples/browser/new/ipfs/0.33.1', } //const ipfs = await Ipfs.create(ipfsOptions)
// Create OrbitDB instance //const orbitdb = await OrbitDB.createInstance(ipfs)
//}//initIPFS() // async function createDb(){ // Create database instance
// Create IPFS instance //const ipfsOptions = { repo: '/orbitdb/examples/browser/new/ipfs/0.33.1.2', } //const ipfs = await Ipfs.create(ipfsOptions) //const orbitdb = await OrbitDB.createInstance(ipfs) //const db = await orbitdb.keyvalue('first-database') // const address = db.address // console.log(address) //console.log(db.address.toString()) //await db.put('timestamp', '4.9123123/-8.1231') //const value = db.get('timestamp') //console.log(value) //}initIPFS()//createDb()var map = L.map('map').setView([49.416075235, 8.6722049], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { zoom: 44, attribution: '© OpenStreetMap'}).addTo(map);</script>
<script type="text/javascript" charset="utf-8"> // Start the example //main() </script> <style> #map { height: 800px; width: 1400px; }</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;} .operating-systems { display: flex; justify-content: space-between; width: 215px; margin-top: 30px; margin-bottom: 50px;}
.android-os span { background: #80B354;}.ios-os span { background: #F5A623;}.windows-os span { background: #F8E71C;}.calendar-views span:hover { border: 2px solid #BDC6CF; cursor: pointer; border-radius: 15px;}
</style><style>body{ background: #e68a43;}ul{ list-style-type: none;}
.list-group{ width: 250px !important;
}
.list-group-item{ margin-top:16px; border-radius: none; background: #e68a43; cursor: pointer; transition: all 0.3s ease-in-out;}
.list-group-item:hover{ transform: scaleX(1.1);}
.check{ opacity: 0; transition: all 0.6s ease-in-out;}
.list-group-item:hover .check { opacity: 1;
}
.about span{ font-size: 16px; margin-right: 10px;
}
</style> </body></html>
|
