اريد نقل موقعي وانشاءة على منصة انشاء المواقع wix
لكن واجهة wix لا تعطيني الخيارات التي يعطيها الكود وتركز على التصميم 
ارشدني خطوة بخطوة بالتفاصيل الدقيقة لتطبيق هذا الموقع بالضبط على منصة wix
<!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>