<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title id='docTitle'></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="shortcut icon" type="image/x-icon" href="favicon.png">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='settings.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<link rel="stylesheet" href="style.css">
<script src='initial_calcs.js'></script>
<script src='layers.js'></script>
<script src='stats.js'></script>
</head>
<body>
<div class='container-fluid'>
<div class='alt-grid row' style='height:100%'>
<div class='col-xs-3' id='sidebar'>
<div class='alt-grid row' id='info'>
#CompletetheMap<br>
<b id='challengeTitle'></b><br>
<button class='activeChallenge' id='challengeStatus'>Active</button><img src='img/clock.svg' style='margin-right:1vh;'/><span id='mindate'>Start Date</span> - <span id='maxdate'>End Date</span>
</div>
<div class='alt-grid row' id='links'>
<button class='howToJoin'><b>How to Join</b></button><button href='https://www.mapillary.com/app/task/1?menu=true' class='taskingManager'>Mapillary Tasker <b>»</b></button>
</div>
<div class='alt-grid row' id='measures'>
<div class='alt-grid row' id='stats'>
<div class='col-xs-3'>
<div class="pieContainer">
<div class="circle"><b style='font-size:18px;color:black;text-align:center;z-index:55;'><center><span id='ratioTotal'>0%</span><center></b></div>
<canvas id="can" width="50" height="50" />
</div>
</div>
<div class='col-xs-4'>
<b style='font-size:18px;color:black;float:right;margin-right:1vw;'><span id='userKMTotal'>0</span> / <span id='mapKMTotal'>0</span></b><br><br>
<span style='float:right;margin-right:1vw;'>Total km covered</span>
</div>
<div class='col-xs-4'>
<b style='font-size:18px;color:black;float:right;margin-right:1vw;'><span id='imagesTotal'>0</span></b><br><br>
<span style='float:right;margin-right:1vw;'>Images</span>
</div>
<div class='col-xs-1'>
</div>
</div>
<div class='alt-grid row' id='progress'>
<div id='timeSliderContainer'>
<label style='margin-top:1vh;'>
<b style='color:black;font-size:14px'>Time Slider</b><br>
<span id="challengeDays">0 days since task started</span><br>
</label>
<input id='timeSlider' type='range' min='0' max='1' step='1' value='0' style='margin-bottom:1vh;' />
</div>
</div>
</div>
<div class='alt-grid row' id='leaderboard'>
<div class='alt-grid row' id='leaderboardTitle'>
<b id=leaderboardText>Leaderboard</b>
</div>
<div class='alt-grid row' id='top3'>
<hr />
<div class='col-xs-1'>
</div>
<div class='col-xs-3'>
<div class='alt-grid row'>
<br>
<center>
<img src='img/Silver@2x.png' style='width:25px;height:25px' />
</center>
</div>
<center>
<div class='alt-grid row' id='2avatar'>
</div>
</center>
<div class='alt-grid row topuser'>
<span id='2user'><span>
</div>
<div class='alt-grid row topscore'>
<span id='2score'><span>
</div>
</div>
<div class='col-xs-4'>
<div class='alt-grid row'>
<center>
<img src='img/Gold@2x.png' style='width:25px;height:25px' />
</center>
</div>
<div class='alt-grid row'>
<center>
<div id='1avatar' class="topavatar" style='width:70px;height:70px;border-radius:50px;overflow:hidden;'></div>
</center>
</div>
<div class='alt-grid row topuser'>
<span id='1user'><span>
</div>
<div class='alt-grid row topscore'>
<span id='1score'><span>
</div>
</div>
<div class='col-xs-3'>
<div class='alt-grid row'>
<br>
<center>
<img src='img/Bronze@2x.png' style='width:25px;height:25px' />
</center>
</div>
<center>
<div class='alt-grid row' id='3avatar'>
</div>
</center>
<div class='alt-grid row topuser'>
<span id='3user'><span>
</div>
<div class='alt-grid row topscore'>
<span id='3score'><span>
</div>
</div>
<div class='col-xs-1'>
</div>
<hr />
</div>
<div class='alt-grid row' id='scoreTable'>
<table id='table'>
<div id='tHead'>
<tr>
<td class='thRank' style="text-align: left;">#</td><td class='thAvatar' style="text-align: left;"></td><td class='thUser'>Username</td><td class='thImages'>Images</td><td class='thKm'>Km</td>
</tr>
</div>
</table>
<table id='table'>
<div id='tBody'></div>
</table>
</div>
</div>
</div>
<div class='col-xs-9'>
<div id='legend'>
<div class='alt-grid row' id='legend-top'>
Coverage
</div>
<div class='alt-grid row' id='legend-middle'>
<div style='float:left'>Mapillary Coverage</div>
<div class="onoffswitch" style='float:right'>
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner" id="switch" onclick='mlyAdd()'></span>
<span class="onoffswitch-switch" onclick='mlyAdd()'></span>
</label>
</div><br><br>
<div style='float:left'>Task Grid</div>
<div class="onoffswitch" style='float:right'>
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
<label class="onoffswitch-label" for="myonoffswitch2">
<span class="onoffswitch-inner" id='switch2' onclick='gridAdd()'></span>
<span class="onoffswitch-switch" onclick='gridAdd()'></span>
</label>
</div>
</div>
<div class='alt-grid row' id='legend-bottom'>
<div class='alt-grid row'>
<b style='color:black;font-size:14px'>Progress</b><br><br>
</div>
<div class='alt-grid row' style='padding-left:20px;'>
<font style="size:12px;">
<div class='col-xs-2'><div class='dot' style="background:rgb(249,123,121)"></div> 20%</div><div class='col-xs-2'><div class='dot' style="background:rgb(252,187,124)"></div> 40%</div><div class='col-xs-2'><div class='dot' style="background:rgb(251,251,123)"></div> 60%</div><div class='col-xs-2'><div class='dot' style="background:rgb(185,216,121)"></div> 80% </div><div class='col-xs-2'><div class='dot' style="background:rgb(124,187,124)"></div> 100%</div>
</font>
</div>
<br>
</div>
</div>
<div id='map'>
<div id='layerSwitch'>
<img src='img/layer.svg' id='layerIcon'/>
</div>
<div class='layerBubble right' id='layermenu'>
<h4>Basemap:</h4>
<input id='mapillary/cjadrufne5ial2rnxgmitse0h' type='radio' name='rtoggle' value='scenic' checked='checked'>
<label for='scenic'>vector</label><br>
<input id='mapbox/satellite-streets-v9' type='radio' name='rtoggle' value='mapbox://styles/mapbox/satellite-v9'>
<label for='satellite'>satellite</label>
<div class="triangle"></div>
</div>
<script src='map.js'></script>
</div>
</div>
</div>
</div>
<div id='prog' class="prog">
<div class="progress active">
<div style="text-align:left;vertical-align:middle;padding-left:5px;text-shadow: 1px 1px 1px #000;" class="progress-bar progress-bar-mly progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<div class="modal"><!-- Place at bottom of page --></div>
</body>
</html>