Skip to content

Instantly share code, notes, and snippets.

@remmi11

remmi11/index.html

Created January 10, 2018 05:29
Show Gist options
  • Save remmi11/8614ae08ad57a71af20f912e2d906f88 to your computer and use it in GitHub Desktop.
Save remmi11/8614ae08ad57a71af20f912e2d906f88 to your computer and use it in GitHub Desktop.
Download ZIP
Coonected2Fiber Demo
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Enterprise Profiler</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
bottom: 0px;
top: 110px;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
<script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Connected2Fiber
<!-- <img src="img/logo-white.png" /> -->
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-sign-in" aria-hidden="true"></i>
Login
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
<a href="#" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse.in" id="menu-toggle">
<i class="fa fa-bars fa-2x"></i>
</a>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</nav>
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<div class="container-fluid">
</div>
</div>
</div>
<div id='map'></div>
<!-- <div class="container-fluid">
<div id="page-content-wrapper">
</div>
</div> -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<script src="js/script.js"> </script>
<script>
// Navbar Menu
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
//rotate navbar hamburger icon
// $(".navbar-toggle").on("click", function () {
// $(this).toggleClass("rotate");
// });
</script>
</body>
</html>
Raw
script.js
L.mapbox.accessToken = 'pk.eyJ1Ijoid3RnZW9ncmFwaGVyIiwiYSI6ImNpdGFicWJqYjAwdzUydHM2M2g0MmhsYXAifQ.oO-MYNUC2tVeXa1xYbCIyw';
var map = L.map("map", {
zoom: 10,
center: [40.702222, -73.979378],
zoomControl: false,
attributionControl: false
});
L.control.layers({
'Mapbox Streets': L.mapbox.tileLayer('mapbox.streets').addTo(map),
'Mapbox Satellite': L.mapbox.tileLayer('mapbox.satellite')
}).addTo(map);
Raw
style.css
.bg-inverse {
background-color: #0067c5 !important;
}
.rotate {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
.navbar-form {
padding-left: 15px;
}
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
/* .sidebar-wrapper {
width: 100%;
height: 100%;
position: relative;
} */
#sidebar-wrapper {
margin-top: 0px;
padding-top: 50px;
width: 250px;
height: 100%;
max-width: 100%;
float: left;
z-index: 1000;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: gray;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
height: 100%;
position: fixed;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment