@lumiapassport/ui-kit 1.13.5 → 1.13.7
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/dist/iframe/index.html +182 -89
- package/dist/iframe/kyc/sumsub.html +82 -76
- package/dist/iframe/main.js +141 -113
- package/dist/iframe/main.js.map +1 -1
- package/dist/iframe/oauth/telegram.html +17 -16
- package/dist/iframe/oauth/x.html +24 -22
- package/dist/index.cjs +532 -535
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +361 -364
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -3
- package/dist/Inter.ttf +0 -0
package/dist/iframe/index.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
@@ -15,23 +15,43 @@
|
|
|
15
15
|
<meta http-equiv="X-Content-Type-Options" content="nosniff" />
|
|
16
16
|
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
|
|
17
17
|
|
|
18
|
-
<title>Lumia Passport Secure Wallet - iframe version 1.13.
|
|
18
|
+
<title>Lumia Passport Secure Wallet - iframe version 1.13.7</title>
|
|
19
19
|
|
|
20
20
|
<!-- Styles will be injected by build process -->
|
|
21
21
|
<style>
|
|
22
22
|
:root {
|
|
23
|
+
/* scales */
|
|
24
|
+
--iframe-gap: 10px;
|
|
25
|
+
--iframe-pd: 20px;
|
|
26
|
+
--iframe-bdrs: 20px;
|
|
27
|
+
--iframe-el-bdrs: 10px;
|
|
28
|
+
|
|
29
|
+
/* heading */
|
|
30
|
+
--iframe-heading-fw: 600;
|
|
31
|
+
--iframe-h1-fz: 20px;
|
|
32
|
+
--iframe-h2-fz: 14px;
|
|
33
|
+
|
|
23
34
|
/* Default theme colors (can be overridden via URL params) */
|
|
24
|
-
--iframe-bg:
|
|
25
|
-
--iframe-text: #
|
|
26
|
-
--iframe-text-secondary: #
|
|
35
|
+
--iframe-bg: rgba(0, 0, 0, 0.8);
|
|
36
|
+
--iframe-text: #212121;
|
|
37
|
+
--iframe-text-secondary: #606060;
|
|
27
38
|
--iframe-border: #e0e0e0;
|
|
28
39
|
--iframe-modal-bg: white;
|
|
29
|
-
--iframe-button-bg: #
|
|
40
|
+
--iframe-button-bg: #000000;
|
|
30
41
|
--iframe-button-text: white;
|
|
31
42
|
--iframe-section-bg: #f9fafb;
|
|
32
|
-
--iframe-section-border:
|
|
33
|
-
--iframe-section-text:
|
|
34
|
-
--iframe-field-label:
|
|
43
|
+
--iframe-section-border: var(--iframe-border);
|
|
44
|
+
--iframe-section-text: var(--iframe-text);
|
|
45
|
+
--iframe-field-label: var(--iframe-text-secondary);
|
|
46
|
+
|
|
47
|
+
--iframe-info: #e4e4e4;
|
|
48
|
+
--iframe-success: #21ff51;
|
|
49
|
+
--iframe-warning: #e9fa00;
|
|
50
|
+
--iframe-error: #d6204e;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:root::-webkit-scrollbar {
|
|
54
|
+
display: none;
|
|
35
55
|
}
|
|
36
56
|
|
|
37
57
|
* {
|
|
@@ -41,10 +61,16 @@
|
|
|
41
61
|
}
|
|
42
62
|
|
|
43
63
|
body {
|
|
44
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
64
|
+
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif; */
|
|
65
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
|
|
66
|
+
|
|
45
67
|
background: var(--iframe-bg);
|
|
68
|
+
backdrop-filter: blur(10px);
|
|
69
|
+
|
|
46
70
|
color: var(--iframe-text);
|
|
47
|
-
|
|
71
|
+
|
|
72
|
+
min-height: 100dvh;
|
|
73
|
+
|
|
48
74
|
display: flex;
|
|
49
75
|
align-items: center;
|
|
50
76
|
justify-content: center;
|
|
@@ -52,59 +78,97 @@
|
|
|
52
78
|
|
|
53
79
|
#app {
|
|
54
80
|
width: 100%;
|
|
55
|
-
height:
|
|
81
|
+
height: 100dvh;
|
|
56
82
|
display: flex;
|
|
57
83
|
align-items: center;
|
|
58
84
|
justify-content: center;
|
|
59
85
|
}
|
|
60
86
|
|
|
61
|
-
/*
|
|
87
|
+
/* OK */
|
|
88
|
+
@keyframes details-open {
|
|
89
|
+
from {
|
|
90
|
+
max-height: 0;
|
|
91
|
+
}
|
|
92
|
+
to {
|
|
93
|
+
max-height: 148px; /* Adjust as needed based on content size */
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* OK */
|
|
98
|
+
details[open] > div[data-details-content] {
|
|
99
|
+
animation: details-open 300ms ease;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Ready Indicator START */
|
|
103
|
+
/* OK */
|
|
62
104
|
.ready-indicator {
|
|
63
105
|
text-align: center;
|
|
64
106
|
background: var(--iframe-modal-bg);
|
|
65
|
-
padding:
|
|
66
|
-
border-radius:
|
|
67
|
-
|
|
68
|
-
|
|
107
|
+
padding: var(--iframe-pd);
|
|
108
|
+
border-radius: var(--iframe-bdrs);
|
|
109
|
+
max-width: 320px;
|
|
110
|
+
display: flex;
|
|
111
|
+
flex-direction: column;
|
|
112
|
+
align-items: center;
|
|
113
|
+
gap: var(--iframe-gap);
|
|
114
|
+
padding: var(--iframe-pd);
|
|
115
|
+
font-size: 10px;
|
|
69
116
|
}
|
|
70
117
|
|
|
118
|
+
/* OK */
|
|
71
119
|
.status-icon {
|
|
72
|
-
|
|
73
|
-
|
|
120
|
+
display: flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: center;
|
|
123
|
+
|
|
124
|
+
font-size: 20px;
|
|
125
|
+
font-weight: 600;
|
|
126
|
+
width: 64px;
|
|
127
|
+
height: 64px;
|
|
128
|
+
border-radius: 32px;
|
|
129
|
+
background: var(--iframe-success);
|
|
130
|
+
color: #000000;
|
|
74
131
|
}
|
|
75
132
|
|
|
133
|
+
/* OK */
|
|
76
134
|
.ready-indicator h2 {
|
|
77
|
-
font-size:
|
|
78
|
-
margin-bottom: 0.5rem;
|
|
135
|
+
font-size: var(--iframe-h1-fz);
|
|
79
136
|
color: var(--iframe-text);
|
|
80
137
|
}
|
|
81
138
|
|
|
139
|
+
/* OK */
|
|
82
140
|
.ready-indicator p {
|
|
141
|
+
font-size: 16px;
|
|
83
142
|
color: var(--iframe-text-secondary);
|
|
84
|
-
margin-bottom: 1.5rem;
|
|
85
143
|
}
|
|
86
144
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
145
|
+
/* OK */
|
|
146
|
+
.ready-indicator .info {
|
|
147
|
+
width: 100%;
|
|
148
|
+
background: var(--iframe-info);
|
|
149
|
+
color: var(--iframe-text);
|
|
150
|
+
border-radius: var(--iframe-el-bdrs);
|
|
151
|
+
padding: var(--iframe-gap);
|
|
92
152
|
}
|
|
93
153
|
|
|
94
|
-
|
|
154
|
+
/* OK */
|
|
155
|
+
.ready-indicator .info-row {
|
|
95
156
|
display: flex;
|
|
157
|
+
align-items: center;
|
|
96
158
|
justify-content: space-between;
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.info-row:not(:last-child) {
|
|
101
|
-
border-bottom: 1px solid #e0e0e0;
|
|
159
|
+
min-height: 24px;
|
|
102
160
|
}
|
|
103
161
|
|
|
162
|
+
/* OK */
|
|
104
163
|
.status-active {
|
|
105
|
-
color:
|
|
164
|
+
color: var(--iframe-text);
|
|
165
|
+
background-color: var(--iframe-success);
|
|
106
166
|
font-weight: 600;
|
|
167
|
+
line-height: 14px;
|
|
168
|
+
padding: 0 4px;
|
|
169
|
+
border-radius: 7px;
|
|
107
170
|
}
|
|
171
|
+
/* Ready Indicator END */
|
|
108
172
|
|
|
109
173
|
/* Loading Indicator */
|
|
110
174
|
.loading-indicator {
|
|
@@ -116,14 +180,16 @@
|
|
|
116
180
|
width: 50px;
|
|
117
181
|
height: 50px;
|
|
118
182
|
margin: 0 auto 1rem;
|
|
119
|
-
border: 4px solid
|
|
120
|
-
border-top-color: white;
|
|
183
|
+
/* border: 4px solid var(--iframe-text-secondary);
|
|
184
|
+
border-top-color: white; */
|
|
121
185
|
border-radius: 50%;
|
|
122
186
|
animation: spin 1s linear infinite;
|
|
123
187
|
}
|
|
124
188
|
|
|
125
189
|
@keyframes spin {
|
|
126
|
-
to {
|
|
190
|
+
to {
|
|
191
|
+
transform: rotate(360deg);
|
|
192
|
+
}
|
|
127
193
|
}
|
|
128
194
|
|
|
129
195
|
.loading-indicator p {
|
|
@@ -135,7 +201,7 @@
|
|
|
135
201
|
text-align: center;
|
|
136
202
|
background: white;
|
|
137
203
|
padding: 3rem;
|
|
138
|
-
border-radius:
|
|
204
|
+
border-radius: 10px;
|
|
139
205
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
140
206
|
max-width: 400px;
|
|
141
207
|
}
|
|
@@ -182,7 +248,7 @@
|
|
|
182
248
|
left: 0;
|
|
183
249
|
right: 0;
|
|
184
250
|
bottom: 0;
|
|
185
|
-
background: rgba(0, 0, 0, 0.
|
|
251
|
+
/* background: rgba(0, 0, 0, 0.8); */
|
|
186
252
|
display: flex;
|
|
187
253
|
align-items: center;
|
|
188
254
|
justify-content: center;
|
|
@@ -191,18 +257,17 @@
|
|
|
191
257
|
|
|
192
258
|
.modal-content {
|
|
193
259
|
background: var(--iframe-modal-bg);
|
|
194
|
-
border-radius:
|
|
195
|
-
padding:
|
|
196
|
-
max-width:
|
|
197
|
-
width:
|
|
260
|
+
border-radius: 20px;
|
|
261
|
+
padding: 20px;
|
|
262
|
+
max-width: 320px;
|
|
263
|
+
width: calc(100% - 40px);
|
|
198
264
|
max-height: 90vh;
|
|
199
265
|
overflow-y: auto;
|
|
200
|
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
201
266
|
}
|
|
202
267
|
|
|
203
268
|
/* Authorization Header with Logos */
|
|
204
269
|
.auth-header {
|
|
205
|
-
padding: 1rem
|
|
270
|
+
padding: 1rem 0;
|
|
206
271
|
text-align: center;
|
|
207
272
|
border-bottom: 1px solid var(--iframe-border);
|
|
208
273
|
}
|
|
@@ -227,7 +292,7 @@
|
|
|
227
292
|
width: 64px;
|
|
228
293
|
height: 64px;
|
|
229
294
|
border-radius: 12px;
|
|
230
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
295
|
+
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
|
231
296
|
}
|
|
232
297
|
|
|
233
298
|
.logo-connector {
|
|
@@ -254,13 +319,13 @@
|
|
|
254
319
|
font-weight: 600;
|
|
255
320
|
color: var(--iframe-text);
|
|
256
321
|
margin: 0;
|
|
257
|
-
padding:
|
|
322
|
+
padding: 1rem 0;
|
|
258
323
|
text-align: center;
|
|
259
324
|
}
|
|
260
325
|
|
|
261
326
|
/* Description Section */
|
|
262
327
|
.auth-description {
|
|
263
|
-
padding: 1rem
|
|
328
|
+
padding: 1rem 0;
|
|
264
329
|
text-align: center;
|
|
265
330
|
}
|
|
266
331
|
|
|
@@ -271,44 +336,53 @@
|
|
|
271
336
|
line-height: 1.5;
|
|
272
337
|
}
|
|
273
338
|
|
|
339
|
+
/* OK */
|
|
274
340
|
.domain-info {
|
|
275
341
|
display: inline-flex;
|
|
276
342
|
align-items: center;
|
|
277
|
-
gap:
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
343
|
+
gap: var(--iframe-gap);
|
|
344
|
+
min-height: 48px;
|
|
345
|
+
width: 100%;
|
|
346
|
+
font-size: 12px;
|
|
347
|
+
padding: 0 var(--iframe-pd);
|
|
348
|
+
border-radius: 10px;
|
|
349
|
+
background: var(--iframe-info);
|
|
282
350
|
}
|
|
283
351
|
|
|
352
|
+
/* OK */
|
|
284
353
|
.domain-info.verified {
|
|
285
|
-
background:
|
|
286
|
-
color: #
|
|
354
|
+
background: var(--iframe-success);
|
|
355
|
+
color: #000000;
|
|
287
356
|
}
|
|
288
357
|
|
|
358
|
+
/* OK */
|
|
289
359
|
.domain-info.unverified {
|
|
290
|
-
background:
|
|
291
|
-
color: #
|
|
360
|
+
background: var(--iframe-error);
|
|
361
|
+
color: #000000;
|
|
292
362
|
}
|
|
293
363
|
|
|
364
|
+
/* DEPRECATE */
|
|
294
365
|
.domain-label {
|
|
295
366
|
font-weight: 500;
|
|
296
367
|
}
|
|
297
368
|
|
|
369
|
+
/* DEPRECATE */
|
|
298
370
|
.domain-value {
|
|
299
371
|
font-family: monospace;
|
|
300
372
|
font-size: 0.8125rem;
|
|
301
373
|
}
|
|
302
374
|
|
|
375
|
+
/* DEPRECATE */
|
|
303
376
|
/* Permissions Box */
|
|
304
377
|
.permissions-box {
|
|
305
378
|
margin: 1.5rem 2rem;
|
|
306
379
|
padding: 1rem;
|
|
307
|
-
border: 1px solid var(--iframe-
|
|
380
|
+
border: 1px solid var(--iframe-border);
|
|
308
381
|
border-radius: 8px;
|
|
309
382
|
background: transparent;
|
|
310
383
|
}
|
|
311
384
|
|
|
385
|
+
/* DEPRECATE */
|
|
312
386
|
.permissions-header {
|
|
313
387
|
font-size: 0.875rem;
|
|
314
388
|
color: var(--iframe-text);
|
|
@@ -320,14 +394,17 @@
|
|
|
320
394
|
color: var(--iframe-text-secondary);
|
|
321
395
|
}
|
|
322
396
|
|
|
397
|
+
/* DEPRECATE */
|
|
323
398
|
.permission-group {
|
|
324
399
|
margin-bottom: 1rem;
|
|
325
400
|
}
|
|
326
401
|
|
|
402
|
+
/* DEPRECATE */
|
|
327
403
|
.permission-group:last-child {
|
|
328
404
|
margin-bottom: 0;
|
|
329
405
|
}
|
|
330
406
|
|
|
407
|
+
/* DEPRECATE */
|
|
331
408
|
.permission-group-title {
|
|
332
409
|
font-size: 0.8125rem;
|
|
333
410
|
font-weight: 600;
|
|
@@ -335,12 +412,14 @@
|
|
|
335
412
|
margin-bottom: 0.5rem;
|
|
336
413
|
}
|
|
337
414
|
|
|
415
|
+
/* DEPRECATE */
|
|
338
416
|
.permissions-list ul {
|
|
339
417
|
list-style: none;
|
|
340
418
|
padding: 0;
|
|
341
419
|
margin: 0;
|
|
342
420
|
}
|
|
343
421
|
|
|
422
|
+
/* DEPRECATE */
|
|
344
423
|
.permissions-list li {
|
|
345
424
|
font-size: 0.8125rem;
|
|
346
425
|
color: var(--iframe-text);
|
|
@@ -349,13 +428,15 @@
|
|
|
349
428
|
position: relative;
|
|
350
429
|
}
|
|
351
430
|
|
|
431
|
+
/* DEPRECATE */
|
|
352
432
|
.permissions-list li:before {
|
|
353
|
-
content:
|
|
433
|
+
content: '•';
|
|
354
434
|
position: absolute;
|
|
355
435
|
left: 0.5rem;
|
|
356
436
|
color: var(--iframe-text-secondary);
|
|
357
437
|
}
|
|
358
438
|
|
|
439
|
+
/* DEPRECATE */
|
|
359
440
|
/* Actions Section */
|
|
360
441
|
.actions {
|
|
361
442
|
display: flex;
|
|
@@ -364,47 +445,59 @@
|
|
|
364
445
|
border-top: 1px solid var(--iframe-border);
|
|
365
446
|
}
|
|
366
447
|
|
|
448
|
+
/* OK */
|
|
367
449
|
button {
|
|
450
|
+
cursor: pointer;
|
|
368
451
|
flex: 1;
|
|
369
|
-
padding: 0
|
|
452
|
+
padding: 0 var(--iframe-pd);
|
|
370
453
|
border: 1px solid;
|
|
371
|
-
border-radius:
|
|
372
|
-
font-size:
|
|
373
|
-
|
|
374
|
-
font-weight: 500;
|
|
454
|
+
border-radius: var(--iframe-el-bdrs);
|
|
455
|
+
font-size: 16px;
|
|
456
|
+
font-weight: 600;
|
|
375
457
|
transition: all 0.15s;
|
|
458
|
+
min-height: 48px;
|
|
376
459
|
}
|
|
377
460
|
|
|
461
|
+
/* OK */
|
|
378
462
|
.cancel-btn {
|
|
379
|
-
background:
|
|
380
|
-
color:
|
|
463
|
+
background: transparent;
|
|
464
|
+
color: var(--iframe-text-secondary);
|
|
381
465
|
border-color: rgba(27, 31, 36, 0.15);
|
|
382
466
|
}
|
|
383
467
|
|
|
384
|
-
|
|
385
|
-
background: #f6f8fa;
|
|
386
|
-
border-color: rgba(27, 31, 36, 0.2);
|
|
387
|
-
}
|
|
388
|
-
|
|
468
|
+
/* OK */
|
|
389
469
|
.confirm-btn,
|
|
390
470
|
.authorize-btn {
|
|
391
|
-
background: #
|
|
471
|
+
background: #000000;
|
|
392
472
|
color: #ffffff;
|
|
393
|
-
border-color:
|
|
473
|
+
border-color: #000000;
|
|
394
474
|
}
|
|
395
475
|
|
|
476
|
+
/* OK */
|
|
477
|
+
.cancel-btn:hover,
|
|
396
478
|
.confirm-btn:hover,
|
|
397
479
|
.authorize-btn:hover {
|
|
398
|
-
|
|
480
|
+
opacity: 0.6;
|
|
481
|
+
}
|
|
482
|
+
/* OK */
|
|
483
|
+
.cancel-btn:active,
|
|
484
|
+
.confirm-btn:active,
|
|
485
|
+
.authorize-btn:active {
|
|
486
|
+
opacity: 0.4;
|
|
399
487
|
}
|
|
400
488
|
|
|
489
|
+
/* OK */
|
|
401
490
|
button:disabled {
|
|
402
|
-
opacity: 0.
|
|
491
|
+
opacity: 0.2;
|
|
403
492
|
cursor: not-allowed;
|
|
404
493
|
}
|
|
405
|
-
|
|
494
|
+
/* OK */
|
|
495
|
+
button:disabled:hover {
|
|
496
|
+
opacity: 0.2;
|
|
497
|
+
}
|
|
498
|
+
/* OK */
|
|
406
499
|
button:disabled:hover {
|
|
407
|
-
|
|
500
|
+
opacity: 0.2;
|
|
408
501
|
}
|
|
409
502
|
|
|
410
503
|
/* Footer */
|
|
@@ -447,29 +540,29 @@
|
|
|
447
540
|
font-family: 'Courier New', monospace;
|
|
448
541
|
}
|
|
449
542
|
|
|
450
|
-
|
|
451
543
|
/* Security Warning */
|
|
452
544
|
.security-warning {
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
color:
|
|
545
|
+
display: flex;
|
|
546
|
+
flex-direction: column;
|
|
547
|
+
gap: var(--iframe-gap);
|
|
548
|
+
padding: var(--iframe-gap);
|
|
549
|
+
background: var(--iframe-warning);
|
|
550
|
+
border-radius: var(--iframe-el-bdrs);
|
|
551
|
+
color: var(--iframe-text);
|
|
552
|
+
font-size: 10px;
|
|
460
553
|
}
|
|
461
554
|
|
|
462
|
-
.security-warning strong {
|
|
555
|
+
/* .security-warning strong {
|
|
463
556
|
display: block;
|
|
464
557
|
margin-bottom: 0.5rem;
|
|
465
|
-
}
|
|
558
|
+
} */
|
|
466
559
|
|
|
467
|
-
.warning-details {
|
|
560
|
+
/* .warning-details {
|
|
468
561
|
margin-top: 0.5rem;
|
|
469
562
|
font-family: monospace;
|
|
470
563
|
font-size: 0.75rem;
|
|
471
564
|
color: #7d5d00;
|
|
472
|
-
}
|
|
565
|
+
} */
|
|
473
566
|
|
|
474
567
|
.warning-details div {
|
|
475
568
|
margin: 0.25rem 0;
|
|
@@ -1,91 +1,97 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Sumsub KYC - Lumia Passport</title>
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
<style>
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
15
|
+
html,
|
|
16
|
+
body {
|
|
17
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
18
|
+
background: #ffffff;
|
|
19
|
+
color: #333;
|
|
20
|
+
min-height: 100vh;
|
|
21
|
+
padding: 0;
|
|
22
|
+
margin: 0;
|
|
23
|
+
}
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
html,
|
|
26
|
+
body::-webkit-scrollbar {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
justify-content: center;
|
|
34
|
-
min-height: 100vh;
|
|
35
|
-
gap: 1rem;
|
|
36
|
-
}
|
|
30
|
+
#sumsub-websdk-container {
|
|
31
|
+
width: 100%;
|
|
32
|
+
min-height: 100vh;
|
|
33
|
+
}
|
|
37
34
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
.loading-container {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
min-height: 100vh;
|
|
41
|
+
gap: 1rem;
|
|
42
|
+
}
|
|
46
43
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
.spinner {
|
|
45
|
+
width: 40px;
|
|
46
|
+
height: 40px;
|
|
47
|
+
border: 4px solid rgba(102, 126, 234, 0.3);
|
|
48
|
+
border-top-color: #667eea;
|
|
49
|
+
border-radius: 50%;
|
|
50
|
+
animation: spin 1s linear infinite;
|
|
51
|
+
}
|
|
50
52
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
min-height: 100vh;
|
|
57
|
-
padding: 2rem;
|
|
58
|
-
text-align: center;
|
|
59
|
-
}
|
|
53
|
+
@keyframes spin {
|
|
54
|
+
to {
|
|
55
|
+
transform: rotate(360deg);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
60
58
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
</head>
|
|
71
|
-
<body>
|
|
72
|
-
<div id="loading" class="loading-container">
|
|
73
|
-
<div class="spinner"></div>
|
|
74
|
-
<p>Initializing KYC verification...</p>
|
|
75
|
-
</div>
|
|
59
|
+
.error-container {
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
min-height: 100vh;
|
|
65
|
+
padding: 2rem;
|
|
66
|
+
text-align: center;
|
|
67
|
+
}
|
|
76
68
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
69
|
+
.error-message {
|
|
70
|
+
background: #fee;
|
|
71
|
+
border: 1px solid #fcc;
|
|
72
|
+
border-radius: 8px;
|
|
73
|
+
padding: 1rem;
|
|
74
|
+
color: #c33;
|
|
75
|
+
max-width: 500px;
|
|
76
|
+
}
|
|
77
|
+
</style>
|
|
78
|
+
</head>
|
|
79
|
+
<body>
|
|
80
|
+
<div id="loading" class="loading-container">
|
|
81
|
+
<div class="spinner"></div>
|
|
82
|
+
<p>Initializing KYC verification...</p>
|
|
80
83
|
</div>
|
|
81
|
-
</div>
|
|
82
84
|
|
|
83
|
-
|
|
85
|
+
<div id="error" class="error-container" style="display: none">
|
|
86
|
+
<div class="error-message"><strong>Error:</strong> <span id="error-text"></span></div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div id="sumsub-websdk-container"></div>
|
|
84
90
|
|
|
85
|
-
|
|
86
|
-
|
|
91
|
+
<!-- Sumsub WebSDK -->
|
|
92
|
+
<script src="https://static.sumsub.com/idensic/static/sns-websdk-builder.js"></script>
|
|
87
93
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</body>
|
|
94
|
+
<!-- Sumsub KYC iframe integration script -->
|
|
95
|
+
<script src="./sumsub.js"></script>
|
|
96
|
+
</body>
|
|
91
97
|
</html>
|