@swetrix/captcha 1.0.3 → 2.0.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.
- package/.prettierrc.js +13 -0
- package/dist/captcha-loader.js +2 -1
- package/dist/captcha-loader.js.map +1 -0
- package/dist/captcha.js +2 -1
- package/dist/captcha.js.map +1 -0
- package/dist/pages/dark.html +138 -102
- package/dist/pages/light.html +138 -95
- package/dist/pages/test.html +2 -2
- package/dist/pow-worker.js +2 -0
- package/dist/pow-worker.js.map +1 -0
- package/package.json +30 -24
- package/rollup.config.mjs +83 -0
- package/src/captcha-loader.ts +13 -43
- package/src/captcha.ts +216 -142
- package/src/pages/dark.html +138 -102
- package/src/pages/light.html +138 -95
- package/src/pages/test.html +2 -2
- package/src/pow-worker.ts +178 -0
- package/tsconfig.esnext.json +6 -8
- package/tsconfig.json +5 -8
- package/dist/esnext/captcha-loader.d.ts +0 -33
- package/dist/esnext/captcha-loader.js +0 -182
- package/dist/esnext/captcha-loader.js.map +0 -1
- package/dist/esnext/captcha.d.ts +0 -37
- package/dist/esnext/captcha.js +0 -248
- package/dist/esnext/captcha.js.map +0 -1
- package/rollup.config.js +0 -52
package/src/pages/dark.html
CHANGED
|
@@ -24,13 +24,14 @@
|
|
|
24
24
|
display: flex;
|
|
25
25
|
justify-content: center;
|
|
26
26
|
align-items: center;
|
|
27
|
+
position: relative;
|
|
27
28
|
|
|
28
29
|
/* 300 - 20px (padding) */
|
|
29
30
|
width: 280px;
|
|
30
31
|
|
|
31
32
|
background-color: #0f172a;
|
|
32
33
|
border: 1px solid #1e293b;
|
|
33
|
-
height:
|
|
34
|
+
height: 64px;
|
|
34
35
|
-webkit-user-select: none;
|
|
35
36
|
user-select: none;
|
|
36
37
|
padding-left: 10px;
|
|
@@ -47,57 +48,80 @@
|
|
|
47
48
|
display: flex;
|
|
48
49
|
align-items: center;
|
|
49
50
|
cursor: pointer;
|
|
50
|
-
|
|
51
|
-
/* divide the space between #challenge and #branding as a proportion of 5 to 1 using flex */
|
|
52
|
-
flex: 5;
|
|
51
|
+
flex: 1;
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
#action {
|
|
56
55
|
margin-right: 10px;
|
|
56
|
+
position: relative;
|
|
57
|
+
width: 28px;
|
|
58
|
+
height: 28px;
|
|
57
59
|
}
|
|
58
60
|
|
|
59
61
|
#checkbox {
|
|
60
62
|
background-color: #111827;
|
|
61
|
-
border: 1px solid #
|
|
63
|
+
border: 1px solid #374151;
|
|
62
64
|
height: 25px;
|
|
63
65
|
width: 25px;
|
|
64
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;
|
|
65
76
|
}
|
|
66
77
|
|
|
67
78
|
#status {
|
|
68
|
-
font-size:
|
|
79
|
+
font-size: 14px;
|
|
69
80
|
color: #f9fafb;
|
|
70
81
|
}
|
|
71
82
|
|
|
72
|
-
|
|
73
|
-
|
|
83
|
+
#status span {
|
|
84
|
+
transition: opacity 0.2s ease;
|
|
74
85
|
}
|
|
75
86
|
|
|
76
|
-
#
|
|
87
|
+
#status-computing {
|
|
77
88
|
display: flex;
|
|
78
89
|
flex-direction: column;
|
|
79
|
-
align-items: flex-end;
|
|
80
|
-
flex: 1;
|
|
81
90
|
}
|
|
82
91
|
|
|
83
|
-
|
|
84
|
-
|
|
92
|
+
.hidden {
|
|
93
|
+
display: none !important;
|
|
85
94
|
}
|
|
86
95
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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;
|
|
91
101
|
}
|
|
92
102
|
|
|
93
|
-
|
|
94
|
-
|
|
103
|
+
/* Fade in animation for showing elements */
|
|
104
|
+
.fade-in {
|
|
105
|
+
opacity: 1;
|
|
106
|
+
transform: translate(-50%, -50%) scale(1);
|
|
95
107
|
}
|
|
96
108
|
|
|
97
|
-
#
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
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;
|
|
101
125
|
}
|
|
102
126
|
|
|
103
127
|
#action svg {
|
|
@@ -105,87 +129,106 @@
|
|
|
105
129
|
height: 28px;
|
|
106
130
|
}
|
|
107
131
|
|
|
108
|
-
#failure>svg {
|
|
132
|
+
#failure > svg {
|
|
109
133
|
/* bg-red-500 */
|
|
110
134
|
color: #d6292a;
|
|
111
135
|
}
|
|
112
136
|
|
|
113
|
-
#completed>svg {
|
|
137
|
+
#completed > svg {
|
|
114
138
|
/* bg-green-600 */
|
|
115
139
|
color: #16a24c;
|
|
116
140
|
}
|
|
117
141
|
|
|
118
|
-
#completed,
|
|
142
|
+
#completed,
|
|
143
|
+
#failure {
|
|
119
144
|
display: flex;
|
|
120
145
|
align-items: center;
|
|
121
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;
|
|
122
153
|
}
|
|
123
154
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
155
|
+
#completed.show,
|
|
156
|
+
#failure.show {
|
|
157
|
+
opacity: 1;
|
|
158
|
+
transform: translate(-50%, -50%) scale(1);
|
|
159
|
+
}
|
|
129
160
|
|
|
130
|
-
|
|
131
|
-
|
|
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;
|
|
132
171
|
}
|
|
133
172
|
}
|
|
134
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 */
|
|
135
186
|
#loading {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
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;
|
|
142
195
|
}
|
|
143
196
|
|
|
144
|
-
#
|
|
145
|
-
|
|
146
|
-
justify-content: center;
|
|
147
|
-
align-items: center;
|
|
148
|
-
flex-direction: row;
|
|
149
|
-
border: 1px solid #1e293b;
|
|
150
|
-
/* bg-slate-900 */
|
|
151
|
-
background-color: #0f172a;
|
|
152
|
-
border-top: none;
|
|
153
|
-
height: 130px;
|
|
154
|
-
width: 280px;
|
|
155
|
-
padding-left: 10px;
|
|
156
|
-
padding-right: 10px;
|
|
157
|
-
gap: 10px;
|
|
197
|
+
#loading.show {
|
|
198
|
+
opacity: 1;
|
|
158
199
|
}
|
|
159
200
|
|
|
160
|
-
#
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
cursor: pointer;
|
|
165
|
-
flex: 5;
|
|
201
|
+
#loading svg {
|
|
202
|
+
width: 24px;
|
|
203
|
+
height: 24px;
|
|
204
|
+
animation: rotate 1.4s linear infinite;
|
|
166
205
|
}
|
|
167
206
|
|
|
168
|
-
#
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
border: 2px solid #1e293b;
|
|
173
|
-
border-radius: 3px;
|
|
207
|
+
#loading svg circle {
|
|
208
|
+
stroke: #60a5fa;
|
|
209
|
+
stroke-linecap: round;
|
|
210
|
+
animation: dash 1.4s ease-in-out infinite;
|
|
174
211
|
}
|
|
175
212
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
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
|
+
}
|
|
189
232
|
}
|
|
190
233
|
</style>
|
|
191
234
|
<script>
|
|
@@ -206,41 +249,34 @@
|
|
|
206
249
|
<div id="action">
|
|
207
250
|
<!-- Can contain a checkbox itself / a red cross (with a retry action) / a green check mark -->
|
|
208
251
|
<div id="checkbox"></div>
|
|
209
|
-
<div id="failure"
|
|
210
|
-
<svg
|
|
211
|
-
<path
|
|
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"/>
|
|
212
262
|
</svg>
|
|
213
263
|
</div>
|
|
214
|
-
<div id="
|
|
215
|
-
<svg
|
|
216
|
-
<
|
|
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>
|
|
217
267
|
</svg>
|
|
218
268
|
</div>
|
|
219
|
-
<div id="loading" class="hidden"></div>
|
|
220
269
|
</div>
|
|
221
270
|
<div id="status">
|
|
222
271
|
<span id="status-default">I am human</span>
|
|
223
272
|
<span id="status-failure" class="hidden">Failure, please retry</span>
|
|
273
|
+
<span id="status-computing" class="hidden">
|
|
274
|
+
<span>Verifying...</span>
|
|
275
|
+
</span>
|
|
224
276
|
</div>
|
|
225
277
|
</div>
|
|
226
278
|
<div id="branding">
|
|
227
|
-
<a href="https://swetrix.com" target="_blank" rel="noopener noreferrer">
|
|
228
|
-
<img src="../assets/logo_white.png" alt="Swetrix" width="81" height="18" />
|
|
229
|
-
</a>
|
|
230
|
-
<div id="legal">
|
|
231
|
-
<a href="https://swetrix.com/privacy" target="_blank" rel="noopener noreferrer">Privacy</a>
|
|
232
|
-
<span class="separator"></span>
|
|
233
|
-
<a href="https://swetrix.com/terms" target="_blank" rel="noopener noreferrer">Terms</a>
|
|
234
|
-
</div>
|
|
235
|
-
</div>
|
|
236
|
-
</div>
|
|
237
|
-
<div id="manual-challenge" class="hidden">
|
|
238
|
-
<div id="input-n-captcha">
|
|
239
|
-
<div id="svg-captcha"></div>
|
|
240
|
-
<input aria-label="Enter the code from image" type="text" id="svg-captcha-input" autocomplete="off" />
|
|
241
|
-
</div>
|
|
242
|
-
<div id="manual-submit-btn">
|
|
243
|
-
Submit
|
|
279
|
+
<a href="https://swetrix.com/captcha" target="_blank" rel="noopener noreferrer">Swetrix Captcha</a>
|
|
244
280
|
</div>
|
|
245
281
|
</div>
|
|
246
282
|
</body>
|
package/src/pages/light.html
CHANGED
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
display: flex;
|
|
25
25
|
justify-content: center;
|
|
26
26
|
align-items: center;
|
|
27
|
+
position: relative;
|
|
27
28
|
|
|
28
29
|
/* 300 - 20px (padding) */
|
|
29
30
|
width: 280px;
|
|
@@ -31,7 +32,7 @@
|
|
|
31
32
|
/* bg-gray-100 */
|
|
32
33
|
background-color: #f9fafb;
|
|
33
34
|
border: 1px solid #e9e9e9;
|
|
34
|
-
height:
|
|
35
|
+
height: 64px;
|
|
35
36
|
-webkit-user-select: none;
|
|
36
37
|
user-select: none;
|
|
37
38
|
padding-left: 10px;
|
|
@@ -49,57 +50,80 @@
|
|
|
49
50
|
display: flex;
|
|
50
51
|
align-items: center;
|
|
51
52
|
cursor: pointer;
|
|
52
|
-
|
|
53
|
-
/* divide the space between #challenge and #branding as a proportion of 5 to 1 using flex */
|
|
54
|
-
flex: 5;
|
|
53
|
+
flex: 1;
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
#action {
|
|
58
57
|
margin-right: 10px;
|
|
58
|
+
position: relative;
|
|
59
|
+
width: 28px;
|
|
60
|
+
height: 28px;
|
|
59
61
|
}
|
|
60
62
|
|
|
61
63
|
#checkbox {
|
|
62
64
|
background-color: #fff;
|
|
63
|
-
border: 1px solid #
|
|
65
|
+
border: 1px solid #c4c4c4;
|
|
64
66
|
height: 25px;
|
|
65
67
|
width: 25px;
|
|
66
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;
|
|
67
78
|
}
|
|
68
79
|
|
|
69
80
|
#status {
|
|
70
|
-
font-size:
|
|
81
|
+
font-size: 14px;
|
|
71
82
|
color: #0f0f0f;
|
|
72
83
|
}
|
|
73
84
|
|
|
74
|
-
|
|
75
|
-
|
|
85
|
+
#status span {
|
|
86
|
+
transition: opacity 0.2s ease;
|
|
76
87
|
}
|
|
77
88
|
|
|
78
|
-
#
|
|
89
|
+
#status-computing {
|
|
79
90
|
display: flex;
|
|
80
91
|
flex-direction: column;
|
|
81
|
-
align-items: flex-end;
|
|
82
|
-
flex: 1;
|
|
83
92
|
}
|
|
84
93
|
|
|
85
|
-
|
|
86
|
-
|
|
94
|
+
.hidden {
|
|
95
|
+
display: none !important;
|
|
87
96
|
}
|
|
88
97
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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;
|
|
93
103
|
}
|
|
94
104
|
|
|
95
|
-
|
|
96
|
-
|
|
105
|
+
/* Fade in animation for showing elements */
|
|
106
|
+
.fade-in {
|
|
107
|
+
opacity: 1;
|
|
108
|
+
transform: translate(-50%, -50%) scale(1);
|
|
97
109
|
}
|
|
98
110
|
|
|
99
|
-
#
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
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;
|
|
103
127
|
}
|
|
104
128
|
|
|
105
129
|
#action svg {
|
|
@@ -107,80 +131,106 @@
|
|
|
107
131
|
height: 28px;
|
|
108
132
|
}
|
|
109
133
|
|
|
110
|
-
#failure>svg {
|
|
134
|
+
#failure > svg {
|
|
111
135
|
/* bg-red-500 */
|
|
112
136
|
color: #d6292a;
|
|
113
137
|
}
|
|
114
138
|
|
|
115
|
-
#completed>svg {
|
|
139
|
+
#completed > svg {
|
|
116
140
|
/* bg-green-600 */
|
|
117
141
|
color: #16a24c;
|
|
118
142
|
}
|
|
119
143
|
|
|
120
|
-
#completed,
|
|
144
|
+
#completed,
|
|
145
|
+
#failure {
|
|
121
146
|
display: flex;
|
|
122
147
|
align-items: center;
|
|
123
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;
|
|
124
155
|
}
|
|
125
156
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
157
|
+
#completed.show,
|
|
158
|
+
#failure.show {
|
|
159
|
+
opacity: 1;
|
|
160
|
+
transform: translate(-50%, -50%) scale(1);
|
|
161
|
+
}
|
|
131
162
|
|
|
132
|
-
|
|
133
|
-
|
|
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;
|
|
134
173
|
}
|
|
135
174
|
}
|
|
136
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 */
|
|
137
188
|
#loading {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
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;
|
|
144
197
|
}
|
|
145
198
|
|
|
146
|
-
#
|
|
147
|
-
|
|
148
|
-
justify-content: center;
|
|
149
|
-
align-items: center;
|
|
150
|
-
flex-direction: row;
|
|
151
|
-
border: 1px solid #e9e9e9;
|
|
152
|
-
border-top: none;
|
|
153
|
-
height: 130px;
|
|
154
|
-
width: 280px;
|
|
155
|
-
padding-left: 10px;
|
|
156
|
-
padding-right: 10px;
|
|
157
|
-
gap: 10px;
|
|
199
|
+
#loading.show {
|
|
200
|
+
opacity: 1;
|
|
158
201
|
}
|
|
159
202
|
|
|
160
|
-
#
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
cursor: pointer;
|
|
165
|
-
flex: 5;
|
|
203
|
+
#loading svg {
|
|
204
|
+
width: 24px;
|
|
205
|
+
height: 24px;
|
|
206
|
+
animation: rotate 1.4s linear infinite;
|
|
166
207
|
}
|
|
167
208
|
|
|
168
|
-
#
|
|
169
|
-
|
|
209
|
+
#loading svg circle {
|
|
210
|
+
stroke: #3b82f6;
|
|
211
|
+
stroke-linecap: round;
|
|
212
|
+
animation: dash 1.4s ease-in-out infinite;
|
|
170
213
|
}
|
|
171
214
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
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
|
+
}
|
|
184
234
|
}
|
|
185
235
|
</style>
|
|
186
236
|
<script>
|
|
@@ -201,41 +251,34 @@
|
|
|
201
251
|
<div id="action">
|
|
202
252
|
<!-- Can contain a checkbox itself / a red cross (with a retry action) / a green check mark -->
|
|
203
253
|
<div id="checkbox"></div>
|
|
204
|
-
<div id="failure"
|
|
205
|
-
<svg
|
|
206
|
-
<path
|
|
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"/>
|
|
207
264
|
</svg>
|
|
208
265
|
</div>
|
|
209
|
-
<div id="
|
|
210
|
-
<svg
|
|
211
|
-
<
|
|
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>
|
|
212
269
|
</svg>
|
|
213
270
|
</div>
|
|
214
|
-
<div id="loading" class="hidden"></div>
|
|
215
271
|
</div>
|
|
216
272
|
<div id="status">
|
|
217
273
|
<span id="status-default">I am human</span>
|
|
218
274
|
<span id="status-failure" class="hidden">Failure, please retry</span>
|
|
275
|
+
<span id="status-computing" class="hidden">
|
|
276
|
+
<span>Verifying...</span>
|
|
277
|
+
</span>
|
|
219
278
|
</div>
|
|
220
279
|
</div>
|
|
221
280
|
<div id="branding">
|
|
222
|
-
<a href="https://swetrix.com" target="_blank" rel="noopener noreferrer">
|
|
223
|
-
<img src="../assets/logo_blue.png" alt="Swetrix" width="81" height="18" />
|
|
224
|
-
</a>
|
|
225
|
-
<div id="legal">
|
|
226
|
-
<a href="https://swetrix.com/privacy" target="_blank" rel="noopener noreferrer">Privacy</a>
|
|
227
|
-
<span class="separator"></span>
|
|
228
|
-
<a href="https://swetrix.com/terms" target="_blank" rel="noopener noreferrer">Terms</a>
|
|
229
|
-
</div>
|
|
230
|
-
</div>
|
|
231
|
-
</div>
|
|
232
|
-
<div id="manual-challenge" class="hidden">
|
|
233
|
-
<div id="input-n-captcha">
|
|
234
|
-
<div id="svg-captcha"></div>
|
|
235
|
-
<input aria-label="Enter the code from image" type="text" id="svg-captcha-input" autocomplete="off" />
|
|
236
|
-
</div>
|
|
237
|
-
<div id="manual-submit-btn">
|
|
238
|
-
Submit
|
|
281
|
+
<a href="https://swetrix.com/captcha" target="_blank" rel="noopener noreferrer">Swetrix Captcha</a>
|
|
239
282
|
</div>
|
|
240
283
|
</div>
|
|
241
284
|
</body>
|