Spaces:

stat2025
/

PDF

Running

App Files Files Community

stat2025 commited on Jan 27

Commit

06124c0

verified ·

1 Parent(s): d5229a7

Update index.html

Browse files

Files changed (1) hide show

index.html +69 -71

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" />
   <!-- خط Tajawal -->
   <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -21,14 +21,18 @@
     <!-- المحتوى الرئيسي -->
     <main class="main">
-      <!-- هيرو تعريفي -->
       <section class="hero">
         <div class="logo-mark">PDF</div>
-        <h1>أدمـج ملـفاتك بسهولـة</h1>
       </section>
-      <!-- خطوات سريعة -->
       <section class="steps">
         <div class="step">
           <span class="step-number">1</span>
@@ -36,20 +40,25 @@
         </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>
-      <!-- الكارد الرئيسي -->
       <section class="card main-card">
-        <!-- القسم 1: اختيار الملفات -->
         <div class="card-section card-select">
-          <h2 class="card-title"> اختيار الملفات المراد دمجها بي دي اف او صور او الاثنين معاً</h2>
           <label class="file-picker">
             <span class="file-picker-icon">📂</span>
@@ -58,19 +67,19 @@
           </label>
         </div>
-        <!-- القسم 2: قائمة الملفات -->
         <div class="card-section">
           <div id="fileList" class="file-list hidden"></div>
         </div>
-        <!-- القسم 3: الإخراج والأزرار -->
         <div class="card-section card-output">
           <div class="card-row inline">
             <label for="outputName" class="card-label">
               اسم ملف الإخراج (اختياري)
               <span class="label-note">
-                في حال تركه فارغًا سيتم استخدام تاريخ اليوم تلقائيًا،
-                <strong>مثال: 2025-11-12.pdf</strong>
               </span>
             </label>
             <input
@@ -183,50 +192,43 @@
       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 = "لا توجد ملفا�� مدعومة في القائمة.";
       }
       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">
-          ${files
-            .map(
-              (f, i) => `
-              <li>
-                <span class="index">${i + 1}</span>
-                <span class="name" title="${f.name}">${f.name}</span>
-                <span class="size">${(f.size / 1024).toFixed(1)} كيلوبايت</span>
-                <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>`
-            )
-            .join("")}
         </ul>
       `;
       if (files.length > MAX_RECOMMENDED_FILES) {
-        setStatus(
-          "تنبيه: عدد الملفات كبير، قد تستغرق عملية الدمج وقتًا أطول على بعض الأجهزة.",
-          "warning"
-        );
       }
-      // حذف ملف
       fileListDiv.querySelectorAll(".delete-btn").forEach((btn) => {
         btn.addEventListener("click", (e) => {
           const index = parseInt(e.currentTarget.dataset.index, 10);
@@ -241,7 +243,7 @@
         });
       });
-      // إعادة الترتيب
       fileListDiv.querySelectorAll(".move-btn").forEach((btn) => {
         btn.addEventListener("click", (e) => {
           const index = parseInt(e.currentTarget.dataset.index, 10);
@@ -249,11 +251,9 @@
           if (isNaN(index)) return;
           if (dir === "up" && index > 0) {
-            [selectedFiles[index - 1], selectedFiles[index]] =
-              [selectedFiles[index], selectedFiles[index - 1]];
           } else if (dir === "down" && index < selectedFiles.length - 1) {
-            [selectedFiles[index + 1], selectedFiles[index]] =
-              [selectedFiles[index], selectedFiles[index + 1]];
           }
           renderFileList(selectedFiles);
         });
@@ -272,14 +272,15 @@
       URL.revokeObjectURL(url);
     }
-    // إضافة ملفات على دفعات
     filesInput.addEventListener("change", () => {
       const newFilesRaw = Array.from(filesInput.files || []);
       if (!newFilesRaw.length) return;
       const newFiles = newFilesRaw.filter((f) => isImage(f) || isPDF(f));
-      const map = new Map();
       [...selectedFiles, ...newFiles].forEach((f) => {
         const key = `${f.name}|${f.size}|${f.lastModified}`;
         if (!map.has(key)) map.set(key, f);
@@ -287,8 +288,9 @@
       selectedFiles = Array.from(map.values());
       renderFileList(selectedFiles);
       setStatus("");
-      filesInput.value = "";
     });
     // مسح الكل
@@ -297,10 +299,11 @@
       renderFileList([]);
       setStatus("تم مسح جميع الملفات المختارة.", "ok");
       filesInput.value = "";
       showProgress(false);
     });
-    // عملية الدمج
     mergeBtn.addEventListener("click", async () => {
       const files = [...selectedFiles];
@@ -315,23 +318,19 @@
         return;
       }
-      const { hasImages, hasPDFs } = getFilesInfo(files);
-      if (!hasImages && !hasPDFs) {
-        setStatus("لا توجد ملفات مدعومة للدمج.", "error");
-        return;
-      }
       renderFileList(files);
       try {
-        setStatus("جاري معالجة الملفات...", "loading");
         showProgress(true);
         mergeBtn.disabled = true;
         mergeBtn.classList.add("disabled");
         filesInput.disabled = true;
         clearBtn.disabled = true;
         const pdfDoc = await PDFLib.PDFDocument.create();
         const totalSteps = files.length;
         let currentStep = 0;
@@ -339,32 +338,30 @@
           const bytes = await file.arrayBuffer();
           if (isPDF(file)) {
-            // نسخ صفحات PDF كما هي
             const donorPdf = await PDFLib.PDFDocument.load(bytes);
-            const pages = await pdfDoc.copyPages(
-              donorPdf,
-              donorPdf.getPageIndices()
-            );
             pages.forEach((p) => pdfDoc.addPage(p));
           } else if (isImage(file)) {
-            // إدراج الصورة في صفحة جديدة بنفس أبعاد الصورة (بدون تغيير المقاس)
             const lower = file.name.toLowerCase();
             let image;
             if (
               file.type === "image/jpeg" ||
               file.type === "image/jpg" ||
               lower.endsWith(".jpg") ||
               lower.endsWith(".jpeg")
             ) {
-              image = await pdfDoc.embedJpg(bytes);
             } else {
-              image = await pdfDoc.embedPng(bytes);
             }
             const imgW = image.width;
             const imgH = image.height;
-            // صفحة بنفس أبعاد الصورة
             const page = pdfDoc.addPage([imgW, imgH]);
             page.drawImage(image, { x: 0, y: 0, width: imgW, height: imgH });
           }
@@ -373,15 +370,16 @@
           setProgress(currentStep, totalSteps);
         }
-        const pdfBytes = await pdfDoc.save();
-        // الاسم الافتراضي: تاريخ اليوم إذا لم يُكتب اسم
         const defaultName = getTodayDateString() + ".pdf";
-        const outName =
-          (outputNameInput.value || defaultName).trim() || defaultName;
         downloadPdf(pdfBytes, outName);
-        setStatus("تم إنشاء ملف PDF النهائي بنجاح.", "ok");
         showProgress(false);
         selectedFiles = [];
@@ -389,7 +387,7 @@
         filesInput.value = "";
       } catch (err) {
         console.error(err);
-        setStatus("حدث خطأ أثناء المعالجة. تأكد من الملفات وحاول مرة أخرى.", "error");
         showProgress(false);
       } finally {
         mergeBtn.disabled = false;

 <html lang="ar" dir="rtl">
 <head>
   <meta charset="UTF-8" />
+  <title>أداة دمج ملفات المجموعة | PDF بدون تغيير الدقة</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <!-- خط Tajawal -->
   <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700&display=swap" rel="stylesheet">
     <!-- المحتوى الرئيسي -->
     <main class="main">
+      <!-- هيرو -->
       <section class="hero">
         <div class="logo-mark">PDF</div>
+        <h1>ادمج ملفاتك في PDF واحد بدون تغيير الدقة أو المقاس.</h1>
+        <p>
+          يدعم دمج صور (JPG/PNG) وملفات PDF معًا في ملف واحد.
+          لا يتم ضغط الصور أو تغيير دقتها، والصور تُدرج في صفحات بأبعادها الأصلية،
+          وصفحات PDF تُنسخ كما هي.
+        </p>
       </section>
+      <!-- خطوات -->
       <section class="steps">
         <div class="step">
           <span class="step-number">1</span>
         </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>
+      <!-- الكارد -->
       <section class="card main-card">
+        <!-- اختيار الملفات -->
         <div class="card-section card-select">
+          <h2 class="card-title">اختيار الملفات المراد دمجها</h2>
+          <p class="hint">
+            ✅ الدمج حسب الترتيب في القائمة. <br>
+            ✅ الصور: تُدرج كما هي (بدون ضغط/بدون تغيير دقة/بدون تغيير مقاس). <br>
+            ✅ PDF: يتم نسخ الصفحات كما هي.
+          </p>
           <label class="file-picker">
             <span class="file-picker-icon">📂</span>
           </label>
         </div>
+        <!-- قائمة الملفات -->
         <div class="card-section">
           <div id="fileList" class="file-list hidden"></div>
         </div>
+        <!-- الإخراج -->
         <div class="card-section card-output">
           <div class="card-row inline">
             <label for="outputName" class="card-label">
               اسم ملف الإخراج (اختياري)
               <span class="label-note">
+                إذا تركته فارغًا سيتم استخدام تاريخ اليوم تلقائيًا.
+                <strong>مثال: 2026-01-27.pdf</strong>
               </span>
             </label>
             <input
       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 (كل صورة بصفحة بنفس أبعادها الأصلية).";
       }
       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">
+          ${files.map((f, i) => `
+            <li>
+              <span class="index">${i + 1}</span>
+              <span class="name" title="${f.name}">${f.name}</span>
+              <span class="size">${(f.size / 1024).toFixed(1)} كيلوبايت</span>
+              <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>
+          `).join("")}
         </ul>
       `;
       if (files.length > MAX_RECOMMENDED_FILES) {
+        setStatus("تنبيه: عدد الملفات كبير، قد تستغرق عملية الدمج وقتًا أطول على بعض الأجهزة.", "warning");
       }
+      // حذف
       fileListDiv.querySelectorAll(".delete-btn").forEach((btn) => {
         btn.addEventListener("click", (e) => {
           const index = parseInt(e.currentTarget.dataset.index, 10);
         });
       });
+      // ترتيب
       fileListDiv.querySelectorAll(".move-btn").forEach((btn) => {
         btn.addEventListener("click", (e) => {
           const index = parseInt(e.currentTarget.dataset.index, 10);
           if (isNaN(index)) return;
           if (dir === "up" && index > 0) {
+            [selectedFiles[index - 1], selectedFiles[index]] = [selectedFiles[index], selectedFiles[index - 1]];
           } else if (dir === "down" && index < selectedFiles.length - 1) {
+            [selectedFiles[index + 1], selectedFiles[index]] = [selectedFiles[index], selectedFiles[index + 1]];
           }
           renderFileList(selectedFiles);
         });
       URL.revokeObjectURL(url);
     }
+    // إضافة ملفات على دفعات (بدون فقد التحديد)
     filesInput.addEventListener("change", () => {
       const newFilesRaw = Array.from(filesInput.files || []);
       if (!newFilesRaw.length) return;
       const newFiles = newFilesRaw.filter((f) => isImage(f) || isPDF(f));
+      // إزالة التكرار (بالاسم+الحجم+آخر تعديل)
+      const map = new Map();
       [...selectedFiles, ...newFiles].forEach((f) => {
         const key = `${f.name}|${f.size}|${f.lastModified}`;
         if (!map.has(key)) map.set(key, f);
       selectedFiles = Array.from(map.values());
       renderFileList(selectedFiles);
       setStatus("");
+      filesInput.value = ""; // يسمح بإضافة ملفات مرة أخرى حتى لو نفس الاسم
     });
     // مسح الكل
       renderFileList([]);
       setStatus("تم مسح جميع الملفات المختارة.", "ok");
       filesInput.value = "";
+      outputNameInput.value = "";
       showProgress(false);
     });
+    // الدمج
     mergeBtn.addEventListener("click", async () => {
       const files = [...selectedFiles];
         return;
       }
       renderFileList(files);
       try {
+        setStatus("جاري الدمج بدون تغيير الدقة...", "loading");
         showProgress(true);
         mergeBtn.disabled = true;
         mergeBtn.classList.add("disabled");
         filesInput.disabled = true;
         clearBtn.disabled = true;
         const pdfDoc = await PDFLib.PDFDocument.create();
         const totalSteps = files.length;
         let currentStep = 0;
           const bytes = await file.arrayBuffer();
           if (isPDF(file)) {
+            // ✅ نسخ صفحات PDF كما هي تمامًا
             const donorPdf = await PDFLib.PDFDocument.load(bytes);
+            const pages = await pdfDoc.copyPages(donorPdf, donorPdf.getPageIndices());
             pages.forEach((p) => pdfDoc.addPage(p));
           } else if (isImage(file)) {
+            // ✅ إدراج الصورة كما هي: لا ضغط، لا تغيير بكسلات، لا تغيير تحجيم
             const lower = file.name.toLowerCase();
             let image;
             if (
               file.type === "image/jpeg" ||
               file.type === "image/jpg" ||
               lower.endsWith(".jpg") ||
               lower.endsWith(".jpeg")
             ) {
+              image = await pdfDoc.embedJpg(bytes); // لا إعادة ترميز
             } else {
+              image = await pdfDoc.embedPng(bytes); // لا إعادة ترميز
             }
             const imgW = image.width;
             const imgH = image.height;
+            // ✅ صفحة بنفس أبعاد الصورة تمامًا
             const page = pdfDoc.addPage([imgW, imgH]);
             page.drawImage(image, { x: 0, y: 0, width: imgW, height: imgH });
           }
           setProgress(currentStep, totalSteps);
         }
+        // ✅ حفظ بدون ضغط خساري، وتحسين تنظيم الكائنات فقط
+        const pdfBytes = await pdfDoc.save({ useObjectStreams: true });
+        // الاسم الافتراضي = تاريخ اليوم
         const defaultName = getTodayDateString() + ".pdf";
+        const outName = (outputNameInput.value || defaultName).trim() || defaultName;
         downloadPdf(pdfBytes, outName);
+        setStatus("تم إنشاء ملف PDF النهائي بنجاح (بدون تغيير الدقة).", "ok");
         showProgress(false);
         selectedFiles = [];
         filesInput.value = "";
       } catch (err) {
         console.error(err);
+        setStatus("حدث خطأ أثناء الدمج. تأكد من الملفات وحاول مرة أخرى.", "error");
         showProgress(false);
       } finally {
         mergeBtn.disabled = false;