@govtechsg/oobee 0.10.76 → 0.10.78-alpha1

package/dist/static/ejs/partials/styles/topTenCard.ejs

@@ -0,0 +1,44 @@
+<style>
+	.page-links {
+		width: 65%;
+	}
+
+	#top-ten-card .page-links {
+		display: flex;
+		align-items: center;
+		gap: .25rem;
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	#top-ten-card .page-links .link-text {
+		color: var(--a11y-majorelle-blue);
+	}
+
+	#top-ten-card .issues-badge {
+		flex: 0 0 auto;
+		white-space: nowrap;
+	}
+
+	@media (max-width: 480px) {
+		#top-ten-card .page-links {
+			line-clamp: 2;
+			-webkit-line-clamp: 2;
+
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: normal;
+  	}
+
+		@supports (line-clamp: 2) {
+			#top-ten-card .page-links {
+				display: block;
+			}
+		}
+	}
+</style>

package/dist/static/ejs/partials/styles/wcagCompliance/FailedCriteria.ejs

@@ -0,0 +1,59 @@
+<style>
+  #failedCriteriaCard {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #failedCriteriaCard li:not(:last-of-type) {
+    border-bottom: 1px solid var(--chinese-silver);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .wcag-row-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .view-all-link {
+    align-self: center;
+    padding: 0.5rem 0;
+    border: none;
+    background: transparent;
+    color: var(--a11y-majorelle-blue);
+    font-size: 1rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: color 0.2s ease;
+  }
+
+  .modal-title {
+    border-bottom: none;
+  }
+
+  .view-all-link:hover {
+    text-decoration: underline;
+  }
+
+  .view-all-link svg {
+    flex-shrink: 0;
+  }
+
+  #failedCriteriaModal li:not(:last-of-type) {
+    border-bottom: 1px solid var(--chinese-silver);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  @media (max-width: 768px) {
+    .failed-criteria-list {
+      max-height: 300px;
+    }
+
+    .failed-criteria-item {
+      padding: 0.5rem 0.75rem;
+    }
+  }
+</style>

package/dist/static/ejs/partials/styles/wcagCompliance/WcagGaugeBar.ejs

@@ -0,0 +1,62 @@
+<style>
+	.wcag-gauge {
+    --size: 140;
+    --thickness: 0.35rem;
+    width: calc(var(--size) * 1px);
+    position: relative;
+    padding-bottom: calc(var(--size) * 0.18px);
+  }
+
+  .gauge-track,
+  .gauge-fill {
+    fill: none;
+    stroke-width: var(--thickness);
+  }
+
+  .gauge-track {
+    stroke: var(--bright-gray);
+  }
+  .gauge-fill {
+    stroke: var(--deep-green-cyan-turquoise);
+    transition: stroke-dashoffset 300ms ease;
+  }
+
+  .gauge-fill.bad  {
+    stroke: var(--light-carmine-pink);
+  }
+  .gauge-fill.good {
+    stroke: var(--deep-green-cyan-turquoise);
+  }
+
+  .gauge-center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+
+  .gauge-number {
+    font-weight: 700;
+    font-size: 16px;
+  }
+
+  .gauge-caption {
+    position: absolute;
+    left: 50%;
+    top: 80%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    text-align: center;
+    margin: 0;
+    font-size: 14px;
+  }
+
+  .gauge-value-number {
+    font-size: 24px;
+  }
+
+  .gauge-value-number.perfect-score {
+    color: var(--deep-green-cyan-turquoise);
+  }
+</style>

package/dist/static/ejs/partials/styles/wcagCompliance.ejs

@@ -0,0 +1,36 @@
+<style>
+	.wcag-title {
+		margin-bottom: 0.5rem;
+	}
+
+	.wcag-card {
+		padding: 1.5rem;
+		flex: 1;
+	}
+
+	.wcag-row {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.wcag-sub {
+		font-size: 1.125rem !important;
+		margin-bottom: 0rem;
+	}
+
+	.wcag-link {
+		font-size: 1rem;
+		border: 0;
+	}
+
+	.wcag-status {
+		margin-bottom: 0.3rem;
+		color: var(--light-carmine-pink);
+	}
+
+	@media (max-width: 992px){
+		.wcag-row {
+			flex-wrap: wrap;
+		}
+	}
+</style>

package/dist/static/ejs/partials/styles/wcagCoverageDetails.ejs

@@ -0,0 +1,33 @@
+<style>
+  #wcagCoverage .wcag-box {
+    border: 1px solid var(--divider, --bright-gray);
+    border-radius: 12px;
+    padding: 14px;
+    background: var(--true-white, #fff);
+  }
+
+  #wcagCoverage .wcag-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px 18px;
+  }
+
+  #wcagCoverage .wcag-grid a {
+    color: var(--a11y-majorelle-blue, #5735DF);
+    text-decoration: none;
+  }
+  #wcagCoverage .wcag-grid a:hover,
+  #wcagCoverage .wcag-grid a:focus-visible {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 992px) {
+    #wcagCoverage .wcag-grid {
+      grid-template-columns: repeat(2, minmax(0,1fr));
+    }
+  }
+
+  @media (max-width: 576px) {
+    #wcagCoverage .wcag-grid { grid-template-columns: 1fr; }
+  }
+</style>

package/dist/static/ejs/partials/summaryHeader.ejs

@@ -0,0 +1,70 @@
+<header aria-label="Report header" id="header">
+  <div class="z-2 flex-row justify-content-between px-3 py-4">
+    <div class="d-flex align-items-center">
+      <svg
+        aria-hidden="true"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="24" cy="24" r="24" fill="#9021a6" />
+        <path
+          d="M16.2528 24.9725V23.832C16.2528 21.5526 14.4057 19.7056 12.1264 19.7056C9.84708 19.7056 8 21.5526 8 23.832V27.0721C8 29.2906 9.74991 31.0986 11.9448 31.1939V29.2806C11.9448 26.905 13.8772 24.9725 16.2528 24.9725Z"
+          fill="white"
+        />
+        <path
+          d="M12.308 29.28V31.1979H16.2528V25.3352C14.0779 25.3352 12.308 27.1051 12.308 29.28Z"
+          fill="white"
+        />
+        <path d="M22.8201 25.3289H18.6937V31.1997H22.8201V25.3289Z" fill="white" />
+        <path
+          d="M22.8201 17.6016C20.5408 17.6016 18.6937 19.4486 18.6937 21.728V24.9672H22.8201V17.6016Z"
+          fill="white"
+        />
+        <path
+          d="M29.3876 17.6016C27.1082 17.6016 25.2612 19.4486 25.2612 21.728V24.9672H29.3876V17.6016Z"
+          fill="white"
+        />
+        <path d="M29.3876 25.3289H25.2612V31.1997H29.3876V25.3289Z" fill="white" />
+        <path
+          d="M36.3182 31.199C38.5976 31.199 40.4446 29.3519 40.4446 27.0726V25.3281H36.3182V31.199Z"
+          fill="white"
+        />
+        <path
+          d="M40.4446 19.7056C38.1653 19.7056 36.3182 21.5526 36.3182 23.832V24.9644H40.4446V19.7056Z"
+          fill="white"
+        />
+        <path
+          d="M35.955 23.832C35.955 21.5526 34.1079 19.7056 31.8286 19.7056V22.844C31.8286 23.6195 32.0429 24.3441 32.4143 24.9644H35.955V23.832Z"
+          fill="white"
+        />
+        <path
+          d="M35.955 26.9709V25.3281H32.6595C33.4123 26.3261 34.6083 26.9709 35.955 26.9709Z"
+          fill="white"
+        />
+      </svg>
+
+      <h1 class="d-inline mb-0 ms-3">Oobee Scan Summary</h1>
+    </div>
+    <%#
+    <div class="toggleWrapper">
+      <input tabindex="0" type="checkbox" class="dm" id="dm" />
+      <label for="dm" class="toggle">
+        <span class="toggle__handler">
+          <span class="crater crater--1"></span>
+          <span class="crater crater--2"></span>
+          <span class="crater crater--3"></span>
+        </span>
+        <span class="star star--1"></span>
+        <span class="star star--2"></span>
+        <span class="star star--3"></span>
+        <span class="star star--4"></span>
+        <span class="star star--5"></span>
+        <span class="star star--6"></span>
+      </label>
+    </div>
+    %>
+  </div>
+</header>

package/dist/static/ejs/partials/summaryMain.ejs

@@ -0,0 +1,49 @@
+<div class="flex-grow-1 align-items-stretch">
+  <main aria-label="Report main content" class="d-flex flex-column flex-grow-1">
+    <div class="row m-0 py-4 px-3 d-flex" style="flex-wrap: nowrap">
+      <div id="aboutScanDiv" class="pe-md-2 d-flex" style="flex: 1; flex-basis: 300px">
+        <div id="scanabout-compliance-card" class="card h-100" style="width: -webkit-fill-available">
+          <div class="card-body"><%- include("components/summaryScanAbout") %></div>
+        </div>
+      </div>
+      <div id="scanResultsDiv" class="ps-md-2" style="flex: 2; margin-left: 10px">
+        <div id="summary-scan-results-card" class="card h-100">
+          <div class="card-body">
+            <h2>Scan results</h2>
+            <div class="d-flex justify-content-between align-items-center">
+              <span class="fw-bold"> WCAG (A & AA) Passes </span>
+              <span aria-label="Pass percentage" class="ms-2">
+                <%= wcagPassPercentage.totalWcagChecksAA - wcagPassPercentage.totalWcagViolationsAA  %> /  <%= wcagPassPercentage.totalWcagChecksAA %> of automated checks
+              </span>
+            </div>
+            <div class="wcag-compliance-passes-bar mb-5 d-flex">
+              <svg width="500" role="none" height="6" fill="none" xmlns="http://www.w3.org/2000/svg"
+                style="display: flex; width: 100%; position: absolute">
+                <rect width="100%" height="10" rx="3" fill="#E7ECEE" style="justify-content: left"></rect>
+                <rect width="<%= wcagPassPercentage.passPercentageAA %>%" height="6" rx="3" fill="#9021a6" style="">
+                </rect>
+              </svg>
+            </div>
+            <ul class="unbulleted-list">
+              <% Object.keys(items).forEach((category)=> { %> <%- include("components/summaryScanResults", { category:
+                  category }) %>
+                  <% }) %>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mx-3">
+      <h2 class="mb-2">Summary of issues:</h2>
+      <p>
+        Only 
+        <a href="https://go.gov.sg/oobee-details" target="_blank">20 WCAG 2.2 Success Criteria (A & AA)</a>
+        can be automatically checked so
+        <a aria-label="Manual testing guide" href="https://go.gov.sg/a11y-manual-testing" target="_blank">manual
+          testing</a>
+        is still required. For more details, please refer to the HTML report.
+      </p>
+    </div>
+    <%- include("components/summaryTable") %>
+  </main>
+</div>

package/dist/static/ejs/report.ejs

@@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="en" id="accessibility-site-report">
+  <head lang="en">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Accessibility Site Report</title>
+    <!-- [TESTCODE] Font Awesome CDN -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+      integrity="sha512-..."
+      crossorigin="anonymous"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 6C11.7707 6 10 11.1369 10 19.23V28.77C10 36.8631 11.7707 42 23.5 42C35.2293 42 37 36.8631 37 28.77V19.23C37 11.1369 35.2293 6 23.5 6ZM25.4903 14.5985V35.0562H21.5097V12.9438H27.8925L25.4903 14.5985Z' fill='%239021A6'/%3E%3C/svg%3E
+      "
+    />
+    <%- include('partials/scripts/decodeUnzipParse') %>
+    <%- include('partials/styles/bootstrap') %>
+    <%- include('partials/styles/highlightjs') %>
+    <%- include('partials/styles/styles') %>
+    <%- include('partials/styles/header/SiteInfo') %>
+    <%- include('partials/styles/wcagCompliance/WcagGaugeBar') %>
+    <%- include('partials/styles/header') %>
+    <%- include('partials/styles/wcagCompliance') %>
+    <%- include('partials/styles/wcagCompliance/FailedCriteria') %>
+    <%- include('partials/styles/shared/InfoAlert') %>
+    <%- include('partials/styles/prioritiseIssues/PrioritiseIssues') %>
+    <%- include('partials/styles/prioritiseIssues/IssueDetailCard') %>
+    <%- include('partials/styles/ruleModal/ruleOffcanvas') %>
+    <%- include('partials/styles/allIssues/AllIssues') %>
+    <%- include('partials/styles/topTenCard') %>
+    <%- include('partials/styles/header/aboutScanModal/AboutScanModal') %>
+    <%- include('partials/styles/header/aboutScanModal/ScanDetails') %>
+    <%- include('partials/styles/header/aboutScanModal/ScanConfiguration') %>
+    <%- include('partials/styles/wcagCoverageDetails') %>
+    <%- include('partials/styles/scannedPagesSegmentedTabs') %>
+  </head>
+
+  <body class="d-flex flex-column align-items-center">
+    <%- include('partials/header') %>
+    <%- include('partials/main') %>
+    <%- include('partials/scripts/popper') %>
+    <%- include('partials/scripts/bootstrap') %>
+    <%- include('partials/scripts/highlightjs') %>
+    <%- include('partials/scripts/utils') %>
+    <%- include('partials/scripts/header/SiteInfo') %>
+    <%- include('partials/scripts/ruleModal/ruleOffcanvas') %>
+    <%- include('partials/scripts/allIssues/AllIssues') %>
+    <%- include('partials/scripts/screenshotLightbox')%>
+    <%- include('partials/scripts/scannedPagesSegmentedTabs')%>
+    <%- include('partials/scripts/header/aboutScanModal/AboutScanModal')%>
+    <%- include('partials/scripts/wcagCoverageDetails')%>
+    <%- include('partials/scripts/header/aboutScanModal/ScanDetails')%>
+    <%- include('partials/scripts/header/aboutScanModal/ScanConfiguration')%>
+    <%- include('partials/scripts/topTen')%>
+    <%- include('partials/scripts/wcagCompliance/WcagGaugeBar') %>
+    <%- include('partials/scripts/wcagCompliance') %>
+    <%- include('partials/scripts/wcagCompliance/FailedCriteria') %>
+    <%- include('partials/scripts/prioritiseIssues/wcagSvgMap') %>
+    <%- include('partials/scripts/prioritiseIssues/IssueDetailCard') %>
+    <%- include('partials/scripts/prioritiseIssues/PrioritiseIssues') %>
+    <script>
+      function initTooltips() {
+        const tooltipTriggerList = [].slice.call(
+          document.querySelectorAll('[data-bs-toggle="tooltip"]'),
+        );
+        tooltipTriggerList.map(tooltipTriggerEl => {
+          const tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
+          tooltipTriggerEl.addEventListener('mouseleave', () => tooltip.hide());
+          return tooltip;
+        });
+      }
+
+      const scanDataCategorySelector = () => {
+        const formattedCategoryTitles = {
+          mustFix: 'Must Fix',
+          goodToFix: 'Good to Fix',
+          needsReview: 'Manual Review Required',
+          passed: 'Passed',
+        };
+
+        const scategoryList = document.getElementById('categorySelector');
+
+        Object.keys(scanItems).forEach(category => {
+          if (["mustFix", "goodToFix", "needsReview"].includes(category)) { // skip other keys like pagesScanned, etc
+            const categoryData = scanItems[category];
+            const listItem = document.createElement('div');
+            listItem.className = 'col-md-4 px-2';
+
+            const button = document.createElement('button');
+            button.setAttribute('aria-labelledby', `${category}Title ${category}ItemsInformation`);
+            button.setAttribute('aria-describedby', `${category}AriaDescription`);
+            button.id = `${category}Selector`;
+            button.className = `h-100 category-selector ${category}`;
+            button.addEventListener('click', event => changeSelectedCategory(event, category));
+            button.addEventListener('focus', () =>
+              document
+                .getElementById(`${category}Description`)
+                .dispatchEvent(new MouseEvent('mouseover')),
+            );
+            button.addEventListener('blur', () =>
+              document
+                .getElementById(`${category}Description`)
+                .dispatchEvent(new MouseEvent('mouseout')),
+            );
+            button.addEventListener('mousedown', event => event.preventDefault());
+
+            const divFlex = document.createElement('div');
+            divFlex.className = 'd-flex align-items-center mb-3';
+
+            const spanTitle = document.createElement('span');
+            spanTitle.id = `${category}Title`;
+            spanTitle.className = 'd-flex align-items-center category-name fw-bold d-inline mb-0';
+            spanTitle.textContent = formattedCategoryTitles[category];
+
+            const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgIcon.setAttribute('tabindex', '-1');
+            svgIcon.id = `${category}Description`;
+            svgIcon.setAttribute('class', 'ms-2');
+            svgIcon.setAttribute('data-bs-toggle', 'tooltip');
+            svgIcon.setAttribute('data-bs-placement', 'top');
+            svgIcon.setAttribute('title', categoryData.description);
+            svgIcon.setAttribute('width', '14');
+            svgIcon.setAttribute('height', '14');
+            svgIcon.setAttribute('viewBox', '0 0 14 14');
+            svgIcon.setAttribute('fill', 'none');
+
+            const clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
+            clipPath.className = 'clip0_1630_1670';
+
+            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            rect.setAttribute('width', '14');
+            rect.setAttribute('height', '14');
+            rect.setAttribute('fill', 'white');
+
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute(
+              'd',
+              'M11.9528 2.05329C9.22079 -0.68205 4.78867 -0.68477 2.0533 2.04718C-0.682042 4.7792 -0.684795 9.21135 2.04722 11.9467C4.77917 14.6821 9.21135 14.6848 11.9467 11.9528C14.682 9.22085 14.6848 4.78863 11.9528 2.05329ZM7.00216 11.2406C6.6319 11.2406 6.33174 10.9405 6.33174 10.5702C6.33174 10.1999 6.63187 9.89976 7.00216 9.89976C7.37243 9.89976 7.67259 10.1999 7.67259 10.5702C7.67255 10.9405 7.37243 11.2406 7.00216 11.2406ZM8.09214 7.20401C7.70918 7.42788 7.67645 7.7033 7.6748 8.49691C7.6747 8.54938 7.67453 8.60233 7.67423 8.65558C7.67185 9.03068 7.36712 9.33312 6.99253 9.33312C6.99105 9.33312 6.98957 9.33312 6.98813 9.33312C6.61159 9.33074 6.3083 9.02356 6.31066 8.64699C6.31099 8.59568 6.31109 8.54468 6.31119 8.49415C6.31287 7.67852 6.31492 6.66352 7.40395 6.02694C8.27777 5.51613 8.3879 5.18059 8.28543 4.74029C8.16503 4.2231 7.69273 4.08907 7.32418 4.1312C7.20042 4.14541 6.58322 4.24724 6.58322 4.85783C6.58322 5.23431 6.27795 5.5396 5.90141 5.5396C5.52487 5.5396 5.21964 5.23431 5.21964 4.85783C5.21964 3.76416 6.02107 2.90831 7.16859 2.77656C8.35043 2.64099 9.35515 3.32135 9.61338 4.4312C9.99939 6.08915 8.61379 6.89911 8.09214 7.20401Z',
+            );
+            path.setAttribute('fill', '#c9c8c6');
+
+            clipPath.appendChild(rect);
+            svgIcon.appendChild(clipPath);
+            svgIcon.appendChild(path);
+
+            divFlex.appendChild(spanTitle);
+            divFlex.appendChild(svgIcon);
+
+            const spanInfo = document.createElement('span');
+            spanInfo.id = `${category}ItemsInformation`;
+            spanInfo.className = 'category-information';
+
+            if (categoryData.totalItems !== 0) {
+              spanInfo.textContent = `${categoryData.rules.length} ${categoryData.rules.length === 1 ? 'issue' : 'issues'} / ${categoryData.totalItems} ${categoryData.totalItems === 1 ? 'occurrence' : 'occurrences'}`;
+            } else if (categoryData.totalItems === 0) {
+              spanInfo.textContent = `0 issues`;
+            }
+
+            button.appendChild(divFlex);
+            button.appendChild(spanInfo);
+            listItem.appendChild(button);
+            scategoryList.appendChild(listItem);
+          }
+        });
+
+        const categoryList = document.getElementById('issueTypeListbox');
+
+        Object.keys(scanItems).forEach(category => {
+          if (["mustFix", "goodToFix", "needsReview"].includes(category)) { // skip other keys like pagesScanned, etc
+
+            const categoryData = scanItems[category];
+            const rulesLength = categoryData.rules ? categoryData.rules.length : 0;
+
+            const listItem = document.createElement('li');
+            listItem.tabIndex = -1;
+            listItem.id = `${category}DropdownSelector`;
+            listItem.className = `${category} category-selector d-flex flex-row align-items-center gap-2 position-relative`;
+            listItem.role = 'option';
+
+            const spanTitle = document.createElement('span');
+            spanTitle.id = `${category}Title`;
+            spanTitle.className = 'd-flex align-items-center category-name fw-bold d-inline mb-0';
+            spanTitle.textContent = formattedCategoryTitles[category];
+
+            const spanInfo = document.createElement('span');
+            spanInfo.id = `${category}ItemsInformation`;
+            spanInfo.className = 'category-information';
+
+            if (categoryData.totalItems !== 0) {
+              spanInfo.textContent = `(${categoryData.rules.length} ${categoryData.rules.length === 1 ? 'issue' : 'issues'})`;
+            } else if (categoryData.totalItems === 0) {
+              spanInfo.textContent = `(0 issues)`;
+            }
+
+            listItem.appendChild(spanTitle);
+            listItem.appendChild(spanInfo);
+            categoryList.appendChild(listItem);
+          }
+        });
+      };
+
+      document.addEventListener('DOMContentLoaded', () => {
+        scanDataPromise.then(() => {
+          scanItemsPromise.then(() => {
+            initTooltips();
+            scanDataCategorySelector();
+          }).error(e => {
+            console.error("Failed to load scanItems: ", e);
+          });
+        }).error(e => {
+          console.error("Failed to load scanData: ", e);
+        });
+      });
+
+    </script>
+    <!-- Checks if js runs -->
+    <script>
+      document.getElementById('jsOn').classList.remove('d-none');
+      document.getElementById('jsOffMessage').classList.add('d-none');
+    </script>
+  </body>
+</html>

package/dist/static/ejs/summary.ejs

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en" id="accessibility-site-report">
+  <head lang="en">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Oobee Scan Summary</title>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 6C11.7707 6 10 11.1369 10 19.23V28.77C10 36.8631 11.7707 42 23.5 42C35.2293 42 37 36.8631 37 28.77V19.23C37 11.1369 35.2293 6 23.5 6ZM25.4903 14.5985V35.0562H21.5097V12.9438H27.8925L25.4903 14.5985Z' fill='%239021A6'/%3E%3C/svg%3E
+      "
+    />
+    <%- include('partials/styles/summaryBootstrap') %> <%- include('partials/styles/highlightjs') %>
+    <%- include('partials/styles/styles') %>
+  </head>
+  <body class="d-flex flex-column">
+    <%- include('partials/summaryHeader') %> <%- include('partials/summaryMain') %> <%-
+    include('partials/scripts/popper') %> <%- include('partials/scripts/bootstrap') %> <%-
+    include('partials/scripts/highlightjs') %> <%- include('partials/scripts/utils') %> <%-
+    include('partials/scripts/ruleModal/ruleOffcanvas') %> <%- include('partials/scripts/summaryScanResults')
+    %>
+    <script>
+      const scanItems = <%- JSON.stringify(
+        {
+          ...items,
+          passed: {
+            rules: items.passed.rules.map(r => delete r.pagesAffected),
+            ...items.passed
+          },
+        }
+      ) %>
+    </script>
+    <%- include('partials/scripts/summaryTable') %>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        var tooltipTriggerList = [].slice.call(
+          document.querySelectorAll('[data-bs-toggle="tooltip"]'),
+        );
+        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+          const tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
+          tooltipTriggerEl.addEventListener('mouseleave', () => tooltip.hide());
+          return tooltip;
+        });
+      });
+    </script>
+  </body>
+</html>

package/dist/types/types.js

@@ -0,0 +1 @@
+export {};