@govtechsg/oobee 0.10.20

package/src/static/ejs/partials/components/categorySelector.ejs

@@ -0,0 +1,4 @@
+<nav class="d-none d-md-flex row m-0 pt-3 px-2" aria-label="Issue category" id="categorySelector">
+</nav>
+
+

package/src/static/ejs/partials/components/categorySelectorDropdown.ejs

@@ -0,0 +1,57 @@
+<div class="d-flex m-3 d-md-none">
+  <div id="issueTypeComboBoxWrapper" class="flex-grow-1 position-relative">
+    <div
+      id="issueTypeComboBox"
+      class="ally-toggle-button-2"
+      role="combobox"
+      aria-controls="issueTypeListbox"
+      aria-haspopup="listbox"
+      tabindex="0"
+      aria-expanded="false"
+      aria-label="Issue type"
+    >
+      <span
+        id="dropdownToggleContainer"
+        class="category-selector d-flex flex-row align-items-center gap-2"
+      >
+        <strong id="dropdownToggleCategoryTitle" class="category-name d-flex align-items-center"
+          >Category Title</strong
+        >
+        <span id="dropdownToggleCategoryInfo">(# issues)</span>
+      </span>
+    </div>
+
+    <ul role="listbox" id="issueTypeListbox" class="w-100" aria-label="Issue type"></ul>
+  </div>
+
+  <div class="ps-2">
+    <svg
+      tabindex="-1"
+      id="categorySelectorDropdownToolipDescription"
+      class="h-100 ms-2"
+      data-bs-toggle="tooltip"
+      data-bs-placement="top"
+      title="Choose a category from the dropdown"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(.clip0_1630_1670)">
+        <path
+          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"
+          fill="#c9c8c6"
+        />
+      </g>
+      <defs>
+        <clipPath class="clip0_1630_1670">
+          <rect width="14" height="14" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+</div>
+<div id="dropdownIssuesOccurrences" class="d-md-none d-flex mx-2 px-2">
+  # issues / # occurrences
+</div>

package/src/static/ejs/partials/components/pagesScannedModal.ejs

@@ -0,0 +1,70 @@
+<div
+  id="pagesScannedModal"
+  class="modal fade"
+  aria-labelledby="pagesScannedModalLabel"
+  aria-hidden="true"
+  tabindex="-1"
+>
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title fw-bold" id="pagesScannedModalLabel">
+          NA
+        </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+      <% if (totalPagesNotScanned > 0) { %>
+        <ul class="nav nav-tabs" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button 
+              class="nav-link active" 
+              id="pages-scanned-tab" 
+              data-bs-toggle="tab" 
+              data-bs-target="#pages-scanned" 
+              type="button"
+              role="tab"
+              aria-controls="pages-scanned"
+              aria-selected="true"
+            > 
+              Scanned
+              <span class="badge" id="totalPagesScannedLabel">NA</span>
+            </button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button
+              class="nav-link"
+              id="pages-not-scanned-tab"
+              data-bs-toggle="tab"
+              data-bs-target="#pages-not-scanned"
+              type="button"
+              role="tab"
+              aria-controls="pages-not-scanned"
+              aria-selected="true"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M12 19.875C9.91142 19.875 7.90838 19.0453 6.43153 17.5685C4.95468 16.0916 4.125 14.0886 4.125 12C4.125 9.91142 4.95468 7.90838 6.43153 6.43153C7.90838 4.95468 9.91142 4.125 12 4.125C14.0886 4.125 16.0916 4.95468 17.5685 6.43153C19.0453 7.90838 19.875 9.91142 19.875 12C19.875 14.0886 19.0453 16.0916 17.5685 17.5685C16.0916 19.0453 14.0886 19.875 12 19.875ZM12 21C14.3869 21 16.6761 20.0518 18.364 18.364C20.0518 16.6761 21 14.3869 21 12C21 9.61305 20.0518 7.32387 18.364 5.63604C16.6761 3.94821 14.3869 3 12 3C9.61305 3 7.32387 3.94821 5.63604 5.63604C3.94821 7.32387 3 9.61305 3 12C3 14.3869 3.94821 16.6761 5.63604 18.364C7.32387 20.0518 9.61305 21 12 21Z" fill="#f26949"/>
+                <path d="M10.8772 15.3751C10.8772 15.2274 10.9063 15.0811 10.9628 14.9446C11.0194 14.8081 11.1022 14.6841 11.2067 14.5796C11.3112 14.4752 11.4352 14.3923 11.5717 14.3357C11.7082 14.2792 11.8545 14.2501 12.0022 14.2501C12.1499 14.2501 12.2962 14.2792 12.4327 14.3357C12.5692 14.3923 12.6932 14.4752 12.7977 14.5796C12.9022 14.6841 12.985 14.8081 13.0416 14.9446C13.0981 15.0811 13.1272 15.2274 13.1272 15.3751C13.1272 15.6735 13.0087 15.9596 12.7977 16.1706C12.5867 16.3816 12.3006 16.5001 12.0022 16.5001C11.7038 16.5001 11.4177 16.3816 11.2067 16.1706C10.9957 15.9596 10.8772 15.6735 10.8772 15.3751ZM10.9874 8.61949C10.9725 8.47756 10.9875 8.33407 11.0315 8.19832C11.0756 8.06257 11.1477 7.9376 11.2432 7.83152C11.3387 7.72544 11.4554 7.64062 11.5857 7.58256C11.7161 7.52449 11.8572 7.49449 11.9999 7.49449C12.1427 7.49449 12.2838 7.52449 12.4142 7.58256C12.5445 7.64062 12.6612 7.72544 12.7567 7.83152C12.8522 7.9376 12.9243 8.06257 12.9683 8.19832C13.0124 8.33407 13.0274 8.47756 13.0124 8.61949L12.6187 12.5649C12.6055 12.7199 12.5346 12.8642 12.42 12.9695C12.3054 13.0747 12.1555 13.133 11.9999 13.133C11.8444 13.133 11.6945 13.0747 11.5799 12.9695C11.4653 12.8642 11.3944 12.7199 11.3812 12.5649L10.9874 8.61949Z" fill="#f26949"/>
+              </svg>
+              Not scanned
+              <span class="badge" id="totalPagesNotScannedLabel">NA</span>
+            </button>
+          </li>
+        </ul>
+        <% } %>
+        <div class="tab-content">
+          <div class="tab-pane fade show active" id="pages-scanned" role="tabpanel" aria-labelledby="pages-scanned-tab">
+            <ul class="unbulleted-list" id="pagesScannedList">
+            </ul>    
+          </div>
+          <% if (totalPagesNotScanned > 0) { %>
+          <div class="tab-pane fade" id="pages-not-scanned" role="tabpanel" aria-labelledby="pages-not-scanned-tab">
+            <ul class="unbulleted-list" id="pagesNotScannedList">
+            </ul>
+          </div>
+          <% } %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/static/ejs/partials/components/reportSearch.ejs

@@ -0,0 +1,47 @@
+<h2 class="mb-3">Issues</h2>
+
+<div id="searchBar" class="z-1">
+  <span class="input-search">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M21.6143 19.5152C23.0668 17.5332 23.7173 15.0759 23.4358 12.6349C23.1543 10.1939 21.9615 7.94918 20.096 6.34987C18.2305 4.75056 15.83 3.91458 13.3746 4.00919C10.9192 4.1038 8.59012 5.12202 6.85325 6.86014C5.11637 8.59825 4.09982 10.9281 4.00697 13.3835C3.91412 15.839 4.75181 18.2389 6.35246 20.1032C7.95311 21.9676 10.1987 23.1588 12.6399 23.4386C15.0811 23.7183 17.5379 23.066 19.5188 21.6122H19.5173C19.5623 21.6722 19.6103 21.7292 19.6643 21.7847L25.4393 27.5597C25.7206 27.8411 26.1022 27.9993 26.5001 27.9995C26.898 27.9996 27.2796 27.8417 27.5611 27.5604C27.8426 27.2792 28.0008 26.8976 28.0009 26.4997C28.001 26.1018 27.8431 25.7201 27.5618 25.4387L21.7868 19.6637C21.7332 19.6094 21.6756 19.5592 21.6143 19.5137V19.5152ZM22.0013 13.7492C22.0013 14.8326 21.788 15.9054 21.3734 16.9063C20.9588 17.9072 20.3511 18.8167 19.585 19.5828C18.8189 20.3489 17.9094 20.9566 16.9085 21.3712C15.9075 21.7858 14.8348 21.9992 13.7513 21.9992C12.6679 21.9992 11.5951 21.7858 10.5942 21.3712C9.59327 20.9566 8.6838 20.3489 7.91772 19.5828C7.15163 18.8167 6.54394 17.9072 6.12934 16.9063C5.71474 15.9054 5.50135 14.8326 5.50135 13.7492C5.50135 11.5611 6.37054 9.46272 7.91772 7.91554C9.46489 6.36837 11.5633 5.49917 13.7513 5.49917C15.9394 5.49917 18.0378 6.36837 19.585 7.91554C21.1322 9.46272 22.0013 11.5611 22.0013 13.7492Z"
+        fill="#c9c8c6"
+      />
+    </svg>
+  </span>
+
+  <input
+    onfocus="showFilter()"
+    oninput="showFilter()"
+    onclick="showFilter()"
+    type="text"
+    class="form-control"
+    id="searchBarInput"
+    placeholder="Search..."
+    aria-label="Search"
+  />
+</div>
+
+<fieldset id="searchFilter" class="d-none filter-options-group">
+  <div class="ps-xl-3">In:</div>
+
+  <legend class="sr-only">Search Filter Options:</legend>
+
+  <input type="radio" class="sr-only" name="filter" id="issueDescriptionsButton" />
+  <label for="issueDescriptionsButton" class="filter-button-issue filter-words"
+    >Issue Descriptions</label
+  >
+
+  <input type="radio" class="sr-only" name="filter" id="pagesButton" />
+  <label for="pagesButton" class="filter-button-pages filter-words">Pages</label>
+
+  <input type="radio" class="sr-only" name="filter" id="htmlButton" />
+  <label for="htmlButton" class="filter-button-html filter-words">HTML elements/Paths</label>
+</fieldset>

package/src/static/ejs/partials/components/ruleOffcanvas.ejs

@@ -0,0 +1,105 @@
+<%# this is a template; content will be populated using js %>
+<div
+  class="offcanvas offcanvas-end"
+  tabindex="-1"
+  id="expandedRule"
+  aria-labelledby="expandedRuleName"
+>
+  <div class="p-4">
+    <div class="offcanvas-header p-0">
+      <h2 class="offcanvas-title" id="expandedRuleName"></h2>
+      <button
+        type="button"
+        class="btn-close text-reset"
+        data-bs-dismiss="offcanvas"
+        aria-label="Close"
+      ></button>
+    </div>
+    <div id="expandedRuleDescription"></div>
+    <a id="expandedRuleHelpUrl" href="#" target="_blank">Learn more about this issue</a>
+    <h3 id="conformance-header">Conformance:</h3>
+    <div id="expandedRuleConformance"></div>
+    <div id="expandedRuleAiFeedback">
+      <svg aria-hidden="true" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.5272 5.84609C12.1792 4.49755 11.2565 2.14266 10.7986 0C10.34 2.14309 9.41829 4.49848 8.06975 5.84702C6.72171 7.19463 4.3661 8.11732 2.22388 8.57615C4.36697 9.03405 6.72214 9.95619 8.07019 11.3048C9.41824 12.6528 10.3409 15.0082 10.7995 17.1509C11.2574 15.0078 12.1798 12.6524 13.5277 11.3039C14.8757 9.9558 17.2313 9.03356 19.3735 8.57473C17.2309 8.11683 14.8758 7.1942 13.5272 5.84609Z" fill="#9021a6" />
+        <path d="M22.2835 16.6434C21.4788 15.8384 20.9267 14.4308 20.6532 13.1509C20.3791 14.4308 19.8289 15.8383 19.0233 16.6439C18.2178 17.4485 16.8104 18.0002 15.5308 18.2742C16.8109 18.5482 18.2178 19.099 19.0233 19.9045C19.8289 20.7096 20.3801 22.1172 20.6541 23.3971C20.9276 22.1167 21.4788 20.7096 22.2839 19.9041C23.089 19.099 24.4966 18.5477 25.776 18.2733C24.4966 17.9997 23.0891 17.4486 22.2835 16.6434Z" fill="#9021a6" />
+        <path d="M8.00356 19.3979C7.77349 20.4724 7.31149 21.6545 6.63533 22.3306C5.95928 23.0062 4.77771 23.4692 3.70337 23.6993C4.77771 23.9298 5.95928 24.3914 6.63533 25.0679C7.31149 25.744 7.77442 26.9251 8.00449 28.0002C8.23434 26.9251 8.69656 25.7441 9.37293 25.0675C10.0485 24.3915 11.2303 23.9289 12.3045 23.6984C11.2304 23.4687 10.0485 23.0063 9.37249 22.3302C8.69656 21.6546 8.23341 20.4725 8.00356 19.3979Z" fill="#9021a6" />
+      </svg>
+      This issue might benefit from AI suggested fixes.
+      <%
+        const urlScannedField = '64d49b567c3c460011feb8b5'; 
+        const encodedUrlScanned = encodeURIComponent(urlScanned);
+        const versionNumberField = '64dae8bca2eb61001284298f';
+        const encodedVersionNumber = encodeURIComponent(phAppVersion);
+        const aiFeedbackForm = `https://form.gov.sg/64d4a74da3a1e10012fd16a3/?${urlScannedField}=${encodedUrlScanned}&${versionNumberField}=${encodedVersionNumber}`;
+      %>
+      <a target="_blank" href="<%=aiFeedbackForm%>">Let us know if it helps!</a>
+    </div>
+  </div>
+  <div class="offcanvas-body">
+    <!-- search feat changes -->
+    <div id="expandedRuleSearchWarning"></div>
+    <div id="expandedRuleInfoText"></div>
+    <nav class="d-none d-md-flex" id="expandedRuleCategorySelectors" aria-label="Occurrence category"></nav>
+
+    <!-- START expandedRuleDropdownCategorySelector-->
+    <div class="d-flex d-md-none">
+      <div id="expandedRuleIssueTypeComboBoxWrapper" class="flex-grow-1 position-relative">
+        <div
+          id="expandedRuleIssueTypeComboBox"
+          class="expanded-rule-issue-type-combobox-button"
+          role="combobox"
+          aria-controls="expandedRuleIssueTypeListbox"
+          aria-haspopup="listbox"
+          tabindex="0"
+          aria-expanded="false"
+          aria-label="Issue type"
+        >
+          <span
+            id="expandedRuleDropdownToggleContainer"
+            class="mustFix category-selector d-flex flex-row align-items-center gap-2"
+          >
+            <strong id="expandedRuleDropdownToggleCategoryTitle" class="category-name d-flex align-items-center"
+              >Category Title</strong
+            >
+            <span id="expandedRuleDropdownToggleCategoryInfo">(# occurrences)</span>
+          </span>
+        </div>
+
+        <ul role="listbox" id="expandedRuleIssueTypeListbox" class="w-100 ps-0 z-1" aria-label="Issue type">
+
+        </ul>
+      </div>
+
+      <div class="ps-2">
+        <svg
+          tabindex="-1"
+          id="categorySelectorDropdownToolipDescription"
+          class="h-100 ms-2"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Choose a category from the dropdown"
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g clip-path="url(.clip0_1630_1670)">
+            <path
+              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"
+              fill="#c9c8c6"
+            />
+          </g>
+          <defs>
+            <clipPath class="clip0_1630_1670">
+              <rect width="14" height="14" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+    </div>
+
+    <div id="expandedRuleCategoryContent" class="mt-4"></div>
+  </div>
+</div>

package/src/static/ejs/partials/components/scanAbout.ejs

@@ -0,0 +1,263 @@
+<aside id="scan-about" class="flex-shrink-0">
+  <h2 class="mb-3">About this scan</h2>
+  <ul>
+    <li>
+      <svg
+        aria-label="Start time"
+        width="18"
+        height="19"
+        viewBox="0 0 18 19"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M3.69863 0.927936C3.69863 0.41626 4.11262 0.00146484 4.62329 0.00146484C5.13396 0.00146484 5.54795 0.41626 5.54795 0.927936V1.85441H9.24658V0.927936C9.24658 0.41626 9.66056 0.00146484 10.1712 0.00146484C10.6819 0.00146484 11.0959 0.41626 11.0959 0.927936V1.85441H12.0205C13.5526 1.85441 14.7945 3.09879 14.7945 4.63382V8.51434C14.6723 8.5058 14.549 8.50146 14.4247 8.50146C14.0768 8.50146 13.7367 8.53544 13.4075 8.60029V7.41323H1.38699V12.9721C1.38699 13.7396 2.00795 14.3618 2.77397 14.3618H9.1446C9.18737 14.8464 9.29359 15.3125 9.45476 15.7515H2.77397C1.24195 15.7515 0 14.5071 0 12.9721V4.63382C0 3.09879 1.24195 1.85441 2.77397 1.85441H3.69863V0.927936ZM9.24658 3.24411V3.70735C9.24658 4.21902 9.66056 4.63382 10.1712 4.63382C10.6819 4.63382 11.0959 4.21902 11.0959 3.70735V3.24411H12.0205C12.7866 3.24411 13.4075 3.8663 13.4075 4.63382V6.48676H1.38699V4.63382C1.38699 3.8663 2.00795 3.24411 2.77397 3.24411H3.69863V3.70735C3.69863 4.21902 4.11262 4.63382 4.62329 4.63382C5.13396 4.63382 5.54795 4.21902 5.54795 3.70735V3.24411H9.24658ZM17.0959 14.0015C17.0959 15.7043 15.7343 17.0848 14.0548 17.0848C12.3752 17.0848 11.0137 15.7043 11.0137 14.0015C11.0137 12.2986 12.3752 10.9181 14.0548 10.9181C15.7343 10.9181 17.0959 12.2986 17.0959 14.0015ZM18 14.0015C18 16.2106 16.2337 18.0015 14.0548 18.0015C11.8759 18.0015 10.1096 16.2106 10.1096 14.0015C10.1096 11.7923 11.8759 10.0015 14.0548 10.0015C16.2337 10.0015 18 11.7923 18 14.0015ZM14.0548 11.5015C13.8732 11.5015 13.726 11.6507 13.726 11.8348V13.9181C13.726 14.0241 13.7748 14.1185 13.8507 14.1795C13.8597 14.191 13.8696 14.2021 13.8803 14.2125L14.8486 15.161C14.9791 15.2889 15.1873 15.2853 15.3134 15.1529C15.4396 15.0205 15.436 14.8095 15.3054 14.6816L14.3836 13.7785V11.8348C14.3836 11.6507 14.2364 11.5015 14.0548 11.5015Z"
+          fill="#93928d"
+        />
+      </svg>
+      <span id="aboutStartTime">N/A</span>
+    </li>
+    <li>
+      <svg
+        aria-label="URL scanned"
+        width="18"
+        height="15"
+        viewBox="0 0 18 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M16.5789 2.80146H1.42105V12.6015H16.5789V2.80146ZM18 0.934798V2.80146V13.0681C18 13.5836 17.5758 14.0015 17.0526 14.0015H0.947369C0.42415 14.0015 0 13.5836 0 13.0681V2.80146V0.934798C0 0.419332 0.42415 0.00146484 0.947369 0.00146484H17.0526C17.5758 0.00146484 18 0.419332 18 0.934798ZM3.07895 2.3348C2.68653 2.3348 2.36842 2.0214 2.36842 1.6348C2.36842 1.2482 2.68653 0.934798 3.07895 0.934798C3.47136 0.934798 3.78947 1.2482 3.78947 1.6348C3.78947 2.0214 3.47136 2.3348 3.07895 2.3348ZM4.26316 1.6348C4.26316 2.0214 4.58127 2.3348 4.97368 2.3348C5.3661 2.3348 5.68421 2.0214 5.68421 1.6348C5.68421 1.2482 5.3661 0.934798 4.97368 0.934798C4.58127 0.934798 4.26316 1.2482 4.26316 1.6348ZM6.86842 2.3348C6.47601 2.3348 6.15789 2.0214 6.15789 1.6348C6.15789 1.2482 6.47601 0.934798 6.86842 0.934798C7.26083 0.934798 7.57895 1.2482 7.57895 1.6348C7.57895 2.0214 7.26083 2.3348 6.86842 2.3348Z"
+          fill="#93928d"
+        />
+      </svg>
+      <a id="urlScanned" href="#" target="_blank">N/A</a>
+    </li>
+    <% if (viewport !== null) { %>
+      <li>
+        <% if (viewport.startsWith('Desktop')) { %>
+        <svg
+          aria-label="Viewport"
+          width="18"
+          height="15.5"
+          viewBox="0 0 18 15.5"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M16.56 0.19H1.44A1.26 1.26 0 0 0 0.18 1.452v10.092a1.26 1.26 0 0 0 1.26 1.262h5.67v1.242H5.85c-0.347 0 -0.63 0.282 -0.63 0.63 0 0.349 0.282 0.63 0.63 0.63h6.3c0.347 0 0.63 -0.282 0.63 -0.63 0 -0.349 -0.282 -0.63 -0.63 -0.63h-1.26v-1.242h5.67c0.697 0 1.26 -0.565 1.26 -1.262V1.452A1.26 1.26 0 0 0 16.56 0.19Zm0 10.98c0 0.218 -0.176 0.394 -0.394 0.394H1.834A0.394 0.394 0 0 1 1.44 11.17V1.866c0 -0.218 0.176 -0.394 0.394 -0.394H16.168c0.218 0 0.394 0.176 0.394 0.394L16.56 11.17Z"
+            fill="#93928d"
+          />
+        </svg>
+        <% } else if (viewport.startsWith('CustomWidth')) { %>
+        <svg
+          aria-label="Viewport"
+          width="18"
+          height="18"
+          viewBox="0 0 18 18"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M0 3.6a3.6 3.6 0 0 1 3.6 -3.6h10.8a3.6 3.6 0 0 1 3.6 3.6v10.8a3.6 3.6 0 0 1 -3.6 3.6H3.6a3.6 3.6 0 0 1 -3.6 -3.6V3.6Zm3.329 6.263a0.863 0.863 0 0 0 -0.863 0.863v3.945a0.863 0.863 0 0 0 0.986 0.854c0.041 0.006 0.081 0.009 0.123 0.009h3.945a0.863 0.863 0 1 0 0 -1.726H4.192v-3.083a0.863 0.863 0 0 0 -0.863 -0.863Zm12.452 -2.588a0.863 0.863 0 1 1 -1.726 0V4.192h-3.328a0.863 0.863 0 0 1 0 -1.726h3.945c0.042 0 0.083 0.004 0.123 0.009a0.863 0.863 0 0 1 0.986 0.854v3.946Z"
+            fill="#93928d"
+          />
+        </svg>
+        <% } else { %>
+        <svg
+          aria-label="Viewport"
+          width="12"
+          height="22"
+          viewBox="0 0 12 22"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M1.94595 0.00146484C0.87123 0.00146484 0 0.856193 0 1.91056V19.0924C0 20.1467 0.87123 21.0015 1.94595 21.0015H10.0541C11.1288 21.0015 12 20.1467 12 19.0924V1.91056C12 0.856194 11.1288 0.00146484 10.0541 0.00146484H1.94595ZM10.7027 2.54692H1.2973V17.8196H10.7027V2.54692ZM4.21622 1.1151C4.21622 1.02724 4.28882 0.95601 4.37838 0.95601H7.94595C8.03551 0.95601 8.10811 1.02724 8.10811 1.1151C8.10811 1.20296 8.03551 1.27419 7.94595 1.27419H4.37838C4.28882 1.27419 4.21622 1.20296 4.21622 1.1151ZM6.16216 20.3651C6.69952 20.3651 7.13514 19.9377 7.13514 19.4106C7.13514 18.8834 6.69952 18.456 6.16216 18.456C5.6248 18.456 5.18919 18.8834 5.18919 19.4106C5.18919 19.9377 5.6248 20.3651 6.16216 20.3651Z"
+            fill="#93928d"
+          />
+        </svg>
+        <% } %>
+        <span id="viewport">
+           N/A
+        </span>
+      </li>
+    <% } %>
+    <li>
+      <svg
+        aria-label="Pages scanned"
+        width="17"
+        height="18"
+        viewBox="0 0 17 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_1630_1547)">
+          <path
+            d="M14.0299 1.09229H2.97102C2.59546 1.09229 2.29102 1.39673 2.29102 1.77228V16.231C2.29102 16.6065 2.59546 16.911 2.97102 16.911H14.0299C14.4054 16.911 14.7099 16.6065 14.7099 16.231V1.77228C14.7099 1.39673 14.4054 1.09229 14.0299 1.09229Z"
+            stroke="#93928d"
+            stroke-width="1.7369"
+          />
+          <path
+            d="M5.03369 4.92139H11.9663"
+            stroke="#93928d"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+          <path
+            d="M5.03369 7.64136H11.9663"
+            stroke="#93928d"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+          <path
+            d="M5.03369 10.3613H11.9663"
+            stroke="#93928d"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+          <path
+            d="M5.03369 13.0813H11.9663"
+            stroke="#93928d"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_1630_1547">
+            <rect width="17" height="17" fill="white" transform="translate(0 0.501465)" />
+          </clipPath>
+        </defs>
+      </svg>
+      <button
+        id="pagesScannedModalToggle"
+        data-bs-toggle="modal"
+        data-bs-target="#pagesScannedModal"
+        ><span id="pagesScannedModalToggleTxt">N/A</span>
+      <% if (totalPagesNotScanned > 0) { %>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path d="M12 19.875C9.91142 19.875 7.90838 19.0453 6.43153 17.5685C4.95468 16.0916 4.125 14.0886 4.125 12C4.125 9.91142 4.95468 7.90838 6.43153 6.43153C7.90838 4.95468 9.91142 4.125 12 4.125C14.0886 4.125 16.0916 4.95468 17.5685 6.43153C19.0453 7.90838 19.875 9.91142 19.875 12C19.875 14.0886 19.0453 16.0916 17.5685 17.5685C16.0916 19.0453 14.0886 19.875 12 19.875ZM12 21C14.3869 21 16.6761 20.0518 18.364 18.364C20.0518 16.6761 21 14.3869 21 12C21 9.61305 20.0518 7.32387 18.364 5.63604C16.6761 3.94821 14.3869 3 12 3C9.61305 3 7.32387 3.94821 5.63604 5.63604C3.94821 7.32387 3 9.61305 3 12C3 14.3869 3.94821 16.6761 5.63604 18.364C7.32387 20.0518 9.61305 21 12 21Z" fill="#f26949"/>
+          <path d="M10.8772 15.3751C10.8772 15.2274 10.9063 15.0811 10.9628 14.9446C11.0194 14.8081 11.1022 14.6841 11.2067 14.5796C11.3112 14.4752 11.4352 14.3923 11.5717 14.3357C11.7082 14.2792 11.8545 14.2501 12.0022 14.2501C12.1499 14.2501 12.2962 14.2792 12.4327 14.3357C12.5692 14.3923 12.6932 14.4752 12.7977 14.5796C12.9022 14.6841 12.985 14.8081 13.0416 14.9446C13.0981 15.0811 13.1272 15.2274 13.1272 15.3751C13.1272 15.6735 13.0087 15.9596 12.7977 16.1706C12.5867 16.3816 12.3006 16.5001 12.0022 16.5001C11.7038 16.5001 11.4177 16.3816 11.2067 16.1706C10.9957 15.9596 10.8772 15.6735 10.8772 15.3751ZM10.9874 8.61949C10.9725 8.47756 10.9875 8.33407 11.0315 8.19832C11.0756 8.06257 11.1477 7.9376 11.2432 7.83152C11.3387 7.72544 11.4554 7.64062 11.5857 7.58256C11.7161 7.52449 11.8572 7.49449 11.9999 7.49449C12.1427 7.49449 12.2838 7.52449 12.4142 7.58256C12.5445 7.64062 12.6612 7.72544 12.7567 7.83152C12.8522 7.9376 12.9243 8.06257 12.9683 8.19832C13.0124 8.33407 13.0274 8.47756 13.0124 8.61949L12.6187 12.5649C12.6055 12.7199 12.5346 12.8642 12.42 12.9695C12.3054 13.0747 12.1555 13.133 11.9999 13.133C11.8444 13.133 11.6945 13.0747 11.5799 12.9695C11.4653 12.8642 11.3944 12.7199 11.3812 12.5649L10.9874 8.61949Z" fill="#f26949"/>
+        </svg>
+      <% } %>
+      </button>
+    </li>
+    <li>
+      <svg
+        aria-label="Scan Statistics"
+        width="17"
+        height="18"
+        viewBox="0 0 17 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_1630_1547)">
+          <path
+            d="M14.0299 1.09229H2.97102C2.59546 1.09229 2.29102 1.39673 2.29102 1.77228V16.231C2.29102 16.6065 2.59546 16.911 2.97102 16.911H14.0299C14.4054 16.911 14.7099 16.6065 14.7099 16.231V1.77228C14.7099 1.39673 14.4054 1.09229 14.0299 1.09229Z"
+            stroke="#93928d"
+            stroke-width="1.7369"
+          />
+          <path
+            d="M5.03369 4.92139H11.9663"
+            stroke="#93928d"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+          <path
+            d="M5.03369 7.64136H11.9663"
+            stroke="#93928d"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+          <path
+            d="M5.03369 10.3613H11.9663"
+            stroke="#93928d"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+          <path
+            d="M5.03369 13.0813H11.9663"
+            stroke="#93928d"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_1630_1547">
+            <rect width="17" height="17" fill="white" transform="translate(0 0.501465)" />
+          </clipPath>
+        </defs>
+      </svg>
+      <span>
+        <span id="items">N/A</span>
+        <svg
+          tabindex="-1"
+          id="passedItemsTooltip"
+          class="ms-2"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="You may find the list of passed HTML elements in ./passed_items.json"
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g clip-path="url(.clip0_1630_1670)">
+            <path
+              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"
+              fill="#c9c8c6"
+            />
+          </g>
+          <defs>
+            <clipPath class="clip0_1630_1670">
+              <rect width="14" height="14" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+      </span>
+    </li>
+    <li>
+      <svg
+        aria-label="Scan engine"
+        xmlns="http://www.w3.org/2000/svg" 
+        width="13" 
+        height="17" 
+        viewBox="0 0 13 17" 
+        fill="none"
+      >
+        <path d="M6.49971 0.570312C1.32598 0.570312 0.544922 2.8166 0.544922 6.35557V10.5272C0.544922 14.0662 1.32598 16.3125 6.49971 16.3125C11.6734 16.3125 12.4545 14.0662 12.4545 10.5272V6.35557C12.4545 2.8166 11.6734 0.570312 6.49971 0.570312ZM7.37764 4.33027V13.2761H5.62178V3.60674H8.43721L7.37764 4.33027Z" fill="#9021A6"/>
+      </svg>
+      <span id="phAppVersion">N/A</span>
+    </li>
+    <li id = "cypressScanAboutMetadata">
+    </li>
+  </ul>
+  <hr class="my-4 d-none d-md-block" />
+  <iframe
+    id="oobee-online-banner"
+    title="GovTech Accessibility Enabling Team information banner"
+    class="h-auto w-100"
+    src="https://govtechsg.github.io/purple-banner-embeds/"
+    scrolling="no"
+  ></iframe>
+  <script>
+    const oobeeOnlineBannerElem = document.getElementById('oobee-online-banner'); 
+    oobeeOnlineBannerElem.style.display = 'none'; 
+    fetch('https://govtechsg.github.io/purple-banner-embeds/')
+      .then((response) => {
+        if (response.ok) {
+          console.log(response);
+          oobeeOnlineBannerElem.style.display = 'block';
+        }
+      })
+  </script>
+</aside>

package/src/static/ejs/partials/components/screenshotLightbox.ejs

@@ -0,0 +1,13 @@
+<div class="screenshot-lightbox">
+    <div class="lightbox-header">
+      <h5 class="mb-0"></h5>
+      <button onclick="closeLightbox()" aria-label="Close lightbox">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M0.549622 0.549531C0.713716 0.385436 0.936276 0.293249 1.16834 0.293249C1.4004 0.293249 1.62296 0.385436 1.78706 0.549531L7.97424 6.73671L14.1614 0.549531C14.3255 0.385437 14.5481 0.293249 14.7801 0.293249C15.0122 0.293249 15.2348 0.385436 15.3989 0.549531C15.563 0.713625 15.6551 0.936185 15.6551 1.16825C15.6551 1.40031 15.563 1.62287 15.3989 1.78697L9.21168 7.97415L15.3989 14.1613C15.563 14.3254 15.6551 14.548 15.6551 14.7801C15.6551 15.0121 15.563 15.2347 15.3989 15.3988C15.2348 15.5629 15.0122 15.6551 14.7801 15.6551C14.5481 15.6551 14.3255 15.5629 14.1614 15.3988L7.97424 9.21159L1.78706 15.3988C1.62296 15.5629 1.4004 15.6551 1.16834 15.6551C0.936276 15.6551 0.713716 15.5629 0.549622 15.3988C0.385527 15.2347 0.29334 15.0121 0.29334 14.7801C0.29334 14.548 0.385527 14.3254 0.549622 14.1613L6.73681 7.97415L0.549622 1.78697C0.385527 1.62287 0.29334 1.40031 0.29334 1.16825C0.29334 0.936185 0.385527 0.713625 0.549622 0.549531Z" fill="white"/>
+        </svg>
+      </button>
+    </div>
+    <div class="lightbox-content">
+      <img id="lightbox-image"></img>
+    </div>
+</div>