npm - @govtechsg/oobee - Versions diffs - 0.10.84 → 0.10.86 - Mend

@govtechsg/oobee 0.10.84 → 0.10.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/.github/workflows/image.yml +3 -2
package/.github/workflows/publish.yml +10 -0
package/DETAILS.md +29 -0
package/dist/cli.js +7 -6
package/dist/combine.js +1 -1
package/dist/constants/common.js +15 -4
package/dist/constants/constants.js +604 -1
package/dist/crawlers/commonCrawlerFunc.js +3 -2
package/dist/crawlers/crawlSitemap.js +98 -80
package/dist/crawlers/custom/utils.js +218 -71
package/dist/crawlers/guards/urlGuard.js +8 -15
package/dist/crawlers/runCustom.js +24 -15
package/dist/generateOobeeClientScanner.js +570 -0
package/dist/mergeAxeResults.js +49 -29
package/dist/npmIndex.js +10 -2
package/dist/proxyService.js +18 -3
package/dist/services/s3Uploader.js +21 -10
package/dist/static/ejs/partials/scripts/header/aboutScanModal/ScanConfiguration.ejs +2 -2
package/dist/static/ejs/partials/scripts/ruleModal/constants.ejs +1 -761
package/dist/static/ejs/summary.ejs +10 -5
package/oobee-client-scanner.js +34992 -0
package/package.json +3 -3
package/src/cli.ts +20 -15
package/src/combine.ts +3 -1
package/src/constants/common.ts +22 -10
package/src/constants/constants.ts +602 -1
package/src/crawlers/commonCrawlerFunc.ts +4 -3
package/src/crawlers/crawlSitemap.ts +116 -98
package/src/crawlers/custom/utils.ts +244 -84
package/src/crawlers/guards/urlGuard.ts +24 -31
package/src/crawlers/runCustom.ts +38 -15
package/src/generateOobeeClientScanner.ts +591 -0
package/src/mergeAxeResults.ts +48 -29
package/src/npmIndex.ts +12 -2
package/src/proxyService.ts +25 -4
package/src/services/s3Uploader.ts +23 -11
package/src/static/ejs/partials/scripts/header/aboutScanModal/ScanConfiguration.ejs +2 -2
package/src/static/ejs/partials/scripts/ruleModal/constants.ejs +1 -761
package/src/static/ejs/summary.ejs +10 -5
package/testStaticJSScanner.html +534 -0

package/src/static/ejs/summary.ejs CHANGED Viewed

@@ -23,12 +23,17 @@
       const scanItems = <%- JSON.stringify(
         {
           ...items,
-          passed: {
-            rules: items.passed.rules.map(r => delete r.pagesAffected),
-            ...items.passed
-          },
+          ...['mustFix','goodToFix','needsReview','passed'].reduce((acc, cat) => {
+            if (items[cat]) {
+              acc[cat] = {
+                ...items[cat],
+                rules: (items[cat].rules || []).map(({ htmlGroups, ...rest }) => rest),
+              };
+            }
+            return acc;
+          }, {}),
         }
-      ) %>
+      ).replace(/<\//g, '<\\/') %>
     </script>
     <%- include('partials/scripts/summaryTable') %>
     <script>

package/testStaticJSScanner.html ADDED Viewed

@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<!--
+  testStaticJSScanner.html
+  ========================
+  Demo page for oobee-client-scanner.js.
+  Steps to use:
+    1. Build oobee:          npm run build
+    2. Generate the bundle:  node dist/generateOobeeClientScanner.js
+    3. Open this file in a browser (must be served, not file://, to avoid CORS on axe iframes):
+         npx serve .
+       Then visit: http://localhost:3000/testStaticJSScanner.html
+  The page contains intentional accessibility violations so the scanner has
+  something to find. Open the browser DevTools console to see the full JSON output.
+-->
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Oobee Client Scanner — Test Page</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      max-width: 1200px; margin: 2rem auto; padding: 0 1.5rem;
+      color: #212529; line-height: 1.5;
+    }
+    h1 { color: #1a1a2e; margin-bottom: 0.25rem; }
+    h2 { color: #343a40; border-bottom: 2px solid #dee2e6; padding-bottom: 0.4rem; margin-top: 2rem; }
+    h3 { color: #495057; margin-top: 1.5rem; }
+    /* ── Status bar ────────────────────────────────────────────────────────── */
+    .status {
+      padding: 0.85rem 1rem; border-radius: 6px; margin: 1rem 0;
+      font-weight: 500;
+    }
+    .status.running  { background: #fff3cd; border-left: 4px solid #ffc107; }
+    .status.done     { background: #d4edda; border-left: 4px solid #28a745; }
+    .status.error    { background: #f8d7da; border-left: 4px solid #dc3545; }
+    /* ── Category badges ───────────────────────────────────────────────────── */
+    .badge {
+      display: inline-block; padding: 2px 8px; border-radius: 4px;
+      font-size: 0.72rem; font-weight: 700; color: #fff; white-space: nowrap;
+    }
+    .badge.mustFix     { background: #dc3545; }
+    .badge.goodToFix   { background: #fd7e14; }
+    .badge.needsReview { background: #6c757d; }
+    /* ── Summary table ─────────────────────────────────────────────────────── */
+    table.summary-table {
+      border-collapse: collapse; margin: 0.75rem 0;
+    }
+    table.summary-table th,
+    table.summary-table td {
+      border: 1px solid #dee2e6; padding: 0.45rem 0.8rem; text-align: left;
+    }
+    table.summary-table th { background: #f1f3f5; font-weight: 600; }
+    /* ── Issues table ──────────────────────────────────────────────────────── */
+    .table-scroll { overflow-x: auto; margin: 1rem 0; }
+    table.issues-table {
+      border-collapse: collapse; width: 100%; min-width: 900px;
+      font-size: 0.875rem;
+    }
+    table.issues-table th {
+      background: #1a1a2e; color: #fff;
+      padding: 0.55rem 0.75rem; text-align: left;
+      font-weight: 600; white-space: nowrap;
+    }
+    table.issues-table td {
+      border: 1px solid #dee2e6; padding: 0.5rem 0.75rem;
+      vertical-align: top;
+    }
+    table.issues-table tr:nth-child(even) td { background: #f8f9fa; }
+    table.issues-table tr:hover td          { background: #e9f4ff; }
+    /* Rule ID cell */
+    .rule-id { font-family: monospace; font-size: 0.82rem; color: #0d6efd; font-weight: 600; }
+    /* Conformance tags */
+    .conf-tag {
+      display: inline-block; margin: 1px 2px;
+      padding: 1px 5px; border-radius: 3px; font-size: 0.7rem;
+      background: #e9ecef; color: #495057; border: 1px solid #ced4da;
+    }
+    /* Occurrences pill */
+    .occ-pill {
+      display: inline-block; padding: 2px 8px; border-radius: 12px;
+      background: #e9ecef; font-weight: 600; font-size: 0.8rem;
+    }
+    /* Go-to-element links */
+    .goto-link {
+      display: inline-block; margin: 2px 0;
+      font-size: 0.78rem; color: #0d6efd; text-decoration: none;
+      white-space: nowrap;
+    }
+    .goto-link:hover { text-decoration: underline; }
+    .item-message {
+      display: block; font-size: 0.75rem; color: #6c757d;
+      margin: 1px 0 6px; font-style: italic;
+    }
+    /* Long description cell — collapsible */
+    details summary {
+      cursor: pointer; color: #0d6efd; font-size: 0.82rem;
+      user-select: none; list-style: none;
+    }
+    details summary::before { content: '▶ '; font-size: 0.7rem; }
+    details[open] summary::before { content: '▼ '; }
+    details p { margin: 0.4rem 0 0; font-size: 0.83rem; color: #495057; }
+    /* Step-by-step guide */
+    .steps { margin: 0; padding: 0; list-style: none; font-size: 0.82rem; }
+    .steps li { margin-bottom: 0.35rem; }
+    .step-label {
+      display: inline-block; min-width: 3.5rem;
+      font-weight: 700; color: #343a40;
+    }
+    /* ── Raw JSON block ────────────────────────────────────────────────────── */
+    pre {
+      background: #1e1e1e; color: #d4d4d4;
+      padding: 1rem; border-radius: 6px;
+      overflow: auto; max-height: 500px;
+      font-size: 0.78rem; line-height: 1.4;
+    }
+    /* ── Check Accessibility button ───────────────────────────────────────── */
+    .scan-btn {
+      display: inline-flex; align-items: center; gap: 0.5rem;
+      padding: 0.65rem 1.4rem; font-size: 1rem; font-weight: 600;
+      color: #fff; background: #1a1a2e; border: none; border-radius: 6px;
+      cursor: pointer; transition: background 0.15s;
+    }
+    .scan-btn:hover  { background: #2e2e5e; }
+    .scan-btn:active { background: #0d0d1a; }
+    .scan-btn:disabled { background: #6c757d; cursor: not-allowed; }
+    /* ── Integration instructions ─────────────────────────────────────────── */
+    .integration-box {
+      background: #f0f4ff; border: 1px solid #c7d4f5;
+      border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1.5rem 0;
+    }
+    .integration-box h2 {
+      margin-top: 0; border-bottom: none; font-size: 1rem;
+      color: #1a1a2e; padding-bottom: 0;
+    }
+    .integration-box ol { margin: 0.5rem 0 0 1.25rem; padding: 0; }
+    .integration-box li { margin-bottom: 0.5rem; font-size: 0.9rem; }
+    .integration-box pre {
+      background: #1e1e1e; color: #d4d4d4;
+      padding: 0.85rem 1rem; border-radius: 5px;
+      overflow-x: auto; max-height: none;
+      font-size: 0.78rem; line-height: 1.5; margin: 0.5rem 0 0;
+    }
+    .integration-box code {
+      background: #e8edf8; color: #1a1a2e;
+      padding: 1px 5px; border-radius: 3px; font-size: 0.85em;
+    }
+    /* ── Violation sandbox ─────────────────────────────────────────────────── */
+    .violation-area {
+      border: 2px dashed #dc3545; padding: 1rem; margin: 2rem 0;
+      border-radius: 6px; background: #fff5f5;
+    }
+    .violation-area h3 { color: #dc3545; margin-top: 0; }
+  </style>
+</head>
+<body>
+  <h1>Oobee Client Scanner — Test Page</h1>
+  <p>
+    This page intentionally contains several accessibility violations so
+    <code>oobee-client-scanner.js</code> has something to detect.
+    Open the browser DevTools console for the full JSON output.
+  </p>
+  <!-- ── Integration instructions ────────────────────────────────────────── -->
+  <div class="integration-box">
+    <h2>How to integrate into your own page</h2>
+    <ol>
+      <li>
+        <strong>Add the script</strong> — include the scanner before your closing
+        <code>&lt;/body&gt;</code> tag:
+        <pre>&lt;script src="https://cdn.jsdelivr.net/gh/GovTechSG/oobee@v0.10.86/oobee-client-scanner.js"&gt;&lt;/script&gt;</pre>
+        <br>This points to the <code>v0.10.86</code> release. Update the version tag as needed for newer releases.
+      </li>
+      <li>
+        <strong>Run the scan</strong> — call <code>window.oobee.scan()</code> in your own script,
+        e.g. on a button click or on page load:
+        <pre>&lt;script&gt;
+  window.oobee.scan({
+    userInfo: { email: 'you@example.com', name: 'Your Name' },
+    // disableOobee:   false,  // true → skip oobee custom checks
+    // enableWcagAaa:  true,  // true → also run WCAG AAA rules
+    // elementsToScan: [],     // [] = full page; or pass CSS selectors / DOM nodes
+  }).then(function(results) {
+    console.log(JSON.stringify(results, null, 2));
+  });
+&lt;/script&gt;</pre>
+      </li>
+      <li>
+        <strong>Navigate to a flagged element</strong> — call
+        <code>window.oobee.scrollToElement(item.xpath)</code> with any
+        <code>item.xpath</code> value from the scan results to scroll and highlight it.
+      </li>
+    </ol>
+  </div>
+  <button id="scanBtn" class="scan-btn">Check Accessibility</button>
+  <!-- ── Status display ───────────────────────────────────────────────────── -->
+  <div id="status" style="display:none" class="status"></div>
+  <!-- ── Results (populated by JS) ───────────────────────────────────────── -->
+  <div id="summary" style="display:none">
+    <!-- Summary counts -->
+    <h2>Scan Summary</h2>
+    <table class="summary-table">
+      <thead>
+        <tr>
+          <th>Category</th>
+          <th>Total Occurrences</th>
+          <th>Unique Rules</th>
+        </tr>
+      </thead>
+      <tbody id="summaryBody"></tbody>
+    </table>
+    <!-- Issues table -->
+    <h2>Issues Found</h2>
+    <div class="table-scroll">
+      <table class="issues-table">
+        <thead>
+          <tr>
+            <th>Category</th>
+            <th>Rule ID</th>
+            <th>Occurrences</th>
+            <th>Elements</th>
+            <th>Conformance</th>
+            <th>Short Description</th>
+            <th>Long Description</th>
+            <th>Step-by-Step Guide</th>
+          </tr>
+        </thead>
+        <tbody id="issuesBody"></tbody>
+      </table>
+    </div>
+    <!-- Raw JSON: full scan results -->
+    <h2>Raw JSON — Full Scan Results</h2>
+    <p style="font-size:0.875rem; color:#6c757d;">
+      Complete output of <code>window.oobee.scan()</code>, including every occurrence per rule.
+      Use this to build your own UI on top of the scanner.
+    </p>
+    <pre id="jsonFullOutput"></pre>
+    <!-- Raw JSON: description maps only -->
+    <h2>Raw JSON — Description Maps</h2>
+    <p style="font-size:0.875rem; color:#6c757d;">
+      Flat maps of <code>shortDescription</code>, <code>longDescription</code>, and
+      <code>stepByStepGuide</code> keyed by rule ID — only rules found in this scan are included.
+    </p>
+    <pre id="jsonDescOutput"></pre>
+  </div>
+  <!-- ── Intentional violations ───────────────────────────────────────────── -->
+  <div class="violation-area">
+    <h3>Intentional Accessibility Violations</h3>
+    <p>The elements below contain violations for the scanner to catch.</p>
+    <!-- 1. img with no alt → "image-alt" mustFix -->
+    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="50" height="50">
+    <!-- 2. img with confusing alt → "oobee-confusing-alt-text" -->
+    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="image" width="50" height="50">
+    <!-- 3. button with no accessible label → "button-name" mustFix -->
+    <button style="margin: 4px"><!-- empty --></button>
+    <!-- 4. input with no label → "label" mustFix -->
+    <input type="text" placeholder="Enter value" style="margin: 4px">
+    <!-- 5. link with non-descriptive text → may surface as incomplete/needsReview -->
+    <a href="#">click here</a>
+    <!-- 6. Low contrast text → "color-contrast" -->
+    <p style="color:#ccc; background:#fff; font-size:12px">This text has low contrast.</p>
+  </div>
+  <!-- ── oobee-client-scanner.js ──────────────────────────────────────────── -->
+  <script src="oobee-client-scanner.js"></script>
+  <!-- ── Run the scan ─────────────────────────────────────────────────────── -->
+  <script>
+    document.getElementById('scanBtn').addEventListener('click', async function () {
+      const btn      = document.getElementById('scanBtn');
+      const statusEl = document.getElementById('status');
+      // Reset previous results
+      document.getElementById('summary').style.display = 'none';
+      document.getElementById('summaryBody').innerHTML = '';
+      document.getElementById('issuesBody').innerHTML  = '';
+      document.getElementById('jsonFullOutput').textContent = '';
+      document.getElementById('jsonDescOutput').textContent = '';
+      btn.disabled      = true;
+      btn.textContent   = 'Scanning…';
+      statusEl.className   = 'status running';
+      statusEl.textContent = 'Scan running…';
+      statusEl.style.display = 'block';
+      try {
+        if (!window.oobee) {
+          throw new Error(
+            'window.oobee is not defined — make sure oobee-client-scanner.js loaded correctly.'
+          );
+        }
+        // ── Run the scan ──────────────────────────────────────────────────
+        const results = await window.oobee.scan({
+          disableOobee:   false,  // set true to skip oobee custom checks
+          enableWcagAaa:  true,   // set true to also include WCAG AAA rules
+          elementsToScan: [],     // empty = scan the entire page
+          userInfo: {
+            email: 'accessibility@tech.gov.sg',
+            name:  'A11y Team',
+          },
+        });
+        // ── Log full JSON to console ──────────────────────────────────────
+        console.log('[oobee-client-scanner] Scan complete. Full results:');
+        console.log(JSON.stringify(results, null, 2));
+        // ── Update status ─────────────────────────────────────────────────
+        statusEl.className = 'status done';
+        statusEl.textContent = 'Scan complete. Summary and raw JSON output below.';
+        // ── Categories to render ──────────────────────────────────────────
+        const categories = [
+          { key: 'mustFix',     label: 'Must Fix'    },
+          { key: 'goodToFix',   label: 'Good to Fix' },
+          { key: 'needsReview', label: 'Needs Review' },
+        ];
+        // ── Summary table ─────────────────────────────────────────────────
+        const summaryBody = document.getElementById('summaryBody');
+        categories.forEach(function ({ key, label }) {
+          const cat = results[key];
+          if (!cat) return;
+          const tr = document.createElement('tr');
+          tr.innerHTML =
+            '<td><span class="badge ' + key + '">' + label + '</span></td>' +
+            '<td>' + cat.totalItems + '</td>' +
+            '<td>' + Object.keys(cat.rules).length + '</td>';
+          summaryBody.appendChild(tr);
+        });
+        // ── Issues table ──────────────────────────────────────────────────
+        const issuesBody = document.getElementById('issuesBody');
+        categories.forEach(function ({ key, label }) {
+          const cat = results[key];
+          if (!cat || !cat.totalItems) return;
+          Object.entries(cat.rules).forEach(function ([ruleId, rule]) {
+            const tr = document.createElement('tr');
+            // Category
+            const tdCat = document.createElement('td');
+            tdCat.innerHTML = '<span class="badge ' + key + '">' + label + '</span>';
+            // Rule ID
+            const tdRule = document.createElement('td');
+            tdRule.innerHTML = '<span class="rule-id">' + escapeHtml(ruleId) + '</span>';
+            // Occurrences
+            const tdOcc = document.createElement('td');
+            tdOcc.innerHTML = '<span class="occ-pill">' + rule.totalItems + '</span>';
+            // Elements — one "Go to element" link + message per item with a non-empty xpath
+            const tdEl = document.createElement('td');
+            if (rule.items && rule.items.length) {
+              rule.items.forEach(function (item, idx) {
+                if (!item.xpath) return;
+                const a = document.createElement('a');
+                a.href        = '#';
+                a.className   = 'goto-link';
+                a.textContent = '↗ Element ' + (idx + 1);
+                a.title       = item.xpath;
+                a.addEventListener('click', function (e) {
+                  e.preventDefault();
+                  window.oobee.scrollToElement(item.xpath);
+                });
+                tdEl.appendChild(a);
+                if (item.message) {
+                  const lines = item.message.split('\n').map(function(l) { return l.trim(); }).filter(Boolean);
+                  const wrap = document.createElement('span');
+                  wrap.className = 'item-message';
+                  if (lines.length <= 1) {
+                    wrap.textContent = item.message;
+                  } else {
+                    // First line is the header (e.g. "Fix any of the following:")
+                    const header = document.createElement('span');
+                    header.textContent = lines[0];
+                    wrap.appendChild(header);
+                    const ul = document.createElement('ul');
+                    ul.style.cssText = 'margin:2px 0 0 1rem; padding:0;';
+                    lines.slice(1).forEach(function(line) {
+                      const li = document.createElement('li');
+                      li.textContent = line;
+                      ul.appendChild(li);
+                    });
+                    wrap.appendChild(ul);
+                  }
+                  tdEl.appendChild(wrap);
+                } else {
+                  tdEl.appendChild(document.createElement('br'));
+                }
+              });
+            }
+            if (!tdEl.hasChildNodes()) tdEl.textContent = '—';
+            // Conformance tags — formatted via window.oobee.formatConformance
+            const tdConf = document.createElement('td');
+            if (rule.conformance && rule.conformance.length) {
+              const fmt = window.oobee.formatConformance(rule.conformance);
+              const parts = fmt.criteria.slice();
+              if (fmt.level) parts.push('Level ' + fmt.level);
+              tdConf.innerHTML = parts.length
+                ? parts.map(function (c) { return '<span class="conf-tag">' + escapeHtml(c) + '</span>'; }).join(' ')
+                : '—';
+            } else {
+              tdConf.textContent = '—';
+            }
+            // Short description
+            const tdShort = document.createElement('td');
+            tdShort.textContent = rule.shortDescription || rule.description || '—';
+            // Long description — collapsible
+            const tdLong = document.createElement('td');
+            if (rule.longDescription) {
+              tdLong.innerHTML =
+                '<details><summary>Show</summary><p>' +
+                escapeHtml(rule.longDescription) +
+                '</p></details>';
+            } else {
+              tdLong.textContent = '—';
+            }
+            // Step-by-step guide
+            const tdSteps = document.createElement('td');
+            const guide = rule.stepByStepGuide;
+            if (guide) {
+              const steps = [
+                { n: '1', label: 'Check',  text: guide.check  },
+                { n: '2', label: 'Fix',    text: guide.fix    },
+                { n: '3', label: 'Review', text: guide.review },
+                { n: '4', label: 'Learn',  text: guide.learn  },
+              ];
+              tdSteps.innerHTML =
+                '<ul class="steps">' +
+                steps.map(function (s) {
+                  return '<li>' +
+                    '<span class="step-label">' + s.n + '. ' + s.label + ':</span> ' +
+                    escapeHtml(s.text || '—') +
+                    '</li>';
+                }).join('') +
+                '</ul>';
+            } else {
+              tdSteps.textContent = '—';
+            }
+            tr.append(tdCat, tdRule, tdOcc, tdEl, tdConf, tdShort, tdLong, tdSteps);
+            issuesBody.appendChild(tr);
+          });
+        });
+        // ── Raw JSON: description maps for found rules only ────────────────
+        const shortDescMap    = {};
+        const longDescMap     = {};
+        const stepByStepMap   = {};
+        categories.forEach(function ({ key }) {
+          const cat = results[key];
+          if (!cat || !cat.rules) return;
+          Object.entries(cat.rules).forEach(function ([ruleId, rule]) {
+            if (rule.shortDescription  !== undefined) shortDescMap[ruleId]  = rule.shortDescription;
+            if (rule.longDescription   !== undefined) longDescMap[ruleId]   = rule.longDescription;
+            if (rule.stepByStepGuide   !== undefined) stepByStepMap[ruleId] = rule.stepByStepGuide;
+          });
+        });
+        // ── Full scan results JSON ────────────────────────────────────────
+        document.getElementById('jsonFullOutput').textContent =
+          JSON.stringify(results, null, 2);
+        // ── Description maps JSON (found rules only) ──────────────────────
+        document.getElementById('jsonDescOutput').textContent = JSON.stringify(
+          { shortDescriptionMap: shortDescMap, longDescriptionMap: longDescMap, stepByStepGuideMap: stepByStepMap },
+          null, 2
+        );
+        document.getElementById('summary').style.display = 'block';
+      } catch (err) {
+        statusEl.className   = 'status error';
+        statusEl.textContent = 'Scan error: ' + (err && err.message ? err.message : String(err));
+        statusEl.style.display = 'block';
+        console.error('[oobee-client-scanner] Error:', err);
+      } finally {
+        btn.disabled    = false;
+        btn.textContent = 'Check Accessibility';
+      }
+    });
+    // ── Helper ──────────────────────────────────────────────────────────────
+    function escapeHtml(str) {
+      return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    }
+  </script>
+</body>
+</html>