Spaces:

Alinadi98
/

am

Running

App Files Files Community

am / index.html

Alinadi98

Add 2 files

b124433 verified over 1 year ago

Raw

History Blame Contribute Delete

55.2 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>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></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+Sans+Arabic:wght@400;500;600;700&display=swap');

	body {
	font-family: 'Noto Sans Arabic', sans-serif;
	background-color: #f0f9ff;
	}

	.health-card {
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	background-color: #ffffff;
	border-radius: 12px;
	}

	.health-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
	}

	.normal-range {
	background-color: #bbf7d0;
	color: #166534;
	}

	.warning-range {
	background-color: #fef08a;
	color: #854d0e;
	}

	.danger-range {
	background-color: #fecaca;
	color: #991b1b;
	}

	.sidebar {
	background-color: #e0f2fe;
	transition: all 0.3s ease;
	}

	.main-content {
	background-color: #f0f9ff;
	}

	.nav-item.active {
	background-color: #bae6fd;
	border-right: 4px solid #38bdf8;
	}

	@media (max-width: 768px) {
	.sidebar {
	transform: translateX(-100%);
	position: absolute;
	z-index: 50;
	height: 100vh;
	}

	.sidebar.open {
	transform: translateX(0);
	}
	}
	</style>
	</head>
	<body class="bg-blue-50">
	<!-- Main Container -->
	<div class="flex h-screen overflow-hidden">
	<!-- Sidebar -->
	<div class="sidebar w-64 flex-shrink-0">
	<div class="p-4 flex items-center justify-between border-b border-blue-200">
	<div class="flex items-center space-x-2 space-x-reverse">
	<i class="fas fa-heartbeat text-2xl text-blue-600"></i>
	<span class="text-xl font-bold text-blue-800">سلامت شغلی</span>
	</div>
	<button id="sidebarToggle" class="md:hidden text-blue-600">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<nav class="p-4">
	<div class="mb-8">
	<h3 class="text-blue-600 uppercase text-xs font-semibold mb-3">منوی اصلی</h3>
	<ul>
	<li class="mb-2">
	<a href="#" id="dashboardLink" class="nav-item active flex items-center space-x-2 space-x-reverse p-2 rounded text-blue-800">
	<i class="fas fa-home"></i>
	<span>داشبورد</span>
	</a>
	</li>
	<li class="mb-2">
	<a href="#" id="healthRecordLink" class="nav-item flex items-center space-x-2 space-x-reverse p-2 rounded hover:bg-blue-100 text-blue-700">
	<i class="fas fa-clipboard-medical"></i>
	<span>پرونده سلامت</span>
	</a>
	</li>
	<li class="mb-2">
	<a href="#" id="labTestsLink" class="nav-item flex items-center space-x-2 space-x-reverse p-2 rounded hover:bg-blue-100 text-blue-700">
	<i class="fas fa-flask"></i>
	<span>آزمایشات</span>
	</a>
	</li>
	<li class="mb-2">
	<a href="#" id="referralsLink" class="nav-item flex items-center space-x-2 space-x-reverse p-2 rounded hover:bg-blue-100 text-blue-700">
	<i class="fas fa-exchange-alt"></i>
	<span>ارجاعات</span>
	</a>
	</li>
	</ul>
	</div>
	</nav>
	</div>

	<!-- Main Content -->
	<div class="flex-1 flex flex-col overflow-hidden main-content">
	<!-- Top Navigation -->
	<header class="bg-white border-b border-blue-100 flex items-center justify-between p-4">
	<div class="flex items-center">
	<button id="mobileSidebarToggle" class="md:hidden text-blue-600 mr-3">
	<i class="fas fa-bars text-xl"></i>
	</button>
	<h1 class="text-xl font-bold text-blue-800">سیستم مدیریت سلامت شغلی</h1>
	</div>
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="relative">
	<button class="text-blue-600 hover:text-blue-800">
	<i class="fas fa-bell text-xl"></i>
	<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
	</button>
	</div>
	<div class="flex items-center space-x-2 space-x-reverse">
	<div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">ی</div>
	<span class="text-blue-700">کاربر</span>
	</div>
	</div>
	</header>

	<!-- Main Content Area -->
	<main class="flex-1 overflow-y-auto p-4">
	<!-- Dashboard Section -->
	<section id="dashboardSection">
	<div class="health-card p-6 mb-6">
	<h2 class="text-xl font-bold text-blue-800 mb-6">اطلاعات دموگرافیک</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<div class="border border-blue-100 rounded-lg p-4 bg-white">
	<div class="flex items-center space-x-3 space-x-reverse mb-3">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-id-card"></i>
	</div>
	<div>
	<h3 class="text-blue-600 text-sm">شماره پرسنلی</h3>
	<p class="font-semibold text-blue-800">12345</p>
	</div>
	</div>
	</div>
	<div class="border border-blue-100 rounded-lg p-4 bg-white">
	<div class="flex items-center space-x-3 space-x-reverse mb-3">
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-birthday-cake"></i>
	</div>
	<div>
	<h3 class="text-blue-600 text-sm">سن</h3>
	<p class="font-semibold text-blue-800">38 سال</p>
	</div>
	</div>
	</div>
	<div class="border border-blue-100 rounded-lg p-4 bg-white">
	<div class="flex items-center space-x-3 space-x-reverse mb-3">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-briefcase"></i>
	</div>
	<div>
	<h3 class="text-blue-600 text-sm">شغل</h3>
	<p class="font-semibold text-blue-800">اپراتور ماشین‌آلات</p>
	</div>
	</div>
	</div>
	<div class="border border-blue-100 rounded-lg p-4 bg-white">
	<div class="flex items-center space-x-3 space-x-reverse mb-3">
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-user-tie"></i>
	</div>
	<div>
	<h3 class="text-blue-600 text-sm">پوزیشن شغلی</h3>
	<p class="font-semibold text-blue-800">اپراتور ارشد</p>
	</div>
	</div>
	</div>
	<div class="border border-blue-100 rounded-lg p-4 bg-white">
	<div class="flex items-center space-x-3 space-x-reverse mb-3">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-industry"></i>
	</div>
	<div>
	<h3 class="text-blue-600 text-sm">محل کار (پلنت)</h3>
	<p class="font-semibold text-blue-800">پلنت شماره 2</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
	<div class="health-card p-6">
	<div class="flex items-center justify-between mb-4">
	<h2 class="text-xl font-bold text-blue-800">پرونده سلامت</h2>
	<div class="p-2 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-clipboard-medical"></i>
	</div>
	</div>
	<p class="text-blue-600 mb-4">دسترسی به اطلاعات جامع سلامت شغلی و پزشکی</p>
	<button id="openHealthRecord" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition duration-200">
	مشاهده پرونده سلامت
	</button>
	</div>

	<div class="health-card p-6">
	<div class="flex items-center justify-between mb-4">
	<h2 class="text-xl font-bold text-blue-800">ارجاعات</h2>
	<div class="p-2 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-exchange-alt"></i>
	</div>
	</div>
	<p class="text-blue-600 mb-4">مدیریت ارجاعات پزشکی و پیگیری وضعیت</p>
	<button id="openReferrals" class="w-full bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg transition duration-200">
	مشاهده ارجاعات
	</button>
	</div>
	</div>
	</section>

	<!-- Health Record Section -->
	<section id="healthRecordSection" class="hidden">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-2xl font-bold text-blue-800">پرونده سلامت</h2>
	<button id="backToDashboard" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800">
	<i class="fas fa-arrow-right"></i>
	<span>بازگشت به داشبورد</span>
	</button>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
	<div class="health-card cursor-pointer" id="occupationalHealthBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-user-md text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">پرونده طب کار</h3>
	<p class="text-blue-600">اطلاعات معاینات و سلامت شغلی</p>
	</div>
	</div>
	</div>
	</div>

	<div class="health-card cursor-pointer" id="labTestsBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-flask text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">آزمایشات</h3>
	<p class="text-blue-600">نتایج آزمایشات و پارامترهای سلامت</p>
	</div>
	</div>
	</div>
	</div>

	<div class="health-card cursor-pointer" id="diseaseRiskBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-virus text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">ریسک بیماری‌ها</h3>
	<p class="text-blue-600">ارزیابی خطر بیماری‌های شغلی</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Occupational Health Submenu -->
	<div id="occupationalHealthSection" class="hidden">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-2xl font-bold text-blue-800">پرونده طب کار</h2>
	<button id="backToHealthRecord" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800">
	<i class="fas fa-arrow-right"></i>
	<span>بازگشت به پرونده سلامت</span>
	</button>
	</div>

	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- Medical History Card -->
	<div class="health-card cursor-pointer" id="medicalHistoryBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-history text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">سوابق پزشکی</h3>
	<p class="text-blue-600">اطلاعات شخصی و شغلی</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Clinical Exams Card -->
	<div class="health-card cursor-pointer" id="clinicalExamsBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-stethoscope text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">معاینات بالینی</h3>
	<p class="text-blue-600">قد، وزن، BMI و فشارخون</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Vision Status Card -->
	<div class="health-card cursor-pointer" id="visionStatusBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-eye text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">وضعیت بینایی</h3>
	<p class="text-blue-600">مشکلات و نتایج بینایی‌سنجی</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Hearing Status Card -->
	<div class="health-card cursor-pointer" id="hearingStatusBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-deaf text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">وضعیت شنوایی</h3>
	<p class="text-blue-600">نتایج تست‌های شنوایی</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Respiratory Status Card -->
	<div class="health-card cursor-pointer" id="respiratoryStatusBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-lungs text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">وضعیت تنفسی</h3>
	<p class="text-blue-600">ارزیابی سیستم تنفسی</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Cardiovascular Status Card -->
	<div class="health-card cursor-pointer" id="cardiovascularStatusBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-heartbeat text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">وضعیت قلبی و عروقی</h3>
	<p class="text-blue-600">ارزیابی سلامت قلب</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Activity Conditions Card -->
	<div class="health-card cursor-pointer" id="activityConditionsBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-running text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">شروط ادامه فعالیت</h3>
	<p class="text-blue-600">محدودیت‌های شغلی</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Doctor Recommendations Card -->
	<div class="health-card cursor-pointer" id="doctorRecommendationsBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-comment-medical text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">توصیه پزشک طب کار</h3>
	<p class="text-blue-600">پیشنهادات و توصیه‌ها</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Occupational Diseases Card -->
	<div class="health-card cursor-pointer" id="occupationalDiseasesBtn">
	<div class="p-6">
	<div class="flex items-center space-x-4 space-x-reverse">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-viruses text-xl"></i>
	</div>
	<div>
	<h3 class="font-bold text-lg text-blue-800">بیماری‌های شغلی</h3>
	<p class="text-blue-600">تشخیص و پیگیری</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Medical History Details -->
	<div id="medicalHistorySection" class="hidden">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-2xl font-bold text-blue-800">سوابق پزشکی شخصی و شغلی</h2>
	<button id="backToOccupationalHealth" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800">
	<i class="fas fa-arrow-right"></i>
	<span>بازگشت به پرونده طب کار</span>
	</button>
	</div>

	<div class="health-card mb-6">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">سوابق پزشکی شخصی</h3>
	<div class="space-y-4">
	<div class="flex items-start space-x-4 space-x-reverse">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
	<i class="fas fa-procedures"></i>
	</div>
	<div>
	<h4 class="font-semibold text-blue-800">سابقه بیماری‌ها</h4>
	<p class="text-blue-600">دیابت نوع 2 (از سال 1398)، فشار خون بالا (از سال 1399)</p>
	</div>
	</div>
	<div class="flex items-start space-x-4 space-x-reverse">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
	<i class="fas fa-syringe"></i>
	</div>
	<div>
	<h4 class="font-semibold text-blue-800">سابقه جراحی‌ها</h4>
	<p class="text-blue-600">آپاندکتومی (سال 1385)</p>
	</div>
	</div>
	<div class="flex items-start space-x-4 space-x-reverse">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
	<i class="fas fa-allergies"></i>
	</div>
	<div>
	<h4 class="font-semibold text-blue-800">حساسیت‌ها</h4>
	<p class="text-blue-600">حساسیت به پنی سیلین</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">سوابق پزشکی شغلی</h3>
	<div class="space-y-4">
	<div class="flex items-start space-x-4 space-x-reverse">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
	<i class="fas fa-hard-hat"></i>
	</div>
	<div>
	<h4 class="font-semibold text-blue-800">تماس با مواد خطرناک</h4>
	<p class="text-blue-600">تماس با حلال‌های آلی (از سال 1395 تا کنون)</p>
	</div>
	</div>
	<div class="flex items-start space-x-4 space-x-reverse">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
	<i class="fas fa-head-side-mask"></i>
	</div>
	<div>
	<h4 class="font-semibold text-blue-800">تماس با گرد و غبار</h4>
	<p class="text-blue-600">تماس متوسط با گرد و غبار سیلیس (از سال 1397)</p>
	</div>
	</div>
	<div class="flex items-start space-x-4 space-x-reverse">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
	<i class="fas fa-ear-deaf"></i>
	</div>
	<div>
	<h4 class="font-semibold text-blue-800">تماس با صدا</h4>
	<p class="text-blue-600">تماس با صدای بالای 85 دسی‌بل (8 ساعت در روز)</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Clinical Exams Details -->
	<div id="clinicalExamsSection" class="hidden">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-2xl font-bold text-blue-800">معاینات بالینی</h2>
	<button id="backToOccupationalHealth2" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800">
	<i class="fas fa-arrow-right"></i>
	<span>بازگشت به پرونده طب کار</span>
	</button>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">مشخصات فیزیکی</h3>
	<div class="space-y-4">
	<div class="flex justify-between items-center">
	<span class="text-blue-600">قد</span>
	<span class="font-semibold text-blue-800">172 سانتی‌متر</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">وزن</span>
	<span class="font-semibold text-blue-800">85 کیلوگرم</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">شاخص توده بدنی (BMI)</span>
	<span class="font-semibold text-blue-800">28.7 (اضافه وزن)</span>
	</div>
	</div>
	</div>
	</div>

	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">فشار خون</h3>
	<div class="space-y-4">
	<div class="flex justify-between items-center">
	<span class="text-blue-600">آخرین اندازه‌گیری</span>
	<span class="font-semibold text-blue-800">140/90 mmHg</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">میانگین 3 ماه اخیر</span>
	<span class="font-semibold text-blue-800">138/88 mmHg</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">وضعیت</span>
	<span class="px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">فشار خون مرحله 1</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">تاریخچه معاینات</h3>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-blue-200">
	<thead class="bg-blue-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">تاریخ</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">وزن (kg)</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">BMI</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">فشار خون</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">وضعیت</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-blue-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1400/05/15</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">82</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">27.7</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">135/85</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">طبیعی</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1400/11/20</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">84</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">28.4</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">142/92</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">فشار خون مرحله 1</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1401/06/10</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">85</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">28.7</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">140/90</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">فشار خون مرحله 1</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>

	<!-- Vision Status Details -->
	<div id="visionStatusSection" class="hidden">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-2xl font-bold text-blue-800">وضعیت بینایی</h2>
	<button id="backToOccupationalHealth3" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800">
	<i class="fas fa-arrow-right"></i>
	<span>بازگشت به پرونده طب کار</span>
	</button>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">دید چشم راست</h3>
	<div class="space-y-4">
	<div class="flex justify-between items-center">
	<span class="text-blue-600">دید بدون اصلاح</span>
	<span class="font-semibold text-blue-800">20/40</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">دید با اصلاح</span>
	<span class="font-semibold text-blue-800">20/20</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">عیب انکساری</span>
	<span class="font-semibold text-blue-800">-1.50 دیوپتر</span>
	</div>
	</div>
	</div>
	</div>

	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">دید چشم چپ</h3>
	<div class="space-y-4">
	<div class="flex justify-between items-center">
	<span class="text-blue-600">دید بدون اصلاح</span>
	<span class="font-semibold text-blue-800">20/50</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">دید با اصلاح</span>
	<span class="font-semibold text-blue-800">20/20</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">عیب انکساری</span>
	<span class="font-semibold text-blue-800">-1.75 دیوپتر</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">تاریخچه بینایی‌سنجی</h3>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-blue-200">
	<thead class="bg-blue-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">تاریخ</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">دید راست</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">دید چپ</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">عیب انکساری</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">وضعیت</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-blue-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1398/03/10</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/30</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/40</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">-1.00 / -1.25</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">مشکل جزئی</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1399/04/15</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/35</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/45</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">-1.25 / -1.50</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">نیاز به عینک</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1400/05/20</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/40</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20/50</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">-1.50 / -1.75</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">نیاز به عینک</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>

	<!-- Hearing Status Details -->
	<div id="hearingStatusSection" class="hidden">
	<div class="flex items-center justify-between mb-6">
	<h2 class="text-2xl font-bold text-blue-800">وضعیت شنوایی</h2>
	<button id="backToOccupationalHealth4" class="flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-800">
	<i class="fas fa-arrow-right"></i>
	<span>بازگشت به پرونده طب کار</span>
	</button>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">شنوایی گوش راست</h3>
	<div class="space-y-4">
	<div class="flex justify-between items-center">
	<span class="text-blue-600">آستانه شنوایی 500Hz</span>
	<span class="font-semibold text-blue-800">25 dB</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">آستانه شنوایی 1000Hz</span>
	<span class="font-semibold text-blue-800">30 dB</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">آستانه شنوایی 2000Hz</span>
	<span class="font-semibold text-blue-800">35 dB</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">آستانه شنوایی 4000Hz</span>
	<span class="font-semibold text-blue-800">40 dB</span>
	</div>
	</div>
	</div>
	</div>

	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">شنوایی گوش چپ</h3>
	<div class="space-y-4">
	<div class="flex justify-between items-center">
	<span class="text-blue-600">آستانه شنوایی 500Hz</span>
	<span class="font-semibold text-blue-800">20 dB</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">آستانه شنوایی 1000Hz</span>
	<span class="font-semibold text-blue-800">25 dB</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">آستانه شنوایی 2000Hz</span>
	<span class="font-semibold text-blue-800">30 dB</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="text-blue-600">آستانه شنوایی 4000Hz</span>
	<span class="font-semibold text-blue-800">35 dB</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="health-card mb-6">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">نمودار شنوایی</h3>
	<div class="h-64">
	<canvas id="hearingChart"></canvas>
	</div>
	</div>
	</div>

	<div class="health-card">
	<div class="p-6">
	<h3 class="font-bold text-lg text-blue-800 mb-4">تاریخچه شنوایی‌سنجی</h3>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-blue-200">
	<thead class="bg-blue-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">تاریخ</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">میانگین شنوایی راست</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">میانگین شنوایی چپ</th>
	<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-blue-500 uppercase tracking-wider">وضعیت</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-blue-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1398/03/10</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20 dB</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">15 dB</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">طبیعی</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1399/04/15</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">25 dB</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">20 dB</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">کاهش جزئی</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">1400/05/20</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">30 dB</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">25 dB</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-800">کاهش متوسط</td>
	</tr>
	</tbody>
	</table>
	</极速赛车
	</html>