<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>حاسبة نسبة الدهون والماء والعضلات في الجسم</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            padding: 20px;
            direction: rtl;
        }
        .container {
            width: 100%;
            max-width: 600px;
            padding: 30px;
            border-radius: 15px;
            background-color: #ffffff;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        h2 {
            color: #2c3e50;
            margin-bottom: 25px;
            font-size: 28px;
            position: relative;
            display: inline-block;
        }
        h2:after {
            content: '';
            position: absolute;
            width: 60%;
            height: 3px;
            background: linear-gradient(to right, #3498db, #2ecc71);
            bottom: -10px;
            right: 20%;
            border-radius: 2px;
        }
        .form-group {
            margin-bottom: 20px;
            text-align: right;
        }
        label {
            display: block;
            margin-bottom: 8px;
            color: #34495e;
            font-weight: 600;
            font-size: 16px;
        }
        input[type="number"], select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box;
            text-align: right;
            font-size: 16px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        input[type="number"]:focus, select:focus {
            border-color: #3498db;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
            outline: none;
        }
        .btn {
            background: linear-gradient(to right, #3498db, #2ecc71);
            color: #fff;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            font-weight: 600;
            transition: transform 0.3s, box-shadow 0.3s;
            margin-top: 10px;
            width: 100%;
        }
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .btn:active {
            transform: translateY(1px);
        }
        #results {
            margin-top: 30px;
            display: none;
        }
        .result-card {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            text-align: right;
            border-right: 4px solid #3498db;
        }
        .result-card h3 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 18px;
        }
        .result-card p {
            color: #34495e;
            margin: 5px 0;
            font-size: 16px;
        }
        .result-card .value {
            font-weight: bold;
            color: #3498db;
        }
        .result-card .normal {
            color: #2ecc71;
        }
        .result-card .warning {
            color: #f39c12;
        }
        .result-card .danger {
            color: #e74c3c;
        }
        .chart-container {
            margin-top: 20px;
            height: 200px;
            position: relative;
        }
        .chart-bar {
            height: 30px;
            margin-bottom: 10px;
            background-color: #ecf0f1;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
        }
        .chart-fill {
            height: 100%;
            border-radius: 5px;
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
            color: white;
            font-weight: bold;
        }
        .fat-fill {
            background-color: #e74c3c;
        }
        .water-fill {
            background-color: #3498db;
        }
        .muscle-fill {
            background-color: #2ecc71;
        }
        .advice {
            margin-top: 20px;
            padding: 15px;
            background-color: #e8f8f5;
            border-radius: 10px;
            border-right: 4px solid #2ecc71;
            text-align: right;
        }
        .advice h3 {
            color: #16a085;
            margin-bottom: 10px;
        }
        .advice p {
            color: #34495e;
            line-height: 1.6;
        }
        .error-message {
            color: #e74c3c;
            background-color: #fadbd8;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            display: none;
            text-align: right;
        }
        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }
            h2 {
                font-size: 24px;
            }
            .btn {
                padding: 10px 20px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h2><i class="fas fa-calculator"></i> حاسبة نسبة الدهون والماء والعضلات في الجسم</h2>
        <form id="healthForm">
            <div class="form-group">
                <label for="weight"><i class="fas fa-weight"></i> الوزن (كجم):</label>
                <input type="number" id="weight" name="weight" min="30" max="300" step="0.1" required>
            </div>
            <div class="form-group">
                <label for="height"><i class="fas fa-ruler-vertical"></i> الطول (سم):</label>
                <input type="number" id="height" name="height" min="100" max="250" required>
            </div>
            <div class="form-group">
                <label for="age"><i class="fas fa-birthday-cake"></i> العمر (سنة):</label>
                <input type="number" id="age" name="age" min="10" max="120" required>
            </div>
            <div class="form-group">
                <label for="gender"><i class="fas fa-venus-mars"></i> الجنس:</label>
                <select id="gender" name="gender" required>
                    <option value="male">ذكر</option>
                    <option value="female">أنثى</option>
                </select>
            </div>
            <div class="form-group">
                <label for="activityLevel"><i class="fas fa-running"></i> مستوى النشاط:</label>
                <select id="activityLevel" name="activityLevel" required>
                    <option value="sedentary">غير نشط (قليل أو لا يوجد تمارين)</option>
                    <option value="light">نشاط خفيف (تمارين خفيفة 1-3 أيام في الأسبوع)</option>
                    <option value="moderate">نشاط معتدل (تمارين متوسطة 3-5 أيام في الأسبوع)</option>
                    <option value="active">نشاط عالي (تمارين شاقة 6-7 أيام في الأسبوع)</option>
                    <option value="very_active">نشاط مكثف (تمارين شاقة جداً أو وظيفة بدنية)</option>
                </select>
            </div>
            <button type="submit" class="btn"><i class="fas fa-chart-line"></i> احسب النتائج</button>
            <div class="error-message" id="errorMessage"></div>
        </form>
        
        <div id="results">
            <div class="result-card">
                <h3><i class="fas fa-chart-pie"></i> مؤشر كتلة الجسم (BMI)</h3>
                <p>مؤشر كتلة الجسم: <span class="value" id="bmiValue"></span></p>
                <p>تصنيف الجسم: <span id="bodyType"></span></p>
                <p>نطاق الوزن المثالي: <span id="idealWeightRange"></span></p>
            </div>
            
            <div class="result-card">
                <h3><i class="fas fa-percentage"></i> نسبة مكونات الجسم</h3>
                <div class="chart-container">
                    <div class="chart-bar">
                        <div class="chart-fill fat-fill" id="fatBar"></div>
                    </div>
                    <div class="chart-bar">
                        <div class="chart-fill water-fill" id="waterBar"></div>
                    </div>
                    <div class="chart-bar">
                        <div class="chart-fill muscle-fill" id="muscleBar"></div>
                    </div>
                </div>
                <p>نسبة الدهون في الجسم: <span class="value" id="bodyFatPercentage"></span></p>
                <p>نسبة الماء في الجسم: <span class="value" id="waterPercentage"></span></p>
                <p>نسبة العضلات في الجسم: <span class="value" id="musclePercentage"></span></p>
                <p>الوزن الخالي من الدهون: <span class="value" id="leanBodyMass"></span></p>
            </div>
            
            <div class="result-card">
                <h3><i class="fas fa-tint"></i> التوصيات اليومية</h3>
                <p>كمية الماء اليومية الموصى بها: <span class="value" id="dailyWaterIntake"></span></p>
                <p>عدد السعرات الحرارية اليومية المطلوبة: <span class="value" id="dailyCalories"></span></p>
            </div>
            
            <div class="advice" id="advice">
                <h3><i class="fas fa-lightbulb"></i> نصائح وتوصيات</h3>
                <p id="adviceText"></p>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('healthForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // إخفاء رسالة الخطأ إذا كانت موجودة
            document.getElementById('errorMessage').style.display = 'none';
            
            // الحصول على القيم المدخلة
            const weight = parseFloat(document.getElementById('weight').value);
            const height = parseFloat(document.getElementById('height').value);
            const age = parseFloat(document.getElementById('age').value);
            const gender = document.getElementById('gender').value;
            const activityLevel = document.getElementById('activityLevel').value;
            
            // التحقق من صحة القيم المدخلة
            if (isNaN(weight) || isNaN(height) || isNaN(age) || 
                weight < 30 || weight > 300 || 
                height < 100 || height > 250 || 
                age < 10 || age > 120) {
                showError('يرجى إدخال قيم صحيحة في جميع الحقول');
                return;
            }
            
            // حساب مؤشر كتلة الجسم (BMI)
            const bmi = weight / ((height / 100) ** 2);
            
            // حساب نسبة الدهون في الجسم باستخدام معادلة Deurenberg
            const bodyFatPercentage = (1.20 * bmi) + (0.23 * age) - (gender === 'male' ? 16.2 : 5.4);
            
            // حساب الوزن الخالي من الدهون
            const leanBodyMass = weight * (1 - bodyFatPercentage / 100);
            
            // حساب نسبة الماء في الجسم (نسبة مئوية)
            const waterPercentage = gender === 'male' ? 60 : 55;
            
            // حساب نسبة العضلات في الجسم (نسبة مئوية)
            let musclePercentage = (leanBodyMass * 0.7) / weight * 100; // تقدير أن 70% من الوزن الخالي من الدهون هو عضلات
            
            // تعديل نسبة العضلات بناءً على مستوى النشاط
            const activityModifiers = {
                sedentary: 0.95,
                light: 1.0,
                moderate: 1.05,
                active: 1.1,
                very_active: 1.15
            };
            
            musclePercentage *= activityModifiers[activityLevel];
            
            // تصنيف نوع الجسم بناءً على BMI
            let bodyType, bodyTypeClass;
            if (bmi < 18.5) {
                bodyType = "نحيف";
                bodyTypeClass = "warning";
            } else if (bmi >= 18.5 && bmi < 24.9) {
                bodyType = "مثالي";
                bodyTypeClass = "normal";
            } else if (bmi >= 25 && bmi < 29.9) {
                bodyType = "زيادة وزن";
                bodyTypeClass = "warning";
            } else {
                bodyType = "سمنة";
                bodyTypeClass = "danger";
            }
            
            // حساب نطاق الوزن المثالي
            const minIdealWeight = 18.5 * ((height / 100) ** 2);
            const maxIdealWeight = 24.9 * ((height / 100) ** 2);
            
            // حساب كمية الماء اليومية الموصى بها (35 مل لكل كجم)
            const dailyWaterIntake = (weight * 0.035).toFixed(2);
            
            // حساب معدل الأيض الأساسي (BMR) باستخدام معادلة Mifflin-St Jeor
            let bmr;
            if (gender === 'male') {
                bmr = 10 * weight + 6.25 * height - 5 * age + 5;
            } else {
                bmr = 10 * weight + 6.25 * height - 5 * age - 161;
            }
            
            // حساب عدد السعرات الحرارية اليومية المطلوبة
            const calorieMultipliers = {
                sedentary: 1.2,
                light: 1.375,
                moderate: 1.55,
                active: 1.725,
                very_active: 1.9
            };
            
            const dailyCalories = Math.round(bmr * calorieMultipliers[activityLevel]);
            
            // عرض النتائج
            document.getElementById('results').style.display = 'block';
            document.getElementById('bmiValue').textContent = bmi.toFixed(2);
            document.getElementById('bodyType').textContent = bodyType;
            document.getElementById('bodyType').className = bodyTypeClass;
            document.getElementById('idealWeightRange').textContent = `${minIdealWeight.toFixed(1)} كجم - ${maxIdealWeight.toFixed(1)} كجم`;
            
            // عرض الرسوم البيانية
            document.getElementById('fatBar').style.width = `${Math.min(bodyFatPercentage, 50)}%`;
            document.getElementById('fatBar').textContent = `${bodyFatPercentage.toFixed(1)}% دهون`;
            
            document.getElementById('waterBar').style.width = `${waterPercentage}%`;
            document.getElementById('waterBar').textContent = `${waterPercentage}% ماء`;
            
            document.getElementById('muscleBar').style.width = `${Math.min(musclePercentage, 50)}%`;
            document.getElementById('muscleBar').textContent = `${musclePercentage.toFixed(1)}% عضلات`;
            
            // عرض النسب المئوية
            document.getElementById('bodyFatPercentage').textContent = `${bodyFatPercentage.toFixed(2)}%`;
            document.getElementById('waterPercentage').textContent = `${waterPercentage}%`;
            document.getElementById('musclePercentage').textContent = `${musclePercentage.toFixed(2)}%`;
            document.getElementById('leanBodyMass').textContent = `${leanBodyMass.toFixed(2)} كجم`;
            
            // عرض التوصيات اليومية
            document.getElementById('dailyWaterIntake').textContent = `${dailyWaterIntake} لتر`;
            document.getElementById('dailyCalories').textContent = `${dailyCalories} سعرة حرارية`;
            
            // عرض النصائح والتوصيات
            let adviceText = "";
            if (bodyType === "نحيف") {
                adviceText = "يبدو أن وزنك أقل من المعدل الطبيعي. يُنصح بزيادة الوزن بشكل صحي من خلال تناول وجبات متوازنة وغنية بالبروتينات والكربوهيدرات المعقدة. يمكنك أيضًا استشارة أخصائي تغذية للحصول على خطة غذائية مناسبة.";
            } else if (bodyType === "مثالي") {
                adviceText = "تهانينا! وزنك ضمن المعدل الطبيعي. حافظ على نظامك الغذائي المتوازن وممارسة الرياضة بانتظام للحفاظ على صحتك ولياقتك. تذكر أن شرب كمية كافية من الماء والحصول على قسط كافٍ من النوم مهمان أيضًا.";
            } else if (bodyType === "زيادة وزن") {
                adviceText = "وزنك أعلى قليلاً من المعدل الطبيعي. يُنصح باتباع نظام غذائي صحي ومتوازن مع زيادة النشاط البدني. حاول تقليل الأطعمة الغنية بالدهون والسكريات وزيادة تناول الفواكه والخضروات.";
            } else {
                adviceText = "وزنك أعلى بكثير من المعدل الطبيعي. يُنصح بشدة باستشارة طبيب أو أخصائي تغذية للحصول على خطة لعلاج السمنة. قد تحتاج إلى تغييرات كبيرة في نظامك الغذائي ونمط حياتك لتحسين صحتك وتقليل مخاطر الأمراض المزمنة.";
            }
            
            // إضافة نصائح إضافية بناءً على نسبة الدهون
            if (gender === 'male' && bodyFatPercentage > 25) {
                adviceText += " نسبة الدهون في جسمك أعلى من المعدل الطبيعي للرجال. يُنصح بممارسة تمارين الكارديو وتمارين المقاومة لتقليل الدهون وزيادة العضلات.";
            } else if (gender === 'female' && bodyFatPercentage > 32) {
                adviceText += " نسبة الدهون في جسمك أعلى من المعدل الطبيعي للنساء. يُنصح بممارسة تمارين الكارديو وتمارين المقاومة لتقليل الدهون وزيادة العضلات.";
            }
            
            // إضافة نصائح إضافية بناءً على مستوى النشاط
            if (activityLevel === 'sedentary') {
                adviceText += " أنت غير نشيط بما فيه الكفاية. حاول زيادة نشاطك البدني حتى لو كان ذلك بمشي قصير كل يوم. النشاط البدني مهم لصحة القلب والأوعية الدموية والتحكم في الوزن.";
            }
            
            document.getElementById('adviceText').textContent = adviceText;
            
            // التمرير إلى قسم النتائج
            document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
        });
        
        function showError(message) {
            const errorElement = document.getElementById('errorMessage');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }
    </script>
</body>
</html>