<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<!-- I AM THE MAIN CONTAINER -->
<div class="container-fluid shadow-sm" id="global-top-nav">
<!-- I AM THE SECOND MAIN CONTAINER -->
<div class="container">
<!-- I AM THE TOP NAV-BAR -->
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand font-weight-light mx-4" href="index_controller/dashboard"> ADMIN</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<!--<li class="nav-item">
<a class="nav-link disabled" href="users.html">USERS</a>
</li> -->
</ul>
welcome
<span class="navbar-text mx-3">
username
</span>
<span class="navbar-text">
<button type="button" class="btn btn-outline-light btn-sm" onclick="logout" data-toggle="tooltip" data-placement="top" title="LOGOUT"><i class="fas fa-power-off fa-lg" style="color:red;"></i>
</button>
</span>
</div>
</nav>
</div>
</div>
<!-- END OF TOP NAV CONTENTS-->
<!-- I AM THE BOTTOM STICKY NAV BAR THAT CONTAINS AUTO TIME CLOCK -->
<div class="container-fluid " id="global-top-nav">
<div class="container">
<div class="d-none d-lg-block col-lg-12 col-xl-12">
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<span class="navbar-text">
<span id="date_time"></span>
<script type="text/javascript">
window.onload = date_time('date_time');
</script>
</span>
<ul class="navbar-nav">
<button type="button" class="btn btn-light mx-2 text-info" disabled>
USERS <span class="badge badge-light">0</span>
</button>
<button type="button" class="btn btn-light mx-2 text-info" disabled>
DISABLED <span class="badge badge-light">0</span>
</button>
<button type="button" class="btn btn-light mx-2 text-info" disabled>
LOGIN-ATTEMPTS <span class="badge badge-light">0</span>
</button>
</ul>
</div>
<span class="navbar-text">
<button type="button" class="btn btn-outline-primary btn-sm" onclick="toggleFullScreen()"><i class="fas fa-expand-arrows-alt"></i></button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="refresh()"><i class="fas fa-sync"></i></button>
</span>
</nav>
</div>
</div>
</div>
<!-- IM THE ONE WHO RESPOSIVE OF BODY CONTENTS -->
<div class="container-fluid">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-6">
<h4>LEFT CONTINER</h4>
</div>
<div class="col-lg-6">
<h4>RIGHT CONTINER</h4>
</div>
</div>
</div>
</div>
<!--------I HOLD THE HIDDEN SIDE NAV------->
<div id="global-side-nav" class="sidenav">
<div class="container">
<div class="row">
<div class="col-lg-12 py-5" style="background-color:white;">
<div class="card border-0 shadow-none p-3 rounded-0 my-2" id="global-cards" style="max-width:auto;">
<div class="card-header bg-white border-0">
<h1 class="h3 mb-3 font-weight-light text-center text py-3" id="land-title">ADMIN</h1>
</div>
</div>
<ul class="list-group list-group-flush">
<a href="<?php echo base_url(); ?>Form/add_user_linker" class="list-group-item list-group-item-action ">
ADD USERS
</a>
<a href="<?php echo base_url(); ?>Form/disabled_accounts_linker" class="list-group-item list-group-item-action ">
DISABLE ACCOUNTS
</a>
<a href="<?php echo base_url(); ?>Form/log_stamp_linker" class="list-group-item list-group-item-action ">
LOG STAMP
</a>
<a href="<?php echo base_url(); ?>Form/notification_linker" class="list-group-item list-group-item-action ">
NOTIFICAITONS
</a>
<a href="<?php echo base_url(); ?>Form/loggin_attempts_linker" class="list-group-item list-group-item-action ">
LOGIN ATTEMPTS
</a>
<a href="home.php" class="list-group-item list-group-item-action " data-toggle="modal" data-target="#IPBLOCKING">DISABLE USER</a>
</ul>
<hr class="colorgraph my-5 mb-5">
</div>
</div>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">≡</a>
</div>
</div>
/* global side Side Left navigation Hide/Show Navbar*/
/*side nav code*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:#fff;
overflow-x: scroll;
transition: 0.8s;
}
.sidenav a {
text-decoration: none;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color:#007bff;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 35px;
font-size: 4rem;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Column Gutter Remover*/
.row.no-gutters {
margin-right:0;
margin-left:0;
& > [class^="col-"],
& > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
}
// I AM THE SIDENAV BAR JAVA CODE
function openNav() {
document.getElementById("global-side-nav").style.width = "25%";
}
function closeNav() {
document.getElementById("global-side-nav").style.width = "0%";
}
// I AM THE CLOCK IN THE BOTTOM NAVBAR
function date_time(id)
{
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = ''+days[day]+' '+months[month]+' '+d+' '+year+' '+h+':'+m+':'+s;
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
// THIS IS THE TOOLTIP KILLER
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// THIS IS THE JAVA FOR FULLSIZE SCREEN BUTTON
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
// I AM THE RFRESH CODE
function refresh() {
location.reload();
}
