Khatwa Tech

<!DOCTYPE html>

<head>

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

<style>

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background-color: #e8ecf1;

margin: 0;

padding: 20px;

color: #333;

direction: rtl;

}

.container {

max-width: 600px;

margin: 0 auto;

background-color: #ffffff;

padding: 20px;

border-radius: 16px;

box-shadow: 0 8px 20px rgba(0,0,0,0.08);

}

.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;

color: #444;

}

.form-group input, .form-group textarea {

width: 100%;

padding: 12px 14px;

border: 1px solid #d1d5db;

border-radius: 8px;

font-size: 16px;

box-sizing: border-box;

background: #f9fafb;

transition: 0.2s;

}

.form-group input:focus, .form-group textarea:focus {

border-color: #E04F26;

outline: none;

background: #fff;

}

.image-section-title {

background: #eef2f6;

padding: 10px;

border-radius: 8px;

margin-top: 20px;

font-weight: bold;

text-align: center;

color: #444;

}

#image-previews {

display: flex;

flex-wrap: wrap;

gap: 10px;

margin: 15px 0;

justify-content: flex-start;

}

#image-previews img {

width: 85px;

height: 85px;

object-fit: cover;

border-radius: 8px;

border: 2px solid #e5e7eb;

box-shadow: 0 2px 6px rgba(0,0,0,0.05);

}

.image-upload-btn {

width: 100%;

padding: 14px;

border: 2px dashed #cbd5e1;

text-align: center;

border-radius: 8px;

background: #f9fafb;

color: #64748b;

cursor: pointer;

font-size: 16px;

transition: 0.2s;

}

.image-upload-btn:hover {

background: #f1f5f9;

border-color: #94a3b8;

}

.inspection-item {

background: #f9fafb;

margin-bottom: 20px;

padding: 15px;

border-radius: 10px;

border: 1px solid #e5e7eb;

}

.item-title {

font-weight: bold;

margin-bottom: 12px;

color: #01579b;

font-size: 15px;

}

.radio-group {

display: flex;

gap: 8px;

margin-bottom: 10px;

}

.radio-option {

flex: 1;

text-align: center;

border: 2px solid #e5e7eb;

border-radius: 8px;

padding: 8px 4px;

cursor: pointer;

transition: all 0.15s ease;

background: #fff;

font-size: 14px;

}

.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 #cbd5e1;

border-radius: 6px;

box-sizing: border-box;

font-family: inherit;

resize: vertical;

display: none;

background: #fff;

}

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

.declaration {

margin-top: 30px;

border-top: 1px solid #e5e7eb;

padding-top: 20px;

text-align: justify;

font-size: 14px;

line-height: 1.6;

color: #4b5563;

}

.btn-container {

display: flex;

flex-direction: column;

gap: 12px;

margin-top: 25px;

}

.btn {

width: 100%;

padding: 16px;

color: white;

font-size: 18px;

font-weight: bold;

border: none;

border-radius: 12px;

cursor: pointer;

text-align: center;

transition: all 0.2s ease;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

.btn:active { transform: scale(0.98); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.btn-download { background-color: #2563eb; }

.btn-download:hover { background-color: #1d4ed8; }

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

.btn-whatsapp:hover { background-color: #1da851; }

#loading {

display: none;

text-align: center;

padding: 15px;

font-weight: bold;

color: #E04F26;

background: #fef2f2;

border-radius: 8px;

margin-top: 15px;

}

</style>

</head>

<body>

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

</div>

<label>رقم الحاوية:</label>

</div>

<label>رقم الختم:</label>

</div>

<label>اسم الفاحص:</label>

</div>

<label>رقم الهاتف:</label>

</div>

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

<h3 style="margin-top: 20px; margin-bottom: 15px;">نقاط الفحص (اختر الحالة)</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">⏳ جاري تجهير ملف PDF بدقة عالية، يرجى الانتظار لحظات...</div>

</div>

// مصفوفة لحفظ الصور المؤقتة

let uploadedImagesBase64 = [];

// 1. معالجة رفع الصور وعرضها فوراً

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;

img.alt = 'صورة الحاوية';

previewContainer.appendChild(img);

};

reader.readAsDataURL(files[i]);

}

event.target.value = ''; // يسمح بإعادة رفع الصور إذا أراد المستخدم

}

// 2. تفاعل حالة الفحص (تغيير الألوان وظهور حقل الملاحظات)

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');

}

// 3. دالة إنشاء PDF بدقة عالية (للمتصفح)

async function createPDF() {

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

// (scale: 2) للحصول على جودة PDF ممتازة للطباعة

const canvas = await html2canvas(element, { scale: 2, 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);

// تحويل الملف إلى Blob للتحميل أو المشاركة

return pdf.output('blob');

}

// 4. زر تنزيل وحفظ في الجهاز (يعمل بامتياز على متصفحات الجوال والكمبيوتر)

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 blob = await createPDF();

// إنشاء رابط تحميل ومحاكاة النقر عليه (طريقة المتصفح القياسية)

const url = URL.createObjectURL(blob);

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

a.href = url;

a.download = 'تقرير_فحص_الحاوية.pdf';

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

alert("✅ تم حفظ الملف بنجاح في مجلد التنزيلات (Downloads) لهاتفك أو جهازك!");

} catch (error) {

console.error(error);

alert("حدث خطأ غير متوقع، حاول مرة أخرى.");

} finally {

loading.style.display = 'none';

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

}

// 5. زر المشاركة عبر واتساب (أو التطبيقات المتاحة)

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 blob = await createPDF();

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 {

// إذا فتحت الموقع من كمبيوتر، سيتم التنزيل بدلاً من المشاركة

const url = URL.createObjectURL(blob);

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

a.href = url;

a.download = 'تقرير_فحص_الحاوية.pdf';

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

alert("جهازك لا يدعم المشاركة المباشرة، تم تحميل الملف في جهازك بدلاً من ذلك.");

}

} 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

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

تعليقات

إرسال تعليق

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

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