File size: 7,664 Bytes
fb33344
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TN Medical Connect | Research</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">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body class="research-page">
<!-- Research Page -->
<div class="min-h-screen flex flex-col bg-white">
  <!-- Header / Navbar (same structure as other pages for consistency) -->
  <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">Research</a>
        <a href="#" class="hover:underline">Podcasts</a>
        <!-- ...other nav links -->
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="flex-1 max-w-7xl mx-auto px-4 py-6 space-y-12">
    <!-- Page Title -->
    <div class="mb-6">
      <h2 class="text-3xl font-bold text-gray-800">🔬 Research & Innovation</h2>
      <p class="text-gray-600">Latest research updates, resources for researchers, and upcoming academic events.</p>
    </div>
    
    <!-- Search and Filter -->
    <div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between space-y-2 md:space-y-0">
      <form class="search-form w-full md:w-2/3 flex" data-category="research">
        <input type="text" placeholder="Search research papers, grants..." class="w-full px-3 py-2 border border-gray-300 rounded-l" />
        <button type="submit" class="bg-primary text-white px-4 py-2 rounded-r hover:bg-opacity-90">
          <i class="fas fa-search"></i>
        </button>
      </form>
      <select class="w-full md:w-1/5 px-3 py-2 border border-gray-300 rounded">
        <option>All Categories</option>
        <option>Papers</option>
        <option>Grants</option>
        <option>Clinical Trials</option>
      </select>
    </div>
    
    <!-- Search Results Container -->
    <div id="search-results" class="mb-8 hidden"></div>

    <!-- Featured Research Highlight -->
    <section class="bg-gray-50 border border-gray-200 rounded-lg p-6 shadow-sm">
      <h3 class="text-2xl font-semibold text-gray-800">Featured: Breakthrough in Diabetes Treatment</h3>
      <p class="text-sm text-gray-500 mb-4">Published Jan 2025 in New England Journal of Medicine</p>
      <p class="text-gray-700">Researchers at XYZ University have developed a novel insulin delivery method improving patient compliance. This breakthrough is expected to reduce complications in diabetes management. <a href="#" class="text-primary hover:underline">Read more</a></p>
    </section>

    <!-- Research Resources: IRB Guide and Publication Feeds -->
    <section class="md:flex md:space-x-6">
      <!-- IRB How-to Guide Card -->
      <div class="flex-1 bg-white border border-gray-200 rounded-lg p-5 shadow-sm mb-6 md:mb-0">
        <h3 class="text-xl font-semibold text-gray-800">How to Write an IRB Proposal</h3>
        <p class="text-sm text-gray-600 mb-3">Tips and steps to craft a successful IRB submission for your study.</p>
        <ul class="list-disc list-inside text-gray-700 text-sm space-y-1">
          <li>Define a clear research question and hypothesis.</li>
          <li>Ensure ethical compliance and patient safety measures.</li>
          <li>Provide detailed methodology and data management plans.</li>
        </ul>
        <a href="#" class="mt-3 inline-block text-primary hover:underline text-sm font-medium">Read full guide &raquo;</a>
      </div>
      <!-- Latest Publications Feed -->
      <div class="flex-1">
        <h3 class="text-xl font-semibold text-gray-800 mb-3">Latest Publications</h3>
        <div class="space-y-2 text-sm">
          <!-- Example publication entries (could be dynamically loaded) -->
          <div class="border-b pb-2">
            <a href="#" class="text-primary hover:underline">Effect of Telemedicine on Patient Outcomes in Rural Areas</a>
            <p class="text-gray-500">Journal of Medical Systems &middot; Jan 2025</p>
          </div>
          <div class="border-b pb-2">
            <a href="#" class="text-primary hover:underline">AI-Assisted Surgery: A Review of 1000 Cases</a>
            <p class="text-gray-500">International Journal of Surgery &middot; Dec 2024</p>
          </div>
          <div>
            <a href="#" class="text-primary hover:underline">Long-term Effects of COVID-19 Vaccination Strategies</a>
            <p class="text-gray-500">Lancet Public Health &middot; Dec 2024</p>
          </div>
        </div>
        <button class="mt-3 text-primary text-sm hover:underline">Refresh Feed</button>
        <!-- A real implementation might use JS to fetch and append new entries -->
      </div>
    </section>

    <!-- Networking CTA -->
    <section class="bg-primary text-white rounded-lg p-6 shadow-md flex items-center justify-between flex-col md:flex-row">
      <div class="mb-4 md:mb-0">
        <h3 class="text-2xl font-semibold">Connect with Peers</h3>
        <p class="text-white text-sm">Join our research forum to network with other researchers and clinicians in Tamil Nadu.</p>
      </div>
      <a href="#" class="bg-white text-primary font-semibold px-4 py-2 rounded shadow hover:bg-gray-100">Join the Research Forum</a>
    </section>

    <!-- Upcoming Conferences Preview -->
    <section>
      <h3 class="text-xl font-semibold text-gray-800 mb-4">Upcoming Conferences</h3>
      <div class="space-y-3 text-sm">
        <div class="p-4 bg-gray-50 rounded border border-gray-200 flex items-center justify-between">
          <div>
            <p class="font-medium">TN Medical Research Summit 2025</p>
            <p class="text-gray-500">Chennai &middot; Feb 20, 2025</p>
          </div>
          <a href="#" class="text-primary hover:underline font-medium">Details &raquo;</a>
        </div>
        <div class="p-4 bg-gray-50 rounded border border-gray-200 flex items-center justify-between">
          <div>
            <p class="font-medium">International Cardiology Conference</p>
            <p class="text-gray-500">Mumbai &middot; Mar 15-17, 2025</p>
          </div>
          <a href="#" class="text-primary hover:underline font-medium">Details &raquo;</a>
        </div>
        <div class="p-4 bg-gray-50 rounded border border-gray-200 flex items-center justify-between">
          <div>
            <p class="font-medium">Asia-Pacific Medical Research Forum</p>
            <p class="text-gray-500">Singapore &middot; Apr 2025</p>
          </div>
          <a href="#" class="text-primary hover:underline font-medium">Details &raquo;</a>
        </div>
      </div>
      <div class="mt-3">
        <a href="#" class="text-primary text-sm hover:underline">View all Conferences &raquo;</a>
      </div>
    </section>
  </main>

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

<!-- Script for dynamic search functionality -->
<script src="search.js"></script>
<!-- Script to handle standalone page access -->
<script src="page-utils.js"></script>
</body>
</html>