Spaces:

stat2025
/

PDF

Running

App Files Files Community

stat2025 commited on Nov 9

Commit

be4e2eb

verified ·

1 Parent(s): d985689

Update index.html

Browse files

Files changed (1) hide show

index.html +239 -67

index.html CHANGED Viewed

@@ -2,56 +2,151 @@
 <html lang="ar" dir="rtl">
 <head>
   <meta charset="UTF-8" />
-  <title>دمج الملفات إلى PDF - stat2025</title>
   <link rel="stylesheet" href="style.css" />
-  <!-- مكتبة PDF-LIB للمعالجة داخل المتصفح -->
   <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
 </head>
 <body>
-  <div class="container">
-    <h1>أداة دمج وتحويل الملفات إلى PDF</h1>
-    <p class="subtitle">
-      يتم تنفيذ جميع العمليات على جهازك مباشرة، ولا يتم تخزين أي ملف في الخادم.
-    </p>
-    <!-- اختيار نوع الملفات قبل الرفع -->
-    <div class="card">
-      <h2>① اختر نوع الملفات</h2>
-      <label class="option">
-        <input type="radio" name="fileType" value="images" checked />
-        تحويل مجموعة صور (JPG/PNG) إلى ملف PDF واحد
-      </label>
-      <label class="option">
-        <input type="radio" name="fileType" value="pdfs" />
-        دمج ملفات PDF متعددة في ملف PDF واحد
-      </label>
-    </div>
-    <!-- رفع الملفات -->
-    <div class="card">
-      <h2>② اختر الملفات</h2>
-      <input id="files" type="file" multiple />
-      <p class="hint">
-        للصور: اختر ملفات JPG أو PNG.
-        لملفات PDF: اختر ملفات PDF المراد دمجها.
-      </p>
-    </div>
-    <!-- زر التنفيذ -->
-    <button id="mergeBtn" class="btn-main">دمج وإنشاء ملف PDF</button>
-    <!-- منطقة الرسائل -->
-    <div id="status" class="status"></div>
   </div>
   <script>
     const filesInput = document.getElementById("files");
     const mergeBtn = document.getElementById("mergeBtn");
     const statusDiv = document.getElementById("status");
-    function setStatus(msg, isError = false) {
       statusDiv.textContent = msg;
-      statusDiv.className = "status " + (isError ? "error" : "ok");
     }
     function getSelectedType() {
@@ -59,6 +154,29 @@
       return checked ? checked.value : null;
     }
     function downloadPdf(bytes, filename) {
       const blob = new Blob([bytes], { type: "application/pdf" });
       const url = URL.createObjectURL(blob);
@@ -71,32 +189,79 @@
       URL.revokeObjectURL(url);
     }
     mergeBtn.addEventListener("click", async () => {
       const selectedType = getSelectedType();
-      const files = Array.from(filesInput.files || []);
       if (!selectedType) {
-        setStatus("الرجاء اختيار نوع الملفات ��ولاً.", true);
         return;
       }
       if (!files.length) {
-        setStatus("الرجاء اختيار الملفات المراد معالجتها.", true);
         return;
       }
-      // ترتيب حسب الاسم للحفاظ على التسلسل
-      files.sort((a, b) =>
         a.name.localeCompare(b.name, undefined, { numeric: true })
       );
       try {
-        setStatus("جاري المعالجة، يرجى الانتظار...");
         if (selectedType === "images") {
-          // التحقق
           if (!files.every(f => f.type.startsWith("image/"))) {
-            setStatus("جميع الملفات يجب أن تكون صور (JPG/PNG) عند اختيار هذا الخيار.", true);
             return;
           }
@@ -105,12 +270,13 @@
           for (const file of files) {
             const bytes = await file.arrayBuffer();
             let image;
             if (
               file.type === "image/jpeg" ||
               file.type === "image/jpg" ||
-              file.name.toLowerCase().endsWith(".jpg") ||
-              file.name.toLowerCase().endsWith(".jpeg")
             ) {
               image = await pdfDoc.embedJpg(bytes);
             } else {
@@ -120,35 +286,36 @@
             const imgWidth = image.width;
             const imgHeight = image.height;
-            // حجم صفحة A4 تقريبي
-            const pageWidth = 595.28;
-            const pageHeight = 841.89;
             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();
-          downloadPdf(pdfBytes, "merged-images.pdf");
-          setStatus("تم إنشاء وتحميل ملف PDF بنجاح. ✅");
         }
         if (selectedType === "pdfs") {
-          // التحقق
-          if (!files.every(f => f.type === "application/pdf" || f.name.toLowerCase().endsWith(".pdf"))) {
-            setStatus("جميع الملفات يجب أن تكون بصيغة PDF عند اختيار هذا الخيار.", true);
             return;
           }
@@ -165,15 +332,20 @@
           }
           const pdfBytes = await pdfDoc.save();
-          downloadPdf(pdfBytes, "merged-pdfs.pdf");
-          setStatus("تم دمج ملفات PDF وتحميل الملف النهائي. ✅");
         }
-        // تنظيف: لا نحتفظ بأي ملفات - كل شيء في الذاكرة فقط
         filesInput.value = "";
       } catch (err) {
         console.error(err);
-        setStatus("حدث خطأ أثناء المعالجة. تأكد من الملفات وحاول مرة أخرى.", true);
       }
     });
   </script>

 <html lang="ar" dir="rtl">
 <head>
   <meta charset="UTF-8" />
+  <title>stat2025 | دمج وتحويل الملفات إلى 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>
 </head>
 <body>
+  <div class="page">
+    <!-- شريط علوي -->
+    <header class="topbar">
+      <div class="brand">
+        <div class="logo-circle">P</div>
+        <div class="brand-text">
+          <div class="brand-title">stat2025 PDF Studio</div>
+          <div class="brand-sub">تحويل ودمج آمن بالكامل على جهازك</div>
+        </div>
+      </div>
+      <nav class="nav">
+        <a href="#" class="nav-link active">الرئيسية</a>
+        <a href="#" class="nav-link muted">الخصوصية</a>
+      </nav>
+    </header>
+    <!-- المحتوى الرئيسي -->
+    <main class="main">
+      <section class="hero">
+        <h1>أرفع ملفاتك، دمج احترافي، حفظ على جهازك فقط.</h1>
+        <p>
+          أداة بسيطة وأنيقة لدمج الصور أو ملفات PDF في ملف واحد.
+          جميع العمليات تتم في المتصفح، دون رفع أو تخزين في أي خادم.
+        </p>
+      </section>
+      <!-- خطوات إرشادية -->
+      <section class="steps">
+        <div class="step">
+          <div class="step-number">1</div>
+          <div class="step-text">اختر نوع الملفات (صور أو PDF).</div>
+        </div>
+        <div class="step">
+          <div class="step-number">2</div>
+          <div class="step-text">قم بسحب وإفلات الملفات أو اختيارها من جهازك.</div>
+        </div>
+        <div class="step">
+          <div class="step-number">3</div>
+          <div class="step-text">اضغط دمج لتحميل ملف PDF النهائي فورًا.</div>
+        </div>
+      </section>
+      <!-- كرت الإعداد والرفع -->
+      <section class="card main-card">
+        <!-- نوع الملفات -->
+        <div class="card-row">
+          <h2 class="card-title">نوع الملفات</h2>
+          <div class="options">
+            <label class="option-pill">
+              <input type="radio" name="fileType" value="images" checked />
+              <span>صور ➜ PDF واحد</span>
+            </label>
+            <label class="option-pill">
+              <input type="radio" name="fileType" value="pdfs" />
+              <span>دمج ملفات PDF متعددة</span>
+            </label>
+          </div>
+        </div>
+        <!-- منطقة السحب والإفلات -->
+        <div class="card-row">
+          <h2 class="card-title">اختيار الملفات</h2>
+          <div id="dropzone" class="dropzone">
+            <div class="dropzone-icon">
+              <!-- أيقونة بسيطة -->
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 2L7 7h3v6h4V7h3L12 2zM5 15h14v5H5z"/>
+              </svg>
+            </div>
+            <div class="dropzone-text">
+              اسحب الملفات إلى هنا
+              <span>أو اضغط للاختيار من جهازك</span>
+            </div>
+            <input id="files" type="file" multiple />
+          </div>
+          <p class="hint">
+            للصور: يدعم JPG / JPEG / PNG.
+            لملفات PDF: يدعم دمج جميع الصفحا�� بالترتيب حسب اسم الملف.
+          </p>
+        </div>
+        <!-- قائمة الملفات المختارة -->
+        <div id="fileList" class="file-list hidden"></div>
+        <!-- اسم الملف الناتج (اختياري) -->
+        <div class="card-row inline">
+          <label for="outputName" class="card-title small">اسم ملف الإخراج (اختياري)</label>
+          <input id="outputName" type="text" class="output-input"
+                 placeholder="مثال: report-merged.pdf" />
+        </div>
+        <!-- زر التنفيذ -->
+        <div class="actions">
+          <button id="mergeBtn" class="btn-main">
+            دمج وإنشاء ملف PDF
+          </button>
+        </div>
+        <!-- حالة النظام -->
+        <div id="status" class="status"></div>
+      </section>
+      <!-- جزء توضيح الخصوصية -->
+      <section class="privacy">
+        <h3>الخصوصية أولاً</h3>
+        <p>
+          ❖ لا يتم إرسال ملفاتك إلى أي خادم.
+          ❖ تتم جميع العمليات باستخدام JavaScript داخل متصفحك.
+          ❖ بعد التحميل، يمكنك إغلاق الصفحة بأمان دون أي بقايا.
+        </p>
+      </section>
+    </main>
+    <!-- تذييل -->
+    <footer class="footer">
+      <span>stat2025 • PDF Tools</span>
+      <span class="dot">•</span>
+      <span>إصدار متقدم بواجهة احترافية</span>
+    </footer>
   </div>
   <script>
     const filesInput = document.getElementById("files");
     const mergeBtn = document.getElementById("mergeBtn");
     const statusDiv = document.getElementById("status");
+    const fileListDiv = document.getElementById("fileList");
+    const dropzone = document.getElementById("dropzone");
+    const outputNameInput = document.getElementById("outputName");
+    function setStatus(msg, type = "ok") {
       statusDiv.textContent = msg;
+      statusDiv.className = "status " + type;
+      if (!msg) statusDiv.className = "status";
     }
     function getSelectedType() {
       return checked ? checked.value : null;
     }
+    function renderFileList(files) {
+      if (!files.length) {
+        fileListDiv.classList.add("hidden");
+        fileListDiv.innerHTML = "";
+        return;
+      }
+      fileListDiv.classList.remove("hidden");
+      fileListDiv.innerHTML = `
+        <div class="file-list-header">
+          <span>الملفات المختارة (${files.length})</span>
+          <span class="file-note">يتم الدمج حسب الترتيب الأبجدي لاسم الملف.</span>
+        </div>
+        <ul class="file-list-ul">
+          ${files
+            .map(
+              (f, i) =>
+                `<li><span class="index">${i + 1}</span><span class="name">${f.name}</span><span class="size">${(f.size / 1024).toFixed(1)} كيلوبايت</span></li>`
+            )
+            .join("")}
+        </ul>
+      `;
+    }
     function downloadPdf(bytes, filename) {
       const blob = new Blob([bytes], { type: "application/pdf" });
       const url = URL.createObjectURL(blob);
       URL.revokeObjectURL(url);
     }
+    function getFilesArray() {
+      return Array.from(filesInput.files || []);
+    }
+    // تعامل مع السحب والإفلات
+    dropzone.addEventListener("click", () => filesInput.click());
+    ;["dragenter", "dragover"].forEach(evtName => {
+      dropzone.addEventListener(evtName, e => {
+        e.preventDefault();
+        e.stopPropagation();
+        dropzone.classList.add("hover");
+      });
+    });
+    ;["dragleave", "drop"].forEach(evtName => {
+      dropzone.addEventListener(evtName, e => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (evtName !== "drop") dropzone.classList.remove("hover");
+      });
+    });
+    dropzone.addEventListener("drop", e => {
+      dropzone.classList.remove("hover");
+      const dtFiles = Array.from(e.dataTransfer.files || []);
+      if (dtFiles.length) {
+        // نحتاج لإنشاء FileList جديدة: نستخدم DataTransfer
+        const dataTransfer = new DataTransfer();
+        dtFiles.forEach(f => dataTransfer.items.add(f));
+        filesInput.files = dataTransfer.files;
+        renderFileList(getFilesArray());
+        setStatus("");
+      }
+    });
+    // تحديث القائمة عند اختيار ملفات
+    filesInput.addEventListener("change", () => {
+      renderFileList(getFilesArray());
+      setStatus("");
+    });
     mergeBtn.addEventListener("click", async () => {
       const selectedType = getSelectedType();
+      let files = getFilesArray();
       if (!selectedType) {
+        setStatus("الرجاء اختيار نوع الملفات أولاً.", "error");
         return;
       }
       if (!files.length) {
+        setStatus("الرجاء اختيار الملفات المراد معالجتها.", "error");
         return;
       }
+      // ترتيب حسب الاسم
+      files = files.sort((a, b) =>
         a.name.localeCompare(b.name, undefined, { numeric: true })
       );
+      renderFileList(files);
       try {
+        setStatus("جاري معالجة الملفات... لا تُغلق الصفحة.", "loading");
+        mergeBtn.disabled = true;
+        mergeBtn.classList.add("disabled");
         if (selectedType === "images") {
           if (!files.every(f => f.type.startsWith("image/"))) {
+            setStatus("عند اختيار (صور ➜ PDF) يجب أن تكون جميع الملفات صورًا.", "error");
+            mergeBtn.disabled = false;
+            mergeBtn.classList.remove("disabled");
             return;
           }
           for (const file of files) {
             const bytes = await file.arrayBuffer();
             let image;
+            const lower = file.name.toLowerCase();
             if (
               file.type === "image/jpeg" ||
               file.type === "image/jpg" ||
+              lower.endsWith(".jpg") ||
+              lower.endsWith(".jpeg")
             ) {
               image = await pdfDoc.embedJpg(bytes);
             } else {
             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();
+          const outName = (outputNameInput.value || "merged-images.pdf").trim() || "merged-images.pdf";
+          downloadPdf(pdfBytes, outName);
+          setStatus("تم إنشاء ملف PDF من الصور وتحميله بنجاح. ✅", "ok");
         }
         if (selectedType === "pdfs") {
+          if (
+            !files.every(
+              f =>
+                f.type === "application/pdf" ||
+                f.name.toLowerCase().endsWith(".pdf")
+            )
+          ) {
+            setStatus("عند اختيار (دمج PDF) يجب أن تكون جميع الملفات بصيغة PDF.", "error");
+            mergeBtn.disabled = false;
+            mergeBtn.classList.remove("disabled");
             return;
           }
           }
           const pdfBytes = await pdfDoc.save();
+          const outName = (outputNameInput.value || "merged-pdfs.pdf").trim() || "merged-pdfs.pdf";
+          downloadPdf(pdfBytes, outName);
+          setStatus("تم دمج ملفات PDF وتحميل الملف النهائي. ✅", "ok");
         }
+        // تنظيف
         filesInput.value = "";
+        renderFileList([]);
       } catch (err) {
         console.error(err);
+        setStatus("حدث خطأ أثناء المعالجة. تأكد من الملفات وحاول مرة أخرى.", "error");
+      } finally {
+        mergeBtn.disabled = false;
+        mergeBtn.classList.remove("disabled");
       }
     });
   </script>