@swetrix/captcha 2.0.2 → 2.3.0

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 (46) hide show
  1. package/README.md +72 -5
  2. package/dist/captcha-loader.cjs +333 -0
  3. package/dist/captcha-loader.cjs.map +1 -0
  4. package/dist/captcha-loader.esm.js +327 -0
  5. package/dist/captcha-loader.esm.js.map +1 -0
  6. package/dist/captcha-loader.js +1 -1
  7. package/dist/captcha-loader.js.map +1 -1
  8. package/dist/captcha.js +1 -1
  9. package/dist/captcha.js.map +1 -1
  10. package/dist/esnext/captcha-loader.d.ts +10 -0
  11. package/dist/esnext/captcha-loader.js +315 -0
  12. package/dist/esnext/captcha-loader.js.map +1 -0
  13. package/dist/esnext/captcha.d.ts +10 -0
  14. package/dist/esnext/captcha.js +491 -0
  15. package/dist/esnext/captcha.js.map +1 -0
  16. package/dist/esnext/i18n.d.ts +22 -0
  17. package/dist/esnext/i18n.js +110 -0
  18. package/dist/esnext/i18n.js.map +1 -0
  19. package/dist/esnext/index.d.ts +7 -0
  20. package/dist/esnext/index.js +7 -0
  21. package/dist/esnext/index.js.map +1 -0
  22. package/dist/esnext/logger.d.ts +6 -0
  23. package/dist/esnext/logger.js +8 -0
  24. package/dist/esnext/logger.js.map +1 -0
  25. package/dist/esnext/pow-worker.d.ts +1 -0
  26. package/dist/esnext/pow-worker.js +127 -0
  27. package/dist/esnext/pow-worker.js.map +1 -0
  28. package/dist/pages/dark.html +461 -276
  29. package/dist/pages/light.html +463 -278
  30. package/dist/pages/test.html +26 -27
  31. package/package.json +58 -32
  32. package/.nvmrc +0 -1
  33. package/.prettierrc.js +0 -13
  34. package/dist/assets/logo_blue.png +0 -0
  35. package/dist/assets/logo_white.png +0 -0
  36. package/rollup.config.mjs +0 -83
  37. package/src/assets/logo_blue.png +0 -0
  38. package/src/assets/logo_white.png +0 -0
  39. package/src/captcha-loader.ts +0 -212
  40. package/src/captcha.ts +0 -358
  41. package/src/pages/dark.html +0 -284
  42. package/src/pages/light.html +0 -286
  43. package/src/pages/test.html +0 -33
  44. package/src/pow-worker.ts +0 -178
  45. package/tsconfig.esnext.json +0 -15
  46. package/tsconfig.json +0 -14
package/dist/pages/light.html CHANGED
@@ -1,286 +1,471 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Swetrix Captcha</title>
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
8
+
9
+ <style>
10
+ html {
11
+ font-family:
12
+ "-apple-system", "system-ui", "BlinkMacSystemFont", "Inter", "Cantarell",
13
+ "Helvetica Neue", "Roboto", "Oxygen", "Ubuntu", sans-serif;
14
+ -webkit-font-smoothing: antialiased;
15
+ -moz-osx-font-smoothing: grayscale;
16
+ }
3
17
 
4
- <head>
5
- <meta charset="utf-8">
6
- <title>Swetrix Captcha</title>
7
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
-
9
- <style>
10
- html {
11
- font-family: '-apple-system', 'system-ui', 'BlinkMacSystemFont', 'Inter', 'Cantarell', 'Helvetica Neue', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
12
- -webkit-font-smoothing: antialiased;
13
- -moz-osx-font-smoothing: grayscale;
14
- }
15
-
16
- body {
17
- margin: 0;
18
- padding: 0;
19
- height: auto;
20
- overflow: auto;
21
- }
22
-
23
- #swetrix-captcha {
24
- display: flex;
25
- justify-content: center;
26
- align-items: center;
27
- position: relative;
28
-
29
- /* 300 - 20px (padding) */
30
- width: 280px;
31
-
32
- /* bg-gray-100 */
33
- background-color: #f9fafb;
34
- border: 1px solid #e9e9e9;
35
- height: 64px;
36
- -webkit-user-select: none;
37
- user-select: none;
38
- padding-left: 10px;
39
- padding-right: 10px;
40
-
41
- cursor: pointer;
42
- }
43
-
44
- #swetrix-captcha:hover {
45
- /* bg-gray-200 */
46
- background-color: #f3f4f6;
47
- }
48
-
49
- #challenge {
50
- display: flex;
51
- align-items: center;
52
- cursor: pointer;
53
- flex: 1;
54
- }
55
-
56
- #action {
57
- margin-right: 10px;
58
- position: relative;
59
- width: 28px;
60
- height: 28px;
61
- }
62
-
63
- #checkbox {
64
- background-color: #fff;
65
- border: 1px solid #c4c4c4;
66
- height: 25px;
67
- width: 25px;
68
- border-radius: 3px;
69
- position: absolute;
70
- top: 50%;
71
- left: 50%;
72
- transform: translate(-50%, -50%);
73
- transition: opacity 0.25s ease, transform 0.25s ease;
74
- }
75
-
76
- #checkbox:hover {
77
- border-color: #a0a0a0;
78
- }
79
-
80
- #status {
81
- font-size: 14px;
82
- color: #0f0f0f;
83
- }
84
-
85
- #status span {
86
- transition: opacity 0.2s ease;
87
- }
88
-
89
- #status-computing {
90
- display: flex;
91
- flex-direction: column;
92
- }
93
-
94
- .hidden {
95
- display: none !important;
96
- }
97
-
98
- /* Fade out animation for hiding elements */
99
- .fade-out {
100
- opacity: 0 !important;
101
- transform: translate(-50%, -50%) scale(0.8) !important;
102
- pointer-events: none;
103
- }
104
-
105
- /* Fade in animation for showing elements */
106
- .fade-in {
107
- opacity: 1;
108
- transform: translate(-50%, -50%) scale(1);
109
- }
110
-
111
- #branding {
112
- position: absolute;
113
- bottom: 4px;
114
- right: 10px;
115
- }
116
-
117
- #branding a {
118
- font-size: 9px;
119
- color: #6b7280;
120
- text-decoration: none;
121
- transition: color 0.2s ease;
122
- }
123
-
124
- #branding a:hover {
125
- color: #374151;
126
- text-decoration: underline;
127
- }
128
-
129
- #action svg {
130
- width: 28px;
131
- height: 28px;
132
- }
133
-
134
- #failure > svg {
135
- /* bg-red-500 */
136
- color: #d6292a;
137
- }
138
-
139
- #completed > svg {
140
- /* bg-green-600 */
141
- color: #16a24c;
142
- }
143
-
144
- #completed,
145
- #failure {
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
149
- position: absolute;
150
- top: 50%;
151
- left: 50%;
152
- transform: translate(-50%, -50%) scale(0.8);
153
- opacity: 0;
154
- transition: opacity 0.3s ease, transform 0.3s ease;
155
- }
156
-
157
- #completed.show,
158
- #failure.show {
159
- opacity: 1;
160
- transform: translate(-50%, -50%) scale(1);
161
- }
162
-
163
- /* Checkmark draw animation */
164
- #completed.show svg path {
165
- stroke-dasharray: 24;
166
- stroke-dashoffset: 24;
167
- animation: drawCheck 0.4s ease forwards 0.1s;
168
- }
169
-
170
- @keyframes drawCheck {
171
- to {
172
- stroke-dashoffset: 0;
173
- }
174
- }
175
-
176
- /* Failure shake animation */
177
- #failure.show {
178
- animation: shake 0.4s ease;
179
- }
180
-
181
- @keyframes shake {
182
- 0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
183
- 25% { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
184
- 75% { transform: translate(-50%, -50%) scale(1) rotate(5deg); }
185
- }
186
-
187
- /* Loading indicator - Material Design style spinner */
188
- #loading {
189
- position: absolute;
190
- top: 50%;
191
- left: 50%;
192
- transform: translate(-50%, -50%);
193
- width: 24px;
194
- height: 24px;
195
- opacity: 0;
196
- transition: opacity 0.25s ease;
197
- }
198
-
199
- #loading.show {
200
- opacity: 1;
201
- }
202
-
203
- #loading svg {
204
- width: 24px;
205
- height: 24px;
206
- animation: rotate 1.4s linear infinite;
207
- }
208
-
209
- #loading svg circle {
210
- stroke: #3b82f6;
211
- stroke-linecap: round;
212
- animation: dash 1.4s ease-in-out infinite;
213
- }
214
-
215
- @keyframes rotate {
216
- 100% {
217
- transform: rotate(360deg);
218
- }
219
- }
220
-
221
- @keyframes dash {
222
- 0% {
223
- stroke-dasharray: 1, 150;
224
- stroke-dashoffset: 0;
225
- }
226
- 50% {
227
- stroke-dasharray: 90, 150;
228
- stroke-dashoffset: -35;
229
- }
230
- 100% {
231
- stroke-dasharray: 90, 150;
232
- stroke-dashoffset: -124;
233
- }
234
- }
235
- </style>
236
- <script>
237
- window.__SWETRIX_CAPTCHA_THEME = 'light'
238
- const urlParams = new URLSearchParams(window.location.search)
239
- const pid = urlParams.get('pid')
240
- const cid = urlParams.get('cid')
241
-
242
- window.__SWETRIX_CAPTCHA_ID = cid
243
- window.__SWETRIX_PROJECT_ID = pid
244
- </script>
245
- <script src="../captcha.js" defer></script>
246
- </head>
247
-
248
- <body>
249
- <div id="swetrix-captcha">
250
- <div id="challenge">
251
- <div id="action">
252
- <!-- Can contain a checkbox itself / a red cross (with a retry action) / a green check mark -->
253
- <div id="checkbox"></div>
254
- <div id="failure">
255
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
256
- <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
257
- <path d="M12 9v4"/>
258
- <path d="M12 17h.01"/>
259
- </svg>
260
- </div>
261
- <div id="completed">
262
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
263
- <path d="M20 6 9 17l-5-5"/>
264
- </svg>
18
+ body {
19
+ margin: 0;
20
+ padding: 0;
21
+ height: auto;
22
+ overflow: auto;
23
+ }
24
+
25
+ #swetrix-captcha {
26
+ display: flex;
27
+ justify-content: center;
28
+ align-items: center;
29
+ position: relative;
30
+
31
+ /* 300 - 20px (padding) */
32
+ width: 280px;
33
+
34
+ /* bg-gray-100 */
35
+ background-color: #f9fafb;
36
+ border: 1px solid #e9e9e9;
37
+ border-radius: 4px;
38
+ height: 64px;
39
+ -webkit-user-select: none;
40
+ user-select: none;
41
+ padding-left: 10px;
42
+ padding-right: 10px;
43
+
44
+ cursor: pointer;
45
+ }
46
+
47
+ #swetrix-captcha:hover {
48
+ /* bg-gray-200 */
49
+ background-color: #f3f4f6;
50
+ }
51
+
52
+ /* Focus styles for accessibility - only show on keyboard navigation */
53
+ #swetrix-captcha:focus {
54
+ outline: none;
55
+ }
56
+
57
+ #swetrix-captcha:focus-visible {
58
+ outline: 2px solid #3b82f6;
59
+ outline-offset: 2px;
60
+ }
61
+
62
+ /* Fallback for browsers without :focus-visible support */
63
+ #swetrix-captcha.keyboard-focus {
64
+ outline: 2px solid #3b82f6;
65
+ outline-offset: 2px;
66
+ }
67
+
68
+ /* Progress bar at the top */
69
+ #progress-bar-container {
70
+ position: absolute;
71
+ top: 0;
72
+ left: 0;
73
+ right: 0;
74
+ height: 2px;
75
+ background-color: #e5e7eb;
76
+ border-radius: 4px 4px 0 0;
77
+ overflow: hidden;
78
+ opacity: 0;
79
+ transition: opacity 0.3s ease;
80
+ }
81
+
82
+ #progress-bar-container.show {
83
+ opacity: 1;
84
+ }
85
+
86
+ #progress-bar {
87
+ height: 100%;
88
+ width: 0%;
89
+ background: linear-gradient(90deg, #3b82f6, #2563eb);
90
+ transition:
91
+ width 0.3s ease,
92
+ opacity 0.3s ease;
93
+ }
94
+
95
+ #progress-bar.indeterminate {
96
+ width: 30%;
97
+ animation: indeterminate 1.5s ease-in-out infinite;
98
+ }
99
+
100
+ @keyframes indeterminate {
101
+ 0% {
102
+ transform: translateX(-100%);
103
+ }
104
+ 100% {
105
+ transform: translateX(400%);
106
+ }
107
+ }
108
+
109
+ #challenge {
110
+ display: flex;
111
+ align-items: center;
112
+ cursor: pointer;
113
+ flex: 1;
114
+ }
115
+
116
+ #action {
117
+ margin-right: 10px;
118
+ position: relative;
119
+ width: 28px;
120
+ height: 28px;
121
+ }
122
+
123
+ #checkbox {
124
+ background-color: #fff;
125
+ border: 1px solid #c4c4c4;
126
+ height: 25px;
127
+ width: 25px;
128
+ border-radius: 3px;
129
+ position: absolute;
130
+ top: 50%;
131
+ left: 50%;
132
+ transform: translate(-50%, -50%);
133
+ transition:
134
+ opacity 0.25s ease,
135
+ transform 0.25s ease,
136
+ border-color 0.2s ease,
137
+ box-shadow 0.2s ease;
138
+ }
139
+
140
+ #checkbox:hover {
141
+ border-color: #a0a0a0;
142
+ }
143
+
144
+ /* Focus indicator for checkbox when parent is focused */
145
+ #swetrix-captcha:focus-visible #checkbox {
146
+ border-color: #3b82f6;
147
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
148
+ }
149
+
150
+ #status {
151
+ font-size: 14px;
152
+ color: #0f0f0f;
153
+ }
154
+
155
+ #status span {
156
+ transition: opacity 0.2s ease;
157
+ }
158
+
159
+ #status-computing {
160
+ display: flex;
161
+ flex-direction: column;
162
+ }
163
+
164
+ .hidden {
165
+ display: none !important;
166
+ }
167
+
168
+ /* Fade out animation for hiding elements */
169
+ .fade-out {
170
+ opacity: 0 !important;
171
+ transform: translate(-50%, -50%) scale(0.8) !important;
172
+ pointer-events: none;
173
+ }
174
+
175
+ /* Fade in animation for showing elements */
176
+ .fade-in {
177
+ opacity: 1;
178
+ transform: translate(-50%, -50%) scale(1);
179
+ }
180
+
181
+ #branding {
182
+ position: absolute;
183
+ bottom: 4px;
184
+ right: 10px;
185
+ }
186
+
187
+ #branding a {
188
+ font-size: 9px;
189
+ color: #6b7280;
190
+ text-decoration: none;
191
+ transition: color 0.2s ease;
192
+ }
193
+
194
+ #branding a:hover {
195
+ color: #374151;
196
+ text-decoration: underline;
197
+ }
198
+
199
+ #branding a:focus-visible {
200
+ outline: 1px solid #3b82f6;
201
+ outline-offset: 1px;
202
+ }
203
+
204
+ #action svg {
205
+ width: 28px;
206
+ height: 28px;
207
+ }
208
+
209
+ #failure > svg {
210
+ /* bg-red-500 */
211
+ color: #d6292a;
212
+ }
213
+
214
+ #completed > svg {
215
+ /* bg-green-600 */
216
+ color: #16a24c;
217
+ }
218
+
219
+ #completed,
220
+ #failure {
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: center;
224
+ position: absolute;
225
+ top: 50%;
226
+ left: 50%;
227
+ transform: translate(-50%, -50%) scale(0.8);
228
+ opacity: 0;
229
+ transition:
230
+ opacity 0.3s ease,
231
+ transform 0.3s ease;
232
+ }
233
+
234
+ #completed.show,
235
+ #failure.show {
236
+ opacity: 1;
237
+ transform: translate(-50%, -50%) scale(1);
238
+ }
239
+
240
+ /* Checkmark draw animation */
241
+ #completed.show svg path {
242
+ stroke-dasharray: 24;
243
+ stroke-dashoffset: 24;
244
+ animation: drawCheck 0.4s ease forwards 0.1s;
245
+ }
246
+
247
+ @keyframes drawCheck {
248
+ to {
249
+ stroke-dashoffset: 0;
250
+ }
251
+ }
252
+
253
+ /* Failure shake animation */
254
+ #failure.show {
255
+ animation: shake 0.4s ease;
256
+ }
257
+
258
+ @keyframes shake {
259
+ 0%,
260
+ 100% {
261
+ transform: translate(-50%, -50%) scale(1) rotate(0deg);
262
+ }
263
+ 25% {
264
+ transform: translate(-50%, -50%) scale(1) rotate(-5deg);
265
+ }
266
+ 75% {
267
+ transform: translate(-50%, -50%) scale(1) rotate(5deg);
268
+ }
269
+ }
270
+
271
+ /* Loading indicator - Material Design style spinner */
272
+ #loading {
273
+ position: absolute;
274
+ top: 50%;
275
+ left: 50%;
276
+ transform: translate(-50%, -50%);
277
+ width: 24px;
278
+ height: 24px;
279
+ opacity: 0;
280
+ transition: opacity 0.25s ease;
281
+ }
282
+
283
+ #loading.show {
284
+ opacity: 1;
285
+ }
286
+
287
+ #loading svg {
288
+ width: 24px;
289
+ height: 24px;
290
+ animation: rotate 1.4s linear infinite;
291
+ }
292
+
293
+ #loading svg circle {
294
+ stroke: #3b82f6;
295
+ stroke-linecap: round;
296
+ animation: dash 1.4s ease-in-out infinite;
297
+ }
298
+
299
+ @keyframes rotate {
300
+ 100% {
301
+ transform: rotate(360deg);
302
+ }
303
+ }
304
+
305
+ @keyframes dash {
306
+ 0% {
307
+ stroke-dasharray: 1, 150;
308
+ stroke-dashoffset: 0;
309
+ }
310
+ 50% {
311
+ stroke-dasharray: 90, 150;
312
+ stroke-dashoffset: -35;
313
+ }
314
+ 100% {
315
+ stroke-dasharray: 90, 150;
316
+ stroke-dashoffset: -124;
317
+ }
318
+ }
319
+
320
+ /* Reduced motion preference */
321
+ @media (prefers-reduced-motion: reduce) {
322
+ #checkbox,
323
+ #completed,
324
+ #failure,
325
+ #loading,
326
+ #status span,
327
+ #progress-bar,
328
+ #branding a {
329
+ transition: none;
330
+ }
331
+
332
+ #loading svg,
333
+ #loading svg circle,
334
+ #completed.show svg path,
335
+ #failure.show,
336
+ #progress-bar.indeterminate {
337
+ animation: none;
338
+ }
339
+
340
+ #progress-bar.indeterminate {
341
+ width: 100%;
342
+ }
343
+
344
+ /* Show static loading circle when animations are disabled */
345
+ #loading svg circle {
346
+ stroke-dasharray: 90, 150;
347
+ stroke-dashoffset: 0;
348
+ }
349
+
350
+ /* Show checkmark immediately when animations are disabled */
351
+ #completed.show svg path {
352
+ stroke-dashoffset: 0;
353
+ }
354
+ }
355
+
356
+ /* High contrast mode support */
357
+ @media (forced-colors: active) {
358
+ #swetrix-captcha {
359
+ border: 2px solid CanvasText;
360
+ }
361
+
362
+ #checkbox {
363
+ border: 2px solid CanvasText;
364
+ }
365
+
366
+ #progress-bar {
367
+ background: Highlight;
368
+ }
369
+ }
370
+ </style>
371
+ <script>
372
+ window.__SWETRIX_CAPTCHA_THEME = "light";
373
+ const urlParams = new URLSearchParams(window.location.search);
374
+ const pid = urlParams.get("pid");
375
+ const cid = urlParams.get("cid");
376
+ const apiUrl = urlParams.get("apiUrl");
377
+ const lang = urlParams.get("lang");
378
+
379
+ window.__SWETRIX_CAPTCHA_ID = cid;
380
+ window.__SWETRIX_PROJECT_ID = pid;
381
+ if (apiUrl) {
382
+ window.__SWETRIX_API_URL = apiUrl;
383
+ }
384
+ if (lang) {
385
+ document.documentElement.lang = lang;
386
+ }
387
+ </script>
388
+ <script src="../captcha.js" defer></script>
389
+ </head>
390
+
391
+ <body>
392
+ <div
393
+ id="swetrix-captcha"
394
+ role="checkbox"
395
+ aria-checked="false"
396
+ aria-label="Human verification checkbox. Press Enter or Space to verify you are human."
397
+ tabindex="0"
398
+ >
399
+ <!-- Progress bar at the top -->
400
+ <div
401
+ id="progress-bar-container"
402
+ role="progressbar"
403
+ aria-valuemin="0"
404
+ aria-valuemax="100"
405
+ aria-valuenow="0"
406
+ aria-label="Verification progress"
407
+ >
408
+ <div id="progress-bar"></div>
409
+ </div>
410
+
411
+ <div id="challenge">
412
+ <div id="action">
413
+ <!-- Can contain a checkbox itself / a red cross (with a retry action) / a green check mark -->
414
+ <div id="checkbox" aria-hidden="true"></div>
415
+ <div id="failure" aria-hidden="true">
416
+ <svg
417
+ viewBox="0 0 24 24"
418
+ fill="none"
419
+ stroke="currentColor"
420
+ stroke-width="2"
421
+ stroke-linecap="round"
422
+ stroke-linejoin="round"
423
+ aria-hidden="true"
424
+ >
425
+ <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
426
+ <path d="M12 9v4" />
427
+ <path d="M12 17h.01" />
428
+ </svg>
429
+ </div>
430
+ <div id="completed" aria-hidden="true">
431
+ <svg
432
+ viewBox="0 0 24 24"
433
+ fill="none"
434
+ stroke="currentColor"
435
+ stroke-width="2"
436
+ stroke-linecap="round"
437
+ stroke-linejoin="round"
438
+ aria-hidden="true"
439
+ >
440
+ <path d="M20 6 9 17l-5-5" />
441
+ </svg>
442
+ </div>
443
+ <div id="loading" aria-hidden="true">
444
+ <svg viewBox="0 0 50 50" aria-hidden="true">
445
+ <circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
446
+ </svg>
447
+ </div>
265
448
  </div>
266
- <div id="loading">
267
- <svg viewBox="0 0 50 50">
268
- <circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
269
- </svg>
449
+ <div id="status" aria-live="polite" aria-atomic="true">
450
+ <span id="status-default">I am human</span>
451
+ <span id="status-failure" class="hidden">Verification failed, click to retry</span>
452
+ <span id="status-computing" class="hidden">
453
+ <span>Verifying...</span>
454
+ </span>
270
455
  </div>
271
456
  </div>
272
- <div id="status">
273
- <span id="status-default">I am human</span>
274
- <span id="status-failure" class="hidden">Failure, please retry</span>
275
- <span id="status-computing" class="hidden">
276
- <span>Verifying...</span>
277
- </span>
457
+ <div id="branding">
458
+ <a
459
+ href="https://swetrix.com/captcha"
460
+ target="_blank"
461
+ rel="noopener noreferrer"
462
+ aria-label="Swetrix Captcha - opens in new window"
463
+ >Swetrix Captcha</a
464
+ >
278
465
  </div>
279
- </div>
280
- <div id="branding">
281
- <a href="https://swetrix.com/captcha" target="_blank" rel="noopener noreferrer">Swetrix Captcha</a>
282
- </div>
283
- </div>
284
- </body>
285
466
 
467
+ <!-- Screen reader only live region for status updates -->
468
+ <div id="sr-status" class="hidden" aria-live="assertive" aria-atomic="true"></div>
469
+ </div>
470
+ </body>
286
471
  </html>