بب
<!-- CSS المضمن الضروري للتصميم الاحترافي -->
<style>
/* الخطوط */
body { font-family: 'Cairo', 'Arial', sans-serif; }
/* لون الذهب */
.gold-text { color: #d4af37; }
/* شكل شعار بانا */
.logo-placeholder {
font-size: 24px;
font-weight: bold;
color: #d4af37;
border: 2px solid #d4af37;
padding: 5px 10px;
display: inline-block;
}
/* تنسيق خاص للشهادة المطبوعة */
#certificate-preview {
background-color: #fff8e1;
border: 5px double #d4af37;
}
/* ميديا كواري لضمان التجاوب على الهاتف */
@media (max-width: 768px) {
#story-tracker-container > div {
grid-template-columns: 1fr !important; /* تحويل العرض إلى عمود واحد */
}
}
/* CSS الطباعة لضمان الجودة */
@media print {
body { margin: 0; padding: 0; background: none; }
#certificate-preview {
width: 100%;
border: 5px double #d4af37;
box-shadow: none;
padding: 50px;
margin: 0;
background-color: #fff8e1;
}
h3 { font-size: 28px !important; }
h4 { font-size: 36px !important; color: #d4af37 !important; }
.logo-placeholder { border-width: 3px !important; font-size: 28px !important; }
/* إخفاء زر الطباعة والمقدمة */
button, label, input, select, textarea, div:not(#certificate-preview) { display: none; }
}
</style>
<!-- كود JavaScript الأساسي -->
// دالة لتحديث الشهادة بناءً على مدخلات المستخدم
function updateCertificate() {
// التحقق من وجود جميع العناصر المطلوبة لتجنب الأخطاء
const certItemName = document.getElementById('cert-item-name');
if (!certItemName) return; // توقف إذا كانت العناصر الرئيسية غير موجودة
const itemName = document.getElementById('item-name')?.value.trim() || "... اسم القطعة هنا ...";
const storyDate = document.getElementById('story-date')?.value;
const storyTextElement = document.getElementById('story-text');
const storyText = storyTextElement?.value.trim() || "الرجاء إدخال القصة أعلاه...";
const itemType = document.getElementById('item-type')?.value || "خاتم";
const occasionType = document.getElementById('occasion-type')?.value || "خطوبة / زواج";
// تحديث عداد الأحرف
const charCountElement = document.getElementById('char-count');
if (charCountElement) {
charCountElement.textContent = storyTextElement?.value.length || 0;
}
// تحديث الشهادة
certItemName.textContent = itemName;
document.getElementById('cert-story').textContent = `"${storyText}"`;
document.getElementById('cert-item-type').textContent = itemType;
document.getElementById('cert-occasion').textContent = occasionType;
// تنسيق التاريخ
let formattedDate = "-- / -- / ----";
if (storyDate) {
try {
const dateObj = new Date(storyDate);
// استخدام تنسيق عربي موثوق
formattedDate = dateObj.toLocaleDateString('ar-SA', {
year: 'numeric', month: 'long', day: 'numeric'
});
} catch (e) {
formattedDate = storyDate; // في حال فشل التحويل، عرض النص كما هو
}
}
document.getElementById('cert-date').textContent = formattedDate;
}
// دالة الطباعة (تستخدم وظيفة طباعة المتصفح)
function printCertificate() {
// نستخدم وظيفة طباعة المتصفح بشكل خام لضمان عملها
const certContent = document.getElementById('certificate-preview')?.outerHTML;
if (!certContent) return;
// إعداد محتوى الطباعة
const printWindow = window.open('', '', 'height=600,width=800');
printWindow.('<html><head><title>شهادة قصة المجوهرات - Bana\'s Jewelry</title>');
printWindow.('<style>');
// تضمين CSS الطباعة لضمان المظهر الاحترافي
printWindow.(`
body { font-family: 'Cairo', 'Arial', sans-serif; margin: 0; padding: 20px; direction: rtl; text-align: right; }
#certificate-preview {
background-color: #fff8e1;
border: 5px double #d4af37;
padding: 50px;
width: 700px;
height: auto;
margin: 20px auto;
border-radius: 12px;
box-shadow: none;
text-align: center;
}
.logo-placeholder { font-size: 28px; font-weight: bold; color: #d4af37; border: 3px solid #d4af37; padding: 10px 15px; display: inline-block; }
h3 { font-size: 28px; margin-top: 15px; margin-bottom: 10px; color: #1E3A8A; }
h4 { font-size: 36px; margin-bottom: 20px; color: #d4af37; }
.text-gray-700 { color: #555; }
.bg-gray-100 { background-color: #f5f5f5; padding: 15px; border-radius: 8px; margin-top: 10px; }
.grid { display: flex; justify-content: space-around; }
.grid > div { flex-basis: 30%; }
`);
printWindow.('</style></head><body>');
printWindow.(certContent);
printWindow.('</body></html>');
printWindow.document.close();
printWindow.focus();
printWindow.print();
// إغلاق النافذة بعد الطباعة
setTimeout(() => printWindow.close(), 100);
}
/**
* دالة التهيئة الرئيسية التي تتأكد من تحميل عناصر DOM
*/
function initStoryTracker() {
// التحقق من وجود العنصر الرئيسي
const container = document.getElementById('story-tracker-container');
if (!container) {
// محاولة التشغيل مرة أخرى بعد فترة قصيرة إذا لم يتم تحميل العنصر بعد
setTimeout(initStoryTracker, 100);
return;
}
// ربط الأحداث بـ updateCertificate()
document.getElementById('item-name')?.addEventListener('input', updateCertificate);
document.getElementById('story-date')?.addEventListener('change', updateCertificate);
document.getElementById('story-text')?.addEventListener('input', updateCertificate);
document.getElementById('item-type')?.addEventListener('change', updateCertificate);
document.getElementById('occasion-type')?.addEventListener('change', updateCertificate);
// تحديث الشهادة بالقيم الافتراضية عند اكتمال التهيئة
updateCertificate();
}
// الانتظار حتى تحميل محتوى DOM بشكل كامل قبل تشغيل السكربت
if (document.readyState === 'loading') {
window.addEventListener('load', initStoryTracker);
} else {
initStoryTracker();
}
