في هذا الكود التاريخ الهجري لا يضهر بشكل صحيح ، فمثلا النتائج التي يظهرها :
عمرك بالتقويم الهجري
713577600000
سنة

713577600000
شهر

713577600000
قم بتصحيح هذا الخطأ وابحث عن كيفية اضهار التاريخ بصورة صحيحة 
ايضا صحح جميع ما تراه خطأ تحسن لي الموقع واذا تطلب للأفضل ان تفصل الكود مثلا الى ملفات منفصله مثلا css و js وهذا يضمن سير الموقع بسلاسة اكثر فافـعل ذلك 
<!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"/>
    <!-- مكتبة 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>
    <!-- تنسيقات إضافية -->
    <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>
</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>

    <!-- سكريبت -->
    <script>
        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-MM-DD');
            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 birthHijri = moment(`${year}-${month}-${day}`, 'YYYY-M-D').format('iYYYY/iM/iD');
            const todayHijri = moment().format('iYYYY/iM/iD');

            const birthHijriDate = moment(birthHijri, 'iYYYY/iM/iD');
            const todayHijriDate = moment(todayHijri, 'iYYYY/iM/iD');

            const hijriYears = todayHijriDate.diff(birthHijriDate, 'iYears');
            birthHijriDate.add(hijriYears, 'iYears');

            const hijriMonths = todayHijriDate.diff(birthHijriDate, 'iMonths');
            birthHijriDate.add(hijriMonths, 'iMonths');

            const hijriDays = todayHijriDate.diff(birthHijriDate, 'iDays');

            // عرض العمر الهجري
            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');
            }
        }
    </script>
    <!-- مكتبة AOS -->
    <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
    <script>
        AOS.init({
            duration: 1000,
            once: true,
        });
    </script>
</body>
</html>