Hugging Face's logo

Spaces:
Alinadi98
/
web2
Running

App Files Community
web2 / index.html
Alinadi98's picture
Alinadi98
Add 2 files
6c50a4d verified
Raw
History Blame Contribute Delete
75.6 kB
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>نرم افزار مدیریت داده های سلامت</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');
body {
 font-family: 'Noto Naskh Arabic', serif;
 }
.gradient-bg {
 background: linear-gradient(135deg, #4f6bdd 0%, #3a56c8 100%);
 }
.health-record-icon {
 transition: all 0.3s ease;
 }
.health-record-icon:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
.lab-test-card {
 transition: all 0.3s ease;
 }
.lab-test-card:hover {
 transform: scale(1.03);
 }
.normal-range {
 background-color: #d1fae5;
 color: #065f46;
 }
.warning-range {
 background-color: #fef3c7;
 color: #92400e;
 }
.danger-range {
 background-color: #fee2e2;
 color: #991b1b;
 }
.risk-low {
 background-color: #d1fae5;
 color: #065f46;
 }
.risk-moderate {
 background-color: #fef3c7;
 color: #92400e;
 }
.risk-high {
 background-color: #fee2e2;
 color: #991b1b;
 }
.risk-very-high {
 background-color: #fee2e2;
 color: #7f1d1d;
 }
 </style>
</head>
<body class="bg-gray-50">
 <!-- Login/Signup Modal -->
 <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800" id="authModalTitle">ورود به سیستم</h3>
 <button onclick="toggleAuthModal()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div id="loginForm">
 <div class="mb-4">
 <label for="nationalCode" class="block text-sm font-medium text-gray-700 mb-1">کد ملی</label>
 <input type="text" id="nationalCode" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="کد ملی">
 </div>
 <div class="mb-4">
 <label for="password" class="block text-sm font-medium text-gray-700 mb-1">رمز عبور</label>
 <input type="password" id="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="رمز عبور">
 </div>
 <div class="mb-4 flex items-center justify-between">
 <div class="flex items-center">
 <input type="checkbox" id="rememberMe" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
 <label for="rememberMe" class="mr-2 block text-sm text-gray-700">مرا به خاطر بسپار</label>
 </div>
 <a href="#" class="text-sm text-blue-600 hover:text-blue-800">فراموشی رمز عبور</a>
 </div>
 <button onclick="login()" class="w-full gradient-bg text-white py-2 px-4 rounded-md hover:opacity-90 transition duration-300">
 ورود
 </button>
 <div class="mt-4 text-center">
 <span class="text-sm text-gray-600">حساب کاربری ندارید؟</span>
 <a href="#" onclick="showSignupForm()" class="text-sm text-blue-600 hover:text-blue-800 mr-1">ثبت نام کنید</a>
 </div>
 </div>
<div id="signupForm" class="hidden">
 <div class="mb-4">
 <label for="fullName" class="block text-sm font-medium text-gray-700 mb-1">نام و نام خانوادگی</label>
 <input type="text" id="fullName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="نام و نام خانوادگی">
 </div>
 <div class="mb-4">
 <label for="signupNationalCode" class="block text-sm font-medium text-gray-700 mb-1">کد ملی</label>
 <input type="text" id="signupNationalCode" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="کد ملی">
 </div>
 <div class="mb-4">
 <label for="mobile" class="block text-sm font-medium text-gray-700 mb-1">شماره همراه</label>
 <input type="text" id="mobile" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="شماره همراه">
 </div>
 <div class="mb-4">
 <label for="birthDate" class="block text-sm font-medium text-gray-700 mb-1">تاریخ تولد</label>
 <input type="text" id="birthDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="تاریخ تولد">
 </div>
 <div class="mb-4">
 <label for="job" class="block text-sm font-medium text-gray-700 mb-1">شغل</label>
 <input type="text" id="job" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="شغل">
 </div>
 <div class="mb-4">
 <label for="signupPassword" class="block text-sm font-medium text-gray-700 mb-1">رمز عبور</label>
 <input type="password" id="signupPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="رمز عبور">
 </div>
 <div class="mb-4">
 <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">تکرار رمز عبور</label>
 <input type="password" id="confirmPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="تکرار رمز عبور">
 </div>
 <button onclick="sendOTP()" class="w-full gradient-bg text-white py-2 px-4 rounded-md hover:opacity-90 transition duration-300">
 ارسال کد تایید
 </button>
 <div class="mt-4 text-center">
 <span class="text-sm text-gray-600">حساب کاربری دارید؟</span>
 <a href="#" onclick="showLoginForm()" class="text-sm text-blue-600 hover:text-blue-800 mr-1">وارد شوید</a>
 </div>
 </div>
<div id="otpForm" class="hidden">
 <div class="mb-4 text-center">
 <p class="text-gray-700">کد تایید به شماره <span id="mobileNumberDisplay" class="font-bold">0912****345</span> ارسال شد</p>
 </div>
 <div class="mb-4">
 <label for="otpCode" class="block text-sm font-medium text-gray-700 mb-1">کد تایید</label>
 <input type="text" id="otpCode" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="کد تایید">
 </div>
 <button onclick="verifyOTP()" class="w-full gradient-bg text-white py-2 px-4 rounded-md hover:opacity-90 transition duration-300">
 تایید و ثبت نام
 </button>
 <div class="mt-4 text-center">
 <a href="#" onclick="resendOTP()" class="text-sm text-blue-600 hover:text-blue-800">ارسال مجدد کد</a>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Main App Container -->
 <div id="appContainer" class="hidden">
 <!-- Header -->
 <header class="gradient-bg text-white shadow-md">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center">
 <img src="https://via.placeholder.com/40" alt="Logo" class="h-10 w-10 rounded-full">
 <h1 class="mr-3 text-xl font-bold">سیستم مدیریت سلامت</h1>
 </div>
 <div class="flex items-center">
 <div class="mr-4 text-right hidden md:block">
 <p class="font-medium">محمد رضایی</p>
 <p class="text-sm opacity-80">کد پرسنلی: 123456</p>
 </div>
 <div class="relative">
 <img src="https://via.placeholder.com/40" alt="Profile" class="h-10 w-10 rounded-full cursor-pointer" id="profileDropdownBtn">
 <div id="profileDropdown" class="hidden absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
 <div class="py-1">
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">پروفایل</a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">تنظیمات</a>
 <a href="#" onclick="logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">خروج</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="container mx-auto px-4 py-6">
 <!-- Demographic Info -->
 <div class="bg-white rounded-lg shadow-md p-6 mb-6">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-bold text-gray-800">اطلاعات دموگرافیک</h2>
 <button class="text-blue-600 hover:text-blue-800 text-sm">
 <i class="fas fa-edit ml-1"></i> ویرایش
 </button>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <div>
 <p class="text-sm text-gray-500">نام و نام خانوادگی</p>
 <p class="font-medium">محمد رضایی</p>
 </div>
 <div>
 <p class="text-sm text-gray-500">کد ملی</p>
 <p class="font-medium">1234567890</p>
 </div>
 <div>
 <p class="text-sm text-gray-500">تاریخ تولد</p>
 <p class="font-medium">1365/05/12 (38 سال)</p>
 </div>
 <div>
 <p class="text-sm text-gray-500">شغل</p>
 <p class="font-medium">مهندس نرم افزار</p>
 </div>
 <div>
 <p class="text-sm text-gray-500">پوزیشن شغلی</p>
 <p class="font-medium">توسعه دهنده ارشد</p>
 </div>
 <div>
 <p class="text-sm text-gray-500">محل کار</p>
 <p class="font-medium">پلنت تهران</p>
 </div>
 </div>
 </div>
<!-- Health Records Section -->
 <div class="mb-6">
 <h2 class="text-lg font-bold text-gray-800 mb-4">پرونده سلامت</h2>
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 <div class="health-record-icon bg-white rounded-lg shadow-md p-6 cursor-pointer" onclick="showOccupationalHealth()">
 <div class="flex items-center">
 <div class="bg-blue-100 p-3 rounded-full text-blue-600 mr-3">
 <i class="fas fa-briefcase-medical text-xl"></i>
 </div>
 <div>
 <h3 class="font-bold">پرونده طب کار</h3>
 <p class="text-sm text-gray-500">اطلاعات پزشکی شغلی</p>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white rounded-lg shadow-md p-6 cursor-pointer" onclick="showLabTests()">
 <div class="flex items-center">
 <div class="bg-green-100 p-3 rounded-full text-green-600 mr-3">
 <i class="fas fa-flask text-xl"></i>
 </div>
 <div>
 <h3 class="font-bold">آزمایشات</h3>
 <p class="text-sm text-gray-500">نتایج آزمایشگاهی</p>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white rounded-lg shadow-md p-6 cursor-pointer" onclick="showDiseaseRisks()">
 <div class="flex items-center">
 <div class="bg-purple-100 p-3 rounded-full text-purple-600 mr-3">
 <i class="fas fa-heartbeat text-xl"></i>
 </div>
 <div>
 <h3 class="font-bold">ریسک بیماری ها</h3>
 <p class="text-sm text-gray-500">ارزیابی خطر بیماری ها</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Occupational Health Modal -->
 <div id="occupationalHealthModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">پرونده طب کار</h3>
 <button onclick="hideOccupationalHealth()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showMedicalHistory()">
 <div class="flex items-center">
 <div class="bg-blue-100 p-2 rounded-full text-blue-600 mr-2">
 <i class="fas fa-history"></i>
 </div>
 <div>
 <h4 class="font-medium">سوابق پزشکی شغلی و شخصی</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showClinicalExams()">
 <div class="flex items-center">
 <div class="bg-green-100 p-2 rounded-full text-green-600 mr-2">
 <i class="fas fa-stethoscope"></i>
 </div>
 <div>
 <h4 class="font-medium">معاینات بالینی</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showVisionStatus()">
 <div class="flex items-center">
 <div class="bg-purple-100 p-2 rounded-full text-purple-600 mr-2">
 <i class="fas fa-eye"></i>
 </div>
 <div>
 <h4 class="font-medium">وضعیت بینایی</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showHearingStatus()">
 <div class="flex items-center">
 <div class="bg-yellow-100 p-2 rounded-full text-yellow-600 mr-2">
 <i class="fas fa-ear-listen"></i>
 </div>
 <div>
 <h4 class="font-medium">وضعیت شنوایی</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showRespiratoryStatus()">
 <div class="flex items-center">
 <div class="bg-red-100 p-2 rounded-full text-red-600 mr-2">
 <i class="fas fa-lungs"></i>
 </div>
 <div>
 <h4 class="font-medium">وضعیت تنفسی</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showCardiovascularStatus()">
 <div class="flex items-center">
 <div class="bg-pink-100 p-2 rounded-full text-pink-600 mr-2">
 <i class="fas fa-heart"></i>
 </div>
 <div>
 <h4 class="font-medium">وضعیت قلب و عروق</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showActivityConditions()">
 <div class="flex items-center">
 <div class="bg-indigo-100 p-2 rounded-full text-indigo-600 mr-2">
 <i class="fas fa-clipboard-check"></i>
 </div>
 <div>
 <h4 class="font-medium">شروط برای ادامه فعالیت</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showDoctorRecommendations()">
 <div class="flex items-center">
 <div class="bg-teal-100 p-2 rounded-full text-teal-600 mr-2">
 <i class="fas fa-user-md"></i>
 </div>
 <div>
 <h4 class="font-medium">توصیه پزشک طب کار</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showOccupationalDiseases()">
 <div class="flex items-center">
 <div class="bg-orange-100 p-2 rounded-full text-orange-600 mr-2">
 <i class="fas fa-disease"></i>
 </div>
 <div>
 <h4 class="font-medium">بیماری های شغلی و غیر شغلی</h4>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Medical History Modal -->
 <div id="medicalHistoryModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">سوابق پزشکی شغلی و شخصی</h3>
 <button onclick="hideMedicalHistory()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-4">
 <div>
 <h4 class="font-medium text-gray-700 mb-2">سابقه بیماری:</h4>
 <p class="bg-gray-50 p-3 rounded">جراحی فتق چپ در تاریخ 1399/04 و جراحی فتق راست در تاریخ 1387/01</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">حساسیت به غذا، دارو یا ماده خاص:</h4>
 <p class="bg-gray-50 p-3 rounded">اطلاعات ناقص</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">سابقه بستری:</h4>
 <p class="bg-gray-50 p-3 rounded">اطلاعات ناقص</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">سابقه عمل جراحی:</h4>
 <p class="bg-gray-50 p-3 rounded">جراحی فتق</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">سابقه بیماری مزمن در فامیل:</h4>
 <p class="bg-gray-50 p-3 rounded">اطلاعات ناقص</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">مصرف دارو:</h4>
 <p class="bg-gray-50 p-3 rounded">اطلاعات ناقص</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">مصرف سیگار:</h4>
 <p class="bg-gray-50 p-3 rounded">اطلاعات ناقص</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">وزن:</h4>
 <p class="bg-gray-50 p-3 rounded">82 کیلوگرم</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">قد:</h4>
 <p class="bg-gray-50 p-3 rounded">174 سانتی‌متر</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">BMI:</h4>
 <p class="bg-gray-50 p-3 rounded">27.1</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">فشارخون سیستولیک:</h4>
 <p class="bg-gray-50 p-3 rounded">125</p>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">فشارخون دیاستولیک:</h4>
 <p class="bg-gray-50 p-3 rounded">80</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Clinical Exams Modal -->
 <div id="clinicalExamsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">معاینات بالینی</h3>
 <button onclick="hideClinicalExams()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-3">
 <div class="bg-gray-50 p-3 rounded">
 <p class="font-medium">اختلال در خواب</p>
 </div>
 <div class="bg-gray-50 p-3 rounded">
 <p class="font-medium">کاهش حدت بینایی</p>
 </div>
 <div class="bg-gray-50 p-3 rounded">
 <p class="font-medium">واریس اندام تحتانی</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Vision Status Modal -->
 <div id="visionStatusModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">وضعیت بینایی</h3>
 <button onclick="hideVisionStatus()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-4">
 <div>
 <h4 class="font-medium text-gray-700 mb-2">حدت بینایی دور:</h4>
 <div class="bg-gray-50 p-3 rounded space-y-2">
 <p>چشم راست (R) - بدون اصلاح: 2/10</p>
 <p>چشم چپ (L) - بدون اصلاح: 2/10</p>
 <p>هر دو چشم - بدون اصلاح: 4/10</p>
 <p>چشم راست (R) - با اصلاح: 10/10</p>
 <p>چشم چپ (L) - با اصلاح: 10/10</p>
 <p>هر دو چشم - با اصلاح: 10/10</p>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">حدت بینایی نزدیک:</h4>
 <div class="bg-gray-50 p-3 rounded space-y-2">
 <p>چشم راست (R) - بدون اصلاح: 5/10</p>
 <p>چشم چپ (L) - بدون اصلاح: 5/10</p>
 <p>هر دو چشم - بدون اصلاح: 10/10</p>
 <p>چشم راست (R) - با اصلاح: (10/10)</p>
 <p>چشم چپ (L) - با اصلاح: (10/10)</p>
 <p>هر دو چشم - با اصلاح: (10/10)</p>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">دید رنگی:</h4>
 <div class="bg-gray-50 p-3 rounded space-y-2">
 <p>چشم راست (R): طبیعی</p>
 <p>چشم چپ (L): طبیعی</p>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">عمق دید:</h4>
 <div class="bg-gray-50 p-3 rounded">
 <p>ثبت نشده</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Hearing Status Modal -->
 <div id="hearingStatusModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">وضعیت شنوایی</h3>
 <button onclick="hideHearingStatus()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="bg-gray-50 p-3 rounded space-y-2">
 <p>گوش سمت راست: طبیعی</p>
 <p>گوش سمت چپ: طبیعی</p>
 </div>
 </div>
 </div>
 </div>
<!-- Respiratory Status Modal -->
 <div id="respiratoryStatusModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">وضعیت تنفسی</h3>
 <button onclick="hideRespiratoryStatus()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="bg-gray-50 p-3 rounded">
 <p>وضعیت طبیعی</p>
 </div>
 </div>
 </div>
 </div>
<!-- Cardiovascular Status Modal -->
 <div id="cardiovascularStatusModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">وضعیت قلب و عروق</h3>
 <button onclick="hideCardiovascularStatus()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="bg-gray-50 p-3 rounded">
 <p>طبیعی بدون یافته ی خاص</p>
 </div>
 </div>
 </div>
 </div>
<!-- Activity Conditions Modal -->
 <div id="activityConditionsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">شروط برای ادامه فعالیت</h3>
 <button onclick="hideActivityConditions()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="bg-gray-50 p-3 rounded space-y-2">
 <p>استفاده از عینک طبی در محیط کار</p>
 <p>تکرار آزمایش FBS و پیگیری تحت نظر متخصص داخلی.</p>
 <p>رعایت رژیم غذایی کم کالری و افزایش فعالیت بدنی به صورت منظم.</p>
 </div>
 </div>
 </div>
 </div>
<!-- Doctor Recommendations Modal -->
 <div id="doctorRecommendationsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">توصیه پزشک طب کار</h3>
 <button onclick="hideDoctorRecommendations()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="bg-gray-50 p-3 rounded space-y-2">
 <p>تکرار آزمایش FBS و پیگیری تحت نظر متخصص داخلی.</p>
 <p>رعایت رژیم غذایی کم کالری و افزایش فعالیت بدنی به صورت منظم.</p>
 </div>
 </div>
 </div>
 </div>
<!-- Occupational Diseases Modal -->
 <div id="occupationalDiseasesModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">بیماری های شغلی و غیر شغلی</h3>
 <button onclick="hideOccupationalDiseases()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-4">
 <div>
 <h4 class="font-medium text-gray-700 mb-2">بیماری‌های غیر شغلی جدید:</h4>
 <div class="bg-gray-50 p-3 rounded">
 <p>عیوب انکساری (H52)</p>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">بیماری‌های غیر شغلی شناخته شده:</h4>
 <div class="bg-gray-50 p-3 rounded">
 <p>اضافه وزن (E669)</p>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">بیماری‌های شغلی جدید:</h4>
 <div class="bg-gray-50 p-3 rounded">
 <p>اطلاعات ناقص</p>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">بیماری‌های شغلی شناخته شده:</h4>
 <div class="bg-gray-50 p-3 rounded">
 <p>اطلاعات ناقص</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Lab Tests Modal -->
 <div id="labTestsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">آزمایشات</h3>
 <button onclick="hideLabTests()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <div class="lab-test-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showTestDetails('lipidPanel')">
 <div class="flex items-center">
 <div class="bg-blue-100 p-2 rounded-full text-blue-600 mr-2">
 <i class="fas fa-vial"></i>
 </div>
 <div>
 <h4 class="font-medium">پنل لیپیدی</h4>
 <p class="text-sm text-gray-500">Chol, TG, HDL, VLDL, Chol/HDL</p>
 </div>
 </div>
 </div>
 <div class="lab-test-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showTestDetails('diabetesScreening')">
 <div class="flex items-center">
 <div class="bg-green-100 p-2 rounded-full text-green-600 mr-2">
 <i class="fas fa-vial"></i>
 </div>
 <div>
 <h4 class="font-medium">غربالگری دیابت</h4>
 <p class="text-sm text-gray-500">FBS</p>
 </div>
 </div>
 </div>
 <div class="lab-test-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showTestDetails('kidneyFunction')">
 <div class="flex items-center">
 <div class="bg-purple-100 p-2 rounded-full text-purple-600 mr-2">
 <i class="fas fa-vial"></i>
 </div>
 <div>
 <h4 class="font-medium">عملکرد کلیه</h4>
 <p class="text-sm text-gray-500">BUN, Creat, Urea, BUN/Cr</p>
 </div>
 </div>
 </div>
 <div class="lab-test-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showTestDetails('cbc')">
 <div class="flex items-center">
 <div class="bg-yellow-100 p-2 rounded-full text-yellow-600 mr-2">
 <i class="fas fa-vial"></i>
 </div>
 <div>
 <h4 class="font-medium">CBC</h4>
 <p class="text-sm text-gray-500">RBC, WBC, Hb, Hct, Plt, MCV, MCH, MCHC</p>
 </div>
 </div>
 </div>
 <div class="lab-test-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showTestDetails('liverFunction')">
 <div class="flex items-center">
 <div class="bg-red-100 p-2 rounded-full text-red-600 mr-2">
 <i class="fas fa-vial"></i>
 </div>
 <div>
 <h4 class="font-medium">عملکرد کبد</h4>
 <p class="text-sm text-gray-500">ALT, AST</p>
 </div>
 </div>
 </div>
 <div class="lab-test-card bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showTestDetails('urinanalysis')">
 <div class="flex items-center">
 <div class="bg-indigo-100 p-2 rounded-full text-indigo-600 mr-2">
 <i class="fas fa-vial"></i>
 </div>
 <div>
 <h4 class="font-medium">آنالیز ادرار</h4>
 <p class="text-sm text-gray-500">Urine Protein, Glucose, WBC, RBC, Bacteria</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Test Details Modal -->
 <div id="testDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800" id="testDetailsTitle">جزئیات آزمایش</h3>
 <button onclick="hideTestDetails()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="mb-6">
 <div class="flex justify-between items-center mb-2">
 <h4 class="font-medium text-gray-700">تاریخ انجام آزمایش:</h4>
 <span class="font-medium">1402/05/15</span>
 </div>
 <div class="flex justify-between items-center mb-2">
 <h4 class="font-medium text-gray-700">آزمایشگاه:</h4>
 <span class="font-medium">پاتوبیولوژی تهران</span>
 </div>
 </div>
<div class="overflow-x-auto">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">پارامتر</th>
 <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مقدار</th>
 <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">واحد</th>
 <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">محدوده نرمال</th>
 <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200" id="testDetailsBody">
 <!-- Will be filled by JavaScript -->
 </tbody>
 </table>
 </div>
<div class="mt-6">
 <h4 class="font-medium text-gray-700 mb-2">تفسیر پزشک:</h4>
 <div class="bg-gray-50 p-3 rounded">
 <p id="doctorInterpretation">نتایج آزمایش در محدوده طبیعی قرار دارد. در صورت نیاز به پیگیری با پزشک معالج خود مشورت نمایید.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Disease Risks Modal -->
 <div id="diseaseRisksModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">ریسک بیماری ها</h3>
 <button onclick="hideDiseaseRisks()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showDiabetesRisk()">
 <div class="flex items-center">
 <div class="bg-blue-100 p-2 rounded-full text-blue-600 mr-2">
 <i class="fas fa-bolt"></i>
 </div>
 <div>
 <h4 class="font-medium">ریسک ابتلا به دیابت</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showAlzheimerRisk()">
 <div class="flex items-center">
 <div class="bg-green-100 p-2 rounded-full text-green-600 mr-2">
 <i class="fas fa-brain"></i>
 </div>
 <div>
 <h4 class="font-medium">ریسک ابتلا به آلزایمر</h4>
 </div>
 </div>
 </div>
 <div class="health-record-icon bg-white border border-gray-200 rounded-lg p-4 cursor-pointer" onclick="showCardiovascularRisk()">
 <div class="flex items-center">
 <div class="bg-purple-100 p-2 rounded-full text-purple-600 mr-2">
 <i class="fas fa-heart"></i>
 </div>
 <div>
 <h4 class="font-medium">ریسک ابتلا به بیماری قلبی عروقی</h4>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Diabetes Risk Modal -->
 <div id="diabetesRiskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">ریسک ابتلا به دیابت</h3>
 <button onclick="hideDiabetesRisk()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="mb-6">
 <div class="flex justify-center mb-4">
 <div class="w-32 h-32 rounded-full flex items-center justify-center text-4xl font-bold risk-high">
 8
 </div>
 </div>
 <div class="text-center">
 <h4 class="font-medium text-lg mb-2">ریسک متوسط</h4>
 <p class="text-gray-700">وضعیت خوبه فقط قند کمتر بخور</p>
 </div>
 </div>
<div class="bg-gray-50 p-4 rounded-lg">
 <h4 class="font-medium text-gray-700 mb-2">راهکارهای کاهش ریسک:</h4>
 <ul class="list-disc list-inside space-y-1">
 <li>کاهش مصرف قند و شیرینی‌جات</li>
 <li>افزایش فعالیت بدنی روزانه</li>
 <li>کنترل وزن در محدوده طبیعی</li>
 <li>مصرف بیشتر سبزیجات و میوه‌جات</li>
 <li>پرهیز از مصرف دخانیات</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
<!-- Alzheimer Risk Modal -->
 <div id="alzheimerRiskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">ریسک ابتلا به آلزایمر</h3>
 <button onclick="hideAlzheimerRisk()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="mb-6">
 <div class="flex justify-center mb-4">
 <div class="w-32 h-32 rounded-full flex items-center justify-center text-4xl font-bold risk-low">
 4
 </div>
 </div>
 <div class="text-center">
 <h4 class="font-medium text-lg mb-2">ریسک پایین (5%)</h4>
 <p class="text-gray-700">وضعیت خوبه ، ورزش را فراموش نکن</p>
 </div>
 </div>
<div class="bg-gray-50 p-4 rounded-lg">
 <h4 class="font-medium text-gray-700 mb-2">راهکارهای کاهش ریسک:</h4>
 <ul class="list-disc list-inside space-y-1">
 <li>انجام فعالیت‌های ذهنی مانند مطالعه و حل جدول</li>
 <li>حفظ روابط اجتماعی فعال</li>
 <li>ورزش منظم</li>
 <li>رژیم غذایی مدیترانه‌ای</li>
 <li>کنترل فشار خون و دیابت</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
<!-- Cardiovascular Risk Modal -->
 <div id="cardiovascularRiskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">ریسک ابتلا به بیماری قلبی عروقی</h3>
 <button onclick="hideCardiovascularRisk()" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="mb-6">
 <div class="flex justify-center mb-4">
 <div class="w-32 h-32 rounded-full flex items-center justify-center text-4xl font-bold risk-moderate">
 7
 </div>
 </div>
 <div class="text-center">
 <h4 class="font-medium text-lg mb-2">ریسک متوسط (8%)</h4>
 <p class="text-gray-700">وضعیت خوبه ، ورزش را فراموش نکن</p>
 </div>
 </div>
<div class="bg-gray-50 p-4 rounded-lg">
 <h4 class="font-medium text-gray-700 mb-2">راهکارهای کاهش ریسک:</h4>
 <ul class="list-disc list-inside space-y-1">
 <li>ترک سیگار و دوری از دود سیگار</li>
 <li>رژیم غذایی کم چرب و کم نمک</li>
 <li>ورزش منظم حداقل 30 دقیقه در روز</li>
 <li>کنترل فشار خون</li>
 <li>کنترل سطح کلسترول و قند خون</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </main>
<!-- Footer -->
 <footer class="bg-gray-100 border-t border-gray-200 py-4">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-4 md:mb-0">
 <p class="text-sm text-gray-600">© 1402 سیستم مدیریت سلامت. تمام حقوق محفوظ است.</p>
 </div>
 <div class="flex space-x-4 space-x-reverse">
 <a href="#" class="text-gray-600 hover:text-gray-800">
 <i class="fas fa-question-circle"></i>
 </a>
 <a href="#" class="text-gray-600 hover:text-gray-800">
 <i class="fas fa-envelope"></i>
 </a>
 <a href="#" class="text-gray-600 hover:text-gray-800">
 <i class="fas fa-shield-alt"></i>
 </a>
 </div>
 </div>
 </div>
 </footer>
 </div>
<script>
 // Authentication functions
 function toggleAuthModal() {
 const modal = document.getElementById('authModal');
 modal.classList.toggle('hidden');
 }
function showSignupForm() {
 document.getElementById('loginForm').classList.add('hidden');
 document.getElementById('signupForm').classList.remove('hidden');
 document.getElementById('otpForm').classList.add('hidden');
 document.getElementById('authModalTitle').textContent = 'ثبت نام';
 }
function showLoginForm() {
 document.getElementById('loginForm').classList.remove('hidden');
 document.getElementById('signupForm').classList.add('hidden');
 document.getElementById('otpForm').classList.add('hidden');
 document.getElementById('authModalTitle').textContent = 'ورود به سیستم';
 }
function sendOTP() {
 const mobile = document.getElementById('mobile').value;
 document.getElementById('mobileNumberDisplay').textContent = mobile.substring(0, 4) + '****' + mobile.substring(8);
document.getElementById('signupForm').classList.add('hidden');
 document.getElementById('otpForm').classList.remove('hidden');
 }
function resendOTP() {
 alert('کد تایید جدید ارسال شد');
 }
function verifyOTP() {
 alert('ثبت نام با موفقیت انجام شد');
 toggleAuthModal();
 login();
 }
function login() {
 document.getElementById('authModal').classList.add('hidden');
 document.getElementById('appContainer').classList.remove('hidden');
 }
function logout() {
 document.getElementById('appContainer').classList.add('hidden');
 document.getElementById('authModal').classList.remove('hidden');
 showLoginForm();
 }
// Profile dropdown
 document.getElementById('profileDropdownBtn').addEventListener('click', function() {
 document.getElementById('profileDropdown').classList.toggle('hidden');
 });
// Close dropdown when clicking outside
 window.addEventListener('click', function(e) {
 if (!e.target.matches('#profileDropdownBtn')) {
 const dropdown = document.getElementById('profileDropdown');
 if (!dropdown.classList.contains('hidden')) {
 dropdown.classList.add('hidden');
 }
 }
 });
// Occupational Health functions
 function showOccupationalHealth() {
 document.getElementById('occupationalHealthModal').classList.remove('hidden');
 }
function hideOccupationalHealth() {
 document.getElementById('occupationalHealthModal').classList.add('hidden');
 }
function showMedicalHistory() {
 document.getElementById('medicalHistoryModal').classList.remove('hidden');
 }
function hideMedicalHistory() {
 document.getElementById('medicalHistoryModal').classList.add('hidden');
 }
function showClinicalExams() {
 document.getElementById('clinicalExamsModal').classList.remove('hidden');
 }
function hideClinicalExams() {
 document.getElementById('clinicalExamsModal').classList.add('hidden');
 }
function showVisionStatus() {
 document.getElementById('visionStatusModal').classList.remove('hidden');
 }
function hideVisionStatus() {
 document.getElementById('visionStatusModal').classList.add('hidden');
 }
function showHearingStatus() {
 document.getElementById('hearingStatusModal').classList.remove('hidden');
 }
function hideHearingStatus() {
 document.getElementById('hearingStatusModal').classList.add('hidden');
 }
function showRespiratoryStatus() {
 document.getElementById('respiratoryStatusModal').classList.remove('hidden');
 }
function hideRespiratoryStatus() {
 document.getElementById('respiratoryStatusModal').classList.add('hidden');
 }
function showCardiovascularStatus() {
 document.getElementById('cardiovascularStatusModal').classList.remove('hidden');
 }
function hideCardiovascularStatus() {
 document.getElementById('cardiovascularStatusModal').classList.add('hidden');
 }
function showActivityConditions() {
 document.getElementById('activityConditionsModal').classList.remove('hidden');
 }
function hideActivityConditions() {
 document.getElementById('activityConditionsModal').classList.add('hidden');
 }
function showDoctorRecommendations() {
 document.getElementById('doctorRecommendationsModal').classList.remove('hidden');
 }
function hideDoctorRecommendations() {
 document.getElementById('doctorRecommendationsModal').classList.add('hidden');
 }
function showOccupationalDiseases() {
 document.getElementById('occupationalDiseasesModal').classList.remove('hidden');
 }
function hideOccupationalDiseases() {
 document.getElementById('occupationalDiseasesModal').classList.add('hidden');
 }
// Lab Tests functions
 function showLabTests() {
 document.getElementById('labTestsModal').classList.remove('hidden');
 }
function hideLabTests() {
 document.getElementById('labTestsModal').classList.add('hidden');
 }
function showTestDetails(testType) {
 const testDetailsBody = document.getElementById('testDetailsBody');
 testDetailsBody.innerHTML = '';
let testData = [];
 let testTitle = '';
 let interpretation = '';
switch(testType) {
 case 'lipidPanel':
 testTitle = 'پنل لیپیدی';
 interpretation = 'سطح کلسترول شما کمی بالاتر از حد نرمال است. توصیه می‌شود رژیم غذایی کم چرب داشته باشید و فعالیت بدنی خود را افزایش دهید.';
 testData = [
 { parameter: 'کلسترول (Chol)', value: '210', unit: 'mg/dl', range: 'کمتر از 200', status: 'warning' },
 { parameter: 'تری گلیسیرید (TG)', value: '180', unit: 'mg/dl', range: 'زیر 150', status: 'warning' },
 { parameter: 'HDL-C', value: '45', unit: 'mg/dl', range: '40-60', status: 'normal' },
 { parameter: 'VLDL', value: '36', unit: 'mg/dl', range: '5-40', status: 'normal' },
 { parameter: 'Chol/HDL', value: '4.6', unit: 'ratio', range: 'کمتر از 5', status: 'normal' }
 ];
 break;
case 'diabetesScreening':
 testTitle = 'غربالگری دیابت';
 interpretation = 'سطح قند خون ناشتای شما در محدوده طبیعی است.';
 testData = [
 { parameter: 'قند خون ناشتا (FBS)', value: '92', unit: 'mg/dl', range: 'کمتر از 99', status: 'normal' },
 { parameter: 'هموگلوبین گلوکوزیله (HbA1C)', value: '5.4', unit: '%', range: 'کمتر از 5.7', status: 'normal' }
 ];
 break;
case 'kidneyFunction':
 testTitle = 'عملکرد کلیه';
 interpretation = 'کلیه‌های شما عملکرد طبیعی دارند.';
 testData = [
 { parameter: 'اوره خون (BUN)', value: '18', unit: 'mg/dl', range: '6-20', status: 'normal' },
 { parameter: 'کراتینین (Cr)', value: '0.9', unit: 'mg/dl', range: '0.6-1.2', status: 'normal' },
 { parameter: 'اوره (Urea)', value: '28', unit: 'mg/dl', range: '15-40', status: 'normal' },
 { parameter: 'BUN/Cr', value: '20', unit: 'ratio', range: '10-20', status: 'normal' }
 ];
 break;
case 'cbc':
 testTitle = 'CBC (شمارش کامل خون)';
 interpretation = 'نتایج آزمایش خون شما در محدوده طبیعی است.';
 testData = [
 { parameter: 'گلبول قرمز (RBC)', value: '4.8', unit: '*10⁶/μl', range: '4.35-5.65', status: 'normal' },
 { parameter: 'هموگلوبین (Hb)', value: '14.5', unit: 'g/dl', range: '13.2-17.7', status: 'normal' },
 { parameter: 'هماتوکریت (HCT)', value: '44', unit: '%', range: '41-50', status: 'normal' },
 { parameter: 'گلبول سفید (WBC)', value: '6.2', unit: '*10³/μl', range: '4.5-11', status: 'normal' },
 { parameter: 'پلاکت (Plt)', value: '220', unit: '*10³/μl', range: '150-450', status: 'normal' },
 { parameter: 'MCV', value: '88', unit: 'fl', range: '80-96', status: 'normal' },
 { parameter: 'MCH', value: '30', unit: 'pg', range: '27.5-33.2', status: 'normal' },
 { parameter: 'MCHC', value: '34', unit: '%', range: '32-36', status: 'normal' }
 ];
 break;
case 'liverFunction':
 testTitle = 'عملکرد کبد';
 interpretation = 'آنزیم‌های کبدی شما در محدوده طبیعی هستند.';
 testData = [
 { parameter: 'ALT', value: '32', unit: 'U/L', range: '7-55', status: 'normal' },
 { parameter: 'AST', value: '28', unit: 'U/L', range: '8-48', status: 'normal' }
 ];
 break;
case 'urinanalysis':
 testTitle = 'آنالیز ادرار';
 interpretation = 'ادرار شما طبیعی است. هیچ نشانه‌ای از عفونت یا مشکل کلیوی مشاهده نمی‌شود.';
 testData = [
 { parameter: 'رنگ (Color)', value: 'زرد روشن', unit: '', range: 'زرد روشن تا کهربایی', status: 'normal' },
 { parameter: 'شفافیت (Clarity)', value: 'شفاف', unit: '', range: 'شفاف', status: 'normal' },
 { parameter: 'pH', value: '6.5', unit: '', range: '4.5-8', status: 'normal' },
 { parameter: 'گلوکز (Glucose)', value: 'منفی', unit: '', range: 'منفی', status: 'normal' },
 { parameter: 'پروتئین (Protein)', value: 'منفی', unit: '', range: 'منفی', status: 'normal' },
 { parameter: 'گلبول سفید (WBC)', value: '2', unit: 'در میدان', range: '0-5', status: 'normal' },
 { parameter: 'گلبول قرمز (RBC)', value: '1', unit: 'در میدان', range: '0-2', status: 'normal' }
 ];
 break;
 }
document.getElementById('testDetailsTitle').textContent = testTitle;
 document.getElementById('doctorInterpretation').textContent = interpretation;
testData.forEach(item => {
 const row = document.createElement('tr');
const statusClass = item.status === 'normal' ? 'normal-range' :
item.status === 'warning' ? 'warning-range' : 'danger-range';
row.innerHTML = `
 <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">${item.parameter}</td>
 <td class="px-4 py-2 whitespace-nowrap text-sm ${item.status === 'normal' ? 'text-gray-500' : 'font-bold'}">${item.value}</td>
 <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">${item.unit}</td>
 <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">${item.range}</td>
 <td class="px-4 py-2 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
 ${item.status === 'normal' ? 'نرمال' : item.status === 'warning' ? 'هشدار' : 'خطر'}
 </span>
 </td>
 `;
testDetailsBody.appendChild(row);
 });
document.getElementById('testDetailsModal').classList.remove('hidden');
 }
function hideTestDetails() {
 document.getElementById('testDetailsModal').classList.add('hidden');
 }
// Disease Risks functions
 function showDiseaseRisks() {
 document.getElementById('diseaseRisksModal').classList.remove('hidden');
 }
function hideDiseaseRisks() {
 document.getElementById('diseaseRisksModal').classList.add('hidden');
 }
function showDiabetesRisk() {
 document.getElementById('diabetesRiskModal').classList.remove('hidden');
 }
function hideDiabetesRisk() {
 document.getElementById('diabetesRiskModal').classList.add('hidden');
 }
function showAlzheimerRisk() {
 document.getElementById('alzheimerRiskModal').classList.remove('hidden');
 }
function hideAlzheimerRisk() {
 document.getElementById('alzheimerRiskModal').classList.add('hidden');
 }
function showCardiovascularRisk() {
 document.getElementById('cardiovascularRiskModal').classList.remove('hidden');
 }
function hideCardiovascularRisk() {
 document.getElementById('cardiovascularRiskModal').classList.add('hidden');
 }
// Initialize the app
 document.addEventListener('DOMContentLoaded', function() {
 toggleAuthModal();
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Alinadi98/web2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>