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>