HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
320x85
20.4 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>Informe Mensual</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"
  >

  <style>

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

    body{
      background:#1f1f1f;
      font-family:'Inter',sans-serif;
      padding:40px;
      color:#0f172a;
    }

    .page{
      width:1280px;
      margin:auto;
      background:white;
      padding:0;
      overflow:hidden;
    }

    /* HEADER */

    .header{
      position:relative;
      overflow:hidden;

      background:
        radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 35%),
        linear-gradient(135deg,#08245f 0%, #0c4ccf 100%);

      padding:52px 56px;

      display:flex;
      justify-content:space-between;
      align-items:center;

      color:white;

      min-height:260px;

      box-shadow:
        0 20px 60px rgba(15,23,42,.25);
    }

    .header::before{
      content:"";

      position:absolute;

      right:-120px;
      top:-80px;

      width:520px;
      height:520px;

      border:2px solid rgba(255,255,255,.06);

      clip-path:polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0% 50%
      );

      transform:rotate(20deg);
    }

    .header::after{
      content:"";

      position:absolute;

      right:120px;
      top:-120px;

      width:420px;
      height:420px;

      border:2px solid rgba(255,255,255,.05);

      clip-path:polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0% 50%
      );

      transform:rotate(-8deg);
    }

    .header-left{
      position:relative;
      z-index:2;
    }

    .header-left h1{
      font-size:74px;
      line-height:1;

      font-weight:800;

      letter-spacing:-4px;

      margin-bottom:18px;
    }

    .header-left h2{
      color:#74cfff;

      font-size:36px;

      font-weight:700;

      margin-bottom:28px;

      letter-spacing:-1px;
    }

    .header-left p{
      font-size:24px;

      opacity:.96;

      font-weight:500;
    }

    .header-right{
      position:relative;
      z-index:2;
    }

    .logo{
      width:320px;
      opacity:.96;
      object-fit:contain;
    }

    /* CONTENT */

    .content{
      padding:40px;
    }

    /* KPI GRID */

    .kpis{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:18px;
      margin-bottom:28px;
    }

    .kpi-card{
      background:white;
      border:1px solid #edf2f7;
      border-radius:24px;
      padding:26px;
      text-align:center;

      box-shadow:
        0 4px 24px rgba(15,23,42,.04);
    }

    .kpi-icon{
      font-size:34px;
      margin-bottom:18px;
      color:#2563eb;
    }

    .kpi-number{
      font-size:46px;
      font-weight:800;
      color:#0f172a;
      margin-bottom:10px;
      letter-spacing:-2px;
    }

    .kpi-title{
      font-size:14px;
      line-height:1.5;
      text-transform:uppercase;
      color:#334155;
      font-weight:700;
    }

    .kpi-subtitle{
      margin-top:10px;
      font-size:13px;
      color:#64748b;
    }

    /* CAPACITY */

    .capacity-section{
      display:grid;
      grid-template-columns:2fr 1fr;
      gap:28px;

      margin-bottom:28px;
    }

    .capacity-card,
    .utilization-card{
      background:white;
      border:1px solid #edf2f7;
      border-radius:26px;
      padding:36px;

      box-shadow:
        0 4px 24px rgba(15,23,42,.04);
    }

    .section-title{
      color:#2563eb;
      text-transform:uppercase;
      font-size:18px;
      font-weight:700;
      margin-bottom:22px;
    }

    .capacity-number{
      font-size:72px;
      font-weight:800;
      letter-spacing:-3px;
      margin-bottom:10px;
    }

    .capacity-number span{
      color:#64748b;
      font-weight:500;
    }

    .capacity-label{
      color:#64748b;
      margin-bottom:28px;
      font-size:17px;
    }

    .progress-bar{
      width:100%;
      height:14px;
      background:#e2e8f0;
      border-radius:999px;
      overflow:hidden;
      margin-bottom:12px;
    }

    .progress{
      width:100%;
      height:100%;
      background:#2563eb;
    }

    .progress-footer{
      text-align:right;
      font-weight:700;
      color:#334155;
      font-size:20px;
    }

    /* UTILIZATION */

    .utilization-card{
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
    }

    .utilization-number{
      font-size:72px;
      font-weight:800;
      color:#16a34a;
      margin-bottom:10px;
      letter-spacing:-3px;
    }

    .utilization-label{
      color:#64748b;
      margin-bottom:28px;
      font-size:17px;
    }

    .circle{
      width:170px;
      height:170px;
      border-radius:999px;

      border:10px solid #16a34a;

      display:flex;
      justify-content:center;
      align-items:center;

      color:#16a34a;

      font-size:34px;
      font-weight:800;
    }

    /* SUMMARY */

    .summary-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;

      margin-bottom:28px;
    }

    .summary-card,
    .warning-card{
      border-radius:26px;
      padding:36px;
      min-height:320px;
    }

    .summary-card{
      border:1px solid #edf2f7;
      background:white;
    }

    .warning-card{
      border:1px solid #fde68a;
      background:#fffdf5;
    }

    .summary-header,
    .warning-header{
      display:flex;
      align-items:center;
      gap:18px;

      margin-bottom:28px;
    }

    .summary-icon,
    .warning-icon{
      width:62px;
      height:62px;

      border-radius:999px;

      display:flex;
      justify-content:center;
      align-items:center;

      font-size:30px;
    }

    .summary-icon{
      background:#e8f0ff;
      color:#2563eb;
    }

    .warning-icon{
      background:#fff7d6;
      color:#f59e0b;
    }

    .summary-title{
      color:#2563eb;
      font-size:28px;
      font-weight:700;
    }

    .warning-title{
      color:#d97706;
      font-size:28px;
      font-weight:700;
    }

    .summary-card p,
    .warning-card p{
      color:#334155;
      line-height:1.9;
      font-size:18px;
      margin-bottom:18px;
    }

    /* TABLE */

    .table-section{
      background:white;
      border:1px solid #edf2f7;
      border-radius:26px;
      overflow:hidden;

      margin-bottom:28px;
    }

    .table-title{
      padding:28px 32px;

      color:#2563eb;
      font-size:28px;
      font-weight:700;

      border-bottom:1px solid #edf2f7;
    }

    table{
      width:100%;
      border-collapse:collapse;
    }

    thead{
      background:#f8fbff;
    }

    th{
      padding:18px;

      text-align:left;

      font-size:13px;
      text-transform:uppercase;

      color:#2563eb;

      border-bottom:1px solid #edf2f7;
    }

    td{
      padding:22px 18px;
      border-bottom:1px solid #f1f5f9;
      vertical-align:top;
      font-size:16px;
      line-height:1.6;
    }

    .ticket{
      color:#2563eb;
      font-weight:700;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;

      padding:10px 16px;

      border-radius:999px;

      font-size:12px;
      font-weight:700;
    }

    .badge-progress{
      background:#dbeafe;
      color:#2563eb;
    }

    .badge-done{
      background:#dcfce7;
      color:#15803d;
    }

    .sp{
      width:40px;
      height:40px;

      border-radius:999px;

      background:#eff6ff;
      color:#2563eb;

      display:flex;
      justify-content:center;
      align-items:center;

      font-weight:700;
    }

    /* JIRA */

    .jira-section{
      background:#f8fbff;
      border:1px solid #dbeafe;
      border-radius:26px;

      padding:34px;

      display:flex;
      justify-content:space-between;
      align-items:center;

      margin-bottom:28px;
    }

    .jira-left{
      display:flex;
      gap:24px;
      align-items:center;
    }

    .jira-icon{
      width:90px;
      height:90px;

      border-radius:999px;

      background:#dbeafe;

      display:flex;
      justify-content:center;
      align-items:center;

      font-size:44px;
      color:#2563eb;
    }

    .jira-title{
      font-size:34px;
      color:#2563eb;
      font-weight:700;
      margin-bottom:8px;
    }

    .jira-text{
      font-size:18px;
      color:#475569;
      margin-bottom:18px;
    }

    .jira-button{
      display:inline-flex;
      align-items:center;
      gap:12px;

      background:#2563eb;
      color:white;

      text-decoration:none;

      padding:18px 32px;

      border-radius:16px;

      font-size:20px;
      font-weight:700;

      transition:.2s;
    }

    .jira-button:hover{
      background:#1d4ed8;
    }

    /* FOOTER */

    .footer{
      border-top:1px solid #edf2f7;

      padding-top:26px;

      display:flex;
      justify-content:space-between;
      align-items:center;

      color:#64748b;
      font-size:16px;
    }

    .footer a{
      color:#2563eb;
      text-decoration:none;
      font-weight:600;
    }

  </style>

</head>

<body>

<div class="page">

  <!-- HEADER -->

  <div class="header">

    <div class="header-left">

      <h1>INFORME MENSUAL</h1>

      <h2>MAYO 2026</h2>

      <p>
        Enuel Morales &nbsp; • &nbsp; Pago TIC
      </p>

    </div>

    <div class="header-right">

      <img
        src="https://www.sowtic.com/_assets/v11/f9b4253eae349d1738eb6db18a09cb8dd81f8db2.png"
        class="logo"
      >

    </div>

  </div>

  <!-- CONTENT -->

  <div class="content">

    <!-- KPI -->

    <div class="kpis">

      <div class="kpi-card">
        <div class="kpi-icon">📅</div>
        <div class="kpi-number">19</div>
        <div class="kpi-title">Días efectivos</div>
        <div class="kpi-subtitle">21 hábiles · 2 feriados</div>
      </div>

      <div class="kpi-card">
        <div class="kpi-icon">🎫</div>
        <div class="kpi-number">6</div>
        <div class="kpi-title">Tickets trabajados</div>
      </div>

      <div class="kpi-card">
        <div class="kpi-icon">✅</div>
        <div class="kpi-number">4</div>
        <div class="kpi-title">Tickets completados</div>
      </div>

      <div class="kpi-card">
        <div class="kpi-icon">🕓</div>
        <div class="kpi-number">2</div>
        <div class="kpi-title">En progreso</div>
      </div>

      <div class="kpi-card">
        <div class="kpi-icon">⭐</div>
        <div class="kpi-number">22</div>
        <div class="kpi-title">SP totales trabajados</div>
      </div>

      <div class="kpi-card">
        <div class="kpi-icon">🎯</div>
        <div class="kpi-number">16</div>
        <div class="kpi-title">SP completados</div>
        <div class="kpi-subtitle">6 SP en progreso</div>
      </div>

    </div>

    <!-- CAPACITY -->

    <div class="capacity-section">

      <div class="capacity-card">

        <div class="section-title">
          Capacity mensual (desarrollo)
        </div>

        <div class="capacity-number">
          44 / 44 <span>SP</span>
        </div>

        <div class="capacity-label">
          Ejecutados
        </div>

        <div class="progress-bar">
          <div class="progress"></div>
        </div>

        <div class="progress-footer">
          100%
        </div>

      </div>

      <div class="utilization-card">

        <div class="section-title">
          Utilización (desarrollo)
        </div>

        <div class="utilization-number">
          100%
        </div>

        <div class="utilization-label">
          Capacidad estimada cumplida
        </div>

        <div class="circle">
          100%
        </div>

      </div>

    </div>

    <!-- SUMMARY -->

    <div class="summary-grid">

      <div class="summary-card">

        <div class="summary-header">

          <div class="summary-icon">
            📈
          </div>

          <div class="summary-title">
            Resumen Operativo
          </div>

        </div>

        <p>
          Durante mayo se avanzó en la base técnica Expo/Web,
          arquitectura cross-platform y migración inicial
          de funcionalidades piloto.
        </p>

        <p>
          También se realizaron tareas de configuración
          TypeScript y documentación técnica.
        </p>

        <p>
          El trabajo realizado sienta las bases para
          el desarrollo iterativo de nuevas funcionalidades.
        </p>

      </div>

      <div class="warning-card">

        <div class="warning-header">

          <div class="warning-icon">
            ⚠️
          </div>

          <div class="warning-title">
            Bloqueo Operativo
          </div>

        </div>

        <p>
          <strong>14/05/26</strong>
        </p>

        <p>
          Problemas de configuración de ambientes QA
          y políticas CORS entre frontend y backend.
        </p>

        <p>
          Ambiente QA no disponible.
          Idas y vueltas hasta estabilización del entorno.
        </p>

      </div>

    </div>

    <!-- TABLE -->

    <div class="table-section">

      <div class="table-title">
        Tickets Trabajados
      </div>

      <table>

        <thead>

        <tr>
          <th>Ticket</th>
          <th>Resumen</th>
          <th>Estado</th>
          <th>Sprint</th>
          <th>SP</th>
          <th>Fecha Inicio</th>
          <th>Fecha Resolución</th>
        </tr>

        </thead>

        <tbody>

        <tr>
          <td class="ticket">PE-19</td>
          <td>Migración pantalla de selección de entidades</td>
          <td><span class="badge badge-progress">IN PROGRESS</span></td>
          <td>Sprint 1</td>
          <td><div class="sp">3</div></td>
          <td>19/05/2026</td>
          <td>-</td>
        </tr>

        <tr>
          <td class="ticket">PE-20</td>
          <td>Documentar arquitectura</td>
          <td><span class="badge badge-progress">IN PROGRESS</span></td>
          <td>Sprint 1</td>
          <td><div class="sp">3</div></td>
          <td>19/05/2026</td>
          <td>-</td>
        </tr>

        <tr>
          <td class="ticket">PE-8</td>
          <td>Migrar feature piloto desde App Entidades</td>
          <td><span class="badge badge-done">DONE</span></td>
          <td>Sprint 1</td>
          <td><div class="sp">5</div></td>
          <td>17/05/2026</td>
          <td>18/05/2026</td>
        </tr>

        <tr>
          <td class="ticket">PE-7</td>
          <td>Spike auth/token inicial</td>
          <td><span class="badge badge-done">DONE</span></td>
          <td>Sprint 1</td>
          <td><div class="sp">5</div></td>
          <td>14/05/2026</td>
          <td>18/05/2026</td>
        </tr>

        <tr>
          <td class="ticket">PE-3</td>
          <td>Configurar soporte Expo Web + TypeScript</td>
          <td><span class="badge badge-done">DONE</span></td>
          <td>Sprint 1</td>
          <td><div class="sp">3</div></td>
          <td>12/05/2026</td>
          <td>18/05/2026</td>
        </tr>

        <tr>
          <td class="ticket">PE-2</td>
          <td>Setup repositorio Expo base</td>
          <td><span class="badge badge-done">DONE</span></td>
          <td>Sprint 1</td>
          <td><div class="sp">3</div></td>
          <td>11/05/2026</td>
          <td>18/05/2026</td>
        </tr>

        </tbody>

      </table>

    </div>

    <!-- JIRA -->

    <div class="jira-section">

      <div class="jira-left">

        <div class="jira-icon">
          🔗
        </div>

        <div>

          <div class="jira-title">
            Evidencia Jira
          </div>

          <div class="jira-text">
            Ver tickets y trazabilidad completa en Jira
          </div>

          <a
            class="jira-button"
            href="https://proyectos.paypertic.com/issues/?jql=project%20%3D%20PE"
            target="_blank"
          >
            Ver tickets en Jira ↗
          </a>

        </div>

      </div>

    </div>

    <!-- FOOTER -->

    <div class="footer">

      <div>
        Desarrollado en colaboración con SOWTIC
      </div>

      <a
        href="https://www.sowtic.com/"
        target="_blank"
      >
        https://www.sowtic.com/
      </a>

    </div>

  </div>

</div>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
69KB
Transfer Size
79KB
Content Size
134.0ms
Dom Content Loaded
312.0ms
First Paint
239.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests