File size: 7,701 Bytes
49f979e 920cb7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<!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">
<!-- Globe Background Animation -->
<div id="vanta-globe" class="fixed top-0 left-0 w-full h-full z-0"></div>
<!-- Language Toggle -->
<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>
<!-- Main Content -->
<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>
<!-- Disclaimer -->
<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.js Globe Animation
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
});
// Language Toggle
const languageToggle = document.getElementById('languageToggle');
let currentLang = 'en';
languageToggle.addEventListener('click', () => {
currentLang = currentLang === 'en' ? 'ar' : 'en';
// Update toggle button text
languageToggle.querySelector('span').textContent = currentLang.toUpperCase();
// Toggle visibility of language-specific elements
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');
});
// Toggle RTL direction
document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
document.documentElement.lang = currentLang;
});
// Initialize Feather Icons
feather.replace();
</script>
</body>
</html>
|