Dashboard
En los sistemas de información, un cuadro de mando o dashboard es un tipo de interfaz gráfica de usuario que a menudo proporciona vistas rápidas de datos relevantes para un objetivo o proceso particular mediante una combinación de visualizaciones e información resumida.
Los dashboards son herramientas muy utilizadas para monitorizar, analizar y presentar datos de manera que los usuarios puedan tomar decisiones informadas rápidamente
HTML-La estructura
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sidebar">
<h2>Dashboard</h2>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Reportes</a></li>
<li><a href="#">Usuarios</a></li>
<li><a href="#">Configuración</a></li>
</ul>
</div>
<div class="content">
<header>
<h1>Bienvenido al Dashboard</h1>
</header>
<main>
<section class="card">
<h3>Resumen</h3>
<p>Contenido del resumen aquí.</p>
</section>
<section class="card">
<h3>Estadísticas</h3>
<p>Contenido de las estadísticas aquí.</p>
</section>
</main>
</div>
<script src="scripts.js"></script>
</body>
</html>
CSS-La estética
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
}
.sidebar {
width: 250px;
background-color: #333;
color: white;
padding: 15px;
box-shadow: 2px 0 5px rgba(0,0,0,0.3);
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar h2 {
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #444;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul li {
margin: 15px 0;
}
.sidebar ul li a {
color: white;
text-decoration: none;
display: block;
padding: 10px;
border-radius: 5px;
}
.sidebar ul li a:hover {
background-color: #575757;
}
.content {
margin-left: 250px;
padding: 20px;
flex-grow: 1;
}
header {
margin-bottom: 20px;
}
.card {
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
.card h3 {
margin-top: 0;
}