Skip to content

Instantly share code, notes, and snippets.

@mensoh

mensoh/gist:2d1d78f7fddb4ef5b8ab618306c98693 Secret

Created April 24, 2019 08:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mensoh/2d1d78f7fddb4ef5b8ab618306c98693 to your computer and use it in GitHub Desktop.
Save mensoh/2d1d78f7fddb4ef5b8ab618306c98693 to your computer and use it in GitHub Desktop.
Download ZIP
mdbadmin issue
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="../../css/mdb.min.css">
<!-- Your custom styles (optional) -->
<style>
.tab-content > .tab-pane:not(.active) { display: block; height: 0; overflow-y: hidden; }
</style>
</head>
<body class="fixed-sn light-blue-skin">
<!-- Main Navigation -->
<header>
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-1 fixed">
<ul class="custom-scrollbar">
<!-- Logo -->
<li class="logo-sn waves-effect py-3">
<div class="text-center">
<a href="#" class="pl-0"><img src="../../img/foobar.png"></a>
</div>
</li>
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<!-- Simple link -->
<li>
<a href="dashboard.html" class="collapsible-header waves-effect"><i
class="w-fa fas fa-tachometer-alt"></i>Dashboard</a>
</li>
<li>
<a href="users.html" class="collapsible-header waves-effect"><i class="fas fa-user-alt"></i>Users</a>
</li>
<li>
<a href="groups.html" class="collapsible-header waves-effect"><i
class="w-fa fas fa-users"></i>Groups</a>
</li>
<li>
<a href="servers.html" class="collapsible-header waves-effect"><i class="fas fa-server"></i>Servers</a>
</li>
<li>
<a href="settings.html" class="collapsible-header waves-effect"><i
class="w-fa fas fa-tools"></i>Settings</a>
</li>
</ul>
</li>
<!-- Side navigation links -->
</ul>
<div class="sidenav-bg mask-strong"></div>
</div>
<!-- Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>
</div>
<!-- Breadcrumb -->
<div class="breadcrumb-dn mr-auto">
<p>Foobar for Business</p>
</div>
<div class="d-flex change-mode">
<!-- Navbar links -->
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<!-- Dropdown -->
<li class="nav-item">
<a class="nav-link waves-effect"><i class="far fa-comments"></i> <span
class="clearfix d-none d-sm-inline-block">Support</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">Log Out</a>
<a class="dropdown-item" href="#">My account</a>
</div>
</li>
</ul>
<!-- Navbar links -->
</div>
</nav>
<!-- Navbar -->
</header>
<!-- Main Navigation -->
<!-- Main layout -->
<main>
<div class="container-fluid">
<!-- Section: Customers -->
<section class="section team-section">
<!-- First row -->
<div class="row">
<!-- First column -->
<div class="col-md-12">
<div class="row mb-1">
<div class="col-md-3">
<div class="md-form">
<input placeholder="Search..." type="text" id="form5" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mb-1">
<!-- Tabs -->
<div class="classic-tabs">
<!-- Nav tabs -->
<div class="tabs-wrapper">
<ul class="nav tabs-primary primary-color" role="tablist">
<li class="nav-item">
<a class="nav-link waves-light active" data-toggle="tab" href="#panel83" role="tab">Your Foobar users
</a>
</li>
</ul>
</div>
<!-- Tab panels -->
<div class="tab-content card">
<!-- Panel 1 -->
<div class="tab-pane fade show active" id="panel83" role="tabpanel">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activation Code</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Abby" data-last-name="Barrett" data-uuid="c107-452e-abe8-32bdd" data-email="a.barrett@foobar.co">Abby</a></td>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Abby" data-last-name="Barrett" data-uuid="c107-452e-abe8-32bdd" data-email="a.barrett@foobar.co">Barrett</a></td>
<td>c107-452e-abe8-32bdd</td>
<td>
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fas fa-times"></i></a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Danny" data-last-name="Collins" data-uuid="ed1a-4a03-bf8b-1e39" data-email="d.collins@foobar.co">Danny</a></td>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Danny" data-last-name="Collins" data-uuid="ed1a-4a03-bf8b-1e39" data-email="d.collins@foobar.co">Collins</a></td>
<td>ed1a-4a03-bf8b-1e39</td>
<td>
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fas fa-times"></i></a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Clara" data-last-name="Ericson" data-uuid="64be-4c02-a361-955ec" data-email="c.ericson@foobar.co">Clara</a></td>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Clara" data-last-name="Ericson" data-uuid="64be-4c02-a361-955ec" data-email="c.ericson@foobar.co">Ericson</a></td>
<td>64be-4c02-a361-955ec</td>
<td>
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fas fa-times"></i></a>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Jessie" data-last-name="Doe" data-uuid="3e02-40b6-b176-a482" data-email="j.doe@foobar.co">Jessie</a></td>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Jessie" data-last-name="Doe" data-uuid="3e02-40b6-b176-a482" data-email="j.doe@foobar.co">Doe</a></td>
<td>3e02-40b6-b176-a482</td>
<td>
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fas fa-times"></i></a>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Saul" data-last-name="Hudson" data-uuid="3e02-40b6-b176-a482" data-email="s.hudson@foobar.co">Saul</a></td>
<td><a href="#" data-toggle="modal" data-target="#user-info" data-first-name="Saul" data-last-name="Hudson" data-uuid="3e02-40b6-b176-a482" data-email="s.hudson@foobar.co">Hudson</a></td>
<td>121c-4c7b-856e-8887</td>
<td>
<a class="teal-text" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="red-text" data-toggle="tooltip" data-placement="top" title="Remove"><i class="fas fa-times"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br/>
<button class="btn btn-secondary btn-rounded waves-effect waves-light"><i class="fas fa-user-plus"></i> New user</button><br/>
</div>
</div>
</div>
</div>
<!-- First column -->
</div>
<!-- First row -->
</section>
<!-- Section: Customers -->
</div>
</main>
<!-- Main layout -->
<div class="modal fade" tabindex="-1" role="dialog" id="user-info">
<div class="modal-dialog cascading-modal modal-lg" role="document">
<!-- Content -->
<div class="modal-content">
<!-- Modal cascading tabs -->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav md-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel1" role="tab"><i class="fas fa-tools"></i>
Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel2" role="tab"><i class="fas fa-chart-area"></i>
Statistics</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!-- Panel 1 -->
<div class="tab-pane fade in show active" id="panel1" role="tabpanel">
<!-- Body -->
<div class="modal-body mb-1">
<div class="md-form form-inline">
<table class="table table-borderless">
<tbody>
<tr>
<td style="width: 25%" class="align-middle">First name:</td>
<td class="align-bottom"><input type="text" class="form-control" form="usersettings" name="firstname" id="firstname" value=""></td>
</tr>
<tr>
<td style="width: 25%" class="align-middle">Last name:</td>
<td class="align-bottom"><input type="text" class="form-control" form="usersettings" name="lastname" id="lastname" value=""></td>
</tr>
<tr>
<td style="width: 25%" class="align-middle">E-mail address: </td>
<td class="align-bottom"><input type="text" class="form-control" form="usersettings" name="email" id="email" value=""></td>
</tr>
<tr>
<td style="width: 25%" class="align-middle">Activation code:</td>
<td class="align-bottom"><span class="activation-code"></span></td>
</tr>
</tbody>
</table>
</div>
<!-- Footer -->
<div class="modal-footer display-footer">
<button type="button" class="btn btn-secondary btn-rounded waves-effect waves-light">Save Changes</button>
<button type="button" class="btn btn-danger btn-rounded waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- Panel 1 -->
<!--Panel 2-->
<div class="tab-pane fade" id="panel2" role="tabpanel">
<!-- Body -->
<div class="modal-body">
<div class="view view-cascade gradient-card-header blue-gradient">
<div class="tab-content pt-5" id="graphTabs">
<div class="tab-pane fade active show" id="blocked-sites" role="tabpanel" aria-labelledby="blocked-sites-tab">
<canvas id="blockedChart" height="175"></canvas>
</div>
<div class="tab-pane fade" id="traffic" role="tabpanel" aria-labelledby="traffic-tab">
<canvas id="trafficChart" height="175"></canvas>
</div>
<div class="tab-pane fade" id="map" role="tabpanel" aria-labelledby="map-tab">
<div class="container-fluid">
<div id="world-map" style="width:100%;height:395px;"></div>
</div>
</div>
</div>
</div>
<div>
<ul class="nav nav-tabs md-tabs" id="myBlockedSites" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="blocked-sites-tab" data-toggle="tab" href="#blocked-sites" role="tab" aria-controls="blocked-sites" aria-selected="true">Blocked Sites</a>
</li>
<li class="nav-item">
<a class="nav-link" id="traffic-tab" data-toggle="tab" href="#traffic" role="tab" aria-controls="traffic" aria-selected="false">Traffic</a>
</li>
<li class="nav-item">
<a class="nav-link" id="map-tab" data-toggle="tab" href="#map" role="tab" aria-controls="map" aria-selected="false">foobars around the globe</a>
</li>
</ul>
</div>
</div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-rounded waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Panel 2 -->
</div>
</div>
</div>
</div>
<!-- Content -->
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script src="../../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- Initializations -->
<script>
// SideNav Initialization
$(".button-collapse").sideNav();
var container = document.querySelector('.custom-scrollbar');
Ps.initialize(container, {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
// Data Picker Initialization
$('.datepicker').pickadate();
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
// Tooltips Initialization
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- Charts -->
<script>
// Small chart
$(function () {
$('.min-chart#chart-sales').easyPieChart({
barColor: "#FF5252",
onStep: function (from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
});
// Main chart
var ctxL = document.getElementById("blockedChart").getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "Blocked Sites",
fillColor: "#fff",
backgroundColor: 'rgba(255, 255, 255, .3)',
borderColor: 'rgba(255, 255, 255)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
options: {
legend: {
labels: {
fontColor: "#fff",
}
},
scales: {
xAxes: [{
gridLines: {
display: true,
color: "rgba(255,255,255,.25)"
},
ticks: {
fontColor: "#fff",
},
}],
yAxes: [{
display: true,
gridLines: {
display: true,
color: "rgba(255,255,255,.25)"
},
ticks: {
fontColor: "#fff",
},
}],
}
}
});
// Main chart
var ctxL = document.getElementById("trafficChart").getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "Traffic",
fillColor: "#fff",
backgroundColor: 'rgba(255, 255, 255, .3)',
borderColor: 'rgba(255, 255, 255)',
data: [21, 25, 19, 32, 35, 37, 32],
}]
},
options: {
legend: {
labels: {
fontColor: "#fff",
}
},
scales: {
xAxes: [{
gridLines: {
display: true,
color: "rgba(255,255,255,.25)"
},
ticks: {
fontColor: "#fff",
},
}],
yAxes: [{
display: true,
gridLines: {
display: true,
color: "rgba(255,255,255,.25)"
},
ticks: {
fontColor: "#fff",
},
}],
}
}
});
</script>
<script>
$(function () {
$('#dark-mode').on('click', function (e) {
e.preventDefault();
$('h4, button').not('.check').toggleClass('dark-grey-text text-white');
$('.list-panel a').toggleClass('dark-grey-text');
$('footer, .card').toggleClass('dark-card-admin');
$('body, .navbar').toggleClass('white-skin navy-blue-skin');
$(this).toggleClass('white text-dark btn-outline-black');
$('body').toggleClass('dark-bg-admin');
$('h6, .card, p, td, th, i, li a, h4, input, label').not(
'#slide-out i, #slide-out a, .dropdown-item i, .dropdown-item').toggleClass('text-white');
$('.btn-dash').toggleClass('grey blue').toggleClass('lighten-3 darken-3');
$('.gradient-card-header').toggleClass('white black lighten-4');
$('.list-panel a').toggleClass('navy-blue-bg-a text-white').toggleClass('list-group-border');
});
});
/* Hide some tabs when page loads */
$('#globe-ex').tab('hide')
$('#traffic-ex').tab('hide')
$('#user-info').on('show.bs.modal', function (event) {
var link = $(event.relatedTarget) // Button that triggered the modal
var first_name = link.data('first-name')
var last_name = link.data('last-name')
var uid = link.data('uuid')
var email = link.data('email')
var modal = $(this)
modal.find('.activation-code').text(uid)
$('#firstname').val(first_name);
$('#lastname').val(last_name);
$('#email').val(email);
})
</script>
<!-- JVectorMap -->
<link rel="stylesheet" href="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.css" type="text/css" media="screen" />
<script src="../../js/vendor/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
<script src="../../js/vendor/jvectormap/jquery-jvectormap-world-mill.js"></script>
<script>
// World map
$('#world-map').vectorMap({
series: {
regions: [{
values: {
IN:'#9ccbeb',
PL:'#9ccbeb',
RU:'#9ccbeb',
CN:'#9ccbeb',
FR:'#9ccbeb',
NG:'#9ccbeb',
US:'#9ccbeb'
}
}]
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment