gadmin
Version:
Free Bootstrap 4 Gentelella inspired admin template
467 lines (448 loc) • 16.3 kB
HTML
<html lang="en">
@@include('./../partials/head.html')
<body>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css"
/>
@@include('./../partials/navigation/navigation.html')
<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>
@@include('./../partials/footer/footer.html')
@@include('./../partials/scripts.html')
<!-- 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>