-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathoptions.html
More file actions
680 lines (617 loc) · 67.1 KB
/
options.html
File metadata and controls
680 lines (617 loc) · 67.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
<!DOCTYPE html>
<html>
<head>
<title>Network Request Analyzer</title>
<meta charset="UTF-8">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
line-height: 1.6;
}
h1 {
color: #2c3e50;
margin-bottom: 20px;
font-size: 28px;
text-align: center;
}
.container {
background: white;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #34495e;
font-size: 14px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
transition: border-color 0.2s;
}
input[type="text"]:focus, input[type="password"]:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}
.api-key-input.highlight-required {
border: 3px solid #e74c3c !important;
background-color: #ffeee8;
animation: pulse-red 2s infinite;
}
/* Add styles for website URL highlighting */
.website-url-input.highlight-required {
border: 3px solid #e74c3c !important;
background-color: #ffeee8;
animation: pulse-red 2s infinite;
}
/* Styles for network request URL fields */
.network-url-container {
margin-bottom: 15px;
}
.network-url-row {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.network-url-input {
flex: 1;
margin-right: 8px;
}
.add-url-btn, .remove-url-btn {
width: 36px;
height: 36px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
margin-left: 8px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.add-url-btn {
background-color: #27ae60;
color: white;
margin-top: 0px;
}
.add-url-btn:hover {
background-color: #219a52;
}
.remove-url-btn {
background-color: #e74c3c;
color: white;
}
.remove-url-btn:hover {
background-color: #c0392b;
}
.network-urls-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.network-urls-description {
font-size: 12px;
color: #666;
margin-bottom: 10px;
}
@keyframes pulse-red {
0% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.3); }
50% { box-shadow: 0 0 15px rgba(231, 76, 60, 0.6); }
100% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.3); }
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 14px 28px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
width: 100%;
margin-top: 10px;
transition: all 0.2s;
}
button:hover:not(:disabled) {
background-color: #2980b9;
transform: translateY(-1px);
}
button:disabled {
background-color: #95a5a6;
cursor: not-allowed;
transform: none;
}
#results {
white-space: pre-wrap;
word-wrap: break-word;
border: 2px solid #ddd;
border-radius: 6px;
padding: 20px;
min-height: 300px;
max-height: 600px;
overflow-y: auto;
background-color: #f8f9fa;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.5;
}
.highlight {
background-color: #fff3cd;
padding: 2px 4px;
border-radius: 3px;
font-weight: bold;
}
.instructions {
background-color: #e8f4fd;
border: 1px solid #bee5eb;
border-radius: 6px;
padding: 15px;
margin-bottom: 20px;
font-size: 14px;
color: #0c5460;
}
.results-container {
background: white;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
color: #2c3e50;
margin-top: 0;
margin-bottom: 20px;
font-size: 22px;
}
.status {
padding: 12px;
border-radius: 6px;
margin-bottom: 15px;
font-weight: 500;
}
.status.success {
background-color: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.status.warning {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
}
.status.error {
background-color: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
/* Advanced section styles */
/* .advanced-section {
margin-top: 25px;
border-top: 1px solid #e9ecef;
padding-top: 20px;
} */
.advanced-toggle {
display: flex;
align-items: center;
cursor: pointer;
padding: 12px 0;
background: none;
border: none;
width: 100%;
font-size: 16px;
font-weight: 600;
color: black;
text-align: left;
transition: all 0.2s ease;
user-select: none;
margin-top: 0px;
}
.advanced-toggle:hover {
color: #495057;
background-color: white !important;
}
.chevron {
margin-right: 8px;
transition: transform 0.2s ease;
font-size: 14px;
}
.chevron.rotated {
transform: rotate(90deg);
}
.advanced-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.advanced-content.expanded {
max-height: 500px;
}
.advanced-fields {
padding-top: 10px;
}
/* API Key section styles */
.api-key-section {
margin-bottom: 20px;
}
.api-key-toggle {
display: flex;
align-items: center;
cursor: pointer;
padding: 12px 0;
background: none;
border: none;
width: 100%;
font-size: 16px;
font-weight: 600;
color: black;
text-align: left;
transition: all 0.2s ease;
user-select: none;
margin-top: 0px;
}
.api-key-toggle:hover {
/* color: #34495e; */
background-color: white !important;
}
.api-key-toggle.collapsed {
color: #27ae60;
}
.api-key-content {
max-height: 200px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.api-key-content.collapsed {
max-height: 0;
}
.api-key-fields {
padding-top: 8px;
}
</style>
</head>
<body>
<h1>🌐 Network Request Analyzer</h1>
<div class="container">
<div class="instructions">
<strong>How to use:</strong> Ask what you're looking for (e.g., "my Instagram username", "my Youtube subscription tier"), optionally specify a website, then click "Analyze with AI". The extension will capture network traffic and use AI to find exactly what you need.
</div>
<!-- Gemini API Key Section -->
<div class="api-key-section">
<button type="button" class="api-key-toggle" id="apiKeyToggle">
<span class="chevron api-key-chevron">▼</span>
<span id="apiKeyToggleText">Gemini API Key:</span>
</button>
<div class="api-key-content" id="apiKeyContent">
<div class="api-key-fields">
<div class="input-group">
<label for="apiKey">Gemini API Key:</label>
<input type="password" id="apiKey" placeholder="Enter your Gemini API key (saved locally)" class="api-key-input">
<div style="font-size: 12px; color: #666; margin-top: 5px;">
Your API key is stored locally in your browser.
<a href="https://aistudio.google.com/app/apikey" target="_blank" style="color: #3498db;">Get your API key</a>
</div>
</div>
</div>
</div>
</div>
<!-- Main AI Query Section -->
<div class="input-group">
<label for="aiQuery">What are you looking for?</label>
<input type="text" id="aiQuery" placeholder="e.g., 'my YouTube username', 'my Instagram profile picture', 'QR code to login'">
<div style="font-size: 12px; color: #666; margin-top: 5px;">
Ask natural language questions. AI will find the relevant network requests and extract the information you need.
</div>
<div id="queryValidation" style="font-size: 13px; color: #e74c3c; margin-top: 8px; display: none;">
Please specify a service (e.g., "WhatsApp QR code" instead of just "QR code") or provide a URL below
</div>
</div>
<!-- Advanced Section -->
<div class="advanced-section">
<button type="button" class="advanced-toggle" id="advancedToggle">
<span class="chevron">▶</span>
Advanced
</button>
<div class="advanced-content" id="advancedContent">
<div class="advanced-fields">
<!-- Optional Website URL -->
<div class="input-group">
<label for="url">Website URL (optional):</label>
<input type="text" id="url" placeholder="e.g., youtube.com, instagram.com - leave blank to let AI suggest" class="website-url-input">
<div style="font-size: 12px; color: #666; margin-top: 5px;">
If you don't specify a URL, AI can suggest the best website to visit based on your query.
</div>
</div>
<!-- Network Request URLs -->
<div class="input-group">
<div class="network-urls-header">
<label for="networkUrls">Network Request URLs (optional):</label>
</div>
<div id="networkUrlsContainer" class="network-url-container">
<div class="network-url-row">
<input type="text" class="network-url-input" placeholder="e.g., api.example.com/user, graph.facebook.com/me" data-index="0">
<button type="button" class="add-url-btn">+</button>
</div>
</div>
<div class="network-urls-description">
Add specific request URLs to analyze. When provided, only these URLs will be captured and analyzed. Requires Website URL to be filled. Leave "What are you looking for?" empty to get raw data without AI analysis.
</div>
</div>
</div>
</div>
</div>
<button id="search">🤖 Analyze Requests</button>
<div id="templateDescription" style="font-size: 12px; color: #666; margin-bottom: 15px;">
Or create templates.
</div>
<div style="display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;">
<button type="button" id="plutoTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; display: flex; align-items: center; justify-content: center; color: black;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg viewBox="0 0 203 203" fill="none" xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: 100%;">
<path d="M0 0H53.9846V149.015H0V0Z" fill="url(#paint0_linear_134_4)"></path>
<path d="M149.017 0V53.9846H0.00140381V0H149.017Z" fill="url(#paint1_linear_134_4)"></path>
<path d="M203 203H149.015V53.9846H203V203Z" fill="url(#paint2_linear_134_4)"></path>
<path d="M53.9832 203V149.015H202.999V203H53.9832Z" fill="url(#paint3_linear_134_4)"></path>
<defs>
<linearGradient id="paint0_linear_134_4" x1="53.9834" y1="176.008" x2="202.999" y2="176.008" gradientUnits="userSpaceOnUse">
<stop stop-color="#2A9D8F"></stop>
<stop offset="1" stop-color="#264653"></stop>
</linearGradient>
<linearGradient id="paint1_linear_134_4" x1="53.9834" y1="176.008" x2="202.999" y2="176.008" gradientUnits="userSpaceOnUse">
<stop stop-color="#2A9D8F"></stop>
<stop offset="1" stop-color="#264653"></stop>
</linearGradient>
<linearGradient id="paint2_linear_134_4" x1="53.9834" y1="176.008" x2="202.999" y2="176.008" gradientUnits="userSpaceOnUse">
<stop stop-color="#2A9D8F"></stop>
<stop offset="1" stop-color="#264653"></stop>
</linearGradient>
<linearGradient id="paint3_linear_134_4" x1="53.9834" y1="176.008" x2="202.999" y2="176.008" gradientUnits="userSpaceOnUse">
<stop stop-color="#2A9D8F"></stop>
<stop offset="1" stop-color="#264653"></stop>
</linearGradient>
</defs>
</svg>
</div>
<span>Pluto</span>
</button>
<button type="button" id="reclaimTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="22" viewBox="0 0 19 22" fill="none">
<g id="Union">
<path d="M4.77167 0.151724C4.78997 0.0679293 4.87434 0 4.96011 0H9.15322C9.23899 0 9.29369 0.0679293 9.27539 0.151724L8.3807 4.24828C8.3624 4.33207 8.27803 4.4 8.19226 4.4H3.99915C3.91338 4.4 3.85868 4.33207 3.87698 4.24828L4.77167 0.151724Z" fill="black"/>
<path d="M10.2072 0.151724C10.2255 0.0679293 10.3099 0 10.3956 0H17.3842C18.4134 0 19.0697 0.815151 18.8501 1.82069L16.398 13.0483C16.3797 13.1321 16.2953 13.2 16.2096 13.2H12.2361C12.1503 13.2 12.0659 13.2679 12.0476 13.3517L11.153 17.4483C11.1347 17.5321 11.1893 17.6 11.2751 17.6H15.2486C15.3344 17.6 15.3891 17.6679 15.3708 17.7517L14.4761 21.8483C14.4578 21.9321 14.3734 22 14.2876 22H10.0945C10.0088 22 9.95406 21.9321 9.97236 21.8483L10.8671 17.7517C10.8854 17.6679 10.8307 17.6 10.7449 17.6H6.55177C6.466 17.6 6.41131 17.5321 6.42961 17.4483L7.3243 13.3517C7.3426 13.2679 7.42697 13.2 7.51274 13.2H11.7059C11.7916 13.2 11.876 13.1321 11.8943 13.0483L13.5843 5.31035C13.6941 4.80758 13.3659 4.4 12.8513 4.4H9.43466C9.34889 4.4 9.2942 4.33207 9.3125 4.24828L10.2072 0.151724Z" fill="black"/>
<path d="M3.80033 5.31035C3.71456 5.31035 3.63019 5.37827 3.61189 5.46207L0.0331248 21.8483C0.0148236 21.9321 0.0695187 22 0.155289 22H4.3484C4.43417 22 4.51854 21.9321 4.53684 21.8483L8.1156 5.46207C8.1339 5.37827 8.07921 5.31035 7.99344 5.31035H3.80033Z" fill="black"/>
</g>
</svg>
</div>
<span>Reclaim</span>
</button>
<button class="primus-button" id="primusTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black;">
<svg xmlns="http://www.w3.org/2000/svg" width="111" height="24" viewBox="0 0 111 24" fill="none">
<path d="M27.543 4.84301H28.6734C29.4097 4.84301 30.0071 5.44041 30.0071 6.17675V6.28285H30.0349C30.2382 5.13855 31.7602 4.56641 34.602 4.56641C36.2995 4.56641 37.5814 4.92131 38.4491 5.63239C39.3168 6.34347 39.75 7.25158 39.75 8.35924V13.8673C39.75 14.6604 39.6351 15.3526 39.4039 15.9437C39.1728 16.5347 38.8735 16.9958 38.5047 17.3279C38.1725 17.6424 37.7153 17.8912 37.1343 18.0756C36.5533 18.26 35.9761 18.38 35.404 18.4356C34.8874 18.4912 34.2597 18.5189 33.5221 18.5189C32.71 18.5189 31.9673 18.4217 31.2941 18.2285C30.6209 18.0352 30.2004 17.7536 30.0349 17.3848V22.6667C30.0349 23.403 29.4375 24.0004 28.7012 24.0004H27.543V4.84301ZM35.7766 16.6206C36.2843 16.4817 36.648 16.2291 36.8703 15.859C37.0914 15.4902 37.2025 14.9269 37.2025 14.1704V9.24336C37.2025 8.41355 37.0914 7.79468 36.8703 7.38925C36.6493 6.98382 36.2843 6.71101 35.7766 6.57334C35.2688 6.43441 34.5262 6.3662 33.5486 6.3662C32.571 6.3662 31.8423 6.43567 31.3623 6.57334C30.8824 6.71227 30.5414 6.98003 30.338 7.37535C30.1347 7.77194 30.0336 8.39461 30.0336 9.24336V14.1704C30.0336 14.9269 30.1397 15.4902 30.3519 15.859C30.5641 16.2278 30.919 16.4817 31.4179 16.6206C31.9155 16.7583 32.6354 16.8278 33.5764 16.8278C34.5173 16.8278 35.2688 16.7583 35.7766 16.6206Z" fill="#FD4C00"/>
<path d="M43.5403 4.84272H44.5596C45.2959 4.84272 45.8933 5.44013 45.8933 6.17646V7.03026C45.8933 6.60589 46.0777 6.20425 46.4465 5.82661C46.8153 5.44897 47.2864 5.14458 47.8586 4.91345C48.4307 4.68358 48.9928 4.56738 49.5472 4.56738H50.7648V6.03248C50.7648 6.40002 50.4667 6.69935 50.0979 6.69935H49.3805C48.1996 6.69935 47.3458 6.85218 46.8204 7.15657C46.295 7.46095 46.031 8.01036 46.031 8.80354V16.9083C46.031 17.6446 45.4336 18.2421 44.6972 18.2421H43.5391V4.84272H43.5403Z" fill="#FD4C00"/>
<path d="M55.2191 0H56.3773C56.7448 0 57.0442 0.298072 57.0442 0.666872V1.93494C57.0442 2.30248 56.7461 2.60181 56.3773 2.60181H55.2191C54.8516 2.60181 54.5522 2.30374 54.5522 1.93494V0.666872C54.5522 0.299335 54.8503 0 55.2191 0ZM54.5522 4.84367H55.7104C56.4468 4.84367 57.0442 5.44107 57.0442 6.17741V16.908C57.0442 17.6443 56.4468 18.2417 55.7104 18.2417H54.5522V4.84367Z" fill="#FD4C00"/>
<path d="M60.8378 4.84232H61.996C62.7323 4.84232 63.3297 5.43972 63.3297 6.17606V6.4754C63.5874 5.20228 65.0916 4.56572 67.8412 4.56572C70.0742 4.56572 71.4673 5.17449 72.0205 6.39204C72.1872 5.80221 72.6887 5.35005 73.5286 5.03556C74.3685 4.72233 75.3966 4.56445 76.6141 4.56445C78.275 4.56445 79.4471 4.87389 80.1291 5.49151C80.8111 6.11038 81.1534 7.08291 81.1534 8.4116V16.9041C81.1534 17.6405 80.556 18.2379 79.8196 18.2379H78.6615V8.57832C78.6615 8.22846 78.6337 7.94176 78.5781 7.72073C78.5225 7.4997 78.4126 7.27741 78.2459 7.05638C77.8771 6.59538 77.0562 6.36425 75.783 6.36425C74.8042 6.36425 74.0754 6.42866 73.5968 6.55749C73.1168 6.68632 72.7897 6.90861 72.6141 7.22184C72.4386 7.53633 72.3514 7.98723 72.3514 8.57832V16.9054C72.3514 17.6417 71.754 18.2391 71.0177 18.2391H69.8595V8.57958C69.8595 8.22973 69.8317 7.94302 69.7761 7.72199C69.7206 7.50097 69.6107 7.27867 69.444 7.05765C69.0752 6.59665 68.2631 6.36551 67.0076 6.36551C65.9921 6.36551 65.2268 6.42993 64.7102 6.55876C64.1936 6.68758 63.8336 6.90482 63.6303 7.20921C63.427 7.5136 63.3259 7.97081 63.3259 8.57958V16.9066C63.3259 17.643 62.7285 18.2404 61.9922 18.2404H60.834V4.84232H60.8378Z" fill="#FD4C00"/>
<path d="M85.9806 17.5882C85.2884 16.9705 84.9424 15.9968 84.9424 14.6681V4.8418H86.1006C86.8369 4.8418 87.4343 5.4392 87.4343 6.17554V14.5304C87.4343 14.8815 87.4659 15.1632 87.5316 15.3741C87.596 15.5863 87.7109 15.8035 87.8776 16.0245C88.2098 16.5045 89.0219 16.7445 90.314 16.7445C91.6793 16.7445 92.6392 16.6156 93.1924 16.3567C93.7279 16.0991 93.9944 15.628 93.9944 14.9447V4.8418H95.1526C95.8889 4.8418 96.4863 5.4392 96.4863 6.17554V16.9061C96.4863 17.6425 95.8889 18.2399 95.1526 18.2399H93.9944V16.6068C93.7544 17.8799 92.2881 18.5165 89.5941 18.5165C87.8776 18.5165 86.674 18.207 85.9818 17.5894L85.9806 17.5882Z" fill="#FD4C00"/>
<path d="M100.552 18.1842V17.0538C100.552 16.6459 100.917 16.3339 101.319 16.3958C103.081 16.6661 104.376 16.8 105.201 16.8C106.382 16.8 107.23 16.685 107.747 16.4539C108.263 16.224 108.522 15.7946 108.522 15.1669V13.8104C108.522 13.2383 108.329 12.8328 107.941 12.5929C107.554 12.3529 106.926 12.2329 106.06 12.2329H104.538C103.153 12.2329 102.097 11.9475 101.369 11.3753C100.64 10.8032 100.275 10.0012 100.275 8.96675V7.72142C100.275 5.61724 102.268 4.56641 106.253 4.56641C106.548 4.56641 107.904 4.64092 110.321 4.78743V5.81427C110.321 6.21843 109.963 6.5304 109.563 6.47482C108.246 6.29169 107.105 6.19949 106.142 6.19949C104.831 6.19949 103.936 6.32831 103.456 6.58723C102.976 6.84615 102.737 7.27936 102.737 7.88814V9.02233C102.737 9.92665 103.557 10.3788 105.199 10.3788H106.749C109.572 10.3788 110.984 11.4309 110.984 13.5338V14.6958C110.984 16.0801 110.504 17.0627 109.544 17.6437C108.584 18.2247 107.118 18.5152 105.144 18.5152C103.723 18.5152 102.21 18.4078 100.568 18.1867L100.552 18.1842Z" fill="#FD4C00"/>
<g clip-path="url(#clip0_10957_6518)">
<path d="M20.6567 0.129883H2.95095C1.32119 0.129883 0 1.45107 0 3.08084V20.7866C0 22.4163 1.32119 23.7375 2.95095 23.7375H20.6567C22.2864 23.7375 23.6076 22.4163 23.6076 20.7866V3.08084C23.6076 1.45107 22.2864 0.129883 20.6567 0.129883Z" fill="#FD4C00"/>
<path d="M18.8856 3.08105H4.72266V4.8511C4.72266 5.8284 5.51539 6.62114 6.4927 6.62114H17.1156V17.244H10.0341C9.0568 17.244 8.26407 18.0368 8.26407 19.0141V20.7841H18.887C19.8643 20.7841 20.657 19.9914 20.657 19.0141V4.85242C20.657 3.87512 19.8643 3.08238 18.887 3.08238L18.8856 3.08105Z" fill="white"/>
<path d="M9.42716 15.0594C9.87731 14.6093 10.366 14.5615 11.7708 14.5615C13.1757 14.5615 14.4266 13.373 14.4266 11.9057C14.4266 10.4384 13.2381 9.25 11.7708 9.25C10.3035 9.25 9.11511 10.4384 9.11511 11.9057C9.11511 13.8816 8.80041 14.1551 8.64505 14.3397C8.40471 14.6252 6.31996 16.6648 6.31996 16.6648C6.07962 16.8746 5.5405 17.2451 4.72254 17.2451H3.83686C3.3482 17.2451 2.95117 17.6408 2.95117 18.1307V19.9008C2.95117 20.3894 3.34687 20.7865 3.83686 20.7865H5.6069C6.09555 20.7865 6.49258 20.3908 6.49258 19.9008V19.0151C6.49258 17.9276 7.21361 17.2769 7.21361 17.2769L9.42716 15.0594Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_10957_6518">
<rect width="23.6076" height="23.6076" fill="white" transform="translate(0 0.129883)"/>
</clipPath>
</defs>
</svg>
</button>
<button type="button" id="zkp2pTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black;">
<img src="https://www.zkp2p.xyz/logo192.png" alt="ZKP2P Logo" style="width: 22px; height: auto; margin-right: 8px;" />
<span>zkP2P</span>
</button>
<button type="button" id="opacityTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="24" viewBox="0 0 30 24" fill="none">
<path d="M10.1332 3.7478C9.80341 3.68391 9.46418 3.65183 9.12185 3.65183C6.30448 3.65183 4.01265 5.88419 4.01265 8.62756C4.01265 11.3717 6.30448 13.6037 9.12185 13.6037C9.4614 13.6037 9.79615 13.5629 10.1249 13.5003L10.1326 13.514L10.3606 13.4586C12.0696 13.0438 13.3924 11.8229 13.9468 10.2711C14.1317 9.75365 14.2311 9.20052 14.2311 8.62756C14.2311 8.40211 14.2526 8.18018 14.2914 7.9632C14.3047 7.8894 14.3315 7.8199 14.3488 7.74766C14.383 7.60684 14.4149 7.46536 14.4646 7.33001C14.4955 7.24629 14.5389 7.16819 14.5754 7.08734C14.6283 6.96946 14.6781 6.85002 14.7423 6.73815C14.7893 6.65521 14.8484 6.57919 14.9018 6.49978C14.9707 6.3969 15.0366 6.29311 15.1149 6.19701C15.1777 6.11981 15.2505 6.05018 15.3192 5.97729C15.4023 5.88862 15.4836 5.79878 15.575 5.71729C15.6519 5.64896 15.7366 5.58859 15.8188 5.52534C15.9154 5.45063 16.011 5.37539 16.1145 5.30837C16.203 5.25125 16.298 5.20262 16.3912 5.15176C16.5006 5.09204 16.6093 5.03154 16.7247 4.98056C16.8234 4.93713 16.927 4.90154 17.0296 4.86463C17.1131 4.83451 17.1974 4.80713 17.2836 4.7817C17.912 5.96882 18.2436 7.29206 18.2436 8.62756C18.2436 10.0602 17.8633 11.4786 17.1436 12.7295C16.3484 14.1206 15.1646 15.2783 13.7193 16.0774C12.3336 16.848 10.7445 17.2549 9.12172 17.2549C4.09189 17.2549 0 13.3841 0 8.62756C0 3.87037 4.09189 0 9.12185 0C10.4548 0 11.7641 0.274638 12.9545 0.800689C12.8832 0.849144 12.8189 0.906035 12.7487 0.956523C12.6396 1.03499 12.534 1.11674 12.4276 1.19981C12.2055 1.37371 11.9917 1.55659 11.786 1.74814C11.6946 1.83317 11.6011 1.91563 11.5132 2.00448C11.2456 2.27403 10.9912 2.55523 10.7569 2.85409C10.7461 2.86816 10.7332 2.88035 10.7228 2.89403C10.5111 3.16748 10.314 3.45246 10.1332 3.7478Z" fill="#4FB5FF"/>
<path d="M13.9469 10.271C13.3924 11.8227 12.0696 13.0437 10.3607 13.4585L10.1326 13.5138L10.125 13.5003C10.2029 13.4856 10.2828 13.4767 10.36 13.4585C12.0696 13.0437 13.3924 11.8227 13.9469 10.271Z" fill="#4FB5FF"/>
<path d="M14.5745 7.0872C14.6273 6.96946 14.6771 6.85041 14.7414 6.73801C14.677 6.84989 14.6273 6.96933 14.5745 7.0872Z" fill="#4FB5FF"/>
<path d="M17.2829 4.78195C17.1968 4.80738 17.1123 4.83489 17.0288 4.86476C17.1127 4.83437 17.1911 4.79604 17.2777 4.76996C17.2798 4.77374 17.2809 4.77765 17.2829 4.78195Z" fill="#4FB5FF"/>
<path d="M15.8171 5.52492C15.9142 5.45021 16.0089 5.3751 16.1129 5.30807C16.0093 5.3751 15.9138 5.45021 15.8171 5.52492Z" fill="#4FB5FF"/>
<path d="M16.3911 5.15169C16.5009 5.09196 16.6093 5.03146 16.7248 4.98035C16.6094 5.03146 16.5006 5.09196 16.3911 5.15169Z" fill="#4FB5FF"/>
<path d="M15.1137 6.19702C15.0355 6.29312 14.9695 6.39705 14.9006 6.49993C14.9695 6.39705 15.0351 6.29312 15.1137 6.19702Z" fill="#4FB5FF"/>
<path d="M12.426 1.19928C12.5324 1.11621 12.638 1.03439 12.7471 0.955994C12.638 1.03447 12.5324 1.11691 12.426 1.19928Z" fill="#4FB5FF"/>
<path d="M11.512 2.00424C11.5999 1.91537 11.6934 1.833 11.7848 1.74789C11.6934 1.833 11.6 1.91584 11.512 2.00424Z" fill="#4FB5FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6083 13.6034C18.2667 13.6034 17.9275 13.5708 17.5969 13.5073C17.4166 13.8027 17.2198 14.0869 17.0089 14.3608C17.003 14.3686 16.9966 14.3758 16.9902 14.3828C16.9842 14.3896 16.9782 14.3962 16.9727 14.4033C16.7391 14.7021 16.4848 14.9838 16.2171 15.2529C16.1565 15.3139 16.0932 15.372 16.03 15.43C16.0024 15.4554 15.9746 15.4808 15.9471 15.5067C15.74 15.6994 15.5255 15.8842 15.3016 16.0591C15.1964 16.1416 15.0917 16.2227 14.9825 16.3009C14.9506 16.3236 14.9198 16.3478 14.889 16.3722C14.8524 16.4012 14.8156 16.4301 14.7768 16.4566C15.9686 16.9809 17.2776 17.2546 18.6084 17.2546C22.104 17.2546 25.1465 15.3853 26.6775 12.6483H21.6155C20.7711 13.2487 19.7315 13.6034 18.6083 13.6034ZM12.6942 10.9532C12.729 10.9041 12.7622 10.8541 12.7954 10.804C12.8061 10.7878 12.8168 10.7716 12.8276 10.7556C12.8449 10.73 12.8626 10.7049 12.8804 10.6798C12.9181 10.6265 12.9558 10.5732 12.9882 10.5165C13.0387 10.4284 13.0802 10.3351 13.1215 10.2421C13.1324 10.2176 13.1433 10.1931 13.1544 10.1687C13.1678 10.1382 13.1823 10.1083 13.1969 10.0785C13.2213 10.0281 13.2458 9.97793 13.2652 9.92512C13.3087 9.80659 13.3384 9.68324 13.3681 9.55975C13.3714 9.54606 13.3746 9.5325 13.378 9.51881H9.53588C9.58949 10.0043 9.68661 10.4845 9.82555 10.9532H12.6942ZM9.52661 7.82368H13.565C13.613 7.53525 13.6864 7.25438 13.7832 6.98355C13.8561 6.77935 13.9424 6.58089 14.0411 6.38934H9.79967C9.66634 6.8585 9.57479 7.33861 9.52661 7.82368ZM10.492 4.69421C10.5228 4.63762 10.5543 4.58142 10.5864 4.52548C11.1836 3.48297 11.9993 2.57196 12.9784 1.84528C13.3047 1.60308 13.6499 1.38136 14.0103 1.18191C15.395 0.408514 16.9841 4.27415e-09 18.6083 4.27415e-09C22.1413 -0.000104311 25.2115 1.90926 26.726 4.69421H21.7346C20.8699 4.04093 19.785 3.65157 18.6083 3.65157C18.2681 3.65157 17.933 3.69186 17.6049 3.75484L17.5969 3.74167L17.3697 3.79696C16.661 3.96882 16.0189 4.27916 15.4705 4.69421H10.492ZM23.1712 6.38934C23.402 6.83359 23.5663 7.31579 23.6513 7.82368H27.6911C27.6428 7.33261 27.5509 6.85328 27.4191 6.38934H23.1712ZM27.6819 9.51881H23.6358C23.5409 10.028 23.3661 10.5103 23.1248 10.9532H27.3935C27.5309 10.4895 27.6283 10.0103 27.6819 9.51881Z" fill="#4FB5FF"/>
<path d="M42.2099 18.0256C37.3948 18.0256 33.6909 14.2971 33.6909 9.43258C33.6909 4.64221 37.4194 0.913621 42.2099 0.913621C46.9756 0.913621 50.6794 4.64221 50.6794 9.43258C50.6794 14.2971 46.9756 18.0256 42.2099 18.0256ZM42.2099 15.6304C45.4693 15.6304 48.0868 12.9142 48.0868 9.43258C48.0868 6.00034 45.494 3.30882 42.2099 3.30882C38.9258 3.30882 36.2836 6.00034 36.2836 9.43258C36.2836 12.9142 38.901 15.6304 42.2099 15.6304ZM54.8909 23.2852H52.4463V11.6549C52.4463 8.04985 55.2366 5.33357 58.8912 5.33357C62.5456 5.33357 65.3112 8.198 65.3112 11.6549C65.3112 15.3095 62.6691 18.0256 58.9899 18.0256C57.3602 18.0256 55.8786 17.3096 54.8909 16.2231V23.2852ZM58.8912 15.7293C61.1381 15.7293 62.8667 13.8773 62.8667 11.6797C62.8667 9.45723 61.1381 7.65472 58.8912 7.65472C56.6194 7.65472 54.8909 9.45723 54.8909 11.6797C54.8909 13.8773 56.6194 15.7293 58.8912 15.7293ZM72.3933 18.0256C68.887 18.0256 66.319 15.1613 66.319 11.6549C66.319 8.198 69.0846 5.33357 72.7638 5.33357C76.4183 5.33357 79.2085 8.04985 79.2085 11.6549V17.7293H76.8875V15.6058C75.9739 17.0873 74.3688 18.0256 72.3933 18.0256ZM72.7638 15.7045C75.0356 15.7045 76.764 13.8773 76.764 11.6797C76.764 9.45723 75.0356 7.63007 72.7638 7.63007C70.5168 7.63007 68.7635 9.45723 68.7635 11.6797C68.7635 13.8773 70.5168 15.7045 72.7638 15.7045ZM87.2785 18.001C83.7968 18.0504 80.9572 15.1613 80.9572 11.6549C80.9572 8.17322 83.7968 5.30892 87.2785 5.33357C89.5008 5.33357 91.5503 6.34606 92.6614 8.51894L90.6367 9.6548C89.9206 8.34614 88.7107 7.65472 87.2785 7.65472C85.1549 7.65472 83.4017 9.45723 83.4017 11.6549C83.4017 13.8773 85.1549 15.7045 87.2785 15.7045C88.7107 15.7045 89.9206 15.0132 90.6367 13.7044L92.6614 14.8156C91.5503 17.0133 89.5008 18.001 87.2785 18.001ZM95.8702 3.23473C94.9812 3.23473 94.2651 2.51864 94.2651 1.62971C94.2651 0.740776 94.9812 0 95.8702 0C96.7591 0 97.4505 0.740776 97.4505 1.62971C97.4505 2.51864 96.7591 3.23473 95.8702 3.23473ZM94.6603 5.62998H97.1048V17.7293H94.6603V5.62998ZM105.606 18.0504C102.593 18.0504 100.988 16.149 100.988 13.3835V7.75344H98.5931V5.62998H100.988V2.49396H103.433V5.62998H108.075V7.75344H103.433V13.3094C103.433 14.8897 104.371 15.828 105.828 15.828C106.618 15.828 107.482 15.5317 108.075 15.1119V17.359C107.458 17.7788 106.495 18.0504 105.606 18.0504ZM115.759 23.6062C113.191 23.6062 111.068 22.5197 109.981 20.3714L112.006 19.2603C112.698 20.569 114.056 21.3345 115.71 21.3345C118.278 21.3345 119.611 19.4085 119.611 16.791V15.7293C118.895 17.0873 117.611 17.9021 115.784 17.9021C112.08 17.9021 110.278 15.4576 110.278 11.9019V5.62998H112.698V11.7784C112.698 14.0501 113.883 15.6058 116.08 15.6058C118.204 15.6058 119.587 13.8279 119.587 11.6056V5.62998H122.056V16.7663C122.056 20.8159 119.685 23.6062 115.759 23.6062Z" fill="#F4F4F4"/>
</svg>
</div>
<span>Opacity</span>
</button>
<button type="button" id="zkPassTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 467 467" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M373.438 0H93.2759V93.2762H373.271V186.552H466.547V93.2762C466.547 41.6412 424.74 0 373.271 0H373.438Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.2762 93.2758H0V466.714H93.2762V279.995H373.438V186.719H93.2762V93.2758Z" fill="black"/>
</svg>
</div>
<span>zkPass</span>
</button>
<button type="button" id="vouchTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="16" viewBox="0 0 76 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.23561 15.9931L0 0H4.27311L8.48914 10.2813L12.7052 0H16.9551L9.48714 15.9931H7.23561ZM20.5779 15.3908C21.5483 15.7923 22.588 15.9931 23.6971 15.9931C24.7863 15.9931 25.8063 15.7923 26.7569 15.3908C27.7273 14.9691 28.5789 14.3968 29.3117 13.674C30.0642 12.9511 30.6386 12.1078 31.0346 11.144C31.4505 10.1601 31.6585 9.11599 31.6585 8.01163C31.6585 6.88719 31.6585 5.84307 31.0346 4.87926C30.6386 3.91546 30.0642 3.07213 29.3117 2.34927C28.5789 1.60634 27.7273 1.03408 26.7569 0.632497C25.8063 0.210832 24.7863 0 23.6971 0C22.588 0 21.5483 0.210832 20.5779 0.632497C19.6272 1.03408 18.7856 1.60634 18.0528 2.34927C17.32 3.07213 16.7457 3.91546 16.3298 4.87926C15.9139 5.84307 15.706 6.88719 15.706 8.01163C15.706 9.11599 15.9139 10.1601 16.3298 11.144C16.7457 12.1078 17.32 12.9511 18.0528 13.674C18.7856 14.3968 19.6272 14.9691 20.5779 15.3908ZM25.836 12.0174C25.2022 12.3789 24.4893 12.5596 23.6971 12.5596C22.9247 12.5596 22.2117 12.3789 21.5582 12.0174C20.9046 11.6359 20.3798 11.1038 19.9837 10.4211C19.6074 9.73845 19.4193 8.93528 19.4193 8.01163C19.4193 7.0679 19.6074 6.25469 19.9837 5.572C20.3798 4.8893 20.9046 4.36724 21.5582 4.00582C22.2117 3.62431 22.9247 3.43356 23.6971 3.43356C24.4893 3.43356 25.2022 3.62431 25.836 4.00582C26.4895 4.36724 27.0044 4.8893 27.3807 5.572C27.757 6.25469 27.9451 7.0679 27.9451 8.01163C27.9451 8.93528 27.757 9.73845 27.3807 10.4211C27.0044 11.1038 26.4895 11.6359 25.836 12.0174ZM52.6173 15.3606C53.5885 15.7823 54.6507 15.9931 55.8039 15.9931C56.9572 15.9931 57.898 15.8325 58.6264 15.5112C59.375 15.1699 59.9415 14.8285 60.3259 14.4872V11.1741C59.7999 11.5556 59.203 11.8869 58.5353 12.168C57.8677 12.4291 57.0482 12.5596 56.0771 12.5596C55.2071 12.5596 54.4281 12.3588 53.7402 11.9572C53.0725 11.5556 52.5465 11.0135 52.1621 10.3308C51.7776 9.64809 51.5854 8.88508 51.5854 8.04175C51.5854 7.17834 51.7776 6.40529 52.1621 5.72259C52.5667 5.0399 53.113 4.49776 53.8009 4.09617C54.4888 3.69459 55.2475 3.49379 56.0771 3.49379C57.0482 3.49379 57.8677 3.63435 58.5353 3.91546C59.203 4.17649 59.7999 4.49776 60.3259 4.87926V1.56618C59.9415 1.24491 59.375 0.903567 58.6264 0.54214C57.898 0.180713 56.9572 0 55.8039 0C54.6507 0 53.5885 0.220872 52.6173 0.662616C51.6461 1.08428 50.7963 1.67662 50.068 2.43963C49.3396 3.18256 48.7731 4.03593 48.3684 4.99974C47.984 5.96354 47.7918 6.97755 47.7918 8.04175C47.7918 9.10595 47.984 10.12 48.3684 11.0838C48.7731 12.0275 49.3396 12.8708 50.068 13.6137C50.7963 14.3567 51.6461 14.939 52.6173 15.3606ZM61.4645 0V15.9931H65.1411V10.2813H72.3234V15.9931H76V0H72.3234V6.8542L65.1411 6.8542V0H61.4645ZM39.728 16C38.3778 16 37.1731 15.8521 36.1138 15.3106C35.0752 14.7692 34.2443 13.9987 33.6212 12.9991C33.0188 11.9787 32.7629 10.7709 32.7629 9.37566L32.7632 0H36.4565V8.8134C36.4565 10.042 36.7681 10.9791 37.3912 11.6247C38.0143 12.2494 38.7933 12.5618 39.728 12.5618C40.6627 12.5618 41.4313 12.2494 42.0336 11.6247C42.6568 10.9791 42.9684 10.042 42.9684 8.8134V0H46.8128V9.37566C46.8128 10.7709 46.4268 11.9787 45.8037 12.9991C45.2013 13.9987 44.3704 14.7692 43.3111 15.3106C42.2517 15.8521 41.0574 16 39.728 16Z" fill="#135848"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M76 0H72.3309L76 8.1101V0ZM60.3224 1.56294V2.5614L60.3263 2.55628V4.87927L60.3224 4.87644C59.7973 4.49618 59.2017 4.17585 58.5357 3.91546C58.0025 3.69098 57.3726 3.55612 56.6458 3.51091V0.0353209C57.424 0.104025 58.0843 0.272966 58.6267 0.542143C59.3728 0.902351 59.938 1.24262 60.3224 1.56294ZM60.3224 11.1769V14.4907C59.938 14.8308 59.3728 15.171 58.6267 15.5112C58.0843 15.7505 57.424 15.9007 56.6458 15.9618V12.5437C57.3726 12.5017 58.0025 12.3765 58.5357 12.168C59.2017 11.8876 59.7973 11.5573 60.3224 11.1769ZM46.8129 7.33062V9.38481C46.8112 10.7762 46.4256 11.9809 45.8038 12.9991C45.6572 13.2424 45.497 13.4721 45.3233 13.6883C45.2985 13.6636 45.2738 13.6388 45.2493 13.6137C44.5209 12.8708 43.9544 12.0275 43.5498 11.0838C43.1654 10.12 42.9731 9.10595 42.9731 8.04175C42.9731 6.97755 43.1654 5.96354 43.5498 4.99974C43.9544 4.03593 44.5209 3.18256 45.2493 2.43963C45.7199 1.94672 46.2411 1.52503 46.8129 1.17457V7.33062ZM27.9446 1.24618C28.4389 1.55854 28.8947 1.92624 29.3119 2.34927C30.0645 3.07212 30.6388 3.91545 31.0349 4.87926C31.4508 5.84306 31.6587 6.88718 31.6587 8.01162C31.6587 9.11598 31.4508 10.1601 31.0349 11.144C30.6388 12.1078 30.0645 12.9511 29.3119 13.674C29.2702 13.7152 29.228 13.7558 29.1855 13.796C29.0502 13.6206 28.9225 13.4367 28.8026 13.2443C28.2002 12.2239 27.9444 11.0161 27.9444 9.62087L27.9444 8.12782C27.9451 8.0893 27.9454 8.05057 27.9454 8.01162C27.9454 7.97197 27.9451 7.93254 27.9444 7.89335L27.9446 1.24618ZM14.278 5.73281L16.9176 0.0800706C16.235 0.176731 15.5812 0.360858 14.9561 0.632454C14.0055 1.03404 13.1638 1.6063 12.4311 2.34923C11.6983 3.07208 11.124 3.91541 10.7081 4.87922C10.2922 5.84303 10.0842 6.88715 10.0842 8.01159C10.0842 9.11595 10.2922 10.1601 10.7081 11.144C10.8678 11.5142 11.051 11.8667 11.2575 12.2014L14.2021 5.89546C14.2263 5.84049 14.2516 5.78627 14.278 5.73281Z" fill="#1BCF96"/>
</svg>
</div>
</button>
<button type="button" id="bringIDTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<img src="https://www.bringid.org/android-chrome-192x192.png" alt="bringID Logo" style="width: 20px; height: 20px; margin-right: 8px;" />
<span>bringID</span>
</button>
</div>
</div>
<div class="results-container">
<h2>All Requests including Headers, Payloads, and Responses</h2>
<div id="results">Click "Analyze Network Requests" to start capturing network traffic...</div>
</div>
<!-- New Template Processing Container -->
<div class="results-container" style="margin-top: 20px;">
<h2>Create zkTLS Templates</h2>
<div class="instructions">
<strong>Convert results to templates:</strong> Paste your template below (Playwright script, JSON template, .env format, etc.). Templates should include request URLs and data extraction methods (like jsonPath). AI will populate the template with data from the captured requests above.
</div>
<!-- Template Buttons Row -->
<div class="input-group">
<label>Quick Templates:</label>
<div style="display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;">
<button type="button" id="plutoTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; display: flex; align-items: center; justify-content: center; color: black;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg viewBox="0 0 203 203" fill="none" xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: 100%;">
<path d="M0 0H53.9846V149.015H0V0Z" fill="url(#paint0_linear_134_4)"></path>
<path d="M149.017 0V53.9846H0.00140381V0H149.017Z" fill="url(#paint1_linear_134_4)"></path>
<path d="M203 203H149.015V53.9846H203V203Z" fill="url(#paint2_linear_134_4)"></path>
<path d="M53.9832 203V149.015H202.999V203H53.9832Z" fill="url(#paint3_linear_134_4)"></path>
<defs>
<linearGradient id="paint0_linear_134_4" x1="53.9834" y1="176.008" x2="202.999" y2="176.008" gradientUnits="userSpaceOnUse">
<stop stop-color="#2A9D8F"></stop>
<stop offset="1" stop-color="#264653"></stop>
</linearGradient>
<linearGradient id="paint1_linear_134_4" x1="53.9834" y1="176.008" x2="202.999" y2="176.008" gradientUnits="userSpaceOnUse">
<stop stop-color="#2A9D8F"></stop>
<stop offset="1" stop-color="#264653"></stop>
</linearGradient>
<linearGradient id="paint2_linear_134_4" x1="53.9834" y1="176.008" x2="202.999" y2="176.008" gradientUnits="userSpaceOnUse">
<stop stop-color="#2A9D8F"></stop>
<stop offset="1" stop-color="#264653"></stop>
</linearGradient>
<linearGradient id="paint3_linear_134_4" x1="53.9834" y1="176.008" x2="202.999" y2="176.008" gradientUnits="userSpaceOnUse">
<stop stop-color="#2A9D8F"></stop>
<stop offset="1" stop-color="#264653"></stop>
</linearGradient>
</defs>
</svg>
</div>
<span>Pluto</span>
</button>
<button type="button" id="reclaimTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="22" viewBox="0 0 19 22" fill="none">
<g id="Union">
<path d="M4.77167 0.151724C4.78997 0.0679293 4.87434 0 4.96011 0H9.15322C9.23899 0 9.29369 0.0679293 9.27539 0.151724L8.3807 4.24828C8.3624 4.33207 8.27803 4.4 8.19226 4.4H3.99915C3.91338 4.4 3.85868 4.33207 3.87698 4.24828L4.77167 0.151724Z" fill="black"/>
<path d="M10.2072 0.151724C10.2255 0.0679293 10.3099 0 10.3956 0H17.3842C18.4134 0 19.0697 0.815151 18.8501 1.82069L16.398 13.0483C16.3797 13.1321 16.2953 13.2 16.2096 13.2H12.2361C12.1503 13.2 12.0659 13.2679 12.0476 13.3517L11.153 17.4483C11.1347 17.5321 11.1893 17.6 11.2751 17.6H15.2486C15.3344 17.6 15.3891 17.6679 15.3708 17.7517L14.4761 21.8483C14.4578 21.9321 14.3734 22 14.2876 22H10.0945C10.0088 22 9.95406 21.9321 9.97236 21.8483L10.8671 17.7517C10.8854 17.6679 10.8307 17.6 10.7449 17.6H6.55177C6.466 17.6 6.41131 17.5321 6.42961 17.4483L7.3243 13.3517C7.3426 13.2679 7.42697 13.2 7.51274 13.2H11.7059C11.7916 13.2 11.876 13.1321 11.8943 13.0483L13.5843 5.31035C13.6941 4.80758 13.3659 4.4 12.8513 4.4H9.43466C9.34889 4.4 9.2942 4.33207 9.3125 4.24828L10.2072 0.151724Z" fill="black"/>
<path d="M3.80033 5.31035C3.71456 5.31035 3.63019 5.37827 3.61189 5.46207L0.0331248 21.8483C0.0148236 21.9321 0.0695187 22 0.155289 22H4.3484C4.43417 22 4.51854 21.9321 4.53684 21.8483L8.1156 5.46207C8.1339 5.37827 8.07921 5.31035 7.99344 5.31035H3.80033Z" fill="black"/>
</g>
</svg>
</div>
<span>Reclaim</span>
</button>
<button class="primus-button" id="primusTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black;">
<svg xmlns="http://www.w3.org/2000/svg" width="111" height="24" viewBox="0 0 111 24" fill="none">
<path d="M27.543 4.84301H28.6734C29.4097 4.84301 30.0071 5.44041 30.0071 6.17675V6.28285H30.0349C30.2382 5.13855 31.7602 4.56641 34.602 4.56641C36.2995 4.56641 37.5814 4.92131 38.4491 5.63239C39.3168 6.34347 39.75 7.25158 39.75 8.35924V13.8673C39.75 14.6604 39.6351 15.3526 39.4039 15.9437C39.1728 16.5347 38.8735 16.9958 38.5047 17.3279C38.1725 17.6424 37.7153 17.8912 37.1343 18.0756C36.5533 18.26 35.9761 18.38 35.404 18.4356C34.8874 18.4912 34.2597 18.5189 33.5221 18.5189C32.71 18.5189 31.9673 18.4217 31.2941 18.2285C30.6209 18.0352 30.2004 17.7536 30.0349 17.3848V22.6667C30.0349 23.403 29.4375 24.0004 28.7012 24.0004H27.543V4.84301ZM35.7766 16.6206C36.2843 16.4817 36.648 16.2291 36.8703 15.859C37.0914 15.4902 37.2025 14.9269 37.2025 14.1704V9.24336C37.2025 8.41355 37.0914 7.79468 36.8703 7.38925C36.6493 6.98382 36.2843 6.71101 35.7766 6.57334C35.2688 6.43441 34.5262 6.3662 33.5486 6.3662C32.571 6.3662 31.8423 6.43567 31.3623 6.57334C30.8824 6.71227 30.5414 6.98003 30.338 7.37535C30.1347 7.77194 30.0336 8.39461 30.0336 9.24336V14.1704C30.0336 14.9269 30.1397 15.4902 30.3519 15.859C30.5641 16.2278 30.919 16.4817 31.4179 16.6206C31.9155 16.7583 32.6354 16.8278 33.5764 16.8278C34.5173 16.8278 35.2688 16.7583 35.7766 16.6206Z" fill="#FD4C00"/>
<path d="M43.5403 4.84272H44.5596C45.2959 4.84272 45.8933 5.44013 45.8933 6.17646V7.03026C45.8933 6.60589 46.0777 6.20425 46.4465 5.82661C46.8153 5.44897 47.2864 5.14458 47.8586 4.91345C48.4307 4.68358 48.9928 4.56738 49.5472 4.56738H50.7648V6.03248C50.7648 6.40002 50.4667 6.69935 50.0979 6.69935H49.3805C48.1996 6.69935 47.3458 6.85218 46.8204 7.15657C46.295 7.46095 46.031 8.01036 46.031 8.80354V16.9083C46.031 17.6446 45.4336 18.2421 44.6972 18.2421H43.5391V4.84272H43.5403Z" fill="#FD4C00"/>
<path d="M55.2191 0H56.3773C56.7448 0 57.0442 0.298072 57.0442 0.666872V1.93494C57.0442 2.30248 56.7461 2.60181 56.3773 2.60181H55.2191C54.8516 2.60181 54.5522 2.30374 54.5522 1.93494V0.666872C54.5522 0.299335 54.8503 0 55.2191 0ZM54.5522 4.84367H55.7104C56.4468 4.84367 57.0442 5.44107 57.0442 6.17741V16.908C57.0442 17.6443 56.4468 18.2417 55.7104 18.2417H54.5522V4.84367Z" fill="#FD4C00"/>
<path d="M60.8378 4.84232H61.996C62.7323 4.84232 63.3297 5.43972 63.3297 6.17606V6.4754C63.5874 5.20228 65.0916 4.56572 67.8412 4.56572C70.0742 4.56572 71.4673 5.17449 72.0205 6.39204C72.1872 5.80221 72.6887 5.35005 73.5286 5.03556C74.3685 4.72233 75.3966 4.56445 76.6141 4.56445C78.275 4.56445 79.4471 4.87389 80.1291 5.49151C80.8111 6.11038 81.1534 7.08291 81.1534 8.4116V16.9041C81.1534 17.6405 80.556 18.2379 79.8196 18.2379H78.6615V8.57832C78.6615 8.22846 78.6337 7.94176 78.5781 7.72073C78.5225 7.4997 78.4126 7.27741 78.2459 7.05638C77.8771 6.59538 77.0562 6.36425 75.783 6.36425C74.8042 6.36425 74.0754 6.42866 73.5968 6.55749C73.1168 6.68632 72.7897 6.90861 72.6141 7.22184C72.4386 7.53633 72.3514 7.98723 72.3514 8.57832V16.9054C72.3514 17.6417 71.754 18.2391 71.0177 18.2391H69.8595V8.57958C69.8595 8.22973 69.8317 7.94302 69.7761 7.72199C69.7206 7.50097 69.6107 7.27867 69.444 7.05765C69.0752 6.59665 68.2631 6.36551 67.0076 6.36551C65.9921 6.36551 65.2268 6.42993 64.7102 6.55876C64.1936 6.68758 63.8336 6.90482 63.6303 7.20921C63.427 7.5136 63.3259 7.97081 63.3259 8.57958V16.9066C63.3259 17.643 62.7285 18.2404 61.9922 18.2404H60.834V4.84232H60.8378Z" fill="#FD4C00"/>
<path d="M85.9806 17.5882C85.2884 16.9705 84.9424 15.9968 84.9424 14.6681V4.8418H86.1006C86.8369 4.8418 87.4343 5.4392 87.4343 6.17554V14.5304C87.4343 14.8815 87.4659 15.1632 87.5316 15.3741C87.596 15.5863 87.7109 15.8035 87.8776 16.0245C88.2098 16.5045 89.0219 16.7445 90.314 16.7445C91.6793 16.7445 92.6392 16.6156 93.1924 16.3567C93.7279 16.0991 93.9944 15.628 93.9944 14.9447V4.8418H95.1526C95.8889 4.8418 96.4863 5.4392 96.4863 6.17554V16.9061C96.4863 17.6425 95.8889 18.2399 95.1526 18.2399H93.9944V16.6068C93.7544 17.8799 92.2881 18.5165 89.5941 18.5165C87.8776 18.5165 86.674 18.207 85.9818 17.5894L85.9806 17.5882Z" fill="#FD4C00"/>
<path d="M100.552 18.1842V17.0538C100.552 16.6459 100.917 16.3339 101.319 16.3958C103.081 16.6661 104.376 16.8 105.201 16.8C106.382 16.8 107.23 16.685 107.747 16.4539C108.263 16.224 108.522 15.7946 108.522 15.1669V13.8104C108.522 13.2383 108.329 12.8328 107.941 12.5929C107.554 12.3529 106.926 12.2329 106.06 12.2329H104.538C103.153 12.2329 102.097 11.9475 101.369 11.3753C100.64 10.8032 100.275 10.0012 100.275 8.96675V7.72142C100.275 5.61724 102.268 4.56641 106.253 4.56641C106.548 4.56641 107.904 4.64092 110.321 4.78743V5.81427C110.321 6.21843 109.963 6.5304 109.563 6.47482C108.246 6.29169 107.105 6.19949 106.142 6.19949C104.831 6.19949 103.936 6.32831 103.456 6.58723C102.976 6.84615 102.737 7.27936 102.737 7.88814V9.02233C102.737 9.92665 103.557 10.3788 105.199 10.3788H106.749C109.572 10.3788 110.984 11.4309 110.984 13.5338V14.6958C110.984 16.0801 110.504 17.0627 109.544 17.6437C108.584 18.2247 107.118 18.5152 105.144 18.5152C103.723 18.5152 102.21 18.4078 100.568 18.1867L100.552 18.1842Z" fill="#FD4C00"/>
<g clip-path="url(#clip0_10957_6518)">
<path d="M20.6567 0.129883H2.95095C1.32119 0.129883 0 1.45107 0 3.08084V20.7866C0 22.4163 1.32119 23.7375 2.95095 23.7375H20.6567C22.2864 23.7375 23.6076 22.4163 23.6076 20.7866V3.08084C23.6076 1.45107 22.2864 0.129883 20.6567 0.129883Z" fill="#FD4C00"/>
<path d="M18.8856 3.08105H4.72266V4.8511C4.72266 5.8284 5.51539 6.62114 6.4927 6.62114H17.1156V17.244H10.0341C9.0568 17.244 8.26407 18.0368 8.26407 19.0141V20.7841H18.887C19.8643 20.7841 20.657 19.9914 20.657 19.0141V4.85242C20.657 3.87512 19.8643 3.08238 18.887 3.08238L18.8856 3.08105Z" fill="white"/>
<path d="M9.42716 15.0594C9.87731 14.6093 10.366 14.5615 11.7708 14.5615C13.1757 14.5615 14.4266 13.373 14.4266 11.9057C14.4266 10.4384 13.2381 9.25 11.7708 9.25C10.3035 9.25 9.11511 10.4384 9.11511 11.9057C9.11511 13.8816 8.80041 14.1551 8.64505 14.3397C8.40471 14.6252 6.31996 16.6648 6.31996 16.6648C6.07962 16.8746 5.5405 17.2451 4.72254 17.2451H3.83686C3.3482 17.2451 2.95117 17.6408 2.95117 18.1307V19.9008C2.95117 20.3894 3.34687 20.7865 3.83686 20.7865H5.6069C6.09555 20.7865 6.49258 20.3908 6.49258 19.9008V19.0151C6.49258 17.9276 7.21361 17.2769 7.21361 17.2769L9.42716 15.0594Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_10957_6518">
<rect width="23.6076" height="23.6076" fill="white" transform="translate(0 0.129883)"/>
</clipPath>
</defs>
</svg>
</button>
<button type="button" id="zkp2pTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black;">
<img src="https://www.zkp2p.xyz/logo192.png" alt="ZKP2P Logo" style="width: 22px; height: auto; margin-right: 8px;" />
<span>zkP2P</span>
</button>
<button type="button" id="opacityTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="24" viewBox="0 0 30 24" fill="none">
<path d="M10.1332 3.7478C9.80341 3.68391 9.46418 3.65183 9.12185 3.65183C6.30448 3.65183 4.01265 5.88419 4.01265 8.62756C4.01265 11.3717 6.30448 13.6037 9.12185 13.6037C9.4614 13.6037 9.79615 13.5629 10.1249 13.5003L10.1326 13.514L10.3606 13.4586C12.0696 13.0438 13.3924 11.8229 13.9468 10.2711C14.1317 9.75365 14.2311 9.20052 14.2311 8.62756C14.2311 8.40211 14.2526 8.18018 14.2914 7.9632C14.3047 7.8894 14.3315 7.8199 14.3488 7.74766C14.383 7.60684 14.4149 7.46536 14.4646 7.33001C14.4955 7.24629 14.5389 7.16819 14.5754 7.08734C14.6283 6.96946 14.6781 6.85002 14.7423 6.73815C14.7893 6.65521 14.8484 6.57919 14.9018 6.49978C14.9707 6.3969 15.0366 6.29311 15.1149 6.19701C15.1777 6.11981 15.2505 6.05018 15.3192 5.97729C15.4023 5.88862 15.4836 5.79878 15.575 5.71729C15.6519 5.64896 15.7366 5.58859 15.8188 5.52534C15.9154 5.45063 16.011 5.37539 16.1145 5.30837C16.203 5.25125 16.298 5.20262 16.3912 5.15176C16.5006 5.09204 16.6093 5.03154 16.7247 4.98056C16.8234 4.93713 16.927 4.90154 17.0296 4.86463C17.1131 4.83451 17.1974 4.80713 17.2836 4.7817C17.912 5.96882 18.2436 7.29206 18.2436 8.62756C18.2436 10.0602 17.8633 11.4786 17.1436 12.7295C16.3484 14.1206 15.1646 15.2783 13.7193 16.0774C12.3336 16.848 10.7445 17.2549 9.12172 17.2549C4.09189 17.2549 0 13.3841 0 8.62756C0 3.87037 4.09189 0 9.12185 0C10.4548 0 11.7641 0.274638 12.9545 0.800689C12.8832 0.849144 12.8189 0.906035 12.7487 0.956523C12.6396 1.03499 12.534 1.11674 12.4276 1.19981C12.2055 1.37371 11.9917 1.55659 11.786 1.74814C11.6946 1.83317 11.6011 1.91563 11.5132 2.00448C11.2456 2.27403 10.9912 2.55523 10.7569 2.85409C10.7461 2.86816 10.7332 2.88035 10.7228 2.89403C10.5111 3.16748 10.314 3.45246 10.1332 3.7478Z" fill="#4FB5FF"/>
<path d="M13.9469 10.271C13.3924 11.8227 12.0696 13.0437 10.3607 13.4585L10.1326 13.5138L10.125 13.5003C10.2029 13.4856 10.2828 13.4767 10.36 13.4585C12.0696 13.0437 13.3924 11.8227 13.9469 10.271Z" fill="#4FB5FF"/>
<path d="M14.5745 7.0872C14.6273 6.96946 14.6771 6.85041 14.7414 6.73801C14.677 6.84989 14.6273 6.96933 14.5745 7.0872Z" fill="#4FB5FF"/>
<path d="M17.2829 4.78195C17.1968 4.80738 17.1123 4.83489 17.0288 4.86476C17.1127 4.83437 17.1911 4.79604 17.2777 4.76996C17.2798 4.77374 17.2809 4.77765 17.2829 4.78195Z" fill="#4FB5FF"/>
<path d="M15.8171 5.52492C15.9142 5.45021 16.0089 5.3751 16.1129 5.30807C16.0093 5.3751 15.9138 5.45021 15.8171 5.52492Z" fill="#4FB5FF"/>
<path d="M16.3911 5.15169C16.5009 5.09196 16.6093 5.03146 16.7248 4.98035C16.6094 5.03146 16.5006 5.09196 16.3911 5.15169Z" fill="#4FB5FF"/>
<path d="M15.1137 6.19702C15.0355 6.29312 14.9695 6.39705 14.9006 6.49993C14.9695 6.39705 15.0351 6.29312 15.1137 6.19702Z" fill="#4FB5FF"/>
<path d="M12.426 1.19928C12.5324 1.11621 12.638 1.03439 12.7471 0.955994C12.638 1.03447 12.5324 1.11691 12.426 1.19928Z" fill="#4FB5FF"/>
<path d="M11.512 2.00424C11.5999 1.91537 11.6934 1.833 11.7848 1.74789C11.6934 1.833 11.6 1.91584 11.512 2.00424Z" fill="#4FB5FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6083 13.6034C18.2667 13.6034 17.9275 13.5708 17.5969 13.5073C17.4166 13.8027 17.2198 14.0869 17.0089 14.3608C17.003 14.3686 16.9966 14.3758 16.9902 14.3828C16.9842 14.3896 16.9782 14.3962 16.9727 14.4033C16.7391 14.7021 16.4848 14.9838 16.2171 15.2529C16.1565 15.3139 16.0932 15.372 16.03 15.43C16.0024 15.4554 15.9746 15.4808 15.9471 15.5067C15.74 15.6994 15.5255 15.8842 15.3016 16.0591C15.1964 16.1416 15.0917 16.2227 14.9825 16.3009C14.9506 16.3236 14.9198 16.3478 14.889 16.3722C14.8524 16.4012 14.8156 16.4301 14.7768 16.4566C15.9686 16.9809 17.2776 17.2546 18.6084 17.2546C22.104 17.2546 25.1465 15.3853 26.6775 12.6483H21.6155C20.7711 13.2487 19.7315 13.6034 18.6083 13.6034ZM12.6942 10.9532C12.729 10.9041 12.7622 10.8541 12.7954 10.804C12.8061 10.7878 12.8168 10.7716 12.8276 10.7556C12.8449 10.73 12.8626 10.7049 12.8804 10.6798C12.9181 10.6265 12.9558 10.5732 12.9882 10.5165C13.0387 10.4284 13.0802 10.3351 13.1215 10.2421C13.1324 10.2176 13.1433 10.1931 13.1544 10.1687C13.1678 10.1382 13.1823 10.1083 13.1969 10.0785C13.2213 10.0281 13.2458 9.97793 13.2652 9.92512C13.3087 9.80659 13.3384 9.68324 13.3681 9.55975C13.3714 9.54606 13.3746 9.5325 13.378 9.51881H9.53588C9.58949 10.0043 9.68661 10.4845 9.82555 10.9532H12.6942ZM9.52661 7.82368H13.565C13.613 7.53525 13.6864 7.25438 13.7832 6.98355C13.8561 6.77935 13.9424 6.58089 14.0411 6.38934H9.79967C9.66634 6.8585 9.57479 7.33861 9.52661 7.82368ZM10.492 4.69421C10.5228 4.63762 10.5543 4.58142 10.5864 4.52548C11.1836 3.48297 11.9993 2.57196 12.9784 1.84528C13.3047 1.60308 13.6499 1.38136 14.0103 1.18191C15.395 0.408514 16.9841 4.27415e-09 18.6083 4.27415e-09C22.1413 -0.000104311 25.2115 1.90926 26.726 4.69421H21.7346C20.8699 4.04093 19.785 3.65157 18.6083 3.65157C18.2681 3.65157 17.933 3.69186 17.6049 3.75484L17.5969 3.74167L17.3697 3.79696C16.661 3.96882 16.0189 4.27916 15.4705 4.69421H10.492ZM23.1712 6.38934C23.402 6.83359 23.5663 7.31579 23.6513 7.82368H27.6911C27.6428 7.33261 27.5509 6.85328 27.4191 6.38934H23.1712ZM27.6819 9.51881H23.6358C23.5409 10.028 23.3661 10.5103 23.1248 10.9532H27.3935C27.5309 10.4895 27.6283 10.0103 27.6819 9.51881Z" fill="#4FB5FF"/>
<path d="M42.2099 18.0256C37.3948 18.0256 33.6909 14.2971 33.6909 9.43258C33.6909 4.64221 37.4194 0.913621 42.2099 0.913621C46.9756 0.913621 50.6794 4.64221 50.6794 9.43258C50.6794 14.2971 46.9756 18.0256 42.2099 18.0256ZM42.2099 15.6304C45.4693 15.6304 48.0868 12.9142 48.0868 9.43258C48.0868 6.00034 45.494 3.30882 42.2099 3.30882C38.9258 3.30882 36.2836 6.00034 36.2836 9.43258C36.2836 12.9142 38.901 15.6304 42.2099 15.6304ZM54.8909 23.2852H52.4463V11.6549C52.4463 8.04985 55.2366 5.33357 58.8912 5.33357C62.5456 5.33357 65.3112 8.198 65.3112 11.6549C65.3112 15.3095 62.6691 18.0256 58.9899 18.0256C57.3602 18.0256 55.8786 17.3096 54.8909 16.2231V23.2852ZM58.8912 15.7293C61.1381 15.7293 62.8667 13.8773 62.8667 11.6797C62.8667 9.45723 61.1381 7.65472 58.8912 7.65472C56.6194 7.65472 54.8909 9.45723 54.8909 11.6797C54.8909 13.8773 56.6194 15.7293 58.8912 15.7293ZM72.3933 18.0256C68.887 18.0256 66.319 15.1613 66.319 11.6549C66.319 8.198 69.0846 5.33357 72.7638 5.33357C76.4183 5.33357 79.2085 8.04985 79.2085 11.6549V17.7293H76.8875V15.6058C75.9739 17.0873 74.3688 18.0256 72.3933 18.0256ZM72.7638 15.7045C75.0356 15.7045 76.764 13.8773 76.764 11.6797C76.764 9.45723 75.0356 7.63007 72.7638 7.63007C70.5168 7.63007 68.7635 9.45723 68.7635 11.6797C68.7635 13.8773 70.5168 15.7045 72.7638 15.7045ZM87.2785 18.001C83.7968 18.0504 80.9572 15.1613 80.9572 11.6549C80.9572 8.17322 83.7968 5.30892 87.2785 5.33357C89.5008 5.33357 91.5503 6.34606 92.6614 8.51894L90.6367 9.6548C89.9206 8.34614 88.7107 7.65472 87.2785 7.65472C85.1549 7.65472 83.4017 9.45723 83.4017 11.6549C83.4017 13.8773 85.1549 15.7045 87.2785 15.7045C88.7107 15.7045 89.9206 15.0132 90.6367 13.7044L92.6614 14.8156C91.5503 17.0133 89.5008 18.001 87.2785 18.001ZM95.8702 3.23473C94.9812 3.23473 94.2651 2.51864 94.2651 1.62971C94.2651 0.740776 94.9812 0 95.8702 0C96.7591 0 97.4505 0.740776 97.4505 1.62971C97.4505 2.51864 96.7591 3.23473 95.8702 3.23473ZM94.6603 5.62998H97.1048V17.7293H94.6603V5.62998ZM105.606 18.0504C102.593 18.0504 100.988 16.149 100.988 13.3835V7.75344H98.5931V5.62998H100.988V2.49396H103.433V5.62998H108.075V7.75344H103.433V13.3094C103.433 14.8897 104.371 15.828 105.828 15.828C106.618 15.828 107.482 15.5317 108.075 15.1119V17.359C107.458 17.7788 106.495 18.0504 105.606 18.0504ZM115.759 23.6062C113.191 23.6062 111.068 22.5197 109.981 20.3714L112.006 19.2603C112.698 20.569 114.056 21.3345 115.71 21.3345C118.278 21.3345 119.611 19.4085 119.611 16.791V15.7293C118.895 17.0873 117.611 17.9021 115.784 17.9021C112.08 17.9021 110.278 15.4576 110.278 11.9019V5.62998H112.698V11.7784C112.698 14.0501 113.883 15.6058 116.08 15.6058C118.204 15.6058 119.587 13.8279 119.587 11.6056V5.62998H122.056V16.7663C122.056 20.8159 119.685 23.6062 115.759 23.6062Z" fill="#F4F4F4"/>
</svg>
</div>
<span>Opacity</span>
</button>
<button type="button" id="zkPassTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 467 467" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M373.438 0H93.2759V93.2762H373.271V186.552H466.547V93.2762C466.547 41.6412 424.74 0 373.271 0H373.438Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.2762 93.2758H0V466.714H93.2762V279.995H373.438V186.719H93.2762V93.2758Z" fill="black"/>
</svg>
</div>
<span>zkPass</span>
</button>
<button type="button" id="vouchTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<div style="height: 20px; width: auto; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="16" viewBox="0 0 76 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.23561 15.9931L0 0H4.27311L8.48914 10.2813L12.7052 0H16.9551L9.48714 15.9931H7.23561ZM20.5779 15.3908C21.5483 15.7923 22.588 15.9931 23.6971 15.9931C24.7863 15.9931 25.8063 15.7923 26.7569 15.3908C27.7273 14.9691 28.5789 14.3968 29.3117 13.674C30.0642 12.9511 30.6386 12.1078 31.0346 11.144C31.4505 10.1601 31.6585 9.11599 31.6585 8.01163C31.6585 6.88719 31.4505 5.84307 31.0346 4.87926C30.6386 3.91546 30.0642 3.07213 29.3117 2.34927C28.5789 1.60634 27.7273 1.03408 26.7569 0.632497C25.8063 0.210832 24.7863 0 23.6971 0C22.588 0 21.5483 0.210832 20.5779 0.632497C19.6272 1.03408 18.7856 1.60634 18.0528 2.34927C17.32 3.07213 16.7457 3.91546 16.3298 4.87926C15.9139 5.84307 15.706 6.88719 15.706 8.01163C15.706 9.11599 15.9139 10.1601 16.3298 11.144C16.7457 12.1078 17.32 12.9511 18.0528 13.674C18.7856 14.3968 19.6272 14.9691 20.5779 15.3908ZM25.836 12.0174C25.2022 12.3789 24.4893 12.5596 23.6971 12.5596C22.9247 12.5596 22.2117 12.3789 21.5582 12.0174C20.9046 11.6359 20.3798 11.1038 19.9837 10.4211C19.6074 9.73845 19.4193 8.93528 19.4193 8.01163C19.4193 7.0679 19.6074 6.25469 19.9837 5.572C20.3798 4.8893 20.9046 4.36724 21.5582 4.00582C22.2117 3.62431 22.9247 3.43356 23.6971 3.43356C24.4893 3.43356 25.2022 3.62431 25.836 4.00582C26.4895 4.36724 27.0044 4.8893 27.3807 5.572C27.757 6.25469 27.9451 7.0679 27.9451 8.01163C27.9451 8.93528 27.757 9.73845 27.3807 10.4211C27.0044 11.1038 26.4895 11.6359 25.836 12.0174ZM52.6173 15.3606C53.5885 15.7823 54.6507 15.9931 55.8039 15.9931C56.9572 15.9931 57.898 15.8325 58.6264 15.5112C59.375 15.1699 59.9415 14.8285 60.3259 14.4872V11.1741C59.7999 11.5556 59.203 11.8869 58.5353 12.168C57.8677 12.4291 57.0482 12.5596 56.0771 12.5596C55.2071 12.5596 54.4281 12.3588 53.7402 11.9572C53.0725 11.5556 52.5465 11.0135 52.1621 10.3308C51.7776 9.64809 51.5854 8.88508 51.5854 8.04175C51.5854 7.17834 51.7776 6.40529 52.1621 5.72259C52.5667 5.0399 53.113 4.49776 53.8009 4.09617C54.4888 3.69459 55.2475 3.49379 56.0771 3.49379C57.0482 3.49379 57.8677 3.63435 58.5353 3.91546C59.203 4.17649 59.7999 4.49776 60.3259 4.87926V1.56618C59.9415 1.24491 59.375 0.903567 58.6264 0.54214C57.898 0.180713 56.9572 0 55.8039 0C54.6507 0 53.5885 0.220872 52.6173 0.662616C51.6461 1.08428 50.7963 1.67662 50.068 2.43963C49.3396 3.18256 48.7731 4.03593 48.3684 4.99974C47.984 5.96354 47.7918 6.97755 47.7918 8.04175C47.7918 9.10595 47.984 10.12 48.3684 11.0838C48.7731 12.0275 49.3396 12.8708 50.068 13.6137C50.7963 14.3567 51.6461 14.939 52.6173 15.3606ZM61.4645 0V15.9931H65.1411V10.2813H72.3234V15.9931H76V0H72.3234V6.8542L65.1411 6.8542V0H61.4645ZM39.728 16C38.3778 16 37.1731 15.8521 36.1138 15.3106C35.0752 14.7692 34.2443 13.9987 33.6212 12.9991C33.0188 11.9787 32.7629 10.7709 32.7629 9.37566L32.7632 0H36.4565V8.8134C36.4565 10.042 36.7681 10.9791 37.3912 11.6247C38.0143 12.2494 38.7933 12.5618 39.728 12.5618C40.6627 12.5618 41.4313 12.2494 42.0336 11.6247C42.6568 10.9791 42.9684 10.042 42.9684 8.8134V0H46.8128V9.37566C46.8128 10.7709 46.4268 11.9787 45.8037 12.9991C45.2013 13.9987 44.3704 14.7692 43.3111 15.3106C42.2517 15.8521 41.0574 16 39.728 16Z" fill="#135848"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M76 0H72.3309L76 8.1101V0ZM60.3224 1.56294V2.5614L60.3263 2.55628V4.87927L60.3224 4.87644C59.7973 4.49618 59.2017 4.17585 58.5357 3.91546C58.0025 3.69098 57.3726 3.55612 56.6458 3.51091V0.0353209C57.424 0.104025 58.0843 0.272966 58.6267 0.542143C59.3728 0.902351 59.938 1.24262 60.3224 1.56294ZM60.3224 11.1769V14.4907C59.938 14.8308 59.3728 15.171 58.6267 15.5112C58.0843 15.7505 57.424 15.9007 56.6458 15.9618V12.5437C57.3726 12.5017 58.0025 12.3765 58.5357 12.168C59.2017 11.8876 59.7973 11.5573 60.3224 11.1769ZM46.8129 7.33062V9.38481C46.8112 10.7762 46.4256 11.9809 45.8038 12.9991C45.6572 13.2424 45.497 13.4721 45.3233 13.6883C45.2985 13.6636 45.2738 13.6388 45.2493 13.6137C44.5209 12.8708 43.9544 12.0275 43.5498 11.0838C43.1654 10.12 42.9731 9.10595 42.9731 8.04175C42.9731 6.97755 43.1654 5.96354 43.5498 4.99974C43.9544 4.03593 44.5209 3.18256 45.2493 2.43963C45.7199 1.94672 46.2411 1.52503 46.8129 1.17457V7.33062ZM27.9446 1.24618C28.4389 1.55854 28.8947 1.92624 29.3119 2.34927C30.0645 3.07212 30.6388 3.91545 31.0349 4.87926C31.4508 5.84306 31.6587 6.88718 31.6587 8.01162C31.6587 9.11598 31.4508 10.1601 31.0349 11.144C30.6388 12.1078 30.0645 12.9511 29.3119 13.674C29.2702 13.7152 29.228 13.7558 29.1855 13.796C29.0502 13.6206 28.9225 13.4367 28.8026 13.2443C28.2002 12.2239 27.9444 11.0161 27.9444 9.62087L27.9444 8.12782C27.9451 8.0893 27.9454 8.05057 27.9454 8.01162C27.9454 7.97197 27.9451 7.93254 27.9444 7.89335L27.9446 1.24618ZM14.278 5.73281L16.9176 0.0800706C16.235 0.176731 15.5812 0.360858 14.9561 0.632454C14.0055 1.03404 13.1638 1.6063 12.4311 2.34923C11.6983 3.07208 11.124 3.91541 10.7081 4.87922C10.2922 5.84303 10.0842 6.88715 10.0842 8.01159C10.0842 9.11595 10.2922 10.1601 10.7081 11.144C10.8678 11.5142 11.051 11.8667 11.2575 12.2014L14.2021 5.89546C14.2263 5.84049 14.2516 5.78627 14.278 5.73281Z" fill="#1BCF96"/>
</svg>
</div>
</button>
<button type="button" id="bringIDTemplate" style="flex: 1; min-width: 120px; padding: 10px 16px; border: 2px solid #3498db; background-color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; margin-top: 0; color: black; display: flex; align-items: center; justify-content: center;">
<img src="https://www.bringid.org/android-chrome-192x192.png" alt="bringID Logo" style="width: 20px; height: 20px; margin-right: 8px;" />
<span>bringID</span>
</button>
</div>
<div id="templateDescription" style="font-size: 12px; color: #666; margin-bottom: 15px;">
Choose a template above or paste your own below. Ensure templates include request URLs and data extraction methods (e.g., jsonPath, CSS selectors, regex patterns).
</div>
<div class="input-group">
<label for="templateInput">Template:</label>
<textarea id="templateInput" placeholder="Paste your template here...
Examples:
- Playwright script with request URLs and data extraction
- JSON template with jsonPath selectors
- .env format with variable definitions
- Any format that specifies URLs and data extraction methods"
style="width: 100%; min-height: 200px; padding: 12px; border: 2px solid #ddd; border-radius: 6px; font-size: 14px; font-family: 'Courier New', monospace; box-sizing: border-box; resize: vertical; transition: border-color 0.2s;">
</textarea>
<div style="font-size: 12px; color: #666; margin-top: 5px;">
Ensure your template includes request URLs and methods to extract data (e.g., jsonPath, CSS selectors, regex patterns).
</div>
</div>
<button id="generateTemplate" disabled>🤖 Generate from Template</button>
<div class="input-group" style="margin-top: 20px;">
<label for="templateOutput">Generated Output:</label>
<div id="templateOutput" style="white-space: pre-wrap; word-wrap: break-word; border: 2px solid #ddd; border-radius: 6px; padding: 20px; min-height: 200px; max-height: 600px; overflow-y: auto; background-color: #f8f9fa; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.5;">
Generated template output will appear here...
</div>
</div>
</div>
<script type="module" src="options.js"></script>
</body>
</html>