<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="./styles/all.min.css" />
    <link rel="stylesheet" type="text/css" href="./styles/layouts.css" />
    <link
      rel="stylesheet"
      type="text/css"
      media="print"
      href="./styles/print.css"
    />
    <title>Imperva - Security Test Report</title>
  </head>

  <body onload="onDOMLoad()">
    <!-- NEW SLIDE -->
    <!-- TITLE -->
    <!-- <div class="slide intro-slide">
      <img class="branding" src="./assets/images/logo.png" />

      <div class="intro-title">
        <h1>Security Test Report</h1>
        <h3>API spec assessment for risks and compliance</h3>
        <div class="intro-divider"></div>
        <h6>20 June 2021</h6>
      </div>
    </div> -->
    <div class="slide intro-slide">
      <img class="branding" src="./assets/images/logo.png" />

      <div class="intro-title">
        <h1>Security Test Report</h1>
        <h3>API spec assessment for risks and compliance</h3>
        <div class="intro-divider"></div>
        <h6>22 Jan 2022</h6>

        <div class="row">
          <div class="col-6">
            <p class="customer">Prepared for: Name of the company</p>
            <p>Prepared by: ImpACT</p>
          </div>
          <div class="col-6">
            <p>Uploaded file name: {{ spec_filename }}</p>
            <p class="date">Creation Time: Jan 22, 2022, 14:56</p>
          </div>
        </div>

      </div>

      <div class="intro-footer">
        <p>
          View Report
          <i class="fa-solid fa-angles-down"></i>
        </p>
      </div>
    </div>


    <!-- NEW SLIDE -->
    <!-- TABLE OF CONTENTS -->
    <div class="slide table-slide">
      <div class="title">
        <div class="block"></div>
        <h1>Table of Contents</h1>
      </div>

      <a class="table-link" href="#fuzz-tests-summary">Fuzz Tests Summary</a>
      <!-- <a class="table-link" href="#owasp-api-top-10">OWASP API Top 10</a> -->
      <a class="table-link" href="#overall-fuzz-test-issues"
        >Overall Test Issues</a
      >
      <a class="table-link" href="#ob-summary">File Summary</a>
      <a class="table-link" href="#faq">FAQ</a>
    </div>

    <!-- NEW SLIDE -->
    <!-- FUZZ TESTS SUMMARY -->
    <div id="fuzz-tests-summary" class="slide content-slide fuzz-tests-summary">

      <div class="slide-content">
        <h1>Summary of Generated Tests</h1>
        <h3>Information about data found inside the zip file</h3>

        <div class="statistics">
          <p class="widget-title">
            What did we find inside the uploaded zip file?
          </p>
          <div class="row">
            <div class="col">
              <div class="statistic-col">
                <div>
                  <p class="stat-label">APISpec Files</p>
                  <p class="stat-metric">{{ num_spec_files }}</p>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="statistic-col">
                <div>
                  <p class="stat-label">APIs</p>
                  <p class="stat-metric">{{ num_total_apis }}</p>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="statistic-col">
                <div>
                  <p class="stat-label">Impacted APIs</p>
                  <p class="stat-metric">{{ total_vul_apis }}</p>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="statistic-col">
                <div>
                  <p class="stat-label">Destination Hosts</p>
                  <p class="stat-metric">{{ num_dst_hosts }}</p>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="statistic-col">
                <div>
                  <p class="stat-label">Attack Categories</p>
                  <p class="stat-metric">{{ num_attack_categ }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="issues-distribution">
          <div class="row">
            <div class="col-6">
              <div class="distribution-col">
                <div class="distribution-stat-container">
                  <p class="stat-label">Total Attack Vectors Generated</p>
                  <p class="stat-metric">{{ total_attack_vectors }}</p>
                </div>
                <div class="distribution-comparison-container">
                  <p class="stat-label">Attack Vectors distribution by severity</p>

                  <div class="distribution-by-severity">
                    <div
                      class="critical-severity-row d-flex align-items-center justify-content-between"
                    >
                      <p class="severity-tag critical-shade">Critical</p>
                      <div class="progress-container flex-fill">
                        <div class="progress">
                          <div
                            class="progress-bar critical-bg"
                            role="progressbar"
                            style="width: {{ (total_critical_av_count + total_high_av_count) / total_attack_vectors * 100 }}%"
                            aria-valuenow="75"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          ></div>
                        </div>
                      </div>
                      <p class="severity-value">{{ total_critical_av_count + total_high_av_count }}</p>
                    </div>
                    <div
                      class="major-severity-row d-flex align-items-center justify-content-between"
                    >
                      <p class="severity-tag major-shade">Major</p>
                      <div class="progress-container flex-fill">
                        <div class="progress">
                          <div
                            class="progress-bar major-bg"
                            role="progressbar"
                            style="width: {{ total_medium_av_count / total_attack_vectors * 100 }}%"
                            aria-valuenow="25"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          ></div>
                        </div>
                      </div>
                      <p class="severity-value">{{ total_medium_av_count }}</p>
                    </div>
                    <div
                      class="minor-severity-row d-flex align-items-center justify-content-between"
                    >
                      <p class="severity-tag minor-shade">Minor</p>
                      <div class="progress-container flex-fill">
                        <div class="progress">
                          <div
                            class="progress-bar minor-bg"
                            role="progressbar"
                            style="width: {{ total_low_av_count / total_attack_vectors * 100 }}%"
                            aria-valuenow="12"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          ></div>
                        </div>
                      </div>
                      <p class="severity-value">{{ total_low_av_count }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="distribution-col">
                <div class="distribution-stat-container">
                  <p class="stat-label">Failed Tests by Severity</p>
                  <p class="stat-metric">{{ failed_count }}</p>
                </div>
                <div class="distribution-comparison-container">
                  <p class="stat-label">Issues distribution by severity</p>

                  <div class="distribution-by-severity">
                    <div
                      class="critical-severity-row d-flex align-items-center justify-content-between"
                    >
                      <p class="severity-tag critical-shade">Critical</p>
                      <div class="progress-container flex-fill">
                        <div class="progress">
                          <div
                            class="progress-bar critical-bg"
                            role="progressbar"
                            style="width: {{ ((failed_critical_count + failed_high_count) / failed_count * 100) if failed_count else 0 }}%"
                            aria-valuenow="100"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          ></div>
                        </div>
                      </div>
                      <p class="severity-value">{{ failed_critical_count + failed_high_count }}</p>
                    </div>
                    <div
                      class="major-severity-row d-flex align-items-center justify-content-between"
                    >
                      <p class="severity-tag major-shade">Major</p>
                      <div class="progress-container flex-fill">
                        <div class="progress">
                          <div
                            class="progress-bar major-bg"
                            role="progressbar"
                            style="width: {{ (failed_medium_count / failed_count * 100) if failed_count else 0 }}%"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          ></div>
                        </div>
                      </div>
                      <p class="severity-value">{{ failed_medium_count }}</p>
                    </div>
                    <div
                      class="minor-severity-row d-flex align-items-center justify-content-between"
                    >
                      <p class="severity-tag minor-shade">Minor</p>
                      <div class="progress-container flex-fill">
                        <div class="progress">
                          <div
                            class="progress-bar minor-bg"
                            role="progressbar"
                            style="width: {{ (failed_low_count / failed_count * 100) if failed_count else 0 }}%"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          ></div>
                        </div>
                      </div>
                      <p class="severity-value">{{ failed_low_count }}</p>
                    </div>
                  </div>

                  <!-- FREQUENTLY OCCURING VIOLATIONS -->
                  <p class="stat-label">Most frequently occuring violation</p>

                  <div class="frequent-violations">
                    <div class="violation d-flex justify-content-between">
                      <div>
                        <p>{{ frequent_attack.get('attack') }} - across {{ frequent_attack.get('num_of_apis') }} API</p>
                        <p class="violation-metric">{{ frequent_attack.get('failed_test') }} failed test</p>
                      </div>
                      <div class="violation-donut-container">
                        <canvas
                          id="violationMetric1"
                          width="75"
                          height="75"
                        ></canvas>
                        <p class="violation-donut-percentage">20%</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- NEW SLIDE -->
    <!-- OWASP API TOP 10 -->
    <!-- <div id="owasp-api-top-10" class="slide content-slide owasp-api-top-10">

      <div class="slide-content">
        <h1>OWASP API Top 10</h1>
        <h3>Information about data found inside the zip file</h3>

        <div class="statistics content-tile">
          <div class="d-flex">
            <div class="test-success-stat-group">
              <p class="stat-label">Total Tests</p>
              <p class="stat-metric">100</p>
            </div>
            <div class="test-success-stat-group">
              <p class="stat-label">Failed Tests</p>
              <p class="stat-metric">50</p>
            </div>
            <div
              class="content-tile test-severity-stat-group critical-stat-group"
            >
              <p class="value">5</p>
              <div class="severity-indicator d-flex align-items-center">
                <span class="critical-bg"></span>
                <span class="critical-bg"></span>
                <span class="critical-bg"></span>
              </div>
              <p class="label">Critical</p>
            </div>
            <div class="content-tile test-severity-stat-group major-stat-group">
              <p class="value">19</p>
              <div class="severity-indicator d-flex align-items-center">
                <span class="major-bg"></span>
                <span class="major-bg"></span>
                <span></span>
              </div>
              <p class="label">Major</p>
            </div>
            <div class="content-tile test-severity-stat-group minor-stat-group">
              <p class="value">6</p>
              <div class="severity-indicator d-flex align-items-center">
                <span class="minor-bg"></span>
                <span></span>
                <span></span>
              </div>
              <p class="label">Minor</p>
            </div>
          </div>

          <p class="footnote">
            Want to know more about the severities? check our FAQ
          </p>
        </div>

        <div class="content-tile owasp-api-top-10-tile">
          <p class="tile-title">OWASP API Top 10</p>

          <table class="table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Policy Violations</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <p class="severity-tag">A1</p>
                </td>
                <td>1.3K</td>
              </tr>
              <tr>
                <td>
                  <p class="severity-tag">A2</p>
                </td>
                <td>1.3K</td>
              </tr>
              <tr>
                <td>
                  <p class="severity-tag">A3</p>
                </td>
                <td>1.3K</td>
              </tr>
              <tr>
                <td>
                  <p class="severity-tag">A4</p>
                </td>
                <td>1.3K</td>
              </tr>
              <tr>
                <td>
                  <p class="severity-tag">A5</p>
                </td>
                <td>1.3K</td>
              </tr>
              <tr>
                <td>
                  <p class="severity-tag">A6</p>
                </td>
                <td>1.3K</td>
              </tr>
              <tr>
                <td>
                  <p class="severity-tag">A7</p>
                </td>
                <td>1.3K</td>
              </tr>
              <tr>
                <td>
                  <p class="severity-tag">A8</p>
                </td>
                <td>1.3K</td>
              </tr>
              <tr>
                <td>
                  <p class="severity-tag">A9</p>
                </td>
                <td>1.3K</td>
              </tr>
              <tr>
                <td>
                  <p class="severity-tag">A10</p>
                </td>
                <td>1.3K</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div> -->

    <!-- NEW SLIDE -->
    <!-- OVERALL FUZZ TEST ISSUES -->
    <div
      id="overall-fuzz-test-issues"
      class="slide content-slide overall-fuzz-test-issues"
    >

      <div class="slide-content">
        <h1>Overall Fuzz Test Issues</h1>
        <h3>Information about design issues found in the uploaded file</h3>

        <div class="row">
          <div class="col-5">
            <p class="widget-title">What are the issue categories?</p>

            <div class="table-container">
              <p class="table-label">API Security Test Summary</p>

              <table class="table test-summary-table">
                <thead>
                  <tr>
                    <th scope="col">File Name</th>
                    <th scope="col">APIs</th>
                    <th scope="col">APIs Impacted</th>
                  </tr>
                </thead>
                <tbody>
                  {% for spec, spec_info in spec_details.items() %}
                  <tr>
                    <td>{{ spec }}</td>
                    <td>{{ spec_info.get('all_apis_count', 0) }}</td>
                    <td>{{ spec_info.get('failed_apis_count', 0) }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>

          <div class="col-7">
            <p class="widget-title">What are the issue categories?</p>

            <div class="table-container d-flex flex-column">
              <p class="table-label">API Severity Per Attack Category</p>

              <table class="table">
                <thead>
                  <tr>
                    <th scope="col">Attack Category</th>
                    <th scope="col">APIs Impacted</th>
                    <th scope="col">Highest Severity</th>
                  </tr>
                </thead>
                <tbody>
                  {% for category, info in attack_category.items() %}
                  <tr>
                    <td>{{ category }}</td>
                    <td>{{ info.get('all_apis_count', 0) }}</td>
                    <td>
                      {% if info.get('priority', '') == 'Critical' or info.get('priority', '') == 'High' %}
                      <p class="severity-tag critical-shade">{{ info.get('pri_count', 0) }} Critical</p>
                      {% elif info.get('priority', '') == 'Medium' %}
                      <p class="severity-tag major-shade">{{ info.get('pri_count', 0) }} Major</p>
                      {% elif info.get('priority', '') == 'Low' %}
                      <p class="severity-tag minor-shade">{{ info.get('pri_count', 0) }} Minor</p>
                      {% endif %}
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>

              <div class="d-flex mt-auto">
                <div class="legend-container d-flex align-items-center">
                  <div class="legend-square critical-bg"></div>
                  <p>Critical</p>
                </div>
                <div class="legend-container d-flex align-items-center">
                  <div class="legend-square major-bg"></div>
                  <p>Major</p>
                </div>
                <div class="legend-container d-flex align-items-center">
                  <div class="legend-square minor-bg"></div>
                  <p>Minor</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- NEW SLIDE -->
    <!-- OB SUMMARY -->
    {% for spec, info in spec_details.items() %}
    <div id="ob-summary" class="slide content-slide ob-summary">

      <div class="slide-content">
        <h1>{{ spec }} summary</h1>
        <h3>Information about design issues found in the uploaded file</h3>

        <div class="test-statistics">
          <p class="widget-title">
            What did we find inside the uploaded zip file?
          </p>
          <div class="row">
            <div class="col-3">
              <div class="statistic-col">
                <div class="icon-container">
                  <i class="fa-solid fa-file"></i>
                </div>
                <div>
                  <p class="stat-label">Spec Files</p>
                  <p class="stat-metric">1</p>
                </div>
              </div>
            </div>
            <div class="col-3">
              <div class="statistic-col">
                <div class="icon-container">
                  <i class="fa-solid fa-file-code"></i>
                </div>
                <div>
                  <p class="stat-label">APIs</p>
                  <p class="stat-metric">{{ info.get('all_apis_count', 0) }}</p>
                </div>
              </div>
            </div>
            <div class="col-3">
              <div class="statistic-col">
                <div class="icon-container">
                  <i class="fa-solid fa-file-code"></i>
                </div>
                <div>
                  <p class="stat-label">Endpoints</p>
                  <p class="stat-metric">1</p>
                </div>
              </div>
            </div>
            <div class="col-3">
              <div class="statistic-col">
                <div class="icon-container">
                  <i class="fa-solid fa-folder-tree"></i>
                </div>
                <div>
                  <p class="stat-label">Total Tests</p>
                  <p class="stat-metric">{{ info.get('total_tests_count', 0) }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="severity-statistics content-tile">
          <div class="d-flex">
            <div class="test-success-stat-group">
              <p class="stat-label">Failed Tests</p>
              <p class="stat-metric">{{ info.get('total_failed_count', 0) }}</p>
            </div>
            <div
              class="content-tile test-severity-stat-group critical-stat-group"
            >
              <p class="value">{{ info.get('priority_count', {}).get('p1_count', 0) + info.get('priority_count', {}).get('p2_count', 0) }}</p>
              <div class="severity-indicator d-flex align-items-center">
                <span class="critical-bg"></span>
                <span class="critical-bg"></span>
                <span class="critical-bg"></span>
              </div>
              <p class="label">Critical</p>
            </div>
            <div class="content-tile test-severity-stat-group major-stat-group">
              <p class="value">{{ info.get('priority_count', {}).get('p3_count', 0) }}</p>
              <div class="severity-indicator d-flex align-items-center">
                <span class="major-bg"></span>
                <span class="major-bg"></span>
                <span></span>
              </div>
              <p class="label">Major</p>
            </div>
            <div class="content-tile test-severity-stat-group minor-stat-group">
              <p class="value">{{ info.get('priority_count', {}).get('p4_count', 0) }}</p>
              <div class="severity-indicator d-flex align-items-center">
                <span class="minor-bg"></span>
                <span></span>
                <span></span>
              </div>
              <p class="label">Minor</p>
            </div>
          </div>

          <p class="footnote">
            Want to know more about the severities? check our FAQ
          </p>
        </div>

        <div class="content-tile">
          <p class="tile-title">APIs with failed tests</p>

          <table class="table apis-with-failed-tests-table">
            <thead>
              <tr>
                <th scope="col">API</th>
                <th scope="col">Attack Category</th>
                <th scope="col">Issue Severity</th>
                <th scope="col">Failed Test</th>
                <th scope="col">Test Request/Response</th>
              </tr>
            </thead>
            <tbody>
              {% for api, api_info in info.get('api_details', {}).items() %}
              {% for each_record in api_info %}
              <tr>
                <td>
                  <div>
                    <p>{{ api }}</p>
                    <div class="affected-classification-container">
                      <p>Affected Classification</p>

                      <div class="tags-list d-flex flex-wrap">
                        {% for category in each_record.get('classification', '-').split() %}
                        <p class="severity-tag">{{ category.strip() }}</p>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                </td>
                <td>{{ each_record.get('attack', '-') }}</td>
                {% if each_record.get('pri', '-') == 1 or each_record.get('pri', '-') == 2 %}
                <td><p class="severity-tag critical-shade">Critical</p></td>
                {% elif each_record.get('pri', '-') == 3 %}
                <td><p class="severity-tag major-shade">Major</p></td>
                {% elif each_record.get('pri', '-') == 4 %}
                <td><p class="severity-tag minor-shade">Minor</p></td>
                {% else %}
                <td><p class="severity-tag minor-shade">-</p></td>
                {% endif %}
                <td>
                  <p>{{ each_record.get('count', '-') }}</p>
                </td>
                <td>{{ each_record.get('testinput', '-') }}</td>
              </tr>
              {% endfor %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    {% endfor %}

    <!-- NEW SLIDE -->
    <!-- FAQ -->
    <div id="faq" class="slide content-slide faq">

      <div class="slide-content">
        <h1>FAQ</h1>
        <h3>
          Here you can get answeres on the most frequesntly asked questions
        </h3>

        <div class="content-tile questions">
          <p class="widget-title">What every severity means?</p>

          <div class="d-flex">
            <div class="severity-indicator d-flex align-items-center">
              <span class="critical-bg"></span>
              <span class="critical-bg"></span>
              <span class="critical-bg"></span>
            </div>

            <p>Critical</p>
          </div>

          <p class="severity-description">
            When an API is called with parameter value set to patterns that were associated with attacks that can cause critical/high severity damage, the API returns 200 with OK data. It appears that the application not only processes the fuzz parameter, but also is at risk of leaking data.
          </p>

          <div class="d-flex">
            <div class="severity-indicator d-flex align-items-center">
              <span class="major-bg"></span>
              <span class="major-bg"></span>
              <span></span>
            </div>

            <p>Major</p>
          </div>

          <p class="severity-description">
            When an API is called with parameter value set to patterns that were associated with known attacks that can cause critical/high severity damages, the API returns 200 OK with no data. Though it does not appear that the app is at risk of leaking data, the app might have processed the fuzzed input, which can cause subsequent security issues.
          </p>

          <div class="d-flex">
            <div class="severity-indicator d-flex align-items-center">
              <span class="minor-bg"></span>
              <span></span>
              <span></span>
            </div>

            <p>Minor</p>
          </div>

          <p class="severity-description">
            When an API is called with parameter value set to patterns that were associated with known attacks that can cause medium/low severity damages, the API returns 200 OK with no data. Though it does not appear that the app is at risk of leaking data, the app might have processed the fuzzed input, which can cause subsequent security issues.
          </p>
        </div>

        <!-- <div class="content-tile feedback">
          <div class="d-flex align-items-center justify-content-between">
            <p>
              <i class="fa-solid fa-bullhorn"></i>
              Have ideas on how we can make this report better?
            </p>

            <a href="https://www.surveymonkey.com/r/NHJQ2HY"
              >Give us feedback <i class="fa-solid fa-arrow-right"></i
            ></a>
          </div>
        </div> -->
      </div>

      <div class="slide-footer d-flex justify-content-between align-items-center mb-3">
        <div class="d-flex align-items-center">
          <img class="branding" src="./assets/images/footer-logo.png" />
          <p class="copyrights">@ Imperva Ltd. All rights reserved</p>
          <p class="report-name">Imperva API Report</p>
        </div>
        <div class="d-flex align-items-center">
          <p class="date">Creation date: Jun 21, 2021, 16:23</p>
          <p class="separator">|</p>
          <p class="customer">For: Name of the Customer</p>
        </div>
      </div>
    </div>

    <script
      language="javascript"
      type="text/javascript"
      src="./assets/scripts/bootstrap.min.js"
    ></script>
    <script
      language="javascript"
      type="text/javascript"
      src="./assets/scripts/chart.min.js"
    ></script>
    <script
      language="javascript"
      type="text/javascript">
        const onDOMLoad = () => {

          // Update the customer name in the footer
          updateCustomerName("{{ customer_name }}");

          updateCreationDate("{{ created_time }}");

          updateReportNameInFooter("Imperva API Report")

          // Update circular progress bar charts under
          // Frequently occuring violations
          renderCircularProgressBar(
            "violationMetric1",
            {{ '%0.2f' % ((frequent_attack.get('failed_test', 0) / failed_count * 100) if failed_count else 0) | float }});
        };

        /**
        * Function to render circular progress bar for
        * Most Frequently Occuring Violations
        */
        const renderCircularProgressBar = (chartId, value) => {
        const data = {
          labels: ["Test"],
          datasets: [
            {
              label: "My First Dataset",
              data: [value, 100 - value],
              backgroundColor: ["#285AE6", "#ACB9C5"],
              borderWidth: 0,
              hoverOffset: 4,
            },
          ],
        };

        const config = {
          type: "doughnut",
          data: data,
          options: {
            hover: { mode: null },
            cutout: "75%",
            plugins: {
              legend: false,
              tooltip: {
                enabled: false,
              },
            },
          },
        };

        const myChart = new Chart(
          document.getElementById(chartId),
          config
        );

        const percentageTextElement = document.querySelector(`#${chartId} + .violation-donut-percentage`);

        percentageTextElement.textContent = value + "%";
        };

        /**
        * Function to update report name in the footer section
        */
        const updateReportNameInFooter = (reportName) => {
        const elementsList = document.querySelectorAll(".report-name");

        elementsList.forEach(element => {
          element.textContent = reportName;
        });
        }

        /**
        * Function to update customer name in the footer section
        */
        const updateCustomerName = (name) => {
        const elementsList = document.querySelectorAll(".customer");

        elementsList.forEach(element => {
          element.textContent = `For: ${name}`;
        });
        }

        /**
        * Function to update the creation date in the footer section
        */
        const updateCreationDate = (dateString) => {
        const elementsList = document.querySelectorAll(".date");

        elementsList.forEach(element => {
          element.textContent = `Creation date: ${dateString}`;
        });
        }
    </script>
  </body>
</html>
