give me the full correction :

<!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 (للاستخدام في التطوير فقط) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- خط تجوال -->
    <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 المخصصة -->
    <style>
        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;
        }
        /* أنماط للنواحي الأخرى */
        /* يمكنك إضافة أنماط أخرى بناءً على النتائج مثل الفصول والأبراج */
    </style>
    <!-- مكتبة Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <!-- مكتبة Moment Hijri.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-hijri/2.1.1/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>

    <!-- سكريبت JavaScript المخصص -->
    <script>
        // تهيئة 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;
            }

            // التحقق من توفر دوال iYear و iMonth و iDate
            if (typeof birthdate.iYear !== 'function') {
                alert('حدث خطأ في تحميل مكتبة moment-hijri.js. يرجى التأكد من تحميل المكتبة بشكل صحيح.');
                return;
            }

            // حساب العمر بالتقويم الميلادي
            const ageYears = today.diff(birthdate, 'years');
            const ageMonths = today.diff(birthdate.clone().add(ageYears, 'years'), 'months');
            const ageDays = today.diff(birthdate.clone().add(ageYears, 'years').add(ageMonths, 'months'), '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 = birthdate.clone();
            const todayHijriDate = today.clone();

            // استخراج القيم الهجرية
            const birthHijriYear = birthHijriDate.iYear();
            const birthHijriMonth = birthHijriDate.iMonth();
            const birthHijriDay = birthHijriDate.iDate();

            const todayHijriYear = todayHijriDate.iYear();
            const todayHijriMonth = todayHijriDate.iMonth();
            const todayHijriDay = todayHijriDate.iDate();

            let hijriYears = todayHijriYear - birthHijriYear;
            let hijriMonths = todayHijriMonth - birthHijriMonth;
            let hijriDays = todayHijriDay - birthHijriDay;

            if (hijriDays < 0) {
                hijriDays += birthHijriDate.clone().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>
            `;

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

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

            let zodiacSign = zodiacSigns[0].sign;
            for (let i = 0; i < zodiacSigns.length; i++) {
                const signStartDate = zodiacSigns[i].startDate.clone().year(birthdate.year());
                if (birthdate.isSameOrAfter(signStartDate)) {
                    zodiacSign = zodiacSigns[i].sign;
                }
            }

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

            // عيد الميلاد القادم
            const nextBirthday = moment(`${today.year()}-${month}-${day}`, 'YYYY-M-D');
            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');
            }
        }
    </script>
</body>
</html>



حدث خطأ في تحميل مكتبة moment-hijri.js. يرجى التأكد من تحميل المكتبة بشكل صحيح.
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation