Hugging Face's logo

Spaces:
zbio
/
kyso
Running

App Files Community
zbio commited on
Commit
5d64074
·
verified ·
1 Parent(s): bfc4787

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +40 -999
  2. prompts.txt +1 -0
index.html CHANGED
@@ -51,6 +51,45 @@
51
  border-bottom: 2px solid #3b82f6;
52
  color: #3b82f6;
53
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  </style>
55
  </head>
56
  <body class="bg-gray-50 min-h-screen">
@@ -371,1003 +410,5 @@
371
 
372
  <div class="border border-gray-200 rounded-lg p-4 flex flex-col items-center">
373
  <div class="signature-preview mb-3 w-full h-24 flex items-center justify-center bg-gray-50 rounded">
374
- <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxMjAgNDAiPjxwYXRoIGQ9Ik0xMCAyMEMxMCAxMC40NzcxIDE3LjQ3NzEgMyAyNyAzSDkzQzEwMi41MjMgMyAxMTAgMTAuNDc3MSAxMTAgMjBWMzBDMTEwIDM5LjUyMjkgMTAyLjUyMyA0NyA9MyA0N0gyN0MxNy40NzcxIDQ3IDEwIDM5LjUyMjkgMTAgMzBWMjBaIiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNENUU4RkYiIHN0cm9rZS13aWR0aD0iMiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjMzg0MTVCIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZvbnQtd2VpZ2h0PSJib2xkIj5KLiBEb2U8L3RleHQ+PC9zdmc+" alt="Signature" class="h-12">
375
- </div>
376
- <div class="flex space-x-2">
377
- <span class="text-sm text-gray-600 font-medium">Initials</span>
378
- <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Use</button>
379
- </div>
380
- </div>
381
-
382
- <div class="border border-gray-200 rounded-lg p-4 flex flex-col items-center">
383
- <div class="signature-preview mb-3 w-full h-24 flex items-center justify-center bg-gray-50 rounded">
384
- <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxMjAgNDAiPjxwYXRoIGQ9Ik0xMCAyMEMxMCAxMC40NzcxIDE3LjQ3NzEgMyAyNyAzSDkzQzEwMi41MjMgMyAxMTAgMTAuNDc3MSAxMTAgMjBWMzBDMTEwIDM5LjUyMjkgMTAyLjUyMyA0NyA5MyA0N0gyN0MxNy40NzcxIDQ3IDEwIDM5LjUyMjkgMTAgMzBWMjBaIiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNENUU4RkYiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik0zMCAxNUw0NSAzMEw1NSAxNUw3NSAzMEw5MCAxNSIgc3Ryb2tlPSIjMzg0MTVCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==" alt="Signature" class="h-12">
385
- </div>
386
- <div class="flex space-x-2">
387
- <span class="text-sm text-gray-600 font-medium">Handwritten</span>
388
- <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Use</button>
389
- </div>
390
- </div>
391
- </div>
392
- </div>
393
- </div>
394
-
395
- <!-- Documents Tab -->
396
- <div id="documents" class="tab-content">
397
- <div class="bg-white rounded-xl shadow-sm p-6">
398
- <div class="flex items-center justify-between mb-6">
399
- <h2 class="text-lg font-semibold text-gray-800">My Documents</h2>
400
- <div class="flex space-x-3">
401
- <div class="relative">
402
- <input type="text" placeholder="Search documents..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
403
- <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
404
- </div>
405
- <button class="text-sm bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors" onclick="showUploadModal()">
406
- <i class="fas fa-upload"></i>
407
- <span>Upload</span>
408
- </button>
409
- </div>
410
- </div>
411
-
412
- <div class="mb-6">
413
- <div class="flex space-x-4 border-b border-gray-200">
414
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700 active" onclick="filterDocuments('all')">All Documents</button>
415
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterDocuments('pending')">Pending</button>
416
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterDocuments('signed')">Signed</button>
417
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterDocuments('draft')">Drafts</button>
418
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterDocuments('expired')">Expired</button>
419
- </div>
420
- </div>
421
-
422
- <div class="space-y-4" id="documentsList">
423
- <!-- Documents will be loaded here -->
424
- </div>
425
- </div>
426
- </div>
427
-
428
- <!-- Digital Certificates Tab -->
429
- <div id="certificates" class="tab-content">
430
- <div class="bg-white rounded-xl shadow-sm p-6">
431
- <div class="flex items-center justify-between mb-6">
432
- <h2 class="text-lg font-semibold text-gray-800">Digital Certificates</h2>
433
- <button class="text-sm bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors" onclick="showCertificateModal()">
434
- <i class="fas fa-plus"></i>
435
- <span>Add Certificate</span>
436
- </button>
437
- </div>
438
-
439
- <div class="mb-6">
440
- <div class="flex space-x-4 border-b border-gray-200">
441
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700 active" onclick="filterCertificates('all')">All Certificates</button>
442
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterCertificates('valid')">Valid</button>
443
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterCertificates('expired')">Expired</button>
444
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterCertificates('revoked')">Revoked</button>
445
- </div>
446
- </div>
447
-
448
- <div class="space-y-4" id="certificatesList">
449
- <!-- Certificates will be loaded here -->
450
- </div>
451
- </div>
452
- </div>
453
-
454
- <!-- Activity Log Tab -->
455
- <div id="activity" class="tab-content">
456
- <div class="bg-white rounded-xl shadow-sm p-6">
457
- <div class="flex items-center justify-between mb-6">
458
- <h2 class="text-lg font-semibold text-gray-800">Activity Log</h2>
459
- <div class="flex space-x-3">
460
- <div class="relative">
461
- <input type="text" placeholder="Search activities..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
462
- <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
463
- </div>
464
- <button class="text-sm bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors">
465
- <i class="fas fa-filter"></i>
466
- <span>Filter</span>
467
- </button>
468
- </div>
469
- </div>
470
-
471
- <div class="mb-6">
472
- <div class="flex space-x-4 border-b border-gray-200">
473
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700 active" onclick="filterActivities('all')">All Activities</button>
474
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterActivities('signing')">Signing</button>
475
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterActivities('upload')">Uploads</button>
476
- <button class="nav-tab pb-2 px-1 font-medium text-gray-500 hover:text-gray-700" onclick="filterActivities('system')">System</button>
477
- </div>
478
- </div>
479
-
480
- <div class="space-y-4" id="activityLog">
481
- <!-- Activities will be loaded here -->
482
- </div>
483
- </div>
484
- </div>
485
-
486
- <!-- Contacts Tab -->
487
- <div id="contacts" class="tab-content">
488
- <div class="bg-white rounded-xl shadow-sm p-6">
489
- <h2 class="text-lg font-semibold text-gray-800 mb-6">Contacts</h2>
490
- <p class="text-gray-500">Contacts feature will be implemented in the next version.</p>
491
- </div>
492
- </div>
493
-
494
- <!-- Settings Tab -->
495
- <div id="settings" class="tab-content">
496
- <div class="bg-white rounded-xl shadow-sm p-6">
497
- <h2 class="text-lg font-semibold text-gray-800 mb-6">Settings</h2>
498
- <p class="text-gray-500">Settings feature will be implemented in the next version.</p>
499
- </div>
500
- </div>
501
- </div>
502
- </div>
503
- </div>
504
-
505
- <!-- Signature Creation Modal -->
506
- <div id="signatureModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
507
- <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
508
- <div class="p-6 border-b border-gray-200 flex justify-between items-center">
509
- <h3 class="text-xl font-semibold text-gray-800">Create New Signature</h3>
510
- <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
511
- <i class="fas fa-times"></i>
512
- </button>
513
- </div>
514
-
515
- <div class="p-6">
516
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
517
- <div>
518
- <h4 class="font-medium text-gray-700 mb-3">Draw Signature</h4>
519
- <canvas id="signatureCanvas" class="signature-canvas w-full h-40 touch-none"></canvas>
520
- <div class="flex justify-between mt-3">
521
- <button id="clearCanvasBtn" class="text-sm text-red-600 hover:text-red-800 font-medium flex items-center space-x-1">
522
- <i class="fas fa-eraser"></i>
523
- <span>Clear</span>
524
- </button>
525
- <button id="saveCanvasBtn" class="text-sm text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1">
526
- <i class="fas fa-save"></i>
527
- <span>Save</span>
528
- </button>
529
- </div>
530
- </div>
531
-
532
- <div>
533
- <h4 class="font-medium text-gray-700 mb-3">Type Signature</h4>
534
- <div class="space-y-4">
535
- <div>
536
- <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
537
- <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="John Doe">
538
- </div>
539
- <div>
540
- <label class="block text-sm font-medium text-gray-700 mb-1">Signature Style</label>
541
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
542
- <option>Standard</option>
543
- <option>Formal</option>
544
- <option>Handwritten</option>
545
- <option>Stylized</option>
546
- </select>
547
- </div>
548
- <div>
549
- <label class="block text-sm font-medium text-gray-700 mb-1">Font</label>
550
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
551
- <option>Allura</option>
552
- <option>Brush Script MT</option>
553
- <option>Dancing Script</option>
554
- <option>Great Vibes</option>
555
- </select>
556
- </div>
557
- <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center justify-center space-x-2 transition-colors">
558
- <i class="fas fa-magic"></i>
559
- <span>Generate Signature</span>
560
- </button>
561
- </div>
562
- </div>
563
- </div>
564
-
565
- <div class="mt-8 pt-6 border-t border-gray-200">
566
- <h4 class="font-medium text-gray-700 mb-3">Preview</h4>
567
- <div class="bg-gray-50 rounded-lg p-6 flex justify-center">
568
- <div class="signature-preview w-64 h-24 flex items-center justify-center bg-white rounded border border-gray-200">
569
- <p class="text-gray-400 italic">Your signature will appear here</p>
570
- </div>
571
- </div>
572
-
573
- <div class="mt-6 flex justify-end space-x-3">
574
- <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" onclick="hideSignatureModal()">
575
- Cancel
576
- </button>
577
- <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
578
- Save Signature
579
- </button>
580
- </div>
581
- </div>
582
- </div>
583
- </div>
584
- </div>
585
-
586
- <!-- Upload Document Modal -->
587
- <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
588
- <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl">
589
- <div class="p-6 border-b border-gray-200 flex justify-between items-center">
590
- <h3 class="text-xl font-semibold text-gray-800">Upload Document</h3>
591
- <button class="text-gray-500 hover:text-gray-700" onclick="hideUploadModal()">
592
- <i class="fas fa-times"></i>
593
- </button>
594
- </div>
595
-
596
- <div class="p-6">
597
- <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
598
- <i class="fas fa-file-upload text-4xl text-gray-400 mb-3"></i>
599
- <p class="text-gray-500 mb-4">Drag and drop your document here or click to browse</p>
600
- <input type="file" id="documentUpload" class="hidden" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx">
601
- <button onclick="document.getElementById('documentUpload').click()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
602
- Select Document
603
- </button>
604
- <p class="text-xs text-gray-400 mt-3">Supported formats: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX</p>
605
- </div>
606
-
607
- <div class="mt-6">
608
- <h4 class="font-medium text-gray-700 mb-3">Document Details</h4>
609
- <div class="space-y-4">
610
- <div>
611
- <label class="block text-sm font-medium text-gray-700 mb-1">Document Name</label>
612
- <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g. Employment Contract">
613
- </div>
614
- <div>
615
- <label class="block text-sm font-medium text-gray-700 mb-1">Description (Optional)</label>
616
- <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="2" placeholder="Brief description of the document"></textarea>
617
- </div>
618
- </div>
619
- </div>
620
-
621
- <div class="mt-6 pt-6 border-t border-gray-200 flex justify-end space-x-3">
622
- <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" onclick="hideUploadModal()">
623
- Cancel
624
- </button>
625
- <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
626
- Upload & Continue
627
- </button>
628
- </div>
629
- </div>
630
- </div>
631
- </div>
632
-
633
- <!-- Certificate Management Modal -->
634
- <div id="certificateModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
635
- <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl">
636
- <div class="p-6 border-b border-gray-200 flex justify-between items-center">
637
- <h3 class="text-xl font-semibold text-gray-800">Add Digital Certificate</h3>
638
- <button class="text-gray-500 hover:text-gray-700" onclick="hideCertificateModal()">
639
- <i class="fas fa-times"></i>
640
- </button>
641
- </div>
642
-
643
- <div class="p-6">
644
- <div class="mb-6">
645
- <h4 class="font-medium text-gray-700 mb-3">Certificate Type</h4>
646
- <div class="grid grid-cols-3 gap-4">
647
- <button class="cert-type-btn border border-gray-200 rounded-lg p-4 text-center hover:border-blue-300 hover:bg-blue-50 transition-colors">
648
- <i class="fas fa-user-shield text-2xl text-blue-600 mb-2"></i>
649
- <p class="font-medium">Personal</p>
650
- <p class="text-xs text-gray-500 mt-1">For individual use</p>
651
- </button>
652
- <button class="cert-type-btn border border-gray-200 rounded-lg p-4 text-center hover:border-blue-300 hover:bg-blue-50 transition-colors">
653
- <i class="fas fa-building text-2xl text-blue-600 mb-2"></i>
654
- <p class="font-medium">Organization</p>
655
- <p class="text-xs text-gray-500 mt-1">For company use</p>
656
- </button>
657
- <button class="cert-type-btn border border-gray-200 rounded-lg p-4 text-center hover:border-blue-300 hover:bg-blue-50 transition-colors">
658
- <i class="fas fa-server text-2xl text-blue-600 mb-2"></i>
659
- <p class="font-medium">SSL/TLS</p>
660
- <p class="text-xs text-gray-500 mt-1">For website security</p>
661
- </button>
662
- </div>
663
- </div>
664
-
665
- <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6">
666
- <i class="fas fa-certificate text-4xl text-gray-400 mb-3"></i>
667
- <p class="text-gray-500 mb-4">Upload your certificate file or enter details manually</p>
668
- <input type="file" id="certificateUpload" class="hidden" accept=".p12,.pfx,.cer,.crt,.pem">
669
- <button onclick="document.getElementById('certificateUpload').click()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
670
- Upload Certificate
671
- </button>
672
- <p class="text-xs text-gray-400 mt-3">Supported formats: .p12, .pfx, .cer, .crt, .pem</p>
673
- </div>
674
-
675
- <div>
676
- <h4 class="font-medium text-gray-700 mb-3">Certificate Details</h4>
677
- <div class="space-y-4">
678
- <div>
679
- <label class="block text-sm font-medium text-gray-700 mb-1">Common Name (CN)</label>
680
- <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g. John Doe or example.com">
681
- </div>
682
- <div class="grid grid-cols-2 gap-4">
683
- <div>
684
- <label class="block text-sm font-medium text-gray-700 mb-1">Valid From</label>
685
- <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
686
- </div>
687
- <div>
688
- <label class="block text-sm font-medium text-gray-700 mb-1">Valid To</label>
689
- <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
690
- </div>
691
- </div>
692
- <div>
693
- <label class="block text-sm font-medium text-gray-700 mb-1">Issuer</label>
694
- <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g. DigiCert, GlobalSign">
695
- </div>
696
- </div>
697
- </div>
698
-
699
- <div class="mt-6 pt-6 border-t border-gray-200 flex justify-end space-x-3">
700
- <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" onclick="hideCertificateModal()">
701
- Cancel
702
- </button>
703
- <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
704
- Save Certificate
705
- </button>
706
- </div>
707
- </div>
708
- </div>
709
- </div>
710
-
711
- <script>
712
- // Sample data for documents
713
- const documentsData = [
714
- {
715
- id: 1,
716
- name: "Employment Contract.pdf",
717
- status: "signed",
718
- date: "2 hours ago",
719
- recipients: [
720
- {name: "John Smith", avatar: "https://randomuser.me/api/portraits/men/32.jpg"},
721
- {name: "You", avatar: "https://randomuser.me/api/portraits/women/44.jpg"}
722
- ],
723
- icon: "file-contract",
724
- iconColor: "blue"
725
- },
726
- {
727
- id: 2,
728
- name: "Q3 Financial Report.docx",
729
- status: "pending",
730
- date: "1 day ago",
731
- recipients: [
732
- {name: "Michael Brown", avatar: "https://randomuser.me/api/portraits/men/75.jpg"},
733
- {name: "Sarah Johnson", avatar: "https://randomuser.me/api/portraits/women/68.jpg"},
734
- {name: "+1 more", avatar: null}
735
- ],
736
- icon: "file-invoice-dollar",
737
- iconColor: "yellow"
738
- },
739
- {
740
- id: 3,
741
- name: "NDA Agreement.pdf",
742
- status: "draft",
743
- date: "3 days ago",
744
- recipients: [],
745
- icon: "file-medical",
746
- iconColor: "red"
747
- },
748
- {
749
- id: 4,
750
- name: "Service Agreement.pdf",
751
- status: "expired",
752
- date: "1 week ago",
753
- recipients: [
754
- {name: "David Wilson", avatar: "https://randomuser.me/api/portraits/men/42.jpg"}
755
- ],
756
- icon: "file-signature",
757
- iconColor: "gray"
758
- },
759
- {
760
- id: 5,
761
- name: "Project Proposal.pptx",
762
- status: "pending",
763
- date: "2 days ago",
764
- recipients: [
765
- {name: "Emily Davis", avatar: "https://randomuser.me/api/portraits/women/33.jpg"},
766
- {name: "Robert Taylor", avatar: "https://randomuser.me/api/portraits/men/22.jpg"}
767
- ],
768
- icon: "file-powerpoint",
769
- iconColor: "orange"
770
- },
771
- {
772
- id: 6,
773
- name: "Confidential Report.pdf",
774
- status: "signed",
775
- date: "5 days ago",
776
- recipients: [
777
- {name: "You", avatar: "https://randomuser.me/api/portraits/women/44.jpg"},
778
- {name: "Lisa Moore", avatar: "https://randomuser.me/api/portraits/women/29.jpg"}
779
- ],
780
- icon: "file-alt",
781
- iconColor: "purple"
782
- }
783
- ];
784
-
785
- // Sample data for certificates
786
- const certificatesData = [
787
- {
788
- id: 1,
789
- name: "Personal Signing Certificate",
790
- type: "personal",
791
- commonName: "John Doe",
792
- issuer: "DigiCert",
793
- validFrom: "2023-01-15",
794
- validTo: "2024-01-15",
795
- status: "valid"
796
- },
797
- {
798
- id: 2,
799
- name: "Company SSL Certificate",
800
- type: "organization",
801
- commonName: "example.com",
802
- issuer: "GlobalSign",
803
- validFrom: "2022-06-01",
804
- validTo: "2023-06-01",
805
- status: "expired"
806
- },
807
- {
808
- id: 3,
809
- name: "Developer Certificate",
810
- type: "personal",
811
- commonName: "John Doe (Developer)",
812
- issuer: "Sectigo",
813
- validFrom: "2023-03-10",
814
- validTo: "2026-03-10",
815
- status: "valid"
816
- },
817
- {
818
- id: 4,
819
- name: "Revoked Email Certificate",
820
- type: "personal",
821
- commonName: "john.doe@example.com",
822
- issuer: "Comodo",
823
- validFrom: "2021-09-01",
824
- validTo: "2022-09-01",
825
- status: "revoked"
826
- },
827
- {
828
- id: 5,
829
- name: "API SSL Certificate",
830
- type: "ssl",
831
- commonName: "api.example.com",
832
- issuer: "Let's Encrypt",
833
- validFrom: "2023-05-20",
834
- validTo: "2023-08-20",
835
- status: "valid"
836
- }
837
- ];
838
-
839
- // Sample data for activity log
840
- const activityLogData = [
841
- {
842
- id: 1,
843
- type: "signing",
844
- title: "Document signed",
845
- description: "Employment Contract.pdf was signed by all parties",
846
- date: "10 min ago",
847
- icon: "check-circle",
848
- iconColor: "green"
849
- },
850
- {
851
- id: 2,
852
- type: "upload",
853
- title: "Document uploaded",
854
- description: "Q3 Financial Report.docx was uploaded and sent for signing",
855
- date: "1 hour ago",
856
- icon: "file-upload",
857
- iconColor: "blue"
858
- },
859
- {
860
- id: 3,
861
- type: "signing",
862
- title: "Signature reminder sent",
863
- description: "Reminder sent to John Smith for NDA Agreement.pdf",
864
- date: "3 hours ago",
865
- icon: "exclamation-circle",
866
- iconColor: "yellow"
867
- },
868
- {
869
- id: 4,
870
- type: "system",
871
- title: "Certificate renewed",
872
- description: "Personal Signing Certificate was automatically renewed",
873
- date: "1 day ago",
874
- icon: "certificate",
875
- iconColor: "blue"
876
- },
877
- {
878
- id: 5,
879
- type: "signing",
880
- title: "Document viewed",
881
- description: "Confidential Report.pdf was viewed by Lisa Moore",
882
- date: "2 days ago",
883
- icon: "eye",
884
- iconColor: "purple"
885
- },
886
- {
887
- id: 6,
888
- type: "system",
889
- title: "Security alert",
890
- description: "Unusual login attempt detected from new device",
891
- date: "3 days ago",
892
- icon: "shield-alt",
893
- iconColor: "red"
894
- }
895
- ];
896
-
897
- // Initialize the application
898
- document.addEventListener('DOMContentLoaded', function() {
899
- loadDocuments('all');
900
- loadCertificates('all');
901
- loadActivities('all');
902
- setupSignatureCanvas();
903
- });
904
-
905
- // Tab navigation
906
- function showTab(tabId) {
907
- // Hide all tab contents
908
- document.querySelectorAll('.tab-content').forEach(tab => {
909
- tab.classList.remove('active');
910
- });
911
-
912
- // Show selected tab
913
- document.getElementById(tabId).classList.add('active');
914
-
915
- // Update active state in sidebar
916
- document.querySelectorAll('nav a').forEach(link => {
917
- link.classList.remove('bg-blue-50', 'text-blue-600');
918
- link.classList.add('text-gray-700', 'hover:bg-gray-100');
919
- });
920
-
921
- // Set active link
922
- const activeLink = document.querySelector(`nav a[onclick="showTab('${tabId}')"]`);
923
- if (activeLink) {
924
- activeLink.classList.remove('text-gray-700', 'hover:bg-gray-100');
925
- activeLink.classList.add('bg-blue-50', 'text-blue-600');
926
- }
927
- }
928
-
929
- // Document filtering and loading
930
- function filterDocuments(filter) {
931
- // Update active tab
932
- document.querySelectorAll('#documents .nav-tab').forEach(tab => {
933
- tab.classList.remove('active');
934
- });
935
- event.target.classList.add('active');
936
-
937
- loadDocuments(filter);
938
- }
939
-
940
- function loadDocuments(filter) {
941
- const container = document.getElementById('documentsList');
942
- container.innerHTML = '';
943
-
944
- let filteredDocs = documentsData;
945
-
946
- if (filter === 'pending') {
947
- filteredDocs = documentsData.filter(doc => doc.status === 'pending');
948
- } else if (filter === 'signed') {
949
- filteredDocs = documentsData.filter(doc => doc.status === 'signed');
950
- } else if (filter === 'draft') {
951
- filteredDocs = documentsData.filter(doc => doc.status === 'draft');
952
- } else if (filter === 'expired') {
953
- filteredDocs = documentsData.filter(doc => doc.status === 'expired');
954
- }
955
-
956
- filteredDocs.forEach(doc => {
957
- let statusClass, statusText;
958
-
959
- switch(doc.status) {
960
- case 'pending':
961
- statusClass = 'bg-yellow-100 text-yellow-800';
962
- statusText = 'Pending';
963
- break;
964
- case 'signed':
965
- statusClass = 'bg-green-100 text-green-800';
966
- statusText = 'Signed';
967
- break;
968
- case 'draft':
969
- statusClass = 'bg-blue-100 text-blue-800';
970
- statusText = 'Draft';
971
- break;
972
- case 'expired':
973
- statusClass = 'bg-gray-100 text-gray-800';
974
- statusText = 'Expired';
975
- break;
976
- }
977
-
978
- let recipientsHtml = '';
979
- if (doc.recipients.length > 0) {
980
- recipientsHtml += '<div class="flex -space-x-2">';
981
- doc.recipients.forEach(recipient => {
982
- if (recipient.avatar) {
983
- recipientsHtml += `<img src="${recipient.avatar}" alt="${recipient.name}" class="w-6 h-6 rounded-full border-2 border-white">`;
984
- } else {
985
- recipientsHtml += `<div class="w-6 h-6 rounded-full bg-gray-200 border-2 border-white flex items-center justify-center text-xs text-gray-500">${recipient.name}</div>`;
986
- }
987
- });
988
- recipientsHtml += '</div>';
989
- } else {
990
- recipientsHtml = '<div class="flex -space-x-2"><div class="w-6 h-6 rounded-full bg-gray-200 border-2 border-white flex items-center justify-center text-xs text-gray-500">0</div></div>';
991
- }
992
-
993
- let actionButton;
994
- if (doc.status === 'pending') {
995
- actionButton = `<button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1">
996
- <i class="fas fa-bell"></i>
997
- <span>Remind</span>
998
- </button>`;
999
- } else if (doc.status === 'signed') {
1000
- actionButton = `<button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1">
1001
- <i class="fas fa-download"></i>
1002
- <span>Download</span>
1003
- </button>`;
1004
- } else if (doc.status === 'draft') {
1005
- actionButton = `<button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1">
1006
- <i class="fas fa-paper-plane"></i>
1007
- <span>Send for Signing</span>
1008
- </button>`;
1009
- } else {
1010
- actionButton = `<button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1">
1011
- <i class="fas fa-redo"></i>
1012
- <span>Renew</span>
1013
- </button>`;
1014
- }
1015
-
1016
- const docHtml = `
1017
- <div class="document-card bg-gray-50 hover:bg-blue-50 rounded-lg p-4 transition-all duration-300 cursor-pointer">
1018
- <div class="flex items-start">
1019
- <div class="p-3 rounded-lg bg-${doc.iconColor}-100 text-${doc.iconColor}-600 mr-4">
1020
- <i class="fas fa-${doc.icon} text-xl"></i>
1021
- </div>
1022
- <div class="flex-1">
1023
- <div class="flex items-center justify-between">
1024
- <h3 class="font-medium text-gray-800">${doc.name}</h3>
1025
- <span class="text-xs ${statusClass} px-2 py-1 rounded-full">${statusText}</span>
1026
- </div>
1027
- <p class="text-sm text-gray-500 mt-1">${doc.status === 'pending' ? 'Waiting for ' + doc.recipients.length + ' signatures' : doc.status === 'signed' ? 'Signed by all parties' : doc.status === 'draft' ? 'Created by you' : 'Expired'} • ${doc.date}</p>
1028
- <div class="flex items-center mt-3 space-x-4">
1029
- ${recipientsHtml}
1030
- ${actionButton}
1031
- </div>
1032
- </div>
1033
- </div>
1034
- </div>
1035
- `;
1036
-
1037
- container.insertAdjacentHTML('beforeend', docHtml);
1038
- });
1039
- }
1040
-
1041
- // Certificate filtering and loading
1042
- function filterCertificates(filter) {
1043
- // Update active tab
1044
- document.querySelectorAll('#certificates .nav-tab').forEach(tab => {
1045
- tab.classList.remove('active');
1046
- });
1047
- event.target.classList.add('active');
1048
-
1049
- loadCertificates(filter);
1050
- }
1051
-
1052
- function loadCertificates(filter) {
1053
- const container = document.getElementById('certificatesList');
1054
- container.innerHTML = '';
1055
-
1056
- let filteredCerts = certificatesData;
1057
-
1058
- if (filter === 'valid') {
1059
- filteredCerts = certificatesData.filter(cert => cert.status === 'valid');
1060
- } else if (filter === 'expired') {
1061
- filteredCerts = certificatesData.filter(cert => cert.status === 'expired');
1062
- } else if (filter === 'revoked') {
1063
- filteredCerts = certificatesData.filter(cert => cert.status === 'revoked');
1064
- }
1065
-
1066
- filteredCerts.forEach(cert => {
1067
- let statusClass, statusText;
1068
-
1069
- switch(cert.status) {
1070
- case 'valid':
1071
- statusClass = 'bg-green-100 text-green-800';
1072
- statusText = 'Valid';
1073
- break;
1074
- case 'expired':
1075
- statusClass = 'bg-gray-100 text-gray-800';
1076
- statusText = 'Expired';
1077
- break;
1078
- case 'revoked':
1079
- statusClass = 'bg-red-100 text-red-800';
1080
- statusText = 'Revoked';
1081
- break;
1082
- }
1083
-
1084
- let typeIcon;
1085
- switch(cert.type) {
1086
- case 'personal':
1087
- typeIcon = 'user-shield';
1088
- break;
1089
- case 'organization':
1090
- typeIcon = 'building';
1091
- break;
1092
- case 'ssl':
1093
- typeIcon = 'server';
1094
- break;
1095
- }
1096
-
1097
- const certHtml = `
1098
- <div class="certificate-card p-4 rounded-lg border border-gray-200 hover:border-blue-200 transition-all duration-300">
1099
- <div class="flex items-start">
1100
- <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
1101
- <i class="fas fa-${typeIcon}"></i>
1102
- </div>
1103
- <div class="flex-1">
1104
- <div class="flex items-center justify-between">
1105
- <h3 class="font-medium text-gray-800">${cert.name}</h3>
1106
- <span class="text-xs ${statusClass} px-2 py-1 rounded-full">${statusText}</span>
1107
- </div>
1108
- <p class="text-sm text-gray-500 mt-1">CN: ${cert.commonName} • Issuer: ${cert.issuer}</p>
1109
- <div class="mt-3">
1110
- <p class="text-xs text-gray-500">Valid: ${formatDate(cert.validFrom)} to ${formatDate(cert.validTo)}</p>
1111
- <div class="flex items-center mt-2 space-x-3">
1112
- <button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1">
1113
- <i class="fas fa-eye"></i>
1114
- <span>View</span>
1115
- </button>
1116
- <button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1">
1117
- <i class="fas fa-download"></i>
1118
- <span>Download</span>
1119
- </button>
1120
- <button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1">
1121
- <i class="fas fa-trash-alt"></i>
1122
- <span>Revoke</span>
1123
- </button>
1124
- </div>
1125
- </div>
1126
- </div>
1127
- </div>
1128
- </div>
1129
- `;
1130
-
1131
- container.insertAdjacentHTML('beforeend', certHtml);
1132
- });
1133
- }
1134
-
1135
- // Activity filtering and loading
1136
- function filterActivities(filter) {
1137
- // Update active tab
1138
- document.querySelectorAll('#activity .nav-tab').forEach(tab => {
1139
- tab.classList.remove('active');
1140
- });
1141
- event.target.classList.add('active');
1142
-
1143
- loadActivities(filter);
1144
- }
1145
-
1146
- function loadActivities(filter) {
1147
- const container = document.getElementById('activityLog');
1148
- container.innerHTML = '';
1149
-
1150
- let filteredActivities = activityLogData;
1151
-
1152
- if (filter === 'signing') {
1153
- filteredActivities = activityLogData.filter(activity => activity.type === 'signing');
1154
- } else if (filter === 'upload') {
1155
- filteredActivities = activityLogData.filter(activity => activity.type === 'upload');
1156
- } else if (filter === 'system') {
1157
- filteredActivities = activityLogData.filter(activity => activity.type === 'system');
1158
- }
1159
-
1160
- filteredActivities.forEach(activity => {
1161
- let iconColorClass = `bg-${activity.iconColor}-100 text-${activity.iconColor}-600`;
1162
-
1163
- const activityHtml = `
1164
- <div class="log-entry p-4 rounded-lg border border-gray-200 hover:border-blue-200 transition-all duration-300">
1165
- <div class="flex items-start">
1166
- <div class="p-2 rounded-full ${iconColorClass} mr-4">
1167
- <i class="fas fa-${activity.icon}"></i>
1168
- </div>
1169
- <div class="flex-1">
1170
- <div class="flex items-center justify-between">
1171
- <h3 class="font-medium text-gray-800">${activity.title}</h3>
1172
- <span class="text-xs text-gray-500">${activity.date}</span>
1173
- </div>
1174
- <p class="text-sm text-gray-500 mt-1">${activity.description}</p>
1175
- </div>
1176
- </div>
1177
- </div>
1178
- `;
1179
-
1180
- container.insertAdjacentHTML('beforeend', activityHtml);
1181
- });
1182
- }
1183
-
1184
- // Helper function to format dates
1185
- function formatDate(dateString) {
1186
- const options = { year: 'numeric', month: 'short', day: 'numeric' };
1187
- return new Date(dateString).toLocaleDateString(undefined, options);
1188
- }
1189
-
1190
- // Signature Modal Functions
1191
- function showSignatureModal() {
1192
- document.getElementById('signatureModal').classList.remove('hidden');
1193
- }
1194
-
1195
- function hideSignatureModal() {
1196
- document.getElementById('signatureModal').classList.add('hidden');
1197
- }
1198
-
1199
- // Upload Modal Functions
1200
- function showUploadModal() {
1201
- document.getElementById('uploadModal').classList.remove('hidden');
1202
- }
1203
-
1204
- function hideUploadModal() {
1205
- document.getElementById('uploadModal').classList.add('hidden');
1206
- }
1207
-
1208
- // Certificate Modal Functions
1209
- function showCertificateModal() {
1210
- document.getElementById('certificateModal').classList.remove('hidden');
1211
- }
1212
-
1213
- function hideCertificateModal() {
1214
- document.getElementById('certificateModal').classList.add('hidden');
1215
- }
1216
-
1217
- // Signature Canvas Setup
1218
- function setupSignatureCanvas() {
1219
- const canvas = document.getElementById('signatureCanvas');
1220
- const ctx = canvas.getContext('2d');
1221
- let isDrawing = false;
1222
- let lastX = 0;
1223
- let lastY = 0;
1224
-
1225
- // Set canvas size
1226
- function resizeCanvas() {
1227
- const rect = canvas.getBoundingClientRect();
1228
- canvas.width = rect.width;
1229
- canvas.height = rect.height;
1230
- }
1231
-
1232
- window.addEventListener('resize', resizeCanvas);
1233
- resizeCanvas();
1234
-
1235
- // Drawing functions
1236
- canvas.addEventListener('mousedown', startDrawing);
1237
- canvas.addEventListener('touchstart', handleTouchStart);
1238
-
1239
- canvas.addEventListener('mousemove', draw);
1240
- canvas.addEventListener('touchmove', handleTouchMove);
1241
-
1242
- canvas.addEventListener('mouseup', stopDrawing);
1243
- canvas.addEventListener('touchend', stopDrawing);
1244
- canvas.addEventListener('mouseout', stopDrawing);
1245
-
1246
- function startDrawing(e) {
1247
- isDrawing = true;
1248
- [lastX, lastY] = getPosition(e);
1249
- }
1250
-
1251
- function handleTouchStart(e) {
1252
- e.preventDefault();
1253
- const touch = e.touches[0];
1254
- const mouseEvent = new MouseEvent('mousedown', {
1255
- clientX: touch.clientX,
1256
- clientY: touch.clientY
1257
- });
1258
- startDrawing(mouseEvent);
1259
- }
1260
-
1261
- function draw(e) {
1262
- if (!isDrawing) return;
1263
-
1264
- ctx.strokeStyle = '#38415B';
1265
- ctx.lineJoin = 'round';
1266
- ctx.lineCap = 'round';
1267
- ctx.lineWidth = 2;
1268
-
1269
- const [x, y] = getPosition(e);
1270
-
1271
- ctx.beginPath();
1272
- ctx.moveTo(lastX, lastY);
1273
- ctx.lineTo(x, y);
1274
- ctx.stroke();
1275
-
1276
- lastX = x;
1277
- lastY = y;
1278
- }
1279
-
1280
- function handleTouchMove(e) {
1281
- e.preventDefault();
1282
- const touch = e.touches[0];
1283
- const mouseEvent = new MouseEvent('mousemove', {
1284
- clientX: touch.clientX,
1285
- clientY: touch.clientY
1286
- });
1287
- draw(mouseEvent);
1288
- }
1289
-
1290
- function stopDrawing() {
1291
- isDrawing = false;
1292
- }
1293
-
1294
- function getPosition(e) {
1295
- const rect = canvas.getBoundingClientRect();
1296
- return [
1297
- e.clientX - rect.left,
1298
- e.clientY - rect.top
1299
- ];
1300
- }
1301
-
1302
- // Clear canvas
1303
- document.getElementById('clearCanvasBtn').addEventListener('click', () => {
1304
- ctx.clearRect(0, 0, canvas.width, canvas.height);
1305
- });
1306
-
1307
- // Save canvas (just for demo)
1308
- document.getElementById('saveCanvasBtn').addEventListener('click', () => {
1309
- const dataURL = canvas.toDataURL('image/png');
1310
- alert('Signature saved! (Demo)');
1311
- // In a real app, you would send this to your server or store it
1312
- });
1313
- }
1314
-
1315
- // Document card hover effect
1316
- document.addEventListener('mouseover', function(e) {
1317
- if (e.target.closest('.document-card')) {
1318
- const card = e.target.closest('.document-card');
1319
- const status = card.querySelector('span');
1320
-
1321
- if (status.textContent === 'Pending') {
1322
- status.classList.remove('bg-yellow-100', 'text-yellow-800');
1323
- status.classList.add('bg-yellow-200', 'text-yellow-900');
1324
- } else if (status.textContent === 'Signed') {
1325
- status.classList.remove('bg-green-100', 'text-green-800');
1326
- status.classList.add('bg-green-200', 'text-green-900');
1327
- } else if (status.textContent === 'Draft') {
1328
- status.classList.remove('bg-blue-100', 'text-blue-800');
1329
- status.classList.add('bg-blue-200', 'text-blue-900');
1330
- } else if (status.textContent === 'Expired') {
1331
- status.classList.remove('bg-gray-100', 'text-gray-800');
1332
- status.classList.add('bg-gray-200', 'text-gray-900');
1333
- }
1334
- }
1335
- });
1336
-
1337
- document.addEventListener('mouseout', function(e) {
1338
- if (e.target.closest('.document-card')) {
1339
- const card = e.target.closest('.document-card');
1340
- const status = card.querySelector('span');
1341
-
1342
- if (status.textContent === 'Pending') {
1343
- status.classList.remove('bg-yellow-200', 'text-yellow-900');
1344
- status.classList.add('bg-yellow-100', 'text-yellow-800');
1345
- } else if (status.textContent === 'Signed') {
1346
- status.classList.remove('bg-green-200', 'text-green-900');
1347
- status.classList.add('bg-green-100', 'text-green-800');
1348
- } else if (status.textContent === 'Draft') {
1349
- status.classList.remove('bg-blue-200', 'text-blue-900');
1350
- status.classList.add('bg-blue-100', 'text-blue-800');
1351
- } else if (status.textContent === 'Expired') {
1352
- status.classList.remove('bg-gray-200', 'text-gray-900');
1353
- status.classList.add('bg-gray-100', 'text-gray-800');
1354
- }
1355
- }
1356
- });
1357
-
1358
- // Certificate type selection
1359
- document.addEventListener('click', function(e) {
1360
- if (e.target.closest('.cert-type-btn')) {
1361
- document.querySelectorAll('.cert-type-btn').forEach(btn => {
1362
- btn.classList.remove('border-blue-300', 'bg-blue-50');
1363
- btn.classList.add('border-gray-200');
1364
- });
1365
-
1366
- const btn = e.target.closest('.cert-type-btn');
1367
- btn.classList.remove('border-gray-200');
1368
- btn.classList.add('border-blue-300', 'bg-blue-50');
1369
- }
1370
- });
1371
- </script>
1372
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zbio/kyso" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1373
  </html>
 
51
  border-bottom: 2px solid #3b82f6;
52
  color: #3b82f6;
53
  }
54
+
55
+ .document-viewer {
56
+ border: 1px solid #e2e8f0;
57
+ background-color: #f8fafc;
58
+ height: 500px;
59
+ overflow: auto;
60
+ }
61
+
62
+ .signature-field {
63
+ border: 2px dashed #3b82f6;
64
+ background-color: rgba(59, 130, 246, 0.1);
65
+ position: absolute;
66
+ cursor: move;
67
+ }
68
+
69
+ .signature-field.active {
70
+ border-color: #1d4ed8;
71
+ background-color: rgba(29, 78, 216, 0.2);
72
+ }
73
+
74
+ .signature-field .remove-btn {
75
+ display: none;
76
+ position: absolute;
77
+ top: -10px;
78
+ right: -10px;
79
+ width: 20px;
80
+ height: 20px;
81
+ border-radius: 50%;
82
+ background-color: #ef4444;
83
+ color: white;
84
+ font-size: 12px;
85
+ text-align: center;
86
+ line-height: 20px;
87
+ cursor: pointer;
88
+ }
89
+
90
+ .signature-field:hover .remove-btn {
91
+ display: block;
92
+ }
93
  </style>
94
  </head>
95
  <body class="bg-gray-50 min-h-screen">
 
410
 
411
  <div class="border border-gray-200 rounded-lg p-4 flex flex-col items-center">
412
  <div class="signature-preview mb-3 w-full h-24 flex items-center justify-center bg-gray-50 rounded">
413
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxMjAgNDAiPjxwYXRoIGQ9Ik0xMCAyMEMxMCAxMC40NzcxIDE3LjQ3NzEgMyAyNyAzSDkzQzEwMi41MjMgMyAxMTAgMTAuNDc3MSAxMTAgMjBWMzBDMTEwIDM5LjUyMjkgMTAyLjUyMyA0NyA9MyA0N0gyN0MxNy40Nz
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
414
  </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ chức năng ký chưa hoạt động