Khatwa Tech

<!DOCTYPE html>

<head>

<title>نموذج فحص حاويات TE</title>

<style>

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f6f8; margin: 0; padding: 20px; color: #333; direction: rtl; }

.container { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

.header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #E04F26; padding-bottom: 15px; margin-bottom: 20px; }

.header h1 { font-size: 18px; color: #E04F26; margin: 0; font-weight: bold; }

.logo-placeholder { font-weight: bold; background: #E04F26; color: #fff; padding: 5px 10px; border-radius: 4px; }

.form-group { margin-bottom: 15px; }

.form-group label { display: block; margin-bottom: 6px; font-weight: bold; font-size: 14px; }

.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; box-sizing: border-box; }

.image-section-title { background: #eee; padding: 10px; border-radius: 6px; margin-top: 20px; font-weight: bold; text-align: center; }

#image-previews { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; justify-content: center; }

#image-previews img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid #ddd; }

.image-upload-btn { width: 100%; padding: 12px; border: 2px dashed #ccc; text-align: center; border-radius: 8px; background: #fafafa; color: #666; cursor: pointer; }

.inspection-item { background: #f9f9f9; margin-bottom: 20px; padding: 15px; border-radius: 8px; border: 1px solid #e0e0e0; }

.item-title { font-weight: bold; margin-bottom: 10px; color: #01579b; }

.radio-group { display: flex; gap: 10px; margin-bottom: 10px; }

.radio-option { flex: 1; text-align: center; border: 2px solid #e0e0e0; border-radius: 8px; padding: 8px 4px; cursor: pointer; transition: all 0.2s; background: #fff; }

.radio-option input[type="radio"] { display: none; }

.radio-option.selected-pass { border-color: #28a745; background: #d4edda; font-weight: bold; }

.radio-option.selected-fail { border-color: #dc3545; background: #f8d7da; font-weight: bold; }

.radio-option.selected-unsuitable { border-color: #ffc107; background: #fff3cd; font-weight: bold; }

.notes-field { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-family: inherit; resize: vertical; display: none; }

.notes-field.visible { display: block; }

.declaration { margin-top: 30px; border-top: 1px solid #ddd; padding-top: 20px; text-align: justify; font-size: 14px; line-height: 1.5; }

.btn-container { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.btn { width: 100%; padding: 15px; color: white; font-size: 18px; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; text-align: center;}

.btn:active { opacity: 0.8; }

.btn-download { background-color: #007bff; }

.btn-whatsapp { background-color: #25D366; }

#loading { display: none; text-align: center; padding: 10px; font-weight: bold; color: #E04F26; }

</style>

</head>

<body>

<h1>قائمة فحص مكونة من 1-7 غاط</h1>

</div>

<label>رقم الحاوية:</label> <input type="text" id="containerNumber" placeholder="أدخل رقم الحاوية">

</div>

<label>رقم الختم:</label> <input type="text" id="sealNumber" placeholder="أدخل رقم الختم">

</div>

<label>اسم الفاحص:</label> <input type="text" id="inspectorName" placeholder="أدخل اسم الفاحص">

</div>

<label>رقم الهاتف:</label> <input type="tel" id="phoneNumber" placeholder="أدخل رقم الهاتف">

</div>

<div class="image-section-title">📸 رفع صور للحاوية (من المعرض)</div>

<h3 style="margin-top: 20px;">نقاط الفحص (اختر الحالة)</h3>

<div class="item-title">1. الأغطية / الحواجز</div>

<label class="radio-option"><input type="radio" name="res1" value="unsuitable" onclick="selectStatus(this)"> ⚠ غير ملائم</label>

</div>

</div>

<div class="item-title">2. الأبواب (الخارجية / الداخلية)</div>

<label class="radio-option"><input type="radio" name="res2" value="unsuitable" onclick="selectStatus(this)"> ⚠ غير ملائم</label>

</div>

</div>

<div class="item-title">3. الحائط الأمامي (الخارجي/ الداخلي)</div>

<label class="radio-option"><input type="radio" name="res3" value="unsuitable" onclick="selectStatus(this)"> ⚠ غير ملائم</label>

</div>

</div>

<div class="item-title">4. الحائط الخلفي (الخارجي/ الداخلي)</div>

<label class="radio-option"><input type="radio" name="res4" value="unsuitable" onclick="selectStatus(this)"> ⚠ غير ملائم</label>

</div>

</div>

<div class="item-title">5. الحائط العلوي</div>

<label class="radio-option"><input type="radio" name="res5" value="unsuitable" onclick="selectStatus(this)"> ⚠ غير ملائم</label>

</div>

</div>

<div class="item-title">6. الأرضية</div>

<label class="radio-option"><input type="radio" name="res6" value="unsuitable" onclick="selectStatus(this)"> ⚠ غير ملائم</label>

</div>

</div>

<div class="item-title">7. القاعدة</div>

<label class="radio-option"><input type="radio" name="res7" value="unsuitable" onclick="selectStatus(this)"> ⚠ غير ملائم</label>

</div>

</div>

<p><strong>إقرار:</strong> لقد قمت بفحص وتقييم حالة الحاوية المذكورة أعلاه بنفسي.</p>

<label>تاريخ الانتهاء:</label> <input type="date" id="inspectionDate">

</div>

<label>توقيع الفاحص:</label> <input type="text" id="signature" placeholder="اضغط هنا لتكتب اسمك">

</div>

<button class="btn btn-download" onclick="downloadPDF()">📥 حفظ PDF وعرضه</button>

<button class="btn btn-whatsapp" onclick="sharePDF()">📤 إرسال عبر واتساب</button>

</div>

<div id="loading">⏳ جاري تجهيز الملف، يرجى الانتظار...</div>

</div>

let uploadedImagesBase64 = [];

function handleImageUpload(event) {

const files = event.target.files;

const previewContainer = document.getElementById('image-previews');

for (let i = 0; i < files.length; i++) {

const reader = new FileReader();

reader.onload = function(e) {

uploadedImagesBase64.push(e.target.result);

const img = document.createElement('img');

img.src = e.target.result;

previewContainer.appendChild(img);

};

reader.readAsDataURL(files[i]);

}

event.target.value = '';

}

function selectStatus(radio) {

let parentItem = radio.closest('.inspection-item');

let options = parentItem.querySelectorAll('.radio-option');

options.forEach(opt => opt.classList.remove('selected-pass', 'selected-fail', 'selected-unsuitable'));

let parentLabel = radio.closest('.radio-option');

if (radio.value === 'pass') {

parentLabel.classList.add('selected-pass');

parentItem.querySelector('.notes-field').classList.remove('visible');

} else if (radio.value === 'fail') {

parentLabel.classList.add('selected-fail');

parentItem.querySelector('.notes-field').classList.add('visible');

} else if (radio.value === 'unsuitable') {

parentLabel.classList.add('selected-unsuitable');

parentItem.querySelector('.notes-field').classList.add('visible');

}

// دالة إنشاء الـ PDF وتحويله مباشرة إلى رابط Base64 (لتجنب مشاكل التحميل في التطبيقات)

async function getPDFDataUri() {

const element = document.getElementById('reportContainer');

// تغيير الجودة من 2 إلى 1 لضمان عدم إغلاق التطبيق بسبب ذاكرة الهاتف

const canvas = await html2canvas(element, { scale: 1, useCORS: true });

const imgData = canvas.toDataURL('image/png');

const { jsPDF } = window.jspdf;

const pdf = new jsPDF('p', 'mm', 'a4');

const pdfWidth = pdf.internal.pageSize.getWidth();

const pdfHeight = pdf.internal.pageSize.getHeight();

const imgWidth = canvas.width;

const imgHeight = canvas.height;

const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight);

const imgX = (pdfWidth - imgWidth * ratio) / 2;

const imgY = 0;

pdf.addImage(imgData, 'PNG', imgX, imgY, imgWidth * ratio, imgHeight * ratio);

// إرجاع الملف كرابط بيانات (Data URI) بدلاً من Blob

return pdf.output('datauristring');

}

// 1. زر عرض وحفظ ملف PDF

async function downloadPDF() {

const loading = document.getElementById('loading');

const btns = document.querySelectorAll('.btn');

btns.forEach(b => b.style.display = 'none');

loading.style.display = 'block';

try {

const dataUri = await getPDFDataUri();

// فتح ملف PDF مباشرة في نافذة أو متصفح التطبيق (هو الحل الأنجح لـ App Creator 24)

window.open(dataUri, '_blank');

setTimeout(() => {

alert("✅ إذا فُتح ملف الـ PDF، قم باختيار (حفظ الملف أو Save As) من داخل قارئ PDF للحفظ في الاستوديو.");

}, 1500);

} catch (error) {

console.error(error);

alert("حدث خطأ غير متوقع. قد لا يسمح تطبيقك بفتح الرابط. حاول الاختبار على متصفح الكروم في الهاتف.");

} finally {

loading.style.display = 'none';

btns.forEach(b => b.style.display = 'block');

}

// 2. زر المشاركة عبر واتساب

async function sharePDF() {

const loading = document.getElementById('loading');

const btns = document.querySelectorAll('.btn');

btns.forEach(b => b.style.display = 'none');

loading.style.display = 'block';

try {

const dataUri = await getPDFDataUri();

// تحويل الرابط إلى Blob للمشاركة

const response = await fetch(dataUri);

const blob = await response.blob();

const file = new File([blob], 'تقرير_فحص_الحاوية.pdf', { type: 'application/pdf' });

if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {

await navigator.share({ files: [file], title: 'تقرير فحص الحاوية' });

} else {

// إذا لم يدعم التطبيق المشاركة، يفتح الملف

window.open(dataUri, '_blank');

}

} catch (error) {

if (error.name !== 'AbortError') {

console.error("خطأ في المشاركة:", error);

alert("تم إلغاء المشاركة أو أن التطبيق لا يدعم هذه الميزة.");

}

} finally {

loading.style.display = 'none';

btns.forEach(b => b.style.display = 'block');

}

</script>

</body>

</html>

Khatwa Tech

بحث هذه المدونة الإلكترونية

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

تطبيق مونيتو: الحل النهائي لتعرف أين تذهب نقودك وتوقف التبذير