هذا الكود يعمل بشكل صحيح من ناحية ذكر مصادر المكتبات لذلك لا تغيرها  مع ذلك هنالك بعض الاخطاء فعندما يريد المستخدم ادخال عمره بالتقويم الهجري يدخل السنه والشهر ولكن عندما يضغط على اليوم لا يضهر اي خيار لذلك قم بحل هذه المشكله   ثانيا عندما يدخل المستخدم تاريخ ميلاده بالتاريخ الميلادي تقوم الحاسبه بدورها بإظهار خانة تحتوي على تاريخ ميلاده محولا الى التاريخ الهجري وهذا جيد ولكن الشهر يضهر بالانجليزية وانا اريده ان يضهر بالعربية   تخصيص الواجهه للجوال لا يعمل بشكل جيد ف الخانات التي تضهر النتائج لا تضهر بصورة صحيحة لذلك اريدك ان تعدل على تكيف واجهة الموقع مع الهاتف وتجعل خانات اضهار النتائج متكيفة حتى لو تطلب الامر تعديلا على التصميم بالنسبة للهاتف   عند الضغط على خيار المساعدة وعند الضغط بعدها على خيار x لا يتم الخروج   تأكد ان لا تخرب شيئا اثناء اصلاحك لهذه المشكلات وتأكد ان يخلو الكود من الاخطاء وان تجرب كل شيئ عدلته وترضى عن النتائج

<!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.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 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@next/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"/>
    <!-- أيقونات Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <!-- أنماط CSS المخصصة -->
    <style>
        /* إعدادات الخط والتخطيط */
        body {
            font-family: 'Tajawal', sans-serif;
            overflow-x: hidden;
            background-color: #f0f4f8;
            transition: background-color 0.3s, color 0.3s;
        }

        /* الوضع الداكن */
        body.dark-mode {
            background-color: #1a202c;
            color: #f0f4f8;
        }

        /* الزر الخاص بتبديل الوضع */
        .theme-toggle {
            position: fixed;
            top: 1rem;
            left: 1rem;
            background: #fff;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
            z-index: 1000;
        }
        .theme-toggle:hover {
            background: #e2e8f0;
        }
        body.dark-mode .theme-toggle {
            background: #2d3748;
        }
        body.dark-mode .theme-toggle:hover {
            background: #4a5568;
        }
        .theme-toggle i {
            color: #2d3748;
        }
        body.dark-mode .theme-toggle i {
            color: #fbbf24;
        }

        /* خلفية متحركة للصفحة بالكامل */
        .background-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #d4fc79, #96e6a1);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            z-index: -1;
            opacity: 0.5;
        }
        body.dark-mode .background-animation {
            background: linear-gradient(45deg, #2b5876, #4e4376);
        }

        @keyframes gradientBG {
            0% {background-position: 0% 50%;}
            50% {background-position: 100% 50%;}
            100% {background-position: 0% 50%;}
        }

        /* تأثير الكتابة المتحركة */
        .typing-animation::after {
            content: '|';
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        /* أنماط إضافية للنتائج */
        .life-stage-childhood {
            background-image: url('https://source.unsplash.com/800x600/?child');
            background-size: cover;
            background-position: center;
            color: #fff;
        }
        .life-stage-adolescence {
            background-image: url('https://source.unsplash.com/800x600/?teenager');
            background-size: cover;
            background-position: center;
            color: #fff;
        }
        .life-stage-youth {
            background-image: url('https://source.unsplash.com/800x600/?young-adult');
            background-size: cover;
            background-position: center;
            color: #fff;
        }
        .life-stage-senior {
            background-image: url('https://source.unsplash.com/800x600/?senior');
            background-size: cover;
            background-position: center;
            color: #fff;
        }

        /* أنماط للفصول */
        .season-winter {
            background-image: url('https://source.unsplash.com/800x600/?winter');
            background-size: cover;
            background-position: center;
            color: #fff;
        }
        .season-spring {
            background-image: url('https://source.unsplash.com/800x600/?spring');
            background-size: cover;
            background-position: center;
            color: #fff;
        }
        .season-summer {
            background-image: url('https://source.unsplash.com/800x600/?summer');
            background-size: cover;
            background-position: center;
            color: #fff;
        }
        .season-autumn {
            background-image: url('https://source.unsplash.com/800x600/?autumn');
            background-size: cover;
            background-position: center;
            color: #fff;
        }

        /* أنماط لعنصر الإحصائيات */
        .stat-card {
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
        }
        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
        }

        /* أنماط التولتيب */
        .tooltip {
            position: relative;
            cursor: help;
        }
        .tooltip .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #2d3748;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        body.dark-mode .tooltip .tooltip-text {
            background-color: #e2e8f0;
            color: #1a202c;
        }

        /* أنماط إمكانية الوصول */
        .contrast-toggle {
            position: fixed;
            top: 5rem;
            left: 1rem;
            background: #fff;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
            z-index: 1000;
        }
        .contrast-toggle:hover {
            background: #e2e8f0;
        }
        body.dark-mode .contrast-toggle {
            background: #2d3748;
        }
        body.dark-mode .contrast-toggle:hover {
            background: #4a5568;
        }
        .contrast-toggle i {
            color: #2d3748;
        }
        body.dark-mode .contrast-toggle i {
            color: #fbbf24;
        }

        /* زر تكبير الخط */
        .font-size-toggle {
            position: fixed;
            top: 9rem;
            left: 1rem;
            background: #fff;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
            z-index: 1000;
        }
        .font-size-toggle:hover {
            background: #e2e8f0;
        }
        body.dark-mode .font-size-toggle {
            background: #2d3748;
        }
        body.dark-mode .font-size-toggle:hover {
            background: #4a5568;
        }
        .font-size-toggle i {
            color: #2d3748;
        }
        body.dark-mode .font-size-toggle i {
            color: #fbbf24;
        }

        /* زر المساعدة */
        .help-toggle {
            position: fixed;
            top: 13rem;
            left: 1rem;
            background: #fff;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
            z-index: 1000;
        }
        .help-toggle:hover {
            background: #e1e7ef;
        }
        body.dark-mode .help-toggle {
            background: #2d3748;
        }
        body.dark-mode .help-toggle:hover {
            background: #4a5568;
        }
        .help-toggle i {
            color: #2d3748;
        }
        body.dark-mode .help-toggle i {
            color: #fbbf24;
        }

        /* نافذة المساعدة */
        .help-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 1100;
            align-items: center;
            justify-content: center;
        }
        .help-modal-content {
            background: #fff;
            padding: 2rem;
            border-radius: 8px;
            max-width: 600px;
            width: 90%;
            position: relative;
            color: #1a202c;
        }
        .help-modal-close {
            position: absolute;
            top: 1rem;
            left: 1rem;
            cursor: pointer;
            font-size: 1.5rem;
        }
        body.dark-mode .help-modal-content {
            background: #2d3748;
            color: #f0f4f8;
        }

        /* استجابة للتكبير */
        body.large-font {
            font-size: 1.25em;
        }

        /* تحسين التباين */
        body.high-contrast {
            filter: contrast(1.5);
        }

        /* تكيف تصميم العناصر للشاشات الصغيرة */
        @media (max-width: 768px) {
            /* تكبير حجم الأزرار للنقر باللمس */
            button, .theme-toggle, .contrast-toggle, .font-size-toggle, .help-toggle {
                width: 3.5rem;
                height: 3.5rem;
            }
            /* تكبير حجم النص */
            body {
                font-size: 1.1em;
            }
            /* تعديل الحشوات */
            .stat-card {
                padding: 4px;
            }
        }

        /* تعديل ألوان النصوص في الوضع الليلي */
        body.dark-mode .text-gray-800 {
            color: #f0f4f8;
        }
        body.dark-mode .text-gray-700 {
            color: #e2e8f0;
        }
        body.dark-mode .text-gray-600 {
            color: #cbd5e0;
        }
        body.dark-mode .text-gray-200 {
            color: #a0aec0;
        }

        /* تعديل ألوان الخلفيات في الوضع الليلي */
        body.dark-mode .bg-white {
            background-color: #2d3748;
        }
        body.dark-mode .bg-blue-50 {
            background-color: #2a4365;
        }
        body.dark-mode .bg-gray-700 {
            background-color: #2d3748;
        }
        
        /* تعديل ألوان الحدود في الوضع الليلي */
        body.dark-mode .border-gray-300 {
            border-color: #4a5568;
        }

        /* تعديل ألوان الإدخالات في الوضع الليلي */
        body.dark-mode select,
        body.dark-mode input {
            background-color: #2d3748;
            color: #e5e7eb;
            border-color: #4a5568;
        }

        /* تعديل ألوان الأزرار في الوضع الليلي */
        .calculate-button {
            background-image: linear-gradient(to right, #2563eb, #4f46e5);
        }
        .calculate-button:hover {
            background-image: linear-gradient(to right, #1d4ed8, #4338ca);
        }
        body.dark-mode .calculate-button {
            background-image: linear-gradient(to right, #2b6cb0, #2c5282);
        }
        body.dark-mode .calculate-button:hover {
            background-image: linear-gradient(to right, #2c5282, #2a4365);
        }

        /* تعديل ألوان الروابط في الوضع الليلي */
        body.dark-mode a {
            color: #63b3ed;
        }

    </style>
    <!-- مكتبة Moment.js مع اللغات -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js"></script>
    <!-- مكتبة Moment Hijri.js -->
    <script src="moment-hijri.js"></script>

    <!-- مكتبة Timezone.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.43/moment-timezone-with-data.min.js"></script>
</head>
<body class="min-h-screen">
    <!-- زر تبديل الوضع -->
    <div class="theme-toggle" onclick="toggleDarkMode()" aria-label="تبديل الوضع" tabindex="0" role="button">
        <i class="fas fa-moon"></i>
    </div>
    <!-- زر تحسين التباين -->
    <div class="contrast-toggle" onclick="toggleContrast()" aria-label="تحسين التباين" tabindex="0" role="button">
        <i class="fas fa-adjust"></i>
    </div>
    <!-- زر تكبير الخط -->
    <div class="font-size-toggle" onclick="toggleFontSize()" aria-label="تغيير حجم الخط" tabindex="0" role="button">
        <i class="fas fa-text-height"></i>
    </div>
    <!-- زر المساعدة -->
    <div class="help-toggle" onclick="toggleHelp()" aria-label="مساعدة" tabindex="0" role="button">
        <i class="fas fa-question-circle"></i>
    </div>
    <!-- نافذة المساعدة -->
    <div class="help-modal" id="helpModal">
        <div class="help-modal-content animate__animated animate__fadeInDown">
            <span class="help-modal-close" onclick="toggleHelp()">&times;</span>
            <h2 class="text-3xl font-bold mb-4">مساعدة</h2>
            <p class="mb-2">مرحبًا بك في حاسبة العمر. اتبع الخطوات التالية لاستخدام الحاسبة:</p>
            <ol class="list-decimal list-inside mb-4">
                <li>أدخل سنة ميلادك.</li>
                <li>اختر شهر ميلادك.</li>
                <li>اختر يوم ميلادك.</li>
                <li>اضغط على زر "احسب العمر" للحصول على النتائج.</li>
            </ol>
            <p>يمكنك أيضًا تخصيص التجربة باستخدام الأدوات على الجانب الأيسر:</p>
            <ul class="list-disc list-inside">
                <li>تبديل بين الوضع الفاتح والداكن.</li>
                <li>تحسين التباين لراحة العين.</li>
                <li>تكبير حجم الخط لتسهيل القراءة.</li>
            </ul>
        </div>
    </div>
    <!-- خلفية متحركة -->
    <div class="background-animation"></div>
    <!-- العنوان الرئيسي -->
    <header class="text-gray-800 py-20">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-4 animate__animated animate__fadeInDown typing-animation">حاسبة العمر</h1>
            <p class="text-xl md:text-2xl animate__animated animate__fadeInUp">احسب عمرك بدقة وتعرف على المزيد من التفاصيل</p>
        </div>
    </header>

    <!-- قسم الحاسبة -->
    <section id="calculator" class="py-20">
        <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 animate__animated animate__fadeInDown">أدخل تاريخ ميلادك</h2>
                <p class="text-lg text-gray-600 mt-4 animate__animated animate__fadeInUp">واكتشف تفاصيل مدهشة عن عمرك</p>
            </div>
            <div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-2xl" data-aos="zoom-in">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    <!-- السنة -->
                    <div class="tooltip">
                        <label for="year" class="block text-sm font-medium text-gray-700 mb-2">السنة</label>
                        <span class="tooltip-text">اختر سنة ميلادك</span>
                        <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>
                            <!-- السنوات سيتم تعبئتها بواسطة JavaScript -->
                        </select>
                    </div>
                    <!-- الشهر -->
                    <div class="tooltip">
                        <label for="month" class="block text-sm font-medium text-gray-700 mb-2">الشهر</label>
                        <span class="tooltip-text">اختر شهر ميلادك</span>
                        <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>
                            <!-- الشهور سيتم تعبئتها بواسطة JavaScript -->
                        </select>
                    </div>
                    <!-- اليوم -->
                    <div class="tooltip">
                        <label for="day" class="block text-sm font-medium text-gray-700 mb-2">اليوم</label>
                        <span class="tooltip-text">اختر يوم ميلادك</span>
                        <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>
                            <!-- الأيام سيتم تعبئتها بواسطة JavaScript -->
                        </select>
                    </div>
                </div>
                <!-- خيارات إضافية -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <!-- اختيار التقويم -->
                    <div class="tooltip">
                        <label for="calendarType" class="block text-sm font-medium text-gray-700 mb-2">نوع التقويم</label>
                        <span class="tooltip-text">اختر التقويم المستخدم</span>
                        <select id="calendarType" 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="gregorian">ميلادي</option>
                            <option value="hijri">هجري</option>
                        </select>
                    </div>
                    <!-- اختيار المنطقة الزمنية -->
                    <div class="tooltip">
                        <label for="timezone" class="block text-sm font-medium text-gray-700 mb-2">المنطقة الزمنية</label>
                        <span class="tooltip-text">اختر منطقتك الزمنية</span>
                        <select id="timezone" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <!-- سيتم تعبئة الخيارات بواسطة JavaScript -->
                        </select>
                    </div>
                </div>
                <!-- زر الحساب -->
                <button class="calculate-button w-full text-white font-semibold py-3 px-6 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-blue-300">احسب العمر</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-2xl animate__animated animate__fadeInUp stat-card" data-aos="fade-up" id="ageCard" tabindex="0">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">عمرك</h3>
                    <div id="ageResult" class="text-xl text-gray-700"></div>
                </div>
                <!-- تاريخ الميلاد المحول -->
                <div class="bg-white p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp stat-card" data-aos="fade-up" data-aos-delay="100" id="convertedBirthDateCard" tabindex="0">
                    <h3 id="convertedBirthDateTitle" class="text-2xl font-bold text-gray-800 mb-4"></h3>
                    <p id="convertedBirthDateResult" class="text-xl text-gray-700"></p>
                </div>
                <!-- معلومات إضافية -->
                <div id="additionalInfoContainer" class="grid grid-cols-1 md:grid-cols-2 gap-8 col-span-2">
                    <!-- البطاقات سيتم إضافتها هنا من خلال JavaScript -->
                </div>
                <!-- مرحلة الحياة -->
                <div class="p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp relative overflow-hidden stat-card" data-aos="fade-up" data-aos-delay="300" id="lifeStageCard" tabindex="0">
                    <div class="absolute inset-0 bg-black bg-opacity-50"></div>
                    <div class="relative z-10">
                        <h3 class="text-2xl font-bold text-white mb-4">مرحلة الحياة</h3>
                        <p id="lifeStage" class="text-xl text-white"></p>
                    </div>
                </div>
                <!-- زر إضافة إلى التقويم -->
                <div class="md:col-span-2 text-center mt-6">
                    <button id="addToCalendar" class="w-full md:w-auto bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 text-white font-semibold py-3 px-6 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-300">إضافة عيد الميلاد إلى التقويم <i class="fas fa-calendar-plus ml-2"></i></button>
                </div>
                <!-- زر مشاركة النتائج -->
                <div class="md:col-span-2 text-center mt-4">
                    <button id="shareResultsButton" class="w-full md:w-auto bg-gradient-to-r from-pink-500 to-red-500 hover:from-pink-600 hover:to-red-600 text-white font-semibold py-3 px-6 rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-pink-300">مشاركة النتائج <i class="fas fa-share-alt ml-2"></i></button>
                </div>
            </div>
        </div>
    </section>

    <!-- تذييل الصفحة -->
    <footer class="bg-gray-800 text-white py-10">
        <div class="container mx-auto px-4 text-center">
            <div class="mb-4">
                <a href="#" class="text-white text-2xl font-bold">حاسبة العمر</a>
            </div>
            <p>&copy; <span id="currentYear"></span> حاسبة العمر. جميع الحقوق محفوظة.</p>
            <p>تم التطوير بواسطة سجاد المانع</p>
        </div>
    </footer>

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

    <!-- سكريبت JavaScript المخصص -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // تهيئة AOS
            AOS.init({
                duration: 1000,
                once: true,
            });

            // تعيين اللغة العربية لـ Moment.js
            moment.locale('ar');

            // تحديث السنة الحالية في الحقوق
            document.getElementById('currentYear').textContent = new Date().getFullYear();

            // تبديل الوضع الداكن
            function toggleDarkMode() {
                document.body.classList.toggle('dark-mode');
            }

            // تحسين التباين
            function toggleContrast() {
                document.body.classList.toggle('high-contrast');
            }

            // تكبير حجم الخط
            function toggleFontSize() {
                document.body.classList.toggle('large-font');
            }

            // فتح وإغلاق نافذة المساعدة
            function toggleHelp() {
                const helpModal = document.getElementById('helpModal');
                if (helpModal.style.display === 'flex') {
                    helpModal.style.display = 'none';
                } else {
                    helpModal.style.display = 'flex';
                }
            }

            // ربط الوظائف بالأزرار
            document.querySelector('.theme-toggle').addEventListener('click', toggleDarkMode);
            document.querySelector('.contrast-toggle').addEventListener('click', toggleContrast);
            document.querySelector('.font-size-toggle').addEventListener('click', toggleFontSize);
            document.querySelector('.help-toggle').addEventListener('click', toggleHelp);

            // التحقق من دعم المنطقة الزمنية
            const timezoneSelect = document.getElementById('timezone');
            function populateTimezones() {
                timezoneSelect.innerHTML = '<option value="local">استخدم منطقتي الحالية</option>';
                if (moment.tz) {
                    const timezones = moment.tz.names();
                    timezones.forEach(tz => {
                        const option = document.createElement('option');
                        option.value = tz;
                        option.textContent = tz;
                        timezoneSelect.appendChild(option);
                    });
                } else {
                    timezoneSelect.innerHTML += '<option value="UTC">UTC</option>';
                }
            }
            populateTimezones();

            // إضافة السنوات إلى عنصر السنة
            function populateYears() {
                const calendarType = document.getElementById('calendarType').value;
                const yearSelect = document.getElementById('year');
                yearSelect.innerHTML = '<option value="">اختر</option>';
                const currentYearGregorian = new Date().getFullYear();
                const currentYearHijri = moment().iYear();

                if (calendarType === 'hijri') {
                    for (let i = currentYearHijri; i >= 1340; i--) {
                        const option = document.createElement('option');
                        option.value = i;
                        option.textContent = i;
                        yearSelect.appendChild(option);
                    }
                } else {
                    for (let i = currentYearGregorian; i >= 1900; i--) {
                        const option = document.createElement('option');
                        option.value = i;
                        option.textContent = i;
                        yearSelect.appendChild(option);
                    }
                }
            }

            // إضافة الشهور إلى عنصر الشهر بناءً على نوع التقويم
            function populateMonths() {
                const calendarType = document.getElementById('calendarType').value;
                const monthSelect = document.getElementById('month');
                monthSelect.innerHTML = '<option value="">اختر</option>';

                let months = [];
                if (calendarType === 'hijri') {
                    months = [
                        { value: 1, name: 'محرم' },
                        { value: 2, name: 'صفر' },
                        { value: 3, name: 'ربيع الأول' },
                        { value: 4, name: 'ربيع الثاني' },
                        { value: 5, name: 'جمادى الأولى' },
                        { value: 6, name: 'جمادى الآخرة' },
                        { value: 7, name: 'رجب' },
                        { value: 8, name: 'شعبان' },
                        { value: 9, name: 'رمضان' },
                        { value: 10, name: 'شوال' },
                        { value: 11, name: 'ذو القعدة' },
                        { value: 12, name: 'ذو الحجة' },
                    ];
                } else {
                    months = [
                        { value: 1, name: 'يناير' },
                        { value: 2, name: 'فبراير' },
                        { value: 3, name: 'مارس' },
                        { value: 4, name: 'أبريل' },
                        { value: 5, name: 'مايو' },
                        { value: 6, name: 'يونيو' },
                        { value: 7, name: 'يوليو' },
                        { value: 8, name: 'أغسطس' },
                        { value: 9, name: 'سبتمبر' },
                        { value: 10, name: 'أكتوبر' },
                        { value: 11, name: 'نوفمبر' },
                        { value: 12, name: 'ديسمبر' },
                    ];
                }

                months.forEach(month => {
                    const option = document.createElement('option');
                    option.value = month.value;
                    option.textContent = month.name;
                    monthSelect.appendChild(option);
                });
            }

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

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

                if (year && month) {
                    let daysInMonth;
                    if (calendarType === 'hijri') {
                        const hijriDate = moment(`${year}-${month}-1`, 'iYYYY-iM-iD');
                        daysInMonth = hijriDate.iDaysInMonth();
                    } else {
                        daysInMonth = moment(`${year}-${month}`, 'YYYY-M').daysInMonth();
                    }
                    for (let i = 1; i <= daysInMonth; i++) {
                        const option = document.createElement('option');
                        option.value = i;
                        option.textContent = i;
                        daySelect.appendChild(option);
                    }
                }
            }

            document.getElementById('calendarType').addEventListener('change', () => {
                populateYears();
                populateMonths();
                populateDays();
            });

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

            // تعبئة السنوات والشهور في البداية
            populateYears();
            populateMonths();

            // ربط زر الحساب بالوظيفة
            document.querySelector('.calculate-button').addEventListener('click', calculateAge);

            function calculateAge() {
                const calendarType = document.getElementById('calendarType').value;
                const timezone = document.getElementById('timezone').value;
                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;
                }

                let birthdate, convertedBirthdate;
                if (calendarType === 'hijri') {
                    birthdate = moment.tz(`${year}-${month}-${day}`, 'iYYYY-iM-iD', timezone === 'local' ? undefined : timezone);
                    if (!birthdate.isValid()) {
                        alert('تاريخ هجري غير صالح.');
                        return;
                    }
                    convertedBirthdate = birthdate.clone().locale('ar').format('D MMMM YYYY');
                } else {
                    birthdate = moment.tz(`${year}-${month}-${day}`, 'YYYY-M-D', timezone === 'local' ? undefined : timezone);
                    if (!birthdate.isValid()) {
                        alert('تاريخ ميلادي غير صالح.');
                        return;
                    }
                    convertedBirthdate = birthdate.clone().locale('ar').format('iD iMMMM iYYYY');
                }
                const today = timezone === 'local' ? moment() : moment().tz(timezone);

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

                // حساب العمر
                const ageYears = today.diff(birthdate, 'years');
                const ageMonths = today.diff(birthdate, 'months');
                const ageWeeks = today.diff(birthdate, 'weeks');
                const ageDays = today.diff(birthdate, 'days');
                const ageHours = today.diff(birthdate, 'hours');
                const ageMinutes = today.diff(birthdate, 'minutes');
                const ageSeconds = today.diff(birthdate, 'seconds');

                const remainingMonths = ageMonths - (ageYears * 12);
                const remainingDays = today.diff(birthdate.clone().add(ageYears, 'years').add(remainingMonths, 'months'), 'days');

                // عرض العمر
                document.getElementById('ageResult').innerHTML = `
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                        <div class="p-4 bg-blue-50 rounded-lg stat-card">
                            <span class="text-5xl font-bold text-blue-600">${ageYears}</span>
                            <p class="text-gray-600">سنة</p>
                        </div>
                        <div class="p-4 bg-blue-50 rounded-lg stat-card">
                            <span class="text-5xl font-bold text-blue-600">${remainingMonths}</span>
                            <p class="text-gray-600">شهر</p>
                        </div>
                        <div class="p-4 bg-blue-50 rounded-lg stat-card">
                            <span class="text-5xl font-bold text-blue-600">${remainingDays}</span>
                            <p class="text-gray-600">يوم</p>
                        </div>
                        <div class="p-4 bg-blue-50 rounded-lg stat-card">
                            <span class="text-2xl font-bold text-indigo-600">${ageMonths}</span>
                            <p class="text-gray-600">إجمالي الشهور</p>
                        </div>
                        <div class="p-4 bg-blue-50 rounded-lg stat-card">
                            <span class="text-2xl font-bold text-indigo-600">${ageWeeks}</span>
                            <p class="text-gray-600">إجمالي الأسابيع</p>
                        </div>
                        <div class="p-4 bg-blue-50 rounded-lg stat-card">
                            <span class="text-2xl font-bold text-indigo-600">${ageDays}</span>
                            <p class="text-gray-600">إجمالي الأيام</p>
                        </div>
                    </div>
                `;

                // عرض تاريخ الميلاد المحول
                document.getElementById('convertedBirthDateTitle').textContent = calendarType === 'hijri' ? 'تاريخ ميلادك الميلادي' : 'تاريخ ميلادك الهجري';
                document.getElementById('convertedBirthDateResult').innerHTML = `
                    <p class="text-3xl font-bold text-indigo-600">${convertedBirthdate}</p>
                `;

                // معلومات إضافية
                let seasonName = '';
                let seasonNameEnglish = '';

                // تحويل التاريخ الهجري إلى ميلادي للحصول على الموسم
                let birthdateForSeason = birthdate.clone();
                if (calendarType === 'hijri') {
                    birthdateForSeason = birthdate.clone().format('YYYY-M-D');
                    birthdateForSeason = moment(birthdateForSeason, 'YYYY-M-D');
                }

                const birthMonth = birthdateForSeason.month() + 1;

                if ((birthMonth >= 3) && (birthMonth <= 5)) {
                    seasonName = 'الربيع';
                    seasonNameEnglish = 'spring';
                } else if ((birthMonth >= 6) && (birthMonth <= 8)) {
                    seasonName = 'الصيف';
                    seasonNameEnglish = 'summer';
                } else if ((birthMonth >= 9) && (birthMonth <= 11)) {
                    seasonName = 'الخريف';
                    seasonNameEnglish = 'autumn';
                } else {
                    seasonName = 'الشتاء';
                    seasonNameEnglish = 'winter';
                }

                // تحديد البرج الفلكي (إذا كان التقويم ميلادي)
                let zodiacSign = '';
                if (calendarType === 'gregorian') {
                    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') }
                    ];

                    for (let i = 0; i < zodiacSigns.length; i++) {
                        const currentSign = zodiacSigns[i];
                        const nextSign = zodiacSigns[(i + 1) % zodiacSigns.length];
                        const startDate = currentSign.startDate.clone().year(2000);
                        const endDate = nextSign.startDate.clone().year(2000);

                        if (endDate.isBefore(startDate)) {
                            endDate.add(1, 'years');
                        }

                        const birthDateAdjusted = birthdate.clone().year(2000);
                        if (birthDateAdjusted.isBetween(startDate, endDate, null, '[)')) {
                            zodiacSign = currentSign.sign;
                            break;
                        }
                    }
                }

                // برجك الصيني
                const chineseZodiac = ['الفأر', 'الثور', 'النمر', 'الأرنب', 'التنين', 'الأفعى', 'الحصان', 'الخروف', 'القرد', 'الديك', 'الكلب', 'الخنزير'];
                const zodiacIndex = (birthdate.year() - 4) % 12;
                const chineseZodiacSign = chineseZodiac[zodiacIndex];

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

                // عيد الميلاد القادم
                let nextBirthday = birthdate.clone().year(today.year());
                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';
                }

                // تغيير خلفية خانة مرحلة الحياة بناءً على المرحلة
                const lifeStageCard = document.getElementById('lifeStageCard');
                lifeStageCard.classList.remove('life-stage-childhood', 'life-stage-adolescence', 'life-stage-youth', 'life-stage-senior');
                lifeStageCard.classList.add(lifeStageClass);

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

                // فصل المعلومات الإضافية في بطاقات منفصلة
                const additionalInfoContainer = document.getElementById('additionalInfoContainer');
                additionalInfoContainer.innerHTML = ''; // تفريغ المحتوى السابق

                // بطاقة الفصل الذي ولدت فيه
                const seasonCard = document.createElement('div');
                seasonCard.className = `p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp stat-card season-${seasonNameEnglish}`;
                seasonCard.tabIndex = 0;
                seasonCard.innerHTML = `
                    <div class="absolute inset-0 bg-black bg-opacity-50"></div>
                    <div class="relative z-10">
                        <h3 class="text-2xl font-bold text-white mb-4">الفصل الذي ولدت فيه</h3>
                        <p class="text-xl text-white">${seasonName}</p>
                    </div>
                `;
                additionalInfoContainer.appendChild(seasonCard);

                // بطاقة برجك الفلكي (إذا كان التقويم ميلادي)
                if (calendarType === 'gregorian') {
                    const zodiacCard = document.createElement('div');
                    zodiacCard.className = `p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp stat-card`;
                    zodiacCard.tabIndex = 0;
                    zodiacCard.innerHTML = `
                        <h3 class="text-2xl font-bold mb-4">برجك الفلكي</h3>
                        <p class="text-xl">${zodiacSign}</p>
                    `;
                    additionalInfoContainer.appendChild(zodiacCard);
                }

                // بطاقة برجك الصيني
                const chineseZodiacCard = document.createElement('div');
                chineseZodiacCard.className = `p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp stat-card`;
                chineseZodiacCard.tabIndex = 0;
                chineseZodiacCard.innerHTML = `
                    <h3 class="text-2xl font-bold mb-4">برجك الصيني</h3>
                    <p class="text-xl">${chineseZodiacSign}</p>
                `;
                additionalInfoContainer.appendChild(chineseZodiacCard);

                // بطاقة يوم ميلادك
                const birthDayCard = document.createElement('div');
                birthDayCard.className = `p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp stat-card`;
                birthDayCard.tabIndex = 0;
                birthDayCard.innerHTML = `
                    <h3 class="text-2xl font-bold mb-4">يوم ميلادك كان</h3>
                    <p class="text-xl">${birthDayName}</p>
                `;
                additionalInfoContainer.appendChild(birthDayCard);

                // بطاقة عيد ميلادك القادم
                const nextBirthdayCard = document.createElement('div');
                nextBirthdayCard.className = `p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp stat-card`;
                nextBirthdayCard.tabIndex = 0;
                nextBirthdayCard.innerHTML = `
                    <h3 class="text-2xl font-bold mb-4">كم تبقى لعيد ميلادك القادم</h3>
                    <p class="text-xl">${daysUntilNextBirthday} يوم (${nextBirthdayDayName})</p>
                `;
                additionalInfoContainer.appendChild(nextBirthdayCard);

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

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

            // ربط زر إضافة إلى التقويم
            document.getElementById('addToCalendar').addEventListener('click', addToCalendar);

            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.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}T000000Z`;
                const endDate = `${year}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}T235959Z`;

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

                if (/android/i.test(userAgent)) {
                    // أجهزة أندرويد
                    const calIntent = `intent://#Intent;action=android.intent.action.INSERT;type=vnd.android.cursor.item/event;S.title=${title};S.beginTime=${Date.parse(`${year}-${month}-${day}`)};S.allDay=true;end`;
                    window.open(calIntent, '_blank');
                } else if (/iP(ad|hone|od)/.test(userAgent)) {
                    // أجهزة أبل
                    const calLink = `BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
SUMMARY:${decodeURIComponent(title)}
DTSTART;VALUE=DATE:${year}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}
DTEND;VALUE=DATE:${year}${month.toString().padStart(2, '0')}${(parseInt(day) + 1).toString().padStart(2, '0')}
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');
                }
            }

            // ربط زر مشاركة النتائج
            document.getElementById('shareResultsButton').addEventListener('click', shareResults);

            function shareResults() {
                const shareData = {
                    title: 'نتائجي من حاسبة العمر',
                    text: 'اكتشفت عمري وتفاصيل أخرى مدهشة! جربها أنت أيضًا.',
                    url: window.location.href
                };

                if (navigator.share) {
                    navigator.share(shareData)
                        .then(() => console.log('تمت المشاركة بنجاح'))
                        .catch((error) => console.log('حدث خطأ أثناء المشاركة', error));
                } else {
                    // إذا لم يكن الجهاز يدعم Web Share API
                    alert('ميزة المشاركة غير مدعومة على جهازك. يمكنك نسخ الرابط ومشاركته يدويًا.');
                }
            }

            // كشف نوع الجهاز وتطبيق أنماط مناسبة
            function detectDevice() {
                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
                if (isMobile) {
                    document.body.classList.add('mobile-device');
                } else {
                    document.body.classList.add('desktop-device');
                }
            }

            detectDevice();

        }); // نهاية DOMContentLoaded
    </script>
</body>
</html>