Update index.html

index.html

@@ -28,7 +28,6 @@
       --shadow: 0 18px 60px rgba(0,0,0,.35);
       --radius:18px;
 
-      --ok:#22c55e;
       --warn:#f59e0b;
       --bad:#ef4444;
     }
@@ -169,6 +168,27 @@
       border-color: rgba(245,158,11,.28);
     }
 
+    /* ====== التوقيع اليدوي ====== */
+    .signatureBox{
+      width:100%;
+      height:180px;
+      background:#ffffff;
+      border-radius:14px;
+      border:2px dashed rgba(0,178,223,.6);
+      overflow:hidden;
+      position:relative;
+    }
+    .signatureBox canvas{
+      width:100%;
+      height:100%;
+      display:block;
+      touch-action:none;
+    }
+    .sigActions{
+      margin-top:8px;
+      text-align:left;
+    }
+
     .tableWrap{
       overflow:auto;
       border-radius: var(--radius);
@@ -235,6 +255,7 @@
   <div class="wrap">
     <div class="hero">
       <p class="creditLine">تصميم وإعداد: نوف الناصر</p>
+      <p class="titleTop">"بيان استلام"</p>
       <h1 class="titleBar">إدارة حالات الإقرارات وتوثيق الاستلام</h1>
       <p class="subNote">
         أدخل البيانات ثم اختر الحالة. يتم الحفظ تلقائيًا ولا تختفي السجلات عند إغلاق الصفحة إلا بالحذف.
@@ -267,6 +288,7 @@
             </select>
           </div>
 
+          <!-- يظهر فقط عند استجاب -->
           <div id="respondedBlock" style="grid-column:1/-1; display:none;">
             <div class="formGrid">
               <div style="grid-column:1/-1">
@@ -299,17 +321,16 @@
                 <input id="date" type="date" />
               </div>
 
-            <div style="grid-column:1/-1">
-  <label>التوقيع اليدوي</label>
-
-  <div class="signatureBox">
-    <canvas id="signaturePad"></canvas>
-  </div>
-
-  <div class="sigActions">
-    <button type="button" class="tinyBtn" id="clearSignature">مسح التوقيع</button>
-  </div>
-</div>
+              <div style="grid-column:1/-1">
+                <label>التوقيع اليدوي</label>
+                <div class="signatureBox">
+                  <canvas id="signaturePad"></canvas>
+                </div>
+                <div class="sigActions">
+                  <button type="button" class="tinyBtn" id="clearSignature">مسح التوقيع</button>
+                </div>
+              </div>
+            </div>
 
             <div class="noteBox" id="respondedHelp">
               عند اختيار <b>استجاب</b> يُفضّل تحديد (مركز/فرع مستقل/مفردة)، ثم تُكمل بيانات الاستلام إن توفرت.
@@ -336,6 +357,7 @@
         </div>
       </div>
 
+      <!-- إدارة السجلات -->
       <div class="card">
         <h3>إدارة السجلات <span class="badge">بحث + حذف</span></h3>
 
@@ -353,6 +375,7 @@
       </div>
     </div>
 
+    <!-- الجدول -->
     <div class="card" style="margin-top:14px;">
       <h3>الجدول</h3>
 
@@ -382,7 +405,7 @@
   </div>
 
 <script>
-  const STORAGE_KEY = "eq_records_v2";
+  const STORAGE_KEY = "eq_records_v3";
 
   const el = {
     company: document.getElementById("company"),
@@ -394,7 +417,6 @@
     mobile: document.getElementById("mobile"),
     email: document.getElementById("email"),
     date: document.getElementById("date"),
-    signature: document.getElementById("signature"),
     extraNote: document.getElementById("extraNote"),
     photoNote: document.getElementById("photoNote"),
 
@@ -410,6 +432,13 @@
     deleteAllBtn: document.getElementById("deleteAllBtn"),
   };
 
+  // التوقيع اليدوي
+  const canvas = document.getElementById("signaturePad");
+  const ctx = canvas.getContext("2d");
+  let drawing = false;
+  let signatureData = null;
+  let scaledOnce = false;
+
   let records = [];
   let editId = null;
 
@@ -491,7 +520,7 @@
       if(el.receiver) el.receiver.value = "";
       if(el.mobile) el.mobile.value = "";
       if(el.email) el.email.value = "";
-      if(el.signature) el.signature.value = "";
+      clearSignaturePad();
     }
   }
 
@@ -504,10 +533,10 @@
     if(el.mobile) el.mobile.value = "";
     if(el.email) el.email.value = "";
     el.date.value = todayISO();
-    if(el.signature) el.signature.value = "";
     el.extraNote.value = "";
     editId = null;
     el.saveBtn.textContent = "💾 حفظ";
+    clearSignaturePad();
     updateConditionalUI();
   }
 
@@ -520,11 +549,23 @@
     if(el.mobile) el.mobile.value = rec.mobile || "";
     if(el.email) el.email.value = rec.email || "";
     el.date.value = rec.date || todayISO();
-    if(el.signature) el.signature.value = rec.signature || "";
     el.extraNote.value = rec.extraNote || "";
     editId = rec.id;
     el.saveBtn.textContent = "✅ حفظ التعديل";
     updateConditionalUI();
+
+    // رسم التوقيع المخزن على اللوحة إن وجد
+    clearSignaturePad();
+    if(rec.signature){
+      const img = new Image();
+      img.onload = () => {
+        const rect = canvas.getBoundingClientRect();
+        ctx.drawImage(img, 0, 0, rect.width, rect.height);
+        signatureData = rec.signature;
+      };
+      img.src = rec.signature;
+    }
+
     window.scrollTo({ top: 0, behavior: "smooth" });
   }
 
@@ -534,7 +575,7 @@
     return records.filter(r => {
       const hay = [
         r.company, r.cr, statusLabel(r.status), respondedTypeLabel(r.respondedType),
-        r.receiver, r.mobile, r.email, r.date, r.signature, r.note, r.extraNote
+        r.receiver, r.mobile, r.email, r.date, r.note, r.extraNote
       ].join(" ").toLowerCase();
       return hay.includes(q);
     });
@@ -557,7 +598,7 @@
         <td>${escapeHtml(r.mobile)}</td>
         <td>${escapeHtml(r.email)}</td>
         <td>${escapeHtml(r.date)}</td>
-        <td>${escapeHtml(r.signature)}</td>
+        <td>${r.signature ? `<img src="${r.signature}" style="height:50px; background:#fff; border-radius:8px; padding:2px;">` : ""}</td>
         <td>${escapeHtml(r.note || "")}${r.extraNote ? " | " + escapeHtml(r.extraNote) : ""}</td>
         <td>
           <button class="tinyBtn edit" data-action="edit" data-id="${r.id}">تعديل</button>
@@ -583,6 +624,78 @@
     return "";
   }
 
+  /* ====== التوقيع اليدوي (Canvas) ====== */
+  function resizeCanvas(){
+    const ratio = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+
+    const oldData = signatureData;
+
+    canvas.width = Math.max(1, Math.floor(rect.width * ratio));
+    canvas.height = Math.max(1, Math.floor(rect.height * ratio));
+
+    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+    ctx.strokeStyle = "#000";
+
+    // إعادة رسم التوقيع إذا كان موجودًا (عند تغيير المقاس)
+    if(oldData){
+      const img = new Image();
+      img.onload = () => {
+        ctx.drawImage(img, 0, 0, rect.width, rect.height);
+        signatureData = oldData;
+      };
+      img.src = oldData;
+    }
+  }
+
+  function clearSignaturePad(){
+    const rect = canvas.getBoundingClientRect();
+    ctx.clearRect(0, 0, rect.width, rect.height);
+    signatureData = null;
+  }
+
+  function getPos(e){
+    const rect = canvas.getBoundingClientRect();
+    if(e.touches && e.touches[0]){
+      return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top };
+    }
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+
+  function startDraw(e){
+    drawing = true;
+    const p = getPos(e);
+    ctx.beginPath();
+    ctx.moveTo(p.x, p.y);
+  }
+
+  function draw(e){
+    if(!drawing) return;
+    e.preventDefault();
+    const p = getPos(e);
+    ctx.lineTo(p.x, p.y);
+    ctx.stroke();
+  }
+
+  function endDraw(){
+    if(!drawing) return;
+    drawing = false;
+    signatureData = canvas.toDataURL("image/png");
+  }
+
+  canvas.addEventListener("mousedown", startDraw);
+  canvas.addEventListener("mousemove", draw);
+  canvas.addEventListener("mouseup", endDraw);
+  canvas.addEventListener("mouseleave", endDraw);
+
+  canvas.addEventListener("touchstart", startDraw, { passive:false });
+  canvas.addEventListener("touchmove", draw, { passive:false });
+  canvas.addEventListener("touchend", endDraw);
+
+  document.getElementById("clearSignature").addEventListener("click", clearSignaturePad);
+
   function save(){
     const company = sanitize(el.company.value);
     if(!company){
@@ -599,7 +712,6 @@
     const mobile = normalizeMobile(mobileRaw);
     const email = el.email ? sanitize(el.email.value) : "";
     const date = el.date.value || todayISO();
-    const signature = el.signature ? sanitize(el.signature.value) : "";
     const extraNote = sanitize(el.extraNote.value);
 
     if(email && !isValidEmail(email)){
@@ -623,7 +735,7 @@
       mobile: status === "RESPONDED" ? mobile : "",
       email: status === "RESPONDED" ? email : "",
       date: status === "RESPONDED" ? date : (date || todayISO()),
-      signature: status === "RESPONDED" ? signature : "",
+      signature: (status === "RESPONDED") ? (signatureData || "") : "",
       note,
       extraNote,
       updatedAt: new Date().toISOString()
@@ -685,7 +797,7 @@
       "رقم الجوال": r.mobile,
       "البريد الإلكتروني": r.email,
       "التاريخ": r.date,
-      "التوقيع": r.signature,
+      "التوقيع": r.signature ? "مرفق (صورة)" : "",
       "ملاحظة": (r.note || "") + (r.extraNote ? " | " + r.extraNote : "")
     }));
 
@@ -701,10 +813,12 @@
       { wch: 18 },
       { wch: 28 },
       { wch: 14 },
-      { wch: 22 },
+      { wch: 14 },
       { wch: 42 },
     ];
 
+    // ملاحظة: Excel عبر SheetJS لا يدعم إدراج الصور في الخلايا كصورة مباشرة في المتصفح بدون حلول إضافية.
+    // لذا نضع مؤشر "مرفق (صورة)" داخل Excel، بينما التوقيع يظهر كصورة داخل الصفحة.
     const wb = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(wb, ws, "الإقرارات");
     XLSX.writeFile(wb, `EQ_${todayISO()}.xlsx`);
@@ -736,6 +850,11 @@
   load();
   updateConditionalUI();
   render();
+
+  // تجهيز لوحة التوقيع بعد ظهورها (وعند تحميل الصفحة)
+  // نعمل resize الآن، وأيضًا عند تغيير الحجم
+  setTimeout(() => { resizeCanvas(); }, 0);
+  window.addEventListener("resize", () => { resizeCanvas(); });
 </script>
 </body>
 </html>