غرفة القياسات الذكية

<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>دليل المقاسات - متجر هايدي</title> <style> /* == كل شيء داخل #heidi-sizes حتى لا يؤثر على المتجر == */ #heidi-sizes{ --brand:#ad7b8e; --brand-dark:#8a5a6b; --gold:#c498a8; --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) } #heidi-sizes .wrap{max-width:720px;margin:14px auto;padding:0 10px} #heidi-sizes h1{margin:0 0 10px;font-size:18px;color:var(--brand);text-align:center;font-weight:900} #heidi-sizes .card{background:#fff;border:1px solid var(--bor);border-radius:var(--r);box-shadow:var(--sh);padding:10px} /* مبدّل الوحدات */ #heidi-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} #heidi-sizes .unit-switch input{display:none} #heidi-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} #heidi-sizes .unit-switch input:checked+label{background:var(--brand);color:#fff} /* زر غرفة القياس */ #heidi-sizes .fit-wrap{display:flex;justify-content:center;margin:8px 0 12px} #heidi-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(173,123,142,.18)} #heidi-sizes .fit-btn:hover{filter:brightness(.95)} /* الجدول */ #heidi-sizes .table-wrap{overflow:auto;border:1px solid var(--bor);border-radius:10px} #heidi-sizes table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px} #heidi-sizes thead th{background:#fdfafb;border-bottom:1px solid var(--bor);padding:8px 4px;text-align:center;font-weight:800;white-space:nowrap;color:var(--brand)} #heidi-sizes tbody td{padding:7px 4px;text-align:center;border-bottom:1px solid #f1f5f9;white-space:nowrap} #heidi-sizes tbody tr:last-child td{border-bottom:none} #heidi-sizes tbody tr:nth-child(even){background:#fcfdff} #heidi-sizes .note{margin:8px 0 0;color:var(--muted);font-size:11px;text-align:center} /* الشرح */ #heidi-sizes .guide{margin-top:12px;background:#fff;border:1px solid var(--bor);border-radius:12px;padding:12px;box-shadow:var(--sh)} #heidi-sizes .guide h2{font-size:15px;color:var(--brand-dark);margin:0 0 6px;text-align:center} #heidi-sizes .guide p{font-size:13px;line-height:1.7;margin:6px 0;color:var(--text)} /* المودال (مصغّر للجوال) */ #heidi-sizes .modal{position:fixed;inset:0;background:rgba(2,6,23,.55);display:none;align-items:center;justify-content:center;z-index:9999} #heidi-sizes .modal.show{display:flex} #heidi-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} #heidi-sizes .sheet header{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--bor);padding-bottom:8px} #heidi-sizes .sheet h3{margin:0;font-size:15px;color:var(--brand-dark)} #heidi-sizes .x{border:none;border-radius:10px;padding:8px 12px;cursor:pointer;background:var(--gold);color:#fff;font-weight:800;font-size:12px} #heidi-sizes .content{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px} #heidi-sizes .measure-form{display:grid;gap:10px} #heidi-sizes .row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center} #heidi-sizes .row label{font-weight:800;font-size:13px} #heidi-sizes .row input{width:100%;border:1px solid var(--bor);border-radius:10px;padding:10px 12px;font-size:14px;outline:none} #heidi-sizes .row input:focus{border-color:var(--brand);box-shadow:0 0 0 3px #f4eaef} #heidi-sizes .unit-mini{display:inline-flex;border:1px solid var(--bor);border-radius:999px;overflow:hidden} #heidi-sizes .unit-mini input{display:none} #heidi-sizes .unit-mini label{padding:6px 10px;font-size:12px;cursor:pointer} #heidi-sizes .unit-mini input:checked+label{background:var(--brand);color:#fff} #heidi-sizes .action-bar{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap} #heidi-sizes .btn-primary{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer} #heidi-sizes .btn-secondary{background:#fff;border:1px solid var(--bor);border-radius:10px;padding:10px 12px;font-weight:800;color:var(--text);cursor:pointer} #heidi-sizes .result{border:1px solid var(--bor);border-radius:12px;padding:10px;background:linear-gradient(180deg,#fff,#fafafa);display:grid;gap:8px} #heidi-sizes .result h4{margin:0;color:var(--brand-dark);font-size:14px;text-align:center} #heidi-sizes .pill{display:inline-block;background:#fff;border:1px solid var(--bor);border-radius:999px;padding:6px 10px;font-size:12px} #heidi-sizes .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} #heidi-sizes .rec-size{font-size:26px;font-weight:900;color:var(--gold);text-align:center;line-height:1} #heidi-sizes .muted{color:var(--muted);font-size:12px;text-align:center} </style> </head> <body>

دليل المقاسات للفساتين النسائية – متجر هايدي

<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"> غرفة القياس الذكية </button>
الورك الخصر الصدر المقاس UK
36 إنش26 إنش32 إنشS6
38 إنش28 إنش34 إنشM8
40 إنش30 إنش36 إنشL10
42 إنش32 إنش38 إنشXL12
44 إنش34 إنش40 إنشXXL14
46 إنش36 إنش42 إنش3XL16
48 إنش38 إنش44 إنش4XL18
50 إنش40 إنش46 إنش5XL20
52 إنش42 إنش48 إنش6XL22
54 إنش44 إنش50 إنش7XL24

قد تختلف المقاسات قليلًا حسب قصة الموديل ونوع القماش.

كيفية أخذ القياسات

الصدر: حول أكثر جزء امتلاءً مع إبقاء الشريط أفقيًا.

الخصر: عند أضيق نقطة طبيعية دون شدّ الشريط.

الأرداف: حول أعرض نقطة مع بقاء الشريط موازيًا للأرض.

{ 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 ? 'أكبر مقاس متاح حاليًا. يفضّل التواصل لخياطة/بديل مناسب.' : 'تقدير تقريبي حسب جدول متجر هايدي وقد يختلف حسب قصة الموديل والقماش.'; }); })(); </body> </html>