<!DOCTYPE html><html lang="ar"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title> Size Guide – Smart Fitting Room</title><meta name="color-scheme" content="light"><style>
/* ====================== ثيم برلين (berllin) ====================== */
#berlin-sizes,
#berlin-sizes *{
box-sizing:border-box;
}
#berlin-sizes{
--red:#dc2626;
--red-dark:#b91c1c;
--bg:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--bor:#e2e8f0;
--r:14px;
--shadow-soft:0 8px 25px rgba(15,23,42,.06);
font-family:system-ui,"Segoe UI",Tahoma,Arial,sans-serif;
color:var(--text);
background:radial-gradient(circle at top,#fee2e2 0,#f8fafc 40%,#f9fafb 100%);
}
/* تمركز وسط الشاشة على الدسكتوب */
@media (min-width: 992px){
#berlin-sizes{
min-height:100vh;
display:grid;
place-items:center;
padding:32px 24px;
}
}
/* جوال/تابلت */
@media (max-width: 991.98px){
#berlin-sizes{
padding:18px 12px 24px;
}
}
#berlin-sizes .wrap{
width:min(980px,100%);
margin:0 auto;
}
#berlin-sizes h1{
margin:0 0 6px;
font-size:20px;
text-align:center;
color:var(--red);
font-weight:900;
letter-spacing:.03em;
}
#berlin-sizes .subtitle{
margin:0 0 16px;
text-align:center;
font-size:13px;
color:var(--muted);
}
.card,
.guide{
background:var(--card);
border:1px solid var(--bor);
border-radius:var(--r);
box-shadow:var(--shadow-soft);
padding:14px 14px 16px;
margin-bottom:16px;
}
/* مبدّل الوحدات */
.unit-switch{
display:flex;
max-width:320px;
margin:0 auto 14px;
border:1px solid var(--bor);
border-radius:999px;
overflow:hidden;
background:#fff;
}
.unit-switch input{display:none;}
.unit-switch label{
flex:1;
text-align:center;
padding:9px 8px;
cursor:pointer;
font-weight:800;
font-size:13px;
color:var(--muted);
transition:background .15s ease,color .15s ease;
}
.unit-switch input:checked+label{
background:var(--red);
color:#fff;
}
/* زر غرفة القياسات */
.fit-wrap{
display:flex;
justify-content:center;
margin:4px 0 16px;
}
.fit-btn,
.btn-primary,
.x{
background:var(--red);
color:#fff;
border:1px solid var(--red-dark);
border-radius:999px;
padding:10px 16px;
font-weight:800;
cursor:pointer;
box-shadow:0 10px 24px rgba(220,38,38,.25);
font-size:14px;
}
.fit-btn{
position:relative;
display:inline-flex;
align-items:center;
gap:8px;
padding-inline:18px;
transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
white-space:nowrap;
}
.fit-btn svg{
width:20px;
height:20px;
fill:#fff;
}
.fit-btn .badge{
background:#fff;
color:var(--red);
border:1px solid var(--red-dark);
border-radius:999px;
font-size:10px;
font-weight:900;
padding:2px 8px;
}
.fit-btn::after{
content:"";
position:absolute;
inset:-4px;
border-radius:999px;
box-shadow:0 0 0 0 rgba(220,38,38,.35);
pointer-events:none;
animation:btn-ring 2s ease-out infinite;
}
.fit-btn:hover{
filter:brightness(1.05);
transform:translateY(-1px);
box-shadow:0 14px 30px rgba(220,38,38,.28);
}
.fit-btn:active{
transform:translateY(0);
box-shadow:0 8px 16px rgba(220,38,38,.2);
}
.fit-btn:focus-visible{
outline:3px solid #fee2e2;
outline-offset:3px;
}
@keyframes btn-ring{
0% { box-shadow:0 0 0 0 rgba(220,38,38,.35); }
70% { box-shadow:0 0 0 12px rgba(220,38,38,0); }
100% { box-shadow:0 0 0 0 rgba(220,38,38,0); }
}
/* ====================== الجدول ====================== */
.table-wrap{
overflow:auto;
border-radius:10px;
border:1px solid var(--bor);
background:#fff;
direction:rtl;
-webkit-overflow-scrolling:touch;
}
table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
font-size:12px;
direction:rtl;
unicode-bidi:bidi-override;
}
thead,tbody,tr{
direction:rtl;
}
th,td{
padding:10px 12px;
text-align:right;
border-bottom:1px solid #f1f5f9;
white-space:nowrap;
}
th{
background:#fff7f7;
color:#991b1b;
border-bottom:1px solid var(--bor);
position:sticky;
top:0;
z-index:1;
font-weight:800;
font-size:12px;
}
tbody tr:nth-child(even){
background:#fffafa;
}
.note{
margin:10px 0 0;
color:var(--muted);
font-size:11px;
text-align:center;
}
/* ====================== الشرح + الرسم ====================== */
.guide h2{
font-size:16px;
color:#0f172a;
margin:0 0 8px;
text-align:center;
}
.guide p{
font-size:14px;
line-height:1.9;
margin:6px 0;
color:#111827;
}
.figure{
display:flex;
justify-content:center;
margin-top:10px;
}
.figure svg{
max-width:300px;
width:100%;
height:auto;
display:block;
}
/* ====================== المودال ====================== */
.modal{
position:fixed;
inset:0;
background:rgba(15,23,42,.55);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
padding:12px;
}
.modal.show{
display:flex;
}
.sheet{
width:min(96vw,760px);
max-height:94vh;
background:#ffffff;
border:1px solid var(--bor);
border-radius:18px;
box-shadow:0 20px 50px rgba(15,23,42,.24);
padding:14px 14px 16px;
display:flex;
flex-direction:column;
overflow:hidden;
}
.sheet header{
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--bor);
padding-bottom:8px;
margin-bottom:6px;
gap:8px;
}
.sheet h3{
margin:0;
font-size:16px;
color:#0f172a;
font-weight:800;
}
.x{
padding:8px 14px;
font-size:13px;
white-space:nowrap;
border-radius:999px;
}
.content{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:14px;
margin-top:8px;
overflow:auto;
padding:4px 2px 2px;
}
@media (max-width: 720px){
.content{
grid-template-columns:1fr;
}
}
.measure-form{
display:grid;
gap:10px;
}
.row{
display:grid;
grid-template-columns:auto 1fr auto;
gap:8px;
align-items:center;
}
.row label{
font-size:13px;
font-weight:600;
color:#111827;
white-space:nowrap;
}
.row input,
.row select{
width:100%;
border:1px solid var(--bor);
border-radius:10px;
padding:9px 11px;
font-size:14px;
background:#ffffff;
transition:border-color .15s ease,box-shadow .15s ease;
}
.row input:focus,
.row select:focus{
border-color:var(--red);
box-shadow:0 0 0 3px #fee2e2;
outline:none;
}
.unit-mini{
display:inline-flex;
border:1px solid var(--bor);
border-radius:999px;
overflow:hidden;
background:#fff;
white-space:nowrap;
}
.unit-mini input{display:none;}
.unit-mini label{
padding:6px 9px;
font-size:11px;
cursor:pointer;
color:var(--muted);
}
.unit-mini input:checked+label{
background:var(--red);
color:#fff;
}
.action-bar{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:6px;
}
.btn-primary{
border-radius:999px;
}
.btn-secondary{
background:#ffffff;
border:1px solid var(--bor);
border-radius:999px;
padding:9px 13px;
font-weight:700;
cursor:pointer;
font-size:13px;
color:#111827;
}
.btn-secondary:hover{
background:#f9fafb;
}
.result{
border:1px solid var(--bor);
border-radius:16px;
padding:12px 12px 14px;
background:linear-gradient(180deg,#ffffff,#fff7f7);
display:grid;
gap:8px;
}
.result h4{
margin:0;
color:#0f172a;
font-size:15px;
text-align:center;
font-weight:800;
}
.rec-size{
font-size:30px;
font-weight:900;
color:var(--red);
text-align:center;
line-height:1;
}
.muted{
color:var(--muted);
font-size:12px;
text-align:center;
}
.kpi{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
}
@media (max-width:420px){
.kpi{
grid-template-columns:1fr;
}
.rec-size{
font-size:24px;
}
}
.pill{
display:inline-block;
background:#ffffff;
border:1px solid var(--bor);
border-radius:999px;
padding:6px 10px;
font-size:11px;
text-align:center;
white-space:nowrap;
}
/* تقليل الحركة لمن يفضّل ذلك */
@media (prefers-reduced-motion: reduce){
.fit-btn::after{
animation:none;
}
}
/* ضبط أدق للجوالات الصغيرة جداً */
@media (max-width:480px){
.row input,
.row select{
padding:9px 9px;
font-size:14px;
}
.unit-mini label{
padding:5px 7px;
font-size:11px;
}
.btn-primary,
.btn-secondary,
.x{
padding:8px 10px;
font-size:13px;
}
th,td{
padding:8px 10px;
}
}
@media (max-width:360px){
table{
font-size:11px;
}
}
</style></head><body style=";text-align:left;direction:ltr">
Size guide
Choose the size that best suits you, or use the smart fitting room to get an automatic recommendation.
<!-- مبدّل الوحدات -->
<input type="radio" name="unit" id="u-in" value="in" checked> <input type="radio" name="unit" id="u-cm" value="cm">
<!-- زر غرفة القياس -->
<button class="fit-btn" id="openFit" type="button"
aria-haspopup="dialog"
aria-controls="fitModal"
aria-label="افتحي غرفة القياسات الذكية"><svg viewBox="0 0 24 24" aria-hidden="true">
</svg>
Smart fitting room</button>
<!-- الجدول -->
<!-- يظهر من اليمين لليسار بهذا الترتيب -->| buttocks | waist | The chest | size | UK |
Sizes may vary slightly depending on the style of the model and the type of fabric.
<!-- الشرح + رسم مخططي -->
How to take measurements
Chest: Wrap the measuring tape around the fullest part of the chest, keeping the tape straight and parallel to the ground.
Waist: Measure the narrowest natural point slightly above the navel, without excessive stretching.
Hips: Measure the widest point of the hips while keeping the tape horizontal and steady.
Smart fitting room
<button class="x" id="closeFit" type="button" aria-label="إغلاق">closing</button><form class="measure-form" id="fitForm" style=";text-align:left;direction:ltr">
<input id="bust" type="number" step="0.1" min="10" max="80"
placeholder="مثال: 40" inputmode="decimal">
<input type="radio" name="fitUnit" id="f-in" value="in" checked> <input type="radio" name="fitUnit" id="f-cm" value="cm">
<input id="waist" type="number" step="0.1" min="10" max="80"
placeholder="مثال: 34" inputmode="decimal">
<!-- تم إصلاح max السابق (كان فيه خطأ كتابي) --><input id="hip" type="number" step="0.1" min="10" max="90"
placeholder="مثال: 44" inputmode="decimal">
<select id="fitPref"></select>
<button class="btn-primary" type="submit">Calculate your size.</button> <button class="btn-secondary" type="button" id="resetForm">New start.</button> <button class="btn-secondary" type="button" id="saveMySize">Save my size.</button> <button class="btn-secondary" type="button" id="fillFromSaved">Return.</button>
</form>
Result
—
Recommended size (UK/Craftsman)
The chest: —
Waist: —
Buttocks: —
Enter the measurements and then press "Calculate the size".
'
+'
'+fmt(r.hip,unit)+' | '
+'
'+fmt(r.waist,unit)+' | '
+'
'+fmt(r.bust,unit)+' | '
+'
'+r.size+' | '
+'
'+r.uk+' | '
+'';
}
tbody=html;
}
uIn.addEventListener('change',function(){ renderTable(this.value); });
uCm.addEventListener('change',function(){ renderTable(this.value); });
renderTable('in');
// المودال
var modal=$('#fitModal'),
openBtn=$('#openFit'),
closeBtn=$('#closeFit');
function show(){
modal.classList.add('show');
(uCm.checked ? $('#f-cm') : $('#f-in')).checked=true;
}
function hide(){
modal.classList.remove('show');
}
openBtn.addEventListener('click',show);
closeBtn.addEventListener('click',hide);
modal.addEventListener('click',function(e){
if(e.target===modal) hide();
});
window.addEventListener('keydown',function(e){
if(e.key==='Escape' && modal.classList.contains('show')) hide();
});
// تفضيلات الارتداء
var PADS={regular:0,relaxed:1,snug:-0.5};
function clampPad(x){ return Math.max(-1,Math.min(2,x)); }
function pick(userIn,pref){
if(!pref) pref='regular';
var pad=clampPad(PADS[pref]||0);
var need={
bust:Math.max(0,userIn.bust+pad),
waist:Math.max(0,userIn.waist+pad),
hip:Math.max(0,userIn.hip+pad)
};
for(var i=0;i
=need.bust && r.waist>=need.waist && r.hip>=need.hip){
return r;
}
}
return SIZES[SIZES.length-1];
}
// تخزين بسيط
var store={
set:function(k,v){
try{ localStorage.setItem(k,JSON.stringify(v)); }catch(e){}
},
get:function(k,f){
try{
var s=localStorage.getItem(k);
return s?JSON.parse(s):f;
}catch(e){
return f;
}
}
};
// الفورم
var form=$('#fitForm'),
outSize=$('#recSize'),
oB=$('#outBust'),
oW=$('#outWaist'),
oH=$('#outHip'),
note=$('#fitNote'),
saveBtn=$('#saveMySize'),
fillBtn=$('#fillFromSaved');
$('#resetForm').addEventListener('click',function(){
form.reset();
outSize.textContent='—';
oB.textContent=oW.textContent=oH.textContent='—';
note.textContent='أدخلي القياسات ثم اضغطي على "احسبي المقاس".';
});
function readForm(){
var unit=form.querySelector('[name="fitUnit"]:checked').value;
var pref=$('#fitPref').value;
var bust=parseFloat($('#bust').value),
waist=parseFloat($('#waist').value),
hip=parseFloat($('#hip').value);
if(!(bust>0) || !(waist>0) || !(hip>0)){
return null;
}
function toIn(v){ return unit==='cm'?v/2.54:v; }
return {
unit:unit,
pref:pref,
raw:{bust:bust,waist:waist,hip:hip},
inch:{bust:toIn(bust),waist:toIn(waist),hip:toIn(hip)}
};
}
form.addEventListener('submit',function(e){
e.preventDefault();
var st=readForm();
if(!st){
note.textContent='يرجى إدخال جميع القياسات بشكل صحيح.';
return;
}
var rec=pick(st.inch,st.pref);
outSize.textContent='UK '+rec.uk+' — '+rec.size;
function outFmt(v){
return st.unit==='cm'
? Math.round(v)+' سم'
: (+v.toFixed(1))+' إنش';
}
oB.textContent=outFmt(st.raw.bust);
oW.textContent=outFmt(st.raw.waist);
oH.textContent=outFmt(st.raw.hip);
note.textContent='تطابق مباشر مع جدول Berllin؛ قد يختلف حسب قصة الموديل ونوع القماش.';
store.set('lastMeasures',st);
});
// حفظ/استرجاع
if(saveBtn){
saveBtn.addEventListener('click',function(){
var st=readForm();
if(!st){
note.textContent='أدخلي القياسات أولًا قبل الحفظ.';
return;
}
store.set('mySize',st);
note.textContent='تم حفظ مقاسك على هذا المتصفح.';
});
}
if(fillBtn){
fillBtn.addEventListener('click',function(){
var sv=store.get('mySize') || store.get('lastMeasures');
if(!sv){
note.textContent='لا توجد قياسات محفوظة بعد.';
return;
}
(sv.unit==='cm' ? $('#f-cm') : $('#f-in')).checked=true;
$('#bust').value = sv.raw && sv.raw.bust ? sv.raw.bust : '';
$('#waist').value = sv.raw && sv.raw.waist ? sv.raw.waist : '';
$('#hip').value = sv.raw && sv.raw.hip ? sv.raw.hip : '';
if(sv.pref) $('#fitPref').value = sv.pref;
note.textContent='تم استرجاع القياسات — احسبي المقاس الآن.';
});
}
})();
</body></html>
