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


<!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>