Daylight Map
<!DOCTYPE html>
<html>
<head>
<title>Daylight Map</title>
</head>
<body>
<h1>Daylight Map</h1>
<div class="container">
<svg id="daylight-map"></svg>
<div class="controls">
<div class="curr-time">
<a class="js-skip" data-skip="-60" href="#">‹</a>
<span class="js-time" id="clock"></span>
<a class="js-skip" data-skip="60" href="#">›</a>
</div>
<div class="clear"></div>
<div class="curr-date">
<a class="js-skip big-jump" data-skip="-43200" href="#">«</a>
<a class="js-skip" data-skip="-1440" href="#">‹</a>
<span class="js-time"></span>
<a class="js-skip" data-skip="1440" href="#">›</a>
<a class="js-skip big-jump" data-skip="43200" href="#">»</a>
</div>
<span class="animate"><a href="#" class="js-animate">Start/Pause</a></span>
<div class="clear"></div>
</div>
</div>
</div>
<script src="https://sabalico.dev/jquery.js"></script>
<script src="https://world-map.org/cartography/scripts/d3.js"></script>
<script src="https://world-map.org/cartography/scripts/d3-topojson.js"></script>
<script src="https://sabalico.dev/scripts/suncalc.js"></script>
<script src="https://sabalico.dev/scripts/moment.js"></script>
<script src="https://sabalico.dev/scripts/clock-time.js"></script>
<script src="https://world-map.org/cartography/plugins/daylight.js"></script>
</body>
</html>
