MedPage.html

<!-- Medical Books Page -->
<div class="min-h-screen flex flex-col bg-white">
  <!-- Header -->
  <header class="bg-primary text-white">
    <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
      <h1 class="text-2xl font-bold">TN Medical Connect</h1>
      <nav class="space-x-4 text-sm">
        <a href="#" class="hover:underline">Home</a>
        <a href="#" class="hover:underline font-semibold">Medical Books</a>
        <a href="#" class="hover:underline">Resources</a>
        <!-- ...other nav links -->
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="flex-1 max-w-6xl mx-auto px-4 py-6">
    <h2 class="text-3xl font-bold text-gray-800 mb-4">📚 Medical Books &amp; Guidelines</h2>
    <p class="text-gray-600 mb-6">Access a repository of open-source medical textbooks and global clinical guidelines. Use the search below to find specific titles or browse the collection.</p>

    <!-- Search Bar -->
    <div class="mb-6">
      <input type="text" placeholder="Search books or guidelines..." class="w-full md:w-1/2 px-4 py-2 border border-gray-300 rounded" />
    </div>

    <!-- Books/Guidelines List -->
    <div class="overflow-x-auto">
      <table class="min-w-full text-sm text-left text-gray-800">
        <thead class="bg-gray-100 text-gray-700 uppercase text-xs">
          <tr>
            <th class="px-4 py-2">Title</th>
            <th class="px-4 py-2">Author/Source</th>
            <th class="px-4 py-2">Year</th>
            <th class="px-4 py-2">Access</th>
          </tr>
        </thead>
        <tbody>
          <!-- Example Book Row -->
          <tr class="border-b">
            <td class="px-4 py-2">Oxford Handbook of Clinical Medicine</td>
            <td class="px-4 py-2">Murray Longmore et al.</td>
            <td class="px-4 py-2">2014</td>
            <td class="px-4 py-2"><a href="#" class="text-primary hover:underline">View</a></td>
          </tr>
          <!-- Example Open-Source Book -->
          <tr class="border-b">
            <td class="px-4 py-2">OpenStax Anatomy &amp; Physiology</td>
            <td class="px-4 py-2">OpenStax (Rice University)</td>
            <td class="px-4 py-2">2016</td>
            <td class="px-4 py-2"><a href="https://openstax.org/details/books/anatomy-and-physiology" class="text-primary hover:underline" target="_blank">Open Link</a></td>
          </tr>
          <!-- Example Guideline -->
          <tr class="border-b">
            <td class="px-4 py-2">WHO Hypertension Guidelines</td>
            <td class="px-4 py-2">World Health Organization</td>
            <td class="px-4 py-2">2021</td>
            <td class="px-4 py-2"><a href="#" class="text-primary hover:underline">PDF</a></td>
          </tr>
          <!-- Example Guideline -->
          <tr class="border-b">
            <td class="px-4 py-2">NICE Diabetes Management</td>
            <td class="px-4 py-2">NICE (UK)</td>
            <td class="px-4 py-2">2022</td>
            <td class="px-4 py-2"><a href="#" class="text-primary hover:underline">PDF</a></td>
          </tr>
          <!-- More entries... -->
        </tbody>
      </table>
    </div>

    <!-- Note about usage -->
    <p class="mt-4 text-xs text-gray-500">* All resources listed are open-access or used with permission. Please ensure proper citation of guidelines when using them in practice.</p>
  </main>

  <!-- Footer -->
  <footer class="bg-gray-100">
    <div class="max-w-6xl mx-auto px-4 py-5 text-sm text-gray-600">
      © 2025 TN Medical Connect &middot; <a href="#" class="text-primary hover:underline">Report Broken Link</a>
    </div>
  </footer>
</div>