rstmcanada/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Upload Document - SignaSphere AI</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');13 14 * {15 font-family: 'Inter', sans-serif;16 }17 18 .upload-area {19 border: 2px dashed #d1d5db;20 border-radius: 0.75rem;21 transition: all 0.3s ease;22 }23 24 .upload-area:hover, .upload-area.drag-over {25 border-color: #3b82f6;26 background-color: #eff6ff;27 }28 29 .file-item {30 transition: all 0.2s ease;31 }32 33 .file-item:hover {34 background-color: #f9fafb;35 }36 </style>37</head>38<body class="bg-gray-50 min-h-screen">39 <!-- Navigation -->40 <nav class="bg-white shadow-sm">41 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">42 <div class="flex justify-between h-16">43 <div class="flex items-center">44 <a href="/dashboard.html" class="flex items-center">45 <i data-feather="arrow-left" class="h-5 w-5 text-gray-600 mr-2"></i>46 <span class="text-gray-900 font-medium">Back to Dashboard</span>47 </a>48 </div>49 <div class="flex items-center">50 <span class="text-lg font-bold text-primary-600">SignaSphere AI</span>51 </div>52 </div>53 </div>54 </nav>55 56 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">57 <div class="text-center mb-8">58 <h1 class="text-3xl font-bold text-gray-900 mb-4">Upload Document</h1>59 <p class="text-lg text-gray-600">Upload your document to get started with electronic signatures</p>60 </div>61 62 <!-- Upload Area -->63 <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 mb-8">64 <div id="upload-area" class="upload-area p-12 text-center cursor-pointer">65 <i data-feather="upload-cloud" class="h-16 w-16 text-gray-400 mx-auto mb-4"></i>66 <h3 class="text-lg font-semibold text-gray-900 mb-2">Drag & drop your file here</h3>67 <p class="text-gray-600 mb-4">or click to browse your files</p>68 <p class="text-sm text-gray-500">Supported formats: PDF, DOCX, DOC, PNG, JPG (Max 25MB)</p>69 <input type="file" id="file-input" class="hidden" accept=".pdf,.docx,.doc,.png,.jpg,.jpeg">70 <button onclick="document.getElementById('file-input').click()" 71 class="bg-primary-600 text-white px-6 py-2 rounded-lg hover:bg-primary-700 transition duration-200 mt-4">72 Browse Files73 </button>74 </div>75 76 <!-- Uploaded Files -->77 <div id="uploaded-files" class="mt-8 space-y-4 hidden">78 <h4 class="font-semibold text-gray-900 mb-4">Uploaded Files</h4>79 <div class="file-item bg-gray-50 p-4 rounded-lg flex items-center justify-between">80 <div class="flex items-center">81 <i data-feather="file-text" class="h-6 w-6 text-blue-600 mr-3"></i>82 <div>83 <p class="font-medium text-gray-900">contract.pdf</p>84 <p class="text-sm text-gray-600">2.4 MB • Uploaded</p>85 </div>86 </div>87 <button class="text-red-600 hover:text-red-700">88 <i data-feather="trash-2" class="h-4 w-4"></i>89 </button>90 </div>91 </div>92 </div>93 94 <!-- Document Details -->95 <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">96 <h3 class="text-lg font-semibold text-gray-900 mb-6">Document Details</h3>97 98 <form class="space-y-6">99 <div>100 <label for="document-name" class="block text-sm font-medium text-gray-700 mb-2">Document Name</label>101 <input type="text" id="document-name" 102 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"103 placeholder="e.g., Employment Contract - John Smith">104 </div>105 106 <div>107 <label for="document-description" class="block text-sm font-medium text-gray-700 mb-2">Description (Optional)</label>108 <textarea id="document-description" rows="3"109 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"110 placeholder="Brief description of the document"></textarea>111 </div>112 113 <div>114 <label class="block text-sm font-medium text-gray-700 mb-4">Signing Options</label>115 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">116 <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">117 <input type="radio" name="signing-option" value="me-only" class="text-primary-600 focus:ring-primary-500">118 <div class="ml-3">119 <span class="block text-sm font-medium text-gray-900">Sign myself only</span>120 <span class="block text-sm text-gray-600">I need to sign this document</span>121 </div>122 </label>123 124 <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">125 <input type="radio" name="signing-option" value="others" class="text-primary-600 focus:ring-primary-500" checked>126 <div class="ml-3">127 <span class="block text-sm font-medium text-gray-900">Send to others</span>128 <span class="block text-sm text-gray-600">Others need to sign this document</span>129 </div>130 </label>131 </div>132 </div>133 134 <!-- Signers Section -->135 <div id="signers-section">136 <label class="block text-sm font-medium text-gray-700 mb-4">Add Signers</label>137 <div class="space-y-4">138 <div class="flex items-center space-x-4">139 <div class="flex-1">140 <input type="email" 141 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200"142 placeholder="Enter signer's email">143 </div>144 <div class="w-32">145 <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition duration-200">146 <option>Signer 1</option>147 <option>Signer 2</option>148 <option>Signer 3</option>149 </select>150 </div>151 <button type="button" class="p-3 text-gray-400 hover:text-gray-600">152 <i data-feather="x" class="h-5 w-5"></i>153 </button>154 </div>155 </div>156 157 <button type="button" class="mt-4 flex items-center text-primary-600 hover:text-primary-700">158 <i data-feather="plus" class="h-4 w-4 mr-2"></i>159 Add another signer160 </button>161 </div>162 163 <div class="flex justify-end space-x-4 pt-6 border-t border-gray-200">164 <a href="/dashboard.html" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition duration-200">165 Cancel166 </a>167 <button type="submit" 168 class="bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition duration-200 font-semibold">169 Continue to Signing170 </button>171 </div>172 </form>173 </div>174 </div>175 176 <script>177 feather.replace();178 179 const uploadArea = document.getElementById('upload-area');180 const fileInput = document.getElementById('file-input');181 const uploadedFiles = document.getElementById('uploaded-files');182 183 // Drag and drop handling184 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {185 uploadArea.addEventListener(eventName, preventDefaults, false);186 });187 188 function preventDefaults(e) {189 e.preventDefault();190 e.stopPropagation();191 }192 193 ['dragenter', 'dragover'].forEach(eventName => {194 uploadArea.addEventListener(eventName, highlight, false);195 });196 197 ['dragleave', 'drop'].forEach(eventName => {198 uploadArea.addEventListener(eventName, unhighlight, false);199 });200 201 function highlight() {202 uploadArea.classList.add('drag-over');203 }204 205 function unhighlight() {206 uploadArea.classList.remove('drag-over');207 }208 209 uploadArea.addEventListener('drop', handleDrop, false);210 211 function handleDrop(e) {212 const dt = e.dataTransfer;213 const files = dt.files;214 handleFiles(files);215 }216 217 fileInput.addEventListener('change', function() {218 handleFiles(this.files);219 });220 221 function handleFiles(files) {222 if (files.length > 0) {223 uploadedFiles.classList.remove('hidden');224 // Here you would typically upload the file to your server225 console.log('File selected:', files[0].name);226 }227 }228 </script>229</body>230</html>