index.html :
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <!-- الميتا داتا -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>حاسبة العمر - احسب عمرك بدقة وتفاعلية</title>
    <!-- Tailwind CSS -->
    <link href="https://cdn.tailwindcss.com" rel="stylesheet">
    <!-- خط تجوال -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
    <!-- مكتبة AOS للتأثيرات عند التمرير -->
    <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
    <!-- مكتبة Animate.css للرسوم المتحركة -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <!-- ملف CSS المخصص -->
    <link rel="stylesheet" href="style.css">
    <!-- مكتبة moment.js ومكتبة moment-hijri.js للتواريخ الهجرية -->
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment-hijri@2.2.1/dist/moment-hijri.min.js"></script>
</head>
<body class="min-h-screen">
    <!-- العنوان الرئيسي -->
    <header class="animated-bg text-white py-20">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-5xl font-bold mb-4">حاسبة العمر</h1>
            <p class="text-xl">احسب عمرك بدقة وتعرف على المزيد من التفاصيل</p>
        </div>
    </header>

    <!-- قسم الحاسبة -->
    <section id="calculator" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl mx-auto text-center mb-10">
                <h2 class="text-4xl font-bold text-gray-800">أدخل تاريخ ميلادك</h2>
                <p class="text-lg text-gray-600 mt-4">واكتشف تفاصيل مدهشة عن عمرك</p>
            </div>
            <div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-lg" data-aos="fade-up">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    <!-- السنة -->
                    <div>
                        <label for="year" class="block text-sm font-medium text-gray-700 mb-2">السنة</label>
                        <select id="year" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">اختر</option>
                            <script>
                                for (let i = new Date().getFullYear(); i >= 1900; i--) {
                                    document.write(`<option value="${i}">${i}</option>`);
                                }
                            </script>
                        </select>
                    </div>
                    <!-- الشهر -->
                    <div>
                        <label for="month" class="block text-sm font-medium text-gray-700 mb-2">الشهر</label>
                        <select id="month" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">اختر</option>
                            <option value="1">يناير</option>
                            <option value="2">فبراير</option>
                            <option value="3">مارس</option>
                            <option value="4">أبريل</option>
                            <option value="5">مايو</option>
                            <option value="6">يونيو</option>
                            <option value="7">يوليو</option>
                            <option value="8">أغسطس</option>
                            <option value="9">سبتمبر</option>
                            <option value="10">أكتوبر</option>
                            <option value="11">نوفمبر</option>
                            <option value="12">ديسمبر</option>
                        </select>
                    </div>
                    <!-- اليوم -->
                    <div>
                        <label for="day" class="block text-sm font-medium text-gray-700 mb-2">اليوم</label>
                        <select id="day" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">اختر</option>
                        </select>
                    </div>
                </div>
                <!-- زر الحساب -->
                <button onclick="calculateAge()" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-md transition duration-300 ease-in-out">احسب العمر</button>
            </div>
        </div>
    </section>

    <!-- قسم النتائج -->
    <section id="results" class="py-20">
        <div class="container mx-auto px-4">
            <!-- النتائج -->
            <div id="resultsContainer" class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto hidden">
                <!-- العمر -->
                <div class="bg-white p-6 rounded-lg shadow animate__animated animate__fadeInUp" data-aos="fade-up" id="ageCard">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">عمرك</h3>
                    <p id="ageResult" class="text-xl text-gray-700"></p>
                </div>
                <!-- العمر بالتقويم الهجري -->
                <div class="bg-white p-6 rounded-lg shadow animate__animated animate__fadeInUp" data-aos="fade-up" data-aos-delay="100" id="hijriAgeCard">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">عمرك بالتقويم الهجري</h3>
                    <p id="hijriAgeResult" class="text-xl text-gray-700"></p>
                </div>
                <!-- معلومات إضافية -->
                <div class="bg-white p-6 rounded-lg shadow animate__animated animate__fadeInUp" data-aos="fade-up" data-aos-delay="200" id="additionalInfoCard">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">معلومات إضافية</h3>
                    <p id="additionalInfo" class="text-xl text-gray-700"></p>
                </div>
                <!-- مرحلة الحياة -->
                <div class="bg-white p-6 rounded-lg shadow animate__animated animate__fadeInUp" data-aos="fade-up" data-aos-delay="300" id="lifeStageCard">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">مرحلة الحياة</h3>
                    <p id="lifeStage" class="text-xl text-gray-700"></p>
                </div>
                <!-- زر إضافة إلى التقويم -->
                <div class="md:col-span-2 text-center mt-6">
                    <button id="addToCalendar" onclick="addToCalendar()" class="w-full md:w-auto bg-white border border-blue-500 text-blue-500 font-semibold py-3 px-6 rounded-md transition duration-300 ease-in-out">إضافة عيد الميلاد إلى التقويم</button>
                </div>
            </div>
        </div>
    </section>

    <!-- تذييل الصفحة -->
    <footer class="bg-gray-800 text-white py-6">
        <div class="container mx-auto px-4 text-center">
            <p>&copy; 2023 حاسبة العمر. جميع الحقوق محفوظة.</p>
        </div>
    </footer>

    <!-- سكريبت -->
    <!-- مكتبة AOS -->
    <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
    <script src="script.js"></script>
</body>
</html>

style.css:
body {
    font-family: 'Tajawal', sans-serif;
    background-color: #f0f4f8;
    overflow-x: hidden;
}
/* خلفية متحركة */
.animated-bg {
    background: linear-gradient(-45deg, #ee7752, #23a6d5, #23d5ab, #e73c7e);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
/* أنماط إضافية للنتائج */
.life-stage-childhood {
    background-image: url('childhood.jpg');
    background-size: cover;
    color: #fff;
}
.life-stage-adolescence {
    background-image: url('adolescence.jpg');
    background-size: cover;
    color: #fff;
}
.life-stage-youth {
    background-image: url('youth.jpg');
    background-size: cover;
    color: #fff;
}
.life-stage-senior {
    background-image: url('senior.jpg');
    background-size: cover;
    color: #fff;
}
/* أنماط للنواحي الأخرى */
/* يمكنك إضافة أنماط أخرى بناءً على النتائج مثل الفصول والأبراج */

script.js :
// تهيئة AOS
AOS.init({
    duration: 1000,
    once: true,
});

function populateDays() {
    const year = document.getElementById('year').value;
    const month = document.getElementById('month').value;
    const daySelect = document.getElementById('day');

    daySelect.innerHTML = '<option value="">اختر</option>';

    if (month) {
        const daysInMonth = new Date(year || 2000, month, 0).getDate();
        for (let i = 1; i <= daysInMonth; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i;
            daySelect.appendChild(option);
        }
    }
}

document.getElementById('year').addEventListener('change', populateDays);
document.getElementById('month').addEventListener('change', populateDays);

function calculateAge() {
    const year = parseInt(document.getElementById('year').value);
    const month = parseInt(document.getElementById('month').value);
    const day = parseInt(document.getElementById('day').value);

    if (!year || !month || !day) {
        alert('الرجاء إدخال تاريخ الميلاد كاملاً.');
        return;
    }

    const birthdate = moment(`${year}-${month}-${day}`, 'YYYY-M-D');
    const today = moment();

    if (birthdate > today) {
        alert('تاريخ الميلاد يجب أن يكون قبل التاريخ الحالي.');
        return;
    }

    const ageYears = today.diff(birthdate, 'years');
    birthdate.add(ageYears, 'years');

    const ageMonths = today.diff(birthdate, 'months');
    birthdate.add(ageMonths, 'months');

    const ageDays = today.diff(birthdate, 'days');

    // عرض العمر في خانات
    document.getElementById('ageResult').innerHTML = `
        <div class="grid grid-cols-3 gap-4">
            <div class="p-4 bg-gray-100 rounded-lg">
                <span class="text-5xl font-bold text-blue-600">${ageYears}</span>
                <p class="text-gray-600">سنة</p>
            </div>
            <div class="p-4 bg-gray-100 rounded-lg">
                <span class="text-5xl font-bold text-blue-600">${ageMonths}</span>
                <p class="text-gray-600">شهر</p>
            </div>
            <div class="p-4 bg-gray-100 rounded-lg">
                <span class="text-5xl font-bold text-blue-600">${ageDays}</span>
                <p class="text-gray-600">يوم</p>
            </div>
        </div>
    `;

    // حساب العمر بالتقويم الهجري
    const birthHijriDate = moment(`${year}-${month}-${day}`, 'YYYY-M-D').locale('en');

    const todayHijriDate = moment().locale('en');

    let hijriYears = todayHijriDate.iYear() - birthHijriDate.iYear();
    let hijriMonths = todayHijriDate.iMonth() - birthHijriDate.iMonth();
    let hijriDays = todayHijriDate.iDate() - birthHijriDate.iDate();

    if (hijriDays < 0) {
        hijriDays += birthHijriDate.iDaysInMonth();
        hijriMonths--;
    }

    if (hijriMonths < 0) {
        hijriMonths += 12;
        hijriYears--;
    }

    // عرض العمر الهجري
    document.getElementById('hijriAgeResult').innerHTML = `
        <div class="grid grid-cols-3 gap-4">
            <div class="p-4 bg-gray-100 rounded-lg">
                <span class="text-5xl font-bold text-purple-600">${hijriYears}</span>
                <p class="text-gray-600">سنة</p>
            </div>
            <div class="p-4 bg-gray-100 rounded-lg">
                <span class="text-5xl font-bold text-purple-600">${hijriMonths}</span>
                <p class="text-gray-600">شهر</p>
            </div>
            <div class="p-4 bg-gray-100 rounded-lg">
                <span class="text-5xl font-bold text-purple-600">${hijriDays}</span>
                <p class="text-gray-600">يوم</p>
            </div>
        </div>
    `;

    // معلومات إضافية
    // تحديد الفصل
    const birthMonth = month;
    let seasonName = '';
    if ((birthMonth >= 3) && (birthMonth <= 5)) {
        seasonName = 'الربيع';
    } else if ((birthMonth >= 6) && (birthMonth <= 8)) {
        seasonName = 'الصيف';
    } else if ((birthMonth >= 9) && (birthMonth <= 11)) {
        seasonName = 'الخريف';
    } else {
        seasonName = 'الشتاء';
    }

    // تحديد البرج الفلكي
    const zodiacSigns = [
        { sign: "الجدي", startDate: moment(`${year}-12-22`, 'YYYY-MM-DD') },
        { sign: "الدلو", startDate: moment(`${year}-01-20`, 'YYYY-MM-DD') },
        { sign: "الحوت", startDate: moment(`${year}-02-19`, 'YYYY-MM-DD') },
        { sign: "الحمل", startDate: moment(`${year}-03-21`, 'YYYY-MM-DD') },
        { sign: "الثور", startDate: moment(`${year}-04-20`, 'YYYY-MM-DD') },
        { sign: "الجوزاء", startDate: moment(`${year}-05-21`, 'YYYY-MM-DD') },
        { sign: "السرطان", startDate: moment(`${year}-06-21`, 'YYYY-MM-DD') },
        { sign: "الأسد", startDate: moment(`${year}-07-23`, 'YYYY-MM-DD') },
        { sign: "العذراء", startDate: moment(`${year}-08-23`, 'YYYY-MM-DD') },
        { sign: "الميزان", startDate: moment(`${year}-09-23`, 'YYYY-MM-DD') },
        { sign: "العقرب", startDate: moment(`${year}-10-23`, 'YYYY-MM-DD') },
        { sign: "القوس", startDate: moment(`${year}-11-22`, 'YYYY-MM-DD') }
    ];

    let zodiacSign = zodiacSigns[0].sign;
    for (let i = 0; i < zodiacSigns.length; i++) {
        if (birthdate >= zodiacSigns[i].startDate) {
            zodiacSign = zodiacSigns[i].sign;
        }
    }

    // يوم الميلاد
    const daysOfWeek = ["الأحد", "الإثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت"];
    const birthDayName = daysOfWeek[birthdate.day()];

    // عيد الميلاد القادم
    const nextBirthday = moment(`${today.year()}-${month}-${day}`, 'YYYY-MM-DD');
    if (nextBirthday.isBefore(today)) {
        nextBirthday.add(1, 'years');
    }
    const daysUntilNextBirthday = nextBirthday.diff(today, 'days');
    const nextBirthdayDayName = daysOfWeek[nextBirthday.day()];

    // مرحلة الحياة
    let lifeStage = '';
    let lifeStageClass = '';
    if (ageYears < 12) {
        lifeStage = 'طفولة';
        lifeStageClass = 'life-stage-childhood';
    } else if (ageYears >= 12 && ageYears < 18) {
        lifeStage = 'مراهقة';
        lifeStageClass = 'life-stage-adolescence';
    } else if (ageYears >= 18 && ageYears < 60) {
        lifeStage = 'شباب';
        lifeStageClass = 'life-stage-youth';
    } else {
        lifeStage = 'شيخوخة';
        lifeStageClass = 'life-stage-senior';
    }

    // تغيير خلفية خانة مرحلة الحياة بناءً على المرحلة
    document.getElementById('lifeStageCard').classList.add(lifeStageClass);

    // عرض المعلومات الإضافية
    document.getElementById('additionalInfo').innerHTML = `
        <p><strong>الفصل الذي ولدت فيه:</strong> ${seasonName}</p>
        <p><strong>برجك الفلكي:</strong> ${zodiacSign}</p>
        <p><strong>يوم ميلادك كان:</strong> ${birthDayName}</p>
        <p><strong>كم تبقى لعيد ميلادك القادم:</strong> ${daysUntilNextBirthday} يوم (${nextBirthdayDayName})</p>
    `;

    // عرض مرحلة الحياة
    document.getElementById('lifeStage').textContent = lifeStage;

    // إظهار قسم النتائج
    document.getElementById('resultsContainer').classList.remove('hidden');

    // تمرير إلى قسم النتائج
    document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
}

function addToCalendar() {
    const month = document.getElementById('month').value;
    const day = document.getElementById('day').value;

    if (!month || !day) {
        alert('الرجاء إدخال تاريخ الميلاد كاملاً.');
        return;
    }

    const title = encodeURIComponent('عيد ميلادي');
    const date = new Date();
    const year = date.getFullYear();

    const startDate = `${year}${month.padStart(2, '0')}${day.padStart(2, '0')}T000000Z`;
    const endDate = `${year}${month.padStart(2, '0')}${day.padStart(2, '0')}T235959Z`;

    const userAgent = navigator.userAgent || navigator.vendor || window.opera;

    if (/android/i.test(userAgent)) {
        // أجهزة أندرويد
        const intentURI = `intent://#Intent;action=android.intent.action.INSERT;type=vnd.android.cursor.item/event;S.title=${title};S.beginTime=${Date.parse(`${year}-${month}-${day}`)};end`;
        window.open(intentURI, '_blank');
    } else if (/iP(ad|hone|od)/.test(userAgent)) {
        // أجهزة أبل
        const calLink = `BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
SUMMARY:${title}
DTSTART:${startDate}
DTEND:${endDate}
RRULE:FREQ=YEARLY
END:VEVENT
END:VCALENDAR`;
        const blob = new Blob([calLink], { type: 'text/calendar;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = 'birthday.ics';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } else {
        // أجهزة أخرى
        const googleCalUrl = `https://www.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${startDate}/${endDate}&recur=RRULE:FREQ=YEARLY`;
        window.open(googleCalUrl, '_blank');
    }
}

Uncaught TypeError TypeError: todayHijriDate.iYear is not a function
    at calculateAge (/Users/sajjadmanee/testtt/script.js:77:37)
    at onclick (/Users/sajjadmanee/testtt/index.html:80:232)
calculateAge @ /Users/sajjadmanee/testtt/script.js:77:37
onclick @ /Users/sajjadmanee/testtt/index.html:80:232