Spaces:

stat2025
/

PDF

Running

App Files Files Community

stat2025 commited on Nov 9, 2025

Commit

b0f49c3

verified ·

1 Parent(s): 103197f

Update index.html

Browse files

Files changed (1) hide show

index.html +68 -32

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="ar" dir="rtl">
 <head>
   <meta charset="UTF-8" />
-  <title>إدمج ملفاتك بكل سهولة</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="style.css" />
   <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
@@ -16,7 +16,7 @@
         <div class="logo-mark">PDF</div>
         <div class="brand-text">
           <div class="brand-title">أداة دمج ملفات المجموعة</div>
-          <div class="brand-sub">دمج احترافي لصور وملفات PDF في ملف واحد</div>
         </div>
       </div>
       <div class="top-right">
@@ -29,10 +29,10 @@
       <!-- تعريف بسيط -->
       <section class="hero">
-        <h1>ادمج ملفاتك بسهولة في ملف PDF واحد منسّق.</h1>
         <p>
-          اختر صورًا، ملفات PDF، أو مزيجًا من الاثنين، وستقوم الأداة بإنشاء ملف PDF واحد
-          وفق الترتيب الظاهر في القائمة، مناسب لمشاركات وتقارير المجموعة.
         </p>
       </section>
@@ -44,11 +44,11 @@
         </div>
         <div class="step">
           <span class="step-number">2</span>
-          <span class="step-text">رتّب الملفات، احذف ما لا تحتاجه.</span>
         </div>
         <div class="step">
           <span class="step-number">3</span>
-          <span class="step-text">اضغط دمج لتحميل ملف PDF النهائي مباشرة.</span>
         </div>
       </section>
@@ -64,7 +64,7 @@
             <strong>صور JPG / PNG</strong>،
             أو
             <strong>دمج الاثنين معًا</strong> في ملف PDF واحد.
-            يتم الدمج بالترتيب في القائمة أدناه.
           </p>
           <label class="file-picker">
@@ -96,6 +96,14 @@
         <!-- حالة العملية -->
         <div id="status" class="status"></div>
       </section>
     </main>
   </div>
@@ -107,11 +115,12 @@
     const statusDiv = document.getElementById("status");
     const fileListDiv = document.getElementById("fileList");
     const outputNameInput = document.getElementById("outputName");
-    // نحتفظ بالملفات المختارة (من عدة دفعات)
     let selectedFiles = [];
-    const MAX_RECOMMENDED_FILES = 200; // للتنبيه فقط
     function setStatus(msg, type = "") {
       statusDiv.textContent = msg;
@@ -119,6 +128,23 @@
       if (!msg) statusDiv.className = "status";
     }
     function isImage(file) {
       const name = file.name.toLowerCase();
       return (
@@ -155,15 +181,14 @@
       }
       fileListDiv.classList.remove("hidden");
       const { hasImages, hasPDFs } = getFilesInfo(files);
       let modeText = "";
       if (hasImages && hasPDFs) {
-        modeText = "الوضع الحالي: دمج صور + ملفات PDF في ملف واحد حسب الترتيب.";
       } else if (hasPDFs) {
-        modeText = "الوضع الحالي: دمج ملفات PDF في ملف واحد.";
       } else if (hasImages) {
-        modeText = "الوضع الحالي: تحويل صور إلى ملف PDF واحد.";
       } else {
         modeText = "لا توجد ملفات مدعومة في القائمة.";
       }
@@ -171,7 +196,7 @@
       fileListDiv.innerHTML = `
         <div class="file-list-header">
           <span>الملفات المختارة: ${files.length}</span>
-          <span class="file-note">يمكنك إعادة ترتيب الملفات أو حذف أي ملف قبل الدمج.</span>
         </div>
         <div class="mode-label">${modeText}</div>
         <ul class="file-list-ul">
@@ -185,7 +210,7 @@
                 <div class="row-actions">
                   <button class="move-btn" data-index="${i}" data-dir="up" title="نقل لأعلى">▲</button>
                   <button class="move-btn" data-index="${i}" data-dir="down" title="نقل لأسفل">▼</button>
-                  <button class="delete-btn" data-index="${i}" title="حذف هذا الملف">🗑️</button>
                 </div>
               </li>`
             )
@@ -193,7 +218,7 @@
         </ul>
       `;
-      // تحذير إذا العدد كبير
       if (files.length > MAX_RECOMMENDED_FILES) {
         setStatus(
           "تنبيه: عدد الملفات كبير، قد تستغرق عملية الدمج وقتًا أطول على بعض الأجهزة.",
@@ -201,19 +226,22 @@
         );
       }
-      // ربط أزرار الحذف
       fileListDiv.querySelectorAll(".delete-btn").forEach((btn) => {
         btn.addEventListener("click", (e) => {
           const index = parseInt(e.currentTarget.dataset.index, 10);
           if (!isNaN(index)) {
             selectedFiles.splice(index, 1);
             renderFileList(selectedFiles);
-            if (!selectedFiles.length) setStatus("");
           }
         });
       });
-      // ربط أزرار إعادة الترتيب
       fileListDiv.querySelectorAll(".move-btn").forEach((btn) => {
         btn.addEventListener("click", (e) => {
           const index = parseInt(e.currentTarget.dataset.index, 10);
@@ -251,7 +279,7 @@
       const newFilesRaw = Array.from(filesInput.files || []);
       if (!newFilesRaw.length) return;
-      // نسمح فقط بالصور و PDF، نتجاهل غيرها
       const newFiles = newFilesRaw.filter((f) => isImage(f) || isPDF(f));
       const map = new Map();
@@ -264,20 +292,20 @@
       renderFileList(selectedFiles);
       setStatus("");
-      // إفراغ input للسماح بالاختيار مرة أخرى
       filesInput.value = "";
     });
-    // زر مسح جميع الملفات
     clearBtn.addEventListener("click", () => {
       selectedFiles = [];
       renderFileList([]);
       setStatus("تم مسح جميع الملفات المختارة.", "ok");
       filesInput.value = "";
       outputNameInput.value = "";
     });
-    // عملية الدمج
     mergeBtn.addEventListener("click", async () => {
       const files = [...selectedFiles];
@@ -286,7 +314,7 @@
         return;
       }
-      // تأكيد أن كل الملفات مدعومة
       const unsupported = files.filter((f) => !isImage(f) && !isPDF(f));
       if (unsupported.length) {
         setStatus("يوجد ملفات غير مدعومة. يرجى حذفها من القائمة.", "error");
@@ -303,16 +331,22 @@
       try {
         setStatus("جاري معالجة الملفات...", "loading");
         mergeBtn.disabled = true;
         mergeBtn.classList.add("disabled");
         const pdfDoc = await PDFLib.PDFDocument.create();
         for (const file of files) {
           const bytes = await file.arrayBuffer();
           if (isPDF(file)) {
-            // نسخ صفحات PDF كما هي
             const donorPdf = await PDFLib.PDFDocument.load(bytes);
             const pages = await pdfDoc.copyPages(
               donorPdf,
@@ -320,7 +354,6 @@
             );
             pages.forEach((p) => pdfDoc.addPage(p));
           } else if (isImage(file)) {
-            // إضافة الصورة في صفحة A4
             const lower = file.name.toLowerCase();
             let image;
             if (
@@ -336,18 +369,20 @@
             const imgWidth = image.width;
             const imgHeight = image.height;
-            const pageWidth = 595.28;   // A4
-            const pageHeight = 841.89;  // A4
-            const page = pdfDoc.addPage([pageWidth, pageHeight]);
             const scale = Math.min(pageWidth / imgWidth, pageHeight / imgHeight);
             const drawWidth = imgWidth * scale;
             const drawHeight = imgHeight * scale;
             const x = (pageWidth - drawWidth) / 2;
             const y = (pageHeight - drawHeight) / 2;
             page.drawImage(image, { x, y, width: drawWidth, height: drawHeight });
           }
         }
         const pdfBytes = await pdfDoc.save();
@@ -362,14 +397,15 @@
         downloadPdf(pdfBytes, outName);
         setStatus("تم إنشاء ملف PDF النهائي بنجاح.", "ok");
-        // لا نفرغ الاسم، لكن نفرغ الملفات
         selectedFiles = [];
         renderFileList([]);
         filesInput.value = "";
       } catch (err) {
         console.error(err);
         setStatus("حدث خطأ أثناء المعالجة. تأكد من الملفات وحاول مرة أخرى.", "error");
       } finally {
         mergeBtn.disabled = false;
         mergeBtn.classList.remove("disabled");

 <html lang="ar" dir="rtl">
 <head>
   <meta charset="UTF-8" />
+  <title>أداة دمج ملفات المجموعة | PDF واحد بسهولة</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="style.css" />
   <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
         <div class="logo-mark">PDF</div>
         <div class="brand-text">
           <div class="brand-title">أداة دمج ملفات المجموعة</div>
+          <div class="brand-sub">دمج احترافي لصور وملفات PDF في ملف واحد بحجم A4</div>
         </div>
       </div>
       <div class="top-right">
       <!-- تعريف بسيط -->
       <section class="hero">
+        <h1>ادمج ملفاتك بسهولة في ملف PDF واحد بحجم A4.</h1>
         <p>
+          يمكنك اختيار صور، ملفات PDF، أو مزيج منهما، وسيتم دمجها في ملف PDF واحد،
+          مع الحفاظ على كامل محتوى الصفحات والصور، وتنسيقها في صفحات A4 دون قص.
         </p>
       </section>
         </div>
         <div class="step">
           <span class="step-number">2</span>
+          <span class="step-text">أعد ترتيب الملفات، احذف ما لا تحتاجه قبل الدمج.</span>
         </div>
         <div class="step">
           <span class="step-number">3</span>
+          <span class="step-text">اضغط دمج وشاهد نسبة التقدم حتى يكتمل ملف PDF.</span>
         </div>
       </section>
             <strong>صور JPG / PNG</strong>،
             أو
             <strong>دمج الاثنين معًا</strong> في ملف PDF واحد.
+            يتم الدمج وفق الترتيب الظاهر في القائمة أدناه، مع وضع الصور في صفحات A4 كاملة دون قص.
           </p>
           <label class="file-picker">
         <!-- حالة العملية -->
         <div id="status" class="status"></div>
+        <!-- شريط التقدم -->
+        <div id="progress" class="progress hidden">
+          <div id="progressText" class="progress-text">جاري المعالجة...</div>
+          <div class="progress-bar">
+            <div id="progressFill" class="progress-fill"></div>
+          </div>
+        </div>
       </section>
     </main>
   </div>
     const statusDiv = document.getElementById("status");
     const fileListDiv = document.getElementById("fileList");
     const outputNameInput = document.getElementById("outputName");
+    const progressDiv = document.getElementById("progress");
+    const progressText = document.getElementById("progressText");
+    const progressFill = document.getElementById("progressFill");
     let selectedFiles = [];
+    const MAX_RECOMMENDED_FILES = 200; // تنبيه فقط
     function setStatus(msg, type = "") {
       statusDiv.textContent = msg;
       if (!msg) statusDiv.className = "status";
     }
+    function showProgress(show) {
+      if (show) {
+        progressDiv.classList.remove("hidden");
+        progressFill.style.width = "0%";
+        progressText.textContent = "جاري المعالجة...";
+      } else {
+        progressDiv.classList.add("hidden");
+      }
+    }
+    function setProgress(current, total, label = "جاري المعالجة") {
+      if (!total || total < 1) total = 1;
+      const percent = Math.floor((current / total) * 100);
+      progressFill.style.width = percent + "%";
+      progressText.textContent = `${label} (${current} من ${total}) - ${percent}%`;
+    }
     function isImage(file) {
       const name = file.name.toLowerCase();
       return (
       }
       fileListDiv.classList.remove("hidden");
       const { hasImages, hasPDFs } = getFilesInfo(files);
       let modeText = "";
       if (hasImages && hasPDFs) {
+        modeText = "الوضع الحالي: دمج صور + ملفات PDF في ملف واحد بحجم A4 لكل صفحة.";
       } else if (hasPDFs) {
+        modeText = "الوضع الحالي: دمج ملفات PDF في ملف واحد (بدون تغيير محتوى الصفحات).";
       } else if (hasImages) {
+        modeText = "الوضع الحالي: تحويل صور إلى ملف PDF واحد بحجم A4 لكل صفحة.";
       } else {
         modeText = "لا توجد ملفات مدعومة في القائمة.";
       }
       fileListDiv.innerHTML = `
         <div class="file-list-header">
           <span>الملفات المختارة: ${files.length}</span>
+          <span class="file-note">يمكنك إعادة الترتيب أو حذف أي ملف قبل الدمج.</span>
         </div>
         <div class="mode-label">${modeText}</div>
         <ul class="file-list-ul">
                 <div class="row-actions">
                   <button class="move-btn" data-index="${i}" data-dir="up" title="نقل لأعلى">▲</button>
                   <button class="move-btn" data-index="${i}" data-dir="down" title="نقل لأسفل">▼</button>
+                  <button class="delete-btn" data-index="${i}" title="حذف الملف">🗑️</button>
                 </div>
               </li>`
             )
         </ul>
       `;
+      // تحذير عدد كبير
       if (files.length > MAX_RECOMMENDED_FILES) {
         setStatus(
           "تنبيه: عدد الملفات كبير، قد تستغرق عملية الدمج وقتًا أطول على بعض الأجهزة.",
         );
       }
+      // أزرار الحذف
       fileListDiv.querySelectorAll(".delete-btn").forEach((btn) => {
         btn.addEventListener("click", (e) => {
           const index = parseInt(e.currentTarget.dataset.index, 10);
           if (!isNaN(index)) {
             selectedFiles.splice(index, 1);
             renderFileList(selectedFiles);
+            if (!selectedFiles.length) {
+              setStatus("");
+              showProgress(false);
+            }
           }
         });
       });
+      // أزرار إعادة الترتيب
       fileListDiv.querySelectorAll(".move-btn").forEach((btn) => {
         btn.addEventListener("click", (e) => {
           const index = parseInt(e.currentTarget.dataset.index, 10);
       const newFilesRaw = Array.from(filesInput.files || []);
       if (!newFilesRaw.length) return;
+      // نسمح فقط بالصور و PDF
       const newFiles = newFilesRaw.filter((f) => isImage(f) || isPDF(f));
       const map = new Map();
       renderFileList(selectedFiles);
       setStatus("");
       filesInput.value = "";
     });
+    // مسح الكل
     clearBtn.addEventListener("click", () => {
       selectedFiles = [];
       renderFileList([]);
       setStatus("تم مسح جميع الملفات المختارة.", "ok");
       filesInput.value = "";
       outputNameInput.value = "";
+      showProgress(false);
     });
+    // عملية الدمج مع شريط التقدم
     mergeBtn.addEventListener("click", async () => {
       const files = [...selectedFiles];
         return;
       }
+      // التحقق من الملفات المدعومة
       const unsupported = files.filter((f) => !isImage(f) && !isPDF(f));
       if (unsupported.length) {
         setStatus("يوجد ملفات غير مدعومة. يرجى حذفها من القائمة.", "error");
       try {
         setStatus("جاري معالجة الملفات...", "loading");
+        showProgress(true);
         mergeBtn.disabled = true;
         mergeBtn.classList.add("disabled");
         const pdfDoc = await PDFLib.PDFDocument.create();
+        const totalSteps = files.length;
+        let currentStep = 0;
+        // مقاس A4 ثابت
+        const pageWidth = 595.28;
+        const pageHeight = 841.89;
         for (const file of files) {
           const bytes = await file.arrayBuffer();
           if (isPDF(file)) {
             const donorPdf = await PDFLib.PDFDocument.load(bytes);
             const pages = await pdfDoc.copyPages(
               donorPdf,
             );
             pages.forEach((p) => pdfDoc.addPage(p));
           } else if (isImage(file)) {
             const lower = file.name.toLowerCase();
             let image;
             if (
             const imgWidth = image.width;
             const imgHeight = image.height;
+            // تصغير ملائم: إدراج الصورة كاملة داخل A4 دون قص
             const scale = Math.min(pageWidth / imgWidth, pageHeight / imgHeight);
             const drawWidth = imgWidth * scale;
             const drawHeight = imgHeight * scale;
             const x = (pageWidth - drawWidth) / 2;
             const y = (pageHeight - drawHeight) / 2;
+            const page = pdfDoc.addPage([pageWidth, pageHeight]);
             page.drawImage(image, { x, y, width: drawWidth, height: drawHeight });
           }
+          currentStep += 1;
+          setProgress(currentStep, totalSteps, "معالجة الملفات");
         }
         const pdfBytes = await pdfDoc.save();
         downloadPdf(pdfBytes, outName);
         setStatus("تم إنشاء ملف PDF النهائي بنجاح.", "ok");
+        showProgress(false);
         selectedFiles = [];
         renderFileList([]);
         filesInput.value = "";
       } catch (err) {
         console.error(err);
         setStatus("حدث خطأ أثناء المعالجة. تأكد من الملفات وحاول مرة أخرى.", "error");
+        showProgress(false);
       } finally {
         mergeBtn.disabled = false;
         mergeBtn.classList.remove("disabled");