Mario Daniel Dominguez Sosa
a2bd6cb697
Extraído de autosanta-stack (agente de santa) para reusarlo en cualquier proyecto: plantilla base + 2 ejemplos + logo + Paged.js, sin dependencias de servidor. Ver AGENT_GUIDE.md.
173 lines
13 KiB
HTML
173 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RPT-2026-020 — Reporte de Estado de Red — ARS Integradores</title>
|
|
<style>
|
|
:root { --pink:#c81b74; --pink-light:#fce8f3; --dark:#2e2e2e; --mid:#666; --light:#f5f5f5; }
|
|
* { box-sizing:border-box; margin:0; padding:0; }
|
|
body { font-family:'Century Gothic',CenturyGothic,'Apple Gothic','Trebuchet MS',Arial,sans-serif; font-size:12px; color:var(--dark); }
|
|
body { background:#e5e5e5; padding:40px 20px; }
|
|
.screen-page { max-width:860px; margin:0 auto; background:#fff; box-shadow:0 6px 32px rgba(0,0,0,0.14); }
|
|
.export-btn { position:fixed; bottom:32px; right:32px; z-index:9999; background:var(--pink); color:#fff; border:none; padding:12px 24px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; border-radius:4px; box-shadow:0 4px 16px rgba(200,27,116,0.40); }
|
|
.export-btn:hover { background:#a5145e; }
|
|
html.paged body { background:#fff; padding:0; }
|
|
html.paged .screen-page { max-width:none; margin:0; box-shadow:none; }
|
|
html.paged .export-btn { display:none; }
|
|
html.paged .ars-header { position:running(arsHeader); }
|
|
html.paged .ars-footer { position:running(arsFooter); }
|
|
html.paged .page-break { break-before:page; }
|
|
@page { size:letter; margin-top:108px; margin-bottom:56px; margin-left:40px; margin-right:40px;
|
|
@top-left{content:element(arsHeader);width:100%;vertical-align:bottom;}
|
|
@bottom-left{content:element(arsFooter);width:100%;vertical-align:top;} }
|
|
@media print { *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;} }
|
|
.top-bar { display:flex; align-items:center; justify-content:space-between; padding:16px 40px 14px; background:#fff; border-bottom:2px solid var(--pink); width:100%; }
|
|
.ars-block { text-align:right; } .ars-logo { height:70px; display:block; }
|
|
.ars-url { font-size:14px; font-style:italic; font-weight:600; color:var(--pink); margin-top:4px; } .ars-url b { color:var(--dark); font-style:normal; }
|
|
.footer { border-top:2.5px solid var(--pink); padding:10px 40px; display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--mid); background:#fff; width:100%; }
|
|
.footer .office-label { color:var(--pink); font-style:italic; font-weight:600; } .footer .right { text-align:right; font-weight:600; color:var(--dark); line-height:1.6; }
|
|
.title-wrap { padding:32px 40px 24px; }
|
|
.title-block { background:var(--pink); clip-path:polygon(0 0,87% 0,100% 100%,0 100%); padding:26px 130px 26px 32px; }
|
|
.title-block .label { font-size:20px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:1px; line-height:1.1; margin-bottom:10px; }
|
|
.title-block .subtitle { font-size:15px; font-weight:300; color:#fff; text-transform:uppercase; line-height:1.4; }
|
|
.folio-bar { display:flex; justify-content:space-between; align-items:center; background:var(--pink-light); border-left:4px solid var(--pink); padding:8px 14px; margin:0 40px 18px; font-size:10px; }
|
|
.folio-bar .folio-num { font-size:13px; font-weight:800; color:var(--pink); letter-spacing:1px; }
|
|
.folio-bar .folio-meta { color:var(--mid); text-align:right; line-height:1.7; } .folio-bar .folio-meta b { color:var(--dark); }
|
|
.contract-info { padding:0 40px 20px; border-bottom:1px solid #e8e8e8; margin-bottom:20px; }
|
|
.contract-info .cname { font-size:14px; font-weight:700; color:var(--dark); text-transform:uppercase; line-height:1.65; margin-bottom:5px; }
|
|
.contract-info .cloc { font-size:13px; color:var(--mid); line-height:1.6; } .contract-info .cloc b { color:var(--dark); }
|
|
.resolved-bar { margin:0 40px 22px; background:#eafaf1; border-left:4px solid #2a9d8f; color:#0d4f3c; padding:10px 16px; font-size:11px; font-weight:600; letter-spacing:0.3px; display:flex; align-items:center; gap:10px; }
|
|
.resolved-bar .dot { width:8px; height:8px; border-radius:50%; background:#2a9d8f; flex-shrink:0; }
|
|
.body { padding:0 40px 36px; }
|
|
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:26px; }
|
|
.kpi { border:1px solid #e0e0e0; border-top:3px solid var(--dark); padding:14px 10px; text-align:center; }
|
|
.kpi.pink{border-top-color:var(--pink);} .kpi.red{border-top-color:#cc0000;} .kpi.amber{border-top-color:#c05000;} .kpi.green{border-top-color:#2a9d8f;}
|
|
.kpi .val{font-size:30px;font-weight:800;color:var(--dark);line-height:1;}
|
|
.kpi.pink .val{color:var(--pink);} .kpi.red .val{color:#cc0000;} .kpi.amber .val{color:#c05000;} .kpi.green .val{color:#1a7a6e;}
|
|
.kpi .lbl{font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:var(--mid);margin-top:6px;}
|
|
.section { margin-bottom:26px; } .section h2 { font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--pink); border-left:3px solid var(--pink); padding-left:10px; margin-bottom:12px; }
|
|
.section p { font-size:12px; line-height:1.8; color:var(--dark); margin-bottom:9px; } .section ul { padding-left:18px; margin-bottom:9px; } .section ul li { font-size:12px; line-height:1.8; margin-bottom:2px; }
|
|
.body table { width:100%; border-collapse:collapse; font-size:11px; margin-bottom:16px; }
|
|
.body table thead tr { background:var(--pink); } .body table thead th { padding:9px 12px; text-align:left; font-weight:600; font-size:9.5px; letter-spacing:0.5px; text-transform:uppercase; color:#fff; }
|
|
.body table tbody tr:nth-child(even) { background:#fdf2f8; } .body table tbody td { padding:8px 12px; border-bottom:1px solid #ecdde7; vertical-align:middle; }
|
|
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:9px; font-weight:700; letter-spacing:0.3px; }
|
|
.badge-ok{background:#eafaf1;color:#1a7a6e;} .badge-medium{background:#fef9e7;color:#906000;} .badge-critical{background:#fdecea;color:#b00;}
|
|
.highlight-box { background:var(--pink-light); border-left:3px solid var(--pink); padding:12px 16px; font-size:11px; color:#5a0030; line-height:1.8; margin-bottom:14px; }
|
|
.warn-box { background:#fef3e2; border-left:3px solid #c05000; padding:12px 16px; font-size:11px; color:#5a2000; line-height:1.8; margin-bottom:14px; }
|
|
.cause-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
|
|
.cause-card { background:var(--pink-light); border-left:3px solid var(--pink); padding:14px; }
|
|
.cause-card h4 { font-size:10px; font-weight:700; color:var(--pink); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; } .cause-card p { font-size:11px; color:#444; line-height:1.7; }
|
|
.rec-list { counter-reset:rec; list-style:none; padding:0; }
|
|
.rec-list li { counter-increment:rec; display:flex; gap:14px; margin-bottom:15px; align-items:flex-start; }
|
|
.rec-list li::before { content:counter(rec); flex-shrink:0; width:24px; height:24px; background:var(--pink); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
|
|
.rec-body h4 { font-size:10.5px; font-weight:700; color:var(--dark); text-transform:uppercase; letter-spacing:0.3px; margin-bottom:4px; } .rec-body p { font-size:11px; color:#444; line-height:1.75; }
|
|
.rec-body .tag { display:inline-block; margin-top:5px; padding:1px 8px; font-size:9px; font-weight:700; background:var(--pink-light); color:var(--pink); } .rec-body .tag.green{background:#eafaf1;color:#1a7a6e;} .rec-body .tag.amber{background:#fef3e2;color:#c05000;}
|
|
.timeline { list-style:none; padding:0; border-left:2px solid var(--pink); margin-left:10px; margin-bottom:14px; }
|
|
.timeline li { position:relative; padding:0 0 16px 22px; } .timeline li:last-child { padding-bottom:0; }
|
|
.timeline li::before { content:''; position:absolute; left:-6px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--pink); }
|
|
.timeline .tl-time { font-size:9px; font-weight:700; color:var(--mid); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; } .timeline .tl-desc { font-size:11px; color:var(--dark); line-height:1.65; }
|
|
code { background:#f0f0f0; padding:1px 5px; font-family:'Courier New',monospace; font-size:10.5px; color:#c81b74; border-radius:2px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button class="export-btn" onclick="exportPDF()">⎙ Exportar PDF</button>
|
|
|
|
<div class="ars-header"><div class="top-bar">
|
|
<div class="ars-url"><b>ars</b>integradores.com</div>
|
|
<div class="ars-block"><img class="ars-logo" src="logo-report.jpg" alt="ARS Integradores"></div>
|
|
</div></div>
|
|
|
|
<div class="screen-page">
|
|
<div class="title-wrap"><div class="title-block">
|
|
<div class="label">Reporte de Estado de Red</div>
|
|
<div class="subtitle">Torre Administrativa — Municipio de Santa Catarina, N.L.</div>
|
|
</div></div>
|
|
|
|
<div class="folio-bar">
|
|
<span class="folio-num">RPT-2026-020</span>
|
|
<span class="folio-meta">
|
|
<b>Fecha:</b> 15 de julio de 2026 |
|
|
<b>Periodo:</b> Julio 2026 |
|
|
<b>Clasificación:</b> Confidencial
|
|
</span>
|
|
</div>
|
|
|
|
<div class="contract-info">
|
|
<div class="cname">Municipio de Santa Catarina</div>
|
|
<div class="cloc"><b>Contrato:</b> Administración de Red | <b>Responsable:</b> ARS Integradores | <b>Preparado por:</b> Equipo NOC</div>
|
|
</div>
|
|
|
|
<div class="resolved-bar"><span class="dot"></span> Operación estable — sin incidentes críticos en el periodo</div>
|
|
|
|
<div class="body">
|
|
<div class="summary-grid">
|
|
<div class="kpi pink"><div class="val">41</div><div class="lbl">Dispositivos</div></div>
|
|
<div class="kpi green"><div class="val">99.8%</div><div class="lbl">Disponibilidad</div></div>
|
|
<div class="kpi amber"><div class="val">2</div><div class="lbl">Advertencias</div></div>
|
|
<div class="kpi red"><div class="val">0</div><div class="lbl">Críticos</div></div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Resumen Ejecutivo</h2>
|
|
<p>Durante el periodo la red operó de forma estable con una disponibilidad del 99.8%.
|
|
Se atendieron dos advertencias menores de saturación de puerto sin impacto al usuario.</p>
|
|
<div class="highlight-box">Sin interrupciones de servicio reportadas por usuarios finales.</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Estado de Equipos Principales</h2>
|
|
<table>
|
|
<thead><tr><th>Dispositivo</th><th>IP</th><th>Rol</th><th>Estado</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>SC Torre Administrativa</td><td>192.168.1.10</td><td>Gateway (UDMPRO)</td><td><span class="badge badge-ok">OK</span></td></tr>
|
|
<tr><td>IDF1-Aggregation24</td><td>192.168.0.234</td><td>Agregación</td><td><span class="badge badge-medium">Revisar</span></td></tr>
|
|
<tr><td>SWP101</td><td>192.168.0.236</td><td>Acceso</td><td><span class="badge badge-ok">OK</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Hallazgos</h2>
|
|
<div class="cause-grid">
|
|
<div class="cause-card"><h4>Observación</h4><p>Descartes intermitentes en el puerto de <code>IDF1-Aggregation24</code> hacia el firewall.</p></div>
|
|
<div class="cause-card"><h4>Impacto</h4><p>Bajo. Sin afectación perceptible a usuarios; monitoreo activo.</p></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section page-break">
|
|
<h2>Cronología del Periodo</h2>
|
|
<ul class="timeline">
|
|
<li><div class="tl-time">04 Jul · 09:00</div><div class="tl-desc">Mantenimiento preventivo de switches de acceso.</div></li>
|
|
<li><div class="tl-time">11 Jul · 14:20</div><div class="tl-desc">Advertencia de saturación en puerto agregación — normalizada.</div></li>
|
|
<li><div class="tl-time">15 Jul · 08:00</div><div class="tl-desc">Corte de reporte mensual.</div></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Recomendaciones</h2>
|
|
<ol class="rec-list">
|
|
<li><div class="rec-body"><h4>Sustituir enlace de agregación</h4><p>Reemplazar el cable/óptica del puerto con descartes para eliminar la advertencia recurrente.</p><span class="tag amber">Prioridad media</span></div></li>
|
|
<li><div class="rec-body"><h4>Mantener monitoreo</h4><p>Continuar el seguimiento semanal de contadores de error en agregación.</p><span class="tag green">Prioridad baja</span></div></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ars-footer"><div class="footer">
|
|
<div><span class="office-label">Oficina</span> (81) 8123 2899<br>Tepatitlán 201 Col. Mitras Sur, Mty. NL, 64020</div>
|
|
<div class="right">arsintegradores.com<br>Julio 2026</div>
|
|
</div></div>
|
|
|
|
<script>
|
|
window.PagedConfig = { auto:false };
|
|
function exportPDF(){
|
|
document.documentElement.classList.add('paged');
|
|
var s=document.createElement('script'); s.src='paged.polyfill.js';
|
|
s.onload=function(){ new Paged.Previewer().preview().then(function(){ window.print(); }); };
|
|
s.onerror=function(){ alert('Falta paged.polyfill.js en la carpeta.'); document.documentElement.classList.remove('paged'); };
|
|
document.body.appendChild(s);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|