اعد تصميم هذا الموقع من دون التأثير على وضيفته وترابط المكتبات 
وهذه تفاصيل التعديلات التي اريدها :
To deliver a globally advanced design for your age calculator, here’s how I would approach each aspect based on top-tier design trends:

1. **Color Schemes & Design Styles**:
   - I’d opt for **minimalist flat design** with a modern twist. Soft pastel shades combined with dark mode support for versatility. Globally, popular palettes include light greys, soft blues, and calming green tones.
   - **Material design** guidelines would be used for a sleek and intuitive feel, ensuring shadows and depth are used for emphasis.

2. **Animations & Effects**:
   - For a seamless user experience, I’d use **smooth transitions** when switching between sections (e.g., entering a date and showing results). Global trends show a focus on **micro-interactions**, like subtle hover effects, and **fade-in effects** for new content.
   - I’d implement **keyframe animations** for date transitions or when highlighting errors to give the user immediate feedback.
   
3. **Background**:
   - A **solid color** background is often the best choice for focus and readability. However, adding a **subtle gradient** or soft background pattern could give it more depth without overwhelming the interface.
   - Optionally, incorporating **scalable vector graphics (SVG)** backgrounds to adapt beautifully on all screen sizes.

4. **Accessibility**:
   - Following **WCAG 2.1 guidelines**, I’d enhance **contrast** for legibility, include **text-to-speech compatibility**, and provide options for users to adjust font sizes.
   - Ensuring **keyboard navigation** and compatibility with screen readers is key for a universal design.

5. **Reaching 1000 Lines of Code**:
   - To add more content while keeping the functionality meaningful, I’d include a **help section** or **tooltips** to explain how to use the calculator.
   - I’d also consider offering **customizable settings** (e.g., users choosing between Gregorian or Hijri dates and selecting their timezone).
   - Another advanced feature could be adding **data export options** (e.g., users saving results or sharing them on social media).
   - Enhanced **error handling** with detailed user-friendly messages when inputs are invalid, ensuring a robust experience.

This design would combine simplicity, modern aesthetics, and global best practices to make it visually appealing and functionally superior.

وتذكر اغرق الكود بالتصاميم الجديدة والعصرية مثلما طلبت واجعله ١٠٠٠ سطر 
واعطني الكود المعدل بالكامل 

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

        /* خلفية متحركة للصفحة بالكامل */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d);
            background-size: 600% 600%;
            animation: gradientBG 16s ease infinite;
            z-index: -1;
        }

        @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;
        }
        .stat-card:hover {
            transform: translateY(-10px);
        }
    </style>
    <!-- مكتبة Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <!-- مكتبة Moment Hijri.js من CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-hijri/2.1.1/moment-hijri.min.js"></script>
</head>
<body class="min-h-screen">
    <!-- العنوان الرئيسي -->
    <header class="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 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>
                        <label for="year" class="block text-sm font-medium text-gray-700 mb-2">السنة</label>
                        <select id="year" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">اختر</option>
                            <!-- إضافة السنوات -->
                            <script>
                                for (let i = new Date().getFullYear(); i >= 1900; i--) {
                                    document.write(`<option value="${i}">${i}</option>`);
                                }
                            </script>
                        </select>
                    </div>
                    <!-- الشهر -->
                    <div>
                        <label for="month" class="block text-sm font-medium text-gray-700 mb-2">الشهر</label>
                        <select id="month" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">اختر</option>
                            <option value="1">يناير</option>
                            <option value="2">فبراير</option>
                            <option value="3">مارس</option>
                            <option value="4">أبريل</option>
                            <option value="5">مايو</option>
                            <option value="6">يونيو</option>
                            <option value="7">يوليو</option>
                            <option value="8">أغسطس</option>
                            <option value="9">سبتمبر</option>
                            <option value="10">أكتوبر</option>
                            <option value="11">نوفمبر</option>
                            <option value="12">ديسمبر</option>
                        </select>
                    </div>
                    <!-- اليوم -->
                    <div>
                        <label for="day" class="block text-sm font-medium text-gray-700 mb-2">اليوم</label>
                        <select id="day" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">اختر</option>
                        </select>
                    </div>
                </div>
                <!-- زر الحساب -->
                <button onclick="calculateAge()" class="w-full bg-gradient-to-r from-blue-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 p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp stat-card" data-aos="fade-up" id="ageCard">
                    <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="hijriBirthDateCard">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">تاريخ ميلادك الهجري</h3>
                    <p id="hijriBirthDateResult" 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">
                    <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>
        </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>
            </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 populateDays() {
            const year = document.getElementById('year').value;
            const month = document.getElementById('month').value;
            const daySelect = document.getElementById('day');

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

            if (month) {
                const daysInMonth = new Date(year || 2000, month, 0).getDate();
                for (let i = 1; i <= daysInMonth; i++) {
                    const option = document.createElement('option');
                    option.value = i;
                    option.textContent = i;
                    daySelect.appendChild(option);
                }
            }
        }

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

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

            if (!year || !month || !day) {
                alert('الرجاء إدخال تاريخ الميلاد كاملاً.');
                return;
            }

            const birthdate = moment(`${year}-${month}-${day}`, 'YYYY-M-D');
            const today = moment();

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

            // حساب العمر بالتقويم الميلادي
            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 class="p-4 bg-blue-50 rounded-lg stat-card">
                        <span class="text-2xl font-bold text-indigo-600">${ageHours}</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">${ageMinutes}</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">${ageSeconds}</span>
                        <p class="text-gray-600">إجمالي الثواني</p>
                    </div>
                </div>
            `;

            // تحويل تاريخ الميلاد إلى التاريخ الهجري وعرضه
            moment.locale('ar-SA');
            const hijriBirthdate = birthdate.clone().format('iD iMMMM iYYYY');
            document.getElementById('hijriBirthDateResult').innerHTML = `
                <p class="text-3xl font-bold text-indigo-600">${hijriBirthdate}</p>
            `;

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

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

            let zodiacSign = '';
            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 = (year - 4) % 12;
            const chineseZodiacSign = chineseZodiac[zodiacIndex];

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

            // عيد الميلاد القادم
            const nextBirthday = moment(`${today.year()}-${month}-${day}`, 'YYYY-M-D');
            if (nextBirthday.isBefore(today)) {
                nextBirthday.add(1, 'years');
            }
            const daysUntilNextBirthday = nextBirthday.diff(today, 'days');
            const nextBirthdayDayName = daysOfWeek[nextBirthday.day()];

            // مرحلة الحياة
            let lifeStage = '';
            let lifeStageClass = '';
            if (ageYears < 12) {
                lifeStage = 'طفولة';
                lifeStageClass = 'life-stage-childhood';
            } else if (ageYears >= 12 && ageYears < 18) {
                lifeStage = 'مراهقة';
                lifeStageClass = 'life-stage-adolescence';
            } else if (ageYears >= 18 && ageYears < 60) {
                lifeStage = 'شباب';
                lifeStageClass = 'life-stage-youth';
            } else {
                lifeStage = 'شيخوخة';
                lifeStageClass = 'life-stage-senior';
            }

            // تغيير خلفية خانة مرحلة الحياة بناءً على المرحلة
            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.innerHTML = `
                <h3 class="text-2xl font-bold mb-4">الفصل الذي ولدت فيه</h3>
                <p class="text-xl">${seasonName}</p>
            `;
            additionalInfoContainer.appendChild(seasonCard);

            // بطاقة برجك الفلكي
            const zodiacCard = document.createElement('div');
            zodiacCard.className = `p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp stat-card`;
            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.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.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.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');
            }
        }
    </script>
</body>
</html>