Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>حاسبة العمر المبتكرة</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .age-card { | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.8); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); | |
| } | |
| .result-card { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <div class="age-card rounded-2xl overflow-hidden p-8" data-aos="fade-up"> | |
| <div class="text-center mb-10"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">حاسبة العمر المبتكرة</h1> | |
| <p class="text-gray-600">اكتشف عمرك بالتفصيل الدقيق</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6 mb-8"> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">تاريخ الميلاد</label> | |
| <input type="date" id="birthDate" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">حتى تاريخ</label> | |
| <input type="date" id="untilDate" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <button id="calculateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> | |
| <i data-feather="calculator" class="ml-2"></i> | |
| احسب العمر | |
| </button> | |
| <div id="resultContainer" class="result-card mt-8 rounded-xl p-6 hidden" data-aos="fade-up"> | |
| <h2 class="text-2xl font-bold mb-4 text-center">نتيجة الحساب</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg"> | |
| <div class="text-3xl font-bold" id="years">0</div> | |
| <div class="text-sm">سنوات</div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg"> | |
| <div class="text-3xl font-bold" id="months">0</div> | |
| <div class="text-sm">أشهر</div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg"> | |
| <div class="text-3xl font-bold" id="days">0</div> | |
| <div class="text-sm">أيام</div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-4 rounded-lg"> | |
| <div class="text-3xl font-bold" id="totalDays">0</div> | |
| <div class="text-sm">يوم إجمالي</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8 text-gray-500"> | |
| <p>© 2023 حاسبة العمر المبتكرة - جميع الحقوق محفوظة</p> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| document.getElementById('calculateBtn').addEventListener('click', function() { | |
| const birthDate = new Date(document.getElementById('birthDate').value); | |
| const untilDate = document.getElementById('untilDate').value | |
| ? new Date(document.getElementById('untilDate').value) | |
| : new Date(); | |
| if (isNaN(birthDate.getTime())) { | |
| alert('الرجاء إدخال تاريخ ميلاد صحيح'); | |
| return; | |
| } | |
| let years = untilDate.getFullYear() - birthDate.getFullYear(); | |
| let months = untilDate.getMonth() - birthDate.getMonth(); | |
| let days = untilDate.getDate() - birthDate.getDate(); | |
| if (days < 0) { | |
| months--; | |
| days += new Date(untilDate.getFullYear(), untilDate.getMonth(), 0).getDate(); | |
| } | |
| if (months < 0) { | |
| years--; | |
| months += 12; | |
| } | |
| // Calculate total days | |
| const diffTime = Math.abs(untilDate - birthDate); | |
| const totalDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); | |
| // Animate results | |
| animateCount('years', years); | |
| animateCount('months', months); | |
| animateCount('days', days); | |
| animateCount('totalDays', totalDays); | |
| // Show results | |
| document.getElementById('resultContainer').classList.remove('hidden'); | |
| // Scroll to results | |
| document.getElementById('resultContainer').scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| function animateCount(elementId, finalValue) { | |
| const element = document.getElementById(elementId); | |
| let current = 0; | |
| const increment = finalValue / 50; | |
| const timer = setInterval(() => { | |
| current += increment; | |
| if (current >= finalValue) { | |
| clearInterval(timer); | |
| current = finalValue; | |
| } | |
| element.textContent = Math.floor(current); | |
| }, 20); | |
| } | |
| // Set default until date to today | |
| document.getElementById('untilDate').valueAsDate = new Date(); | |
| </script> | |
| </body> | |
| </html> | |