Project Progress Generator

Fill in project details, load an 8-row CSV (status / date), and generate an email-ready HTML status card. The phase structure stays fixed; only metadata and step status/dates change.

Uses template.html CSV-driven Preview + download

Inputs

Fill in the project details below, load a two-column CSV (status, date) with one row per phase, then hit Generate.

Report Title required

Organization required

Footer Label optional

Report Date

CSV File required

Output File Name

Template

Fill in the fields and load a CSV to begin.

CSV format
Two columns: status and date. One row per phase, 8 rows total, in order: Request Intake, Assessment, Development, Stress Test, UAT, Pre-Release, Release, Post-Release.

Status values
done · active · upcoming · na — or plain-text variants (complete, in progress, n/a, etc.). Leave blank to use the phase default.

Preview

This is the final rendered HTML generated from the selected CSV row.

Generated HTML

Email-ready output — all styles inlined, bgcolor attributes added, <style> block removed. Paste directly into your email platform or download as a file.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{reportTitle}} - Project Progress</title>
  <style>
    body {
      background-color: #ffffff;
    }

.page-shell {
      background-color: #ffffff;
    }

.outer-pad {
      padding: 30px 15px;
    }

.report-card {
      width: 680px;
      max-width: 100%;
      background-color: #ffffff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    }

.header-stack td,
    .footer-stack td {
      vertical-align: top;
    }

.phase-table {
      min-width: 640px;
    }

.phase-shell {
      overflow-x: auto;
    }

.eyebrow {
      margin: 0 0 4px 0;
      color: #ff8f4f;
      font-size: 11px;
      font-weight: bold;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

.report-title {
      margin: 0 0 6px 0;
      color: #0f172a;
      font-size: 22px;
      font-weight: bold;
    }

.meta-text,
    .footer-text,
    .progress-copy {
      margin: 0;
      color: #64748b;
      font-size: 12px;
    }

.section-label,
    .progress-label,
    .callout-label {
      margin: 0;
      color: #94a3b8;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

.callout-label {
      color: #ff8f4f;
      letter-spacing: 1.5px;
      margin-bottom: 3px;
    }

.current-phase-title {
      margin: 0;
      color: #0f172a;
      font-size: 15px;
      font-weight: bold;
    }

.current-phase-copy {
      margin: 4px 0 0 0;
      color: #64748b;
      font-size: 12px;
    }

.project-pill,
    .status-pill,
    .step-chip {
      display: inline-block;
      font-weight: bold;
    }

.project-pill {
      color: #ffffff;
      font-size: 11px;
      padding: 6px 14px;
      border-radius: 20px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

.project-pill.in-progress {
      background-color: #ff8f4f;
    }

.project-pill.complete {
      background-color: #22c55e;
    }

.project-pill.at-risk {
      background-color: #dc2626;
    }

.project-pill.on-hold {
      background-color: #64748b;
    }

.phase-head {
      background-color: #ff8f4f;
      padding: 10px 14px;
    }

.phase-head p {
      margin: 0;
      color: #1a1a1a;
      font-size: 10px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

.phase-head.phase-index {
      width: 36px;
      padding: 10px 12px;
      border-radius: 6px 0 0 0;
      text-align: center;
    }

.phase-head.phase-status {
      width: 110px;
      padding: 10px 12px;
      border-radius: 0 6px 0 0;
      text-align: center;
    }

.phase-row td {
      padding: 13px 14px;
      border-bottom: 1px solid #e2e8f0;
    }

.phase-row .phase-number-cell {
      width: 36px;
      padding: 13px 12px;
      text-align: center;
    }

.phase-row.done td {
      background-color: #f0fdf4;
      border-bottom-color: #bbf7d0;
    }

.phase-row.active td {
      background-color: #fff7ed;
      border-bottom-color: #fed7aa;
    }

.phase-row.na td {
      background-color: #f8fafc;
      opacity: 0.55;
    }

.phase-row.na .phase-name {
      text-decoration: line-through;
    }

.phase-row.upcoming td {
      background-color: #eff6ff;
      border-bottom-color: #bfdbfe;
    }

.phase-row.last td {
      border-bottom: none;
    }

.phase-row.last .phase-number-cell {
      border-radius: 0 0 0 6px;
    }

.phase-row.last .phase-status-cell {
      border-radius: 0 0 6px 0;
    }

.phase-row.active .phase-number-cell {
      border-left: 3px solid #ff8f4f;
      padding-left: 9px;
    }

.phase-name {
      margin: 0;
      font-size: 12px;
      font-weight: bold;
    }

.phase-description {
      margin: 0;
      font-size: 12px;
    }

.phase-duration {
      margin: 0;
      font-size: 11px;
    }

.phase-row.done .phase-name {
      color: #14532d;
    }

.phase-row.done .phase-description,
    .phase-row.done .phase-duration {
      color: #166534;
    }

.phase-row.active .phase-name {
      color: #0f172a;
    }

.phase-row.active .phase-description,
    .phase-row.active .phase-duration {
      color: #475569;
    }

.phase-row.na .phase-name {
      color: #475569;
    }

.phase-row.na .phase-description,
    .phase-row.na .phase-duration {
      color: #64748b;
    }

.phase-row.upcoming .phase-name {
      color: #1e40af;
    }

.phase-row.upcoming .phase-description,
    .phase-row.upcoming .phase-duration {
      color: #3b82f6;
    }

.step-chip {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      line-height: 22px;
      text-align: center;
      color: #ffffff;
      font-size: 11px;
    }

.step-chip.done {
      background-color: #22c55e;
    }

.step-chip.active {
      background-color: #ff8f4f;
    }

.step-chip.na {
      background-color: #e2e8f0;
      color: #64748b;
    }

.step-chip.upcoming {
      background-color: #3b82f6;
      color: #ffffff;
    }

.phase-status-cell {
      text-align: center;
    }

.status-pill {
      font-size: 10px;
      padding: 4px 10px;
      border-radius: 12px;
    }

.status-pill.done {
      background-color: #dcfce7;
      border: 1px solid #86efac;
      color: #166534;
    }

.status-pill.active {
      background-color: #ff8f4f;
      color: #ffffff;
    }

.status-pill.na {
      background-color: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #64748b;
    }

.status-pill.upcoming {
      background-color: #dbeafe;
      border: 1px solid #93c5fd;
      color: #1e40af;
    }

.progress-copy {
      font-size: 11px;
      margin-top: 6px;
    }

.progress-highlight {
      color: #ff8f4f;
      font-weight: bold;
    }

@media only screen and (max-width: 720px) {
      .outer-pad {
        padding: 16px 10px !important;
      }

.report-card {
        width: 100% !important;
      }

.block-pad,
      .callout-pad,
      .section-pad,
      .table-pad,
      .progress-pad,
      .footer-pad {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }

.header-stack td,
      .footer-stack td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
      }

.header-stack td[align="right"],
      .footer-stack td[align="right"] {
        padding-top: 12px !important;
      }

.phase-table {
        min-width: 620px;
      }

.footer-stack p {
        line-height: 1.5 !important;
      }
    }
  </style>
</head>

<body style="margin:0; padding:0; background-color:#ffffff; font-family: Arial, Helvetica, sans-serif;">

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="page-shell" style="background-color:#ffffff;">
  <tr>
    <td align="center" class="outer-pad" style="padding: 30px 15px;">
      <table width="680" cellpadding="0" cellspacing="0" border="0" class="report-card" style="background-color:#ffffff; border-radius:10px; overflow:hidden; box-shadow: 0 4px 20px rgba(15,23,42,0.08);">
        <tr>
          <td class="block-pad" style="background-color:#ffffff; padding: 30px 35px 20px 35px; border-bottom: 3px solid #ff8f4f;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" class="header-stack">
              <tr>
                <td>
                  <p class="eyebrow">{{organizationName}}</p>
                  <h1 class="report-title">{{reportTitle}}</h1>
                  <p class="meta-text">Project Progress Update  ·  Report Date: {{reportDate}}</p>
                </td>
                <td align="right" valign="top">
                  <span class="project-pill {{projectStatusClass}}">{{projectStatusLabel}}</span>
                </td>
              </tr>
            </table>
          </td>
        </tr>

<tr>
          <td class="callout-pad" style="padding: 20px 35px 10px 35px;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#fff7ed; border-left:4px solid #ff8f4f; border-radius:0 6px 6px 0;">
              <tr>
                <td style="padding:14px 18px;">
                  <p class="callout-label">Current Phase</p>
                  <p class="current-phase-title">▶  Step {{currentPhaseStep}} of {{currentPhaseTotalSteps}} — {{currentPhaseName}}</p>
                  <p class="current-phase-copy">{{currentPhaseDescription}}  |  Estimated duration: {{currentPhaseDuration}}</p>
                </td>
              </tr>
            </table>
          </td>
        </tr>

<tr>
          <td class="section-pad" style="padding: 22px 35px 12px 35px;">
            <p class="section-label">Phase Overview</p>
          </td>
        </tr>

<tr>
          <td class="table-pad phase-shell" style="padding: 0 35px 30px 35px;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" class="phase-table">
              <tr>
                <td class="phase-head phase-index"><p>#</p></td>
                <td class="phase-head"><p>Phase</p></td>
                <td class="phase-head"><p>Description</p></td>
                <td class="phase-head"><p>Duration</p></td>
                <td class="phase-head phase-status"><p>Status</p></td>
              </tr>

<tr class="phase-row {{step1RowClass}}">
                <td class="phase-number-cell"><span class="step-chip {{step1StatusClass}}">1</span></td>
                <td><p class="phase-name">Request Intake</p></td>
                <td><p class="phase-description">Form submission & triage</p></td>
                <td><p class="phase-duration">~2 business hours</p></td>
                <td class="phase-status-cell"><span class="status-pill {{step1StatusClass}}">{{step1StatusLabel}}</span></td>
              </tr>

<tr class="phase-row {{step2RowClass}}">
                <td class="phase-number-cell"><span class="step-chip {{step2StatusClass}}">2</span></td>
                <td><p class="phase-name">Assessment</p></td>
                <td><p class="phase-description">Requirements & planning</p></td>
                <td><p class="phase-duration">3-5 days</p></td>
                <td class="phase-status-cell"><span class="status-pill {{step2StatusClass}}">{{step2StatusLabel}}</span></td>
              </tr>

<tr class="phase-row {{step3RowClass}}">
                <td class="phase-number-cell"><span class="step-chip {{step3StatusClass}}">3</span></td>
                <td><p class="phase-name">Development</p></td>
                <td><p class="phase-description">Design & build solution</p></td>
                <td><p class="phase-duration">2-12 weeks</p></td>
                <td class="phase-status-cell"><span class="status-pill {{step3StatusClass}}">{{step3StatusLabel}}</span></td>
              </tr>

<tr class="phase-row {{step4RowClass}}">
                <td class="phase-number-cell"><span class="step-chip {{step4StatusClass}}">4</span></td>
                <td><p class="phase-name">Stress Test</p></td>
                <td><p class="phase-description">AI projects only. Shown for reference, excluded from progress for this report.</p></td>
                <td><p class="phase-duration">3-7 days</p></td>
                <td class="phase-status-cell"><span class="status-pill {{step4StatusClass}}">{{step4StatusLabel}}</span></td>
              </tr>

<tr class="phase-row {{step5RowClass}}">
                <td class="phase-number-cell"><span class="step-chip {{step5StatusClass}}">5</span></td>
                <td><p class="phase-name">UAT</p></td>
                <td><p class="phase-description">User acceptance testing</p></td>
                <td><p class="phase-duration">1-2 weeks</p></td>
                <td class="phase-status-cell"><span class="status-pill {{step5StatusClass}}">{{step5StatusLabel}}</span></td>
              </tr>

<tr class="phase-row {{step6RowClass}}">
                <td class="phase-number-cell"><span class="step-chip {{step6StatusClass}}">6</span></td>
                <td><p class="phase-name">Pre-Release</p></td>
                <td><p class="phase-description">Final validations</p></td>
                <td><p class="phase-duration">5-7 days</p></td>
                <td class="phase-status-cell"><span class="status-pill {{step6StatusClass}}">{{step6StatusLabel}}</span></td>
              </tr>

<tr class="phase-row {{step7RowClass}}">
                <td class="phase-number-cell"><span class="step-chip {{step7StatusClass}}">7</span></td>
                <td><p class="phase-name">Release</p></td>
                <td><p class="phase-description">Deploy to production</p></td>
                <td><p class="phase-duration">~1 day</p></td>
                <td class="phase-status-cell"><span class="status-pill {{step7StatusClass}}">{{step7StatusLabel}}</span></td>
              </tr>

<tr class="phase-row last {{step8RowClass}}">
                <td class="phase-number-cell"><span class="step-chip {{step8StatusClass}}">8</span></td>
                <td><p class="phase-name">Post-Release</p></td>
                <td><p class="phase-description">Monitoring & support</p></td>
                <td><p class="phase-duration">Ongoing</p></td>
                <td class="phase-status-cell"><span class="status-pill {{step8StatusClass}}">{{step8StatusLabel}}</span></td>
              </tr>
            </table>
          </td>
        </tr>

<tr>
          <td class="progress-pad" style="padding: 0 35px 28px 35px;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td>
                  <p class="progress-label" style="margin-bottom:8px;">Overall Progress</p>
                  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#e2e8f0; border-radius:4px; overflow:hidden;">
                    <tr>
                      <td width="{{completedPercent}}" style="background-color:#22c55e; height:8px; border-radius:4px 0 0 4px;"> </td>
                      <td width="{{activePercent}}" style="background-color:#ff8f4f; height:8px; overflow:hidden; font-size:0; line-height:0;"></td>
                      <td style="background-color:#e2e8f0; height:8px; border-radius:0 4px 4px 0;"> </td>
                    </tr>
                  </table>
                  <p class="progress-copy">{{progressSummaryText}}  —  <span class="progress-highlight">{{progressPercentLabel}}</span></p>
                </td>
              </tr>
            </table>
          </td>
        </tr>

<tr>
          <td class="footer-pad" style="background-color:#f8fafc; padding:16px 35px; border-top:1px solid #e2e8f0; border-radius:0 0 10px 10px;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" class="footer-stack">
              <tr>
                <td>
                  <p class="footer-text" style="font-size:10px;">{{footerProjectLabel}}  ·  {{organizationName}}  ·  Auto-generated progress report</p>
                </td>
                <td align="right">
                  <p class="footer-text" style="font-size:10px;">Next milestone: <span style="color:#ff8f4f;">{{nextMilestoneLabel}}</span></p>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body>
</html>