Webleb - fragmentos de código - Plantilla de panel de administración HTML con CSS y gráficos

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>

Plantilla de panel de administración HTML con CSS y gráficos

Recomendado

Juego de combinación de colores

Plantilla HTML de página de error 404

Texto resplandeciente

HTML

CSS

JS

Recomendado

Juego de combinación de colores

Plantilla HTML de página de error 404

Texto resplandeciente

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS