,render('in')); ,,cmRadio.addEventListener('change',,()=>,render('cm')); ,,/*,مبدئيًا,القيم,مكتوبة,إنش,نصيًا،,فلا,حاجة,لاستدعاء,render,هنا,*/ ,,/*,المودال,*/ ,,const,modal,=,root.querySelector('#fitModal'); ,,root.querySelector('#openFit').addEventListener('click',,()=>,{ ,,,,//,مزامنة,وحدة,المودال,مع,اختيار,الجدول ,,,,const,unitIsCm,=,cmRadio.checked; ,,,,root.querySelector('#fit-',+,(unitIsCm,?,'cm',:,'in')).checked,=,true; ,,,,modal.classList.add('show'); ,,}); ,,root.querySelector('#closeFit').addEventListener('click',,()=>,modal.classList.remove('show')); ,,modal.addEventListener('click',,(e)=>{,if(e.target===modal),modal.classList.remove('show');,}); ,,/*,قراءة,جدول,المقاسات,(إنش,كأساس),*/ ,,function,tableData(){ ,,,,return,Array.from(tbody.querySelectorAll('tr')).map(r=>{ ,,,,,,const,t,=,r.querySelectorAll('td'); ,,,,,,return,{ ,,,,,,,,hip:,,,parseFloat(t[0].dataset.in), ,,,,,,,,waist:,parseFloat(t[1].dataset.in), ,,,,,,,,bust:,,parseFloat(t[2].dataset.in), ,,,,,,,,size:,,(t[3].textContent,||,'').trim(), ,,,,,,,,uk:,,,,(t[4].textContent,||,'').trim() ,,,,,,}; ,,,,}); ,,} ,,/*,التوصية:,أول,صف,يساوي/أكبر,من,قياسات,المستخدم,*/ ,,function,recommend(user,,data){ ,,,,for(const,row,of,data){ ,,,,,,if(row.bust,>=,user.bust,&&,row.waist,>=,user.waist,&&,row.hip,>=,user.hip){ ,,,,,,,,return,row; ,,,,,,} ,,,,} ,,,,//,لو,أكبر,من,كل,الصفوف،,نوصي,بأكبر,مقاس,وننوّه ,,,,const,last,=,data[data.length-1]; ,,,,last._overflow,=,true; ,,,,return,last; ,,} ,,/*,نموذج,غرفة,القياس,*/ ,,const,fitForm,=,root.querySelector('#fitForm'); ,,const,out,=,{ ,,,,size:,root.querySelector('#recSize'), ,,,,bust:,root.querySelector('#outBust'), ,,,,waist:,root.querySelector('#outWaist'), ,,,,hip:,root.querySelector('#outHip'), ,,,,note:,root.querySelector('#fitNote') ,,}; ,,root.querySelector('#resetForm').addEventListener('click',,()=>{ ,,,,fitForm.reset(); ,,,,out.size.textContent,=,'—'; ,,,,out.bust.textContent,=,out.waist.textContent,=,out.hip.textContent,=,'—'; ,,,,out.note.textContent,=,'أدخلي,القياسات,ثم,اضغطي,التالي.'; ,,}); ,,fitForm.addEventListener('submit',,(e)=>{ ,,,,e.preventDefault(); ,,,,const,unit,=,fitForm.querySelector('input[name="fitUnit"]:checked').value;,//,in/cm ,,,,const,toIn,=,v,=>,unit==='cm',?,(v/2.54),:,v; ,,,,const,bust,,=,parseFloat(fitForm.querySelector('#bust').value); ,,,,const,waist,=,parseFloat(fitForm.querySelector('#waist').value); ,,,,const,hip,,,=,parseFloat(fitForm.querySelector('#hip').value); ,,,,if([bust,waist,hip].some(v=>!v,||,v<=0)){ ,,,,,,out.note.textContent,=,'يرجى,إدخال,جميع,القياسات.'; ,,,,,,return; ,,,,} ,,,,const,userIn,=,{,bust:toIn(bust),,waist:toIn(waist),,hip:toIn(hip),}; ,,,,const,rec,=,recommend(userIn,,tableData()); ,,,,const,fmt,=,v,=>,unit==='cm',?,Math.round(v),+,',سم',:,(Math.round(v*10)/10).toString().replace(/\.0$/,''),+,',إنش'; ,,,,out.size.textContent,=,rec.uk,||,rec.size,||,'—'; ,,,,out.bust.textContent,=,fmt(bust); ,,,,out.waist.textContent,=,fmt(waist); ,,,,out.hip.textContent,=,fmt(hip); ,,,,out.note.textContent,=,rec._overflow ,,,,,,?,'أكبر,مقاس,متاح,حاليًا.,يفضّل,التواصل,لخياطة/بديل,مناسب.' ,,,,,,:,'تقدير,تقريبي,حسب,جدول,LORA,FASHION,وقد,يختلف,حسب,قصة,الموديل,والقماش.'; ,,}); })(); </body></html>">

Smart measuring room

<!DOCTYPE html><html lang="ar"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title> Size Guide - LORA FASHION</title><style> /* == كل شيء داخل #lora-sizes حتى لا يؤثر على المتجر == */ #lora-sizes{ --brand:#2b4fa3; --brand-dark:#234282; --gold:#d8921e; --bg:#fff; --text:#0f172a; --muted:#64748b; --bor:#e2e8f0; --r:12px; --sh:0 4px 12px rgba(0,0,0,.06); font-family:"Segoe UI",Tahoma,Arial,sans-serif; color:var(--text) } #lora-sizes .wrap{max-width:720px;margin:14px auto;padding:0 10px} #lora-sizes h1{margin:0 0 10px;font-size:18px;color:var(--brand);text-align:center;font-weight:900} #lora-sizes .card{background:#fff;border:1px solid var(--bor);border-radius:var(--r);box-shadow:var(--sh);padding:10px} /* مبدّل الوحدات */ #lora-sizes .unit-switch{display:flex;width:100%;max-width:320px;margin:0 auto 10px;border:1px solid var(--bor);border-radius:10px;overflow:hidden;background:#fff} #lora-sizes .unit-switch input{display:none} #lora-sizes .unit-switch label{flex:1;text-align:center;padding:8px 6px;cursor:pointer;user-select:none;font-weight:800;font-size:13px;color:var(--text);line-height:1} #lora-sizes .unit-switch input:checked+label{background:var(--brand);color:#fff} /* زر غرفة القياس */ #lora-sizes .fit-wrap{display:flex;justify-content:center;margin:8px 0 12px} #lora-sizes .fit-btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:800;border:1px solid var(--brand-dark);border-radius:10px;padding:10px 12px;font-size:13px;cursor:pointer;box-shadow:0 6px 14px rgba(43,79,163,.18)} #lora-sizes .fit-btn:hover{filter:brightness(.95)} /* الجدول */ #lora-sizes .table-wrap{overflow:auto;border:1px solid var(--bor);border-radius:10px} #lora-sizes table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px} #lora-sizes thead th{background:#f8fafc;border-bottom:1px solid var(--bor);padding:8px 4px;text-align:center;font-weight:800;white-space:nowrap;color:var(--brand)} #lora-sizes tbody td{padding:7px 4px;text-align:center;border-bottom:1px solid #f1f5f9;white-space:nowrap} #lora-sizes tbody tr:last-child td{border-bottom:none} #lora-sizes tbody tr:nth-child(even){background:#fcfdff} #lora-sizes .note{margin:8px 0 0;color:var(--muted);font-size:11px;text-align:center} /* الشرح */ #lora-sizes .guide{margin-top:12px;background:#fff;border:1px solid var(--bor);border-radius:12px;padding:12px;box-shadow:var(--sh)} #lora-sizes .guide h2{font-size:15px;color:var(--brand-dark);margin:0 0 6px;text-align:center} #lora-sizes .guide p{font-size:13px;line-height:1.7;margin:6px 0;color:var(--text)} /* المودال (مصغّر للجوال) */ #lora-sizes .modal{position:fixed;inset:0;background:rgba(2,6,23,.55);display:none;align-items:center;justify-content:center;z-index:9999} #lora-sizes .modal.show{display:flex} #lora-sizes .sheet{width:min(94vw,520px);background:#fff;border-radius:14px;border:1px solid var(--bor);box-shadow:0 20px 50px rgba(0,0,0,.18);padding:10px} #lora-sizes .sheet header{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--bor);padding-bottom:8px} #lora-sizes .sheet h3{margin:0;font-size:15px;color:var(--brand-dark)} #lora-sizes .x{border:none;border-radius:10px;padding:8px 12px;cursor:pointer;background:var(--gold);color:#fff;font-weight:800;font-size:12px} #lora-sizes .content{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px} #lora-sizes .measure-form{display:grid;gap:10px} #lora-sizes .row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center} #lora-sizes .row label{font-weight:800;font-size:13px} #lora-sizes .row input{width:100%;border:1px solid var(--bor);border-radius:10px;padding:10px 12px;font-size:14px;outline:none} #lora-sizes .row input:focus{border-color:var(--brand);box-shadow:0 0 0 3px #e6eefc} #lora-sizes .unit-mini{display:inline-flex;border:1px solid var(--bor);border-radius:999px;overflow:hidden} #lora-sizes .unit-mini input{display:none} #lora-sizes .unit-mini label{padding:6px 10px;font-size:12px;cursor:pointer} #lora-sizes .unit-mini input:checked+label{background:var(--brand);color:#fff} #lora-sizes .action-bar{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap} #lora-sizes .btn-primary{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer} #lora-sizes .btn-secondary{background:#fff;border:1px solid var(--bor);border-radius:10px;padding:10px 12px;font-weight:800;color:var(--text);cursor:pointer} #lora-sizes .result{border:1px solid var(--bor);border-radius:12px;padding:10px;background:linear-gradient(180deg,#fff,#fafafa);display:grid;gap:8px} #lora-sizes .result h4{margin:0;color:var(--brand-dark);font-size:14px;text-align:center} #lora-sizes .pill{display:inline-block;background:#fff;border:1px solid var(--bor);border-radius:999px;padding:6px 10px;font-size:12px} #lora-sizes .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} #lora-sizes .rec-size{font-size:26px;font-weight:900;color:var(--gold);text-align:center;line-height:1} #lora-sizes .muted{color:var(--muted);font-size:12px;text-align:center} </style></head><body style=";text-align:left;direction:ltr">

Women's Dress Size Guide – LORA FASHION

<!-- مبدّل الوحدات (يعمل بدون JS مبدئيًا على إنش) -->
<input type="radio" name="unit" id="unit-in" value="in" checked> <input type="radio" name="unit" id="unit-cm" value="cm">
<!-- زر غرفة القياس -->
<button class="fit-btn" id="openFit" type="button" aria-haspopup="dialog" aria-controls="fitModal">Smart fitting room</button>
<!-- جدول المقاسات: يُعرض نصيًا مباشرة (بدون انتظار JS) -->
<!-- اكتب القيم بالإنش نصيًا + خزن الإنش كـ data-in لسهولة التحويل -->
hip waist The chest size UK
36 inches 26 inches 32 inches S 6
38 inches 28 inches 34 inches M 8
40 inches 30 inches 36 inches L 10
42 inches 32 inches 38 inches XL 12
44 inches 34 inches 40 inches XXL 14
46 inches 36 inches 42 inches 3XL 16
48 inches 38 inches 44 inches 4XL 18
50 inches 40 inches 46 inches 5XL 20
52 inches 42 inches 48 inches 6XL 22
54 inches 44 inches 50 inches 7XL 24

Sizes may vary slightly depending on the style of the model and the type of fabric.

<!-- الشرح المختصر -->

How to take measurements

Chest: Around the fullest part while keeping the tape horizontal.

Waist: At the narrowest natural point without tightening the tape.

Buttocks: Around the widest point, keeping the tape parallel to the ground.

<!-- المودال: غرفة القياس الذكية -->
{ const inches = parseFloat(td.dataset.in); if (!isFinite(inches)) return; if(unit==='cm'){ td.textContent = Math.round(inches * 2.54) + ' سم'; }else{ td.textContent = inches + ' إنش'; } }); } inRadio.addEventListener('change', ()=> render('in')); cmRadio.addEventListener('change', ()=> render('cm')); /* مبدئيًا القيم مكتوبة إنش نصيًا، فلا حاجة لاستدعاء render هنا */ /* المودال */ const modal = root.querySelector('#fitModal'); root.querySelector('#openFit').addEventListener('click', ()=> { // مزامنة وحدة المودال مع اختيار الجدول const unitIsCm = cmRadio.checked; root.querySelector('#fit-' + (unitIsCm ? 'cm' : 'in')).checked = true; modal.classList.add('show'); }); root.querySelector('#closeFit').addEventListener('click', ()=> modal.classList.remove('show')); modal.addEventListener('click', (e)=>{ if(e.target===modal) modal.classList.remove('show'); }); /* قراءة جدول المقاسات (إنش كأساس) */ function tableData(){ return Array.from(tbody.querySelectorAll('tr')).map(r=>{ const t = r.querySelectorAll('td'); return { hip: parseFloat(t[0].dataset.in), waist: parseFloat(t[1].dataset.in), bust: parseFloat(t[2].dataset.in), size: (t[3].textContent || '').trim(), uk: (t[4].textContent || '').trim() }; }); } /* التوصية: أول صف يساوي/أكبر من قياسات المستخدم */ function recommend(user, data){ for(const row of data){ if(row.bust >= user.bust && row.waist >= user.waist && row.hip >= user.hip){ return row; } } // لو أكبر من كل الصفوف، نوصي بأكبر مقاس وننوّه const last = data[data.length-1]; last._overflow = true; return last; } /* نموذج غرفة القياس */ const fitForm = root.querySelector('#fitForm'); const out = { size: root.querySelector('#recSize'), bust: root.querySelector('#outBust'), waist: root.querySelector('#outWaist'), hip: root.querySelector('#outHip'), note: root.querySelector('#fitNote') }; root.querySelector('#resetForm').addEventListener('click', ()=>{ fitForm.reset(); out.size.textContent = '—'; out.bust.textContent = out.waist.textContent = out.hip.textContent = '—'; out.note.textContent = 'أدخلي القياسات ثم اضغطي التالي.'; }); fitForm.addEventListener('submit', (e)=>{ e.preventDefault(); const unit = fitForm.querySelector('input[name="fitUnit"]:checked').value; // in/cm const toIn = v => unit==='cm' ? (v/2.54) : v; const bust = parseFloat(fitForm.querySelector('#bust').value); const waist = parseFloat(fitForm.querySelector('#waist').value); const hip = parseFloat(fitForm.querySelector('#hip').value); if([bust,waist,hip].some(v=>!v || v<=0)){ out.note.textContent = 'يرجى إدخال جميع القياسات.'; return; } const userIn = { bust:toIn(bust), waist:toIn(waist), hip:toIn(hip) }; const rec = recommend(userIn, tableData()); const fmt = v => unit==='cm' ? Math.round(v) + ' سم' : (Math.round(v*10)/10).toString().replace(/\.0$/,'') + ' إنش'; out.size.textContent = rec.uk || rec.size || '—'; out.bust.textContent = fmt(bust); out.waist.textContent = fmt(waist); out.hip.textContent = fmt(hip); out.note.textContent = rec._overflow ? 'أكبر مقاس متاح حاليًا. يفضّل التواصل لخياطة/بديل مناسب.' : 'تقدير تقريبي حسب جدول LORA FASHION وقد يختلف حسب قصة الموديل والقماش.'; }); })(); </body></html>