Spaces:

fokan
/

pdf

Build error

App Files Files Community

fokan commited on Sep 14, 2025

Commit

329f80e

verified ·

1 Parent(s): e3d3907

Upload index.html

Browse files

Files changed (1) hide show

static/index.html +598 -0

static/index.html CHANGED Viewed

	@@ -0,0 +1,598 @@

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>محول DOCX إلى PDF المتقدم - دقة 99%+ للتنسيق العربي</title>
+    <style>
+        :root {
+            --primary-color: #1a73e8;
+            --secondary-color: #4285f4;
+            --success-color: #34a853;
+            --warning-color: #f9ab00;
+            --danger-color: #ea4335;
+            --light-color: #f8f9fa;
+            --dark-color: #202124;
+            --gray-color: #5f6368;
+            --border-radius: 8px;
+            --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+            direction: rtl;
+            text-align: right;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            text-align: center;
+            padding: 30px 0;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border-radius: var(--border-radius);
+            margin-bottom: 30px;
+            box-shadow: var(--box-shadow);
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 30px;
+        }
+        @media (min-width: 768px) {
+            .main-content {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+        .upload-section, .features-section {
+            background: white;
+            padding: 30px;
+            border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
+        }
+        .section-title {
+            color: var(--primary-color);
+            margin-bottom: 20px;
+            font-size: 1.8rem;
+            text-align: center;
+        }
+        .upload-area {
+            border: 2px dashed #ccc;
+            border-radius: var(--border-radius);
+            padding: 40px 20px;
+            text-align: center;
+            margin-bottom: 20px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .upload-area:hover, .upload-area.dragover {
+            border-color: var(--primary-color);
+            background-color: rgba(26, 115, 232, 0.05);
+        }
+        .upload-icon {
+            font-size: 3rem;
+            color: var(--primary-color);
+            margin-bottom: 15px;
+        }
+        .upload-text {
+            font-size: 1.2rem;
+            margin-bottom: 15px;
+            color: var(--gray-color);
+        }
+        .file-input {
+            display: none;
+        }
+        .upload-btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 12px 30px;
+            font-size: 1.1rem;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .upload-btn:hover {
+            background-color: var(--secondary-color);
+        }
+        .file-info {
+            margin-top: 15px;
+            padding: 15px;
+            background-color: var(--light-color);
+            border-radius: var(--border-radius);
+            display: none;
+        }
+        .convert-btn {
+            width: 100%;
+            background-color: var(--success-color);
+            color: white;
+            border: none;
+            padding: 15px;
+            font-size: 1.2rem;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: background-color 0.3s;
+            margin-top: 20px;
+            display: none;
+        }
+        .convert-btn:hover {
+            background-color: #2d8f47;
+        }
+        .convert-btn:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+        .status-section {
+            margin-top: 30px;
+            padding: 20px;
+            border-radius: var(--border-radius);
+            display: none;
+        }
+        .status-loading {
+            background-color: #e3f2fd;
+        }
+        .status-success {
+            background-color: #e8f5e9;
+        }
+        .status-error {
+            background-color: #ffebee;
+        }
+        .status-title {
+            font-size: 1.3rem;
+            margin-bottom: 10px;
+        }
+        .progress-bar {
+            height: 10px;
+            background-color: #e0e0e0;
+            border-radius: 5px;
+            overflow: hidden;
+            margin: 15px 0;
+        }
+        .progress {
+            height: 100%;
+            background-color: var(--primary-color);
+            width: 0%;
+            transition: width 0.3s;
+        }
+        .download-btn {
+            background-color: var(--success-color);
+            color: white;
+            border: none;
+            padding: 12px 30px;
+            font-size: 1.1rem;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: background-color 0.3s;
+            text-decoration: none;
+            display: inline-block;
+            margin-top: 15px;
+        }
+        .download-btn:hover {
+            background-color: #2d8f47;
+        }
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        .feature-card {
+            background: #f1f8ff;
+            padding: 20px;
+            border-radius: var(--border-radius);
+            text-align: center;
+        }
+        .feature-icon {
+            font-size: 2rem;
+            color: var(--primary-color);
+            margin-bottom: 15px;
+        }
+        .feature-title {
+            font-size: 1.2rem;
+            margin-bottom: 10px;
+            color: var(--dark-color);
+        }
+        .quality-report {
+            background-color: #e3f2fd;
+            padding: 20px;
+            border-radius: var(--border-radius);
+            margin-top: 20px;
+            display: none;
+            white-space: pre-wrap;
+            font-family: monospace;
+            font-size: 0.9rem;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .quality-report-title {
+            font-size: 1.2rem;
+            margin-bottom: 10px;
+            color: var(--primary-color);
+        }
+        footer {
+            text-align: center;
+            padding: 30px 0;
+            margin-top: 40px;
+            color: var(--gray-color);
+            border-top: 1px solid #eee;
+        }
+        .loading-spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-radius: 50%;
+            border-top: 4px solid var(--primary-color);
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+            display: none;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .spinner-container {
+            text-align: center;
+            padding: 20px;
+        }
+        .rtl-text {
+            direction: rtl;
+            text-align: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>📄➡️📋 محول DOCX إلى PDF المتقدم</h1>
+            <p class="subtitle">دقة 99%+ للتنسيق العربي والـ RTL</p>
+        </header>
+        <div class="main-content">
+            <div class="upload-section">
+                <h2 class="section-title">تحويل المستند</h2>
+                <div class="upload-area" id="uploadArea">
+                    <div class="upload-icon">📁</div>
+                    <p class="upload-text">اسحب ملف DOCX وأفلته هنا أو انقر للاختيار</p>
+                    <button class="upload-btn" id="browseBtn">اختر ملف DOCX</button>
+                    <input type="file" id="fileInput" class="file-input" accept=".docx">
+                </div>
+                <div class="file-info" id="fileInfo">
+                    <strong>الملف المحدد:</strong> <span id="fileName"></span>
+                    <br>
+                    <strong>الحجم:</strong> <span id="fileSize"></span>
+                </div>
+                <button class="convert-btn" id="convertBtn">تحويل إلى PDF</button>
+                <div class="status-section" id="statusSection">
+                    <h3 class="status-title" id="statusTitle">جاري المعالجة...</h3>
+                    <div class="spinner-container">
+                        <div class="loading-spinner" id="loadingSpinner"></div>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress" id="progressBar"></div>
+                    </div>
+                    <p id="statusMessage"></p>
+                    <a href="#" class="download-btn" id="downloadBtn" style="display: none;">تحميل PDF</a>
+                </div>
+                <div class="quality-report" id="qualityReport">
+                    <h3 class="quality-report-title">تقرير الجودة</h3>
+                    <div id="reportContent"></div>
+                </div>
+            </div>
+            <div class="features-section">
+                <h2 class="section-title">التقنيات المتقدمة المطبقة</h2>
+                <div class="features-grid">
+                    <div class="feature-card">
+                        <div class="feature-icon">🔧</div>
+                        <h3 class="feature-title">معالجة DOCX مسبقة</h3>
+                        <p>إزالة العناصر المشكلة (TextBoxes، SmartArt) تلقائياً</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="feature-icon">⚙️</div>
+                        <h3 class="feature-title">إعدادات LibreOffice محسنة</h3>
+                        <p>JSON متقدم لـ writer_pdf_Export مع 70+ معامل دقة</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="feature-icon">🔍</div>
+                        <h3 class="feature-title">مراقبة لاحقة بـ PyMuPDF</h3>
+                        <p>تحقق من موضع كل عنصر وحرف عربي</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="feature-icon">🔤</div>
+                        <h3 class="feature-title">نظام خطوط متطور</h3>
+                        <p>5+ خطوط عربية مع FontConfig محسن</p>
+                    </div>
+                </div>
+                <h2 class="section-title" style="margin-top: 40px;">ضمانات الجودة القصوى</h2>
+                <div class="features-grid">
+                    <div class="feature-card">
+                        <div class="feature-icon">🎯</div>
+                        <h3 class="feature-title">دقة 99%+</h3>
+                        <p>مطابقة بكسل بكسل مع Word الأصلي</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="feature-icon">🔒</div>
+                        <h3 class="feature-title">حفظ Placeholders</h3>
+                        <p>{{name}}, {{date}} في مواضعها الدقيقة</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="feature-icon">📐</div>
+                        <h3 class="feature-title">جداول مثالية</h3>
+                        <p>لا تغيير في أبعاد الخلايا أو تنسيق النص</p>
+                    </div>
+                    <div class="feature-card">
+                        <div class="feature-icon">🌍</div>
+                        <h3 class="feature-title">RTL مضمون</h3>
+                        <p>اتجاه النص العربي محفوظ بدقة 100%</p>
+                    </div>
+                </div>
+                <h2 class="section-title" style="margin-top: 40px;">الخطوط العربية المدعومة</h2>
+                <ul style="margin-top: 20px; padding-right: 20px;">
+                    <li>Amiri (للخط التقليدي العربي)</li>
+                    <li>Noto Naskh Arabic (للنصوص الحديثة)</li>
+                    <li>Scheherazade New (للنصوص الكلاسيكية)</li>
+                    <li>Cairo (للتصميم العصري)</li>
+                    <li>Noto Sans Arabic (للواجهات)</li>
+                </ul>
+            </div>
+        </div>
+        <footer>
+            <p>محول DOCX إلى PDF المتقدم - دقة 99%+ للتنسيق العربي</p>
+            <p>© 2025 جميع الحقوق محفوظة</p>
+        </footer>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Elements
+            const uploadArea = document.getElementById('uploadArea');
+            const fileInput = document.getElementById('fileInput');
+            const browseBtn = document.getElementById('browseBtn');
+            const fileInfo = document.getElementById('fileInfo');
+            const fileName = document.getElementById('fileName');
+            const fileSize = document.getElementById('fileSize');
+            const convertBtn = document.getElementById('convertBtn');
+            const statusSection = document.getElementById('statusSection');
+            const statusTitle = document.getElementById('statusTitle');
+            const statusMessage = document.getElementById('statusMessage');
+            const progressBar = document.getElementById('progressBar');
+            const loadingSpinner = document.getElementById('loadingSpinner');
+            const downloadBtn = document.getElementById('downloadBtn');
+            const qualityReport = document.getElementById('qualityReport');
+            const reportContent = document.getElementById('reportContent');
+            let selectedFile = null;
+            // Event listeners
+            browseBtn.addEventListener('click', () => {
+                fileInput.click();
+            });
+            uploadArea.addEventListener('click', () => {
+                fileInput.click();
+            });
+            // Drag and drop events
+            uploadArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                uploadArea.classList.add('dragover');
+            });
+            uploadArea.addEventListener('dragleave', () => {
+                uploadArea.classList.remove('dragover');
+            });
+            uploadArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                uploadArea.classList.remove('dragover');
+                if (e.dataTransfer.files.length) {
+                    handleFileSelect(e.dataTransfer.files[0]);
+                }
+            });
+            fileInput.addEventListener('change', (e) => {
+                if (e.target.files.length) {
+                    handleFileSelect(e.target.files[0]);
+                }
+            });
+            convertBtn.addEventListener('click', convertFile);
+            // Handle file selection
+            function handleFileSelect(file) {
+                if (!file.name.endsWith('.docx')) {
+                    alert('الرجاء اختيار ملف DOCX فقط');
+                    return;
+                }
+                selectedFile = file;
+                // Display file info
+                fileName.textContent = file.name;
+                fileSize.textContent = formatFileSize(file.size);
+                fileInfo.style.display = 'block';
+                convertBtn.style.display = 'block';
+                // Reset previous results
+                statusSection.style.display = 'none';
+                qualityReport.style.display = 'none';
+            }
+            // Format file size
+            function formatFileSize(bytes) {
+                if (bytes === 0) return '0 Bytes';
+                const k = 1024;
+                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+                const i = Math.floor(Math.log(bytes) / Math.log(k));
+                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+            }
+            // Convert file to PDF
+            async function convertFile() {
+                if (!selectedFile) return;
+                // Show status section
+                statusSection.style.display = 'block';
+                statusSection.className = 'status-section status-loading';
+                statusTitle.textContent = 'جاري التحويل...';
+                statusMessage.textContent = 'بدء عملية التحويل';
+                loadingSpinner.style.display = 'block';
+                downloadBtn.style.display = 'none';
+                qualityReport.style.display = 'none';
+                // Simulate progress
+                let progress = 0;
+                const progressInterval = setInterval(() => {
+                    progress += Math.random() * 10;
+                    if (progress >= 100) {
+                        progress = 100;
+                        clearInterval(progressInterval);
+                    }
+                    progressBar.style.width = progress + '%';
+                }, 200);
+                try {
+                    // Create FormData
+                    const formData = new FormData();
+                    formData.append('file', selectedFile);
+                    // Send request to convert endpoint
+                    const response = await fetch('/convert', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    clearInterval(progressInterval);
+                    progressBar.style.width = '100%';
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const result = await response.json();
+                    if (result.success) {
+                        // Show success
+                        statusSection.className = 'status-section status-success';
+                        statusTitle.textContent = 'تم التحويل بنجاح!';
+                        statusMessage.textContent = 'تم تحويل ملف DOCX إلى PDF بنجاح. يمكنك الآن تحميل الملف.';
+                        loadingSpinner.style.display = 'none';
+                        // Show download button
+                        downloadBtn.href = result.pdf_url;
+                        downloadBtn.style.display = 'inline-block';
+                        downloadBtn.textContent = 'تحميل PDF';
+                        // Show quality report if available
+                        if (result.quality_report) {
+                            reportContent.textContent = result.quality_report;
+                            qualityReport.style.display = 'block';
+                        }
+                    } else {
+                        // Show error
+                        statusSection.className = 'status-section status-error';
+                        statusTitle.textContent = 'خطأ في التحويل';
+                        statusMessage.textContent = result.message;
+                        loadingSpinner.style.display = 'none';
+                    }
+                } catch (error) {
+                    clearInterval(progressInterval);
+                    statusSection.className = 'status-section status-error';
+                    statusTitle.textContent = 'خطأ في التحويل';
+                    // Handle different types of errors
+                    if (error.message.includes('HTTP error! status: 500')) {
+                        statusMessage.textContent = 'حدث خطأ في الخادم أثناء التحويل. يرجى المحاولة مرة أخرى.';
+                    } else if (error.message.includes('HTTP error! status: 400')) {
+                        statusMessage.textContent = 'الملف غير مدعوم. الرجاء اختيار ملف DOCX فقط.';
+                    } else if (error.message.includes('LibreOffice') || error.message.includes('The system cannot find the file specified')) {
+                        statusMessage.textContent = 'لم يتم العثور على LibreOffice. يرجى التأكد من تثبيت LibreOffice على الخادم.';
+                    } else {
+                        statusMessage.textContent = 'حدث خطأ أثناء التحويل: ' + error.message;
+                    }
+                    loadingSpinner.style.display = 'none';
+                    console.error('Conversion error:', error);
+                }
+            }
+        });
+    </script>
+</body>
+</html>