Logo

متجر مخيط

دليل مقاسات عبايات السفر

<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>دليل مقاسات الصدريات</title> <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet"> <style> body { font-family: 'Tajawal', sans-serif; } .animate-fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234b5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: left 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-left: 2.5rem; -webkit-appearance: none; appearance: none; } </style> </head> <body class="bg-gray-50 text-right text-gray-800">
<!-- الهيدر --> <header class="bg-amber-800 text-white p-6 relative overflow-hidden">

دليل مقاسات الصدريات

اختر عمر طفلك لمعرفة المقاس المناسب

<!-- أزرار التبويب -->
<buttoncalculator')" id="tab-btn-calculator" class="flex-1 py-2.5 text-sm font-bold rounded-lg transition-all bg-amber-100 text-amber-900 shadow-sm"> حاسبة المقاس </button> <buttontable')" id="tab-btn-table" class="flex-1 py-2.5 text-sm font-bold rounded-lg transition-all text-gray-400 hover:bg-gray-50 hover:text-gray-600"> الجدول </button>
<!-- تبويب الحاسبة -->
<!-- طريقة الحساب -->

اختر الفئة العمرية

<select id="age-select" class="w-full bg-gray-50 border border-gray-200 text-gray-700 font-medium py-4 px-4 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 cursor-pointer text-sm font-bold"> <!-- الخيارات ستضاف بالجافاسكربت --> </select>
<!-- كرت النتيجة -->
* المقاس يمثل الطول من الكتف إلى الخصر (نصف الثوب)
<!-- تبويب الجدول -->
{ lucide.createIcons(); populateSelect(); populateTable(); }); // --- 3. تعبئة القائمة --- function populateSelect() { const select = document.getElementById('age-select'); exactData.forEach((item, index) => { const option = document.createElement('option'); option.value = index; // نخزن الاندكس للوصول للكائن كاملاً option.text = item.label; select(option); }); } // --- 4. الحساب من اختيار العمر --- function calculateFromAge() { const index = document.getElementById('age-select').value; if (index === "") return; const selectedItem = exactData[index]; const card = document.getElementById('result-card'); // تحديث القيم document.getElementById('res-sudariya').textContent = selectedItem.sudariya; // حساب مقاس الثوب المتوقع (الصديرية × 2) document.getElementById('res-thobe').textContent = selectedItem.sudariya * 2; card.classList.remove('hidden'); } // --- 5. تعبئة الجدول --- function populateTable() { const tbody = document.getElementById('table-body'); tbody = exactData.map((row) => ` ${row.label} ${row.sudariya} انش `).join(''); } // --- 6. التبديل بين التبويبات --- function switchTab(tabId) { document.getElementById('content-calculator').classList.add('hidden'); document.getElementById('content-table').classList.add('hidden'); document.getElementById(`content-${tabId}`).classList.remove('hidden'); const btnCalc = document.getElementById('tab-btn-calculator'); const btnTable = document.getElementById('tab-btn-table'); if (tabId === 'calculator') { btnCalc.className = 'flex-1 py-2.5 text-sm font-bold rounded-lg transition-all bg-amber-100 text-amber-900 shadow-sm'; btnTable.className = 'flex-1 py-2.5 text-sm font-bold rounded-lg transition-all text-gray-400 hover:bg-gray-50 hover:text-gray-600'; } else { btnTable.className = 'flex-1 py-2.5 text-sm font-bold rounded-lg transition-all bg-amber-100 text-amber-900 shadow-sm'; btnCalc.className = 'flex-1 py-2.5 text-sm font-bold rounded-lg transition-all text-gray-400 hover:bg-gray-50 hover:text-gray-600'; } } </body> </html>
تواصل معنا