Skip to content

Instantly share code, notes, and snippets.

@Jcbertorello

Jcbertorello/dashboard.html

Created December 28, 2025 19:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Jcbertorello/fc4fd3ffd670e5de1fe14726cd4ec2b6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Jcbertorello/fc4fd3ffd670e5de1fe14726cd4ec2b6 to your computer and use it in GitHub Desktop.
Download ZIP
Dashboard Ajonjolí - 2025-12-28 19:28
Raw
dashboard.html
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recaudación y Entradas Netas - Agosto 2025 - Cinexo Analytics</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<style>
/* === VARIABLES CINEXO === */
:root {
--cinexo-blue: #1E3A8A;
--cinexo-blue-light: #3B5998;
--cinexo-blue-dark: #1E2A5E;
--cinexo-blue-bg: #0F172A;
--cinexo-orange: #F97316;
--cinexo-orange-light: #FB923C;
--cinexo-orange-dark: #EA580C;
--color-boleteria: #1E3A8A;
--color-candy: #F97316;
--color-total: #6366F1;
--color-success: #10B981;
--color-success-light: #D1FAE5;
--color-danger: #EF4444;
--color-danger-light: #FEE2E2;
--color-warning: #F59E0B;
--bg-primary: #F8FAFC;
--bg-card: #FFFFFF;
--text-primary: #1E293B;
--text-secondary: #475569;
--text-muted: #64748B;
--border-light: #E2E8F0;
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
--shadow-blue: 0 4px 20px rgba(30, 58, 138, 0.3);
}
/* === RESET === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', system-ui, sans-serif;
background: linear-gradient(180deg, var(--bg-primary) 0%, #EEF2FF 100%);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
.dashboard {
max-width: 1280px;
margin: 0 auto;
padding: 32px 24px;
}
/* === HEADER CINEXO === */
.header {
background: linear-gradient(135deg, var(--cinexo-blue) 0%, var(--cinexo-blue-bg) 100%);
border-radius: 20px;
padding: 28px 32px;
margin-bottom: 24px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow-blue);
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: -100px;
right: -50px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--cinexo-orange), var(--cinexo-orange-light), var(--cinexo-orange));
}
.header-left {
display: flex;
align-items: center;
gap: 16px;
z-index: 1;
}
.logo-cinexo {
width: 56px;
height: 56px;
background: white;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 800;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
.logo-cinexo .logo-blue { color: var(--cinexo-blue); }
.logo-cinexo .logo-orange { color: var(--cinexo-orange); margin-left: -2px; }
.header-info h1 {
color: white;
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.header-info p {
color: rgba(255,255,255,0.8);
font-size: 0.9rem;
margin-top: 2px;
}
.header-actions {
display: flex;
gap: 12px;
z-index: 1;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.btn-primary {
background: linear-gradient(135deg, var(--cinexo-orange), var(--cinexo-orange-dark));
color: white;
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}
.btn-secondary {
background: rgba(255,255,255,0.15);
color: white;
border: 1px solid rgba(255,255,255,0.3);
}
.btn-secondary:hover { background: rgba(255,255,255,0.25); }
.info-bar {
background: var(--bg-card);
border-radius: 12px;
padding: 16px 24px;
margin-bottom: 24px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow-md);
border-left: 4px solid var(--cinexo-blue);
flex-wrap: wrap;
gap: 12px;
}
.info-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: var(--text-muted);
}
.info-item strong {
color: var(--text-primary);
font-weight: 600;
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
.kpi-card {
background: var(--bg-card);
border-radius: 16px;
padding: 24px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border-light);
}
.kpi-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--cinexo-blue), var(--cinexo-blue-light));
}
.kpi-card.total::before { background: linear-gradient(90deg, #6366F1, #818CF8); }
.kpi-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg), var(--shadow-blue);
}
.kpi-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(30, 58, 138, 0.1), rgba(30, 58, 138, 0.05));
}
.kpi-card.total .kpi-icon {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
}
.kpi-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 8px;
}
.kpi-value {
font-size: 2rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1.1;
margin-bottom: 8px;
font-feature-settings: 'tnum';
}
.kpi-value.small { font-size: 1.75rem; }
.kpi-detail {
font-size: 0.85rem;
color: var(--text-secondary);
}
.grid-container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.card {
background: var(--bg-card);
border-radius: 16px;
padding: 24px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-light);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-light);
}
.card-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
}
.card-subtitle {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 2px;
}
.chart-container { height: 350px; position: relative; }
.chart-container.small { height: 265px; }
.table-wrapper { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { background: linear-gradient(180deg, var(--bg-primary), #F1F5F9); }
.data-table th {
padding: 14px 16px;
text-align: left;
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
border-bottom: 2px solid var(--border-light);
}
.data-table td {
padding: 16px;
border-bottom: 1px solid var(--border-light);
font-size: 0.9rem;
color: var(--text-primary);
}
.data-table tbody tr:hover td { background: rgba(30, 58, 138, 0.03); }
.data-table tbody tr:last-child td { border-bottom: none; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.text-muted-row td { color: var(--text-muted); font-style: italic; }
.rank-medal {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.85rem;
}
.rank-1 { background: linear-gradient(135deg, #FFD700, #FFA500); color: white; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4); }
.rank-2 { background: linear-gradient(135deg, #E8E8E8, #B8B8B8); color: white; }
.rank-3 { background: linear-gradient(135deg, #CD7F32, #8B4513); color: white; }
.rank-other { background: var(--bg-primary); color: var(--text-muted); }
.footer {
margin-top: 40px;
padding: 24px;
background: linear-gradient(135deg, var(--cinexo-blue-bg) 0%, var(--cinexo-blue) 100%);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--cinexo-orange), var(--cinexo-orange-light), var(--cinexo-orange));
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-logo {
width: 40px;
height: 40px;
background: white;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1rem;
}
.footer-logo .f-blue { color: var(--cinexo-blue); }
.footer-logo .f-orange { color: var(--cinexo-orange); }
.footer-text { color: rgba(255,255,255,0.9); font-size: 0.85rem; }
.footer-text strong { display: block; font-weight: 700; color: white; }
.footer-text small { color: rgba(255,255,255,0.6); font-size: 0.75rem; }
.footer-date { color: rgba(255,255,255,0.6); font-size: 0.8rem; }
@media (max-width: 1024px) {
.grid-container { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
.header { flex-direction: column; gap: 16px; text-align: center; }
.header-actions { justify-content: center; }
.footer-content { flex-direction: column; gap: 16px; text-align: center; }
}
@media (max-width: 500px) {
.kpi-grid { grid-template-columns: 1fr; }
.dashboard { padding: 16px; }
.info-bar { flex-direction: column; align-items: flex-start; }
}
@media print {
body { background: white !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
.header-actions { display: none !important; }
.dashboard { padding: 16px !important; max-width: 100% !important; }
.header, .footer { box-shadow: none !important; -webkit-print-color-adjust: exact !important; }
.kpi-card, .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid !important; }
.kpi-card:hover, .card:hover { transform: none !important; }
}
</style>
</head>
<body>
<div class="dashboard">
<header class="header">
<div class="header-left">
<div class="logo-cinexo">
<span class="logo-blue">C</span><span class="logo-orange">X</span>
</div>
<div class="header-info">
<h1>Recaudación y Entradas Netas - Agosto 2025</h1>
<p>Cinexo Analytics • Agosto 2025</p>
</div>
</div>
<div class="header-actions">
<button class="btn btn-secondary" onclick="window.print()">🖨️ Imprimir</button>
<button class="btn btn-primary" onclick="window.print()">📥 Descargar PDF</button>
</div>
</header>
<div class="info-bar">
<div class="info-item">📅 <strong>Período:</strong> 01/08/2025 al 31/08/2025</div>
<div class="info-item">🎬 <strong>Funciones:</strong> 1.245</div>
<div class="info-item">📊 <strong>Tipo:</strong> Taquilla</div>
</div>
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-icon">💰</div>
<div class="kpi-label">Recaudación Boletería</div>
<div class="kpi-value small">$114.1M</div>
<div class="kpi-detail">Ingresos netos del período</div>
</div>
<div class="kpi-card">
<div class="kpi-icon">🎟️</div>
<div class="kpi-label">Espectadores Totales</div>
<div class="kpi-value">22.223</div>
<div class="kpi-detail">Entradas vendidas</div>
</div>
<div class="kpi-card total">
<div class="kpi-icon">📈</div>
<div class="kpi-label">Ticket Promedio</div>
<div class="kpi-value">$5,137</div>
<div class="kpi-detail">Por espectador</div>
</div>
</div>
<div class="grid-container">
<div class="card">
<div class="card-header">
<div>
<div class="card-title">📈 Tendencia Diaria de Ingresos</div>
<div class="card-subtitle">Recaudación por día en Agosto 2025</div>
</div>
</div>
<div class="chart-container">
<canvas id="chartTendencia"></canvas>
</div>
</div>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">📊 Composición por Tarifa</div>
<div class="card-subtitle">Participación sobre la recaudación total</div>
</div>
</div>
<div class="chart-container small">
<canvas id="chartTarifas"></canvas>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">📋 Desglose de Venta por Tarifa</div>
<div class="card-subtitle">Ranking de tarifas por recaudación</div>
</div>
</div>
<div class="table-wrapper">
<table class="data-table">
<thead>
<tr>
<th>#</th>
<th>Tarifa</th>
<th class="text-right">Entradas</th>
<th class="text-right">Recaudación</th>
</tr>
</thead>
<tbody>
<tr><td><span class="rank-medal rank-1">1</span></td><td class="font-bold">-12/+60/ CUD 3D</td><td class="text-right">10.721</td><td class="text-right font-bold">$48.332.000</td></tr>
<tr><td><span class="rank-medal rank-2">2</span></td><td class="font-bold">2X1 LAS TIPAS 2D</td><td class="text-right">4.686</td><td class="text-right font-bold">$28.116.000</td></tr>
<tr><td><span class="rank-medal rank-3">3</span></td><td class="font-bold">2X1 LAS TIPAS 2D WEB</td><td class="text-right">3.225</td><td class="text-right font-bold">$19.350.000</td></tr>
<tr><td><span class="rank-medal rank-other">4</span></td><td>PROMO BUTACA 4D WEB</td><td class="text-right">556</td><td class="text-right font-bold">$5.838.000</td></tr>
<tr><td><span class="rank-medal rank-other">5</span></td><td>PROMO INAUGURACION</td><td class="text-right">1.288</td><td class="text-right font-bold">$5.152.000</td></tr>
<tr><td><span class="rank-medal rank-other">6</span></td><td>PROMO BUTACA 4D</td><td class="text-right">259</td><td class="text-right font-bold">$2.719.500</td></tr>
<tr><td><span class="rank-medal rank-other">7</span></td><td>-12/+60/ CUD 2D</td><td class="text-right">417</td><td class="text-right font-bold">$2.502.000</td></tr>
<tr><td><span class="rank-medal rank-other">8</span></td><td>2x1 MICROPACK </td><td class="text-right">154</td><td class="text-right font-bold">$924.000</td></tr>
<tr><td><span class="rank-medal rank-other">9</span></td><td>2X1 LAS TIPAS 3D WEB</td><td class="text-right">111</td><td class="text-right font-bold">$749.250</td></tr>
<tr><td><span class="rank-medal rank-other">10</span></td><td>2X1 LAS TIPAS 3D</td><td class="text-right">41</td><td class="text-right font-bold">$276.750</td></tr>
<tr><td><span class="rank-medal rank-other">11</span></td><td>PROMO LAS TIPAS STANDAR 2D WEB</td><td class="text-right">11</td><td class="text-right font-bold">$99.000</td></tr>
<tr><td><span class="rank-medal rank-other">12</span></td><td>PROMO LAS TIPAS STANDAR 3D WEB</td><td class="text-right">8</td><td class="text-right font-bold">$74.000</td></tr>
<tr><td><span class="rank-medal rank-other">13</span></td><td>PROMO LAS TIPAS STANDAR 2D</td><td class="text-right">2</td><td class="text-right font-bold">$18.000</td></tr>
<tr class="text-muted-row"><td>-</td><td>Invitacion</td><td class="text-right">575</td><td class="text-right">$0</td></tr>
<tr class="text-muted-row"><td>-</td><td>SIN CARGO 4D</td><td class="text-right">169</td><td class="text-right">$0</td></tr>
<tr class="text-muted-row"><td>-</td><td>PROMO LAS TIPAS STANDAR 3D</td><td class="text-right">0</td><td class="text-right">$0</td></tr>
</tbody>
</table>
</div>
</div>
<footer class="footer">
<div class="footer-content">
<div class="footer-brand">
<div class="footer-logo">
<span class="f-blue">C</span><span class="f-orange">X</span>
</div>
<div class="footer-text">
<strong>Cinexo Analytics</strong>
<small>Llevá tu cine al próximo nivel</small>
</div>
</div>
<div class="footer-date">
Generado: 1 de Septiembre de 2025, 09:30 AM
</div>
</div>
</footer>
</div>
<script>
Chart.register(ChartDataLabels);
Chart.defaults.font.family = "'Inter', system-ui, sans-serif";
Chart.defaults.font.size = 12;
Chart.defaults.color = '#64748B';
Chart.defaults.plugins.legend.labels.usePointStyle = true;
Chart.defaults.plugins.legend.labels.padding = 20;
Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(15, 23, 42, 0.95)';
Chart.defaults.plugins.tooltip.titleFont = { size: 13, weight: '600' };
Chart.defaults.plugins.tooltip.padding = 12;
Chart.defaults.plugins.tooltip.cornerRadius = 8;
Chart.defaults.animation.duration = 1000;
Chart.defaults.animation.easing = 'easeOutQuart';
const cinexoColors = {
blue: '#1E3A8A', blueLight: '#3B5998', orange: '#F97316', orangeLight: '#FB923C',
boleteria: '#1E3A8A', candy: '#F97316',
palette: ['#1E3A8A', '#F97316', '#6366F1', '#10B981', '#F59E0B', '#475569']
};
function formatCurrency(value) {
if (value >= 1000000) return '$' + (value / 1000000).toFixed(1).replace('.', ',') + 'M';
if (value >= 1000) return '$' + (value / 1000).toFixed(0) + 'K';
return '$' + value.toLocaleString('es-AR');
}
function formatNumber(value) { return value.toLocaleString('es-AR'); }
function formatPercent(value) { return value.toFixed(1).replace('.', ',') + '%'; }
// GRÁFICO TENDENCIA DIARIA
const tendenciaData = [3422250, 6390250, 5825000, 669500, 900000, 1069000, 1263500, 2471000, 5425000, 5786500, 857500, 902000, 1229500, 3363500, 7116500, 8936000, 9236000, 1782000, 2954000, 2901500, 1927000, 4353000, 7133500, 7180500, 772500, 1009500, 1434500, 1011500, 2038000, 5659000, 9131000];
const tendenciaLabels = Array.from({length: 31}, (_, i) => (i + 1).toString().padStart(2, '0') + '/08');
new Chart(document.getElementById('chartTendencia'), {
type: 'line',
data: {
labels: tendenciaLabels,
datasets: [{
label: 'Ingresos',
data: tendenciaData,
borderColor: cinexoColors.blue,
backgroundColor: (context) => {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) return null;
const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(0, 'rgba(30, 58, 138, 0)');
gradient.addColorStop(1, 'rgba(30, 58, 138, 0.2)');
return gradient;
},
fill: true,
tension: 0.4,
borderWidth: 3,
pointRadius: 0,
pointHoverRadius: 6,
pointBackgroundColor: '#fff',
pointBorderColor: cinexoColors.blue,
pointBorderWidth: 3
}]
},
options: {
responsive: true, maintainAspectRatio: false,
interaction: { intersect: false, mode: 'index' },
plugins: {
legend: { display: false },
datalabels: { display: false },
tooltip: {
callbacks: { label: (context) => ` ${context.dataset.label}: ${formatCurrency(context.raw)}` }
}
},
scales: {
y: {
beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' },
ticks: { callback: (v) => formatCurrency(v) }
},
x: {
grid: { display: false },
ticks: {
autoSkip: true,
maxTicksLimit: 15
}
}
}
}
});
// GRÁFICO DONA TARIFAS
new Chart(document.getElementById('chartTarifas'), {
type: 'doughnut',
data: {
labels: ['-12/+60/ CUD 3D', '2X1 LAS TIPAS 2D', '2X1 LAS TIPAS 2D WEB', 'PROMO BUTACA 4D WEB', 'PROMO INAUGURACION', 'Otras'],
datasets: [{
data: [48332000, 28116000, 19350000, 5838000, 5152000, 7362500],
backgroundColor: cinexoColors.palette,
borderColor: '#FFFFFF',
borderWidth: 4,
hoverOffset: 15
}]
},
options: {
responsive: true, maintainAspectRatio: false,
cutout: '65%',
plugins: {
legend: {
position: 'bottom',
align: 'center',
labels: {
padding: 15,
boxWidth: 12,
boxHeight: 12
}
},
datalabels: {
color: '#fff',
font: { weight: 'bold', size: 14 },
formatter: (value, ctx) => {
const total = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
const pct = (value / total) * 100;
return pct > 5 ? Math.round(pct) + '%' : '';
}
}
}
}
});
</script>
</body>
</html>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment