|
|
<!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> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></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@300;400;500;700&display=swap'); |
|
|
body { font-family: 'Tajawal', sans-serif; } |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<section class="relative overflow-hidden min-h-[60vh] text-center px-6 py-24 bg-neutral-950"> |
|
|
<div class="absolute inset-0 pointer-events-none"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-sky-500/10 to-purple-500/10"></div> |
|
|
<div class="absolute -top-10 -left-10 w-64 h-64 bg-sky-500/20 rounded-full blur-3xl translate-y-4"></div> |
|
|
<div class="absolute -bottom-10 -right-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl -translate-y-4"></div> |
|
|
</div> |
|
|
<div class="relative z-10 max-w-3xl mx-auto"> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold text-white">Parallax Hero</h1> |
|
|
<p class="mt-4 text-neutral-300 text-lg">Layered glow with depth illusion.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950"> |
|
|
<svg class="absolute inset-0 w-full h-full opacity-20" viewBox="0 0 800 400" preserveAspectRatio="none"> |
|
|
<defs> |
|
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1"> |
|
|
<stop offset="0%" stop-color="#0ea5e9" /> |
|
|
<stop offset="100%" stop-color="#8b5cf6" /> |
|
|
</linearGradient> |
|
|
</defs> |
|
|
<path fill="url(#g)"> |
|
|
<animate attributeName="d" dur="12s" repeatCount="indefinite" values=" |
|
|
M0,320L80,288C160,256,320,192,480,165.3C640,139,800,149,960,154.7L960,400L0,400Z; |
|
|
M0,320L120,261.3C240,203,480,85,720,101.3C960,117,1200,267,1440,288L1440,400L0,400Z; |
|
|
M0,320L80,288C160,256,320,192,480,165.3C640,139,800,149,960,154.7L960,400L0,400Z" /> |
|
|
</path> |
|
|
</svg> |
|
|
<div class="relative z-10 max-w-3xl mx-auto"> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">Morphing Blobs Hero</h1> |
|
|
<p class="mt-4 text-neutral-300 text-lg">SVG animated blobs with gradient.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24"> |
|
|
<div class="absolute inset-0"> |
|
|
<div class="absolute left-10 top-10 w-8 h-8 rounded-full bg-sky-500/60 animate-[float_7s_ease-in-out_infinite]"></div> |
|
|
<div class="absolute right-10 top-14 w-10 h-10 rounded-md bg-purple-500/60 animate-[float_9s_ease-in-out_infinite]"></div> |
|
|
<div class="absolute left-1/2 bottom-10 w-12 h-12 rounded-lg bg-pink-500/60 animate-[float_6s_ease-in-out_infinite]"></div> |
|
|
</div> |
|
|
<div class="relative z-10 max-w-3xl mx-auto"> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold text-white">Floating Shapes</h1> |
|
|
<p class="mt-4 text-neutral-300 text-lg">Gentle motion with CSS keyframes.</p> |
|
|
</div> |
|
|
<style> |
|
|
@keyframes float { 0%{ transform: translateY(0)} 50%{ transform: translateY(-14px)} 100%{ transform: translateY(0)} } |
|
|
</style> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950"> |
|
|
<div class="absolute inset-0" style="background: conic-gradient(from 90deg at 50% 50%, rgba(14,165,233,.15), rgba(139,92,246,.15), rgba(236,72,153,.15)); filter: blur(60px);"></div> |
|
|
<div class="relative z-10 max-w-3xl mx-auto"> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold text-white">Aurora Hero</h1> |
|
|
<p class="mt-4 text-neutral-300 text-lg">Conic gradient rays for an Aurora feel.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-gradient-to-b from-neutral-900 to-neutral-950"> |
|
|
<svg class="absolute -bottom-10 left-0 w-[200%] opacity-40" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path fill="#0ea5e9" fill-opacity="0.2" d="M0,64L48,74.7C96,85,192,107,288,122.7C384,139,480,149,576,176C672,203,768,245,864,229.3C960,213,1056,139,1152,128C1248,117,1344,171,1392,197.3L1440,224L1440,320L0,320Z" /> |
|
|
<path fill="#8b5cf6" fill-opacity="0.25" d="M0,96L60,117.3C120,139,240,181,360,192C480,203,600,181,720,160C840,139,960,117,1080,122.7C1200,128,1320,160,1380,176L1440,192L1440,320L0,320Z" /> |
|
|
</svg> |
|
|
<div class="relative z-10 max-w-3xl mx-auto"> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">Beautiful Wave Hero</h1> |
|
|
<p class="mt-4 text-neutral-300 text-lg">Effortless visuals with tailwind-only waves.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950"> |
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(14,165,233,0.2),transparent_50%),radial-gradient(circle_at_80%_30%,rgba(139,92,246,0.2),transparent_50%)]"></div> |
|
|
<div class="absolute inset-0 opacity-[0.07]" style="background-image:url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' /></filter><rect width='100%' height='100%' filter='url(%23n)' /></svg>');"></div> |
|
|
<div class="relative z-10 max-w-3xl mx-auto"> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold text-white">Noisy Hero</h1> |
|
|
<p class="mt-4 text-neutral-300 text-lg">Subtle noise overlay for premium feel.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-sky-500/30 via-purple-500/20 to-pink-500/30 animate-[gradientMove_12s_ease_infinite] blur-3xl"></div> |
|
|
<div class="relative z-10 max-w-3xl mx-auto"> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">Welcome to <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-purple-400">OmniDev</span></h1> |
|
|
<p class="mt-4 text-neutral-300 text-lg">Build full-stack web projects with AI in minutes.</p> |
|
|
<div class="mt-8 flex items-center justify-center gap-3"> |
|
|
<a href="#start" class="px-5 py-2.5 rounded-lg bg-white text-neutral-900 font-medium hover:opacity-90">Get Started</a> |
|
|
<a href="#learn" class="px-5 py-2.5 rounded-lg bg-white/10 border border-white/20 text-white hover:bg-white/20">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
<style> |
|
|
@keyframes gradientMove { 0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} } |
|
|
</style> |
|
|
</section> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<div class="flex items-center space-x-reverse space-x-2"> |
|
|
<i data-feather="activity" class="w-8 h-8 text-blue-600"></i> |
|
|
<span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-reverse space-x-6"> |
|
|
<a href="index.html" class="text-blue-600 font-medium">الرئيسية</a> |
|
|
<a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a> |
|
|
<a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a> |
|
|
<a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a> |
|
|
<a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a> |
|
|
<a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a> |
|
|
</div> |
|
|
<button class="md:hidden" onclick="toggleMenu()"> |
|
|
<i data-feather="menu" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20"> |
|
|
<div class="max-w-7xl mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">مرحباً بك في نظام إدارة المستشفى</h1> |
|
|
<p class="text-xl mb-8">نظام متكامل لإدارة جميع عمليات المستشفى بكفاءة واحترافية</p> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12"> |
|
|
<div class="bg-white/10 backdrop-blur rounded-lg p-6"> |
|
|
<i data-feather="users" class="w-12 h-12 mx-auto mb-3"></i> |
|
|
<h3 class="text-2xl font-bold">1,234</h3> |
|
|
<p>مريض</p> |
|
|
</div> |
|
|
<div class="bg-white/10 backdrop-blur rounded-lg p-6"> |
|
|
<i data-feather="user" class="w-12 h-12 mx-auto mb-3"></i> |
|
|
<h3 class="text-2xl font-bold">89</h3> |
|
|
<p>طبيب</p> |
|
|
</div> |
|
|
<div class="bg-white/10 backdrop-blur rounded-lg p-6"> |
|
|
<i data-feather="calendar" class="w-12 h-12 mx-auto mb-3"></i> |
|
|
<h3 class="text-2xl font-bold">456</h3> |
|
|
<p>موعد اليوم</p> |
|
|
</div> |
|
|
<div class="bg-white/10 backdrop-blur rounded-lg p-6"> |
|
|
<i data-feather="home" class="w-12 h-12 mx-auto mb-3"></i> |
|
|
<h3 class="text-2xl font-bold">12</h3> |
|
|
<p>قسم</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">الوصول السريع</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
|
|
<a href="patient-registration.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow"> |
|
|
<i data-feather="user-plus" class="w-10 h-10 text-green-600 mb-3"></i> |
|
|
<h3 class="font-semibold text-gray-800">تسجيل مريض جديد</h3> |
|
|
</a> |
|
|
<a href="appointment-scheduling.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow"> |
|
|
<i data-feather="calendar-plus" class="w-10 h-10 text-blue-600 mb-3"></i> |
|
|
<h3 class="font-semibold text-gray-800">حجز موعد</h3> |
|
|
</a> |
|
|
<a href="emergency.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow"> |
|
|
<i data-feather="alert-triangle" class="w-10 h-10 text-red-600 mb-3"></i> |
|
|
<h3 class="font-semibold text-gray-800">حالات الطوارئ</h3> |
|
|
</a> |
|
|
<a href="laboratory.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow"> |
|
|
<i data-feather="flask" class="w-10 h-10 text-purple-600 mb-3"></i> |
|
|
<h3 class="font-semibold text-gray-800">المختبر</h3> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-8">الأنشطة الحديثة</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg"> |
|
|
<div class="flex items-center space-x-reverse space-x-3"> |
|
|
<i data-feather="user-check" class="w-5 h-5 text-green-600"></i> |
|
|
<span>تم تسجيل مريض جديد: أحمد محمد</span> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500">منذ 5 دقائق</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg"> |
|
|
<div class="flex items-center space-x-reverse space-x-3"> |
|
|
<i data-feather="calendar" class="w-5 h-5 text-blue-600"></i> |
|
|
<span>موعد جديد مع د. سارة أحمد</span> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500">منذ 15 دقيقة</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg"> |
|
|
<div class="flex items-center space-x-reverse space-x-3"> |
|
|
<i data-feather="file-text" class="w-5 h-5 text-purple-600"></i> |
|
|
<span>تم تحديث نتائج المختبر</span> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500">منذ 30 دقيقة</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
function toggleMenu() { |
|
|
const nav = document.querySelector('nav .hidden'); |
|
|
nav.classList.toggle('hidden'); |
|
|
} |
|
|
|
|
|
anime({ |
|
|
targets: '.bg-gradient-to-r > div > h1', |
|
|
translateY: [-50, 0], |
|
|
opacity: [0, 1], |
|
|
duration: 1000, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
|
|
|
anime({ |
|
|
targets: '.grid > div', |
|
|
scale: [0.8, 1], |
|
|
opacity: [0, 1], |
|
|
delay: anime.stagger(100), |
|
|
duration: 800, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
