-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprogress-bar-v0.html
129 lines (121 loc) · 6.26 KB
/
progress-bar-v0.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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-v0.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>
<span id="upload-status-screen-reader">
<label for="upload-records-progress-bar" class="govuk-label progress-label">
Uploading records <span id="upload-percentage" role="status" aria-live="polite"></span>
</label>
</span>
<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>