Webleb - Snippet di Codice - Modello di dashboard di amministrazione HTML con CSS e grafici

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>Muhammad Hazrady Wijaya <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><span class="badge badge-success">Completed</span></td>

</tr>

<tr>

<td>Abdul syukur</td>

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

</tr>

<tr>

<td>Budi artono</td>

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

</tr>

<tr>

<td>Reka Agustiana </td>

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

</tr>

<tr>

<td>Wahyudi sudirman. Spd</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>

Modello di dashboard di amministrazione HTML con CSS e grafici

Consigliato

Emulatore di gioco HTML5 Street Fighter II Turbo

Aurora CSS

Frammento di codice di animazione CSS Dopamine Drip

HTML

CSS

JS

Consigliato

Emulatore di gioco HTML5 Street Fighter II Turbo

Aurora CSS

Frammento di codice di animazione CSS Dopamine Drip

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS