Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Financiero - MiPyme SL</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 20px; }
.container { max-width: 1000px; margin: auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
h1 { color: #2c3e50; text-align: center; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
.kpi-container { display: flex; justify-content: space-around; margin-bottom: 30px; gap: 20px; flex-wrap: wrap; }
.kpi-card { background: #fff; border-left: 5px solid #3498db; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); flex: 1; min-width: 200px; text-align: center; }
.kpi-card h3 { margin: 0; font-size: 14px; color: #7f8c8d; text-transform: uppercase; }
.kpi-card p { margin: 10px 0 0; font-size: 24px; font-weight: bold; color: #2c3e50; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
@media (max-width: 768px) { .chart-grid { grid-template-columns: 1fr; } }
.analysis { margin-top: 30px; line-height: 1.6; background: #eef2f3; padding: 20px; border-radius: 8px; }
.status-good { color: #27ae60; } .status-warning { color: #f39c12; } .status-critical { color: #e74c3c; }
</style>
</head>
<body>
<div class="container">
# Análisis Económico-Financiero 2026
<div class="kpi-container">
<div class="kpi-card">
### Ventas Proyectadas
<p>1.400.000€</p>
<small class="status-warning">Estable</small>
</div>
<div class="kpi-card" style="border-left-color: #f39c12;">
### EBITDA
<p>~2%</p>
<small class="status-warning">Punto Muerto</small>
</div>
<div class="kpi-card" style="border-left-color: #e74c3c;">
### Carga Gastos Fijos
<p>4.500€/mes</p>
<small class="status-critical">Alta</small>
</div>
</div>
<div class="chart-grid">
<div><canvas id="expensesChart"></canvas></div>
<div><canvas id="categoryChart"></canvas></div>
</div>
<div class="analysis">
## Análisis de Situación
<ul>
<li><strong>Eficiencia Operativa:</strong> El gasto en gasóleo representa el 35% de los costes variables. Se recomienda optimización de rutas.</li>
<li><strong>Tesorería:</strong> El pago de seguros en Abril impactó la liquidez inmediata. Se sugiere prorratear pagos anuales si es posible.</li>
<li><strong>Oportunidad:</strong> Automatización administrativa para reducir costes indirectos y mejorar el control de facturación.</li>
</ul>
</div>
</div>
<script>
const ctxExpenses = document.getElementById('expensesChart').getContext('2d');
new Chart(ctxExpenses, {
type: 'line',
data: {
labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May (Est)'],
datasets: [{
label: 'Gastos Totales (€)',
data: [496, 10250, 9450, 15800, 11200],
borderColor: '#3498db',
fill: false,
tension: 0.1
}]
},
options: { responsive: true, plugins: { title: { display: true, text: 'Evolución de Gastos Mensuales' } } }
});
const ctxCategory = document.getElementById('categoryChart').getContext('2d');
new Chart(ctxCategory, {
type: 'doughnut',
data: {
labels: ['Transporte/Gasóleo', 'Alquiler/Suministros', 'Admin/Otros', 'Seguros'],
datasets: [{
data: [35, 30, 15, 20],
backgroundColor: ['#3498db', '#2ecc71', '#9b59b6', '#e74c3c']
}]
},
options: { responsive: true, plugins: { title: { display: true, text: 'Distribución de Costes' } } }
});
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
2
Domains
75KB
Transfer Size
207KB
Content Size
295.0ms
Dom Content Loaded
304.0ms
First Paint
295.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...