@prosopo/client-bundle-example 2.5.5 → 2.8.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/CHANGELOG.md +23 -0
- package/dist/assets/ProcaptchaWidget-DrBDhP6X.js +636 -0
- package/dist/assets/ProcaptchaWidget-rAM-9Rap.js +360 -0
- package/dist/assets/Signer-DP9drQ55.js +23 -0
- package/dist/assets/_commonjsHelpers-DaMA6jEr.js +8 -0
- package/dist/assets/asU8a-CJdNkNEq.js +9 -0
- package/dist/assets/bip39-Du2cANEV.js +365 -0
- package/dist/assets/browser-ponyfill-Dy1JBTMg.js +339 -0
- package/dist/assets/captcha-BhkVCEXM.css +1 -0
- package/dist/assets/captchaComponentProvider-DmV1WTrT.js +1242 -0
- package/dist/assets/captchaRenderer-RIsSZXCC.js +70 -0
- package/dist/assets/components.d.ts +5 -0
- package/dist/assets/components.d.ts.map +1 -0
- package/dist/assets/emotion-element-5486c51c.browser.esm-C3u8NMUC.js +1807 -0
- package/dist/assets/fp.esm-DYWeNGcH.js +1654 -0
- package/dist/assets/frictionless-explicit-Dq_sNGRK.js +1 -0
- package/dist/assets/frictionless-implicit-Dq_sNGRK.js +1 -0
- package/dist/assets/hash-_rWungeW.js +1268 -0
- package/dist/assets/i18nFrontend-CsPT71ro.js +2273 -0
- package/dist/assets/image-explicit-DQvfVB7-.js +4 -0
- package/dist/assets/image-implicit-Bwa9QJO5.js +1 -0
- package/dist/assets/index-BVr9fC_3.js +4386 -0
- package/dist/assets/index-BjRdPnnE.js +1198 -0
- package/dist/assets/index-Cu5oL_7b.js +81 -0
- package/dist/assets/index-Dpt_5E72.js +1 -0
- package/dist/assets/index-DxIFpl6U.js +5416 -0
- package/dist/assets/index-QVME9Prx.js +32 -0
- package/dist/assets/index-Wgw2GQWq.js +596 -0
- package/dist/assets/index.d.ts +16 -0
- package/dist/assets/index.d.ts.map +1 -0
- package/dist/assets/invisible-frictionless-explicit-DugBtRe4.js +4 -0
- package/dist/assets/invisible-frictionless-implicit-DYYos8W9.js +1 -0
- package/dist/assets/invisible-image-explicit-C5Z4gSb1.js +4 -0
- package/dist/assets/invisible-image-implicit-DfNFNlFj.js +1 -0
- package/dist/assets/invisible-pow-explicit-DjqGWFUb.js +4 -0
- package/dist/assets/invisible-pow-implicit-BRXL14FH.js +4 -0
- package/dist/assets/locales/ar/translation.json +56 -0
- package/dist/assets/locales/az/translation.json +56 -0
- package/dist/assets/locales/cs/translation.json +56 -0
- package/dist/assets/locales/de/translation.json +56 -0
- package/dist/assets/locales/el/translation.json +56 -0
- package/dist/assets/locales/en/translation.json +56 -0
- package/dist/assets/locales/es/translation.json +56 -0
- package/dist/assets/locales/fi/translation.json +56 -0
- package/dist/assets/locales/fr/translation.json +56 -0
- package/dist/assets/locales/hi/translation.json +56 -0
- package/dist/assets/locales/hu/translation.json +56 -0
- package/dist/assets/locales/id/translation.json +56 -0
- package/dist/assets/locales/it/translation.json +56 -0
- package/dist/assets/locales/ja/translation.json +56 -0
- package/dist/assets/locales/jv/translation.json +56 -0
- package/dist/assets/locales/ko/translation.json +56 -0
- package/dist/assets/locales/ml/translation.json +56 -0
- package/dist/assets/locales/ms/translation.json +56 -0
- package/dist/assets/locales/nl/translation.json +56 -0
- package/dist/assets/locales/no/translation.json +56 -0
- package/dist/assets/locales/pl/translation.json +56 -0
- package/dist/assets/locales/pt/translation.json +56 -0
- package/dist/assets/locales/pt-br/translation.json +56 -0
- package/dist/assets/locales/ro/translation.json +56 -0
- package/dist/assets/locales/ru/translation.json +56 -0
- package/dist/assets/locales/sr/translation.json +56 -0
- package/dist/assets/locales/sv/translation.json +56 -0
- package/dist/assets/locales/th/translation.json +56 -0
- package/dist/assets/locales/tr/translation.json +56 -0
- package/dist/assets/locales/uk/translation.json +56 -0
- package/dist/assets/locales/vi/translation.json +56 -0
- package/dist/assets/locales/zh-cn/translation.json +56 -0
- package/dist/assets/pow-explicit-BexxbnHM.js +4 -0
- package/dist/assets/pow-implicit-Dpt_5E72.js +1 -0
- package/dist/assets/procaptcha.bundle.js +7 -0
- package/dist/assets/spread-DEmVz7RJ.js +15 -0
- package/dist/assets/tests/util/captchaType.test.d.ts +2 -0
- package/dist/assets/tests/util/captchaType.test.d.ts.map +1 -0
- package/dist/assets/tests/util/config.test.d.ts +2 -0
- package/dist/assets/tests/util/config.test.d.ts.map +1 -0
- package/dist/assets/tests/util/renderLogic.test.d.ts +2 -0
- package/dist/assets/tests/util/renderLogic.test.d.ts.map +1 -0
- package/dist/assets/toU8a-C68WUzs_.js +24 -0
- package/dist/assets/translations-DEL070wJ.js +2918 -0
- package/dist/assets/useTranslation-CJplXtqb.js +158 -0
- package/dist/assets/util/captcha/captchaComponentProvider.d.ts +8 -0
- package/dist/assets/util/captcha/captchaComponentProvider.d.ts.map +1 -0
- package/dist/assets/util/captcha/captchaComponentsList.d.ts +6 -0
- package/dist/assets/util/captcha/captchaComponentsList.d.ts.map +1 -0
- package/dist/assets/util/captcha/captchaProps.d.ts +9 -0
- package/dist/assets/util/captcha/captchaProps.d.ts.map +1 -0
- package/dist/assets/util/captcha/captchaRenderer.d.ts +24 -0
- package/dist/assets/util/captcha/captchaRenderer.d.ts.map +1 -0
- package/dist/assets/util/captcha/captchaType.d.ts +2 -0
- package/dist/assets/util/captcha/captchaType.d.ts.map +1 -0
- package/dist/assets/util/captcha/components/frictionlessCaptcha.d.ts +4 -0
- package/dist/assets/util/captcha/components/frictionlessCaptcha.d.ts.map +1 -0
- package/dist/assets/util/captcha/components/imageCaptcha.d.ts +4 -0
- package/dist/assets/util/captcha/components/imageCaptcha.d.ts.map +1 -0
- package/dist/assets/util/captcha/components/powCaptcha.d.ts +4 -0
- package/dist/assets/util/captcha/components/powCaptcha.d.ts.map +1 -0
- package/dist/assets/util/config.d.ts +6 -0
- package/dist/assets/util/config.d.ts.map +1 -0
- package/dist/assets/util/configCreator.d.ts +5 -0
- package/dist/assets/util/configCreator.d.ts.map +1 -0
- package/dist/assets/util/language.d.ts +3 -0
- package/dist/assets/util/language.d.ts.map +1 -0
- package/dist/assets/util/timeout.d.ts +3 -0
- package/dist/assets/util/timeout.d.ts.map +1 -0
- package/dist/assets/util/widgetFactory.d.ts +18 -0
- package/dist/assets/util/widgetFactory.d.ts.map +1 -0
- package/dist/assets/util/widgetThemeResolver.d.ts +9 -0
- package/dist/assets/util/widgetThemeResolver.d.ts.map +1 -0
- package/dist/frictionless-explicit.html +881 -0
- package/dist/frictionless-implicit.html +874 -0
- package/dist/image-explicit.html +877 -0
- package/dist/index.html +575 -74
- package/dist/invisible-frictionless-explicit.html +626 -283
- package/dist/invisible-frictionless-implicit.html +631 -173
- package/dist/invisible-image-explicit.html +627 -284
- package/dist/invisible-image-implicit.html +631 -173
- package/dist/invisible-pow-explicit.html +627 -284
- package/dist/invisible-pow-implicit.html +629 -177
- package/dist/plugins/explanation-injector.ts +250 -0
- package/dist/plugins/form-filler-injector.ts +233 -0
- package/dist/plugins/navigation-injector.ts +237 -89
- package/dist/plugins/status-log-injector.ts +199 -0
- package/dist/pow-explicit.html +877 -0
- package/dist/pow-implicit.html +881 -0
- package/package.json +7 -2
- package/vite.config.ts +32 -3
- package/dist/assets/captchaType-CYBmmAZe.js +0 -1
- package/dist/assets/frictionless-BVSPLzWe.js +0 -1
- package/dist/assets/index-BWsu-rGU.js +0 -1
- package/dist/assets/invisible-frictionless-explicit-DgCaJtPg.js +0 -1
- package/dist/assets/invisible-image-explicit-DgCaJtPg.js +0 -1
- package/dist/assets/invisible-pow-explicit-DgCaJtPg.js +0 -1
- package/dist/assets/pow-O0V5Dqo9.js +0 -1
- package/dist/frictionless.html +0 -344
- package/dist/pow.html +0 -324
- /package/dist/assets/{modulepreload-polyfill-B5Qt9EMX.js → captcha-ByKnSsbG.js} +0 -0
package/dist/index.html
CHANGED
|
@@ -2,11 +2,8 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
|
|
5
|
-
<title>Procaptcha demo: Implicit Rendering</title>
|
|
6
|
-
<script id="procaptchaScript" type="module" src="
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
<title>Procaptcha demo: PoW - Implicit Rendering</title>
|
|
6
|
+
<script id="procaptchaScript" type="module" src="http://localhost:9269/procaptcha.bundle.js"></script>
|
|
10
7
|
|
|
11
8
|
<style>
|
|
12
9
|
.nav-topbar {
|
|
@@ -15,60 +12,64 @@
|
|
|
15
12
|
margin-bottom: 20px;
|
|
16
13
|
transition: all 0.3s ease;
|
|
17
14
|
overflow: hidden;
|
|
18
|
-
max-height: 500px;
|
|
15
|
+
max-height: 500px;
|
|
19
16
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
17
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
20
18
|
}
|
|
21
19
|
.nav-topbar.collapsed {
|
|
22
|
-
max-height:
|
|
20
|
+
max-height: 60px;
|
|
23
21
|
}
|
|
24
22
|
.nav-container {
|
|
25
23
|
max-width: 1200px;
|
|
26
24
|
margin: 0 auto;
|
|
27
|
-
padding: 0
|
|
25
|
+
padding: 0 20px;
|
|
28
26
|
position: relative;
|
|
29
27
|
}
|
|
30
28
|
.nav-header {
|
|
31
29
|
display: flex;
|
|
32
30
|
justify-content: space-between;
|
|
33
31
|
align-items: center;
|
|
34
|
-
padding:
|
|
32
|
+
padding: 12px 0;
|
|
35
33
|
position: relative;
|
|
36
34
|
z-index: 20;
|
|
37
35
|
}
|
|
38
36
|
.nav-title {
|
|
39
37
|
color: white;
|
|
40
|
-
font-size:
|
|
41
|
-
font-weight:
|
|
38
|
+
font-size: 1.25rem;
|
|
39
|
+
font-weight: 600;
|
|
42
40
|
margin: 0;
|
|
43
41
|
display: flex;
|
|
44
42
|
align-items: center;
|
|
43
|
+
gap: 8px;
|
|
45
44
|
}
|
|
46
45
|
.nav-title-text {
|
|
47
|
-
margin-right:
|
|
46
|
+
margin-right: 8px;
|
|
48
47
|
}
|
|
49
48
|
.nav-title-hint {
|
|
50
|
-
font-size:
|
|
49
|
+
font-size: 0.875rem;
|
|
51
50
|
font-weight: normal;
|
|
52
51
|
opacity: 0;
|
|
53
52
|
transition: opacity 0.3s ease;
|
|
53
|
+
color: rgba(255,255,255,0.8);
|
|
54
54
|
}
|
|
55
55
|
.collapsed .nav-title-hint {
|
|
56
56
|
opacity: 0.8;
|
|
57
57
|
}
|
|
58
58
|
.nav-toggle {
|
|
59
|
-
background-color: rgba(
|
|
59
|
+
background-color: rgba(255,255,255,0.1);
|
|
60
60
|
color: white;
|
|
61
61
|
border: none;
|
|
62
|
-
padding:
|
|
62
|
+
padding: 8px 12px;
|
|
63
63
|
cursor: pointer;
|
|
64
|
-
border-radius:
|
|
64
|
+
border-radius: 6px;
|
|
65
65
|
z-index: 10;
|
|
66
66
|
display: flex;
|
|
67
67
|
align-items: center;
|
|
68
68
|
justify-content: center;
|
|
69
|
+
transition: background-color 0.2s ease;
|
|
69
70
|
}
|
|
70
71
|
.nav-toggle:hover {
|
|
71
|
-
background-color: rgba(
|
|
72
|
+
background-color: rgba(255,255,255,0.2);
|
|
72
73
|
}
|
|
73
74
|
.nav-toggle-icon {
|
|
74
75
|
width: 24px;
|
|
@@ -95,29 +96,42 @@
|
|
|
95
96
|
opacity: 1;
|
|
96
97
|
}
|
|
97
98
|
.nav-content {
|
|
98
|
-
padding: 0 0
|
|
99
|
+
padding: 0 0 20px 0;
|
|
99
100
|
transition: opacity 0.3s ease;
|
|
100
101
|
}
|
|
101
102
|
.collapsed .nav-content {
|
|
102
103
|
opacity: 0;
|
|
103
104
|
}
|
|
104
|
-
.nav-
|
|
105
|
+
.nav-sections {
|
|
105
106
|
display: flex;
|
|
106
107
|
flex-wrap: wrap;
|
|
107
|
-
|
|
108
|
+
gap: 20px;
|
|
108
109
|
}
|
|
109
|
-
.nav-
|
|
110
|
+
.nav-section {
|
|
110
111
|
flex: 1;
|
|
111
|
-
min-width:
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
min-width: 280px;
|
|
113
|
+
}
|
|
114
|
+
.nav-section h3 {
|
|
115
|
+
color: white;
|
|
116
|
+
font-size: 1rem;
|
|
117
|
+
font-weight: 600;
|
|
118
|
+
margin: 0 0 12px 0;
|
|
119
|
+
padding-bottom: 8px;
|
|
120
|
+
border-bottom: 1px solid rgba(255,255,255,0.2);
|
|
121
|
+
}
|
|
122
|
+
.nav-group {
|
|
123
|
+
background: rgba(255,255,255,0.1);
|
|
124
|
+
border-radius: 8px;
|
|
125
|
+
padding: 12px;
|
|
126
|
+
margin-bottom: 12px;
|
|
114
127
|
}
|
|
115
128
|
.nav-group-title {
|
|
116
|
-
color: rgba(255,255,255,0.
|
|
117
|
-
font-size: 0.
|
|
118
|
-
margin: 0 0 5px 0;
|
|
119
|
-
text-transform: uppercase;
|
|
129
|
+
color: rgba(255,255,255,0.9);
|
|
130
|
+
font-size: 0.875rem;
|
|
120
131
|
font-weight: 500;
|
|
132
|
+
margin: 0 0 8px 0;
|
|
133
|
+
text-transform: uppercase;
|
|
134
|
+
letter-spacing: 0.5px;
|
|
121
135
|
}
|
|
122
136
|
.nav-group-links {
|
|
123
137
|
list-style: none;
|
|
@@ -125,37 +139,348 @@
|
|
|
125
139
|
padding: 0;
|
|
126
140
|
}
|
|
127
141
|
.nav-group-links li {
|
|
128
|
-
margin:
|
|
142
|
+
margin: 6px 0;
|
|
129
143
|
}
|
|
130
144
|
.nav-group-links a {
|
|
131
145
|
color: white;
|
|
132
146
|
text-decoration: none;
|
|
133
|
-
font-weight:
|
|
134
|
-
padding:
|
|
147
|
+
font-weight: 500;
|
|
148
|
+
padding: 6px 8px;
|
|
135
149
|
display: inline-block;
|
|
150
|
+
border-radius: 4px;
|
|
151
|
+
transition: background-color 0.2s ease;
|
|
136
152
|
}
|
|
137
153
|
.nav-group-links a:hover {
|
|
138
|
-
|
|
154
|
+
background-color: rgba(255,255,255,0.2);
|
|
139
155
|
}
|
|
140
156
|
.nav-group-links .active {
|
|
141
|
-
|
|
157
|
+
background-color: rgba(255,255,255,0.2);
|
|
158
|
+
font-weight: 600;
|
|
142
159
|
}
|
|
143
160
|
.nav-group-links .disabled {
|
|
144
161
|
color: rgba(255,255,255,0.5);
|
|
145
162
|
cursor: not-allowed;
|
|
163
|
+
opacity: 0.7;
|
|
146
164
|
}
|
|
147
165
|
|
|
148
166
|
@media (max-width: 768px) {
|
|
149
|
-
.nav-
|
|
150
|
-
|
|
167
|
+
.nav-container {
|
|
168
|
+
padding: 0 16px;
|
|
169
|
+
}
|
|
170
|
+
.nav-title {
|
|
171
|
+
font-size: 1.125rem;
|
|
151
172
|
}
|
|
152
173
|
.nav-title-hint {
|
|
153
174
|
display: none;
|
|
154
175
|
}
|
|
176
|
+
.nav-sections {
|
|
177
|
+
flex-direction: column;
|
|
178
|
+
gap: 16px;
|
|
179
|
+
}
|
|
180
|
+
.nav-section {
|
|
181
|
+
min-width: 100%;
|
|
182
|
+
}
|
|
183
|
+
.nav-section h3 {
|
|
184
|
+
font-size: 0.875rem;
|
|
185
|
+
}
|
|
186
|
+
.nav-group {
|
|
187
|
+
padding: 10px;
|
|
188
|
+
}
|
|
189
|
+
.nav-group-title {
|
|
190
|
+
font-size: 0.8125rem;
|
|
191
|
+
}
|
|
192
|
+
.nav-group-links a {
|
|
193
|
+
padding: 8px 10px;
|
|
194
|
+
width: 100%;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
@media (max-width: 480px) {
|
|
199
|
+
.nav-topbar {
|
|
200
|
+
max-height: 60px;
|
|
201
|
+
}
|
|
202
|
+
.nav-topbar.collapsed {
|
|
203
|
+
max-height: 60px;
|
|
204
|
+
}
|
|
205
|
+
.nav-title {
|
|
206
|
+
font-size: 1rem;
|
|
207
|
+
}
|
|
208
|
+
.nav-toggle {
|
|
209
|
+
padding: 6px 10px;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.nav-group-dropdown {
|
|
214
|
+
position: relative;
|
|
215
|
+
display: inline-block;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.nav-group-dropdown-btn {
|
|
219
|
+
background: none;
|
|
220
|
+
border: none;
|
|
221
|
+
color: white;
|
|
222
|
+
font-weight: 500;
|
|
223
|
+
padding: 6px 8px;
|
|
224
|
+
cursor: pointer;
|
|
225
|
+
display: flex;
|
|
226
|
+
align-items: center;
|
|
227
|
+
gap: 4px;
|
|
228
|
+
border-radius: 4px;
|
|
229
|
+
transition: background-color 0.2s ease;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.nav-group-dropdown-btn:hover {
|
|
233
|
+
background-color: rgba(255,255,255,0.2);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.nav-group-dropdown-btn svg {
|
|
237
|
+
width: 16px;
|
|
238
|
+
height: 16px;
|
|
239
|
+
transition: transform 0.2s ease;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.nav-group-dropdown-btn.open svg {
|
|
243
|
+
transform: rotate(180deg);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.nav-group-dropdown-content {
|
|
247
|
+
display: none;
|
|
248
|
+
position: absolute;
|
|
249
|
+
background-color: rgba(33, 150, 243, 0.95);
|
|
250
|
+
min-width: 160px;
|
|
251
|
+
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
|
|
252
|
+
z-index: 1;
|
|
253
|
+
border-radius: 4px;
|
|
254
|
+
padding: 8px 0;
|
|
255
|
+
margin-top: 4px;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.nav-group-dropdown-btn.open + .nav-group-dropdown-content {
|
|
259
|
+
display: block;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.nav-group-dropdown-content a {
|
|
263
|
+
color: white;
|
|
264
|
+
padding: 8px 16px;
|
|
265
|
+
text-decoration: none;
|
|
266
|
+
display: block;
|
|
267
|
+
transition: background-color 0.2s ease;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.nav-group-dropdown-content a:hover {
|
|
271
|
+
background-color: rgba(255,255,255,0.2);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.nav-group-dropdown-content a.active {
|
|
275
|
+
background-color: rgba(255,255,255,0.2);
|
|
276
|
+
font-weight: 600;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
@media (max-width: 768px) {
|
|
280
|
+
.nav-group-dropdown-content {
|
|
281
|
+
position: static;
|
|
282
|
+
box-shadow: none;
|
|
283
|
+
background-color: rgba(255,255,255,0.1);
|
|
284
|
+
margin-top: 8px;
|
|
285
|
+
}
|
|
155
286
|
}
|
|
156
287
|
</style>
|
|
157
|
-
<script type="module" crossorigin src="/assets/index-
|
|
158
|
-
<link rel="modulepreload" crossorigin href="/assets/
|
|
288
|
+
<script type="module" crossorigin src="/assets/index-Dpt_5E72.js"></script>
|
|
289
|
+
<link rel="modulepreload" crossorigin href="/assets/captcha-ByKnSsbG.js">
|
|
290
|
+
<link rel="stylesheet" crossorigin href="/assets/captcha-BhkVCEXM.css">
|
|
291
|
+
|
|
292
|
+
<style>
|
|
293
|
+
.form-filler-button {
|
|
294
|
+
position: fixed;
|
|
295
|
+
bottom: 20px;
|
|
296
|
+
right: 20px;
|
|
297
|
+
background-color: #2196F3;
|
|
298
|
+
color: white;
|
|
299
|
+
border: none;
|
|
300
|
+
border-radius: 30px;
|
|
301
|
+
padding: 12px 20px;
|
|
302
|
+
font-size: 14px;
|
|
303
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
304
|
+
cursor: pointer;
|
|
305
|
+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
306
|
+
z-index: 9999;
|
|
307
|
+
display: flex;
|
|
308
|
+
align-items: center;
|
|
309
|
+
gap: 8px;
|
|
310
|
+
transition: all 0.2s ease;
|
|
311
|
+
outline: none;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.form-filler-button:hover {
|
|
315
|
+
background-color: #1976D2;
|
|
316
|
+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
|
|
317
|
+
transform: translateY(-2px);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.form-filler-button:active {
|
|
321
|
+
transform: translateY(1px);
|
|
322
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.form-filler-button svg {
|
|
326
|
+
width: 18px;
|
|
327
|
+
height: 18px;
|
|
328
|
+
fill: white;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.form-filler-button span {
|
|
332
|
+
font-weight: 500;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
@media (max-width: 768px) {
|
|
336
|
+
.form-filler-button {
|
|
337
|
+
bottom: 15px;
|
|
338
|
+
right: 15px;
|
|
339
|
+
padding: 10px 15px;
|
|
340
|
+
font-size: 12px;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.form-filler-button svg {
|
|
344
|
+
width: 14px;
|
|
345
|
+
height: 14px;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
</style>
|
|
349
|
+
|
|
350
|
+
<style>
|
|
351
|
+
.captcha-status {
|
|
352
|
+
margin-top: 20px;
|
|
353
|
+
padding: 15px;
|
|
354
|
+
background-color: #f0f8ff;
|
|
355
|
+
border: 2px solid #2196F3;
|
|
356
|
+
border-radius: 5px;
|
|
357
|
+
font-family: monospace;
|
|
358
|
+
font-size: 14px;
|
|
359
|
+
}
|
|
360
|
+
.status-item {
|
|
361
|
+
margin: 5px 0;
|
|
362
|
+
padding: 5px;
|
|
363
|
+
}
|
|
364
|
+
.status-success {
|
|
365
|
+
color: #4CAF50;
|
|
366
|
+
font-weight: bold;
|
|
367
|
+
}
|
|
368
|
+
.status-error {
|
|
369
|
+
color: #F44336;
|
|
370
|
+
font-weight: bold;
|
|
371
|
+
}
|
|
372
|
+
.status-info {
|
|
373
|
+
color: #2196F3;
|
|
374
|
+
}
|
|
375
|
+
.status-warning {
|
|
376
|
+
color: #FF9800;
|
|
377
|
+
}
|
|
378
|
+
.status-title {
|
|
379
|
+
font-weight: bold;
|
|
380
|
+
margin-bottom: 10px;
|
|
381
|
+
border-bottom: 1px solid #2196F3;
|
|
382
|
+
padding-bottom: 5px;
|
|
383
|
+
}
|
|
384
|
+
.console-output {
|
|
385
|
+
margin-top: 20px;
|
|
386
|
+
padding: 10px;
|
|
387
|
+
background-color: #f5f5f5;
|
|
388
|
+
border: 1px solid #ddd;
|
|
389
|
+
border-radius: 4px;
|
|
390
|
+
font-family: monospace;
|
|
391
|
+
white-space: pre-wrap;
|
|
392
|
+
max-height: 200px;
|
|
393
|
+
overflow-y: auto;
|
|
394
|
+
}
|
|
395
|
+
</style>
|
|
396
|
+
|
|
397
|
+
<script type="module">
|
|
398
|
+
// Function to update CAPTCHA status display
|
|
399
|
+
function updateCaptchaStatus(message, type = 'info') {
|
|
400
|
+
const statusContainer = document.getElementById('captcha-status');
|
|
401
|
+
if (!statusContainer) return;
|
|
402
|
+
|
|
403
|
+
const timestamp = new Date().toLocaleTimeString();
|
|
404
|
+
const statusItem = document.createElement('div');
|
|
405
|
+
statusItem.className = `status-item status-${type}`;
|
|
406
|
+
statusItem.innerHTML = `[${timestamp}] ${message}`;
|
|
407
|
+
statusContainer.appendChild(statusItem);
|
|
408
|
+
|
|
409
|
+
// Also log to console
|
|
410
|
+
console.log(`CAPTCHA Status: ${message}`);
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
// Make updateCaptchaStatus available globally
|
|
414
|
+
window.updateCaptchaStatus = updateCaptchaStatus;
|
|
415
|
+
|
|
416
|
+
// Override the original callbacks with enhanced versions that use status logging
|
|
417
|
+
const originalOnCaptchaFailed = window.onCaptchaFailed;
|
|
418
|
+
window.onCaptchaFailed = function() {
|
|
419
|
+
updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
|
|
420
|
+
if (originalOnCaptchaFailed) originalOnCaptchaFailed();
|
|
421
|
+
};
|
|
422
|
+
|
|
423
|
+
const originalOnCaptchaVerified = window.onCaptchaVerified;
|
|
424
|
+
window.onCaptchaVerified = function(output) {
|
|
425
|
+
updateCaptchaStatus('Challenge passed successfully!', 'success');
|
|
426
|
+
updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
|
|
427
|
+
if (originalOnCaptchaVerified) originalOnCaptchaVerified(output);
|
|
428
|
+
};
|
|
429
|
+
|
|
430
|
+
const originalOnActionHandler = window.onActionHandler;
|
|
431
|
+
window.onActionHandler = function() {
|
|
432
|
+
const procaptchaElements = document.getElementsByName('procaptcha-response');
|
|
433
|
+
|
|
434
|
+
if (!procaptchaElements.length) {
|
|
435
|
+
updateCaptchaStatus('Error: No CAPTCHA response token found', 'error');
|
|
436
|
+
alert("Must complete captcha");
|
|
437
|
+
return;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
updateCaptchaStatus('Form submission initiated with valid CAPTCHA token', 'info');
|
|
441
|
+
if (originalOnActionHandler) originalOnActionHandler();
|
|
442
|
+
};
|
|
443
|
+
|
|
444
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
445
|
+
updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
|
|
446
|
+
|
|
447
|
+
// Monitor DOM for CAPTCHA initialization
|
|
448
|
+
const observer = new MutationObserver((mutations) => {
|
|
449
|
+
mutations.forEach((mutation) => {
|
|
450
|
+
if (mutation.addedNodes.length) {
|
|
451
|
+
for (let i = 0; i < mutation.addedNodes.length; i++) {
|
|
452
|
+
const node = mutation.addedNodes[i];
|
|
453
|
+
if (node.classList && (node.classList.contains('procaptcha') ||
|
|
454
|
+
node.querySelector && node.querySelector('.procaptcha'))) {
|
|
455
|
+
updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
|
|
456
|
+
observer.disconnect();
|
|
457
|
+
break;
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
});
|
|
462
|
+
});
|
|
463
|
+
|
|
464
|
+
observer.observe(document.body, { childList: true, subtree: true });
|
|
465
|
+
});
|
|
466
|
+
|
|
467
|
+
// Create a method to show CAPTCHA execution events
|
|
468
|
+
document.addEventListener('procaptcha:execute', function(e) {
|
|
469
|
+
// Determine captcha type from the page URL
|
|
470
|
+
const url = window.location.pathname;
|
|
471
|
+
const isFrictionless = url.includes('frictionless');
|
|
472
|
+
const isImage = url.includes('image');
|
|
473
|
+
const isPow = url.includes('pow');
|
|
474
|
+
|
|
475
|
+
let captchaType = 'unknown';
|
|
476
|
+
if (isFrictionless) captchaType = 'frictionless';
|
|
477
|
+
else if (isImage) captchaType = 'image';
|
|
478
|
+
else if (isPow) captchaType = 'pow';
|
|
479
|
+
|
|
480
|
+
updateCaptchaStatus(`CAPTCHA execution started: type=${captchaType}`, 'info');
|
|
481
|
+
updateCaptchaStatus(`Container: ${e.detail.containerId}, timestamp: ${new Date(e.detail.timestamp).toLocaleTimeString()}`, 'info');
|
|
482
|
+
});
|
|
483
|
+
</script>
|
|
159
484
|
</head>
|
|
160
485
|
<body>
|
|
161
486
|
|
|
@@ -178,36 +503,36 @@
|
|
|
178
503
|
</button>
|
|
179
504
|
</div>
|
|
180
505
|
<div class="nav-content">
|
|
181
|
-
<div class="nav-
|
|
506
|
+
<div class="nav-sections">
|
|
182
507
|
|
|
183
508
|
<div class="nav-section">
|
|
184
|
-
<h3
|
|
509
|
+
<h3>Standard Captchas</h3>
|
|
185
510
|
<div class="nav-row">
|
|
186
511
|
|
|
187
512
|
<div class="nav-group">
|
|
188
513
|
<div class="nav-group-title">Image</div>
|
|
189
|
-
<
|
|
190
|
-
<
|
|
191
|
-
<
|
|
192
|
-
</
|
|
514
|
+
<div class="nav-group-links">
|
|
515
|
+
<a href="image-implicit.html">Implicit</a>
|
|
516
|
+
<a href="image-explicit.html">Explicit</a>
|
|
517
|
+
</div>
|
|
193
518
|
</div>
|
|
194
519
|
|
|
195
520
|
|
|
196
521
|
<div class="nav-group">
|
|
197
522
|
<div class="nav-group-title">Pow</div>
|
|
198
|
-
<
|
|
199
|
-
<
|
|
200
|
-
<
|
|
201
|
-
</
|
|
523
|
+
<div class="nav-group-links">
|
|
524
|
+
<a href="pow-implicit.html">Implicit</a>
|
|
525
|
+
<a href="pow-explicit.html">Explicit</a>
|
|
526
|
+
</div>
|
|
202
527
|
</div>
|
|
203
528
|
|
|
204
529
|
|
|
205
530
|
<div class="nav-group">
|
|
206
531
|
<div class="nav-group-title">Frictionless</div>
|
|
207
|
-
<
|
|
208
|
-
<
|
|
209
|
-
<
|
|
210
|
-
</
|
|
532
|
+
<div class="nav-group-links">
|
|
533
|
+
<a href="frictionless-implicit.html">Implicit</a>
|
|
534
|
+
<a href="frictionless-explicit.html">Explicit</a>
|
|
535
|
+
</div>
|
|
211
536
|
</div>
|
|
212
537
|
|
|
213
538
|
</div>
|
|
@@ -215,33 +540,33 @@
|
|
|
215
540
|
|
|
216
541
|
|
|
217
542
|
<div class="nav-section">
|
|
218
|
-
<h3
|
|
543
|
+
<h3>Invisible Captchas</h3>
|
|
219
544
|
<div class="nav-row">
|
|
220
545
|
|
|
221
546
|
<div class="nav-group">
|
|
222
547
|
<div class="nav-group-title">Image</div>
|
|
223
|
-
<
|
|
224
|
-
<
|
|
225
|
-
<
|
|
226
|
-
</
|
|
548
|
+
<div class="nav-group-links">
|
|
549
|
+
<a href="invisible-image-implicit.html">Implicit</a>
|
|
550
|
+
<a href="invisible-image-explicit.html">Explicit</a>
|
|
551
|
+
</div>
|
|
227
552
|
</div>
|
|
228
553
|
|
|
229
554
|
|
|
230
555
|
<div class="nav-group">
|
|
231
556
|
<div class="nav-group-title">Pow</div>
|
|
232
|
-
<
|
|
233
|
-
<
|
|
234
|
-
<
|
|
235
|
-
</
|
|
557
|
+
<div class="nav-group-links">
|
|
558
|
+
<a href="invisible-pow-implicit.html">Implicit</a>
|
|
559
|
+
<a href="invisible-pow-explicit.html">Explicit</a>
|
|
560
|
+
</div>
|
|
236
561
|
</div>
|
|
237
562
|
|
|
238
563
|
|
|
239
564
|
<div class="nav-group">
|
|
240
565
|
<div class="nav-group-title">Frictionless</div>
|
|
241
|
-
<
|
|
242
|
-
<
|
|
243
|
-
<
|
|
244
|
-
</
|
|
566
|
+
<div class="nav-group-links">
|
|
567
|
+
<a href="invisible-frictionless-implicit.html">Implicit</a>
|
|
568
|
+
<a href="invisible-frictionless-explicit.html">Explicit</a>
|
|
569
|
+
</div>
|
|
245
570
|
</div>
|
|
246
571
|
|
|
247
572
|
</div>
|
|
@@ -254,8 +579,13 @@
|
|
|
254
579
|
|
|
255
580
|
|
|
256
581
|
<div class="mui-container">
|
|
582
|
+
<h1>Proof of Work CAPTCHA - Implicit Rendering</h1>
|
|
583
|
+
<p>This example demonstrates how to use Procaptcha in Proof of Work mode with implicit rendering.</p>
|
|
584
|
+
|
|
585
|
+
<!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
|
|
586
|
+
|
|
257
587
|
<form action="undefined/signup" method="POST" class="mui-form">
|
|
258
|
-
<
|
|
588
|
+
<h2>Example Login Form</h2>
|
|
259
589
|
<div class="mui-textfield mui-textfield--float-label">
|
|
260
590
|
<label for="name">Name</label>
|
|
261
591
|
<input id="name" type="text" name="name" required/>
|
|
@@ -282,6 +612,19 @@
|
|
|
282
612
|
<div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
|
|
283
613
|
<button type="button" class="mui-btn mui-btn--raised" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
|
|
284
614
|
</form>
|
|
615
|
+
<!-- CAPTCHA Status Display -->
|
|
616
|
+
<div id="captcha-status" class="captcha-status">
|
|
617
|
+
<div class="status-title">CAPTCHA Status Log</div>
|
|
618
|
+
</div>
|
|
619
|
+
|
|
620
|
+
<!-- Console output display area -->
|
|
621
|
+
<div id="console-output" class="console-output" style="display: none;"></div>
|
|
622
|
+
|
|
623
|
+
|
|
624
|
+
<!-- Console output display area -->
|
|
625
|
+
<div id="console-output" class="console-output" style="display: none;"></div>
|
|
626
|
+
|
|
627
|
+
<!-- Explanation will be injected by the explanation-injector plugin -->
|
|
285
628
|
</div>
|
|
286
629
|
|
|
287
630
|
<script>
|
|
@@ -289,6 +632,7 @@
|
|
|
289
632
|
const toggleBtn = document.getElementById('nav-toggle');
|
|
290
633
|
const navBar = document.getElementById('nav-topbar');
|
|
291
634
|
const navHeader = document.getElementById('nav-header');
|
|
635
|
+
const isMobile = window.innerWidth <= 768;
|
|
292
636
|
|
|
293
637
|
// Check if navigation was previously collapsed
|
|
294
638
|
const navCollapsed = localStorage.getItem('navCollapsed') === 'true';
|
|
@@ -320,20 +664,21 @@
|
|
|
320
664
|
|
|
321
665
|
// Toggle on button click
|
|
322
666
|
toggleBtn.addEventListener('click', function(e) {
|
|
323
|
-
e.stopPropagation();
|
|
667
|
+
e.stopPropagation();
|
|
324
668
|
toggleNav();
|
|
325
669
|
});
|
|
326
670
|
|
|
327
|
-
// Expand on toggle button hover when collapsed
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
671
|
+
// Expand on toggle button hover when collapsed (desktop only)
|
|
672
|
+
if (!isMobile) {
|
|
673
|
+
toggleBtn.addEventListener('mouseenter', function() {
|
|
674
|
+
if (navBar.classList.contains('collapsed')) {
|
|
675
|
+
expandNav();
|
|
676
|
+
}
|
|
677
|
+
});
|
|
678
|
+
}
|
|
333
679
|
|
|
334
680
|
// Toggle on header click
|
|
335
681
|
navHeader.addEventListener('click', function(e) {
|
|
336
|
-
// Don't toggle if a link within the header was clicked
|
|
337
682
|
if (e.target.tagName === 'A') {
|
|
338
683
|
return;
|
|
339
684
|
}
|
|
@@ -342,8 +687,164 @@
|
|
|
342
687
|
|
|
343
688
|
// Make the header appear clickable with cursor style
|
|
344
689
|
navHeader.style.cursor = 'pointer';
|
|
690
|
+
|
|
691
|
+
// Handle window resize
|
|
692
|
+
window.addEventListener('resize', function() {
|
|
693
|
+
const newIsMobile = window.innerWidth <= 768;
|
|
694
|
+
if (newIsMobile !== isMobile) {
|
|
695
|
+
if (newIsMobile) {
|
|
696
|
+
// On mobile, collapse the nav by default
|
|
697
|
+
collapseNav();
|
|
698
|
+
} else {
|
|
699
|
+
// On desktop, expand the nav by default
|
|
700
|
+
expandNav();
|
|
701
|
+
}
|
|
702
|
+
}
|
|
703
|
+
});
|
|
704
|
+
|
|
705
|
+
// Handle dropdown toggles
|
|
706
|
+
document.querySelectorAll('.nav-group-dropdown-btn').forEach(button => {
|
|
707
|
+
button.addEventListener('click', function(e) {
|
|
708
|
+
e.stopPropagation();
|
|
709
|
+
this.classList.toggle('open');
|
|
710
|
+
});
|
|
711
|
+
});
|
|
712
|
+
|
|
713
|
+
// Close dropdowns when clicking outside
|
|
714
|
+
document.addEventListener('click', function(e) {
|
|
715
|
+
if (!e.target.closest('.nav-group-dropdown')) {
|
|
716
|
+
document.querySelectorAll('.nav-group-dropdown-btn').forEach(button => {
|
|
717
|
+
button.classList.remove('open');
|
|
718
|
+
});
|
|
719
|
+
}
|
|
720
|
+
});
|
|
345
721
|
});
|
|
346
722
|
</script>
|
|
347
723
|
|
|
348
|
-
|
|
724
|
+
|
|
725
|
+
<button id="form-filler-button" class="form-filler-button" title="Fill all form fields with default values">
|
|
726
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
727
|
+
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
|
|
728
|
+
</svg>
|
|
729
|
+
<span>Fill Form</span>
|
|
730
|
+
</button>
|
|
731
|
+
|
|
732
|
+
<script>
|
|
733
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
734
|
+
// Create a function to fill the form with sensible default values
|
|
735
|
+
function fillFormWithDefaults() {
|
|
736
|
+
// Get all input elements
|
|
737
|
+
const inputs = document.querySelectorAll('input, select, textarea');
|
|
738
|
+
|
|
739
|
+
// Record which elements were filled for status feedback
|
|
740
|
+
const filledElements = [];
|
|
741
|
+
|
|
742
|
+
// Process each input
|
|
743
|
+
inputs.forEach(input => {
|
|
744
|
+
let filled = true;
|
|
745
|
+
|
|
746
|
+
// Skip hidden inputs and those with existing values
|
|
747
|
+
if (input.type === 'hidden' || (input.value && input.value.trim() !== '')) {
|
|
748
|
+
filled = false;
|
|
749
|
+
}
|
|
750
|
+
// Handle different input types
|
|
751
|
+
else if (input.type === 'text') {
|
|
752
|
+
if (input.id.toLowerCase().includes('name') || input.name.toLowerCase().includes('name')) {
|
|
753
|
+
input.value = 'John Doe';
|
|
754
|
+
} else {
|
|
755
|
+
input.value = 'Default Text';
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
else if (input.type === 'email') {
|
|
759
|
+
input.value = 'test@example.com';
|
|
760
|
+
}
|
|
761
|
+
else if (input.type === 'password') {
|
|
762
|
+
input.value = 'Password123!';
|
|
763
|
+
}
|
|
764
|
+
else if (input.type === 'tel') {
|
|
765
|
+
input.value = '+1234567890';
|
|
766
|
+
}
|
|
767
|
+
else if (input.type === 'number') {
|
|
768
|
+
input.value = '42';
|
|
769
|
+
}
|
|
770
|
+
else if (input.type === 'url') {
|
|
771
|
+
input.value = 'https://example.com';
|
|
772
|
+
}
|
|
773
|
+
else if (input.type === 'date') {
|
|
774
|
+
const today = new Date();
|
|
775
|
+
const yyyy = today.getFullYear();
|
|
776
|
+
const mm = String(today.getMonth() + 1).padStart(2, '0');
|
|
777
|
+
const dd = String(today.getDate()).padStart(2, '0');
|
|
778
|
+
input.value = `${yyyy}-${mm}-${dd}`;
|
|
779
|
+
}
|
|
780
|
+
else if (input.type === 'time') {
|
|
781
|
+
input.value = '12:00';
|
|
782
|
+
}
|
|
783
|
+
else if (input.type === 'checkbox' || input.type === 'radio') {
|
|
784
|
+
input.checked = true;
|
|
785
|
+
}
|
|
786
|
+
else if (input.tagName === 'SELECT') {
|
|
787
|
+
if (input.options.length > 0) {
|
|
788
|
+
input.selectedIndex = 1 >= input.options.length ? 0 : 1; // Select second option if available, first otherwise
|
|
789
|
+
}
|
|
790
|
+
}
|
|
791
|
+
else if (input.tagName === 'TEXTAREA') {
|
|
792
|
+
input.value = 'This is a sample text for the textarea field.';
|
|
793
|
+
}
|
|
794
|
+
else {
|
|
795
|
+
// For any other input types
|
|
796
|
+
input.value = 'Default Value';
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
// Add to filled elements if we actually filled it
|
|
800
|
+
if (filled) {
|
|
801
|
+
filledElements.push(input);
|
|
802
|
+
|
|
803
|
+
// Dispatch input event to trigger any listeners
|
|
804
|
+
const event = new Event('input', { bubbles: true });
|
|
805
|
+
input.dispatchEvent(event);
|
|
806
|
+
|
|
807
|
+
// For select elements, also dispatch change event
|
|
808
|
+
if (input.tagName === 'SELECT') {
|
|
809
|
+
const changeEvent = new Event('change', { bubbles: true });
|
|
810
|
+
input.dispatchEvent(changeEvent);
|
|
811
|
+
}
|
|
812
|
+
}
|
|
813
|
+
});
|
|
814
|
+
|
|
815
|
+
// Show a notification about what was filled
|
|
816
|
+
if (filledElements.length > 0) {
|
|
817
|
+
// If an updateCaptchaStatus function exists (from our other demos), use it
|
|
818
|
+
if (typeof window.updateCaptchaStatus === 'function') {
|
|
819
|
+
window.updateCaptchaStatus(`Filled ${filledElements.length} form fields with default values`, 'info');
|
|
820
|
+
} else {
|
|
821
|
+
console.log(`Filled ${filledElements.length} form fields with default values`);
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
// Highlight the filled fields briefly
|
|
825
|
+
filledElements.forEach(el => {
|
|
826
|
+
const originalBackground = el.style.backgroundColor;
|
|
827
|
+
const originalTransition = el.style.transition;
|
|
828
|
+
|
|
829
|
+
el.style.transition = 'background-color 1.5s ease';
|
|
830
|
+
el.style.backgroundColor = '#e3f2fd';
|
|
831
|
+
|
|
832
|
+
setTimeout(() => {
|
|
833
|
+
el.style.backgroundColor = originalBackground;
|
|
834
|
+
setTimeout(() => {
|
|
835
|
+
el.style.transition = originalTransition;
|
|
836
|
+
}, 1500);
|
|
837
|
+
}, 500);
|
|
838
|
+
});
|
|
839
|
+
}
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
// Add the click event listener to the form filler button
|
|
843
|
+
const formFillerButton = document.getElementById('form-filler-button');
|
|
844
|
+
if (formFillerButton) {
|
|
845
|
+
formFillerButton.addEventListener('click', fillFormWithDefaults);
|
|
846
|
+
}
|
|
847
|
+
});
|
|
848
|
+
</script>
|
|
849
|
+
</body>
|
|
349
850
|
</html>
|