improve index*.html
This commit is contained in:
Daniel
99
src/assets/js/dashboard.js
Normal file
99
src/assets/js/dashboard.js
Normal file
@@ -0,0 +1,99 @@
|
||||
/* eslint-disable no-undef */
|
||||
/* Chart.js Charts */
|
||||
// Sales chart
|
||||
const salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
|
||||
|
||||
const salesChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Digital Goods',
|
||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
||||
borderColor: 'rgba(60,141,188,0.8)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointColor: '#3b8bba',
|
||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
},
|
||||
{
|
||||
label: 'Electronics',
|
||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
||||
borderColor: 'rgba(210, 214, 222, 1)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointColor: 'rgba(210, 214, 222, 1)',
|
||||
pointStrokeColor: '#c1c7d1',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const salesChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
})
|
||||
|
||||
// Donut Chart
|
||||
const pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
|
||||
const pieData = {
|
||||
labels: [
|
||||
'Instore Sales',
|
||||
'Download Sales',
|
||||
'Mail-Order Sales'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [30, 12, 20],
|
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12']
|
||||
}
|
||||
]
|
||||
}
|
||||
const pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
responsive: true
|
||||
}
|
||||
// Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
})
|
||||
120
src/assets/js/dashboard2.js
Normal file
120
src/assets/js/dashboard2.js
Normal file
@@ -0,0 +1,120 @@
|
||||
/* eslint-disable no-undef */
|
||||
/* ChartJS
|
||||
* -------
|
||||
* Here we will create a few charts using ChartJS
|
||||
*/
|
||||
|
||||
//-----------------------
|
||||
// - MONTHLY SALES CHART -
|
||||
//-----------------------
|
||||
|
||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||
const salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
|
||||
|
||||
const salesChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Digital Goods',
|
||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
||||
borderColor: 'rgba(60,141,188,0.8)',
|
||||
fill: true,
|
||||
pointRadius: 0,
|
||||
pointColor: '#3b8bba',
|
||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
},
|
||||
{
|
||||
label: 'Electronics',
|
||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
||||
borderColor: 'rgba(210, 214, 222, 1)',
|
||||
fill: true,
|
||||
pointRadius: 0,
|
||||
pointColor: 'rgba(210, 214, 222, 1)',
|
||||
pointStrokeColor: '#c1c7d1',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const salesChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
tension: 0.4,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const salesChart = new Chart(salesChartCanvas, {
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
})
|
||||
|
||||
//---------------------------
|
||||
// - END MONTHLY SALES CHART -
|
||||
//---------------------------
|
||||
|
||||
//-------------
|
||||
// - PIE CHART -
|
||||
//-------------
|
||||
|
||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||
const pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
|
||||
|
||||
const pieData = {
|
||||
labels: [
|
||||
'Chrome',
|
||||
'IE',
|
||||
'FireFox',
|
||||
'Safari',
|
||||
'Opera',
|
||||
'Navigator'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [700, 500, 400, 600, 300, 100],
|
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
|
||||
}
|
||||
]
|
||||
}
|
||||
const pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
// Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const pieChart = new Chart(pieChartCanvas, {
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
})
|
||||
|
||||
//-----------------
|
||||
// - END PIE CHART -
|
||||
//-----------------
|
||||
249
src/index.html
249
src/index.html
@@ -95,16 +95,242 @@
|
||||
<div class="row">
|
||||
<!-- Left col -->
|
||||
<section class="col-lg-7">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
<!-- Custom tabs (Charts with tabs)-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i class="fas fa-chart-pie me-1"></i>
|
||||
Sales
|
||||
</h3>
|
||||
<div class="card-tools">
|
||||
<ul class="nav nav-pills ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#revenue-chart" data-bs-toggle="tab">Area</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#sales-chart" data-bs-toggle="tab">Donut</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="tab-content p-0">
|
||||
<!-- Morris chart - Sales -->
|
||||
<div class="chart tab-pane active" id="revenue-chart"
|
||||
style="position: relative; height: 300px;">
|
||||
<canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
|
||||
</div>
|
||||
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
|
||||
<canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<!-- DIRECT CHAT -->
|
||||
<div class="card direct-chat direct-chat-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Direct Chat</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<span title="3 New Messages" class="badge bg-primary">3</span>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
|
||||
<i class="fas fa-comments"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<!-- Conversations are loaded here -->
|
||||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Is this template really for free? That's unbelievable!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Working with AdminLTE on a great new app! Wanna join?
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
I would love to.
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
</div>
|
||||
<!--/.direct-chat-messages-->
|
||||
|
||||
<!-- Contacts are loaded here -->
|
||||
<div class="direct-chat-contacts">
|
||||
<ul class="contacts-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Count Dracula
|
||||
<small class="contacts-list-date float-end">2/28/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">How have you been? I was...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="dist/img/user7-128x128.jpg" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Sarah Doe
|
||||
<small class="contacts-list-date float-end">2/23/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I will be waiting for...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nadia Jolie
|
||||
<small class="contacts-list-date float-end">2/20/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I'll call you back at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="dist/img/user5-128x128.jpg" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nora S. Vans
|
||||
<small class="contacts-list-date float-end">2/10/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Where is your new...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="dist/img/user6-128x128.jpg" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
John K.
|
||||
<small class="contacts-list-date float-end">1/27/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Can I take a look at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="dist/img/user8-128x128.jpg" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Kenneth M.
|
||||
<small class="contacts-list-date float-end">1/4/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Never mind I found...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
</ul>
|
||||
<!-- /.contacts-list -->
|
||||
</div>
|
||||
<!-- /.direct-chat-pane -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
<form action="#" method="post">
|
||||
<div class="input-group">
|
||||
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button type="button" class="btn btn-primary">Send</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!--/.direct-chat -->
|
||||
</section>
|
||||
<!-- /.Left col -->
|
||||
</div>
|
||||
<!-- /.row (main row) -->
|
||||
</div><!-- /.container-fluid -->
|
||||
@@ -121,5 +347,10 @@
|
||||
@@include('./_scripts.html', {
|
||||
"path": "."
|
||||
})
|
||||
|
||||
<!-- ChartJS -->
|
||||
<script src="./vendor/chart.js/dist/chart.js"></script>
|
||||
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
|
||||
<script src="./assets/js/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
723
src/index2.html
723
src/index2.html
@@ -89,6 +89,724 @@
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Monthly Recap Report</h5>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<i class="fas fa-wrench"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<a href="#" class="dropdown-item">Action</a>
|
||||
<a href="#" class="dropdown-item">Another action</a>
|
||||
<a href="#" class="dropdown-item">Something else here</a>
|
||||
<a class="dropdown-divider"></a>
|
||||
<a href="#" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<p class="text-center">
|
||||
<strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
|
||||
</p>
|
||||
|
||||
<div class="chart">
|
||||
<!-- Sales Chart Canvas -->
|
||||
<canvas id="salesChart" style="height: 180px;"></canvas>
|
||||
</div>
|
||||
<!-- /.chart-responsive -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<p class="text-center">
|
||||
<strong>Goal Completion</strong>
|
||||
</p>
|
||||
|
||||
<div class="progress-group">
|
||||
Add Products to Cart
|
||||
<span class="float-end"><b>160</b>/200</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-primary" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.progress-group -->
|
||||
|
||||
<div class="progress-group">
|
||||
Complete Purchase
|
||||
<span class="float-end"><b>310</b>/400</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-danger" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.progress-group -->
|
||||
<div class="progress-group">
|
||||
<span class="progress-text">Visit Premium Page</span>
|
||||
<span class="float-end"><b>480</b>/800</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-success" style="width: 60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.progress-group -->
|
||||
<div class="progress-group">
|
||||
Send Inquiries
|
||||
<span class="float-end"><b>250</b>/500</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-warning" style="width: 50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.progress-group -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- ./card-body -->
|
||||
<div class="card-footer">
|
||||
<div class="row">
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="description-block border-end">
|
||||
<span class="description-percentage text-success"><i class="fas fa-caret-up"></i> 17%</span>
|
||||
<h5 class="description-header">$35,210.43</h5>
|
||||
<span class="description-text">TOTAL REVENUE</span>
|
||||
</div>
|
||||
<!-- /.description-block -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="description-block border-end">
|
||||
<span class="description-percentage text-purple"><i class="fas fa-caret-left"></i> 0%</span>
|
||||
<h5 class="description-header">$10,390.90</h5>
|
||||
<span class="description-text">TOTAL COST</span>
|
||||
</div>
|
||||
<!-- /.description-block -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="description-block border-end">
|
||||
<span class="description-percentage text-success"><i class="fas fa-caret-up"></i> 20%</span>
|
||||
<h5 class="description-header">$24,813.53</h5>
|
||||
<span class="description-text">TOTAL PROFIT</span>
|
||||
</div>
|
||||
<!-- /.description-block -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="description-block">
|
||||
<span class="description-percentage text-danger"><i class="fas fa-caret-down"></i> 18%</span>
|
||||
<h5 class="description-header">1200</h5>
|
||||
<span class="description-text">GOAL COMPLETIONS</span>
|
||||
</div>
|
||||
<!-- /.description-block -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- Main row -->
|
||||
<div class="row">
|
||||
<!-- Left col -->
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- DIRECT CHAT -->
|
||||
<div class="card direct-chat direct-chat-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Direct Chat</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<span title="3 New Messages" class="badge bg-warning">3</span>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
|
||||
<i class="fas fa-comments"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<!-- Conversations are loaded here -->
|
||||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Is this template really for free? That's unbelievable!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Working with AdminLTE on a great new app! Wanna join?
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
I would love to.
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
</div>
|
||||
<!--/.direct-chat-messages-->
|
||||
|
||||
<!-- Contacts are loaded here -->
|
||||
<div class="direct-chat-contacts">
|
||||
<ul class="contacts-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Count Dracula
|
||||
<small class="contacts-list-date float-end">2/28/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">How have you been? I was...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Sarah Doe
|
||||
<small class="contacts-list-date float-end">2/23/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I will be waiting for...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nadia Jolie
|
||||
<small class="contacts-list-date float-end">2/20/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I'll call you back at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nora S. Vans
|
||||
<small class="contacts-list-date float-end">2/10/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Where is your new...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
John K.
|
||||
<small class="contacts-list-date float-end">1/27/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Can I take a look at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Kenneth M.
|
||||
<small class="contacts-list-date float-end">1/4/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Never mind I found...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
</ul>
|
||||
<!-- /.contacts-list -->
|
||||
</div>
|
||||
<!-- /.direct-chat-pane -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
<form action="#" method="post">
|
||||
<div class="input-group">
|
||||
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button type="button" class="btn btn-warning">Send</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!--/.direct-chat -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-md-6">
|
||||
<!-- USERS LIST -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Latest Members</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<span class="badge bg-danger">8 New Members</span>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<ul class="users-list clearfix">
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Alexander Pierce</a>
|
||||
<span class="users-list-date">Today</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Norman</a>
|
||||
<span class="users-list-date">Yesterday</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Jane</a>
|
||||
<span class="users-list-date">12 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">John</a>
|
||||
<span class="users-list-date">12 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Alexander</a>
|
||||
<span class="users-list-date">13 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Sarah</a>
|
||||
<span class="users-list-date">14 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Nora</a>
|
||||
<span class="users-list-date">15 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Nadia</a>
|
||||
<span class="users-list-date">15 Jan</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.users-list -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer text-center">
|
||||
<a href="javascript:">View All Users</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- TABLE: LATEST ORDERS -->
|
||||
<div class="card">
|
||||
<div class="card-header border-transparent">
|
||||
<h3 class="card-title">Latest Orders</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table m-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order ID</th>
|
||||
<th>Item</th>
|
||||
<th>Status</th>
|
||||
<th>Popularity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR9842</a></td>
|
||||
<td>Call of Duty IV</td>
|
||||
<td><span class="badge bg-success">Shipped</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR1848</a></td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td><span class="badge bg-warning">Pending</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR7429</a></td>
|
||||
<td>iPhone 6 Plus</td>
|
||||
<td><span class="badge bg-danger">Delivered</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR7429</a></td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td><span class="badge bg-purple">Processing</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR1848</a></td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td><span class="badge bg-warning">Pending</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR7429</a></td>
|
||||
<td>iPhone 6 Plus</td>
|
||||
<td><span class="badge bg-danger">Delivered</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR9842</a></td>
|
||||
<td>Call of Duty IV</td>
|
||||
<td><span class="badge bg-success">Shipped</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.table-responsive -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer clearfix">
|
||||
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-start">Place New Order</a>
|
||||
<a href="javascript:void(0)" class="btn btn-sm btn-secondary float-end">View All Orders</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-md-4">
|
||||
<!-- Info Boxes Style 2 -->
|
||||
<div class="info-box mb-3 bg-warning">
|
||||
<span class="info-box-icon"><i class="fas fa-tag"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Inventory</span>
|
||||
<span class="info-box-number">5,200</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
<div class="info-box mb-3 bg-success">
|
||||
<span class="info-box-icon"><i class="far fa-heart"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Mentions</span>
|
||||
<span class="info-box-number">92,050</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
<div class="info-box mb-3 bg-danger">
|
||||
<span class="info-box-icon"><i class="fas fa-cloud-download-alt"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Downloads</span>
|
||||
<span class="info-box-number">114,381</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
<div class="info-box mb-3 bg-purple">
|
||||
<span class="info-box-icon"><i class="far fa-comment"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Direct Messages</span>
|
||||
<span class="info-box-number">163,921</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Browser Usage</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="chart-responsive">
|
||||
<canvas id="pieChart" height="150"></canvas>
|
||||
</div>
|
||||
<!-- ./chart-responsive -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<ul class="chart-legend clearfix">
|
||||
<li><i class="far fa-circle text-danger"></i> Chrome</li>
|
||||
<li><i class="far fa-circle text-success"></i> IE</li>
|
||||
<li><i class="far fa-circle text-warning"></i> FireFox</li>
|
||||
<li><i class="far fa-circle text-info"></i> Safari</li>
|
||||
<li><i class="far fa-circle text-primary"></i> Opera</li>
|
||||
<li><i class="far fa-circle text-secondary"></i> Navigator</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer p-0">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
United States of America
|
||||
<span class="float-end text-danger">
|
||||
<i class="fas fa-arrow-down text-sm"></i>
|
||||
12%</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
India
|
||||
<span class="float-end text-success">
|
||||
<i class="fas fa-arrow-up text-sm"></i> 4%
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
China
|
||||
<span class="float-end text-purple">
|
||||
<i class="fas fa-arrow-left text-sm"></i> 0%
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<!-- PRODUCT LIST -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Recently Added Products</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<ul class="products-list product-list-in-card ps-2 pe-2">
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src="./assets/img/AdminLTELogo.png " alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">Samsung TV
|
||||
<span class="badge bg-warning float-end">$1800</span></a>
|
||||
<span class="product-description">
|
||||
Samsung 32" 1080p 60Hz LED Smart HDTV.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src="./assets/img/AdminLTELogo.png " alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">Bicycle
|
||||
<span class="badge bg-purple float-end">$700</span></a>
|
||||
<span class="product-description">
|
||||
26" Mongoose Dolomite Men's 7-speed, Navy Blue.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src="./assets/img/AdminLTELogo.png " alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">
|
||||
Xbox One <span class="badge bg-danger float-end">
|
||||
$350
|
||||
</span>
|
||||
</a>
|
||||
<span class="product-description">
|
||||
Xbox One Console Bundle with Halo Master Chief Collection.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src="./assets/img/AdminLTELogo.png " alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">PlayStation 4
|
||||
<span class="badge bg-success float-end">$399</span></a>
|
||||
<span class="product-description">
|
||||
PlayStation 4 500GB Console (PS4)
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer text-center">
|
||||
<a href="javascript:void(0)" class="uppercase">View All Products</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,5 +821,10 @@
|
||||
@@include('./_scripts.html', {
|
||||
"path": "."
|
||||
})
|
||||
|
||||
<!-- ChartJS -->
|
||||
<script src="./vendor/chart.js/dist/chart.js"></script>
|
||||
<!-- AdminLTE dashboard2 demo (This is only for demo purposes) -->
|
||||
<script src="./assets/js/dashboard2.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -19,3 +19,6 @@
|
||||
<!-- For dark mode use @@path/css/dark/adminlte-dark-addon.css, do not remove dist/css/adminlte.css or if usinf RTL version do not remove @@path/css/rtl/adminlte.rtl.css-->
|
||||
<!-- ... and then the alternate CSS first as a snap-on for dark color scheme preference -->
|
||||
<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark-addon.css" media="(prefers-color-scheme: dark)""> -->
|
||||
|
||||
<!-- overlayScrollbars -->
|
||||
<link rel="stylesheet" href="@@path/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<!-- REQUIRED SCRIPTS -->
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<script src="@@path/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="@@path/js/adminlte.js"></script>
|
||||
<!-- REQUIRED SCRIPTS -->
|
||||
<!-- overlayScrollbars -->
|
||||
<script src="@@path/vendor/overlayscrollbars/js/OverlayScrollbars.min.js"></script>
|
||||
<!-- Bootstrap 5 -->
|
||||
<script src="@@path/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="@@path/js/adminlte.js"></script>
|
||||
|
||||
@@ -81,11 +81,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.border-right {
|
||||
.border-end {
|
||||
border-right: 1px solid $lte-card-border-color;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
.border-start {
|
||||
border-left: 1px solid $lte-card-border-color;
|
||||
}
|
||||
|
||||
|
||||
224
src/scss/_direct-chat.scss
Normal file
224
src/scss/_direct-chat.scss
Normal file
@@ -0,0 +1,224 @@
|
||||
//
|
||||
// Component: Direct Chat
|
||||
//
|
||||
|
||||
.direct-chat {
|
||||
.card-body {
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.chat-pane-open {
|
||||
.direct-chat-contacts {
|
||||
@include translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.timestamp-light {
|
||||
.direct-chat-timestamp {
|
||||
color: tint-color(color-contrast($color-contrast-light), 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.timestamp-dark {
|
||||
.direct-chat-timestamp {
|
||||
color: shade-color(color-contrast($color-contrast-dark), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-messages {
|
||||
@include translate(0, 0);
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.direct-chat-msg,
|
||||
.direct-chat-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.direct-chat-msg {
|
||||
@include clearfix ();
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.direct-chat-messages,
|
||||
.direct-chat-contacts {
|
||||
transition: transform .5s ease-in-out;
|
||||
}
|
||||
|
||||
.direct-chat-text {
|
||||
@if $enable-rounded {
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
|
||||
background-color: $lte-direct-chat-default-msg-bg;
|
||||
border: 1px solid $lte-direct-chat-default-msg-border-color;
|
||||
color: $lte-direct-chat-default-font-color;
|
||||
margin: 5px 0 0 50px;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
|
||||
//Create the arrow
|
||||
&::after,
|
||||
&::before {
|
||||
border: solid transparent;
|
||||
border-right-color: $lte-direct-chat-default-msg-border-color;
|
||||
content: " ";
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 15px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-width: 5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-width: 6px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.end & {
|
||||
margin-left: 0;
|
||||
margin-right: 50px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: $lte-direct-chat-default-msg-border-color;
|
||||
border-right-color: transparent;
|
||||
left: 100%;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-img {
|
||||
@include border-radius(50%);
|
||||
float: left;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
|
||||
.end & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-infos {
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.direct-chat-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.direct-chat-timestamp {
|
||||
color: shade-color($gray-500, 25%);
|
||||
}
|
||||
|
||||
//Direct chat contacts pane
|
||||
.direct-chat-contacts-open {
|
||||
.direct-chat-contacts {
|
||||
@include translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-contacts {
|
||||
@include translate(101%, 0);
|
||||
background-color: $dark;
|
||||
bottom: 0;
|
||||
color: $white;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direct-chat-contacts-light {
|
||||
background-color: $light;
|
||||
|
||||
.contacts-list-name {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.contacts-list-date {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.contacts-list-msg {
|
||||
color: shade-color($gray-600, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
//Contacts list -- for displaying contacts in direct chat contacts pane
|
||||
.contacts-list {
|
||||
@include list-unstyled ();
|
||||
|
||||
> li {
|
||||
@include clearfix ();
|
||||
border-bottom: 1px solid rgba($black, .2);
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-list-img {
|
||||
@include border-radius(50%);
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.contacts-list-info {
|
||||
color: $white;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.contacts-list-name,
|
||||
.contacts-list-status {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contacts-list-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contacts-list-status {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.contacts-list-date {
|
||||
color: $gray-400;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.contacts-list-msg {
|
||||
color: shade-color($gray-400, 10%);
|
||||
}
|
||||
|
||||
// Color variants
|
||||
@each $name, $color in $theme-colors {
|
||||
.direct-chat-#{$name} {
|
||||
@include direct-chat-variant($color);
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
.direct-chat-#{$name} {
|
||||
@include direct-chat-variant($color);
|
||||
}
|
||||
}
|
||||
@@ -10,4 +10,5 @@
|
||||
@import "mixins/nav-treeview-light";
|
||||
@import "mixins/cards";
|
||||
@import "mixins/backgrounds";
|
||||
@import "mixins/direct-chat";
|
||||
@import "mixins/miscellaneous";
|
||||
|
||||
55
src/scss/_products.scss
Normal file
55
src/scss/_products.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
//
|
||||
// Component: Products
|
||||
//
|
||||
|
||||
.products-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include clearfix ();
|
||||
|
||||
@if $enable-rounded {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
background-color: $white;
|
||||
padding: 10px 0;
|
||||
|
||||
}
|
||||
|
||||
.product-img {
|
||||
float: left;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
color: $gray-600;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.product-list-in-card > .item {
|
||||
@include border-radius(0);
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
45
src/scss/_users-list.scss
Normal file
45
src/scss/_users-list.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
//
|
||||
// Component: Users List
|
||||
//
|
||||
|
||||
.users-list {
|
||||
@include list-unstyled ();
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
|
||||
img {
|
||||
@include border-radius(50%);
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
&,
|
||||
.users-list-name {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.users-list-name,
|
||||
.users-list-date {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.users-list-name {
|
||||
color: $gray-700;
|
||||
font-size: $font-size-sm;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.users-list-date {
|
||||
color: shade-color($gray-500, 20%);
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -1,5 +1,9 @@
|
||||
// Custom AdminLTE Variables
|
||||
|
||||
// COLORS
|
||||
// --------------------------------------------------------
|
||||
$lte-gray-x-light: #d2d6de !default;
|
||||
|
||||
// Dynamic Variables
|
||||
// --------------------------------------------------------
|
||||
:root {
|
||||
@@ -190,6 +194,12 @@ $lte-card-img-size: $lte-img-size-sm !default;
|
||||
// --------------------------------------------------------
|
||||
$lte-progress-bar-border-radius: 1px !default;
|
||||
|
||||
// DIRECT CHAT
|
||||
// --------------------------------------------------------
|
||||
$lte-direct-chat-default-msg-bg: $lte-gray-x-light !default;
|
||||
$lte-direct-chat-default-font-color: #444 !default;
|
||||
$lte-direct-chat-default-msg-border-color: $lte-gray-x-light !default;
|
||||
|
||||
// Z-INDEX
|
||||
// --------------------------------------------------------
|
||||
$lte-zindex-main-header: $zindex-fixed + 4 !default;
|
||||
|
||||
@@ -18,6 +18,8 @@
|
||||
// ---------------------------------------------------
|
||||
@import "mixins";
|
||||
|
||||
// AdiminLTE Parts
|
||||
// ---------------------------------------------------
|
||||
@import "parts/core";
|
||||
@import "parts/components";
|
||||
@import "parts/extra-components";
|
||||
|
||||
@@ -383,7 +383,7 @@ $navbar-dark-brand-hover-color-alt: $navbar-dark-active-color-alt !def
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
$dropdown-color-alt: $body-color-alt !default;
|
||||
$dropdown-bg-alt: $black-alt !default;
|
||||
$dropdown-bg-alt: $body-bg-alt !default;
|
||||
$dropdown-border-color-alt: rgba($white-alt, .15) !default;
|
||||
$dropdown-divider-bg-alt: $dropdown-border-color-alt !default;
|
||||
$dropdown-box-shadow-alt: $box-shadow-alt !default;
|
||||
|
||||
17
src/scss/mixins/_direct-chat.scss
Normal file
17
src/scss/mixins/_direct-chat.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// Mixins: Direct Chat
|
||||
//
|
||||
|
||||
// Direct Chat Variant
|
||||
@mixin direct-chat-variant($bg-color, $color: $white) {
|
||||
.end > .direct-chat-text {
|
||||
background-color: $bg-color;
|
||||
border-color: $bg-color;
|
||||
color: color-contrast($bg-color);
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,9 +3,9 @@
|
||||
//
|
||||
|
||||
// ETC
|
||||
// @mixin translate($x, $y) {
|
||||
// transform: translate($x, $y);
|
||||
// }
|
||||
@mixin translate($x, $y) {
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
|
||||
// Different radius each side
|
||||
// @mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
|
||||
|
||||
@@ -4,3 +4,6 @@
|
||||
|
||||
@import "../small-box";
|
||||
@import "../info-box";
|
||||
@import "../direct-chat";
|
||||
@import "../products";
|
||||
@import "../users-list";
|
||||
|
||||
@@ -9,6 +9,8 @@ import {
|
||||
domReady
|
||||
} from './util/index'
|
||||
|
||||
import OverlayScrollbars from 'overlayscrollbars'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
@@ -17,6 +19,13 @@ import {
|
||||
|
||||
const CLASS_NAME_RESIZE_ANIMATION_STOPPER = 'resize-animation-stopper'
|
||||
|
||||
const SELECTOR_SIDEBAR = '.sidebar'
|
||||
|
||||
const Default = {
|
||||
scrollbarTheme: 'os-theme-light',
|
||||
scrollbarAutoHide: 'leave'
|
||||
}
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
@@ -38,6 +47,19 @@ class Layout {
|
||||
domReady(() => {
|
||||
const data = new Layout()
|
||||
data.holdTransition()
|
||||
|
||||
if (typeof OverlayScrollbars !== 'undefined') {
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line new-cap
|
||||
OverlayScrollbars(document.querySelectorAll(SELECTOR_SIDEBAR), {
|
||||
className: Default.scrollbarTheme,
|
||||
sizeAutoCapable: true,
|
||||
scrollbars: {
|
||||
autoHide: Default.scrollbarAutoHide,
|
||||
clickScrolling: true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
export default Layout
|
||||
|
||||
Reference in New Issue
Block a user