| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Digital Signature Manager</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .signature-canvas { |
| border: 2px dashed #94a3b8; |
| border-radius: 8px; |
| background-color: #f8fafc; |
| } |
| |
| .document-card:hover, .certificate-card:hover, .log-entry:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .signature-preview { |
| filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)); |
| } |
| |
| .progress-bar { |
| transition: width 0.5s ease-in-out; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| |
| .pulse-animation { |
| animation: pulse 2s infinite; |
| } |
| |
| .tab-content { |
| display: none; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| .nav-tab { |
| transition: all 0.3s ease; |
| } |
| |
| .nav-tab.active { |
| border-bottom: 2px solid #3b82f6; |
| color: #3b82f6; |
| } |
| |
| .document-viewer { |
| border: 1px solid #e2e8f0; |
| background-color: #f8fafc; |
| height: 500px; |
| overflow: auto; |
| } |
| |
| .signature-field { |
| border: 2px dashed #3b82f6; |
| background-color: rgba(59, 130, 246, 0.1); |
| position: absolute; |
| cursor: move; |
| } |
| |
| .signature-field.active { |
| border-color: #1d4ed8; |
| background-color: rgba(29, 78, 216, 0.2); |
| } |
| |
| .signature-field .remove-btn { |
| display: none; |
| position: absolute; |
| top: -10px; |
| right: -10px; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background-color: #ef4444; |
| color: white; |
| font-size: 12px; |
| text-align: center; |
| line-height: 20px; |
| cursor: pointer; |
| } |
| |
| .signature-field:hover .remove-btn { |
| display: block; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="flex justify-between items-center mb-8"> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-signature text-3xl text-blue-600"></i> |
| <h1 class="text-2xl font-bold text-gray-800">DigitalSign Pro</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors"> |
| <i class="fas fa-user-plus"></i> |
| <span>Invite Team</span> |
| </button> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer border-2 border-blue-500"> |
| <span class="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> |
| |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-sm p-6 h-fit sticky top-6"> |
| <nav> |
| <ul class="space-y-2"> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-blue-50 text-blue-600 font-medium" onclick="showTab('dashboard')"> |
| <i class="fas fa-home w-5"></i> |
| <span>Dashboard</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors" onclick="showTab('signatures')"> |
| <i class="fas fa-file-signature w-5"></i> |
| <span>My Signatures</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors" onclick="showTab('documents')"> |
| <i class="fas fa-file-upload w-5"></i> |
| <span>Documents</span> |
| <span class="ml-auto bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">12</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors" onclick="showTab('certificates')"> |
| <i class="fas fa-certificate w-5"></i> |
| <span>Digital Certificates</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors" onclick="showTab('activity')"> |
| <i class="fas fa-history w-5"></i> |
| <span>Activity Log</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors" onclick="showTab('contacts')"> |
| <i class="fas fa-users w-5"></i> |
| <span>Contacts</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors" onclick="showTab('settings')"> |
| <i class="fas fa-cog w-5"></i> |
| <span>Settings</span> |
| </a> |
| </li> |
| </ul> |
| </nav> |
| |
| <div class="mt-8 pt-6 border-t border-gray-200"> |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Quick Actions</h3> |
| <button id="newSignatureBtn" 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 mb-3"> |
| <i class="fas fa-plus"></i> |
| <span>New Signature</span> |
| </button> |
| <button class="w-full border border-blue-600 text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg flex items-center justify-center space-x-2 transition-colors" onclick="showUploadModal()"> |
| <i class="fas fa-upload"></i> |
| <span>Upload Document</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-3 space-y-6"> |
| |
| <div id="dashboard" class="tab-content active"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Pending Signatures</p> |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">5</h3> |
| </div> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| <i class="fas fa-clock text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
| <div class="h-full bg-blue-600 rounded-full" style="width: 60%"></div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2">3 more than last week</p> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Completed Today</p> |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">8</h3> |
| </div> |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| <i class="fas fa-check-circle text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
| <div class="h-full bg-green-500 rounded-full" style="width: 80%"></div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2">2.5x your daily average</p> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Team Activity</p> |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">24</h3> |
| </div> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| <i class="fas fa-users text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
| <div class="h-full bg-purple-500 rounded-full" style="width: 45%"></div> |
| </div> |
| <p class="text-xs text-gray-500 mt-2">12% increase</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-lg font-semibold text-gray-800">Recent Documents</h2> |
| <button class="text-sm text-blue-600 hover:text-blue-800 font-medium" onclick="showTab('documents')">View All</button> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="document-card bg-gray-50 hover:bg-blue-50 rounded-lg p-4 transition-all duration-300 cursor-pointer"> |
| <div class="flex items-start"> |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> |
| <i class="fas fa-file-contract text-xl"></i> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center justify-between"> |
| <h3 class="font-medium text-gray-800">Employment Contract.pdf</h3> |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Signed</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">Sent to John Smith • 2 hours ago</p> |
| <div class="flex items-center mt-3 space-x-4"> |
| <div class="flex -space-x-2"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-6 h-6 rounded-full border-2 border-white"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="You" class="w-6 h-6 rounded-full border-2 border-white"> |
| </div> |
| <button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1"> |
| <i class="fas fa-download"></i> |
| <span>Download</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="document-card bg-gray-50 hover:bg-blue-50 rounded-lg p-4 transition-all duration-300 cursor-pointer"> |
| <div class="flex items-start"> |
| <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600 mr-4"> |
| <i class="fas fa-file-invoice-dollar text-xl"></i> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center justify-between"> |
| <h3 class="font-medium text-gray-800">Q3 Financial Report.docx</h3> |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Pending</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">Waiting for 2 signatures • 1 day ago</p> |
| <div class="flex items-center mt-3 space-x-4"> |
| <div class="flex -space-x-2"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-6 h-6 rounded-full border-2 border-white"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-6 h-6 rounded-full border-2 border-white"> |
| <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">+1</div> |
| </div> |
| <button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1"> |
| <i class="fas fa-bell"></i> |
| <span>Remind</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="document-card bg-gray-50 hover:bg-blue-50 rounded-lg p-4 transition-all duration-300 cursor-pointer"> |
| <div class="flex items-start"> |
| <div class="p-3 rounded-lg bg-red-100 text-red-600 mr-4"> |
| <i class="fas fa-file-medical text-xl"></i> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center justify-between"> |
| <h3 class="font-medium text-gray-800">NDA Agreement.pdf</h3> |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Draft</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">Created by you • 3 days ago</p> |
| <div class="flex items-center mt-3 space-x-4"> |
| <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> |
| <button class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1"> |
| <i class="fas fa-paper-plane"></i> |
| <span>Send for Signing</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2> |
| <button class="text-sm text-blue-600 hover:text-blue-800 font-medium" onclick="showTab('activity')">View All</button> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="log-entry p-4 rounded-lg border border-gray-200 hover:border-blue-200 transition-all duration-300"> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-4"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center justify-between"> |
| <h3 class="font-medium text-gray-800">Document signed</h3> |
| <span class="text-xs text-gray-500">10 min ago</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">Employment Contract.pdf was signed by all parties</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="log-entry p-4 rounded-lg border border-gray-200 hover:border-blue-200 transition-all duration-300"> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-4"> |
| <i class="fas fa-file-upload"></i> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center justify-between"> |
| <h3 class="font-medium text-gray-800">Document uploaded</h3> |
| <span class="text-xs text-gray-500">1 hour ago</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">Q3 Financial Report.docx was uploaded and sent for signing</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="log-entry p-4 rounded-lg border border-gray-200 hover:border-blue-200 transition-all duration-300"> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-4"> |
| <i class="fas fa-exclamation-circle"></i> |
| </div> |
| <div class="flex-1"> |
| <div class="flex items-center justify-between"> |
| <h3 class="font-medium text-gray-800">Signature reminder sent</h3> |
| <span class="text-xs text-gray-500">3 hours ago</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">Reminder sent to John Smith for NDA Agreement.pdf</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="signatures" class="tab-content"> |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-lg font-semibold text-gray-800">My Signatures</h2> |
| <button id="newSignatureBtn2" 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"> |
| <i class="fas fa-plus"></i> |
| <span>New Signature</span> |
| </button> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> |
| <div class="border border-gray-200 rounded-lg p-4 flex flex-col items-center"> |
| <div class="signature-preview mb-3 w-full h-24 flex items-center justify-center bg-gray-50 rounded"> |
| <p class="text-gray-400 italic">No signature</p> |
| </div> |
| <button class="text-sm text-blue-600 hover:text-blue-800 font-medium" onclick="showSignatureModal()">Create New</button> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg p-4 flex flex-col items-center"> |
| <div class="signature-preview mb-3 w-full h-24 flex items-center justify-center bg-gray-50 rounded"> |
| <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxMjAgNDAiPjxwYXRoIGQ9Ik0xMCAyMEMxMCAxMC40NzcxIDE3LjQ3NzEgMyAyNyAzSDkzQzEwMi41MjMgMyAxMTAgMTAuNDc3MSAxMTAgMjBWMzBDMTEwIDM5LjUyMjkgMTAyLjUyMyA0NyA5MyA0N0gyN0MxNy40NzcxIDQ3IDEwIDM5LjUyMjkgMTAgMzBWMjBaIiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNENUU4RkYiIHN0cm9rZS13aWR0aD0iMiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjMzg0MTVCIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZvbnQtd2VpZ2h0PSJib2xkIj5Kb2huIERvZTwvdGV4dD48L3N2Zz4=" alt="Signature" class="h-12"> |
| </div> |
| <div class="flex space-x-2"> |
| <span class="text-sm text-gray-600 font-medium">Default</span> |
| <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Use</button> |
| </div> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg p-4 flex flex-col items-center"> |
| <div class="signature-preview mb-3 w-full h-24 flex items-center justify-center bg-gray-50 rounded"> |
| <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxMjAgNDAiPjxwYXRoIGQ9Ik0xMCAyMEMxMCAxMC40NzcxIDE3LjQ3NzEgMyAyNyAzSDkzQzEwMi41MjMgMyAxMTAgMTAuNDc3MSAxMTAgMjBWMzBDMTEwIDM5LjUyMjkgMTAyLjUyMyA0NyA9MyA0N0gyN0MxNy40Nz |
| </html> |
