Webleb - UI Elements - Admin dashboard

HTML

<!DOCTYPE html>

<head>

<title>Admin Dashboard</title>

<style>

:root {

--primary: #4e73df;

--secondary: #858796;

--success: #1cc88a;

--info: #36b9cc;

--warning: #f6c23e;

--danger: #e74a3b;

--light: #f8f9fc;

--dark: #5a5c69;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Nunito', sans-serif;

}

body {

background-color: #f8f9fc;

display: flex;

min-height: 100vh;

}

/* Sidebar */

.sidebar {

width: 250px;

background: linear-gradient(180deg, var(--primary) 0%, #224abe 100%);

color: white;

transition: all 0.3s;

position: fixed;

height: 100vh;

z-index: 100;

}

.sidebar-header {

padding: 1.5rem;

text-align: center;

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.sidebar-menu {

padding: 1rem 0;

}

.sidebar-menu li {

list-style: none;

padding: 0.75rem 1.5rem;

transition: all 0.3s;

}

.sidebar-menu li:hover {

background-color: rgba(255, 255, 255, 0.1);

}

.sidebar-menu li a {

color: rgba(255, 255, 255, 0.8);

text-decoration: none;

display: flex;

align-items: center;

}

.sidebar-menu li a i {

margin-right: 10px;

font-size: 1.1rem;

}

.sidebar-menu li.active {

background-color: rgba(255, 255, 255, 0.2);

}

.sidebar-menu li.active a {

color: white;

}

/* Main Content */

.main-content {

flex: 1;

margin-left: 250px;

transition: all 0.3s;

}

/* Top Navigation */

.top-nav {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 1.5rem;

background-color: white;

box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);

position: sticky;

top: 0;

z-index: 50;

}

.search-bar {

display: flex;

align-items: center;

}

.search-bar input {

border: none;

background-color: var(--light);

padding: 0.5rem 1rem;

border-radius: 20px;

outline: none;

}

.user-menu {

display: flex;

align-items: center;

}

.user-menu img {

width: 40px;

height: 40px;

border-radius: 50%;

margin-right: 10px;

}

.user-menu .dropdown {

position: relative;

}

.user-menu .dropdown-content {

display: none;

position: absolute;

right: 0;

background-color: white;

min-width: 160px;

box-shadow: 0 8px 16px rgba(0,0,0,0.1);

z-index: 1;

border-radius: 5px;

}

.user-menu .dropdown:hover .dropdown-content {

display: block;

}

.dropdown-content a {

color: var(--dark);

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown-content a:hover {

background-color: var(--light);

}

/* Dashboard Content */

.dashboard-content {

padding: 1.5rem;

}

.page-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1.5rem;

}

.page-header h1 {

font-size: 1.75rem;

color: var(--dark);

}

.breadcrumb {

display: flex;

list-style: none;

}

.breadcrumb li {

margin-right: 0.5rem;

}

.breadcrumb li:after {

content: '/';

margin-left: 0.5rem;

color: var(--secondary);

}

.breadcrumb li:last-child:after {

content: '';

}

.breadcrumb a {

color: var(--secondary);

text-decoration: none;

}

.breadcrumb a:hover {

color: var(--primary);

}

/* Cards */

.cards {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 1.5rem;

margin-bottom: 1.5rem;

}

.card {

background-color: white;

border-radius: 0.35rem;

box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);

overflow: hidden;

}

.card-header {

padding: 1rem 1.25rem;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

font-weight: bold;

color: var(--dark);

}

.card-body {

padding: 1.25rem;

}

.stat-card {

display: flex;

align-items: center;

}

.stat-icon {

width: 50px;

height: 50px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin-right: 1rem;

font-size: 1.5rem;

color: white;

}

.stat-icon.primary {

background-color: var(--primary);

}

.stat-icon.success {

background-color: var(--success);

}

.stat-icon.warning {

background-color: var(--warning);

}

.stat-icon.danger {

background-color: var(--danger);

}

.stat-text h3 {

font-size: 1.5rem;

margin-bottom: 0.25rem;

color: var(--dark);

}

.stat-text p {

color: var(--secondary);

font-size: 0.875rem;

}

/* Charts */

.chart-container {

background-color: white;

border-radius: 0.35rem;

box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);

margin-bottom: 1.5rem;

overflow: hidden;

}

.chart-header {

padding: 1rem 1.25rem;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

font-weight: bold;

color: var(--dark);

}

.chart-body {

padding: 1.25rem;

height: 300px;

}

/* Tables */

.table-container {

background-color: white;

border-radius: 0.35rem;

box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);

overflow: hidden;

}

table {

width: 100%;

border-collapse: collapse;

}

th, td {

padding: 1rem;

text-align: left;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}

th {

background-color: var(--light);

color: var(--dark);

font-weight: bold;

}

tr:hover {

background-color: rgba(0, 0, 0, 0.01);

}

.badge {

padding: 0.25rem 0.5rem;

border-radius: 0.25rem;

font-size: 0.75rem;

font-weight: bold;

color: white;

}

.badge-success {

background-color: var(--success);

}

.badge-warning {

background-color: var(--warning);

}

.badge-danger {

background-color: var(--danger);

}

/* Responsive */

@media (max-width: 768px) {

.sidebar {

width: 0;

overflow: hidden;

}

.main-content {

margin-left: 0;

}

.cards {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<h2>Admin Panel</h2>

</div>

<a href="#"><i class="fas fa-fw fa-tachometer-alt"></i> Dashboard</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-users"></i> Users</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-box"></i> Products</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-shopping-cart"></i> Orders</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-chart-bar"></i> Analytics</a>

</li>

<li>

<a href="#"><i class="fas fa-fw fa-cog"></i> Settings</a>

</li>

</ul>

</div>

</div>

<span>KEVAKİBHACK <i class="fas fa-caret-down"></i></span>

<a href="#"><i class="fas fa-fw fa-user"></i> Profile</a>

<a href="#"><i class="fas fa-fw fa-cog"></i> Settings</a>

<a href="#"><i class="fas fa-fw fa-sign-out-alt"></i> Logout</a>

</div>

<h1>Dashboard</h1>

<li><a href="#">Dashboard</a></li>

</ul>

</div>

</div>

<p>Total Users</p>

</div>

</div>

<p>Total Orders</p>

</div>

</div>

<p>Total Products</p>

</div>

</div>

<p>Total Revenue</p>

</div>

<h3>Revenue Overview</h3>

</div>

</div>

<h3>Recent Orders</h3>

</div>

<table>

<thead>

<tr>

<th>Order ID</th>

<th>Customer</th>

<th>Amount</th>

<th>Status</th>

<th>Action</th>

</tr>

</thead>

<tbody>

<tr>

<td>John Smith</td>

<td><span class="badge badge-success">Completed</span></td>

</tr>

<tr>

<td>Sarah Johnson</td>

<td><span class="badge badge-success">Completed</span></td>

</tr>

<tr>

<td>Michael Brown</td>

<td><span class="badge badge-warning">Processing</span></td>

</tr>

<tr>

<td>Emily Davis</td>

<td><span class="badge badge-danger">Cancelled</span></td>

</tr>

<tr>

<td>Robert Wilson</td>

<td><span class="badge badge-success">Completed</span></td>

</tr>

</tbody>

</table>

</div>

// Initialize revenue chart

const revenueCtx = document.getElementById('revenueChart').getContext('2d');

const revenueChart = new Chart(revenueCtx, {

type: 'line',

data: {

labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

datasets: [{

label: 'Revenue',

data: [5000, 7500, 6500, 9000, 12000, 15000, 14000, 16000, 12500, 17000, 20000, 22000],

backgroundColor: 'rgba(78, 115, 223, 0.05)',

borderColor: 'rgba(78, 115, 223, 1)',

borderWidth: 2,

pointBackgroundColor: 'rgba(78, 115, 223, 1)',

pointBorderColor: '#fff',

pointHoverRadius: 5,

pointHoverBackgroundColor: 'rgba(78, 115, 223, 1)',

pointHoverBorderColor: '#fff',

pointHitRadius: 10,

pointBorderWidth: 2,

tension: 0.3

}]

},

options: {

maintainAspectRatio: false,

plugins: {

legend: {

display: false

}

},

scales: {

y: {

beginAtZero: true,

grid: {

color: 'rgba(0, 0, 0, 0.05)'

}

},

x: {

grid: {

display: false

}

});

// Toggle sidebar on mobile

document.querySelector('.sidebar-toggle').addEventListener('click', function() {

document.querySelector('.sidebar').classList.toggle('active');

document.querySelector('.main-content').classList.toggle('active');

});

// Dropdown functionality

document.querySelectorAll('.dropdown').forEach(function(dropdown) {

dropdown.addEventListener('click', function(e) {

e.stopPropagation();

this.querySelector('.dropdown-content').classList.toggle('show');

});

// Close dropdowns when clicking outside

window.addEventListener('click', function() {

document.querySelectorAll('.dropdown-content').forEach(function(dropdown) {

dropdown.classList.remove('show');

});

</script>

</body>

</html>

Admin dashboard

Recommended

Journey to 100 Followers

HTML Login Form Example

CARTE DE CONNEXION

HTML

CSS

JS

Recommended

Journey to 100 Followers

HTML Login Form Example

CARTE DE CONNEXION

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS