|
|
<!DOCTYPE html> |
|
|
<html lang="en" dir="ltr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EarlyCare AI — Health Screening Platform</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.rtl { |
|
|
direction: rtl; |
|
|
} |
|
|
.glass-card { |
|
|
backdrop-filter: blur(16px) saturate(180%); |
|
|
-webkit-backdrop-filter: blur(16px) saturate(180%); |
|
|
background-color: rgba(255, 255, 255, 0.85); |
|
|
border-radius: 1.5rem; |
|
|
border: 1px solid rgba(255, 255, 255, 0.125); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-sky-50 to-white min-h-screen"> |
|
|
|
|
|
<div id="vanta-globe" class="fixed top-0 left-0 w-full h-full z-0"></div> |
|
|
|
|
|
|
|
|
<div class="fixed top-4 right-4 z-50"> |
|
|
<button id="languageToggle" class="bg-white shadow-lg rounded-full p-3 flex items-center justify-center hover:bg-sky-100 transition-all duration-300"> |
|
|
<span class="text-sky-600 font-medium">EN</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative z-10 min-h-screen flex flex-col items-center justify-center px-4 py-20"> |
|
|
<div class="glass-card max-w-4xl w-full p-8 md:p-12 shadow-xl"> |
|
|
<div class="flex flex-col md:flex-row items-center gap-8"> |
|
|
<div class="flex-1"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-sky-800 mb-6" data-lang="en">Early Health Screening Made Simple</h1> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-sky-800 mb-6 hidden rtl" data-lang="ar">الفحص الصحي المبكر أصبح أسهل</h1> |
|
|
|
|
|
<p class="text-lg text-gray-600 mb-8 leading-relaxed" data-lang="en"> |
|
|
Our AI-powered platform helps identify potential health risks early. |
|
|
Get personalized guidance in minutes – not a diagnosis, but a smart starting point for your health journey. |
|
|
</p> |
|
|
<p class="text-lg text-gray-600 mb-8 leading-relaxed hidden rtl" data-lang="ar"> |
|
|
تساعد منصتنا المدعومة بالذكاء الاصطناعي في تحديد المخاطر الصحية المحتملة مبكرًا. |
|
|
احصل على إرشادات مخصصة في دقائق - ليس تشخيصًا، ولكن نقطة انطلاق ذكية لرحلتك الصحية. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<a href="/check.html" class="bg-sky-600 hover:bg-sky-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 text-center shadow-md hover:shadow-lg" data-lang="en"> |
|
|
Start Health Check |
|
|
</a> |
|
|
<a href="/check.html" class="bg-sky-600 hover:bg-sky-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 text-center shadow-md hover:shadow-lg hidden rtl" data-lang="ar"> |
|
|
ابدأ الفحص الصحي |
|
|
</a> |
|
|
<a href="/about.html" class="bg-white border border-sky-600 text-sky-600 font-medium py-3 px-6 rounded-lg transition-all duration-300 text-center shadow-sm hover:shadow-md" data-lang="en"> |
|
|
How It Works |
|
|
</a> |
|
|
<a href="/about.html" class="bg-white border border-sky-600 text-sky-600 font-medium py-3 px-6 rounded-lg transition-all duration-300 text-center shadow-sm hover:shadow-md hidden rtl" data-lang="ar"> |
|
|
كيف يعمل |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 hidden md:block"> |
|
|
<img src="http://static.photos/medical/640x360/42" alt="Doctor using tablet" class="rounded-2xl shadow-xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 max-w-4xl w-full"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md border border-red-100"> |
|
|
<div class="flex items-start gap-3"> |
|
|
<div class="bg-red-100 p-2 rounded-full"> |
|
|
<i data-feather="alert-triangle" class="text-red-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-red-600 mb-2" data-lang="en">Important Disclaimer</h3> |
|
|
<h3 class="font-bold text-red-600 mb-2 hidden rtl" data-lang="ar">تنبيه هام</h3> |
|
|
<p class="text-sm text-gray-600" data-lang="en"> |
|
|
This tool offers early risk screening and educational guidance. It is not a medical diagnosis and does not replace a licensed healthcare professional. If you experience severe or worsening symptoms, seek urgent medical care. |
|
|
</p> |
|
|
<p class="text-sm text-gray-600 hidden rtl" data-lang="ar"> |
|
|
هذه الأداة تقدّم فحصًا مبكرًا للمخاطر وإرشادات تثقيفية. ليست تشخيصًا طبيًا ولا تغني عن مراجعة مختص مرخّص. إذا كنت تعاني أعراضًا شديدة أو متفاقمة، راجِع الطوارئ فورًا. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-globe", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x0ea5e9, |
|
|
backgroundColor: 0xf8fafc, |
|
|
size: 0.8 |
|
|
}); |
|
|
|
|
|
|
|
|
const languageToggle = document.getElementById('languageToggle'); |
|
|
let currentLang = 'en'; |
|
|
|
|
|
languageToggle.addEventListener('click', () => { |
|
|
currentLang = currentLang === 'en' ? 'ar' : 'en'; |
|
|
|
|
|
|
|
|
languageToggle.querySelector('span').textContent = currentLang.toUpperCase(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('[data-lang="en"]').forEach(el => { |
|
|
el.classList.toggle('hidden', currentLang === 'ar'); |
|
|
}); |
|
|
document.querySelectorAll('[data-lang="ar"]').forEach(el => { |
|
|
el.classList.toggle('hidden', currentLang === 'en'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr'; |
|
|
document.documentElement.lang = currentLang; |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
