progress-bar-v1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>@title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="css/main.css">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico">
<!--  <script @{CSPNonce.attr} src="@routes.Assets.versioned("javascripts/all.js")" type="text/javascript"></script>-->
  <script src="js/main-progress-bar-v1.js" type="text/javascript"></script>

</head>
<body class="govuk-template__body">
<header class="govuk-header " role="banner" data-module="header">
  <div class="govuk-header__container govuk-width-container tna-header">

    <div class="govuk-header__tna-logo">
      <a href="/" class="govuk-header__tna_link govuk-header__tna_link--homepage">
        <img src="img/tna-horizontal-white-logo.svg" class="govuk-header__tna-logo-image" alt="TNA horizontal logo" />
      </a>
    </div>

    <div class="govuk-header__tna-content">
      <a href="/" class="govuk-header__link govuk-header__link--service-name">
        Transfer Digital Records
      </a>
    </div>
    <ul class="govuk-header__navigation govuk-header__navigation--end">
      <li class="govuk-header__navigation-item">
        <a href="/sign-out" class="govuk-header__link">
          Sign out
        </a>
      </li>
    </ul>
  </div>
</header>

<div class="govuk-width-container">

  <div class="govuk-phase-banner">
    <p class="govuk-phase-banner__content">
      <strong class="govuk-tag govuk-phase-banner__content__tag">BETA</strong>
      <span class="govuk-phase-banner__text">This is a new service – your feedback will help us to improve it. Please
                <a class="govuk-link" target="_blank" rel="noreferrer noopener" href="/contact">get in touch (opens in new tab).</a>
                </span>
    </p>
  </div>

  <main class="govuk-main-wrapper " id="main-content" role="main">
    <div id="upload-progress" class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds" role="status" aria-live="assertive">
        <span class="govuk-caption-l">Step 3 of 5</span>
        <h1 class="govuk-heading-l">Uploading records</h1>
        <div>
          <button id="start-upload-button" class="govuk-button" type="submit" data-module="govuk-button" role="button">
            Start upload
          </button>
        </div>
        <div id="upload-progress-error" hidden>
          <div class="govuk-error-summary upload-error" aria-labelledby="error-summary-title"
               role="alert" tabindex="-1" data-module="govuk-error-summary">
            <h2 class="govuk-error-summary__title" id="error-summary-title">
              There is a problem
            </h2>
            <div class="govuk-error-summary__body">
              <p>Some or all of your files failed to upload.</p>
              <p class="upload-progress-error-timeout__message" hidden>Your upload has timed out. Click 'Return to start' to begin a new transfer.</p>
              <p class="upload-progress-error-authentication__message" hidden>You have been signed out. Click 'Return to start' to begin a new transfer.</p>
              <p class="upload-progress-error-general__message" hidden>Click 'Return to start' to begin a new transfer.</p>
            </div>
          </div>
          <a class="govuk-button" href="/" role="button" draggable="false" data-module="govuk-button">
            Return to start
          </a>
        </div>
        <div id="progress-bar-and-message" hidden>
          <p class="govuk-body">Do not close your browser window while your files are being uploaded. This could take a few minutes.</p>
          <div>
            <label for="upload-records-progress-bar" class="govuk-label progress-label">
              Uploading records <span id="upload-percentage" aria-hidden="true"></span><span role="status" aria-live="polite" aria-atomic="false" id="approximate-status"></span>
            </label>
            <progress class="progress-display" value="0" max="100"></progress>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<footer class="govuk-footer " role="contentinfo">
  <div class="govuk-width-container ">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <h2 class="govuk-visually-hidden">Support links</h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="@routes.FaqController.faq()">
              FAQ
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="@routes.ContactController.contact()">
              Contact
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="@routes.CookiesController.cookies()">
              Cookies
            </a>
          </li>
        </ul>

        <svg role="presentation" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
        </svg>
        <span class="govuk-footer__licence-description">
                        All content is available under the
                        <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
                    </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
      </div>
    </div>
  </div>
</footer>
</body>
</html>