Scribd
Upload
8 views17 pages

CBC HTML

The document is an HTML template for a dashboard titled 'CBC Distribución', featuring a sidebar with navigation links for various sections such as Orders, Products, and Reports. It includes a responsive design with CSS styles for layout, typography, and interactive elements like notifications and search bars. The dashboard is structured to provide an organized and user-friendly interface for managing distribution tasks.

Uploaded by

Santiago Mendivelso
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
8 views17 pages

CBC HTML

The document is an HTML template for a dashboard titled 'CBC Distribución', featuring a sidebar with navigation links for various sections such as Orders, Products, and Reports. It includes a responsive design with CSS styles for layout, typography, and interactive elements like notifications and search bars. The dashboard is structured to provide an organized and user-friendly interface for managing distribution tasks.

Uploaded by

Santiago Mendivelso
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/ 17

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - CBC Distribución</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700
&display=swap" rel="stylesheet">
<style>
:root {
--primary: #1a522c; /* Verde oscuro */
--primary-dark: #0e351e; /* Verde más oscuro */
--secondary: #66bb6a; /* Verde brillante */
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--light-gray: #e9ecef;
--beige: #f5f3f0;
--marble: #e3f0eb; /* Fondo verdoso */
--danger: #dc3545;
--warning: #ffc107;
--info: #17a2b8;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Montserrat', sans-serif;
color: var(--dark);
line-height: 1.6;
background-color: #f5f7fa;
display: flex;
min-height: 100vh;
}

h1, h2, h3, h4, h5 {


font-family: 'Playfair Display', serif;
font-weight: 600;
letter-spacing: 0.5px;
}

/* Sidebar */
.sidebar {
width: 280px;
background: white;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
position: fixed;
height: 100vh;
transition: all 0.3s;
z-index: 1000;
}
.sidebar-header {
padding: 20px;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.sidebar-header h3 {
margin: 0;
font-size: 1.5rem;
}

.sidebar-menu {
padding: 20px 0;
}

.sidebar-menu ul {
list-style: none;
}

.sidebar-menu li {
position: relative;
}

.sidebar-menu a {
display: flex;
align-items: center;
padding: 12px 20px;
color: var(--dark);
text-decoration: none;
transition: all 0.3s;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
background: rgba(102, 187, 106, 0.1);
color: var(--primary);
}

.sidebar-menu a i {
margin-right: 10px;
width: 20px;
text-align: center;
}

.sidebar-menu .badge {
position: absolute;
right: 20px;
background: var(--secondary);
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
}

/* Main Content */
.main-content {
flex: 1;
margin-left: 280px;
transition: all 0.3s;
}

/* Top Navbar */
.top-navbar {
background: white;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 100;
}

.search-bar {
position: relative;
width: 400px;
}

.search-bar input {
width: 100%;
padding: 10px 15px 10px 40px;
border: 1px solid var(--light-gray);
border-radius: 30px;
outline: none;
transition: all 0.3s;
}

.search-bar input:focus {
border-color: var(--secondary);
}

.search-bar i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--gray);
}

.user-menu {
display: flex;
align-items: center;
}

.user-menu .notification {
position: relative;
margin-right: 20px;
cursor: pointer;
}
.user-menu .notification i {
font-size: 1.2rem;
color: var(--gray);
}

.user-menu .notification .badge {


position: absolute;
top: -5px;
right: -5px;
background: var(--danger);
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
}

.user-menu .user-profile {
display: flex;
align-items: center;
cursor: pointer;
}

.user-menu .user-profile img {


width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
object-fit: cover;
}

.user-menu .user-profile span {


font-weight: 500;
}

/* Dashboard Content */
.dashboard-content {
padding: 30px;
}

.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}

.page-header h2 {
color: var(--primary);
font-size: 1.8rem;
}

.breadcrumb {
display: flex;
list-style: none;
}
.breadcrumb li {
margin-right: 10px;
font-size: 0.9rem;
color: var(--gray);
}

.breadcrumb li:after {
content: '/';
margin-left: 10px;
}

.breadcrumb li:last-child:after {
content: '';
}

.breadcrumb li a {
color: var(--gray);
text-decoration: none;
transition: all 0.3s;
}

.breadcrumb li a:hover {
color: var(--primary);
}

/* Stats Cards */
.stats-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}

.stats-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
transition: all 0.3s;
}

.stats-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.stats-card .card-icon {
position: absolute;
right: 20px;
top: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
opacity: 0.2;
}

.stats-card .card-title {
font-size: 0.9rem;
color: var(--gray);
margin-bottom: 10px;
}

.stats-card .card-value {
font-size: 1.8rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 5px;
}

.stats-card .card-change {
font-size: 0.8rem;
display: flex;
align-items: center;
}

.stats-card .card-change.positive {
color: var(--secondary);
}

.stats-card .card-change.negative {
color: var(--danger);
}

/* Charts Section */
.charts-section {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-bottom: 30px;
}

@media (max-width: 1200px) {


.charts-section {
grid-template-columns: 1fr;
}
}

.chart-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.chart-header h3 {
font-size: 1.2rem;
color: var(--dark);
}

.chart-header .chart-actions {
display: flex;
}

.chart-header .chart-actions select {


padding: 5px 10px;
border: 1px solid var(--light-gray);
border-radius: 5px;
outline: none;
font-size: 0.8rem;
}

.chart-container {
height: 300px;
position: relative;
}

/* Recent Orders */
.recent-orders {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
}

.recent-orders-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.recent-orders-header h3 {
font-size: 1.2rem;
color: var(--dark);
}

.recent-orders-header a {
color: var(--primary);
text-decoration: none;
font-size: 0.9rem;
display: flex;
align-items: center;
}

.recent-orders-header a i {
margin-left: 5px;
}

.table-responsive {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--light-gray);
}

th {
font-weight: 600;
color: var(--gray);
font-size: 0.8rem;
text-transform: uppercase;
}

td {
font-size: 0.9rem;
}

.status {
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}

.status.completed {
background: rgba(102, 187, 106, 0.1);
color: var(--secondary);
}

.status.pending {
background: rgba(255, 193, 7, 0.1);
color: var(--warning);
}

.status.cancelled {
background: rgba(220, 53, 69, 0.1);
color: var(--danger);
}

.status.processing {
background: rgba(23, 162, 184, 0.1);
color: var(--info);
}

/* Top Products */
.top-products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}

.product-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.product-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}

.product-card-header h3 {
font-size: 1.2rem;
color: var(--dark);
}

.product-item {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--light-gray);
}

.product-item:last-child {
border-bottom: none;
}

.product-item img {
width: 50px;
height: 50px;
border-radius: 5px;
object-fit: cover;
margin-right: 15px;
}

.product-info {
flex: 1;
}

.product-info h4 {
font-size: 0.9rem;
margin-bottom: 5px;
}

.product-info p {
font-size: 0.8rem;
color: var(--gray);
}

.product-sales {
font-weight: 600;
color: var(--primary);
}

/* Responsive */
@media (max-width: 992px) {
.sidebar {
width: 80px;
overflow: hidden;
}

.sidebar-header h3,
.sidebar-menu a span {
display: none;
}

.sidebar-menu a {
justify-content: center;
}

.sidebar-menu a i {
margin-right: 0;
font-size: 1.2rem;
}

.sidebar-menu .badge {
right: 5px;
}

.main-content {
margin-left: 80px;
}
}

@media (max-width: 768px) {


.top-navbar {
flex-direction: column;
padding: 15px;
}

.search-bar {
width: 100%;
margin-bottom: 15px;
}

.user-menu {
width: 100%;
justify-content: space-between;
}
}

/* Toggle Sidebar */
.sidebar-toggle {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
z-index: 1001;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

@media (max-width: 576px) {


.sidebar {
transform: translateX(-100%);
}

.sidebar.active {
transform: translateX(0);
}

.main-content {
margin-left: 0;
}

.sidebar-toggle {
display: flex;
}
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-header">
<h3>CBC Dashboard</h3>
</div>
<div class="sidebar-menu">
<ul>
<li>
<a href="#" class="active">
<i class="fas fa-home"></i>
<span>Inicio</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-shopping-cart"></i>
<span>Pedidos</span>
<span class="badge">5</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-box-open"></i>
<span>Productos</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<span>Clientes</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-line"></i>
<span>Reportes</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-truck"></i>
<span>Envíos</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-file-invoice-dollar"></i>
<span>Facturación</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<span>Configuración</span>
</a>
</li>
</ul>
</div>
</div>

<!-- Main Content -->


<div class="main-content">
<!-- Top Navbar -->
<div class="top-navbar">
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="Buscar...">
</div>
<div class="user-menu">
<div class="notification">
<i class="fas fa-bell"></i>
<span class="badge">3</span>
</div>
<div class="user-profile">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Usuario">
<span>Admin CBC</span>
</div>
</div>
</div>

<!-- Dashboard Content -->


<div class="dashboard-content">
<div class="page-header">
<h2>Panel de Control</h2>
<ul class="breadcrumb">
<li><a href="#">Inicio</a></li>
<li>Dashboard</li>
</ul>
</div>

<!-- Stats Cards -->


<div class="stats-cards">
<div class="stats-card">
<div class="card-icon" style="background: rgba(102, 187, 106, 0.1);
color: var(--secondary);">
<i class="fas fa-dollar-sign"></i>
</div>
<div class="card-title">Ventas Totales</div>
<div class="card-value">$12,345,678</div>
<div class="card-change positive">
<i class="fas fa-arrow-up"></i> 12% vs mes anterior
</div>
</div>
<div class="stats-card">
<div class="card-icon" style="background: rgba(23, 162, 184, 0.1); color:
var(--info);">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="card-title">Pedidos</div>
<div class="card-value">1,234</div>
<div class="card-change positive">
<i class="fas fa-arrow-up"></i> 8% vs mes anterior
</div>
</div>
<div class="stats-card">
<div class="card-icon" style="background: rgba(255, 193, 7, 0.1); color:
var(--warning);">
<i class="fas fa-users"></i>
</div>
<div class="card-title">Clientes</div>
<div class="card-value">456</div>
<div class="card-change positive">
<i class="fas fa-arrow-up"></i> 5% vs mes anterior
</div>
</div>
<div class="stats-card">
<div class="card-icon" style="background: rgba(220, 53, 69, 0.1); color:
var(--danger);">
<i class="fas fa-box-open"></i>
</div>
<div class="card-title">Inventario</div>
<div class="card-value">3,456</div>
<div class="card-change negative">
<i class="fas fa-arrow-down"></i> 3% vs mes anterior
</div>
</div>
</div>

<!-- Charts Section -->


<div class="charts-section">
<div class="chart-card">
<div class="chart-header">
<h3>Ventas Mensuales</h3>
<div class="chart-actions">
<select>
<option>Últimos 6 meses</option>
<option>Este año</option>
<option>Año pasado</option>
</select>
</div>
</div>
<div class="chart-container">
<!-- Aquí iría el gráfico (usando Chart.js, Highcharts, etc.) -->
<div style="width: 100%; height: 100%; background: #f8f9fa; display:
flex; align-items: center; justify-content: center; color: var(--gray);">
Gráfico de Ventas Mensuales
</div>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<h3>Ventas por Categoría</h3>
<div class="chart-actions">
<select>
<option>Este mes</option>
<option>Mes pasado</option>
<option>Este año</option>
</select>
</div>
</div>
<div class="chart-container">
<!-- Aquí iría el gráfico -->
<div style="width: 100%; height: 100%; background: #f8f9fa; display:
flex; align-items: center; justify-content: center; color: var(--gray);">
Gráfico de Ventas por Categoría
</div>
</div>
</div>
</div>

<!-- Recent Orders -->


<div class="recent-orders">
<div class="recent-orders-header">
<h3>Pedidos Recientes</h3>
<a href="#">Ver todos <i class="fas fa-arrow-right"></i></a>
</div>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>ID Pedido</th>
<th>Cliente</th>
<th>Fecha</th>
<th>Total</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>#CBC-1001</td>
<td>Juan Pérez</td>
<td>15/07/2023</td>
<td>$1,250,000</td>
<td><span class="status completed">Completado</span></td>
<td><a href="#"><i class="fas fa-eye"></i></a></td>
</tr>
<tr>
<td>#CBC-1002</td>
<td>Construcciones ABC</td>
<td>14/07/2023</td>
<td>$3,450,000</td>
<td><span class="status processing">Procesando</span></td>
<td><a href="#"><i class="fas fa-eye"></i></a></td>
</tr>
<tr>
<td>#CBC-1003</td>
<td>María Gómez</td>
<td>13/07/2023</td>
<td>$850,000</td>
<td><span class="status pending">Pendiente</span></td>
<td><a href="#"><i class="fas fa-eye"></i></a></td>
</tr>
<tr>
<td>#CBC-1004</td>
<td>Hotel XYZ</td>
<td>12/07/2023</td>
<td>$5,750,000</td>
<td><span class="status processing">Procesando</span></td>
<td><a href="#"><i class="fas fa-eye"></i></a></td>
</tr>
<tr>
<td>#CBC-1005</td>
<td>Carlos Rodríguez</td>
<td>11/07/2023</td>
<td>$620,000</td>
<td><span class="status cancelled">Cancelado</span></td>
<td><a href="#"><i class="fas fa-eye"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>

<!-- Top Products -->


<div class="top-products">
<div class="product-card">
<div class="product-card-header">
<h3>Productos Más Vendidos</h3>
<a href="#">Ver todos</a>
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?
ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=1470&q=80" alt="Ducha Premium">
<div class="product-info">
<h4>Ducha de Lluvia Premium</h4>
<p>Categoría: Duchas</p>
</div>
<div class="product-sales">256</div>
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1600566752227-09d4b8f6a0f7?
ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=1470&q=80" alt="Lavabo Moderno">
<div class="product-info">
<h4>Lavabo Empotrado Moderno</h4>
<p>Categoría: Lavabos</p>
</div>
<div class="product-sales">189</div>
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?
ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=1740&q=80" alt="Griferia Dorada">
<div class="product-info">
<h4>Grifería Monomando Dorada</h4>
<p>Categoría: Grifería</p>
</div>
<div class="product-sales">145</div>
</div>
</div>
<div class="product-card">
<div class="product-card-header">
<h3>Productos con Bajo Stock</h3>
<a href="#">Ver todos</a>
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?
ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=1470&q=80" alt="Mueble Baño">
<div class="product-info">
<h4>Mueble de Baño 80cm</h4>
<p>Categoría: Muebles</p>
</div>
<div class="product-sales">3 en stock</div>
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?
ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=1470&q=80" alt="Cabina Ducha">
<div class="product-info">
<h4>Cabina de Ducha 90x90</h4>
<p>Categoría: Duchas</p>
</div>
<div class="product-sales">5 en stock</div>
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?
ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=1470&q=80" alt="Bañera Hidromasaje">
<div class="product-info">
<h4>Bañera con Hidromasaje</h4>
<p>Categoría: Bañeras</p>
</div>
<div class="product-sales">2 en stock</div>
</div>
</div>
</div>
</div>
</div>

<!-- Sidebar Toggle (Mobile) -->


<div class="sidebar-toggle">
<i class="fas fa-bars"></i>
</div>

<script>
// Toggle Sidebar on Mobile
const sidebarToggle = document.querySelector('.sidebar-toggle');
const sidebar = document.querySelector('.sidebar');
sidebarToggle.addEventListener('click', () => {
sidebar.classList.toggle('active');
});

// Simulated data for charts (in a real app, you would use Chart.js or similar)
// This is just a placeholder for the demo
console.log('Dashboard loaded');

// You would typically initialize charts here


// Example with Chart.js:
/*
const salesChart = new Chart(document.getElementById('salesChart'), {
type: 'line',
data: {
labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'],
datasets: [{
label: 'Ventas 2023',
data: [12000000, 19000000, 3000000, 5000000, 2000000, 3000000],
backgroundColor: 'rgba(102, 187, 106, 0.2)',
borderColor: 'rgba(102, 187, 106, 1)',
borderWidth: 2,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
*/
</script>
</body>
</html>

You might also like