Scribd
Upload
98 views10 pages

Admin Dashboard Template

This document contains the HTML code for an admin dashboard interface. It includes code for the header, sidebar navigation, main content area, and links to external CSS frameworks for styling and layout. The sidebar contains navigation links for managing products, deliveries, orders, bike rentals, publications, and events.

Uploaded by

Omar BENAMOR
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
98 views10 pages

Admin Dashboard Template

This document contains the HTML code for an admin dashboard interface. It includes code for the header, sidebar navigation, main content area, and links to external CSS frameworks for styling and layout. The sidebar contains navigation links for managing products, deliveries, orders, bike rentals, publications, and events.

Uploaded by

Omar BENAMOR
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

<!

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<title>{% block title %}Admin!{% endblock %}</title>


{% block stylesheets %}

<link rel="apple-touch-icon" href="https://i.imgur.com/QRAUqs9.png">


<link rel="shortcut icon" href="https://i.imgur.com/QRAUqs9.png">

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-
awesome@4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-
icons@0.1.2/css/themify-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-
icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-
icon-css/3.2.0/css/flag-icon.min.css">
<link
href="https://cdn.jsdelivr.net/npm/chartist@0.11.0/dist/chartist.min.css"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/jqvmap@1.5.1/dist/jqvmap.min.css"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/weathericons@2.1.0/css/weather-
icons.css" rel="stylesheet" />
<link
href="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.css"
rel="stylesheet" />

<link rel="stylesheet" href="{{ asset('assets/css/cs-skin-


elastic.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
<style>
#weatherWidget .currentDesc {
color: #ffffff!important;
}
.traffic-chart {
min-height: 335px;
}
#flotPie1 {
height: 150px;
}
#flotPie1 td {
padding:3px;
}
#flotPie1 table {
top: 20px!important;
right: -10px!important;
}
.chart-container {
display: table;
min-width: 270px ;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}
#flotLine5 {
height: 105px;
}

#flotBarChart {
height: 150px;
}
#cellPaiChart{
height: 160px;
}

</style>

{% endblock %}
<link rel="icon" type="/image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}

<!-- Left Panel -->


<aside id="left-panel" class="left-panel">
<nav class="navbar navbar-expand-sm navbar-default">
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-laptop"></i>All
Products</a>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="menu-icon fa fa-truck"></i>Livraison</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-user"></i><a
href="{{ path('table_livreur') }}">Livreurs</a></li>
<li><i class="fa fa-table"></i><a
href="{{ path('table_content') }}">Livraison</a></li>
</ul>
</li>
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-
laptop"></i>Orders</a>
</li>
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-laptop"></i>Bike
Rental</a>
</li>
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-
laptop"></i>Publications</a>
</li>
<li class="active" style="margin: 10px 0;">
<a href="#"><i class="menu-icon fa fa-
laptop"></i>Events</a>
</li>

</ul>
</div><!-- /.navbar-collapse -->
</nav>
</aside>

<!-- Right Panel -->


<div id="right-panel" class="right-panel">
<!-- Header-->
<header id="header" class="header">
<div class="top-left">
<div class="navbar-header">
<a class="navbar-brand" href="./"><img style="height: 42px;
width: 55px;" src="{{ asset('images/logo.png') }}" alt="Logo"></a>
<a class="navbar-brand hidden" href="./"><img
src="{{ asset('images/logo2.png') }}" alt="Logo"></a>
<a id="menuToggle" class="menutoggle"><i class="fa fa-
bars"></i></a>
</div>
</div>
<div class="top-right">
<div class="header-menu">
<div class="header-left">
<button class="search-trigger"><i class="fa fa-
search"></i></button>
<div class="form-inline">
<form class="search-form">
<input class="form-control mr-sm-2" type="text"
placeholder="Search ..." aria-label="Search">
<button class="search-close" type="submit"><i
class="fa fa-close"></i></button>
</form>
</div>

<div class="dropdown for-notification">


<button class="btn btn-secondary dropdown-toggle"
type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
<i class="fa fa-bell"></i>
<span class="count bg-danger">3</span>
</button>
<div class="dropdown-menu" aria-
labelledby="notification">
<p class="red">You have 3 Notification</p>
<a class="dropdown-item media" href="#">
<i class="fa fa-check"></i>
<p>Server #1 overloaded.</p>
</a>
<a class="dropdown-item media" href="#">
<i class="fa fa-info"></i>
<p>Server #2 overloaded.</p>
</a>
<a class="dropdown-item media" href="#">
<i class="fa fa-warning"></i>
<p>Server #3 overloaded.</p>
</a>
</div>
</div>

<div class="dropdown for-message">


<button class="btn btn-secondary dropdown-toggle"
type="button" id="message" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
<i class="fa fa-envelope"></i>
<span class="count bg-primary">4</span>
</button>
<div class="dropdown-menu" aria-labelledby="message">
<p class="red">You have 4 Mails</p>
<a class="dropdown-item media" href="#">
<span class="photo media-left"><img
alt="avatar" src="{{ asset('images/avatar/1.jpg')}}"></span>
<div class="message media-body">
<span class="name float-left">Jonathan
Smith</span>
<span class="time float-right">Just
now</span>
<p>Hello, this is an example msg</p>
</div>
</a>
<a class="dropdown-item media" href="#">
<span class="photo media-left"><img
alt="avatar" src="{{ asset('images/avatar/2.jpg') }}"></span>
<div class="message media-body">
<span class="name float-left">Jack
Sanders</span>
<span class="time float-right">5 minutes
ago</span>
<p>Lorem ipsum dolor sit amet,
consectetur</p>
</div>
</a>
<a class="dropdown-item media" href="#">
<span class="photo media-left"><img
alt="avatar" src="{{ asset('images/avatar/3.jpg') }}"></span>
<div class="message media-body">
<span class="name float-left">Cheryl
Wheeler</span>
<span class="time float-right">10 minutes
ago</span>
<p>Hello, this is an example msg</p>
</div>
</a>
<a class="dropdown-item media" href="#">
<span class="photo media-left"><img
alt="avatar" src="{{ asset('images/avatar/4.jpg') }}"></span>
<div class="message media-body">
<span class="name float-left">Rachel
Santos</span>
<span class="time float-right">15 minutes
ago</span>
<p>Lorem ipsum dolor sit amet,
consectetur</p>
</div>
</a>
</div>
</div>
</div>

<div class="user-area dropdown float-right">


<a href="#" class="dropdown-toggle active" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="user-avatar rounded-circle"
src="{{ asset('images/admin.jpg') }}" alt="User Avatar">
</a>

<div class="user-menu dropdown-menu">


<a class="nav-link" href="#"><i class="fa fa-
user"></i>My Profile</a>

<a class="nav-link" href="#"><i class="fa fa-


user"></i>Notifications <span class="count">13</span></a>

<a class="nav-link" href="#"><i class="fa fa


-cog"></i>Settings</a>

<a class="nav-link" href="#"><i class="fa fa-power


-off"></i>Logout</a>
</div>
</div>

</div>
</div>
</header>
<!-- /#header -->
<!-- Content -->
<div style="width: 100%;min-height: 745px">
{% block main %}
<h1>I'm Block Main</h1>
{% endblock %}
</div>
<!-- /.content -->

<!-- /.site-footer -->


</div>

{% endblock %}

{% block javascripts %}
<script
src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js"></script
>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></scrip
t>
<script src="https://cdn.jsdelivr.net/npm/jquery-match-
height@0.7.2/dist/jquery.matchHeight.min.js"></script>
<script src="{{ asset('assets/js/main.js') }}"></script>

<!-- Chart js -->


<script
src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.bundle.min.js"></script
>

<!--Chartist Chart-->
<script
src="https://cdn.jsdelivr.net/npm/chartist@0.11.0/dist/chartist.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartist-plugin-
legend@0.6.2/chartist-plugin-legend.min.js"></script>

<script
src="https://cdn.jsdelivr.net/npm/jquery.flot@0.8.3/jquery.flot.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flot-
pie@1.0.0/src/jquery.flot.pie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flot-
spline@0.0.1/js/jquery.flot.spline.min.js"></script>

<script
src="https://cdn.jsdelivr.net/npm/simpleweather@3.1.0/jquery.simpleWeather.min.js">
</script>
<script src="{{ asset('assets/js/init/weather-init.js') }}"></script>

<script
src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.js"></sc
ript>
<script src="{{ asset('assets/js/init/fullcalendar-init.js') }}"></script>

<script>
jQuery(document).ready(function($) {
"use strict";

// Pie chart flotPie1


var piedata = [
{ label: "Desktop visits", data: [[1,32]], color: '#5c6bc0'},
{ label: "Tab visits", data: [[1,33]], color: '#ef5350'},
{ label: "Mobile visits", data: [[1,35]], color: '#66bb6a'}
];

$.plot('#flotPie1', piedata, {
series: {
pie: {
show: true,
radius: 1,
innerRadius: 0.65,
label: {
show: true,
radius: 2/3,
threshold: 1
},
stroke: {
width: 0
}
}
},
grid: {
hoverable: true,
clickable: true
}
});
// Pie chart flotPie1 End
// cellPaiChart
var cellPaiChart = [
{ label: "Direct Sell", data: [[1,65]], color: '#5b83de'},
{ label: "Channel Sell", data: [[1,35]], color: '#00bfa5'}
];
$.plot('#cellPaiChart', cellPaiChart, {
series: {
pie: {
show: true,
stroke: {
width: 0
}
}
},
legend: {
show: false
},grid: {
hoverable: true,
clickable: true
}

});
// cellPaiChart End
// Line Chart #flotLine5
var newCust = [[0, 3], [1, 5], [2,4], [3, 7], [4, 9], [5, 3], [6, 6],
[7, 4], [8, 10]];

var plot = $.plot($('#flotLine5'),[{


data: newCust,
label: 'New Data Flow',
color: '#fff'
}],
{
series: {
lines: {
show: true,
lineColor: '#fff',
lineWidth: 2
},
points: {
show: true,
fill: true,
fillColor: "#ffffff",
symbol: "circle",
radius: 3
},
shadowSize: 0
},
points: {
show: true,
},
legend: {
show: false
},
grid: {
show: false
}
});
// Line Chart #flotLine5 End
// Traffic Chart using chartist
if ($('#traffic-chart').length) {
var chart = new Chartist.Line('#traffic-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
series: [
[0, 18000, 35000, 25000, 22000, 0],
[0, 33000, 15000, 20000, 15000, 300],
[0, 15000, 28000, 15000, 30000, 5000]
]
}, {
low: 0,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showGrid: true
}
});

chart.on('draw', function(data) {
if(data.type === 'line' || data.type === 'area') {
data.element.animate({
d: {
begin: 2000 * data.index,
dur: 2000,
from: data.path.clone().scale(1, 0).translate(0,
data.chartRect.height()).stringify(),
to: data.path.clone().stringify(),
easing: Chartist.Svg.Easing.easeOutQuint
}
});
}
});
}
// Traffic Chart using chartist End
//Traffic chart chart-js
if ($('#TrafficChart').length) {
var ctx = document.getElementById( "TrafficChart" );
ctx.height = 150;
var myChart = new Chart( ctx, {
type: 'line',
data: {
labels: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul" ],
datasets: [
{
label: "Visit",
borderColor: "rgba(4, 73, 203,.09)",
borderWidth: "1",
backgroundColor: "rgba(4, 73, 203,.5)",
data: [ 0, 2900, 5000, 3300, 6000, 3250, 0 ]
},
{
label: "Bounce",
borderColor: "rgba(245, 23, 66, 0.9)",
borderWidth: "1",
backgroundColor: "rgba(245, 23, 66,.5)",
pointHighlightStroke: "rgba(245, 23, 66,.5)",
data: [ 0, 4200, 4500, 1600, 4200, 1500, 4000 ]
},
{
label: "Targeted",
borderColor: "rgba(40, 169, 46, 0.9)",
borderWidth: "1",
backgroundColor: "rgba(40, 169, 46, .5)",
pointHighlightStroke: "rgba(40, 169, 46,.5)",
data: [1000, 5200, 3600, 2600, 4200, 5300, 0 ]
}
]
},
options: {
responsive: true,
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'nearest',
intersect: true
}

}
} );
}
//Traffic chart chart-js End
// Bar Chart #flotBarChart
$.plot("#flotBarChart", [{
data: [[0, 18], [2, 8], [4, 5], [6, 13],[8,5], [10,7],[12,4],
[14,6],[16,15], [18, 9],[20,17], [22,7],[24,4], [26,9],[28,11]],
bars: {
show: true,
lineWidth: 0,
fillColor: '#ffffff8a'
}
}], {
grid: {
show: false
}
});
// Bar Chart #flotBarChart End
});
</script>
{% endblock %}
</body>
</html>

You might also like