199 lines
9.8 KiB
HTML
199 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Webpack</title>
|
|
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
|
|
crossorigin="anonymous">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="wrapper">
|
|
<!-- Sidebar -->
|
|
<nav id="sidebar">
|
|
|
|
<div class="sidebar-header">
|
|
<button type="button" id="sidebarCollapse" class="btn btn-info">
|
|
<i class="fas fa-align-justify"></i>
|
|
</button>
|
|
<h3 class="logotext">Microbot</h3>
|
|
<!-- <strong>MB</strong> -->
|
|
</div>
|
|
|
|
<ul class="list-unstyled components">
|
|
<li class="active">
|
|
<!-- data-toggle="collapse" -->
|
|
<a href="#homeSubmenu">
|
|
<i class="fas fa-home"></i>
|
|
<span class="hideable">Home</span>
|
|
</a>
|
|
<!-- <ul class="collapse list-unstyled" id="homeSubmenu">
|
|
<li>
|
|
<a href="#">Home 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Home 2</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Home 3</a>
|
|
</li>
|
|
</ul> -->
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fas fa-briefcase"></i>
|
|
<span class="hideable">About</span>
|
|
</a>
|
|
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
|
|
<i class="fas fa-copy"></i>
|
|
<span class="hideable">Tasks</span>
|
|
</a>
|
|
<ul class="collapse list-unstyled" id="pageSubmenu">
|
|
<li>
|
|
<a href="#">Repo</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Issues</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Admin</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fas fa-image"></i>
|
|
<span class="hideable">Favorites</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fas fa-question"></i>
|
|
<span class="hideable">FAQ</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fas fa-paper-plane"></i>
|
|
<span class="hideable">Contact</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- <ul class="list-unstyled CTAs">
|
|
<li>
|
|
<a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
|
|
</li>
|
|
</ul> -->
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<div id="content">
|
|
<div id="header" class="headerprompt">
|
|
<div class="prompt">
|
|
<p class="promptext">$_</p>
|
|
</div>
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<div class="container-fluid">
|
|
<form onsubmit="processRequest();" class="navbar-form" role="search">
|
|
<input type="text" class="form-control" placeholder="What you need..." name="command" id="command">
|
|
</form>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="nav navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
<i class="far fa-star"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
<i class="far fa-trash-alt"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
<i class="far fa-paper-plane"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div>
|
|
<h2>Placeholder header</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
|
|
anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
|
|
anim id est laborum.</p>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<h2>Lorem Ipsum Dolor</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
<div class="line"></div>
|
|
|
|
<h2>Lorem Ipsum Dolor</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
<div class="line"></div>
|
|
|
|
<h3>Lorem Ipsum Dolor</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- jQuery CDN - Slim version (=without AJAX) -->
|
|
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
|
|
<!-- Popper.JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
|
|
crossorigin="anonymous"></script>
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#sidebarCollapse').on('click', function () {
|
|
$('#sidebar').toggleClass('active');
|
|
$('.hideable').toggleClass('hide');
|
|
});
|
|
$('#content nav div.collapse li a.nav-link i.far.fa-star').hover(function () {
|
|
$('#content nav div.collapse li a.nav-link i.far.fa-star').toggleClass('fas');
|
|
});
|
|
$('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').hover(function () {
|
|
$('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').toggleClass('fas');
|
|
});
|
|
$('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').hover(function () {
|
|
$('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').toggleClass('fas');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |