مهمتي لك ليست صعبه في هذا الكود ربط المكتبات واظهار النتائج كما اريد بالضبط 
لكنني لست راضيا عن التصميم 
<!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;
        }

        /* خلفية متحركة للصفحة بالكامل */
        .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;
        }

        /* زر تكبير الخط */
        .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;
        }

        /* زر المساعدة */
        .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: #e2e8f0;
        }
        body.dark-mode .help-toggle {
            background: #2d3748;
        }
        body.dark-mode .help-toggle:hover {
            background: #4a5568;
        }

        /* نافذة المساعدة */
        .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);
        }

        /* تخصيص الخط */
        .custom-font {
            font-family: 'Cairo', sans-serif;
        }

        /* تخصيص الألوان */
        .custom-color {
            color: #ff6b6b;
        }

        /* تكيف تصميم العناصر للشاشات الصغيرة */
        @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;
            }
        }

    </style>
    <!-- مكتبة Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.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 text-gray-800 dark-mode:text-yellow-300"></i>
    </div>
    <!-- زر تحسين التباين -->
    <div class="contrast-toggle" onclick="toggleContrast()" aria-label="تحسين التباين" tabindex="0" role="button">
        <i class="fas fa-adjust text-gray-800 dark-mode:text-yellow-300"></i>
    </div>
    <!-- زر تكبير الخط -->
    <div class="font-size-toggle" onclick="toggleFontSize()" aria-label="تغيير حجم الخط" tabindex="0" role="button">
        <i class="fas fa-text-height text-gray-800 dark-mode:text-yellow-300"></i>
    </div>
    <!-- زر المساعدة -->
    <div class="help-toggle" onclick="toggleHelp()" aria-label="مساعدة" tabindex="0" role="button">
        <i class="fas fa-question-circle text-gray-800 dark-mode:text-yellow-300"></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 dark-mode:text-white 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 dark-mode:text-white animate__animated animate__fadeInDown">أدخل تاريخ ميلادك</h2>
                <p class="text-lg text-gray-600 dark-mode:text-gray-300 mt-4 animate__animated animate__fadeInUp">واكتشف تفاصيل مدهشة عن عمرك</p>
            </div>
            <div class="max-w-lg mx-auto bg-white dark-mode:bg-gray-700 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 dark-mode:text-gray-200 mb-2">السنة</label>
                        <span class="tooltip-text">اختر سنة ميلادك</span>
                        <select id="year" class="w-full px-4 py-3 border border-gray-300 dark-mode:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark-mode:bg-gray-800 dark-mode:text-gray-200">
                            <option value="">اختر</option>
                            <!-- السنوات سيتم تعبئتها بواسطة JavaScript -->
                        </select>
                    </div>
                    <!-- الشهر -->
                    <div class="tooltip">
                        <label for="month" class="block text-sm font-medium text-gray-700 dark-mode:text-gray-200 mb-2">الشهر</label>
                        <span class="tooltip-text">اختر شهر ميلادك</span>
                        <select id="month" class="w-full px-4 py-3 border border-gray-300 dark-mode:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark-mode:bg-gray-800 dark-mode:text-gray-200">
                            <option value="">اختر</option>
                            <!-- الشهور سيتم تعبئتها بواسطة JavaScript -->
                        </select>
                    </div>
                    <!-- اليوم -->
                    <div class="tooltip">
                        <label for="day" class="block text-sm font-medium text-gray-700 dark-mode:text-gray-200 mb-2">اليوم</label>
                        <span class="tooltip-text">اختر يوم ميلادك</span>
                        <select id="day" class="w-full px-4 py-3 border border-gray-300 dark-mode:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark-mode:bg-gray-800 dark-mode:text-gray-200">
                            <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 dark-mode:text-gray-200 mb-2">نوع التقويم</label>
                        <span class="tooltip-text">اختر التقويم المستخدم</span>
                        <select id="calendarType" class="w-full px-4 py-3 border border-gray-300 dark-mode:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark-mode:bg-gray-800 dark-mode:text-gray-200">
                            <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 dark-mode:text-gray-200 mb-2">المنطقة الزمنية</label>
                        <span class="tooltip-text">اختر منطقتك الزمنية</span>
                        <select id="timezone" class="w-full px-4 py-3 border border-gray-300 dark-mode:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark-mode:bg-gray-800 dark-mode:text-gray-200">
                            <!-- إضافة المناطق الزمنية -->
                            <option value="local">استخدم منطقتي الحالية</option>
                            <!-- المناطق الزمنية سيتم تعبئتها بواسطة JavaScript -->
                        </select>
                    </div>
                </div>
                <!-- زر الحساب -->
                <button onclick="calculateAge()" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 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 dark-mode:bg-gray-700 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 dark-mode:text-white mb-4">عمرك</h3>
                    <div id="ageResult" class="text-xl text-gray-700 dark-mode:text-gray-300"></div>
                </div>
                <!-- تاريخ الميلاد المحول -->
                <div class="bg-white dark-mode:bg-gray-700 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 dark-mode:text-white mb-4"></h3>
                    <p id="convertedBirthDateResult" class="text-xl text-gray-700 dark-mode:text-gray-300"></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 mb-4">مرحلة الحياة</h3>
                        <p id="lifeStage" class="text-xl"></p>
                    </div>
                </div>
                <!-- زر إضافة إلى التقويم -->
                <div class="md:col-span-2 text-center mt-6">
                    <button id="addToCalendar" onclick="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 onclick="shareResults()" 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>
            <div class="mb-4">
                <a href="#" class="mx-2"><i class="fab fa-facebook fa-lg"></i></a>
                <a href="#" class="mx-2"><i class="fab fa-twitter fa-lg"></i></a>
                <a href="#" class="mx-2"><i class="fab fa-instagram fa-lg"></i></a>
                <a href="#" class="mx-2"><i class="fab fa-linkedin fa-lg"></i></a>
            </div>
            <p>&copy; 2023 حاسبة العمر. جميع الحقوق محفوظة.</p>
        </div>
    </footer>

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

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

        // تبديل الوضع الداكن
        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';
            }
        }

        // التحقق من دعم المنطقة الزمنية
        const timezoneSelect = document.getElementById('timezone');
        if (timezoneSelect && Intl && Intl.supportedValuesOf) {
            const timezones = Intl.supportedValuesOf('timeZone');
            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>';
        }

        // إضافة السنوات إلى عنصر السنة
        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();

        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);
                convertedBirthdate = birthdate.clone().format('D MMMM YYYY');
            } else {
                birthdate = moment.tz(`${year}-${month}-${day}`, 'YYYY-M-D', timezone === 'local' ? undefined : timezone);
                convertedBirthdate = birthdate.clone().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 dark-mode:bg-gray-800 rounded-lg stat-card">
                        <span class="text-5xl font-bold text-blue-600 dark-mode:text-blue-400">${ageYears}</span>
                        <p class="text-gray-600 dark-mode:text-gray-300">سنة</p>
                    </div>
                    <div class="p-4 bg-blue-50 dark-mode:bg-gray-800 rounded-lg stat-card">
                        <span class="text-5xl font-bold text-blue-600 dark-mode:text-blue-400">${remainingMonths}</span>
                        <p class="text-gray-600 dark-mode:text-gray-300">شهر</p>
                    </div>
                    <div class="p-4 bg-blue-50 dark-mode:bg-gray-800 rounded-lg stat-card">
                        <span class="text-5xl font-bold text-blue-600 dark-mode:text-blue-400">${remainingDays}</span>
                        <p class="text-gray-600 dark-mode:text-gray-300">يوم</p>
                    </div>
                    <div class="p-4 bg-blue-50 dark-mode:bg-gray-800 rounded-lg stat-card">
                        <span class="text-2xl font-bold text-indigo-600 dark-mode:text-indigo-400">${ageMonths}</span>
                        <p class="text-gray-600 dark-mode:text-gray-300">إجمالي الشهور</p>
                    </div>
                    <div class="p-4 bg-blue-50 dark-mode:bg-gray-800 rounded-lg stat-card">
                        <span class="text-2xl font-bold text-indigo-600 dark-mode:text-indigo-400">${ageWeeks}</span>
                        <p class="text-gray-600 dark-mode:text-gray-300">إجمالي الأسابيع</p>
                    </div>
                    <div class="p-4 bg-blue-50 dark-mode:bg-gray-800 rounded-lg stat-card">
                        <span class="text-2xl font-bold text-indigo-600 dark-mode:text-indigo-400">${ageDays}</span>
                        <p class="text-gray-600 dark-mode:text-gray-300">إجمالي الأيام</p>
                    </div>
                    <!-- إضافة المزيد من البطاقات إذا رغبت -->
                </div>
            `;

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

            // معلومات إضافية
            // تحديد الفصل
            let seasonName = '';
            let seasonNameEnglish = '';
            const birthMonth = calendarType === 'hijri' ? birthdate.iMonth() + 1 : birthdate.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()];

            // عيد الميلاد القادم
            const 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 = `
                <h3 class="text-2xl font-bold mb-4">الفصل الذي ولدت فيه</h3>
                <p class="text-xl">${seasonName}</p>
            `;
            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' });
        }

        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');
            }
        }

        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();

    </script>
</body>
</html>