-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbasic.html
More file actions
2731 lines (2480 loc) · 155 KB
/
basic.html
File metadata and controls
2731 lines (2480 loc) · 155 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
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Interactive Script Console</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.7.0/ethers.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
:root {
--bg-primary-light: #f4f1eb; /* Warm Beige */
--bg-secondary-light: #ffffff;
--text-main-light: #212529; /* Dark Gray for infographic text */
--text-accent-light: #4a5568; /* Slate 600 */
--border-accent-light: #e2e8f0; /* Slate 200 */
--bg-blue-50-light: #eff6ff;
--bg-green-50-light: #ecfdf5;
--bg-red-50-light: #fef2f2;
--bg-purple-50-light: #f5f3ff;
--bg-gray-100-light: #f7fafc;
--text-blue-500-light: #3b82f6;
--text-green-500-light: #22c55e;
--text-red-500-light: #ef4444;
--text-purple-500-light: #8b5cf6;
--bg-gray-200-light: #e5e7eb;
--bg-blue-500-light: #3b82f6;
--bg-red-100-light: #fee2e2;
--border-red-500-light: #ef4444;
--text-red-700-light: #b91c1c;
--bg-blue-100-light: #dbeafe;
--border-blue-500-light: #3b82f6;
--text-blue-700-light: #1d4ed8;
--bg-gray-800-light: #1f2937;
--text-white-light: #ffffff;
--text-gray-300-light: #d1d5db;
--text-gray-400-light: #9ca3af;
--text-gray-500-light: #6b7280;
--text-gray-700-light: #374151;
}
html.dark {
--bg-primary-dark: #1a202c; /* Dark background */
--bg-secondary-dark: #2d3748;
--text-main-dark: #e2e8f0; /* Light text */
--text-accent-dark: #a0aec0;
--border-accent-dark: #4a5568;
--bg-blue-50-dark: #2a698d;
--bg-green-50-dark: #2a8d6a;
--bg-red-50-dark: #8d2a2a;
--bg-purple-50-dark: #5a2a8d;
--bg-gray-100-dark: #4a5568;
--text-blue-500-dark: #60a5fa;
--text-green-500-dark: #48bb78;
--text-red-500-dark: #fc8181;
--text-purple-500-dark: #a78bfa;
--bg-gray-200-dark: #4a5568;
--bg-blue-500-dark: #60a5fa;
--bg-red-100-dark: #8d2a2a;
--border-red-500-dark: #fc8181;
--text-red-700-dark: #fc8181;
--bg-blue-100-dark: #2a698d;
--border-blue-500-dark: #60a5fa;
--text-blue-700-dark: #60a5fa;
--bg-gray-800-dark: #2d3748;
--text-white-dark: #e2e8f0;
--text-gray-300-dark: #a0aec0;
--text-gray-400-dark: #718096;
--text-gray-500-dark: #718096;
--text-gray-700-dark: #4a5568;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-primary-light);
color: var(--text-main-light);
}
html.dark body {
background-color: var(--bg-primary-dark);
color: var(--text-main-dark);
}
/* Dynamic CSS variables for light/dark mode */
.bg-primary { background-color: var(--bg-primary-light); }
html.dark .bg-primary { background-color: var(--bg-primary-dark); }
.bg-secondary { background-color: var(--bg-secondary-light); }
html.dark .bg-secondary { background-color: var(--bg-secondary-dark); }
.text-main { color: var(--text-main-light); }
html.dark .text-main { color: var(--text-main-dark); }
.text-accent { color: var(--text-accent-light); }
html.dark .text-accent { color: var(--text-accent-dark); }
.border-accent { border-color: var(--border-accent-light); }
html.dark .border-accent { border-color: var(--border-accent-dark); }
.btn-llm { background-color: #e0f2fe; color: #0284c7; } /* Light blue for LLM buttons */
html.dark .btn-llm { background-color: #2a698d; color: #e0f2fe; }
html.dark .btn-llm:hover { background-color: #215a7a; }
/* Status boxes */
.bg-blue-50 { background-color: var(--bg-blue-50-light); }
html.dark .bg-blue-50 { background-color: var(--bg-blue-50-dark); }
.bg-green-50 { background-color: var(--bg-green-50-light); }
html.dark .bg-green-50 { background-color: var(--bg-green-50-dark); }
.bg-red-50 { background-color: var(--bg-red-50-light); }
html.dark .bg-red-50 { background-color: var(--bg-red-50-dark); }
.bg-purple-50 { background-color: var(--bg-purple-50-light); }
html.dark .bg-purple-50 { background-color: var(--bg-purple-50-dark); }
.bg-gray-100 { background-color: var(--bg-gray-100-light); }
html.dark .bg-gray-100 { background-color: var(--bg-gray-100-dark); }
.text-blue-500 { color: var(--text-blue-500-light); }
html.dark .text-blue-500 { color: var(--text-blue-500-dark); }
.text-green-500 { color: var(--text-green-500-light); }
html.dark .text-green-500 { color: var(--text-green-500-dark); }
.text-red-500 { color: var(--text-red-500-light); }
html.dark .text-red-500 { color: var(--text-red-500-dark); }
.text-purple-500 { color: var(--text-purple-500-light); }
html.dark .text-purple-500 { color: var(--text-purple-500-dark); }
.bg-gray-200 { background-color: var(--bg-gray-200-light); }
html.dark .bg-gray-200 { background-color: var(--bg-gray-200-dark); }
.bg-blue-500 { background-color: var(--bg-blue-500-light); }
html.dark .bg-blue-500 { background-color: var(--bg-blue-500-dark); }
.bg-red-100 { background-color: var(--bg-red-100-light); }
html.dark .bg-red-100 { background-color: var(--bg-red-100-dark); }
.border-red-500 { border-color: var(--border-red-500-light); }
html.dark .border-red-500 { border-color: var(--border-red-500-dark); }
.text-red-700 { color: var(--text-red-700-light); }
html.dark .text-red-700 { color: var(--text-red-700-dark); }
.bg-blue-100 { background-color: var(--bg-blue-100-light); }
html.dark .bg-blue-100 { background-color: var(--bg-blue-100-dark); }
.border-blue-500 { border-color: var(--border-blue-500-light); }
html.dark .border-blue-500 { border-color: var(--border-blue-500-dark); }
.text-blue-700 { color: var(--text-blue-700-light); }
html.dark .text-blue-700 { color: var(--text-blue-700-dark); }
.bg-gray-800 { background-color: var(--bg-gray-800-light); }
html.dark .bg-gray-800 { background-color: var(--bg-gray-800-dark); }
.text-white { color: var(--text-white-light); }
html.dark .text-white { color: var(--text-white-dark); }
.text-gray-300 { color: var(--text-gray-300-light); }
html.dark .text-gray-300 { color: var(--text-gray-300-dark); }
.text-gray-400 { color: var(--text-gray-400-light); }
html.dark .text-gray-400 { color: var(--text-gray-400-dark); }
.text-gray-500 { color: var(--text-gray-500-light); }
html.dark .text-gray-500 { color: var(--text-gray-500-dark); }
.text-gray-700 { background-color: var(--text-gray-700-light); }
html.dark .text-gray-700 { background-color: var(--text-gray-700-dark); }
html.dark .hover\:bg-gray-600:hover { background-color: #4a5568; } /* Donation button hover */
.modal-content { background-color: var(--bg-secondary-light); }
html.dark .modal-content { background-color: var(--bg-secondary-dark); }
.close-button, .close-qr-button { color: #aaa; }
html.dark .close-button, html.dark .close-qr-button { color: var(--text-accent-dark); }
.close-button:hover,
.close-button:focus,
.close-qr-button:hover,
.close-qr-button:focus {
color: black; /* Default hover for light mode */
}
html.dark .close-button:hover, html.dark .close-qr-button:hover { color: var(--text-main-dark); }
.modal-loader { border-top-color: #3b82f6; }
html.dark .modal-loader { border-top-color: var(--text-blue-500-dark); }
.bg-white { background-color: #ffffff; } /* QR Code container background */
html.dark .bg-white { background-color: var(--bg-secondary-dark); }
.text-gray-800 { color: #2d3748; } /* Sidebar logo text */
html.dark .text-gray-800 { color: var(--text-main-dark); }
/* Console specific styles */
.btn-primary { background-color: #3b82f6; color: white; }
.btn-primary:hover { background-color: #2563eb; }
.btn-secondary { background-color: #6b7280; color: white; }
.btn-secondary:hover { background-color: #4b5563; }
.btn-danger { background-color: #ef4444; color: white; }
.btn-danger:hover { background-color: #dc2626; }
.btn-success { background-color: #22c55e; color: white; }
.btn-success:hover { background-color: #16a34a; }
/* Chart container for console charts */
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 40vh;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
#live-log {
font-family: 'Courier New', Courier, monospace;
white-space: pre-wrap;
word-break: break-all;
}
.log-success { color: #22c55e; }
.log-error { color: #ef4444; }
.log-info { color: #3b82f6; }
.log-warning { color: #f59e0b; }
.log-skipped { color: #a8a29e; }
.log-copy-btn {
background: none;
border: none;
color: #a8a29e; /* Gray */
cursor: pointer;
font-size: 0.8em;
margin-left: 5px;
padding: 0 3px;
vertical-align: middle;
transition: color 0.2s;
}
.log-copy-btn:hover {
color: #e2e8f0; /* Lighter gray on hover */
}
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip-container .tooltip-text {
visibility: hidden;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 125%; /* Position above the text */
left: 50%;
margin-left: -75px; /* Center the tooltip */
opacity: 0;
transition: opacity 0.3s;
width: 150px;
}
.tooltip-container .tooltip-text::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* Tooltip for mobile (show on click) */
@media (max-width: 767px) {
.tooltip-container:hover .tooltip-text {
visibility: hidden; /* Disable hover on small screens */
opacity: 0;
}
.tooltip-container.active .tooltip-text {
visibility: visible;
opacity: 1;
}
}
/* Modal Styles */
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
position: relative;
}
.close-button, .close-qr-button {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-button:hover,
.close-button:focus,
.close-qr-button:hover,
.close-qr-button:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal-loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3b82f6;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Disabled styles for fields */
.wallet-feature-control:disabled,
.wallet-feature-control[disabled] {
opacity: 0.6;
cursor: not-allowed;
background-color: #e2e8f0; /* Light gray */
}
html.dark .wallet-feature-control:disabled,
html.dark .wallet-feature-control[disabled] {
background-color: #4a5568; /* Darker gray for disabled in dark mode */
}
/* --- MODIFIED: Hover-expanding Sidebar Navigation --- */
#sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 80px; /* Collapsed width */
background-color: var(--bg-secondary-light);
color: var(--text-main-light);
padding-top: 1rem;
transition: width 0.3s ease-in-out;
z-index: 50;
box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Softer shadow */
overflow-x: hidden; /* Hide overflowing content */
border-right: 1px solid var(--border-accent-light); /* Add a subtle border */
}
html.dark #sidebar {
background-color: var(--bg-secondary-dark);
color: var(--text-main-dark);
border-right-color: var(--border-accent-dark);
}
#sidebar:hover {
width: 250px; /* Expanded width */
}
#sidebar .logo-container {
transition: justify-content 0.3s ease-in-out;
}
#sidebar:hover .logo-container {
justify-content: flex-start;
}
#sidebar .nav-link, #sidebar .submenu-toggle {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 1.5rem;
color: var(--text-accent-light);
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, justify-content 0.3s ease-in-out;
white-space: nowrap;
cursor: pointer;
}
html.dark #sidebar .nav-link, html.dark #sidebar .submenu-toggle {
color: var(--text-accent-dark);
}
#sidebar:hover .nav-link, #sidebar:hover .submenu-toggle {
justify-content: flex-start;
}
#sidebar .nav-link i, #sidebar .submenu-toggle i {
min-width: 24px;
text-align: center;
font-size: 1.25rem;
}
#sidebar .nav-text {
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
margin-left: 0;
transition: opacity 0.2s ease-in-out, max-width 0.3s ease-in-out, margin-left 0.3s ease-in-out;
transition-delay: 0.1s;
}
#sidebar:hover .nav-text {
opacity: 1;
max-width: 200px; /* Allow text to appear */
margin-left: 0.75rem;
}
/* Submenu styles */
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
background-color: #f8fafc; /* Slightly different bg for submenu */
}
html.dark .submenu {
background-color: #3a4454; /* Darker submenu bg */
}
.submenu.open {
max-height: 500px; /* Large enough to show all items */
}
.submenu .nav-link {
padding-left: 3.5rem; /* Indent submenu items */
font-weight: 500;
font-size: 0.9rem;
}
.submenu-toggle .fa-chevron-down {
margin-left: auto;
transition: transform 0.3s ease;
}
.submenu-toggle.active .fa-chevron-down {
transform: rotate(180deg);
}
header, main, footer {
margin-left: 80px;
transition: margin-left 0.3s ease-in-out;
}
#sidebar:hover ~ header,
#sidebar:hover ~ main,
#sidebar:hover ~ footer {
margin-left: 250px;
}
/* Toast Notification Styles */
#toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 10px;
}
.toast {
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
opacity: 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: translateY(-20px);
min-width: 250px;
max-width: 350px;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.toast.hide {
opacity: 0;
transform: translateY(-20px);
}
.toast.info { background-color: #3b82f6; } /* Blue */
.toast.success { background-color: #22c55e; } /* Green */
.toast.warning { background-color: #f59e0b; } /* Orange */
.toast.error { background-color: #ef4444; } /* Red */
/* Dropdown for download log */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 0.5rem;
overflow: hidden;
}
html.dark .dropdown-content {
background-color: #2d3748;
}
.dropdown-content button {
color: #2d3748;
padding: 12px 16px;
text-decoration: none;
display: block;
width: 100%;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-weight: 600;
}
html.dark .dropdown-content button {
color: #e2e8f0;
}
.dropdown-content button:hover {
background-color: #f1f1f1;
}
html.dark .dropdown-content button:hover {
background-color: #4a5568;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
</head>
<body class="bg-primary text-main">
<!-- Google AdSense Script (Recommended right after <body> tag) -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3062851685354753"
crossorigin="anonymous"></script>
<!-- Sidebar Navigation -->
<div id="sidebar">
<div class="p-4 mt-8 flex items-center justify-center logo-container">
<img src="https://d.cess.network/n1/1075188011.png" alt="FarmLabs Logo" class="h-10 w-10 rounded-full">
<h2 class="text-xl font-bold text-gray-800 nav-text">FarmLabs</h2>
</div>
<nav class="flex flex-col mt-4">
<a href="index.html" class="nav-link"><i class="fas fa-home"></i><span class="nav-text">Home</span></a>
<!-- Basic Console Submenu -->
<div>
<div id="basic-console-toggle" class="submenu-toggle active">
<i class="fas fa-terminal"></i>
<span class="nav-text">Basic Console</span>
<i class="fas fa-chevron-down text-xs nav-text"></i>
</div>
<div id="basic-console-submenu" class="submenu open">
<a href="#dashboard" class="nav-link"><i class="fas fa-tachometer-alt"></i><span class="nav-text">Dashboard</span></a>
<a href="#recipient-settings" class="nav-link"><i class="fas fa-users"></i><span class="nav-text">Recipients</span></a>
<a href="#config" class="nav-link"><i class="fas fa-cogs"></i><span class="nav-text">Configuration</span></a>
<a href="#log" class="nav-link"><i class="fas fa-stream"></i><span class="nav-text">Live Log</span></a>
</div>
</div>
<!-- Advance Console (now a direct link) -->
<a href="advance.html" class="nav-link"><i class="fas fa-tools"></i><span class="nav-text">Advance Console</span></a>
<hr class="border-gray-300 my-2 mx-4">
<a href="infographic.html" class="nav-link"><i class="fas fa-chart-pie"></i><span class="nav-text">Infographic</span></a>
<a href="doc.html" class="nav-link"><i class="fas fa-file-alt"></i><span class="nav-text">Documentation</span></a>
</nav>
</div>
<header class="bg-secondary shadow-md sticky top-0 z-20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<!-- Header Title -->
<h1 class="text-xl md:text-2xl font-bold text-main ml-4">Basic Interactive Script Console</h1>
</div>
<!-- Right-side icons -->
<div class="flex items-center space-x-4">
<a href="https://farm-labs.blogspot.com/" target="_blank" rel="noopener noreferrer" class="text-accent hover:text-blue-500" title="Farm Labs Blog">
<i class="fab fa-blogger text-xl"></i>
</a>
<a href="https://t.me/farm_lab" target="_blank" rel="noopener noreferrer" class="text-accent hover:text-blue-500" title="Farm Lab Telegram">
<i class="fab fa-telegram text-xl"></i>
</a>
<a href="https://github.com/CryptoExplor/farmlabs" target="_blank" rel="noopener noreferrer" class="text-accent hover:text-blue-500" title="Farm Labs GitHub">
<i class="fab fa-github text-xl"></i>
</a>
<button id="dark-toggle" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" title="Toggle Dark Mode">
<i class="fas fa-moon text-xl dark:text-yellow-300"></i>
</button>
</div>
</div>
</div>
</header>
<main class="p-4 sm:p-6 lg:p-8">
<div class="container mx-auto">
<h2 class="text-3xl md:text-4xl font-extrabold text-center mb-6" style="color: #0077B6;">Farm smarter, not harder — with FarmLabs.</h2>
<!-- Script Console Content -->
<div id="script-console-content">
<!-- Security Warning Removed for Basic Console as private keys are not handled directly -->
<!-- Dashboard Section -->
<section id="dashboard" class="mb-12">
<h2 class="text-3xl font-bold mb-2 text-main">Dashboard</h2>
<p class="text-accent mb-6">Connect your wallet, start, stop, and monitor the Blockchain Interaction process from here, with real-time updates on wallet balances and action distribution.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-secondary p-6 rounded-lg shadow-md flex flex-col items-center justify-center space-y-4">
<button id="connect-wallet-btn" class="w-full py-3 px-4 rounded-lg font-semibold transition-all duration-300 btn-success">🔗 Connect Wallet</button>
<div id="wallet-status-display" class="text-center text-sm font-medium text-main">
No wallet connected.
</div>
<!-- New: Connected Chain Details -->
<div id="connected-chain-details" class="hidden bg-gray-100 dark:bg-gray-700 p-3 rounded-lg w-full text-left text-xs space-y-1">
<p><strong class="text-main">Chain:</strong> <span id="chain-name">N/A</span> (<span id="chain-symbol">N/A</span>)</p>
<p><strong class="text-main">Chain ID:</strong> <span id="chain-id">N/A</span></p>
<p><strong class="text-main">RPC:</strong> <span id="chain-rpc" class="break-all">N/A</span></p>
<p><strong class="text-main">Explorer:</strong> <a id="chain-explorer" href="#" target="_blank" rel="noopener noreferrer" class="underline text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">N/A</a></p>
</div>
<button id="start-btn" class="w-full py-3 px-4 rounded-lg font-semibold transition-all duration-300 btn-primary wallet-feature-control" disabled>▶️ Start Interaction</button>
<button id="stop-btn" class="w-full py-3 px-4 rounded-lg font-semibold transition-all duration-300 btn-danger wallet-feature-control" disabled>⏹️ Stop Interaction</button>
<button id="manual-tx-btn" class="w-full py-3 px-4 rounded-lg font-semibold transition-all duration-300 btn-secondary wallet-feature-control" disabled>✍️ Manual Transaction</button>
<button id="clear-all-data-btn" class="w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 btn-secondary wallet-feature-control" disabled>🗑️ Clear All Data</button>
</div>
<div class="bg-secondary p-6 rounded-lg shadow-md col-span-1 md:col-span-2">
<h3 class="font-bold text-lg mb-4 text-main">Live Status</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-sm font-medium text-accent">Total Actions Performed</span>
<span id="progress-text" class="text-sm font-medium text-accent">0</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-4">
<div id="progress-bar" class="bg-blue-500 h-4 rounded-full transition-all duration-500" style="width: 0%"></div>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-center">
<div class="p-3 bg-blue-50 rounded-lg">
<div class="text-xs text-blue-500 font-bold uppercase">Status</div>
<div id="status-display" class="text-lg font-semibold text-main">Idle</div>
</div>
<div class="p-3 bg-green-50 rounded-lg">
<div class="text-xs text-green-500 font-bold uppercase">Successful Actions</div>
<div id="success-count" class="text-lg font-semibold text-main">0</div>
</div>
<div class="p-3 bg-red-50 rounded-lg">
<div class="text-xs text-red-500 font-bold uppercase">Failed Actions</div>
<div id="fail-count" class="text-lg font-semibold text-main">0</div>
</div>
<div class="p-3 bg-gray-100 rounded-lg">
<div class="text-xs text-gray-500 font-bold uppercase">Current Gas</div>
<div id="gas-display" class="text-lg font-semibold text-main">N/A</div>
</div>
</div>
<!-- New: Detailed Gas Information -->
<div id="gas-details" class="hidden bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-left text-xs space-y-1">
<p><strong class="text-main">Base Fee:</strong> <span id="gas-base-fee">N/A</span> Gwei</p>
<p><strong class="text-main">Priority Fee:</strong> <span id="gas-priority-fee">N/A</span> Gwei</p>
<p><strong class="text-main">Total Gas:</strong> <span id="gas-total">N/A</span> Gwei</p>
<p><strong class="text-main">Spiked:</strong> <span id="gas-spiked">N/A</span></p>
</div>
<!-- Last Human-like Spike Indicator (kept for consistency, though logic is simplified) -->
<div class="p-3 bg-purple-50 rounded-lg text-center">
<div class="text-xs text-purple-500 font-bold uppercase">Last Human-like Spike</div>
<div id="human-spike-display" class="text-lg font-semibold text-main">Never</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="bg-secondary p-6 rounded-lg shadow-md lg:col-span-2">
<h3 class="font-bold text-lg mb-4 text-main">Wallet Balance (ETH)</h3>
<p class="text-sm text-accent mb-4">This chart shows the current balance of your connected wallet, dynamically updating after transactions.</p>
<div class="chart-container">
<canvas id="wallet-balance-chart"></canvas>
</div>
</div>
<div class="bg-secondary p-6 rounded-lg shadow-md">
<h3 class="font-bold text-lg mb-4 text-main">Action Distribution</h3>
<p class="text-sm text-accent mb-4">Visualizes the types of actions performed (send, idle, balance check).</p>
<div class="chart-container">
<canvas id="action-dist-chart"></canvas>
</div>
</div>
</div>
</section>
<!-- Wallet Section REMOVED - Private keys are not handled directly -->
<!-- Recipient Section -->
<section id="recipient-settings" class="mb-12">
<h2 class="text-3xl font-bold mb-2 text-main">Recipient Settings</h2>
<p class="text-accent mb-6">Choose how the script will select destination addresses for transactions.</p>
<div class="bg-secondary p-8 rounded-lg shadow-md">
<div class="space-y-4">
<label class="flex items-center">
<input type="radio" name="recipient-mode" value="pool" class="form-radio h-5 w-5 text-blue-600 wallet-feature-control" checked disabled>
<span class="ml-3 text-main">Use Dynamically Scanned Pool</span>
</label>
<label class="flex items-center">
<input type="radio" name="recipient-mode" value="fixed" class="form-radio h-5 w-5 text-blue-600 wallet-feature-control" disabled>
<span class="ml-3 text-main">Use Fixed Address</span>
</label>
<label class="flex items-center">
<input type="radio" name="recipient-mode" value="list" class="form-radio h-5 w-5 text-blue-600 wallet-feature-control" disabled>
<span class="ml-3 text-main">Use Custom List of Addresses (one per line)</span>
</label>
<label class="flex items-center">
<input type="radio" name="recipient-mode" value="predefined" class="form-radio h-5 w-5 text-blue-600 wallet-feature-control" disabled>
<span class="ml-3 text-main">Use Predefined List of Addresses (from CSV)</span>
</label>
</div>
<div id="fixed-address-section" class="mt-4 hidden">
<label for="fixed-address" class="block font-medium mb-1 text-accent">Fixed Recipient Address</label>
<input type="text" id="fixed-address" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition font-mono text-sm wallet-feature-control" placeholder="0x..." disabled>
</div>
<div id="list-addresses-section" class="mt-4 hidden">
<label for="list-addresses" class="block font-medium mb-1 text-accent">Recipient Addresses (one per line)</label>
<textarea id="list-addresses" rows="5" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition font-mono text-sm wallet-feature-control" placeholder="0x... 0x... ... (one address per line)" disabled></textarea>
<button id="load-addresses-from-list-btn" class="mt-4 w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 btn-secondary wallet-feature-control" disabled>Load Addresses from List</button>
<p id="list-addresses-count" class="text-sm text-green-600 mt-2 font-medium"></p>
</div>
<div id="predefined-addresses-section" class="mt-4 hidden">
<p class="block font-medium mb-1 text-accent">Download list here:</p>
<ul class="list-disc pl-5 mb-4 text-sm text-blue-700">
<li><a href="https://d.cess.network/n1/812192221.csv" target="_blank" class="hover:underline">Link 1 (recipients1)</a></li>
<li><a href="https://d.cess.network/n1/1394676302.csv" target="_blank" class="hover:underline">Link 2 (recipients2)</a></li>
<li><a href="https://d.cess.network/n1/1338053122.csv" target="_blank" class="hover:underline">Link 3 (recipients3)</a></li>
<li><a href="https://d.cess.network/n1/738595260.csv" target="_blank" class="hover:underline">Link 4 (recipients4)</a></li>
<li><a href="https://d.cess.network/n1/1213534582.csv" target="_blank" class="hover:underline">Link 5 (recipients5)</a></li>
<li><a href="https://d.cess.network/n1/1210782270.csv" target="_blank" class="hover:underline">Link 6 (recipients6)</a></li>
<li><a href="https://d.cess.network/n1/1179652688.csv" target="_blank" class="hover:underline">Link 7 (recipients7)</a></li>
<li><a href="https://d.cess.network/n1/645402960.csv" target="_blank" class="hover:underline">Link 8 (recipients8)</a></li>
<li><a href="https://d.cess.network/n1/1006375340.csv" target="_blank" class="hover:underline">Link 9 (recipients9)</a></li>
<li><a href="https://d.cess.network/n1/1249120790.csv" target="_blank" class="hover:underline">Link 10 (recipients10)</a></li>
<li><a href="https://d.cess.network/n1/892015044.csv" target="_blank" class="hover:underline">Link 11 (recipients11)</a></li>
<li><a href="https://d.cess.network/n1/1174737402.csv" target="_blank" class="hover:underline">Link 12 (recipients12)</a></li>
</ul>
<label for="predefined-file-input" class="block font-medium mb-1 text-accent">Or Upload Your Own Predefined List (CSV)</label>
<input type="file" id="predefined-file-input" accept=".csv" class="w-full p-2 border border-accent rounded-md mb-2 wallet-feature-control" disabled>
<button id="load-predefined-file-btn" class="mt-2 w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 btn-secondary wallet-feature-control" disabled>Load Predefined Addresses from CSV</button>
<p id="predefined-addresses-info" class="text-sm text-gray-500 mt-1">No file loaded.</p>
<ul id="predefined-addresses-display" class="list-disc pl-5 space-y-1 text-sm text-accent max-h-32 overflow-y-auto mt-2">
<!-- Predefined addresses will be populated here -->
</ul>
<p id="predefined-addresses-count" class="text-sm text-green-600 mt-2 font-medium"></p>
</div>
</div>
</section>
<!-- Configuration Section -->
<section id="config" class="mb-12">
<h2 class="text-3xl font-bold mb-2 text-main">Configuration</h2>
<p class="text-accent mb-6">Define the parameters for the Blockchain Interaction, including network settings, amounts, delays, and gas thresholds.</p>
<!-- Main configuration grid container -->
<div class="bg-secondary p-8 rounded-lg shadow-md grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Individual configuration items -->
<div>
<label for="max-actions-per-session" class="block font-medium mb-1 text-accent">Max Actions Per Session
<span class="tooltip-container ml-1 text-gray-400 cursor-pointer">ℹ️<span class="tooltip-text">The maximum number of distinct actions (send, idle, balance check) the connected wallet will attempt in a session on a given blockchain network. The actual number of actions will be randomized up to this maximum.</span></span>
</label>
<input type="number" id="max-actions-per-session" value="3" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition wallet-feature-control" disabled>
<p class="text-sm text-gray-500 mt-1">Maximum actions the connected wallet will perform in its session on a given chain.</p>
</div>
<div>
<label for="gas-multiplier" class="block font-medium mb-1 text-accent">Max Gas Price Multiplier
<span class="tooltip-container ml-1 text-gray-400 cursor-pointer">ℹ️<span class="tooltip-text">If the current gas price on the network exceeds the average gas price by this multiplier, the script will temporarily pause activities for that wallet on that chain to avoid high fees.</span></span>
</label>
<input type="number" id="gas-multiplier" value="2" step="0.1" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition wallet-feature-control" disabled>
<p class="text-sm text-gray-500 mt-1">Skip wallet activity if current gas price exceeds average by this multiplier.</p>
</div>
<div>
<label for="block-lookback" class="block font-medium mb-1 text-accent">Blocks to Scan for Addresses
<span class="tooltip-container ml-1 text-gray-400 cursor-pointer">ℹ️<span class="tooltip-text">The number of recent blockchain blocks the script will scan to find and add new potential recipient addresses to its pool (for 'Dynamic Pool' mode). A higher number means more discovery but takes longer.</span></span>
</label>
<input type="number" id="block-lookback" value="100" min="10" max="1000" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:focus:border-blue-500 transition wallet-feature-control" disabled>
<p class="text-sm text-gray-500 mt-1">Number of recent blocks to scan for new recipient addresses (for 'Dynamic Pool' mode).</p>
</div>
<!-- Gemini API Key Input -->
<div>
<label for="gemini-api-key" class="block font-medium mb-1 text-accent">Gemini API Key
<span class="tooltip-container ml-1 text-gray-400 cursor-pointer">ℹ️<span class="tooltip-text">Enter your Google AI Studio API key to use the 'Explain' and 'Summarize' features.</span></span>
</label>
<input type="password" id="gemini-api-key" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition wallet-feature-control" placeholder="Enter your Gemini API Key" disabled>
<p class="text-sm text-gray-500 mt-1">This key is used for AI-powered explanations and summaries.</p>
</div>
<!-- Transaction Amount Range (spans 2 columns on medium screens and up) -->
<div class="md:col-span-2">
<label class="block font-medium mb-1 text-accent">Transaction Amount Range (ETH)
<span class="tooltip-container ml-1 text-gray-400 cursor-pointer">ℹ️<span class="tooltip-text">When a 'send' action is chosen, a random amount of ETH will be sent within this specified minimum and maximum range.</span></span>
</label>
<div class="flex items-center space-x-4">
<!-- Using flex-1 to ensure inputs share space equally within the flex container -->
<input type="number" id="min-amount" value="0.0001" step="0.0001" class="flex-1 p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition wallet-feature-control" disabled>
<span class="text-gray-500">to</span>
<input type="number" id="max-amount" value="0.0002" step="0.0001" class="flex-1 p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition wallet-feature-control" disabled>
</div>
<p class="text-sm text-gray-500 mt-1">A random ETH amount within this range will be sent for 'send' actions.</p>
<button id="explain-send-tx-btn" class="mt-4 py-2 px-4 rounded-lg font-semibold transition-all duration-300 btn-llm wallet-feature-control" disabled>✨ Explain Send Tx</button>
</div>
<!-- Delay Between Actions (spans 2 columns on medium screens and up) -->
<div class="md:col-span-2">
<label class="block font-medium mb-1 text-accent">Delay Between Actions (seconds)
<span class="tooltip-container ml-1 text-gray-400 cursor-pointer">ℹ️<span class="tooltip-text">After each action (send, idle, balance check), the script will pause for a random duration within this minimum and maximum second range.</span></span>
</label>
<div class="flex items-center space-x-4">
<!-- Using flex-1 to ensure inputs share space equally within the flex container -->
<input type="number" id="min-delay" value="10" class="flex-1 p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition wallet-feature-control" disabled>
<span class="text-gray-500">to</span>
<input type="number" id="max-delay" value="30" class="flex-1 p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition wallet-feature-control" disabled>
</div>
<p class="text-sm text-gray-500 mt-1">A random delay will be applied after each action.</p>
</div>
<!-- RPC Endpoints & Chain IDs (spans 2 columns on medium screens and up) -->
<div class="md:col-span-2">
<label class="block font-medium mb-1 text-accent">RPC Endpoints & Chain IDs (Format: URL,ChainID - one per line)
<span class="tooltip-container ml-1 text-gray-400 cursor-pointer">ℹ️<span class="tooltip-text">List the RPC URLs for the blockchain networks you want to interact with, followed by their corresponding Chain ID (e.g., 'https://mainnet.infura.io/v3/YOUR_ID,1'). The script will cycle through these networks.</span></span>
</label>
<textarea id="rpc-urls" rows="4" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition wallet-feature-control" disabled>https://mainnet.infura.io/v3/YOUR_PROJECT_ID,1
https://rpc.goerli.dev,5</textarea>
<p class="text-sm text-gray-500 mt-1">The script will cycle through these RPCs and chains.</p>
<button id="test-rpc-btn" class="mt-4 py-2 px-4 rounded-lg font-semibold transition-all duration-300 btn-secondary wallet-feature-control" disabled>⚡ Test RPC Connections</button>
</div>
<!-- Action Probability Matrix (spans 2 columns on medium screens and up, contains its own grid) -->
<div class="md:col-span-2">
<h3 class="font-bold text-lg mb-4 text-main">Action Probability Matrix (%)</h3>
<p class="text-sm text-accent mb-4">Define the percentage chance for each action type. Must sum to 100.</p>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div>
<label for="prob-send" class="block font-medium mb-1 text-accent">Send</label>
<input type="number" id="prob-send" value="60" min="0" max="100" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition prob-input wallet-feature-control" disabled>
</div>
<div>
<label for="prob-idle-action" class="block font-medium mb-1 text-accent">Idle Action</label>
<input type="number" id="prob-idle-action" value="20" min="0" max="100" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition prob-input wallet-feature-control" disabled>
</div>
<div>
<label for="prob-balance-check" class="block font-medium mb-1 text-accent">Balance Check</label>
<input type="number" id="prob-balance-check" value="20" min="0" max="100" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition prob-input wallet-feature-control" disabled>
</div>
</div>
<p id="prob-sum-warning" class="text-sm text-red-500 mt-2 hidden">Probabilities must sum to 100%!</p>
</div>
</div>
</section>
<!-- Live Log Section -->
<section id="log">
<h2 class="text-3xl font-bold mb-2 text-main">Live Log</h2>
<p class="text-accent mb-6">Real-time output from the Blockchain Interaction process will appear below. You can also download the complete log.</p>
<div class="bg-gray-800 text-white rounded-lg shadow-md p-4 h-96 overflow-y-auto mb-4">
<div id="live-log"></div>
</div>
<div class="flex flex-wrap gap-4">
<!-- Log Export Selector -->
<div class="dropdown">
<button id="download-log-btn" class="py-2 px-4 rounded-lg font-semibold transition-all duration-300 btn-success wallet-feature-control" disabled>
⬇️ Download Log</button>
<div class="dropdown-content">
<button id="download-csv-btn">Download CSV</button>
<button id="download-json-btn">Download JSON</button>
</div>
</div>
<button id="clear-log-btn" class="py-2 px-4 rounded-lg font-semibold transition-all duration-300 btn-secondary wallet-feature-control" disabled>🗑️ Clear Log</button>
<button id="summarize-log-btn" class="py-2 px-4 rounded-lg font-semibold transition-all duration-300 btn-llm wallet-feature-control" disabled>✨ Summarize Log</button>
</div>
</section>
</div><!-- End script-console-content -->
</div><!-- End container mx-auto -->
</main>
<!-- UPDATED FOOTER SECTION -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-6 text-center">
<h3 class="text-2xl font-bold mb-2">We Grow Together!</h3>
<p class="mb-4 max-w-2xl mx-auto text-gray-300">
Your contributions help keep this project alive, ad-free, and continuously improving. Consider supporting our development efforts by donating.
</p>
<div class="flex items-center justify-center bg-gray-700 p-3 rounded-lg max-w-md mx-auto mb-6 shadow-md">
<span id="donation-address" class="text-sm md:text-base text-white font-mono break-all mr-2">0x1C46ccEA4D62d3eEC4DCE3501aa96d0Ff5FcA954</span>
<button id="copy-address-btn" class="ml-auto p-2 rounded-md hover:bg-gray-600 transition-colors" title="Copy Address">
<svg id="copy-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
<svg id="check-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2 hidden text-green-400" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</svg>
</button>
<button id="show-qr-btn" class="ml-2 p-2 rounded-md hover:bg-gray-600 transition-colors" title="Show QR Code">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-qr-code" viewBox="0 0 16 16">
<path d="M2 2h2v2H2V2Z"/>
<path d="M6 0v6H0V0h6ZM5 1H1v4h4V1ZM4 12H2v2h2v-2Z"/>
<path d="M6 10v6H0v-6h6Zm-5 1v4h4v-4H1Zm11-9h2v2h-2V2Z"/>
<path d="M10 0v6h6V0h-6ZM5 1v4h-4V1h4ZM8 1V0h1v2H8v2H7V1h1Zm0 5V4h1v2H8ZM6 8V7h1V6h1v2h1V7h5v1h-4v1H7V8H6Zm0 0v1H2V8H1v1H0V7h3v1h3Zm10 1h-1V7h1v2Zm-1 0h-1v2h2v-1h-1V9Zm-4 0h2v1h-1v1h-1V9Zm2 3v-1h-1v1h-1v1H9v1h3v-2h1v-1h-3Zm-4-3v1h1v-2H7v1h2v1H7Z"/>
<path d="M7 12h1v3h4v1H7v-4Zm9 2v2h-3v-1h2v-1h1Z"/>
</svg>
</button>
</div>
<p class="text-sm text-gray-400 mt-8">
© 2025 FarmLabs. All rights reserved.
</p>
<div class="flex items-center justify-center mt-4 space-x-6">
<a href="https://farm-labs.blogspot.com/" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white" title="Blog">
<i class="fab fa-blogger fa-lg"></i>
</a>
<a href="https://t.me/farm_lab" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white" title="Telegram">
<i class="fab fa-telegram fa-lg"></i>
</a>
<a href="https://github.com/CryptoExplor/farmlabs" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white" title="GitHub">
<i class="fab fa-github fa-lg"></i>
</a>
</div>
</div>
</footer>
<!-- QR Code Modal -->
<div id="qr-code-modal" class="modal hidden">
<div class="modal-content text-main flex flex-col items-center text-center">
<span class="close-qr-button self-end">×</span>
<h3 class="text-xl font-bold mb-4">Donation Address</h3>
<div id="qr-code-container" class="p-4 bg-white inline-block rounded-lg shadow-inner"></div>
<p class="font-mono text-xs mt-4 break-all" id="qr-address-display"></p>
</div>
</div>
<!-- Gemini Explanation Modal -->
<div id="gemini-modal" class="modal hidden" style="z-index:120;">
<div class="modal-content text-main">
<span class="close-button">×</span>
<h3 id="modal-title" class="text-xl font-bold mb-4">Gemini Explanation</h3>
<div id="modal-prompt-display" class="bg-gray-100 dark:bg-gray-700 p-3 rounded-md mb-4 text-sm italic text-accent"></div>
<div id="modal-content" class="text-accent">
<div class="modal-loader"></div>
<p class="text-center mt-4">Generating explanation...</p>
</div>
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirmation-modal" class="modal hidden" style="z-index:110;">
<div class="modal-content text-main">
<span class="close-confirm-button">×</span>
<h3 class="text-xl font-bold mb-4">Confirm Action</h3>
<p id="confirm-message" class="mb-6 text-accent">Are you sure you want to proceed?</p>
<div class="flex justify-end space-x-4">
<button id="cancel-confirm-btn" class="py-2 px-4 rounded-lg font-semibold btn-secondary">Cancel</button>
<button id="confirm-action-btn" class="py-2 px-4 rounded-lg font-semibold btn-primary">Confirm</button>
</div>
</div>
</div>
<!-- Manual Transaction Modal -->
<div id="manual-tx-modal" class="modal hidden" style="z-index:100;">
<div class="modal-content text-main">
<span class="close-button" id="manual-tx-close-btn">×</span>
<h3 class="text-xl font-bold mb-4">Manual Transaction</h3>
<div class="mb-4">
<label for="manual-tx-recipient" class="block font-medium mb-1 text-accent">Recipient Address</label>
<input type="text" id="manual-tx-recipient" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition font-mono text-sm" placeholder="0x...">
</div>
<div class="mb-6">
<label for="manual-tx-amount" class="block font-medium mb-1 text-accent">Amount (ETH)</label>
<input type="number" id="manual-tx-amount" step="0.000001" class="w-full p-2 border border-accent rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition font-mono text-sm" value="0.0001">
</div>
<div class="flex justify-end space-x-4">
<button id="manual-tx-send-btn" class="py-2 px-4 rounded-lg font-semibold btn-primary">Send Transaction</button>
</div>
</div>
</div>
<!-- Toast Notification Container -->
<div id="toast-container"></div>
<script>