المقاس

<footer aria-labelledby="size-calculator-heading">

<div class="footer-container" role="region" aria-label="حساب المقاس المناسب">

<div class="job-card" role="article" aria-labelledby="size-calculator-heading">

<div class="logo" aria-hidden="true">RV</div>

<div class="job-info">

<div id="size-calculator-heading" class="job-title">احسبي مقاسك المثالي</div>

<div class="company">اختاري قياساتك لتتعرفي على المقاس الأنسب لكِ </div>

<form id="sizeForm" class="size-form">

<div class="inputs">

<label>الطول (سم):

<select id="height" required></select>

</label>

<label>الوزن (كجم):

<select id="weight" required></select>

</label>

<label>محيط الخصر (سم):

<select id="waist" required></select>

</label>

<label>محيط الصدر (سم):

<select id="bust" required></select>

</label>

</div>

<button type="button" class="apply-btn pulse" ="calculateSize()">احسبي الآن</button>

</form>

<div id="sizeResult" class="size-result" style="display:none;">

<h4> مقاسك التقريبي هو: <span id="recommendedSize"></span></h4>

<p id="sizeTip" class="size-tip"></p>

</div>

</div>

</div>

</div>

</footer>

<style>

footer {

background: linear-gradient(180deg, rgba(11,18,32,0.98), rgba(6,10,18,0.98));

color: white;

padding: 30px 16px 40px;

text-align: center;

}

.footer-container {

max-width: 700px;

margin: 0 auto;

}

.job-card {

background: rgba(255,255,255,0.03);

border-radius: 14px;

padding: 20px;

box-shadow: 0 6px 20px rgba(0,0,0,0.3);

}

.logo {

font-size: 20px;

font-weight: bold;

color: #ffb300;

margin-bottom: 10px;

}

.job-title {

font-size: 18px;

font-weight: 700;

color: #ffb300;

}

.company {

font-size: 14px;

color: #cbd5e1;

margin-bottom: 16px;

}

.size-form {

display: flex;

flex-direction: column;

gap: 10px;

align-items: center;

}

.inputs {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

gap: 12px;

width: 100%;

margin-bottom: 10px;

}

label {

font-size: 14px;

color: #e2e8f0;

display: flex;

flex-direction: column;

align-items: flex-start;

}

select {

width: 100%;

padding: 8px;

border-radius: 8px;

border: 1px solid rgba(255,255,255,0.1);

background: rgba(255,255,255,0.08);

color: #ffebc2;

margin-top: 4px;

}

select:focus {

outline: 2px solid #ffb300;

border-color: #ffb300;

}

.apply-btn {

background: #ffb300;

color: #0b1220;

font-weight: bold;

padding: 10px 20px;

border: none;

border-radius: 10px;

cursor: pointer;

margin-top: 8px;

transition: 0.3s;

}

.apply-btn:hover {

background: #ffd966;

}

.size-result {

margin-top: 16px;

font-size: 16px;

color: #fff;

}

.size-result span {

color: #ffb300;

font-weight: bold;

}

.size-tip {

margin-top: 8px;

font-size: 14px;

color: #cbd5e1;

line-height: 1.6;

}

</style>

// تعبئة القوائم تلقائيًا

function fillSelect(id, start, end, step) {

const select = document.getElementById(id);

for (let i = start; i <= end; i += step) {

const option = document.createElement('option');

option.value = i;

option.textContent = i;

select(option);

}

}

fillSelect('height', 140, 190, 2);

fillSelect('weight', 40, 130, 2);

fillSelect('waist', 55, 130, 2);

fillSelect('bust', 75, 140, 2);

function calculateSize() {

const weight = parseFloat(document.getElementById('weight').value);

const waist = parseFloat(document.getElementById('waist').value);

const bust = parseFloat(document.getElementById('bust').value);

if (isNaN(weight) || isNaN(waist) || isNaN(bust)) {

alert("من فضلك اختاري جميع القياسات");

return;

}

const sizes = [

{ name: 'XS', bust: 84, waist: 66, weight: 50 },

{ name: 'S', bust: 88, waist: 70, weight: 55 },

{ name: 'M', bust: 94, waist: 76, weight: 63 },

{ name: 'L', bust: 100, waist: 82, weight: 72 },

{ name: 'XL', bust: 108, waist: 90, weight: 82 },

{ name: '2XL', bust: 116, waist: 98, weight: 92 },

{ name: '3XL', bust: 124, waist: 106, weight: 102 },

{ name: '4XL', bust: 132, waist: 114, weight: 115 }

];

let index = sizes.length - 1;

for (let i = 0; i < sizes.length; i++) {

if (bust <= sizes[i].bust && waist <= sizes[i].waist && weight <= sizes[i].weight) {

index = i;

break;

}

}

const mainSize = sizes[index].name;

const nextSize = sizes[Math.min(index + 1, sizes.length - 1)].name;

const resultText = mainSize === nextSize ? mainSize : `${mainSize} ~ ${nextSize}`;

const tip = mainSize === nextSize

? " هذا المقاس هو الأنسب بناءً على قياساتك."

: " إذا كنتِ تفضلين الراحة اختاري المقاس الأكبر، أما إذا تحبين المظهر الأنيق فاختاري الأصغر.";

document.getElementById('recommendedSize').textContent = resultText;

document.getElementById('sizeTip').textContent = tip;

document.getElementById('sizeResult').style.display = 'block';

}