<div class="calorie-calculator"> <h2>حاسبة السعرات الحرارية الذكية</h2> <div class="form-group"> <label>الجنس</label> <select id="gender"> <option value="male">ذكر</option> <option value="female">أنثى</option> </select> </div> <div class="form-group"> <label>العمر</label> <input type="number" id="age" placeholder="مثال: 25"> </div> <div class="form-group"> <label>الوزن (كجم)</label> <input type="number" id="weight" placeholder="مثال: 70"> </div> <div class="form-group"> <label>الطول (سم)</label> <input type="number" id="height" placeholder="مثال: 175"> </div> <div class="form-group"> <label>مستوى النشاط</label> <select id="activity"> <option value="1.2">قليل الحركة</option> <option value="1.375">نشاط خفيف</option> <option value="1.55">نشاط متوسط</option> <option value="1.725">نشاط عالي</option> <option value="1.9">نشاط شديد</option> </select> </div> <button onclick="calculateCalories()"> احسب الآن </button> <div id="result"></div> </div> <style> .calorie-calculator{ max-width:700px; margin:auto; padding:25px; background:#fff; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); font-family:Cairo,sans-serif; } .calorie-calculator h2{ text-align:center; margin-bottom:20px; color:#0f766e; } .form-group{ margin-bottom:15px; } .form-group label{ display:block; margin-bottom:6px; font-weight:bold; } .form-group input, .form-group select{ width:100%; padding:12px; border:1px solid #ddd; border-radius:10px; font-size:16px; } .calorie-calculator button{ width:100%; padding:14px; background:#0f766e; color:#fff; border:none; border-radius:12px; font-size:18px; cursor:pointer; transition:.3s; } .calorie-calculator button:hover{ background:#115e59; } #result{ margin-top:25px; padding:20px; border-radius:15px; background:#f0fdfa; display:none; } .result-card{ margin:10px 0; padding:12px; background:#fff; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.05); } @media(max-width:768px){ .calorie-calculator{ padding:15px; } } </style> <script> function calculateCalories(){ let gender=document.getElementById("gender").value; let age=parseFloat(document.getElementById("age").value); let weight=parseFloat(document.getElementById("weight").value); let height=parseFloat(document.getElementById("height").value); let activity=parseFloat(document.getElementById("activity").value); if(!age || !weight || !height){ alert("يرجى إدخال جميع البيانات"); return; } let bmr; if(gender==="male"){ bmr=(10*weight)+(6.25*height)-(5*age)+5; }else{ bmr=(10*weight)+(6.25*height)-(5*age)-161; } let maintenance=Math.round(bmr*activity); let cutting=Math.round(maintenance-500); let bulking=Math.round(maintenance+500); let bmi=(weight/((height/100)*(height/100))).toFixed(1); let bmiText=""; if(bmi<18.5){ bmiText="نحافة"; }else if(bmi<25){ bmiText="وزن طبيعي"; }else if(bmi<30){ bmiText="زيادة وزن"; }else{ bmiText="سمنة"; } document.getElementById("result").style.display="block"; document.getElementById("result").innerHTML=` <div class="result-card"> 🔥 معدل الأيض الأساسي BMR: <b>${Math.round(bmr)}</b> سعرة </div> <div class="result-card"> ⚖️ للحفاظ على الوزن: <b>${maintenance}</b> سعرة يومياً </div> <div class="result-card"> ✂️ للتنشيف: <b>${cutting}</b> سعرة يومياً </div> <div class="result-card"> 💪 لزيادة الوزن: <b>${bulking}</b> سعرة يومياً </div> <div class="result-card"> 📏 مؤشر كتلة الجسم BMI: <b>${bmi}</b> (${bmiText}) </div> `; } </script>
