gadmin
Version:
Free Bootstrap 4 Gentelella inspired admin template
764 lines (726 loc) • 29.4 kB
HTML
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.6.3/css/all.min.css"
/>
<link rel="stylesheet" href="/assets/css/bootstrap.css" />
<link rel="stylesheet" href="/assets/css/theme.css" />
<link rel="stylesheet" href="/assets/css/excludable.css" />
<title>GAdmin</title>
</head>
<body>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css"
/>
<div class="g-navigation">
<header class="g-header">
<a
class="g-header__title d-flex align-items-center justify-content-center"
href="/index.html"
>
<i class="far fa-clone"></i>
<span class="g-header__site-name">
G<span class="e-site-emphasize">Admin</span>
</span>
</a>
<div class="d-flex justify-content-between">
<div class="d-flex align-items-center">
<a class="g-header__sidebar-toggle" href="javascript:void(0)">
<i class="fas fa-bars"></i>
</a>
</div>
<ul class="nav d-flex align-items-center">
<li class="g-header__nav-item dropdown">
<a
class="g-header__nav-link nav-link dropdown-toggle d-flex active align-items-center"
href="#"
>
<img
class="g-header__profile-photo rounded-circle"
src="https://avatars3.githubusercontent.com/u/1621344?s=460&v=4"
/>
Christian
</a>
</li>
<li class="g-header__nav-item dropdown">
<a
class="g-header__nav-link nav-link dropdown-toggle d-flex active align-items-center"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
<i class="g-header__icon far fa-envelope">
<span class="g-header__alert badge-success badge-pill">6</span>
</i>
</a>
<div
class="g-notification g-notification--messages dropdown-menu dropdown-menu-right"
>
<div class="g-notification__items">
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/men/27.jpg"
/>
<span class="g-notification__title">John Doe</span>
<span class="g-notification__message">Hey there!</span>
<span class="g-notification__time">10 mins ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/women/68.jpg"
/>
<span class="g-notification__title">Jane Doe</span>
<span class="g-notification__message">Thanks for using this theme!</span>
<span class="g-notification__time">1 hour ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/men/60.jpg"
/>
<span class="g-notification__title">Richard Roe</span>
<span class="g-notification__message">Cheers!</span>
<span class="g-notification__time">1 day ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/men/27.jpg"
/>
<span class="g-notification__title">John Doe</span>
<span class="g-notification__message">Hey there!</span>
<span class="g-notification__time">15 days ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/women/68.jpg"
/>
<span class="g-notification__title">Jane Doe</span>
<span class="g-notification__message">Thanks for using this theme!</span>
<span class="g-notification__time">1 month ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/men/60.jpg"
/>
<span class="g-notification__title">Richard Roe</span>
<span class="g-notification__message">Cheers!</span>
<span class="g-notification__time">1 year ago</span>
</div>
</a>
</div>
<a
class="g-notification__item g-notification__item--toolbar dropdown-item text-center"
href="#"
>
Show older messages
</a>
</div>
</li>
<li class="g-header__nav-item dropdown">
<a
class="g-header__nav-link nav-link dropdown-toggle d-flex active align-items-center"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
<i class="g-header__icon g-header__icon--caret fas fa-caret-down"></i>
</a>
<div class="g-notification dropdown-menu dropdown-menu-right">
<a class="g-notification__item dropdown-item" href="#">Help</a>
<a class="g-notification__item dropdown-item" href="#">Activity Log</a>
<a class="g-notification__item dropdown-item" href="#">Preferences</a>
<a class="g-notification__item dropdown-item" href="#">
Settings
<span class="badge badge-pill badge-danger float-right">50%</span>
</a>
<div class="g-notification__divider dropdown-divider"></div>
<a class="g-notification__item dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</header>
<nav class="g-sidebar">
<div class="g-sidebar__profile container d-flex active align-items-center">
<img
class="g-sidebar__profile-photo rounded-circle img-fluid"
src="https://avatars3.githubusercontent.com/u/1621344?s=460&v=4"
/>
<div class="g-sidebar__details">
<span class="g-sidebar__profile-message">Welcome,</span>
<span class="g-sidebar__profile-name">Christian Esperar</span>
</div>
</div>
<div class="g-sidebar__menu">
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/index.html">
<i class="g-sidebar__menu-icon fas fa-home"></i>
<span class="g-sidebar__menu-description">Dashboard</span>
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/bootstrap-4-components">
<i class="g-sidebar__menu-icon fas e-bootstrap-logo-b">
B <span class="e-bootstrap-logo-4">4</span>
</i>
<span class="g-sidebar__menu-description">Components</span>
</a>
</li>
</ul>
<span class="g-sidebar__menu-title">Examples</span>
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link">
<i class="g-sidebar__menu-icon far fa-window-restore"></i>
<span class="g-sidebar__menu-description">Layout</span>
</a>
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/layout-fixed-navigation.html">
Fixed navigation
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/layout-fixed-footer.html">
Fixed footer
</a>
</li>
</ul>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link">
<i class="g-sidebar__menu-icon fas fa-file"></i>
<span class="g-sidebar__menu-description">Pages</span>
</a>
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/pages-blank.html">
Blank
</a>
</li>
</ul>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link">
<i class="g-sidebar__menu-icon fas fa-list-ul"></i>
<span class="g-sidebar__menu-description">Multilevel Menu</span>
</a>
<!-- First Level Menu -->
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level One
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level One
</a>
<!-- Second Level Menu -->
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level Two
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level Two
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level Two
</a>
</li>
</ul>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level One
</a>
</li>
</ul>
</li>
</ul>
</div>
<ul class="g-sidebar__footer">
<li class="g-sidebar__footer-list">
<a
class="g-sidebar__footer-link"
href="javascript:void(0)"
data-toggle="tooltip"
data-placement="top"
title="Settings"
>
<i class="fas fa-cog"></i>
</a>
</li>
<li class="g-sidebar__footer-list">
<a
class="g-sidebar__footer-link"
href="javascript:void(0)"
data-toggle="tooltip"
data-placement="top"
title="Fullscreen"
>
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="g-sidebar__footer-list">
<a
class="g-sidebar__footer-link"
href="javascript:void(0)"
data-toggle="tooltip"
data-placement="top"
title="Lock"
>
<i class="far fa-eye-slash"></i>
</a>
</li>
<li class="g-sidebar__footer-list">
<a
class="g-sidebar__footer-link"
href="javascript:void(0)"
data-toggle="tooltip"
data-placement="top"
title="Logout"
>
<i class="fas fa-power-off"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="g-container">
<main class="g-main container-fluid">
<div class="row">
<div class="col-6 col-lg-3">
<div class="g-status-box">
<i class="g-status-box__icon fas fa-dollar-sign"></i>
<div class="g-status-box__content">
<div class="g-status-box__header">
<span class="g-status-box__label">Sales</span>
</div>
<div class="g-status-box__body">
<span class="g-status-box__value">1234.50</span>
</div>
<div class="g-status-box__footer">
<span class="g-status-box__change g-status-box__change--up">
<i class="fas fa-caret-up"></i> 5%
</span>
from last week
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="g-status-box">
<i class="g-status-box__icon fas fa-inbox"></i>
<div class="g-status-box__content">
<div class="g-status-box__header">
<span class="g-status-box__label">Orders</span>
</div>
<div class="g-status-box__body">
<span class="g-status-box__value">67</span>
</div>
<div class="g-status-box__footer">
<span class="g-status-box__change g-status-box__change--down">
<i class="fas fa-caret-down"></i> 1%
</span>
from last week
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="g-status-box">
<div class="g-status-box__content">
<div class="g-status-box__header">
<span class="g-status-box__label">Sessions</span>
<select class="g-status-box__select custom-select custom-select-sm float-right">
<option>30 Days</option>
<option>15 Days</option>
<option>7 Days</option>
</select>
</div>
<div class="g-status-box__body">
<span class="g-status-box__value">8910</span>
</div>
</div>
<canvas id="session-chart" class="g-status-box__graph" height="50px"></canvas>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="g-status-box">
<div class="g-status-box__content">
<div class="g-status-box__header">
<span class="g-status-box__label">Inquiries</span>
<span class="float-right">(11 Total)</span>
</div>
<div class="g-status-box__body">
<span class="g-list">
<i class="g-list__bullet text-success"></i> Verified (9 - 82%)
</span>
<span class="g-list">
<i class="g-list__bullet text-warning"></i> Spam (2 - 18%)
</span>
</div>
<div class="g-status-box__donut">
<canvas id="inquiries-chart" height="60px" width="60px"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-8">
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title">Visitors Report</h2>
</div>
<div class="g-section__content">
<div class="row">
<div class="col-12 col-lg-7">
<h3 class="text-center">Location</h3>
<div
id="location-map"
class="jvectormap--zoom-bottom"
style="height: 200px;"
></div>
<div class="row">
<div class="col-5 d-flex align-items-center">
<div class="w-100 text-center">
<div>
<strong><big>32.6k</big></strong> views
</div>
<div>
<strong><big>12</big></strong> countries
</div>
</div>
</div>
<div class="col-7">
<table class="table table-sm table-borderless">
<tbody>
<tr>
<td>United States</td>
<td>33%</td>
</tr>
<tr>
<td>France</td>
<td>27%</td>
</tr>
<tr>
<td>Germany</td>
<td>16%</td>
</tr>
<tr>
<td>Spain</td>
<td>11%</td>
</tr>
<tr>
<td>Britain</td>
<td>10%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-12 col-lg-5">
<h3 class="text-center">Device Usage</h3>
<div class="row">
<div class="col-6 col-lg-12 d-flex align-items-center">
<canvas id="device-chart" height="160px"></canvas>
</div>
<div class="col-6 col-lg-12">
<table class="table table-sm table-borderless">
<tbody>
<tr>
<td>
<span class="g-list">
<i class="g-list__bullet text-primary"></i>
Desktop
</span>
</td>
<td>28%</td>
</tr>
<tr>
<td>
<span class="g-list">
<i class="g-list__bullet text-success"></i>
Laptop
</span>
</td>
<td>23%</td>
</tr>
<tr>
<td>
<span class="g-list">
<i class="g-list__bullet text-danger"></i>
Smartphone
</span>
</td>
<td>27%</td>
</tr>
<tr>
<td>
<span class="g-list">
<i class="g-list__bullet text-warning"></i>
Tablet
</span>
</td>
<td>19%</td>
</tr>
<tr>
<td>
<span class="g-list">
<i class="g-list__bullet text-dark"></i>
Other
</span>
</td>
<td>3%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="col-12 col-lg-4">
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title">Activity</h2>
</div>
<div class="g-activity">
<div class="g-activity__item">
<a href="#"><strong>Lisy Huang</strong></a> created a new article:
<a
href="https://disure.co/blogs/news/4-hard-things-i-learned-after-the-first-2-weeks-of-entrepreneurship"
target="_blank"
><strong
>4 Hard Things I Learned After the First 2 Weeks of Entrepreneurship</strong
></a
>.
<div class="g-activity__time">10 mins ago</div>
</div>
<div class="g-activity__item">
<a href="#"><strong>Lisy Huang</strong></a> created a new product:
<strong
><a
href="https://disure.co/products/rest-apig-rest-a-pig-3-styles"
target="_blank"
>REST APIG/Rest a Pig T-Shirt</a
></strong
>.
<div class="g-activity__time">1 hour ago</div>
</div>
<div class="g-activity__item">
<a href="#"><strong>Lisy Huang</strong></a> created a new collection:
<strong
><a href="https://disure.co/collections/boba-tea" target="_blank"
>Boba Tea Lover</a
></strong
>.
<div class="g-activity__time">1 day ago</div>
</div>
<div class="g-activity__item">
<a href="#"><strong>Christian Esperar</strong></a> created a new article:
<a
href="https://disure.co/blogs/news/4-personality-traits-of-boba-tea-bubble-tea-lovers"
target="_blank"
><strong>4 Personality Traits of Boba Tea (Bubble Tea) Lovers</strong></a
>.
<div class="g-activity__time">15 days ago</div>
</div>
<div class="g-activity__item">
<a href="#"><strong>Lisy Huang</strong></a> created a new product:
<strong
><a
href="https://disure.co/products/be-a-catnicorn-t-shirt-3-styles"
target="_blank"
>Be a Catnicorn T-shirt</a
></strong
>.
<div class="g-activity__time">1 month ago</div>
</div>
</div>
<a class="btn btn-outline-success btn-block" href="#">
View all recent activity
</a>
</section>
</div>
</div>
</main>
</div>
<footer class="g-footer text-right">
G<span class="e-site-emphasize">Admin</span> - Free Bootstrap 4 Admin Template
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/custom.js"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.2/dist/Chart.min.js"></script>
<!-- jVectorMap -->
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
<script src="https://rawgit.com/bjornd/jvectormap-site/master/content/js/gdp-data.js"></script>
<!-- 3rd party scripts implementation -->
<script>
$(function() {
// Sessions
var sessionChart = document.getElementById('session-chart');
new Chart(sessionChart, {
type: 'line',
data: {
labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
datasets: [
{
data: [6719, 5917, 7393, 7581, 6294, 8192, 7591],
lineTension: 0,
backgroundColor: '#d4f1eb',
borderColor: '#26b99a',
borderWidth: 2,
pointBackgroundColor: '#26b99a',
pointRadius: 2
}
]
},
options: {
scales: {
yAxes: [
{
display: false
}
],
xAxes: [
{
display: false
}
]
},
legend: {
display: false
},
responsive: true,
animation: {
duration: 0
}
}
});
// Device Usage
var inquiriesChart = document.getElementById('inquiries-chart').getContext('2d');
new Chart(inquiriesChart, {
type: 'doughnut',
data: {
datasets: [
{
data: [9, 2],
backgroundColor: ['#26b99a', '#f0ad4e']
}
],
labels: ['Verified', 'Spam']
},
options: {
responsive: true,
legend: {
display: false
},
animation: {
animateScale: false,
animateRotate: false
},
tooltips: {
enabled: false
},
hover: {
mode: null
}
}
});
// Location
$('#location-map').vectorMap({
backgroundColor: 'transparent',
zoomOnScroll: false,
map: 'world_mill_en',
series: {
regions: [
{
values: gdpData,
scale: ['#E6F2F0', '#149B7E'],
normalizeFunction: 'polynomial'
}
]
},
regionStyle: {
initial: {
stroke: '#149B7E',
'stroke-width': 1,
'stroke-opacity': 0.5
},
hover: {
'fill-opacity': 0.8,
cursor: 'pointer'
}
}
});
// Device Usage
var deviceChart = document.getElementById('device-chart').getContext('2d');
new Chart(deviceChart, {
type: 'doughnut',
data: {
datasets: [
{
data: [2506, 2032, 2424, 1668, 280],
backgroundColor: ['#337ab7', '#26b99a', '#d9534f', '#f0ad4e', '#343a40']
}
],
labels: ['Desktop', 'Laptop', 'Smartphone', 'Tablet', 'Other']
},
options: {
responsive: true,
legend: {
display: false
},
animation: {
animateScale: false,
animateRotate: false
}
}
});
});
</script>
</body>
</html>