حسن لي  موقعي هذا واجعله احترافيا جدا واضف عليه ميزات اضافية بما يتناسب مع محتوى الموقع وادرس كل شيء حتى لا اواجهة خطأ ابدا واجعل تصميمة اكثر عصرية وتفاعلي جدا ، مثال على التفاعلية التي اقصدها هو موقع ابل عندما تزور منتج وتتصفح منتجا مثلا فأن الواجهة تكون تفاعلية وعندما تسحب للأسفل اكثر فاكثر فالمحتوى يتحرك ويتبدل لإظهار تفاصيل اكثر 
الكود :
<!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>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Tajawal', sans-serif;
            background-color: #FFF0F5;
        }
    </style>
</head>
<body class="min-h-screen">
    <header class="p-5 text-center">
        <div class="text-2xl font-bold text-gray-800">حاسبة العمر</div>
    </header>

    <main class="container mx-auto px-4 mt-10">
        <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-gray-800">احسب عمرك فورًا</h1>
        
        <div class="max-w-md mx-auto bg-gradient-to-r from-purple-400 to-pink-500 p-1 rounded-xl shadow-lg">
            <div class="bg-white p-6 rounded-lg">
                <h2 class="text-2xl font-bold mb-4 text-center text-gray-800">حاسبة العمر</h2>
                <div class="grid grid-cols-3 gap-4 mb-4">
                    <div>
                        <label for="year" class="block text-sm font-medium text-gray-700 mb-2">السنة</label>
                        <select id="year" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <option value="">اختر</option>
                            <script>
                                for (let i = 1900; i <= 2099; 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-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <option value="">اختر</option>
                            <option value="1">يناير - 1</option>
                            <option value="2">فبراير - 2</option>
                            <option value="3">مارس - 3</option>
                            <option value="4">أبريل - 4</option>
                            <option value="5">مايو - 5</option>
                            <option value="6">يونيو - 6</option>
                            <option value="7">يوليو - 7</option>
                            <option value="8">أغسطس - 8</option>
                            <option value="9">سبتمبر - 9</option>
                            <option value="10">أكتوبر - 10</option>
                            <option value="11">نوفمبر - 11</option>
                            <option value="12">ديسمبر - 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-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <option value="">اختر</option>
                        </select>
                    </div>
                </div>
                <button onclick="calculateAge()" class="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-2 px-4 rounded-md hover:from-purple-600 hover:to-pink-600 transition duration-300 ease-in-out">احسب العمر</button>
                <div id="result" class="mt-6 text-center text-lg font-semibold text-gray-700"></div>

                <button id="addToCalendar" class="w-full mt-4 bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition duration-300 ease-in-out hidden">إضافة إلى التقويم</button>

                <button id="showDetails" onclick="showMoreDetails()" class="w-full mt-4 bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300 ease-in-out hidden">عرض المزيد من التفاصيل</button>

                <div id="extraDetails" class="mt-6 text-center hidden">
                    <p id="hijriAge" class="text-lg text-purple-600 mb-2"></p>
                    <p id="zodiacSign" class="text-lg text-pink-500 mb-2"></p>
                    <p id="season" class="text-lg text-green-600 mb-2"></p>
                    <p id="birthDay" class="text-lg text-orange-500 mb-2"></p>
                    <p id="nextBirthday" class="text-lg text-blue-600"></p>
                </div>
            </div>
        </div>
    </main>

    <script>
        function populateDays() {
            const year = document.getElementById('year').value;
            const month = document.getElementById('month').value;
            const daySelect = document.getElementById('day');
            
            daySelect.innerHTML = '<option value="">اختر</option>';
            
            if (month) {
                const daysInMonth = new Date(year, 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 = document.getElementById('year').value;
            const month = document.getElementById('month').value;
            const day = document.getElementById('day').value;
            
            if (!year || !month || !day) {
                document.getElementById('result').textContent = 'الرجاء إدخال تاريخ الميلاد كاملاً.';
                return;
            }

            const birthdate = new Date(year, month - 1, day);
            const today = new Date();
            
            let years = today.getFullYear() - birthdate.getFullYear();
            let months = today.getMonth() - birthdate.getMonth();
            let days = today.getDate() - birthdate.getDate();

            if (months < 0 || (months === 0 && days < 0)) {
                years--;
                months += 12;
            }

            if (days < 0) {
                const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
                days += lastMonth.getDate();
                months--;
            }

            const totalDays = Math.floor((today - birthdate) / (1000 * 60 * 60 * 24));

            document.getElementById('result').innerHTML = `
                عمرك هو:<br>
                <span class="text-2xl text-purple-600">${years} سنة، ${months} شهر، و ${days} يوم</span><br>
                <span class="text-xl text-pink-500">(${totalDays} يوم بالإجمالي)</span>
            `;

            document.getElementById('addToCalendar').classList.remove('hidden');
            document.getElementById('showDetails').classList.remove('hidden');
        }

        document.getElementById('addToCalendar').addEventListener('click', function() {
            const year = document.getElementById('year').value;
            const month = document.getElementById('month').value;
            const day = document.getElementById('day').value;
            
            if (year && month && day) {
                const url = `https://calendar.google.com/calendar/r/eventedit?dates=${year}${month.padStart(2, '0')}${day.padStart(2, '0')}/${year}${month.padStart(2, '0')}${day.padStart(2, '0')}&text=عيد%20ميلاد`;
                window.open(url, '_blank');
            }
        });

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

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

            const birthdate = new Date(year, month - 1, day);
            const today = new Date();

            // حساب العمر بالتقويم الهجري (تقريبي)
            const hijriYear = Math.floor((birthdate.getTime() - 1970) / (1000 * 60 * 60 * 24 * 354.367)) + 1390;
            const hijriAge = Math.floor((today.getTime() - birthdate.getTime()) / (1000 * 60 * 60 * 24 * 354.367));

            // تحديد البرج الفلكي
            const zodiacSigns = ["الدلو", "الحوت", "الحمل", "الثور", "الجوزاء", "السرطان", "الأسد", "العذراء", "الميزان", "العقرب", "القوس", "الجدي"];
            const zodiacDates = [20, 19, 21, 20, 21, 21, 23, 23, 23, 23, 22, 22];
            let zodiacIndex = month - 1;
            if (day < zodiacDates[month - 1]) {
                zodiacIndex = (zodiacIndex + 11) % 12;
            }

            // تحديد الفصل
            const seasons = ["الشتاء", "الربيع", "الصيف", "الخريف"];
            const seasonIndex = Math.floor(((month + 9) % 12) / 3);

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

            // حساب الأيام المتبقية حتى عيد الميلاد القادم
            const nextBirthday = new Date(today.getFullYear(), birthdate.getMonth(), birthdate.getDate());
            if (nextBirthday < today) {
                nextBirthday.setFullYear(nextBirthday.getFullYear() + 1);
            }
            const daysUntilNextBirthday = Math.ceil((nextBirthday - today) / (1000 * 60 * 60 * 24));

            // عرض المعلومات الإضافية
            document.getElementById('hijriAge').textContent = `العمر بالتقويم الهجري: ${hijriAge} سنة (تقريباً)`;
            document.getElementById('zodiacSign').textContent = `البرج الفلكي: ${zodiacSigns[zodiacIndex]}`;
            document.getElementById('season').textContent = `فصل الميلاد: ${seasons[seasonIndex]}`;
            document.getElementById('birthDay').textContent = `يوم الميلاد: ${birthDay}`;
            document.getElementById('nextBirthday').textContent = `الأيام المتبقية حتى عيد ميلادك القادم: ${daysUntilNextBirthday} يوم`;

            document.getElementById('extraDetails').classList.remove('hidden');
        }
    </script>
</body>
</html>