חתימה דיגיטלית

מערכת חתימה דיגיטלית // תיקון PDF.js worker if (typeof pdfjsLib !== 'undefined') { pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; } .signature-system * { box-sizing: border-box; } .signature-system { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 1200px; margin: 20px auto; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; direction: rtl; position: relative; z-index: 1; } .sig-header { background: linear-gradient(135deg, #007bff, #0056b3); color: white; padding: 30px; text-align: center; } .sig-header h1 { margin: 0; font-size: 2.2rem; font-weight: 600; } .sig-header p { margin: 5px 0 0; font-size: 1.1rem; opacity: 0.9; } .sig-tabs { display: flex; background: #f1f3f5; } .sig-tab { flex: 1; padding: 15px; text-align: center; cursor: pointer; transition: all 0.3s ease; } .sig-tab:hover { background: #e9ecef; } .sig-tab.active { background: white; border-bottom: 3px solid #007bff; font-weight: bold; } .sig-tab span { font-size: 1.1rem; } .sig-content { padding: 30px; } .sig-tab-content { display: none; } .sig-tab-content.active { display: block; } .sig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .sig-section { background: #f9f9f9; padding: 20px; border-radius: 10px; } .sig-section-title { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; } .sig-canvas-container { position: relative; margin-bottom: 15px; } .sig-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #666; font-size: 0.9rem; pointer-events: none; } .sig-placeholder.hidden { display: none; } .sig-canvas { background: white; border: 1px solid #ddd; border-radius: 8px; width: 100%; } .sig-color-picker { display: flex; gap: 10px; margin-bottom: 15px; } .sig-color-option { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; } .sig-color-option.active { border-color: #007bff; transform: scale(1.2); } .sig-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px; } .sig-btn { padding: 10px; border: none; border-radius: 8px; background: #007bff; color: white; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; } .sig-btn:hover { background: #0056b3; } .sig-btn.primary { background: #007bff; } .sig-btn.secondary { background: #6c757d; } .sig-btn.danger { background: #dc3545; } .sig-form-group { margin-bottom: 15px; } .sig-label { display: block; font-size: 0.9rem; margin-bottom: 5px; color: #333; } .sig-input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem; } .sig-textarea { min-height: 100px; resize: vertical; } .sig-preview { padding: 15px; background: white; border: 1px solid #ddd; border-radius: 8px; text-align: center; color: #666; } .sig-info { display: none; margin-top: 15px; padding: 15px; background: white; border: 1px solid #ddd; border-radius: 8px; } .sig-info-item { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.9rem; } .sig-info-label { color: #666; } .sig-info-value { color: #333; } .sig-upload-zone { border: 2px dashed #ddd; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; margin-bottom: 15px; transition: all 0.3s ease; } .sig-upload-zone:hover { border-color: #007bff; } .sig-upload-icon { font-size: 2rem; color: #666; } .sig-upload-text { font-size: 1rem; color: #333; margin: 10px 0; } .sig-upload-subtext { font-size: 0.8rem; color: #666; } .sig-text-tools { margin-bottom: 15px; } .sig-text-controls { display: flex; gap: 10px; margin-bottom: 10px; } .text-placement-btns { display: flex; gap: 10px; } .sig-document-viewer { margin-top: 20px; text-align: center; } .sig-document-canvas { border: 1px solid #ddd; border-radius: 8px; } .sig-recipients { margin-top: 15px; padding: 15px; background: white; border: 1px solid #ddd; border-radius: 8px; min-height: 100px; } .sig-recipient-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #ddd; } .sig-recipient-email { font-size: 0.9rem; } .sig-signatures-list { margin-top: 10px; } .sig-signature-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: white; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 10px; } .sig-signature-info { flex: 1; } .sig-signature-name { font-size: 1rem; font-weight: 600; } .sig-signature-date { font-size: 0.8rem; color: #666; } .sig-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 15px; } .sig-stat-card { background: white; padding: 15px; border-radius: 8px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .sig-stat-number { font-size: 1.8rem; font-weight: 600; color: #007bff; } .sig-stat-label { font-size: 0.9rem; color: #666; } .sig-status { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 8px; font-size: 0.9rem; z-index: 1000; } .sig-status.success { background: #28a745; color: white; } .sig-status.error { background: #dc3545; color: white; } .sig-status.info { background: #007bff; color: white; } @media (max-width: 768px) { .sig-grid { grid-template-columns: 1fr; gap: 20px; } .sig-tabs { flex-direction: column; } .sig-content { padding: 20px; } .sig-controls { grid-template-columns: repeat(2, 1fr); } .sig-header h1 { font-size: 1.8rem; } .sig-stats-grid { grid-template-columns: 1fr; } } 📋 מערכת חתימה דיגיטלית צור, חתום ושלח מסמכים ללקוחות בקלות ✏️ יצירת חתימה 📄 חתימה על מסמך 📧 שליחה ללקוחות 📊 ניהול ✏️ צור חתימה חדשה לחץ וגרור כדי לצייר את החתימה ↶ ביטול ↷ חזרה 🗑️ נקה שם החתימה: 💾 שמור חתימה 👁️ תצוגה מקדימה הציור שלך יופיע כאן שם: - תאריך: - גודל: 400 x 100 פיקסלים 📥 הורד PNG 📥 הורד JPEG 📋 העלה מסמך 📄 לחץ להעלאת מסמך PDF, JPG, PNG (עד 10MB) - PDF יישמר כ-PDF חתום! שם מסמך: - גודל: - 🔤 הוסף טקסט 12px 14px 16px 18px 20px Arial Times Courier 📋 הוסף בראש 📋 הוסף בתחתית בחר חתימה: בחר חתימה שמורה... ✏️ או צייר חתימה חדשה כאן לחץ וגרור כדי לצייר חתימה חדשה ↶ ביטול ↷ חזרה 🗑️ נקה ✍️ הוסף חתימה למסמך 📄 מסמך עם חתימה 📥 הורד מסמך חתום 📩 הכן לשליחה 📩 שלח ללקוחות 📄 העלה מסמך לשליחה PDF, JPG, PNG מסמך לשליחה: - המייל שלך: הוסף נמען: + הוסף אין נמענים עדיין נושא המייל: הודעה: 📤 שלח לחתימה 📊 סטטוס שליחות אין שליחות פעילות 💾 חתימות שמורות אין חתימות שמורות 📈 סטטיסטיקות 0 חתימות שנוצרו 0 מסמכים שנשלחו 0 חתימות שהתקבלו 0 ממתינות לחתימה 🗑️ נקה את כל הנתונים // Global variables let canvas, ctx, documentCanvas, documentCtx, docSignatureCanvas, docSignatureCtx; let isDrawing = false; let strokes = []; let currentStroke = []; let undoneStrokes = []; let docStrokes = []; let docCurrentStroke = []; let docUndoneStrokes = []; let currentColor = '#000000'; let currentSize = 2; let currentDocument = null; let originalPdfDoc = null; let savedSignatures = []; let sentDocuments = []; // Helper functions function $(selector) { return document.querySelector(selector); } function $all(selector) { return document.querySelectorAll(selector); } // UI update functions function updateSignatureDropdown() { const select = $('#savedSignatures'); select.innerHTML = 'בחר חתימה שמורה...'; savedSignatures.forEach(function(sig) { const option = document.createElement('option'); option.value = sig.id; option.textContent = sig.name; select.appendChild(option); }); } function updateSavedSignaturesList() { const list = $('#savedSignaturesList'); if (!savedSignatures.length) { list.innerHTML = 'אין חתימות שמורות'; return; } list.innerHTML = ''; savedSignatures.forEach(function(sig) { const item = document.createElement('div'); item.className = 'sig-signature-item'; item.innerHTML = ` ${sig.name} נוצר: ${sig.date} מחק `; list.appendChild(item); }); } function updatePendingSignatures() { const list = $('#pendingSignatures'); if (!sentDocuments.length) { list.innerHTML = 'אין שליחות פעילות'; return; } list.innerHTML = ''; sentDocuments.forEach(function(doc) { const item = document.createElement('div'); item.className = 'sig-signature-item'; item.innerHTML = ` ${doc.documentName} ${doc.recipientEmail} • ${doc.sentDate} • ${doc.status} הצג URL `; list.appendChild(item); }); } function updateStatistics() { $('#totalSignatures').textContent = savedSignatures.length; $('#totalSent').textContent = sentDocuments.length; $('#totalReceived').textContent = sentDocuments.filter(d => d.status === 'signed').length; $('#totalPending').textContent = sentDocuments.filter(d => d.status === 'sent').length; } function updateUI() { updateSignatureDropdown(); updateSavedSignaturesList(); updatePendingSignatures(); updateStatistics(); } // Initialize system function initializeSystem() { initializeCanvas(); initializeDocumentCanvas(); initializeDocumentSignatureCanvas(); setupEventListeners(); updateUI(); showStatus('מערכת החתימה התחילה בהצלחה!', 'success'); } function initializeCanvas() { canvas = $('#signatureCanvas'); if (!canvas) return; ctx = canvas.getContext('2d'); canvas.width = 400; canvas.height = 100; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.strokeStyle = currentColor; ctx.lineWidth = currentSize; canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mouseout', stopDrawing); canvas.addEventListener('touchstart', handleTouch); canvas.addEventListener('touchmove', handleTouch); canvas.addEventListener('touchend', stopDrawing); clearCanvas(); } function initializeDocumentCanvas() { documentCanvas = $('#signedDocumentCanvas'); if (documentCanvas) { documentCtx = documentCanvas.getContext('2d'); documentCanvas.width = 600; documentCanvas.height = 400; } } function initializeDocumentSignatureCanvas() { docSignatureCanvas = $('#documentSignatureCanvas'); if (!docSignatureCanvas) return; docSignatureCtx = docSignatureCanvas.getContext('2d'); docSignatureCanvas.width = 400; docSignatureCanvas.height = 80; docSignatureCtx.lineCap = 'round'; docSignatureCtx.lineJoin = 'round'; docSignatureCtx.strokeStyle = currentColor; docSignatureCtx.lineWidth = currentSize; docSignatureCanvas.addEventListener('mousedown', startDocDrawing); docSignatureCanvas.addEventListener('mousemove', drawDoc); docSignatureCanvas.addEventListener('mouseup', stopDocDrawing); docSignatureCanvas.addEventListener('mouseout', stopDocDrawing); docSignatureCanvas.addEventListener('touchstart', handleDocTouch); docSignatureCanvas.addEventListener('touchmove', handleDocTouch); docSignatureCanvas.addEventListener('touchend', stopDocDrawing); clearDocCanvas(); } function setupEventListeners() { $all('.sig-tab').forEach(tab => { tab.addEventListener('click', function() { switchTab(this.dataset.tab); }); }); $all('.sig-color-option').forEach(option => { option.addEventListener('click', function() { const canvasType = this.dataset.canvas || 'main'; selectColor(this.dataset.color, canvasType); }); }); $('#undoBtn').addEventListener('click', undoStroke); $('#redoBtn').addEventListener('click', redoStroke); $('#clearBtn').addEventListener('click', clearCanvas); $('#docUndoBtn').addEventListener('click', undoDocStroke); $('#docRedoBtn').addEventListener('click', redoDocStroke); $('#docClearBtn').addEventListener('click', clearDocCanvas); $('#saveSignatureBtn').addEventListener('click', saveSignature); $('#downloadPngBtn').addEventListener('click', () => downloadSignature('png')); $('#downloadJpgBtn').addEventListener('click', () => downloadSignature('jpg')); $('#documentFile').addEventListener('change', handleDocumentUpload); $('#addTextTopBtn').addEventListener('click', () => addTextToDocument('top')); $('#addTextBottomBtn').addEventListener('click', () => addTextToDocument('bottom')); $('#applySignatureBtn').addEventListener('click', applySignatureToDocument); $('#downloadSignedDocBtn').addEventListener('click', downloadSignedDocument); $('#prepareSendBtn').addEventListener('click', prepareForSending); $('#sendDocumentFile').addEventListener('change', handleSendDocumentUpload); $('#addRecipientBtn').addEventListener('click', addRecipient); $('#recipientEmail').addEventListener('keypress', function(e) { if (e.key === 'Enter') addRecipient(); }); $('#sendBtn').addEventListener('click', sendDocument); $('#clearAllBtn').addEventListener('click', clearAllData); $('#uploadZone').addEventListener('click', () => $('#documentFile').click()); $('#sendUploadZone').addEventListener('click', () => $('#sendDocumentFile').click()); } function switchTab(tabName) { $all('.sig-tab').forEach(tab => tab.classList.remove('active')); $all('.sig-tab-content').forEach(content => content.classList.remove('active')); $('#' + tabName + 'Tab').classList.add('active'); $('[data-tab="' + tabName + '"]').classList.add('active'); } function startDrawing(e) { isDrawing = true; currentStroke = []; const { x, y } = getCoordinates(e); ctx.beginPath(); ctx.moveTo(x, y); currentStroke.push({ x, y, color: currentColor, size: currentSize }); $('#canvasPlaceholder').classList.add('hidden'); } function draw(e) { if (!isDrawing) return; const { x, y } = getCoordinates(e); ctx.lineTo(x, y); ctx.stroke(); currentStroke.push({ x, y }); } function stopDrawing() { if (isDrawing) { isDrawing = false; strokes.push([...currentStroke]); undoneStrokes = []; updatePreview(); } } function handleTouch(e) { e.preventDefault(); const touch = e.touches[0]; const eventType = e.type === 'touchstart' ? 'mousedown' : e.type === 'touchmove' ? 'mousemove' : 'mouseup'; const mouseEvent = new MouseEvent(eventType, { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); } function getCoordinates(e) { const rect = canvas.getBoundingClientRect(); return { x: (e.clientX - rect.left) * (canvas.width / rect.width), y: (e.clientY - rect.top) * (canvas.height / rect.height) }; } function selectColor(color, canvasType = 'main') { currentColor = color; if (canvasType === 'main') { ctx.strokeStyle = color; $all('.sig-color-option:not([data-canvas])').forEach(option => option.classList.remove('active')); $('[data-color="' + color + '"]:not([data-canvas])').classList.add('active'); } else if (canvasType === 'doc') { docSignatureCtx.strokeStyle = color; $all('.sig-color-option[data-canvas="doc"]').forEach(option => option.classList.remove('active')); $('[data-color="' + color + '"][data-canvas="doc"]').classList.add('active'); } } function undoStroke() { if (strokes.length) { undoneStrokes.push(strokes.pop()); redrawCanvas(); updatePreview(); } } function redoStroke() { if (undoneStrokes.length) { strokes.push(undoneStrokes.pop()); redrawCanvas(); updatePreview(); } } function clearCanvas() { strokes = []; undoneStrokes = []; ctx.clearRect(0, 0, canvas.width, canvas.height); $('#canvasPlaceholder').classList.remove('hidden'); updatePreview(); } function redrawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); if (strokes.length === 0) { $('#canvasPlaceholder').classList.remove('hidden'); } else { $('#canvasPlaceholder').classList.add('hidden'); strokes.forEach(function(stroke) { if (!stroke.length) return; ctx.beginPath(); ctx.strokeStyle = stroke[0].color; ctx.lineWidth = stroke[0].size; ctx.moveTo(stroke[0].x, stroke[0].y); stroke.forEach(function(point) { ctx.lineTo(point.x, point.y); ctx.stroke(); }); }); } } function updatePreview() { const preview = $('#signaturePreview'); const info = $('#signatureInfo'); if (!strokes.length) { preview.textContent = 'הציור שלך יופיע כאן'; info.style.display = 'none'; return; } const previewCanvas = document.createElement('canvas'); previewCanvas.width = 150; previewCanvas.height = 50; const previewCtx = previewCanvas.getContext('2d'); previewCtx.drawImage(canvas, 0, 0, 150, 50); preview.innerHTML = ''; preview.appendChild(previewCanvas); info.style.display = 'block'; } // Document signature canvas functions function startDocDrawing(e) { isDrawing = true; docCurrentStroke = []; const { x, y } = getDocCoordinates(e); docSignatureCtx.beginPath(); docSignatureCtx.moveTo(x, y); docCurrentStroke.push({ x, y, color: currentColor, size: currentSize }); $('#docCanvasPlaceholder').classList.add('hidden'); } function drawDoc(e) { if (!isDrawing) return; const { x, y } = getDocCoordinates(e); docSignatureCtx.lineTo(x, y); docSignatureCtx.stroke(); docCurrentStroke.push({ x, y }); } function stopDocDrawing() { if (isDrawing) { isDrawing = false; docStrokes.push([...docCurrentStroke]); docUndoneStrokes = []; $('#applySignatureBtn').disabled = false; } } function handleDocTouch(e) { e.preventDefault(); const touch = e.touches[0]; const eventType = e.type === 'touchstart' ? 'mousedown' : e.type === 'touchmove' ? 'mousemove' : 'mouseup'; const mouseEvent = new MouseEvent(eventType, { clientX: touch.clientX, clientY: touch.clientY }); docSignatureCanvas.dispatchEvent(mouseEvent); } function getDocCoordinates(e) { const rect = docSignatureCanvas.getBoundingClientRect(); return { x: (e.clientX - rect.left) * (docSignatureCanvas.width / rect.width), y: (e.clientY - rect.top) * (docSignatureCanvas.height / rect.height) }; } function undoDocStroke() { if (docStrokes.length) { docUndoneStrokes.push(docStrokes.pop()); redrawDocCanvas(); } } function redoDocStroke() { if (docUndoneStrokes.length) { docStrokes.push(docUndoneStrokes.pop()); redrawDocCanvas(); } } function clearDocCanvas() { docStrokes = []; docUndoneStrokes = []; if (docSignatureCtx) { docSignatureCtx.clearRect(0, 0, docSignatureCanvas.width, docSignatureCanvas.height); } $('#docCanvasPlaceholder').classList.remove('hidden'); } function redrawDocCanvas() { docSignatureCtx.clearRect(0, 0, docSignatureCanvas.width, docSignatureCanvas.height); if (docStrokes.length === 0) { $('#docCanvasPlaceholder').classList.remove('hidden'); } else { $('#docCanvasPlaceholder').classList.add('hidden'); docStrokes.forEach(function(stroke) { if (!stroke.length) return; docSignatureCtx.beginPath(); docSignatureCtx.strokeStyle = stroke[0].color; docSignatureCtx.lineWidth = stroke[0].size; docSignatureCtx.moveTo(stroke[0].x, stroke[0].y); stroke.forEach(function(point) { docSignatureCtx.lineTo(point.x, point.y); docSignatureCtx.stroke(); }); }); } } function saveSignature() { if (!strokes.length) { showStatus('אנא צייר חתימה תחילה', 'error'); return; } const name = $('#signatureName').value || 'חתימה ללא שם'; const dataURL = canvas.toDataURL('image/png'); const signature = { id: Date.now(), name: name, dataURL: dataURL, date: new Date().toLocaleString('he-IL'), strokes: [...strokes] }; savedSignatures.push(signature); saveToStorage(); $('#infoName').textContent = name; $('#infoDate').textContent = signature.date; updateUI(); showStatus('חתימה נשמרה בהצלחה', 'success'); } function downloadSignature(format) { if (!strokes.length) { showStatus('אין חתימה להורדה', 'error'); return; } const link = document.createElement('a'); link.href = canvas.toDataURL('image/' + format); link.download = 'signature.' + format; link.click(); showStatus('הורדת ' + format.toUpperCase(), 'success'); } async function handleDocumentUpload(e) { const file = e.target.files[0]; if (!file) return; if (!['application/pdf', 'image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) { showStatus('סוג קובץ לא נתמך - רק PDF, JPG, PNG', 'error'); return; } if (file.size > 10 * 1024 * 1024) { // 10MB showStatus('הקובץ גדול מדי (מקסימום 10MB)', 'error'); return; } currentDocument = { name: file.name, type: file.type, size: file.size, data: URL.createObjectURL(file), file: file // שמירת הקובץ המקורי }; // איפוס PDF מקורי originalPdfDoc = null; $('#docName').textContent = currentDocument.name; $('#docSize').textContent = formatSize(currentDocument.size); $('#documentInfo').style.display = 'block'; if (file.type === 'application/pdf') { await loadPdfDocument(file); } else { loadImageDocument(); } $('#applySignatureBtn').disabled = false; updateSignatureDropdown(); showStatus('מסמך הועלה בהצלחה', 'success'); } async function loadPdfDocument(file) { try { showStatus('טוען PDF...', 'info'); // קריאת הקובץ כ-ArrayBuffer ושמירתו בזיכרון const fileReader = new FileReader(); const arrayBuffer = await new Promise((resolve, reject) => { fileReader.onload = () => resolve(fileReader.result); fileReader.onerror = () => reject(fileReader.error); fileReader.readAsArrayBuffer(file); }); // יצירת עותק של הנתונים כדי למנוע detached ArrayBuffer originalPdfDoc = arrayBuffer.slice(0); console.log('PDF נטען לזיכרון:', originalPdfDoc.byteLength, 'bytes'); // טעינת PDF עם pdf.js להצגה const pdf = await pdfjsLib.getDocument({ data: originalPdfDoc }).promise; const page = await pdf.getPage(1); // רזולוציה גבוהה יותר לאיכות טובה יותר const scale = 2.0; const viewport = page.getViewport({ scale: scale }); // הגדרת גודל Canvas בהתאם לA4 documentCanvas.width = viewport.width; documentCanvas.height = viewport.height; // הגדרת רוחב מקסימלי לתצוגה (600px) אבל שמירה על היחס const maxDisplayWidth = 600; if (viewport.width > maxDisplayWidth) { const displayScale = maxDisplayWidth / viewport.width; documentCanvas.style.width = maxDisplayWidth + 'px'; documentCanvas.style.height = (viewport.height * displayScale) + 'px'; } else { documentCanvas.style.width = viewport.width + 'px'; documentCanvas.style.height = viewport.height + 'px'; } const renderContext = { canvasContext: documentCtx, viewport: viewport }; await page.render(renderContext).promise; $('#documentViewer').style.display = 'block'; showStatus('PDF נטען בהצלחה - מוכן לחתימה', 'success'); } catch (error) { console.error('שגיאה בטעינת PDF:', error); showStatus('שגיאה בטעינת קובץ PDF: ' + error.message, 'error'); originalPdfDoc = null; // איפוס במקרה של שגיאה loadImageDocument(); // חזרה לטעינת תמונה } } function loadImageDocument() { const img = new Image(); img.onload = function() { const maxWidth = 600; const maxHeight = 800; let { width, height } = img; if (width > maxWidth) { height = (height * maxWidth) / width; width = maxWidth; } if (height > maxHeight) { width = (width * maxHeight) / height; height = maxHeight; } documentCanvas.width = width; documentCanvas.height = height; documentCtx.drawImage(img, 0, 0, width, height); $('#documentViewer').style.display = 'block'; showStatus('תמונה נטענה בהצלחה', 'success'); }; img.onerror = function() { showStatus('שגיאה בטעינת התמונה', 'error'); }; img.src = currentDocument.data; } function addTextToDocument(position) { if (!currentDocument || !documentCanvas || !documentCtx) return; const text = $('#textToAdd').value.trim(); if (!text) { showStatus('אנא הכנס טקסט', 'error'); return; } const fontSize = $('#fontSize').value || '16'; const fontFamily = $('#fontFamily').value || 'Arial'; const color = $('#textColor').value || '#000000'; documentCtx.fillStyle = color; documentCtx.font = fontSize + 'px ' + fontFamily; documentCtx.textAlign = 'center'; const x = documentCanvas.width / 2; const y = position === 'top' ? 60 : documentCanvas.height - 30; documentCtx.fillText(text, x, y); $('#textToAdd').value = ''; showStatus('טקסט נוסף למסמך', 'success'); } function applySignatureToDocument() { if (!currentDocument || !documentCanvas || !documentCtx) { showStatus('אנא העלה מסמך תחילה', 'error'); return; } const signatureId = $('#savedSignatures').value; let signatureToApply = null; if (signatureId) { const signature = savedSignatures.find(s => s.id == signatureId); if (signature) { signatureToApply = signature.dataURL; } } if (!signatureToApply && docStrokes.length > 0) { signatureToApply = docSignatureCanvas.toDataURL(); } if (!signatureToApply) { showStatus('אנא בחר חתימה שמורה או צייר חתימה חדשה', 'error'); return; } const signatureImg = new Image(); signatureImg.onload = function() { const sigWidth = 150; const sigHeight = 75; const sigX = documentCanvas.width - sigWidth - 30; const sigY = documentCanvas.height - sigHeight - 30; documentCtx.fillStyle = 'rgba(255, 255, 255, 0.9)'; documentCtx.fillRect(sigX - 5, sigY - 5, sigWidth + 10, sigHeight + 10); documentCtx.strokeStyle = '#ddd'; documentCtx.lineWidth = 1; documentCtx.strokeRect(sigX - 5, sigY - 5, sigWidth + 10, sigHeight + 10); documentCtx.drawImage(signatureImg, sigX, sigY, sigWidth, sigHeight); const now = new Date(); const dateStr = now.toLocaleDateString('he-IL'); documentCtx.fillStyle = '#666'; documentCtx.font = '10px Arial'; documentCtx.textAlign = 'center'; documentCtx.fillText('נחתם ב-' + dateStr, sigX + sigWidth/2, sigY + sigHeight + 15); showStatus('חתימה הוספה למסמך בהצלחה!', 'success'); }; signatureImg.src = signatureToApply; } async function downloadSignedDocument() { if (!documentCanvas || !currentDocument) { showStatus('אין מסמך לטיפול', 'error'); return; } try { // בדיקה אם זה PDF ויש לנו את הקובץ המקורי if (currentDocument.type === 'application/pdf' && originalPdfDoc) { console.log('מתחיל תהליך יצירת PDF חתום...'); // קבלת החתימה const signatureId = $('#savedSignatures').value; let signatureDataUrl = null; if (signatureId) { const signature = savedSignatures.find(s => s.id == signatureId); if (signature) { signatureDataUrl = signature.dataURL; console.log('נבחרה חתימה שמורה:', signature.name); } } else if (docStrokes.length > 0) { signatureDataUrl = docSignatureCanvas.toDataURL(); console.log('נמצאה חתימה שצוירה במקום'); } // בדיקה שיש חתימה להוסיף if (signatureDataUrl) { console.log('מתחיל יצירת PDF עם חתימה...'); try { await createSignedPdf(signatureDataUrl); return; // אם הצליח - יציאה מהפונקציה } catch (pdfError) { console.error('שגיאה מפורטת ביצירת PDF:', pdfError); showStatus(`שגיאה ביצירת PDF: ${pdfError.message} - מוריד כתמונה`, 'error'); // המשך לתמונה אם PDF נכשל } } else { console.log('לא נמצאה חתימה'); showStatus('לא נמצאה חתימה - אנא הוסף חתימה תחילה', 'error'); return; } } else { console.log('לא PDF או חסר קובץ מקורי, מוריד כתמונה'); } // עבור תמונות או כשנכשל PDF - הורדה כתמונה const link = document.createElement('a'); let fileName = 'document_signed.png'; if (currentDocument) { const originalName = currentDocument.name.replace(/\.[^/.]+$/, ''); if (currentDocument.type === 'application/pdf') { fileName = originalName + '_signed.png'; link.href = documentCanvas.toDataURL('image/png'); showStatus('PDF הורד כתמונת PNG (בעיה ביצירת PDF)', 'info'); } else if (currentDocument.type.includes('jpeg') || currentDocument.type.includes('jpg')) { fileName = originalName + '_signed.jpg'; link.href = documentCanvas.toDataURL('image/jpeg', 0.9); showStatus('תמונה חתומה הורדה כ-JPEG', 'success'); } else { fileName = originalName + '_signed.png'; link.href = documentCanvas.toDataURL('image/png'); showStatus('תמונה חתומה הורדה כ-PNG', 'success'); } } else { link.href = documentCanvas.toDataURL('image/png'); showStatus('מסמך הורד כ-PNG', 'success'); } link.download = fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (error) { console.error('שגיאה כללית בהורדת המסמך:', error); showStatus('שגיאה בהורדת המסמך: ' + error.message, 'error'); } } async function createSignedPdf(signatureDataUrl) { try { showStatus('מעבד PDF חתום...', 'info'); // בדיקה שיש לנו את הנתונים הגולמיים if (!originalPdfDoc) { throw new Error('לא נמצא PDF מקורי'); } // טעינת PDF באמצעות PDF-lib const pdfDoc = await PDFLib.PDFDocument.load(originalPdfDoc); const pages = pdfDoc.getPages(); const firstPage = pages[0]; // קבלת מידות העמוד בנקודות (PDF units) const { width, height } = firstPage.getSize(); console.log('PDF Page dimensions:', width, 'x', height); // המרת החתימה לבייטים const response = await fetch(signatureDataUrl); if (!response.ok) { throw new Error('לא ניתן לטעון את החתימה'); } const signatureImageBytes = await response.arrayBuffer(); // הטמעת התמונה ב-PDF let signatureImage; try { // ניסיון להטמיע כ-PNG signatureImage = await pdfDoc.embedPng(signatureImageBytes); console.log('חתימה הוטמעה כ-PNG'); } catch (pngError) { console.log('PNG failed, converting to JPEG...'); // המרה ל-JPEG אם PNG נכשל const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); const jpegDataUrl = await new Promise((resolve, reject) => { img.onload = () => { canvas.width = img.width; canvas.height = img.height; // רקע לבן ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); // ציור החתימה ctx.drawImage(img, 0, 0); resolve(canvas.toDataURL('image/jpeg', 0.95)); }; img.onerror = () => reject(new Error('לא ניתן לטעון את החתימה')); img.src = signatureDataUrl; }); const jpegBytes = await fetch(jpegDataUrl).then(res => res.arrayBuffer()); signatureImage = await pdfDoc.embedJpg(jpegBytes); console.log('חתימה הוטמעה כ-JPEG'); } // חישוב מיקום וגודל החתימה יחסית לגודל העמוד const signatureWidthRatio = 0.15; // 15% מרוחב העמוד const signatureHeightRatio = 0.08; // 8% מגובה העמוד const signatureWidth = width * signatureWidthRatio; const signatureHeight = height * signatureHeightRatio; // מיקום בפינה ימנית תחתונה עם מרווח const margin = Math.min(width, height) * 0.03; // 3% מהממד הקטן יותר const x = width - signatureWidth - margin; const y = margin; console.log('Signature placement:', { x, y, width: signatureWidth, height: signatureHeight }); // הוספת רקע לבן מאחורי החתימה const padding = 5; firstPage.drawRectangle({ x: x - padding, y: y - padding, width: signatureWidth + (padding * 2), height: signatureHeight + (padding * 2), color: PDFLib.rgb(1, 1, 1), opacity: 0.95, }); // הוספת מסגרת דקה firstPage.drawRectangle({ x: x - padding, y: y - padding, width: signatureWidth + (padding * 2), height: signatureHeight + (padding * 2), borderColor: PDFLib.rgb(0.7, 0.7, 0.7), borderWidth: 0.5, }); // הוספת החתימה firstPage.drawImage(signatureImage, { x: x, y: y, width: signatureWidth, height: signatureHeight, }); // הוספת תאריך וזמן const now = new Date(); const dateStr = now.toLocaleDateString('he-IL'); const timeStr = now.toLocaleTimeString('he-IL', { hour: '2-digit', minute: '2-digit' }); const fontSize = Math.max(8, height * 0.01); // גודל פונט יחסי firstPage.drawText(`נחתם ב-${dateStr} בשעה ${timeStr}`, { x: x, y: y - fontSize - 5, size: fontSize, color: PDFLib.rgb(0.4, 0.4, 0.4), }); // שמירת PDF showStatus('שומר PDF חתום...', 'info'); const pdfBytes = await pdfDoc.save(); console.log('PDF saved, size:', pdfBytes.length, 'bytes'); // יצירת Blob והורדה const blob = new Blob([pdfBytes], { type: 'application/pdf' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; // יצירת שם קובץ const originalName = currentDocument.name.replace(/\.pdf$/i, ''); link.download = `${originalName}_signed.pdf`; // הוספה לDOM והורדה document.body.appendChild(link); link.click(); document.body.removeChild(link); // ניקוי זיכרון setTimeout(() => URL.revokeObjectURL(url), 1000); showStatus('✅ PDF חתום הורד בהצלחה!', 'success'); console.log('PDF download completed successfully'); } catch (error) { console.error('שגיאה מפורטת ביצירת PDF:', error); showStatus('שגיאה ביצירת PDF: ' + error.message, 'error'); throw error; // זריקת השגיאה למעלה לטיפול } } function prepareForSending() { if (!currentDocument) { showStatus('אין מסמך לשליחה', 'error'); return; } switchTab('send'); $('#sendDocName').textContent = currentDocument.name; $('#sendDocInfo').style.display = 'block'; $('#sendBtn').disabled = false; showStatus('המסמך מוכן לשליחה', 'success'); } function handleSendDocumentUpload(e) { const file = e.target.files[0]; if (!file) return; if (!['application/pdf', 'image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) { showStatus('סוג קובץ לא נתמך - רק PDF, JPG, PNG', 'error'); return; } if (file.size > 10 * 1024 * 1024) { showStatus('הקובץ גדול מדי (מקסימום 10MB)', 'error'); return; } currentDocument = { name: file.name, type: file.type, size: file.size, data: URL.createObjectURL(file), file: file }; $('#sendDocName').textContent = currentDocument.name; $('#sendDocInfo').style.display = 'block'; $('#sendBtn').disabled = false; showStatus('המסמך מוכן לשליחה', 'success'); } function addRecipient() { const email = $('#recipientEmail').value.trim(); if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { showStatus('כתובת מייל לא תקינה', 'error'); return; } const list = $('#recipientsList'); if (list.querySelector('[data-email="' + email + '"]')) { showStatus('המייל כבר נוסף', 'error'); return; } if (list.querySelector('p')) { list.innerHTML = ''; } const item = document.createElement('div'); item.className = 'sig-recipient-item'; item.setAttribute('data-email', email); item.innerHTML = ` ${email} הסר `; list.appendChild(item); $('#recipientEmail').value = ''; showStatus('נמען נוסף', 'success'); } function removeRecipient(btn) { const list = $('#recipientsList'); btn.parentElement.remove(); if (!list.children.length) { list.innerHTML = 'אין נמענים עדיין'; } showStatus('נמען הוסר', 'success'); } function sendDocument() { const senderEmail = $('#senderEmail').value.trim(); const subject = $('#emailSubject').value.trim(); const message = $('#emailMessage').value.trim(); const recipients = Array.from($all('.sig-recipient-email')).map(el => el.textContent); if (!senderEmail || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(senderEmail)) { showStatus('כתובת מייל של השולח לא תקינה', 'error'); return; } if (!currentDocument) { showStatus('אנא העלה מסמך', 'error'); return; } if (!recipients.length) { showStatus('אנא הוסף לפחות נמען אחד', 'error'); return; } if (!subject || !message) { showStatus('אנא מלא נושא והודעה', 'error'); return; } const docId = 'DOC_' + Date.now(); const emailBody = encodeURIComponent( `${message}\n\n` + `לחתימה על המסמך: ${currentDocument.name}\n` + `קישור לחתימה: ${window.location.origin}/#sign-${docId}\n\n` + `תודה,\n${senderEmail}` ); recipients.forEach((email, index) => { const signUrl = `${window.location.origin}/#sign-${docId}-${email}`; const mailtoLink = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${emailBody.replace(encodeURIComponent(`#sign-${docId}`), encodeURIComponent(signUrl))}`; setTimeout(() => { window.open(mailtoLink); }, index * 500); sentDocuments.push({ id: Date.now() + Math.random(), documentId: docId, documentName: currentDocument.name, senderEmail: senderEmail, recipientEmail: email, subject: subject, message: message, sentDate: new Date().toLocaleString('he-IL'), status: 'sent', signingURL: signUrl }); }); updateUI(); showStatus(`תוכנת המייל נפתחה עבור ${recipients.length} נמענים`, 'success'); $('#recipientsList').innerHTML = 'אין נמענים עדיין'; $('#sendDocumentFile').value = ''; $('#sendDocInfo').style.display = 'none'; $('#sendBtn').disabled = true; setTimeout(() => { showStatus('השלמת השליחה בתוכנת המייל שלך', 'info'); }, 2000); } function deleteSignature(id) { if (window.confirm('האם אתה בטוח שברצונך למחוק חתימה זו?')) { savedSignatures = savedSignatures.filter(s => s.id != id); saveToStorage(); updateUI(); showStatus('החתימה נמחקה', 'success'); } } function clearAllData() { if (window.confirm('האם אתה בטוח שברצונך למחוק את כל הנתונים?')) { savedSignatures = []; sentDocuments = []; clearCanvas(); if (documentCanvas && documentCtx) { documentCtx.clearRect(0, 0, documentCanvas.width, documentCanvas.height); } $('#documentViewer').style.display = 'none'; $('#documentActions').style.display = 'none'; $('#signatureInfo').style.display = 'none'; $('#documentInfo').style.display = 'none'; $('#sendDocInfo').style.display = 'none'; $('#signatureName').value = ''; $('#senderEmail').value = ''; $('#recipientEmail').value = ''; $('#emailSubject').value = 'בקשה לחתימה דיגיטלית'; $('#emailMessage').value = ''; $('#textToAdd').value = ''; $('#documentFile').value = ''; $('#sendDocumentFile').value = ''; $('#recipientsList').innerHTML = 'אין נמענים עדיין'; currentDocument = null; updateUI(); showStatus('כל הנתונים נמחקו', 'success'); } } function saveToStorage() { console.log('נתונים נשמרו:', { signatures: savedSignatures.length, documents: sentDocuments.length }); } function formatSize(bytes) { if (bytes === 0) return '0 Bytes'; const sizes = ['Bytes', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(1024)); return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i]; } function showStatus(message, type) { const status = $('#statusMessage'); status.textContent = message; status.className = 'sig-status ' + type; status.style.display = 'block'; setTimeout(() => status.style.display = 'none', 3000); } // Global functions for onclick handlers window.deleteSignature = deleteSignature; window.removeRecipient = removeRecipient; // Start initialization when page loads document.addEventListener('DOMContentLoaded', initializeSystem);

מחשבון אלכוהול לאירועים

מחשבון קצבת ילדים

מחשבון שכר עצמאי

מחשבון ברוטו נטו עלות מעביד

מחשבון כאב וסבל

מחשבון ריבית פריים בחינם

מחשבון משכנתא

מחשבון קרן השתלמות לעצמאים

מחשבון שכר עצמאי מול שכיר

מחשבון שומן

מחשבון גמל להשקעה

מחשבון דמי לידה

חתימה דיגיטלית

📋 מערכת חתימה דיגיטלית

כתיבת תגובה לבטל

שער קריפטו

המרת PDF לאקסל

מחשבון שכר ברוטו נטו

מחשבון שעות עבודה

מחשבון אחוזון משקל עובר

מחשבון אינטראקציה בין תרופות

מחשבון הצמדה

מחשבון הבראה

מחשבון קצבת ילדים

מחשבון אחוזון משקל עובר

מחשבון ריבית דריבית

מחשבון קרן השתלמות לעצמאים

📋 מערכת חתימה דיגיטלית

חיתוך וידאו

כתבות אחרונות

כתיבת תגובה לבטל

שער קריפטו

המרת PDF לאקסל

מחשבון שכר ברוטו נטו

מחשבון שעות עבודה

מחשבון אחוזון משקל עובר

מחשבון אינטראקציה בין תרופות

מחשבון הצמדה

מחשבון הבראה

מחשבון קצבת ילדים

מחשבון אחוזון משקל עובר

מחשבון ריבית דריבית

מחשבון קרן השתלמות לעצמאים