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