เขียน wesite ภาษาไทย สำหรับ โปรแกรมในการจัดทำข้อมูลการเบิกยา และการจ่ายยากลุ่มยา จ 2 ให้กับผู้ป่วยในโรงพยาบาล โดยคุณโดยตั้งแต่ในขั้นตอน การส่งเอกสารเบิกยา ขั้นตอนกำลังอนุมัติ อนุมัติแล้ว ติดต่อคนไข้แล้ว จ่ายยาแล้ว และมีระบบ feature เพิ่มเติมจากที่คุณติดว่าเหมาะสมมากที่สุด ครอบคลุมที่สุดเท่าที่จะเป็นไปได้ จงจัดทำให้ฉันระดับ masterpiece

README.md

@@ -1,10 +1,13 @@
 ---
-title: Medtrackrx
-emoji: 📉
-colorFrom: gray
-colorTo: yellow
+title: MedTrackRx - ยาติดตามระบบ 🏥💊
+colorFrom: pink
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,52 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #1e293b;
+          color: white;
+          padding: 2rem;
+          text-align: center;
+          margin-top: auto;
+        }
+        .footer-content {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        .footer-links {
+          display: flex;
+          justify-content: center;
+          gap: 1.5rem;
+          margin-bottom: 1rem;
+        }
+        .footer-links a {
+          color: #e2e8f0;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-links a:hover {
+          color: #818cf8;
+        }
+        .copyright {
+          color: #94a3b8;
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-links">
+            <a href="/about.html">เกี่ยวกับระบบ</a>
+            <a href="/privacy.html">นโยบายความเป็นส่วนตัว</a>
+            <a href="/contact.html">ติดต่อเรา</a>
+          </div>
+          <div class="copyright">
+            &copy; <span id="current-year"></span> MedTrackRx - ระบบติดตามการเบิกจ่ายยา. สงวนลิขสิทธิ์.
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,116 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+          padding: 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.25rem;
+          display: flex;
+          align-items: center;
+        }
+        .logo i {
+          margin-right: 0.5rem;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: white;
+          text-decoration: none;
+          transition: opacity 0.2s;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+        }
+        a:hover {
+          opacity: 0.9;
+        }
+        a i {
+          margin-right: 0.25rem;
+        }
+        .mobile-menu-button {
+          display: none;
+          background: none;
+          border: none;
+          color: white;
+          font-size: 1.5rem;
+          cursor: pointer;
+        }
+        .mobile-menu {
+          display: none;
+          background: white;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          padding: 1rem;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          z-index: 50;
+        }
+        .mobile-menu a {
+          color: #4f46e5;
+          padding: 0.5rem 0;
+          display: block;
+          border-bottom: 1px solid #e5e7eb;
+        }
+        @media (max-width: 768px) {
+          ul {
+            display: none;
+          }
+          .mobile-menu-button {
+            display: block;
+          }
+          .mobile-menu.show {
+            display: block;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">
+          <i data-feather="activity"></i>
+          <span>MedTrackRx</span>
+        </div>
+        
+        <button class="mobile-menu-button" onclick="this.shadowRoot.querySelector('.mobile-menu').classList.toggle('show')">
+          <i data-feather="menu"></i>
+        </button>
+        
+        <ul>
+          <li><a href="/"><i data-feather="home"></i> หน้าหลัก</a></li>
+          <li><a href="/requests.html"><i data-feather="file-text"></i> คำขอทั้งหมด</a></li>
+          <li><a href="/inventory.html"><i data-feather="database"></i> คลังยา</a></li>
+          <li><a href="/report.html"><i data-feather="pie-chart"></i> รายงาน</a></li>
+          <li><a href="/settings.html"><i data-feather="settings"></i> ตั้งค่า</a></li>
+        </ul>
+        
+        <div class="mobile-menu hidden">
+          <a href="/"><i data-feather="home"></i> หน้าหลัก</a>
+          <a href="/requests.html"><i data-feather="file-text"></i> คำขอทั้งหมด</a>
+          <a href="/inventory.html"><i data-feather="database"></i> คลังยา</a>
+          <a href="/report.html"><i data-feather="pie-chart"></i> รายงาน</a>
+          <a href="/settings.html"><i data-feather="settings"></i> ตั้งค่า</a>
+        </div>
+      </nav>
+    `;
+    
+    // Replace feather icons after rendering
+    setTimeout(() => {
+      feather.replace();
+    }, 100);
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

create-request.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="th">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>สร้างคำเบิกยาใหม่ | MedTrackRx</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex items-center mb-6">
+            <a href="/" class="text-indigo-600 hover:text-indigo-800 mr-2">
+                <i data-feather="home"></i>
+            </a>
+            <i data-feather="chevron-right" class="text-gray-400 mx-2"></i>
+            <h1 class="text-2xl font-bold text-gray-800">สร้างคำเบิกยาใหม่</h1>
+        </div>
+        
+        <div class="bg-white rounded-lg shadow-md p-6">
+            <form id="medRequestForm">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                    <div>
+                        <h2 class="text-xl font-semibold mb-4 text-gray-800">ข้อมูลผู้ป่วย</h2>
+                        
+                        <div class="mb-4">
+                            <label for="patientId" class="block text-sm font-medium text-gray-700 mb-1">เลขประจำตัวผู้ป่วย</label>
+                            <input type="text" id="patientId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                        </div>
+                        
+                        <div class="mb-4">
+                            <label for="patientName" class="block text-sm font-medium text-gray-700 mb-1">ชื่อ-สกุลผู้ป่วย</label>
+                            <input type="text" id="patientName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                        </div>
+                        
+                        <div class="mb-4">
+                            <label for="patientWard" class="block text-sm font-medium text-gray-700 mb-1">แผนก/หอผู้ป่วย</label>
+                            <select id="patientWard" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                                <option value="">เลือกแผนก</option>
+                                <option value="ward1">หอผู้ป่วยศัลยกรรม</option>
+                                <option value="ward2">หอผู้ป่วยอายุรกรรม</option>
+                                <option value="ward3">หอผู้ป่วยกุมารเวชกรรม</option>
+                                <option value="ward4">หอผู้ป่วย ICU</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <h2 class="text-xl font-semibold mb-4 text-gray-800">ข้อมูลแพทย์ผู้สั่งจ่าย</h2>
+                        
+                        <div class="mb-4">
+                            <label for="doctorId" class="block text-sm font-medium text-gray-700 mb-1">รหัสแพทย์</label>
+                            <input type="text" id="doctorId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                        </div>
+                        
+                        <div class="mb-4">
+                            <label for="doctorName" class="block text-sm font-medium text-gray-700 mb-1">ชื่อแพทย์ผู้สั่งจ่าย</label>
+                            <input type="text" id="doctorName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                        </div>
+                        
+                        <div class="mb-4">
+                            <label for="requestDate" class="block text-sm font-medium text-gray-700 mb-1">วันที่สั่งจ่าย</label>
+                            <input type="date" id="requestDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="mb-8">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-800">รายการยา</h2>
+                    
+                    <div id="medicationItems" class="space-y-4">
+                        <!-- Medication items will be added here -->
+                        <div class="medication-item bg-gray-50 p-4 rounded-lg border border-gray-200">
+                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">ชื่อยา</label>
+                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 medication-name" required>
+                                        <option value="">เลือกยา</option>
+                                        <option value="morphine">Morphine</option>
+                                        <option value="fentanyl">Fentanyl</option>
+                                        <option value="oxycodone">Oxycodone</option>
+                                        <option value="methadone">Methadone</option>
+                                        <option value="codeine">Codeine</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">ปริมาณ</label>
+                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 medication-dose" required>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">หน่วย</label>
+                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 medication-unit" required>
+                                        <option value="mg">mg</option>
+                                        <option value="ml">ml</option>
+                                        <option value="tablet">เม็ด</option>
+                                        <option value="ampoule">แอมพูล</option>
+                                    </select>
+                                </div>
+                                <{"ok":false,"message":"Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model."}
+</body>
+</html>

index.html

@@ -1,19 +1,204 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="th">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MedTrackRx - ระบบติดตามการเบิกจ่ายยา</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
+    
+    <main class="container mx-auto px-4 py-8 relative">
+        <!-- Dashboard Overview -->
+        <section class="mb-12">
+            <h1 class="text-3xl font-bold text-gray-800 mb-6">ระบบติดตามการเบิกจ่ายยา <span class="text-indigo-600">กลุ่มยา จ 2</span></h1>
+            
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+                <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
+                    <h3 class="text-gray-500 mb-2">รอส่งเอกสาร</h3>
+                    <p class="text-3xl font-bold">24</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-yellow-500">
+                    <h3 class="text-gray-500 mb-2">รออนุมัติ</h3>
+                    <p class="text-3xl font-bold">18</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-green-500">
+                    <h3 class="text-gray-500 mb-2">อนุมัติแล้ว</h3>
+                    <p class="text-3xl font-bold">32</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-purple-500">
+                    <h3 class="text-gray-500 mb-2">จ่ายยาแล้ว</h3>
+                    <p class="text-3xl font-bold">56</p>
+                </div>
+            </div>
+            
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <canvas id="requestChart" class="w-full h-64"></canvas>
+            </div>
+        </section>
+        
+        <!-- Quick Actions -->
+        <section class="mb-12">
+            <h2 class="text-2xl font-semibold text-gray-800 mb-4">เมนูดำเนินการ</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <a href="/create-request.html" class="bg-indigo-600 hover:bg-indigo-700 text-white p-4 rounded-lg flex items-center justify-center transition-colors">
+                    <i data-feather="plus" class="mr-2"></i> สร้างคำเบิกใหม่
+                </a>
+                <a href="/tracking.html" class="bg-green-600 hover:bg-green-700 text-white p-4 rounded-lg flex items-center justify-center transition-colors">
+                    <i data-feather="search" class="mr-2"></i> ติดตามสถานะ
+                </a>
+                <a href="/inventory.html" class="bg-blue-600 hover:bg-blue-700 text-white p-4 rounded-lg flex items-center justify-center transition-colors">
+                    <i data-feather="database" class="mr-2"></i> คลังยา
+                </a>
+                <a href="/report.html" class="bg-purple-600 hover:bg-purple-700 text-white p-4 rounded-lg flex items-center justify-center transition-colors">
+                    <i data-feather="file-text" class="mr-2"></i> รายงาน
+                </a>
+            </div>
+        </section>
+        
+        <!-- Recent Requests -->
+        <section class="mb-12">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-2xl font-semibold text-gray-800">คำขอล่าสุด</h2>
+                <a href="/requests.html" class="text-indigo-600 hover:underline">ดูทั้งหมด</a>
+            </div>
+            <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">เลขที่คำขอ</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ผู้ป่วย</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ประเภทยา</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">สถานะ</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">วันที่</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ดำเนินการ</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">MR-2023-00142</td>
+                            <td class="px-6 py-4 whitespace-nowrap">นายสมชาย ใจดี</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Morphine</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">รออนุมัติ</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">12/11/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <a href="#" class="text-indigo-600 hover:text-indigo-900">ดูรายละเอียด</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">MR-2023-00141</td>
+                            <td class="px-6 py-4 whitespace-nowrap">น.ส.สุนิสา ใจกล้า</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Fentanyl</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">อนุมัติแล้ว</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">11/11/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <a href="#" class="text-indigo-600 hover:text-indigo-900">ดูรายละเอียด</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">MR-2023-00140</td>
+                            <td class="px-6 py-4 whitespace-nowrap">น.ส.พรพิมล สุขใจ</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Oxycodone</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">รอส่งเอกสาร</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">10/11/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <a href="#" class="text-indigo-600 hover:text-indigo-900">ดูรายละเอียด</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">MR-2023-00139</td>
+                            <td class="px-6 py-4 whitespace-nowrap">นายดำรงค์ เก่งกล้า</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Methadone</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">จ่ายยาแล้ว</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">09/11/2023</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <a href="#" class="text-indigo-600 hover:text-indigo-900">ดูรายละเอียด</a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+    </main>
+    
+    <custom-footer></custom-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3a86ff,
+            backgroundColor: 0xf8fafc,
+            size: 0.8
+        });
+        
+        // Chart.js
+        document.addEventListener('DOMContentLoaded', function() {
+            const ctx = document.getElementById('requestChart').getContext('2d');
+            const requestChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'],
+                    datasets: [{
+                        label: 'จำนวนคำขอ',
+                        data: [12, 19, 15, 22, 18, 24, 20, 28, 25, 30, 26, 34],
+                        backgroundColor: 'rgba(79, 70, 229, 0.7)',
+                        borderColor: 'rgba(79, 70, 229, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        title: {
+                            display: true,
+                            text: 'สถิติการเบิกยา 12 เดือนล่าสุด',
+                            font: {
+                                size: 16
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,33 @@
+// Shared functions across all pages
+
+// Initialize tooltips
+function initTooltips() {
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+}
+
+// Format Thai date
+function formatThaiDate(dateString) {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    const options = { day: 'numeric', month: 'numeric', year: 'numeric' };
+    return date.toLocaleDateString('th-TH', options);
+}
+
+// Toggle mobile menu
+function toggleMobileMenu() {
+    const mobileMenu = document.getElementById('mobile-menu');
+    mobileMenu.classList.toggle('hidden');
+}
+
+// Initialize the app
+document.addEventListener('DOMContentLoaded', function() {
+    initTooltips();
+    
+    // Set current year in footer
+    document.getElementById('current-year').textContent = new Date().getFullYear() + 543;
+    
+    console.log('MedTrackRx initialized');
+});

style.css

@@ -1,28 +1,34 @@
+@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Sarabun', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animation for status badges */
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
 }
+
+.pulse-animation {
+    animation: pulse 2s infinite;
+}