how to successfully deploy this website on Cloudflare Pages step by step and check each step :


<!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"/>
    <!-- مكتبة Splide.js للشرائح -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3/dist/css/splide.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;
            background-color: #f0f4f8;
            overflow-x: hidden;
        }

        /* خلفية متحركة */
        .animated-bg {
            background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d);
            background-size: 600% 600%;
            animation: gradientBG 16s ease infinite;
        }

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

        /* تأثير الظهور */
        .fade-in {
            opacity: 0;
            animation: fadeIn 1s forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        /* أنماط إضافية للنتائج */
        .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');
            background-size: cover;
            background-position: center;
            color: #fff;
        }
        .life-stage-senior {
            background-image: url('https://source.unsplash.com/800x600/?old');
            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 المحلية -->
    <script src="moment-hijri.js"></script>
</head>
<body class="min-h-screen">
    <!-- العنوان الرئيسي -->
    <header class="animated-bg 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>
            <!-- زر دعوة لاتخاذ إجراء -->
            <a href="#calculator" class="mt-10 inline-block bg-white text-blue-600 px-6 py-3 rounded-full font-semibold shadow-lg hover:bg-gray-100 transition duration-300 ease-in-out animate__animated animate__tada animate__delay-2s">ابدأ الآن</a>
        </div>
    </header>

    <!-- قسم الحاسبة -->
    <section id="calculator" class="py-20 bg-gradient-to-b from-gray-50 to-white">
        <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 bg-gray-50">
        <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" data-aos="fade-up" id="ageCard">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">عمرك</h3>
                    <p id="ageResult" class="text-xl text-gray-700"></p>
                </div>
                <!-- تاريخ الميلاد الهجري -->
                <div class="bg-white p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp" 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 class="bg-white p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp" data-aos="fade-up" data-aos-delay="200" id="additionalInfoCard">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">معلومات إضافية</h3>
                    <p id="additionalInfo" class="text-xl text-gray-700"></p>
                </div>
                <!-- مرحلة الحياة -->
                <div class="p-6 rounded-lg shadow-2xl animate__animated animate__fadeInUp relative overflow-hidden" 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>

    <!-- قسم الميزات -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-4xl font-bold text-gray-800 mb-10 animate__animated animate__fadeInDown">ميزات حاسبة العمر</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="p-6">
                    <i class="fas fa-calendar-alt text-6xl text-blue-600 mb-4"></i>
                    <h3 class="text-2xl font-bold mb-2">دقة في الحساب</h3>
                    <p class="text-gray-600">نقدم لك حسابًا دقيقًا لعمر�ًا بالأعوام والأشهر والأيام.</p>
                </div>
                <div class="p-6">
                    <i class="fas fa-moon text-6xl text-indigo-600 mb-4"></i>
                    <h3 class="text-2xl font-bold mb-2">التقويم الهجري</h3>
                    <p class="text-gray-600">تعرف على تاريخ ميلادك بالتقويم الهجري بسهولة.</p>
                </div>
                <div class="p-6">
                    <i class="fas fa-star text-6xl text-yellow-600 mb-4"></i>
                    <h3 class="text-2xl font-bold mb-2">معلومات شيقة</h3>
                    <p class="text-gray-600">اكتشف برجك الفلكي والفصل الذي ولدت فيه والمزيد.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- قسم الشهادة / الآراء -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-4xl font-bold text-gray-800 mb-10 animate__animated animate__fadeInDown">آراء المستخدمين</h2>
            <div class="splide" id="testimonial-slider">
                <div class="splide__track">
                    <ul class="splide__list">
                        <li class="splide__slide p-6">
                            <p class="text-xl italic text-gray-600">"تطبيق رائع وسهل الاستخدام، أحببت التصميم والتفاصيل المقدمة."</p>
                            <h3 class="mt-4 font-bold">أحمد</h3>
                        </li>
                        <li class="splide__slide p-6">
                            <p class="text-xl italic text-gray-600">"أفضل حاسبة عمر استخدمتها، المعلومات الإضافية ممتعة."</p>
                            <h3 class="mt-4 font-bold">لينا</h3>
                        </li>
                        <li class="splide__slide p-6">
                            <p class="text-xl italic text-gray-600">"تصميم جميل وتفاعلي، أنصح الجميع بتجربته!"</p>
                            <h3 class="mt-4 font-bold">محمد</h3>
                        </li>
                    </ul>
                </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>
    <!-- مكتبة Splide.js للشرائح -->
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3/dist/js/splide.min.js"></script>

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

        // تهيئة Splide.js
        new Splide( '#testimonial-slider', {
            type   : 'loop',
            perPage: 1,
            autoplay: true,
            interval: 5000,
            arrows: false,
            pagination: true,
        } ).mount();

        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.clone().add(ageYears, 'years'), 'months');
            const ageDays = today.diff(birthdate.clone().add(ageYears, 'years').add(ageMonths, 'months'), 'days');

            // عرض العمر الميلادي
            document.getElementById('ageResult').innerHTML = `
                <div class="grid 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">${ageMonths}</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">${ageDays}</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 = '';
            if ((month >= 3) && (month <= 5)) {
                seasonName = 'الربيع';
            } else if ((month >= 6) && (month <= 8)) {
                seasonName = 'الصيف';
            } else if ((month >= 9) && (month <= 11)) {
                seasonName = 'الخريف';
            } else {
                seasonName = 'الشتاء';
            }

            // تحديد البرج الفلكي
            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(birthdate.year());
                const endDate = nextSign.startDate.clone().year(birthdate.year());

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

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

            // يوم الميلاد
            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('additionalInfo').innerHTML = `
                <p><strong>الفصل الذي ولدت فيه:</strong> ${seasonName}</p>
                <p><strong>برجك الفلكي:</strong> ${zodiacSign}</p>
                <p><strong>يوم ميلادك كان:</strong> ${birthDayName}</p>
                <p><strong>كم تبقى لعيد ميلادك القادم:</strong> ${daysUntilNextBirthday} يوم (${nextBirthdayDayName})</p>
            `;

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

            // إظهار قسم النتائج
            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>