Hugging Face's logo

Spaces:
rainbowhunt
/
TN
Running

App Files Community
rainbowhunt commited on
Commit
d4eff63
·
verified ·
1 Parent(s): 9726e09

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +463 -492
index.html CHANGED
@@ -3,76 +3,29 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>TN Medical Connect | Professional Network for Tamil Nadu Doctors</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
10
-
11
- <!-- Include the dynamic content loading script -->
12
- <script src="app.js"></script>
13
-
14
- <script>
15
- // Function to show dynamic content and hide homepage content
16
- function showDynamicContent() {
17
- const dynamicContent = document.getElementById('dynamic-content');
18
- const publicHomepage = document.querySelectorAll('#public-content > *:not(#dynamic-content)');
19
-
20
- dynamicContent.classList.remove('hidden');
21
- dynamicContent.classList.add('active');
22
-
23
- // Hide all homepage sections except the dynamic content
24
- publicHomepage.forEach(element => {
25
- element.classList.add('hidden');
26
- });
27
- }
28
-
29
- // Function to show homepage and hide dynamic content
30
- function showHomepage() {
31
- const dynamicContent = document.getElementById('dynamic-content');
32
- const publicHomepage = document.querySelectorAll('#public-content > *:not(#dynamic-content)');
33
-
34
- dynamicContent.classList.add('hidden');
35
- dynamicContent.classList.remove('active');
36
-
37
- // Show all homepage sections
38
- publicHomepage.forEach(element => {
39
- element.classList.remove('hidden');
40
- });
41
- }
42
-
43
- // Add to existing window.loadPage function
44
- window.loadPageWithToggle = function(pageName) {
45
- const result = window.loadPage(pageName);
46
- showDynamicContent();
47
- return result;
48
- }
49
-
50
- // Home link handler
51
- document.addEventListener('click', function(e) {
52
- if (e.target.classList.contains('home-link')) {
53
- e.preventDefault();
54
- showHomepage();
55
- history.pushState({}, '', window.location.pathname);
56
- }
57
- });
58
- </script>
59
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
60
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
61
  <style>
62
  :root {
63
- --primary: #1a365d;
64
- --secondary: #2d3748;
65
- --accent: #38b2ac;
66
- --gold: #d69e2e;
67
- --light: #f7fafc;
68
- --gradient-start: #1a365d;
69
- --gradient-end: #2c5282;
 
 
70
  }
71
 
72
  body {
73
- font-family: 'Poppins', sans-serif;
74
- background-color: var(--light);
75
- color: var(--secondary);
76
  line-height: 1.6;
77
  overflow-x: hidden;
78
  }
@@ -105,13 +58,13 @@
105
  background-color: var(--gold);
106
  color: white;
107
  transition: all 0.3s ease;
108
- box-shadow: 0 4px 6px rgba(214, 158, 46, 0.2);
109
  }
110
 
111
  .btn-gold:hover {
112
- background-color: #b7791f;
113
  transform: translateY(-2px);
114
- box-shadow: 0 6px 12px rgba(214, 158, 46, 0.3);
115
  }
116
 
117
  .fade-in {
@@ -125,7 +78,7 @@
125
 
126
  .section-divider {
127
  height: 1px;
128
- background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
129
  }
130
 
131
  .feature-icon {
@@ -135,38 +88,42 @@
135
  align-items: center;
136
  justify-content: center;
137
  border-radius: 16px;
138
- background: linear-gradient(135deg, rgba(56, 178, 172, 0.1) 0%, rgba(56, 178, 172, 0.2) 100%);
139
  color: var(--accent);
140
  margin-bottom: 1.5rem;
141
  font-size: 1.5rem;
142
- box-shadow: 0 4px 6px rgba(56, 178, 172, 0.1);
143
  }
144
 
145
  .verified-badge {
146
  display: inline-flex;
147
  align-items: center;
148
- background: linear-gradient(135deg, rgba(56, 178, 172, 0.1) 0%, rgba(56, 178, 172, 0.2) 100%);
149
  color: var(--accent);
150
  padding: 0.5rem 1rem;
151
  border-radius: 50px;
152
  font-size: 0.75rem;
153
  font-weight: 500;
154
- box-shadow: 0 2px 4px rgba(56, 178, 172, 0.1);
155
  }
156
 
157
  .verified-badge i {
158
  margin-right: 0.25rem;
159
  }
160
 
161
- /* Dashboard specific styles */
162
  .dashboard-sidebar {
163
- width: 250px;
164
  transition: all 0.3s;
 
 
 
165
  }
166
 
167
  .dashboard-content {
168
- margin-left: 250px;
169
  transition: all 0.3s;
 
170
  }
171
 
172
  .sidebar-collapsed .dashboard-sidebar {
@@ -181,20 +138,23 @@
181
  transition: all 0.2s;
182
  border-radius: 8px;
183
  margin: 0.25rem 0.5rem;
 
184
  }
185
 
186
  .sidebar-item:hover {
187
- background-color: rgba(56, 178, 172, 0.1);
188
  transform: translateX(4px);
 
189
  }
190
 
191
  .sidebar-item.active {
192
- background-color: rgba(56, 178, 172, 0.2);
193
  border-left: 3px solid var(--accent);
 
194
  }
195
 
196
  .email-item.unread {
197
- background-color: rgba(56, 178, 172, 0.05);
198
  border-left: 2px solid var(--accent);
199
  }
200
 
@@ -208,7 +168,7 @@
208
  }
209
 
210
  ::-webkit-scrollbar-thumb {
211
- background: rgba(56, 178, 172, 0.5);
212
  border-radius: 3px;
213
  }
214
 
@@ -229,7 +189,7 @@
229
  top: 40px;
230
  height: calc(100% - 40px);
231
  width: 1px;
232
- background-color: rgba(0,0,0,0.1);
233
  }
234
 
235
  .verification-step:before {
@@ -240,7 +200,7 @@
240
  width: 40px;
241
  height: 40px;
242
  border-radius: 50%;
243
- background-color: rgba(56, 178, 172, 0.1);
244
  color: var(--accent);
245
  font-weight: 600;
246
  margin-right: 1rem;
@@ -255,10 +215,10 @@
255
  .verification-step.active:before {
256
  background-color: var(--accent);
257
  color: white;
258
- box-shadow: 0 0 0 3px rgba(56, 178, 172, 0.3);
259
  }
260
 
261
- /* New visual enhancements */
262
  .hero-gradient {
263
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
264
  }
@@ -266,11 +226,15 @@
266
  .card-hover {
267
  transition: all 0.3s ease;
268
  transform: translateY(0);
 
 
 
269
  }
270
 
271
  .card-hover:hover {
272
  transform: translateY(-8px);
273
- box-shadow: 0 15px 30px rgba(0,0,0,0.1);
 
274
  }
275
 
276
  .glow-effect {
@@ -284,7 +248,7 @@
284
  left: 0;
285
  right: 0;
286
  bottom: 0;
287
- background: radial-gradient(circle at center, rgba(56, 178, 172, 0.2) 0%, transparent 70%);
288
  opacity: 0;
289
  transition: opacity 0.3s ease;
290
  z-index: -1;
@@ -321,7 +285,7 @@
321
  }
322
 
323
  .wave-shape .shape-fill {
324
- fill: #FFFFFF;
325
  }
326
 
327
  .floating {
@@ -335,7 +299,7 @@
335
  }
336
 
337
  .gradient-text {
338
- background: linear-gradient(90deg, var(--accent), var(--gold));
339
  -webkit-background-clip: text;
340
  background-clip: text;
341
  color: transparent;
@@ -345,7 +309,7 @@
345
  position: absolute;
346
  width: 300px;
347
  height: 300px;
348
- background: linear-gradient(135deg, rgba(56, 178, 172, 0.1) 0%, rgba(214, 158, 46, 0.1) 100%);
349
  border-radius: 50%;
350
  filter: blur(60px);
351
  z-index: -1;
@@ -361,6 +325,48 @@
361
  left: -100px;
362
  }
363
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
364
  /* Dynamic content styles */
365
  #dynamic-content.active {
366
  display: block;
@@ -388,6 +394,7 @@
388
 
389
  .nav-link {
390
  position: relative;
 
391
  }
392
 
393
  .nav-link:after {
@@ -404,33 +411,100 @@
404
  .nav-link:hover:after {
405
  width: 100%;
406
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
407
  </style>
408
  </head>
409
  <body class="min-h-screen flex flex-col">
 
 
 
410
  <!-- Public Navigation -->
411
- <header class="bg-white shadow-sm sticky top-0 z-50" id="public-header">
412
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
413
  <div class="flex justify-between h-20 items-center">
414
  <div class="flex items-center">
415
  <div class="flex-shrink-0 flex items-center">
416
- <i class="fas fa-heartbeat text-primary text-2xl mr-2"></i>
417
- <a href="#" class="home-link text-xl font-bold text-primary">TN Medical Connect</a>
418
  </div>
419
  </div>
420
  <div class="hidden md:flex items-center space-x-6">
421
- <a href="#about" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">About</a>
422
- <a href="#features" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Features</a>
423
- <a href="#contact" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Contact</a>
424
- <a href="#" onclick="return loadPageWithToggle('PodcastPage')" data-page="PodcastPage" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Podcasts</a>
425
- <a href="#" onclick="return loadPageWithToggle('ResearchPage')" data-page="ResearchPage" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Research</a>
426
- <a href="#" onclick="return loadPageWithToggle('AIPage')" data-page="AIPage" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">AI</a>
427
- <a href="#" onclick="return loadPageWithToggle('MedPage')" data-page="MedPage" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Medical</a>
428
- <a href="#" onclick="return loadPageWithToggle('PhDPage')" data-page="PhDPage" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">PhD</a>
429
- <a href="#" class="nav-link text-gray-600 hover:text-accent transition-colors font-medium">Login</a>
430
  <a href="#register" class="btn-gold px-5 py-2.5 rounded-lg font-medium transition-all transform hover:scale-105">Register</a>
431
  </div>
432
  <div class="md:hidden flex items-center">
433
- <button id="menu-btn" class="text-gray-600 focus:outline-none">
434
  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
435
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
436
  </svg>
@@ -439,40 +513,40 @@
439
  </div>
440
  </div>
441
  <!-- Mobile menu -->
442
- <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
443
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
444
- <a href="#about" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-50">About</a>
445
- <a href="#features" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-50">Features</a>
446
- <a href="#contact" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-50">Contact</a>
447
- <a href="#" onclick="return loadPageWithToggle('PodcastPage')" data-page="PodcastPage" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-50">Podcasts</a>
448
- <a href="#" onclick="return loadPageWithToggle('ResearchPage')" data-page="ResearchPage" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-50">Research</a>
449
- <a href="#" onclick="return loadPageWithToggle('AIPage')" data-page="AIPage" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-50">AI</a>
450
- <a href="#" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:bg-gray-50">Doctor Login</a>
451
  <a href="#register" class="block px-3 py-2 rounded-md text-base font-medium btn-gold text-white">Register</a>
452
  </div>
453
  </div>
454
  </header>
455
 
456
  <!-- Dashboard Navigation (Hidden by default) -->
457
- <div id="dashboard-header" class="hidden bg-white shadow-sm sticky top-0 z-40">
458
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
459
  <div class="flex justify-between h-16 items-center">
460
  <div class="flex items-center">
461
- <button id="sidebar-toggle" class="text-gray-600 mr-4 focus:outline-none">
462
  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
463
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
464
  </svg>
465
  </button>
466
  <div class="flex-shrink-0 flex items-center">
467
- <span class="text-lg font-bold text-primary">Doctor Dashboard</span>
468
  </div>
469
  </div>
470
  <div class="flex items-center space-x-4">
471
- <button class="text-gray-600 hover:text-accent relative">
472
  <i class="fas fa-envelope text-xl"></i>
473
  <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
474
  </button>
475
- <button class="text-gray-600 hover:text-accent relative">
476
  <i class="fas fa-bell text-xl"></i>
477
  <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">2</span>
478
  </button>
@@ -481,13 +555,13 @@
481
  <div class="h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center">
482
  <i class="fas fa-user text-gray-600"></i>
483
  </div>
484
- <span class="text-gray-700 font-medium">Dr. Kumar</span>
485
- <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
486
  </button>
487
- <div id="profile-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
488
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">My Profile</a>
489
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
490
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 border-t border-gray-100">Sign Out</a>
491
  </div>
492
  </div>
493
  </div>
@@ -496,37 +570,37 @@
496
  </div>
497
 
498
  <!-- Dashboard Sidebar (Hidden by default) -->
499
- <div id="dashboard-sidebar" class="hidden fixed top-0 left-0 h-full bg-white shadow-md dashboard-sidebar pt-16 z-30">
500
  <div class="h-full overflow-y-auto py-4">
501
  <nav>
502
  <div class="px-4 space-y-1">
503
- <a href="#" class="sidebar-item active flex items-center px-4 py-3 text-gray-700">
504
  <i class="fas fa-home text-lg w-8"></i>
505
  <span class="ml-3">Dashboard</span>
506
  </a>
507
- <a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-700">
508
  <i class="fas fa-envelope text-lg w-8"></i>
509
  <span class="ml-3">Email</span>
510
  <span class="ml-auto bg-accent text-white text-xs px-2 py-1 rounded-full">3</span>
511
  </a>
512
- <a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-700">
513
  <i class="fas fa-users text-lg w-8"></i>
514
  <span class="ml-3">Networking</span>
515
  </a>
516
- <a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-700">
517
  <i class="fas fa-book-open text-lg w-8"></i>
518
  <span class="ml-3">Research & Grants</span>
519
  </a>
520
- <a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-700">
521
  <i class="fas fa-briefcase text-lg w-8"></i>
522
  <span class="ml-3">Careers</span>
523
  </a>
524
- <a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-700">
525
  <i class="fas fa-podcast text-lg w-8"></i>
526
  <span class="ml-3">Podcasts/Webinars</span>
527
  </a>
528
- <div class="border-t border-gray-200 mt-4 pt-4">
529
- <a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-700">
530
  <i class="fas fa-cog text-lg w-8"></i>
531
  <span class="ml-3">Settings</span>
532
  </a>
@@ -540,403 +614,252 @@
540
  <div id="dashboard-content" class="hidden dashboard-content pt-16">
541
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
542
  <!-- Breadcrumbs -->
543
- <div class="flex items-center text-sm text-gray-600 mb-6">
544
  <a href="#" class="hover:text-accent">Dashboard</a>
545
  <span class="mx-2">/</span>
546
  <span class="text-gray-500">Home</span>
547
  </div>
548
 
549
  <!-- Welcome Banner -->
550
- <div class="bg-white rounded-xl shadow-sm p-6 mb-8 border border-gray-100 card-hover">
551
  <div class="flex flex-col md:flex-row md:items-center md:justify-between">
552
  <div>
553
- <h2 class="text-2xl font-bold text-primary mb-2">Welcome, Dr. Kumar</h2>
554
- <p class="text-gray-600">You have 3 unread messages, 2 upcoming webinars, and 5 new research opportunities.</p>
555
  </div>
556
  <div class="mt-4 md:mt-0">
557
  <div class="flex items-center">
558
- <div class="w-48 bg-gray-200 rounded-full h-2.5">
559
- <div class="bg-accent h-2.5 rounded-full" style="width: 75%"></div>
560
  </div>
561
- <span class="ml-3 text-sm text-gray-600">75% profile complete</span>
562
  </div>
563
  <button class="mt-2 text-sm text-accent hover:underline">Complete your profile</button>
564
  </div>
565
  </div>
566
  </div>
567
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
568
  <!-- Quick Stats -->
569
  <div class="grid md:grid-cols-3 gap-6 mb-8">
570
- <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 card-hover">
571
  <div class="flex items-center">
572
- <div class="p-3 rounded-full bg-blue-50 text-blue-600 mr-4">
573
  <i class="fas fa-envelope text-xl"></i>
574
  </div>
575
  <div>
576
- <p class="text-sm text-gray-500">Unread Messages</p>
577
- <p class="text-2xl font-bold text-primary">3</p>
578
  </div>
579
  </div>
580
  </div>
581
- <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 card-hover">
582
  <div class="flex items-center">
583
- <div class="p-3 rounded-full bg-green-50 text-green-600 mr-4">
584
  <i class="fas fa-calendar-alt text-xl"></i>
585
  </div>
586
  <div>
587
- <p class="text-sm text-gray-500">Upcoming Events</p>
588
- <p class="text-2xl font-bold text-primary">2</p>
589
  </div>
590
  </div>
591
  </div>
592
- <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 card-hover">
593
  <div class="flex items-center">
594
- <div class="p-3 rounded-full bg-purple-50 text-purple-600 mr-4">
595
  <i class="fas fa-book-open text-xl"></i>
596
  </div>
597
  <div>
598
- <p class="text-sm text-gray-500">New Research</p>
599
- <p class="text-2xl font-bold text-primary">5</p>
600
  </div>
601
  </div>
602
  </div>
603
  </div>
604
 
605
- <!-- Quick Actions -->
606
- <div class="mb-8">
607
- <h3 class="text-lg font-semibold text-primary mb-4">Quick Actions</h3>
608
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
609
- <a href="#" class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center card-hover">
610
- <div class="text-accent mb-2">
611
- <i class="fas fa-file-alt text-2xl"></i>
612
- </div>
613
- <span class="text-sm font-medium">Apply for Grant</span>
614
- </a>
615
- <a href="#" class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center card-hover">
616
- <div class="text-accent mb-2">
617
- <i class="fas fa-comments text-2xl"></i>
618
- </div>
619
- <span class="text-sm font-medium">Join Discussion</span>
620
- </a>
621
- <a href="#" class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center card-hover">
622
- <div class="text-accent mb-2">
623
- <i class="fas fa-question-circle text-2xl"></i>
624
- </div>
625
- <span class="text-sm font-medium">Post Question</span>
626
- </a>
627
- <a href="#" class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 hover:border-accent transition-colors text-center card-hover">
628
- <div class="text-accent mb-2">
629
- <i class="fas fa-podcast text-2xl"></i>
630
- </div>
631
- <span class="text-sm font-medium">Start Podcast</span>
632
- </a>
633
- </div>
634
- </div>
635
-
636
  <!-- Recent Activity -->
637
- <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 card-hover">
638
  <div class="flex items-center justify-between mb-6">
639
- <h3 class="text-lg font-semibold text-primary">Recent Activity</h3>
640
  <a href="#" class="text-sm text-accent hover:underline">View All</a>
641
  </div>
642
 
643
  <div class="space-y-4">
644
  <div class="flex items-start">
645
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 mr-4">
646
  <i class="fas fa-envelope"></i>
647
  </div>
648
  <div class="flex-1 min-w-0">
649
- <p class="text-sm font-medium text-gray-900">New message from Dr. Patel</p>
650
- <p class="text-sm text-gray-500">Regarding the upcoming cardiology conference...</p>
651
- <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
652
  </div>
653
  <div class="ml-4 flex-shrink-0">
654
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
655
  Unread
656
  </span>
657
  </div>
658
  </div>
659
 
660
  <div class="flex items-start">
661
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 mr-4">
662
  <i class="fas fa-calendar-alt"></i>
663
  </div>
664
  <div class="flex-1 min-w-0">
665
- <p class="text-sm font-medium text-gray-900">Webinar reminder: Advances in Neurology</p>
666
- <p class="text-sm text-gray-500">Tomorrow at 3:00 PM IST</p>
667
- <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
668
  </div>
669
  </div>
670
 
671
  <div class="flex items-start">
672
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 mr-4">
673
  <i class="fas fa-book-open"></i>
674
  </div>
675
  <div class="flex-1 min-w-0">
676
- <p class="text-sm font-medium text-gray-900">New research published in your field</p>
677
- <p class="text-sm text-gray-500">"Impact of new surgical techniques on patient recovery"</p>
678
- <p class="text-xs text-gray-400 mt-1">1 day ago</p>
679
  </div>
680
  </div>
681
  </div>
682
  </div>
683
- </div>
684
- </div>
685
-
686
- <!-- Email Interface (Hidden by default) -->
687
- <div id="email-interface" class="hidden dashboard-content pt-16">
688
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
689
- <!-- Breadcrumbs -->
690
- <div class="flex items-center text-sm text-gray-600 mb-6">
691
- <a href="#" class="hover:text-accent">Dashboard</a>
692
- <span class="mx-2">/</span>
693
- <a href="#" class="hover:text-accent">Email</a>
694
- <span class="mx-2">/</span>
695
- <span class="text-gray-500">Inbox</span>
696
- </div>
697
 
698
- <div class="flex flex-col md:flex-row">
699
- <!-- Email Folders -->
700
- <div class="w-full md:w-64 flex-shrink-0 mb-6 md:mb-0 md:mr-6">
701
- <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
702
- <div class="p-4 border-b border-gray-100">
703
- <button class="w-full btn-gold py-2 rounded-lg text-sm font-medium">
704
- <i class="fas fa-plus mr-2"></i> Compose
705
- </button>
706
- </div>
707
- <div class="divide-y divide-gray-100">
708
- <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-accent bg-blue-50">
709
- <i class="fas fa-inbox mr-3"></i>
710
- <span>Inbox</span>
711
- <span class="ml-auto bg-accent text-white text-xs px-2 py-1 rounded-full">3</span>
712
- </a>
713
- <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50">
714
- <i class="fas fa-paper-plane mr-3"></i>
715
- <span>Sent</span>
716
- </a>
717
- <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50">
718
- <i class="fas fa-trash mr-3"></i>
719
- <span>Trash</span>
720
- </a>
721
- <div class="p-4">
722
- <p class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Labels</p>
723
- <div class="space-y-1">
724
- <a href="#" class="flex items-center text-sm text-gray-700 hover:text-accent">
725
- <span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span>
726
- <span>Important</span>
727
- </a>
728
- <a href="#" class="flex items-center text-sm text-gray-700 hover:text-accent">
729
- <span class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></span>
730
- <span>Personal</span>
731
- </a>
732
- <a href="#" class="flex items-center text-sm text-gray-700 hover:text-accent">
733
- <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
734
- <span>Work</span>
735
- </a>
736
- </div>
737
- </div>
738
- </div>
739
- </div>
740
  </div>
741
 
742
- <!-- Email List -->
743
- <div class="flex-1 bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
744
- <div class="p-4 border-b border-gray-100 flex items-center justify-between">
745
- <div class="flex items-center">
746
- <input type="checkbox" class="h-4 w-4 text-accent rounded border-gray-300">
747
- <button class="ml-4 text-gray-500 hover:text-gray-700">
748
- <i class="fas fa-redo"></i>
749
- </button>
750
- <button class="ml-2 text-gray-500 hover:text-gray-700">
751
- <i class="fas fa-trash"></i>
752
- </button>
753
  </div>
754
- <div class="flex items-center">
755
- <span class="text-sm text-gray-500 mr-4">1-3 of 15</span>
756
- <button class="text-gray-500 hover:text-gray-700">
757
- <i class="fas fa-chevron-left"></i>
758
- </button>
759
- <button class="ml-2 text-gray-500 hover:text-gray-700">
760
- <i class="fas fa-chevron-right"></i>
761
- </button>
762
  </div>
763
  </div>
764
 
765
- <div class="divide-y divide-gray-100">
766
- <!-- Email Item 1 -->
767
- <div class="email-item unread flex items-start px-4 py-3 hover:bg-gray-50 cursor-pointer">
768
- <div class="flex items-center mr-4">
769
- <input type="checkbox" class="h-4 w-4 text-accent rounded border-gray-300">
770
- <i class="fas fa-star ml-3 text-gray-300 hover:text-yellow-400"></i>
771
- </div>
772
- <div class="flex-1 min-w-0">
773
- <div class="flex items-center justify-between">
774
- <p class="text-sm font-medium text-gray-900 truncate">Dr. Rajesh Patel</p>
775
- <p class="text-xs text-gray-500 ml-2 whitespace-nowrap">10:30 AM</p>
776
- </div>
777
- <p class="text-sm font-medium text-gray-900">Cardiology Conference Invitation</p>
778
- <p class="text-sm text-gray-500 truncate">Dear Dr. Kumar, I would like to invite you to speak at the upcoming Tamil Nadu Cardiology Conference...</p>
779
- </div>
780
- </div>
781
-
782
- <!-- Email Item 2 -->
783
- <div class="email-item unread flex items-start px-4 py-3 hover:bg-gray-50 cursor-pointer">
784
- <div class="flex items-center mr-4">
785
- <input type="checkbox" class="h-4 w-4 text-accent rounded border-gray-300">
786
- <i class="fas fa-star ml-3 text-gray-300 hover:text-yellow-400"></i>
787
- </div>
788
- <div class="flex-1 min-w-0">
789
- <div class="flex items-center justify-between">
790
- <p class="text-sm font-medium text-gray-900 truncate">TN Medical Research Foundation</p>
791
- <p class="text-xs text-gray-500 ml-2 whitespace-nowrap">Yesterday</p>
792
- </div>
793
- <p class="text-sm font-medium text-gray-900">Your Grant Application Status</p>
794
- <p class="text-sm text-gray-500 truncate">We are pleased to inform you that your grant application has been approved for the next stage of review...</p>
795
- </div>
796
  </div>
797
-
798
- <!-- Email Item 3 -->
799
- <div class="email-item unread flex items-start px-4 py-3 hover:bg-gray-50 cursor-pointer">
800
- <div class="flex items-center mr-4">
801
- <input type="checkbox" class="h-4 w-4 text-accent rounded border-gray-300">
802
- <i class="fas fa-star ml-3 text-gray-300 hover:text-yellow-400"></i>
803
- </div>
804
- <div class="flex-1 min-w-0">
805
- <div class="flex items-center justify-between">
806
- <p class="text-sm font-medium text-gray-900 truncate">Dr. Priya Sharma</p>
807
- <p class="text-xs text-gray-500 ml-2 whitespace-nowrap">2 days ago</p>
808
- </div>
809
- <p class="text-sm font-medium text-gray-900">Patient Case Discussion</p>
810
- <p class="text-sm text-gray-500 truncate">Hello Dr. Kumar, I have a complex case I'd like to discuss with you regarding a 45-year-old male with...</p>
811
- </div>
812
- </div>
813
-
814
- <!-- Email Item 4 -->
815
- <div class="email-item flex items-start px-4 py-3 hover:bg-gray-50 cursor-pointer">
816
- <div class="flex items-center mr-4">
817
- <input type="checkbox" class="h-4 w-4 text-accent rounded border-gray-300">
818
- <i class="fas fa-star ml-3 text-gray-300 hover:text-yellow-400"></i>
819
- </div>
820
- <div class="flex-1 min-w-0">
821
- <div class="flex items-center justify-between">
822
- <p class="text-sm font-medium text-gray-900 truncate">TN Medical Connect</p>
823
- <p class="text-xs text-gray-500 ml-2 whitespace-nowrap">3 days ago</p>
824
- </div>
825
- <p class="text-sm font-medium text-gray-900">Monthly Newsletter - June 2023</p>
826
- <p class="text-sm text-gray-500 truncate">In this month's newsletter: New features on TN Medical Connect, upcoming webinars, and research opportunities...</p>
827
  </div>
828
  </div>
829
  </div>
830
- </div>
831
- </div>
832
- </div>
833
- </div>
834
-
835
- <!-- Verification Steps (Hidden by default) -->
836
- <div id="verification-steps" class="hidden max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
837
- <div class="text-center mb-12">
838
- <h2 class="text-3xl font-bold text-primary mb-4">Doctor Verification</h2>
839
- <p class="text-gray-600">Complete these steps to verify your medical credentials and access all platform features.</p>
840
- </div>
841
-
842
- <div class="bg-white rounded-xl shadow-sm p-8 border border-gray-100">
843
- <div class="verification-steps space-y-8">
844
- <!-- Step 1 -->
845
- <div class="verification-step completed flex items-start">
846
- <div class="flex-1">
847
- <h3 class="text-lg font-semibold text-primary mb-2">TNMC License Verification</h3>
848
- <p class="text-gray-600 mb-4">We've successfully verified your Tamil Nadu Medical Council registration number.</p>
849
- <div class="bg-gray-50 p-4 rounded-md">
850
- <div class="grid grid-cols-2 gap-4">
851
- <div>
852
- <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">TNMC Number</p>
853
- <p class="font-medium">TNMC123456</p>
854
- </div>
855
- <div>
856
- <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Status</p>
857
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
858
- Verified
859
- </span>
860
- </div>
861
- </div>
862
  </div>
863
- </div>
864
- </div>
865
-
866
- <!-- Step 2 -->
867
- <div class="verification-step active flex items-start">
868
- <div class="flex-1">
869
- <h3 class="text-lg font-semibold text-primary mb-2">Professional Information</h3>
870
- <p class="text-gray-600 mb-4">Please provide your professional details to complete your profile.</p>
871
-
872
- <form class="space-y-4">
873
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
874
- <div>
875
- <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
876
- <input type="text" id="first-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" value="Rajesh">
877
- </div>
878
- <div>
879
- <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
880
- <input type="text" id="last-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" value="Kumar">
881
- </div>
882
- </div>
883
-
884
- <div>
885
- <label for="specialty" class="block text-sm font-medium text-gray-700 mb-1">Primary Specialty</label>
886
- <select id="specialty" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300">
887
- <option value="">Select your specialty</option>
888
- <option value="cardiology" selected>Cardiology</option>
889
- <option value="neurology">Neurology</option>
890
- <option value="pediatrics">Pediatrics</option>
891
- <option value="surgery">General Surgery</option>
892
- <option value="orthopedics">Orthopedics</option>
893
- </select>
894
- </div>
895
-
896
- <div>
897
- <label for="hospital" class="block text-sm font-medium text-gray-700 mb-1">Hospital Affiliation</label>
898
- <input type="text" id="hospital" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Enter hospital or clinic name">
899
- </div>
900
-
901
- <div>
902
- <label for="years" class="block text-sm font-medium text-gray-700 mb-1">Years of Practice</label>
903
- <input type="number" id="years" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Enter number of years">
904
- </div>
905
-
906
- <div class="pt-4">
907
- <button type="submit" class="btn-gold px-6 py-3 rounded-lg font-medium shadow-sm hover:shadow-md transition-all">Save & Continue</button>
908
  </div>
909
- </form>
910
- </div>
911
- </div>
912
-
913
- <!-- Step 3 -->
914
- <div class="verification-step flex items-start">
915
- <div class="flex-1">
916
- <h3 class="text-lg font-semibold text-primary mb-2">Account Setup</h3>
917
- <p class="text-gray-600">Create your password and review terms to complete registration.</p>
918
  </div>
919
  </div>
920
  </div>
921
  </div>
922
  </div>
923
 
924
- <!-- Registration Success (Hidden by default) -->
925
- <div id="registration-success" class="hidden max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
926
- <div class="bg-white rounded-xl shadow-sm p-12 border border-gray-100">
927
- <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
928
- <i class="fas fa-check text-green-600 text-3xl"></i>
929
- </div>
930
- <h2 class="text-2xl font-bold text-primary mb-4">Registration Complete</h2>
931
- <p class="text-gray-600 mb-6">Your account has been successfully created and verified.</p>
932
- <p class="text-gray-700 font-medium mb-8">
933
- Your official TN Medical Connect email address is:<br>
934
- <span class="text-accent text-xl">[email protected]</span>
935
- </p>
936
- <button id="go-to-dashboard" class="btn-gold px-8 py-3 rounded-lg font-medium shadow-sm hover:shadow-md transition-all">
937
- Go to Dashboard
938
- </button>
939
- </div>
940
  </div>
941
 
942
  <!-- Public Content (Visible by default) -->
@@ -954,16 +877,16 @@
954
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
955
  <div class="md:flex items-center">
956
  <div class="md:w-1/2 mb-12 md:mb-0">
957
- <h1 class="text-4xl md:text-5xl font-bold text-primary mb-6 leading-tight">
958
- Connecting <span class="gradient-text">Tamil Nadu Doctors</span> With Global Opportunities
959
  </h1>
960
- <p class="text-lg text-gray-600 mb-8 max-w-lg">A verified, secure space for medical professionals to collaborate, research, and grow their careers.</p>
961
  <div class="flex space-x-4">
962
  <a href="#register" class="btn-gold px-6 py-3 rounded-lg font-medium shadow-lg hover:shadow-xl transition-all transform hover:scale-105 pulse-animation">
963
- Register Now <i class="fas fa-arrow-right ml-2"></i>
964
  </a>
965
- <a href="#features" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium hover:shadow-md">
966
- Learn More <i class="fas fa-book-open ml-2"></i>
967
  </a>
968
  </div>
969
  </div>
@@ -989,48 +912,48 @@
989
  <div class="section-divider"></div>
990
 
991
  <!-- Features Section -->
992
- <section id="features" class="bg-white py-16 fade-in">
993
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
994
  <div class="text-center mb-16">
995
- <h2 class="text-3xl font-bold text-primary mb-4">Professional Features for Medical Excellence</h2>
996
- <p class="text-gray-600 max-w-2xl mx-auto">Designed to support Tamil Nadu doctors in their practice and career advancement</p>
997
  </div>
998
 
999
  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
1000
  <!-- Feature 1 -->
1001
- <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
1002
  <div class="feature-icon">
1003
- <i class="fas fa-envelope"></i>
1004
  </div>
1005
- <h3 class="text-xl font-semibold text-primary mb-3">Verified Doctor's Email</h3>
1006
- <p class="text-gray-600">Professional email address with TNMC verification to establish credibility with colleagues and institutions.</p>
1007
  </div>
1008
 
1009
  <!-- Feature 2 -->
1010
- <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
1011
  <div class="feature-icon">
1012
- <i class="fas fa-users"></i>
1013
  </div>
1014
- <h3 class="text-xl font-semibold text-primary mb-3">Professional Network</h3>
1015
- <p class="text-gray-600">Connect with specialists across Tamil Nadu through secure discussion forums and direct messaging.</p>
1016
  </div>
1017
 
1018
  <!-- Feature 3 -->
1019
- <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
1020
  <div class="feature-icon">
1021
- <i class="fas fa-book-open"></i>
1022
  </div>
1023
- <h3 class="text-xl font-semibold text-primary mb-3">Research Resources</h3>
1024
- <p class="text-gray-600">Access to international journals, research papers, and grant opportunities curated for your specialty.</p>
1025
  </div>
1026
 
1027
  <!-- Feature 4 -->
1028
- <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
1029
  <div class="feature-icon">
1030
- <i class="fas fa-chart-line"></i>
1031
  </div>
1032
- <h3 class="text-xl font-semibold text-primary mb-3">Career Advancement</h3>
1033
- <p class="text-gray-600">Exclusive job listings, webinar invitations, and collaboration projects to grow your professional impact.</p>
1034
  </div>
1035
  </div>
1036
  </div>
@@ -1039,13 +962,13 @@
1039
  <div class="section-divider"></div>
1040
 
1041
  <!-- About Section -->
1042
- <section id="about" class="bg-gray-50 py-16 fade-in relative overflow-hidden">
1043
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
1044
  <div class="md:flex items-center">
1045
  <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
1046
- <h2 class="text-3xl font-bold text-primary mb-6">About TN Medical Connect</h2>
1047
- <p class="text-gray-600 mb-6">Founded in 2023, TN Medical Connect is the premier professional network for verified medical practitioners across Tamil Nadu. Our mission is to bridge the gap between local expertise and global medical communities.</p>
1048
- <p class="text-gray-600 mb-8">We provide a secure, verified platform where doctors can collaborate, access resources, and advance their careers while maintaining the highest standards of professionalism and data security.</p>
1049
  <div class="flex items-center">
1050
  <span class="verified-badge">
1051
  <i class="fas fa-shield-alt"></i>
@@ -1069,59 +992,59 @@
1069
  <div class="section-divider"></div>
1070
 
1071
  <!-- Registration Section -->
1072
- <section id="register" class="bg-white py-16 fade-in">
1073
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
1074
- <div class="bg-gradient-to-r from-primary to-secondary rounded-xl shadow-xl overflow-hidden">
1075
  <div class="md:flex">
1076
  <div class="md:w-1/2 p-8 md:p-12 text-white relative overflow-hidden">
1077
  <div class="absolute -top-20 -right-20 w-40 h-40 bg-white rounded-full opacity-10"></div>
1078
  <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-accent rounded-full opacity-10"></div>
1079
  <div class="relative z-10">
1080
- <h2 class="text-2xl font-bold mb-4">Get Your Verified Doctor ID</h2>
1081
- <p class="text-gray-300 mb-6">Join thousands of Tamil Nadu medical professionals who trust our platform for their professional growth.</p>
1082
  <ul class="space-y-3 mb-8">
1083
  <li class="flex items-start">
1084
  <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
1085
- <span>TNMC-verified professional identity</span>
1086
  </li>
1087
  <li class="flex items-start">
1088
  <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
1089
- <span>Secure collaboration environment</span>
1090
  </li>
1091
  <li class="flex items-start">
1092
  <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
1093
- <span>Access to exclusive resources</span>
1094
  </li>
1095
  </ul>
1096
  <div class="flex items-center">
1097
  <span class="verified-badge bg-white/10">
1098
  <i class="fas fa-lock"></i>
1099
- <span>256-bit encrypted</span>
1100
  </span>
1101
  </div>
1102
  </div>
1103
  </div>
1104
- <div class="md:w-1/2 p-8 md:p-12 bg-white relative">
1105
  <div class="absolute -top-6 -left-6 w-16 h-16 bg-accent rounded-full opacity-10"></div>
1106
  <div class="absolute -bottom-6 -right-6 w-16 h-16 bg-gold rounded-full opacity-10"></div>
1107
  <div class="relative z-10">
1108
- <h3 class="text-xl font-semibold text-primary mb-6">Create Your Account</h3>
1109
  <form id="registration-form">
1110
  <div class="mb-4">
1111
- <label for="full-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
1112
- <input type="text" id="full-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Dr. Firstname Lastname">
1113
  </div>
1114
  <div class="mb-4">
1115
- <label for="tnmc-id" class="block text-sm font-medium text-gray-700 mb-1">TNMC Registration Number</label>
1116
- <input type="text" id="tnmc-id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="TNMC123456">
1117
  </div>
1118
  <div class="mb-4">
1119
- <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
1120
- <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="[email protected]">
1121
  </div>
1122
  <div class="mb-6">
1123
- <label for="specialty" class="block text-sm font-medium text-gray-700 mb-1">Primary Specialty</label>
1124
- <select id="specialty" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300">
1125
  <option value="">Select your specialty</option>
1126
  <option value="cardiology">Cardiology</option>
1127
  <option value="neurology">Neurology</option>
@@ -1144,38 +1067,38 @@
1144
  <div class="section-divider"></div>
1145
 
1146
  <!-- Contact Section -->
1147
- <section id="contact" class="bg-gray-50 py-16 fade-in">
1148
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1149
  <div class="text-center mb-12">
1150
- <h2 class="text-3xl font-bold text-primary mb-4">Contact Us</h2>
1151
- <p class="text-gray-600 max-w-2xl mx-auto">Have questions about our platform? Our support team is here to help.</p>
1152
  </div>
1153
 
1154
  <div class="grid md:grid-cols-3 gap-8">
1155
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-lg transition-all card-hover">
1156
  <div class="text-accent mb-4">
1157
  <i class="fas fa-envelope text-2xl"></i>
1158
  </div>
1159
- <h3 class="text-lg font-semibold text-primary mb-2">Email Support</h3>
1160
- <p class="text-gray-600 mb-2">For general inquiries and platform information</p>
1161
  <a href="mailto:[email protected]" class="text-accent hover:underline">[email protected]</a>
1162
  </div>
1163
 
1164
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-lg transition-all card-hover">
1165
  <div class="text-accent mb-4">
1166
  <i class="fas fa-phone-alt text-2xl"></i>
1167
  </div>
1168
- <h3 class="text-lg font-semibold text-primary mb-2">Phone Support</h3>
1169
- <p class="text-gray-600 mb-2">Available Monday-Friday, 9AM-5PM IST</p>
1170
  <a href="tel:+914412345678" class="text-accent hover:underline">+91 44 1234 5678</a>
1171
  </div>
1172
 
1173
- <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-lg transition-all card-hover">
1174
  <div class="text-accent mb-4">
1175
  <i class="fas fa-question-circle text-2xl"></i>
1176
  </div>
1177
- <h3 class="text-lg font-semibold text-primary mb-2">FAQ & Help Center</h3>
1178
- <p class="text-gray-600 mb-2">Find answers to common questions</p>
1179
  <a href="#" class="text-accent hover:underline">Visit Help Center</a>
1180
  </div>
1181
  </div>
@@ -1192,10 +1115,10 @@
1192
  <div class="grid md:grid-cols-4 gap-8">
1193
  <div class="md:col-span-2">
1194
  <div class="flex items-center mb-4">
1195
- <i class="fas fa-heartbeat text-2xl mr-2"></i>
1196
  <span class="text-xl font-bold">TN Medical Connect</span>
1197
  </div>
1198
- <p class="text-gray-300 mb-4">The professional network for verified Tamil Nadu medical practitioners.</p>
1199
  <div class="flex space-x-4">
1200
  <a href="#" class="text-gray-300 hover:text-white transition-colors">
1201
  <i class="fab fa-twitter"></i>
@@ -1226,7 +1149,7 @@
1226
  </ul>
1227
  </div>
1228
  </div>
1229
- <div class="mt-12 pt-8 border-t border-gray-800 text-sm text-gray-400">
1230
  <p>© 2023 TN Medical Connect. All rights reserved.</p>
1231
  <p class="mt-2">TNMC verification does not imply endorsement of individual practitioners by the Tamil Nadu Medical Council.</p>
1232
  </div>
@@ -1389,5 +1312,53 @@
1389
  gsap.from(".card-hover", {
1390
  scrollTrigger: {
1391
  trigger: "#features",
1392
- start: "top
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1393
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TN Medical Connect | AI-Powered Medical Network</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
12
  <style>
13
  :root {
14
+ --primary: #0f172a;
15
+ --secondary: #1e293b;
16
+ --accent: #38bdf8;
17
+ --gold: #f59e0b;
18
+ --light: #f8fafc;
19
+ --dark: #020617;
20
+ --gradient-start: #0f172a;
21
+ --gradient-end: #1e40af;
22
+ --neon: #00f5d4;
23
  }
24
 
25
  body {
26
+ font-family: 'Space Grotesk', sans-serif;
27
+ background-color: var(--dark);
28
+ color: var(--light);
29
  line-height: 1.6;
30
  overflow-x: hidden;
31
  }
 
58
  background-color: var(--gold);
59
  color: white;
60
  transition: all 0.3s ease;
61
+ box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2);
62
  }
63
 
64
  .btn-gold:hover {
65
+ background-color: #d97706;
66
  transform: translateY(-2px);
67
+ box-shadow: 0 6px 12px rgba(245, 158, 11, 0.3);
68
  }
69
 
70
  .fade-in {
 
78
 
79
  .section-divider {
80
  height: 1px;
81
+ background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.2), transparent);
82
  }
83
 
84
  .feature-icon {
 
88
  align-items: center;
89
  justify-content: center;
90
  border-radius: 16px;
91
+ background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(56, 189, 248, 0.2) 100%);
92
  color: var(--accent);
93
  margin-bottom: 1.5rem;
94
  font-size: 1.5rem;
95
+ box-shadow: 0 4px 6px rgba(56, 189, 248, 0.1);
96
  }
97
 
98
  .verified-badge {
99
  display: inline-flex;
100
  align-items: center;
101
+ background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(56, 189, 248, 0.2) 100%);
102
  color: var(--accent);
103
  padding: 0.5rem 1rem;
104
  border-radius: 50px;
105
  font-size: 0.75rem;
106
  font-weight: 500;
107
+ box-shadow: 0 2px 4px rgba(56, 189, 248, 0.1);
108
  }
109
 
110
  .verified-badge i {
111
  margin-right: 0.25rem;
112
  }
113
 
114
+ /* Futuristic Dashboard styles */
115
  .dashboard-sidebar {
116
+ width: 280px;
117
  transition: all 0.3s;
118
+ background: rgba(15, 23, 42, 0.8);
119
+ backdrop-filter: blur(10px);
120
+ border-right: 1px solid rgba(56, 189, 248, 0.1);
121
  }
122
 
123
  .dashboard-content {
124
+ margin-left: 280px;
125
  transition: all 0.3s;
126
+ background: var(--dark);
127
  }
128
 
129
  .sidebar-collapsed .dashboard-sidebar {
 
138
  transition: all 0.2s;
139
  border-radius: 8px;
140
  margin: 0.25rem 0.5rem;
141
+ color: rgba(248, 250, 252, 0.8);
142
  }
143
 
144
  .sidebar-item:hover {
145
+ background: linear-gradient(90deg, rgba(56, 189, 248, 0.2), transparent);
146
  transform: translateX(4px);
147
+ color: var(--accent);
148
  }
149
 
150
  .sidebar-item.active {
151
+ background: linear-gradient(90deg, rgba(56, 189, 248, 0.3), transparent);
152
  border-left: 3px solid var(--accent);
153
+ color: var(--accent);
154
  }
155
 
156
  .email-item.unread {
157
+ background-color: rgba(56, 189, 248, 0.05);
158
  border-left: 2px solid var(--accent);
159
  }
160
 
 
168
  }
169
 
170
  ::-webkit-scrollbar-thumb {
171
+ background: rgba(56, 189, 248, 0.5);
172
  border-radius: 3px;
173
  }
174
 
 
189
  top: 40px;
190
  height: calc(100% - 40px);
191
  width: 1px;
192
+ background-color: rgba(56, 189, 248, 0.2);
193
  }
194
 
195
  .verification-step:before {
 
200
  width: 40px;
201
  height: 40px;
202
  border-radius: 50%;
203
+ background-color: rgba(56, 189, 248, 0.1);
204
  color: var(--accent);
205
  font-weight: 600;
206
  margin-right: 1rem;
 
215
  .verification-step.active:before {
216
  background-color: var(--accent);
217
  color: white;
218
+ box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
219
  }
220
 
221
+ /* Futuristic UI elements */
222
  .hero-gradient {
223
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
224
  }
 
226
  .card-hover {
227
  transition: all 0.3s ease;
228
  transform: translateY(0);
229
+ background: rgba(30, 41, 59, 0.6);
230
+ backdrop-filter: blur(10px);
231
+ border: 1px solid rgba(56, 189, 248, 0.1);
232
  }
233
 
234
  .card-hover:hover {
235
  transform: translateY(-8px);
236
+ box-shadow: 0 15px 30px rgba(0,0,0,0.3);
237
+ border-color: rgba(56, 189, 248, 0.3);
238
  }
239
 
240
  .glow-effect {
 
248
  left: 0;
249
  right: 0;
250
  bottom: 0;
251
+ background: radial-gradient(circle at center, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
252
  opacity: 0;
253
  transition: opacity 0.3s ease;
254
  z-index: -1;
 
285
  }
286
 
287
  .wave-shape .shape-fill {
288
+ fill: var(--dark);
289
  }
290
 
291
  .floating {
 
299
  }
300
 
301
  .gradient-text {
302
+ background: linear-gradient(90deg, var(--accent), var(--neon));
303
  -webkit-background-clip: text;
304
  background-clip: text;
305
  color: transparent;
 
309
  position: absolute;
310
  width: 300px;
311
  height: 300px;
312
+ background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
313
  border-radius: 50%;
314
  filter: blur(60px);
315
  z-index: -1;
 
325
  left: -100px;
326
  }
327
 
328
+ /* AI Recommendation Card */
329
+ .ai-card {
330
+ background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
331
+ border: 1px solid rgba(56, 189, 248, 0.2);
332
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
333
+ }
334
+
335
+ .ai-card-header {
336
+ border-bottom: 1px solid rgba(56, 189, 248, 0.2);
337
+ }
338
+
339
+ /* Knowledge Score Meter */
340
+ .knowledge-meter {
341
+ height: 8px;
342
+ background: rgba(30, 41, 59, 0.8);
343
+ border-radius: 4px;
344
+ overflow: hidden;
345
+ }
346
+
347
+ .knowledge-meter-fill {
348
+ height: 100%;
349
+ background: linear-gradient(90deg, var(--accent), var(--neon));
350
+ border-radius: 4px;
351
+ transition: width 1s ease;
352
+ }
353
+
354
+ /* Interactive Elements */
355
+ .interactive-chip {
356
+ display: inline-block;
357
+ padding: 0.25rem 0.75rem;
358
+ background: rgba(56, 189, 248, 0.1);
359
+ border: 1px solid rgba(56, 189, 248, 0.2);
360
+ border-radius: 50px;
361
+ cursor: pointer;
362
+ transition: all 0.2s ease;
363
+ }
364
+
365
+ .interactive-chip:hover {
366
+ background: rgba(56, 189, 248, 0.2);
367
+ transform: translateY(-2px);
368
+ }
369
+
370
  /* Dynamic content styles */
371
  #dynamic-content.active {
372
  display: block;
 
394
 
395
  .nav-link {
396
  position: relative;
397
+ color: rgba(248, 250, 252, 0.8);
398
  }
399
 
400
  .nav-link:after {
 
411
  .nav-link:hover:after {
412
  width: 100%;
413
  }
414
+
415
+ /* Neon glow effect */
416
+ .neon-glow {
417
+ box-shadow: 0 0 10px rgba(0, 245, 212, 0.5), 0 0 20px rgba(0, 245, 212, 0.3);
418
+ }
419
+
420
+ /* Glass morphism effect */
421
+ .glass {
422
+ background: rgba(15, 23, 42, 0.5);
423
+ backdrop-filter: blur(10px);
424
+ border: 1px solid rgba(56, 189, 248, 0.1);
425
+ }
426
+
427
+ /* AI Assistant Floating Button */
428
+ .ai-assistant {
429
+ position: fixed;
430
+ bottom: 2rem;
431
+ right: 2rem;
432
+ width: 60px;
433
+ height: 60px;
434
+ border-radius: 50%;
435
+ background: linear-gradient(135deg, var(--accent), var(--neon));
436
+ display: flex;
437
+ align-items: center;
438
+ justify-content: center;
439
+ color: var(--dark);
440
+ font-size: 1.5rem;
441
+ box-shadow: 0 5px 15px rgba(0, 245, 212, 0.4);
442
+ cursor: pointer;
443
+ z-index: 100;
444
+ transition: all 0.3s ease;
445
+ }
446
+
447
+ .ai-assistant:hover {
448
+ transform: scale(1.1);
449
+ box-shadow: 0 8px 25px rgba(0, 245, 212, 0.6);
450
+ }
451
+
452
+ /* Animated background */
453
+ .animated-bg {
454
+ position: absolute;
455
+ top: 0;
456
+ left: 0;
457
+ width: 100%;
458
+ height: 100%;
459
+ z-index: -1;
460
+ overflow: hidden;
461
+ }
462
+
463
+ .animated-bg::before {
464
+ content: '';
465
+ position: absolute;
466
+ top: -50%;
467
+ left: -50%;
468
+ width: 200%;
469
+ height: 200%;
470
+ background: radial-gradient(circle, rgba(56, 189, 248, 0.05) 0%, transparent 70%);
471
+ animation: rotate 30s linear infinite;
472
+ }
473
+
474
+ @keyframes rotate {
475
+ 0% { transform: rotate(0deg); }
476
+ 100% { transform: rotate(360deg); }
477
+ }
478
  </style>
479
  </head>
480
  <body class="min-h-screen flex flex-col">
481
+ <!-- Animated Background -->
482
+ <div class="animated-bg"></div>
483
+
484
  <!-- Public Navigation -->
485
+ <header class="bg-primary shadow-sm sticky top-0 z-50 glass" id="public-header">
486
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
487
  <div class="flex justify-between h-20 items-center">
488
  <div class="flex items-center">
489
  <div class="flex-shrink-0 flex items-center">
490
+ <i class="fas fa-atom text-accent text-2xl mr-2 neon-glow"></i>
491
+ <a href="#" class="home-link text-xl font-bold text-white">TN Medical Connect</a>
492
  </div>
493
  </div>
494
  <div class="hidden md:flex items-center space-x-6">
495
+ <a href="#about" class="nav-link transition-colors font-medium">About</a>
496
+ <a href="#features" class="nav-link transition-colors font-medium">Features</a>
497
+ <a href="#contact" class="nav-link transition-colors font-medium">Contact</a>
498
+ <a href="#" onclick="return loadPageWithToggle('PodcastPage')" data-page="PodcastPage" class="nav-link transition-colors font-medium">Podcasts</a>
499
+ <a href="#" onclick="return loadPageWithToggle('ResearchPage')" data-page="ResearchPage" class="nav-link transition-colors font-medium">Research</a>
500
+ <a href="#" onclick="return loadPageWithToggle('AIPage')" data-page="AIPage" class="nav-link transition-colors font-medium">AI</a>
501
+ <a href="#" onclick="return loadPageWithToggle('MedPage')" data-page="MedPage" class="nav-link transition-colors font-medium">Medical</a>
502
+ <a href="#" onclick="return loadPageWithToggle('PhDPage')" data-page="PhDPage" class="nav-link transition-colors font-medium">PhD</a>
503
+ <a href="#" class="nav-link transition-colors font-medium">Login</a>
504
  <a href="#register" class="btn-gold px-5 py-2.5 rounded-lg font-medium transition-all transform hover:scale-105">Register</a>
505
  </div>
506
  <div class="md:hidden flex items-center">
507
+ <button id="menu-btn" class="text-gray-300 focus:outline-none">
508
  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
509
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
510
  </svg>
 
513
  </div>
514
  </div>
515
  <!-- Mobile menu -->
516
+ <div id="mobile-menu" class="hidden md:hidden bg-primary border-t border-gray-800">
517
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
518
+ <a href="#about" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">About</a>
519
+ <a href="#features" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Features</a>
520
+ <a href="#contact" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Contact</a>
521
+ <a href="#" onclick="return loadPageWithToggle('PodcastPage')" data-page="PodcastPage" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Podcasts</a>
522
+ <a href="#" onclick="return loadPageWithToggle('ResearchPage')" data-page="ResearchPage" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Research</a>
523
+ <a href="#" onclick="return loadPageWithToggle('AIPage')" data-page="AIPage" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">AI</a>
524
+ <a href="#" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Doctor Login</a>
525
  <a href="#register" class="block px-3 py-2 rounded-md text-base font-medium btn-gold text-white">Register</a>
526
  </div>
527
  </div>
528
  </header>
529
 
530
  <!-- Dashboard Navigation (Hidden by default) -->
531
+ <div id="dashboard-header" class="hidden bg-primary shadow-sm sticky top-0 z-40 glass">
532
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
533
  <div class="flex justify-between h-16 items-center">
534
  <div class="flex items-center">
535
+ <button id="sidebar-toggle" class="text-gray-300 mr-4 focus:outline-none">
536
  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
537
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
538
  </svg>
539
  </button>
540
  <div class="flex-shrink-0 flex items-center">
541
+ <span class="text-lg font-bold text-white">Doctor Dashboard</span>
542
  </div>
543
  </div>
544
  <div class="flex items-center space-x-4">
545
+ <button class="text-gray-300 hover:text-accent relative">
546
  <i class="fas fa-envelope text-xl"></i>
547
  <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
548
  </button>
549
+ <button class="text-gray-300 hover:text-accent relative">
550
  <i class="fas fa-bell text-xl"></i>
551
  <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">2</span>
552
  </button>
 
555
  <div class="h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center">
556
  <i class="fas fa-user text-gray-600"></i>
557
  </div>
558
+ <span class="text-gray-300 font-medium">Dr. Kumar</span>
559
+ <i class="fas fa-chevron-down text-gray-400 text-xs"></i>
560
  </button>
561
+ <div id="profile-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-primary rounded-md shadow-lg py-1 z-50 border border-gray-800">
562
+ <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800">My Profile</a>
563
+ <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800">Settings</a>
564
+ <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 border-t border-gray-800">Sign Out</a>
565
  </div>
566
  </div>
567
  </div>
 
570
  </div>
571
 
572
  <!-- Dashboard Sidebar (Hidden by default) -->
573
+ <div id="dashboard-sidebar" class="hidden fixed top-0 left-0 h-full dashboard-sidebar pt-16 z-30">
574
  <div class="h-full overflow-y-auto py-4">
575
  <nav>
576
  <div class="px-4 space-y-1">
577
+ <a href="#" class="sidebar-item active flex items-center px-4 py-3">
578
  <i class="fas fa-home text-lg w-8"></i>
579
  <span class="ml-3">Dashboard</span>
580
  </a>
581
+ <a href="#" class="sidebar-item flex items-center px-4 py-3">
582
  <i class="fas fa-envelope text-lg w-8"></i>
583
  <span class="ml-3">Email</span>
584
  <span class="ml-auto bg-accent text-white text-xs px-2 py-1 rounded-full">3</span>
585
  </a>
586
+ <a href="#" class="sidebar-item flex items-center px-4 py-3">
587
  <i class="fas fa-users text-lg w-8"></i>
588
  <span class="ml-3">Networking</span>
589
  </a>
590
+ <a href="#" class="sidebar-item flex items-center px-4 py-3">
591
  <i class="fas fa-book-open text-lg w-8"></i>
592
  <span class="ml-3">Research & Grants</span>
593
  </a>
594
+ <a href="#" class="sidebar-item flex items-center px-4 py-3">
595
  <i class="fas fa-briefcase text-lg w-8"></i>
596
  <span class="ml-3">Careers</span>
597
  </a>
598
+ <a href="#" class="sidebar-item flex items-center px-4 py-3">
599
  <i class="fas fa-podcast text-lg w-8"></i>
600
  <span class="ml-3">Podcasts/Webinars</span>
601
  </a>
602
+ <div class="border-t border-gray-700 mt-4 pt-4">
603
+ <a href="#" class="sidebar-item flex items-center px-4 py-3">
604
  <i class="fas fa-cog text-lg w-8"></i>
605
  <span class="ml-3">Settings</span>
606
  </a>
 
614
  <div id="dashboard-content" class="hidden dashboard-content pt-16">
615
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
616
  <!-- Breadcrumbs -->
617
+ <div class="flex items-center text-sm text-gray-400 mb-6">
618
  <a href="#" class="hover:text-accent">Dashboard</a>
619
  <span class="mx-2">/</span>
620
  <span class="text-gray-500">Home</span>
621
  </div>
622
 
623
  <!-- Welcome Banner -->
624
+ <div class="ai-card rounded-xl p-6 mb-8 card-hover">
625
  <div class="flex flex-col md:flex-row md:items-center md:justify-between">
626
  <div>
627
+ <h2 class="text-2xl font-bold text-white mb-2">Welcome, Dr. Kumar</h2>
628
+ <p class="text-gray-400">Your personalized AI assistant has identified 3 new opportunities for you.</p>
629
  </div>
630
  <div class="mt-4 md:mt-0">
631
  <div class="flex items-center">
632
+ <div class="w-48 bg-gray-800 rounded-full h-2.5">
633
+ <div class="bg-gradient-to-r from-accent to-neon h-2.5 rounded-full" style="width: 75%"></div>
634
  </div>
635
+ <span class="ml-3 text-sm text-gray-400">75% profile complete</span>
636
  </div>
637
  <button class="mt-2 text-sm text-accent hover:underline">Complete your profile</button>
638
  </div>
639
  </div>
640
  </div>
641
 
642
+ <!-- AI Recommendations -->
643
+ <div class="mb-8">
644
+ <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
645
+ <i class="fas fa-robot text-accent mr-2"></i> AI Recommendations
646
+ </h3>
647
+ <div class="grid md:grid-cols-3 gap-6">
648
+ <!-- Recommendation 1 -->
649
+ <div class="ai-card rounded-xl p-6 card-hover">
650
+ <div class="flex items-center mb-4">
651
+ <div class="p-3 rounded-full bg-blue-900/50 text-accent mr-4">
652
+ <i class="fas fa-book-medical text-xl"></i>
653
+ </div>
654
+ <div>
655
+ <h4 class="font-medium text-white">Research Collaboration</h4>
656
+ <p class="text-xs text-gray-400">Based on your publications</p>
657
+ </div>
658
+ </div>
659
+ <p class="text-gray-300 text-sm mb-4">Dr. Priya Sharma (Neurology, Chennai) is seeking collaborators for a study on Parkinson's disease.</p>
660
+ <div class="flex justify-between items-center">
661
+ <span class="text-xs text-gray-400">Match: 87%</span>
662
+ <button class="text-xs text-accent hover:underline">View Details</button>
663
+ </div>
664
+ </div>
665
+
666
+ <!-- Recommendation 2 -->
667
+ <div class="ai-card rounded-xl p-6 card-hover">
668
+ <div class="flex items-center mb-4">
669
+ <div class="p-3 rounded-full bg-green-900/50 text-green-400 mr-4">
670
+ <i class="fas fa-chalkboard-teacher text-xl"></i>
671
+ </div>
672
+ <div>
673
+ <h4 class="font-medium text-white">Webinar Invitation</h4>
674
+ <p class="text-xs text-gray-400">Matches your interests</p>
675
+ </div>
676
+ </div>
677
+ <p class="text-gray-300 text-sm mb-4">"Advances in Cardiac Imaging" webinar tomorrow at 4PM. 3 CME credits available.</p>
678
+ <div class="flex justify-between items-center">
679
+ <span class="text-xs text-gray-400">Relevance: 92%</span>
680
+ <button class="text-xs text-accent hover:underline">Register Now</button>
681
+ </div>
682
+ </div>
683
+
684
+ <!-- Recommendation 3 -->
685
+ <div class="ai-card rounded-xl p-6 card-hover">
686
+ <div class="flex items-center mb-4">
687
+ <div class="p-3 rounded-full bg-purple-900/50 text-purple-400 mr-4">
688
+ <i class="fas fa-graduation-cap text-xl"></i>
689
+ </div>
690
+ <div>
691
+ <h4 class="font-medium text-white">Learning Path</h4>
692
+ <p class="text-xs text-gray-400">New in your specialty</p>
693
+ </div>
694
+ </div>
695
+ <p class="text-gray-300 text-sm mb-4">Complete this 5-module course on "Interventional Cardiology Techniques" to earn certification.</p>
696
+ <div class="flex justify-between items-center">
697
+ <span class="text-xs text-gray-400">Progress: 2/5 modules</span>
698
+ <button class="text-xs text-accent hover:underline">Continue</button>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+
704
+ <!-- Knowledge Score -->
705
+ <div class="ai-card rounded-xl p-6 mb-8 card-hover">
706
+ <div class="flex items-center justify-between mb-6">
707
+ <h3 class="text-lg font-semibold text-white">Your Knowledge Score</h3>
708
+ <div class="flex items-center">
709
+ <span class="text-accent font-bold text-xl mr-2">87</span>
710
+ <span class="text-gray-400">/100</span>
711
+ </div>
712
+ </div>
713
+ <div class="knowledge-meter mb-2">
714
+ <div class="knowledge-meter-fill" style="width: 87%"></div>
715
+ </div>
716
+ <p class="text-gray-400 text-sm">You're in the top 15% of cardiologists in Tamil Nadu based on your publications, certifications, and peer reviews.</p>
717
+ </div>
718
+
719
  <!-- Quick Stats -->
720
  <div class="grid md:grid-cols-3 gap-6 mb-8">
721
+ <div class="ai-card rounded-xl p-6 card-hover">
722
  <div class="flex items-center">
723
+ <div class="p-3 rounded-full bg-blue-900/50 text-accent mr-4">
724
  <i class="fas fa-envelope text-xl"></i>
725
  </div>
726
  <div>
727
+ <p class="text-sm text-gray-400">Unread Messages</p>
728
+ <p class="text-2xl font-bold text-white">3</p>
729
  </div>
730
  </div>
731
  </div>
732
+ <div class="ai-card rounded-xl p-6 card-hover">
733
  <div class="flex items-center">
734
+ <div class="p-3 rounded-full bg-green-900/50 text-green-400 mr-4">
735
  <i class="fas fa-calendar-alt text-xl"></i>
736
  </div>
737
  <div>
738
+ <p class="text-sm text-gray-400">Upcoming Events</p>
739
+ <p class="text-2xl font-bold text-white">2</p>
740
  </div>
741
  </div>
742
  </div>
743
+ <div class="ai-card rounded-xl p-6 card-hover">
744
  <div class="flex items-center">
745
+ <div class="p-3 rounded-full bg-purple-900/50 text-purple-400 mr-4">
746
  <i class="fas fa-book-open text-xl"></i>
747
  </div>
748
  <div>
749
+ <p class="text-sm text-gray-400">New Research</p>
750
+ <p class="text-2xl font-bold text-white">5</p>
751
  </div>
752
  </div>
753
  </div>
754
  </div>
755
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
756
  <!-- Recent Activity -->
757
+ <div class="ai-card rounded-xl p-6 card-hover">
758
  <div class="flex items-center justify-between mb-6">
759
+ <h3 class="text-lg font-semibold text-white">Recent Activity</h3>
760
  <a href="#" class="text-sm text-accent hover:underline">View All</a>
761
  </div>
762
 
763
  <div class="space-y-4">
764
  <div class="flex items-start">
765
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 mr-4">
766
  <i class="fas fa-envelope"></i>
767
  </div>
768
  <div class="flex-1 min-w-0">
769
+ <p class="text-sm font-medium text-white">New message from Dr. Patel</p>
770
+ <p class="text-sm text-gray-400">Regarding the upcoming cardiology conference...</p>
771
+ <p class="text-xs text-gray-500 mt-1">2 hours ago</p>
772
  </div>
773
  <div class="ml-4 flex-shrink-0">
774
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-300">
775
  Unread
776
  </span>
777
  </div>
778
  </div>
779
 
780
  <div class="flex items-start">
781
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 mr-4">
782
  <i class="fas fa-calendar-alt"></i>
783
  </div>
784
  <div class="flex-1 min-w-0">
785
+ <p class="text-sm font-medium text-white">Webinar reminder: Advances in Neurology</p>
786
+ <p class="text-sm text-gray-400">Tomorrow at 3:00 PM IST</p>
787
+ <p class="text-xs text-gray-500 mt-1">5 hours ago</p>
788
  </div>
789
  </div>
790
 
791
  <div class="flex items-start">
792
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 mr-4">
793
  <i class="fas fa-book-open"></i>
794
  </div>
795
  <div class="flex-1 min-w-0">
796
+ <p class="text-sm font-medium text-white">New research published in your field</p>
797
+ <p class="text-sm text-gray-400">"Impact of new surgical techniques on patient recovery"</p>
798
+ <p class="text-xs text-gray-500 mt-1">1 day ago</p>
799
  </div>
800
  </div>
801
  </div>
802
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
803
 
804
+ <!-- Global Connections -->
805
+ <div class="ai-card rounded-xl p-6 mt-8 card-hover">
806
+ <div class="flex items-center justify-between mb-6">
807
+ <h3 class="text-lg font-semibold text-white flex items-center">
808
+ <i class="fas fa-globe-asia text-accent mr-2"></i> Global Connections
809
+ </h3>
810
+ <a href="#" class="text-sm text-accent hover:underline">View All</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
811
  </div>
812
 
813
+ <div class="grid md:grid-cols-3 gap-4">
814
+ <div class="flex items-center p-3 hover:bg-gray-800/50 rounded-lg transition-colors">
815
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 mr-4">
816
+ <i class="fas fa-user-md"></i>
 
 
 
 
 
 
 
817
  </div>
818
+ <div>
819
+ <p class="text-sm font-medium text-white">Dr. Chen (Cardiology)</p>
820
+ <p class="text-xs text-gray-400">Singapore General Hospital</p>
821
+ <div class="mt-1 flex flex-wrap gap-1">
822
+ <span class="interactive-chip text-xs">Interventional</span>
823
+ <span class="interactive-chip text-xs">Research</span>
824
+ </div>
 
825
  </div>
826
  </div>
827
 
828
+ <div class="flex items-center p-3 hover:bg-gray-800/50 rounded-lg transition-colors">
829
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 mr-4">
830
+ <i class="fas fa-user-md"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
831
  </div>
832
+ <div>
833
+ <p class="text-sm font-medium text-white">Dr. Williams (Neurology)</p>
834
+ <p class="text-xs text-gray-400">Mayo Clinic, USA</p>
835
+ <div class="mt-1 flex flex-wrap gap-1">
836
+ <span class="interactive-chip text-xs">Parkinson's</span>
837
+ <span class="interactive-chip text-xs">Clinical Trials</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
838
  </div>
839
  </div>
840
  </div>
841
+
842
+ <div class="flex items-center p-3 hover:bg-gray-800/50 rounded-lg transition-colors">
843
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 mr-4">
844
+ <i class="fas fa-user-md"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
845
  </div>
846
+ <div>
847
+ <p class="text-sm font-medium text-white">Dr. Tanaka (Cardiology)</p>
848
+ <p class="text-xs text-gray-400">Tokyo University Hospital</p>
849
+ <div class="mt-1 flex flex-wrap gap-1">
850
+ <span class="interactive-chip text-xs">Echocardiography</span>
851
+ <span class="interactive-chip text-xs">Innovation</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
852
  </div>
853
+ </div>
 
 
 
 
 
 
 
 
854
  </div>
855
  </div>
856
  </div>
857
  </div>
858
  </div>
859
 
860
+ <!-- AI Assistant Floating Button -->
861
+ <div class="ai-assistant">
862
+ <i class="fas fa-robot"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
863
  </div>
864
 
865
  <!-- Public Content (Visible by default) -->
 
877
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
878
  <div class="md:flex items-center">
879
  <div class="md:w-1/2 mb-12 md:mb-0">
880
+ <h1 class="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">
881
+ The <span class="gradient-text">AI-Powered Network</span> for Tamil Nadu Doctors
882
  </h1>
883
+ <p class="text-lg text-gray-300 mb-8 max-w-lg">A next-generation platform connecting medical professionals with intelligent networking, personalized learning, and global collaboration opportunities.</p>
884
  <div class="flex space-x-4">
885
  <a href="#register" class="btn-gold px-6 py-3 rounded-lg font-medium shadow-lg hover:shadow-xl transition-all transform hover:scale-105 pulse-animation">
886
+ Join Now <i class="fas fa-arrow-right ml-2"></i>
887
  </a>
888
+ <a href="#features" class="px-6 py-3 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-800/50 transition-colors font-medium hover:shadow-md">
889
+ Explore Features <i class="fas fa-book-open ml-2"></i>
890
  </a>
891
  </div>
892
  </div>
 
912
  <div class="section-divider"></div>
913
 
914
  <!-- Features Section -->
915
+ <section id="features" class="py-16 fade-in">
916
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
917
  <div class="text-center mb-16">
918
+ <h2 class="text-3xl font-bold text-white mb-4">Intelligent Features for Medical Excellence</h2>
919
+ <p class="text-gray-400 max-w-2xl mx-auto">Powered by AI to enhance your professional journey</p>
920
  </div>
921
 
922
  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
923
  <!-- Feature 1 -->
924
+ <div class="ai-card p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
925
  <div class="feature-icon">
926
+ <i class="fas fa-brain"></i>
927
  </div>
928
+ <h3 class="text-xl font-semibold text-white mb-3">AI-Powered Insights</h3>
929
+ <p class="text-gray-400">Get personalized recommendations for research, collaborations, and learning based on your profile and interests.</p>
930
  </div>
931
 
932
  <!-- Feature 2 -->
933
+ <div class="ai-card p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
934
  <div class="feature-icon">
935
+ <i class="fas fa-globe"></i>
936
  </div>
937
+ <h3 class="text-xl font-semibold text-white mb-3">Global Network</h3>
938
+ <p class="text-gray-400">Connect with specialists worldwide through intelligent matching and secure communication channels.</p>
939
  </div>
940
 
941
  <!-- Feature 3 -->
942
+ <div class="ai-card p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
943
  <div class="feature-icon">
944
+ <i class="fas fa-graduation-cap"></i>
945
  </div>
946
+ <h3 class="text-xl font-semibold text-white mb-3">Adaptive Learning</h3>
947
+ <p class="text-gray-400">Personalized learning paths with virtual case studies, CME courses, and certification programs tailored to your specialty.</p>
948
  </div>
949
 
950
  <!-- Feature 4 -->
951
+ <div class="ai-card p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect">
952
  <div class="feature-icon">
953
+ <i class="fas fa-chart-network"></i>
954
  </div>
955
+ <h3 class="text-xl font-semibold text-white mb-3">Research Frontiers</h3>
956
+ <p class="text-gray-400">Collaborative tools for research projects, grant applications, and publication tracking with impact analytics.</p>
957
  </div>
958
  </div>
959
  </div>
 
962
  <div class="section-divider"></div>
963
 
964
  <!-- About Section -->
965
+ <section id="about" class="py-16 fade-in relative overflow-hidden">
966
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
967
  <div class="md:flex items-center">
968
  <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
969
+ <h2 class="text-3xl font-bold text-white mb-6">The Future of Medical Networking</h2>
970
+ <p class="text-gray-400 mb-6">TN Medical Connect revolutionizes professional networking for doctors by combining AI-powered tools with a secure, verified platform designed specifically for medical professionals.</p>
971
+ <p class="text-gray-400 mb-8">Our platform uses advanced algorithms to analyze your professional profile and activity, delivering personalized opportunities and insights to accelerate your career.</p>
972
  <div class="flex items-center">
973
  <span class="verified-badge">
974
  <i class="fas fa-shield-alt"></i>
 
992
  <div class="section-divider"></div>
993
 
994
  <!-- Registration Section -->
995
+ <section id="register" class="py-16 fade-in">
996
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
997
+ <div class="ai-card rounded-xl shadow-xl overflow-hidden">
998
  <div class="md:flex">
999
  <div class="md:w-1/2 p-8 md:p-12 text-white relative overflow-hidden">
1000
  <div class="absolute -top-20 -right-20 w-40 h-40 bg-white rounded-full opacity-10"></div>
1001
  <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-accent rounded-full opacity-10"></div>
1002
  <div class="relative z-10">
1003
+ <h2 class="text-2xl font-bold mb-4">Join the Future of Medical Networking</h2>
1004
+ <p class="text-gray-300 mb-6">Become part of Tamil Nadu's premier AI-powered medical professional network.</p>
1005
  <ul class="space-y-3 mb-8">
1006
  <li class="flex items-start">
1007
  <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
1008
+ <span>AI-curated professional opportunities</span>
1009
  </li>
1010
  <li class="flex items-start">
1011
  <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
1012
+ <span>Secure, verified collaboration environment</span>
1013
  </li>
1014
  <li class="flex items-start">
1015
  <i class="fas fa-check-circle text-accent mt-1 mr-2"></i>
1016
+ <span>Personalized learning and career growth</span>
1017
  </li>
1018
  </ul>
1019
  <div class="flex items-center">
1020
  <span class="verified-badge bg-white/10">
1021
  <i class="fas fa-lock"></i>
1022
+ <span>End-to-end encrypted</span>
1023
  </span>
1024
  </div>
1025
  </div>
1026
  </div>
1027
+ <div class="md:w-1/2 p-8 md:p-12 bg-gray-900 relative">
1028
  <div class="absolute -top-6 -left-6 w-16 h-16 bg-accent rounded-full opacity-10"></div>
1029
  <div class="absolute -bottom-6 -right-6 w-16 h-16 bg-gold rounded-full opacity-10"></div>
1030
  <div class="relative z-10">
1031
+ <h3 class="text-xl font-semibold text-white mb-6">Create Your Verified Account</h3>
1032
  <form id="registration-form">
1033
  <div class="mb-4">
1034
+ <label for="full-name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label>
1035
+ <input type="text" id="full-name" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="Dr. Firstname Lastname">
1036
  </div>
1037
  <div class="mb-4">
1038
+ <label for="tnmc-id" class="block text-sm font-medium text-gray-300 mb-1">TNMC Registration Number</label>
1039
+ <input type="text" id="tnmc-id" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="TNMC123456">
1040
  </div>
1041
  <div class="mb-4">
1042
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email Address</label>
1043
+ <input type="email" id="email" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300" placeholder="[email protected]">
1044
  </div>
1045
  <div class="mb-6">
1046
+ <label for="specialty" class="block text-sm font-medium text-gray-300 mb-1">Primary Specialty</label>
1047
+ <select id="specialty" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition duration-300">
1048
  <option value="">Select your specialty</option>
1049
  <option value="cardiology">Cardiology</option>
1050
  <option value="neurology">Neurology</option>
 
1067
  <div class="section-divider"></div>
1068
 
1069
  <!-- Contact Section -->
1070
+ <section id="contact" class="py-16 fade-in">
1071
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1072
  <div class="text-center mb-12">
1073
+ <h2 class="text-3xl font-bold text-white mb-4">Contact Us</h2>
1074
+ <p class="text-gray-400 max-w-2xl mx-auto">Our team is available to answer your questions about the platform.</p>
1075
  </div>
1076
 
1077
  <div class="grid md:grid-cols-3 gap-8">
1078
+ <div class="ai-card p-6 rounded-xl hover:shadow-lg transition-all card-hover">
1079
  <div class="text-accent mb-4">
1080
  <i class="fas fa-envelope text-2xl"></i>
1081
  </div>
1082
+ <h3 class="text-lg font-semibold text-white mb-2">Email Support</h3>
1083
+ <p class="text-gray-400 mb-2">For general inquiries and platform information</p>
1084
  <a href="mailto:[email protected]" class="text-accent hover:underline">[email protected]</a>
1085
  </div>
1086
 
1087
+ <div class="ai-card p-6 rounded-xl hover:shadow-lg transition-all card-hover">
1088
  <div class="text-accent mb-4">
1089
  <i class="fas fa-phone-alt text-2xl"></i>
1090
  </div>
1091
+ <h3 class="text-lg font-semibold text-white mb-2">Phone Support</h3>
1092
+ <p class="text-gray-400 mb-2">Available Monday-Friday, 9AM-5PM IST</p>
1093
  <a href="tel:+914412345678" class="text-accent hover:underline">+91 44 1234 5678</a>
1094
  </div>
1095
 
1096
+ <div class="ai-card p-6 rounded-xl hover:shadow-lg transition-all card-hover">
1097
  <div class="text-accent mb-4">
1098
  <i class="fas fa-question-circle text-2xl"></i>
1099
  </div>
1100
+ <h3 class="text-lg font-semibold text-white mb-2">FAQ & Help Center</h3>
1101
+ <p class="text-gray-400 mb-2">Find answers to common questions</p>
1102
  <a href="#" class="text-accent hover:underline">Visit Help Center</a>
1103
  </div>
1104
  </div>
 
1115
  <div class="grid md:grid-cols-4 gap-8">
1116
  <div class="md:col-span-2">
1117
  <div class="flex items-center mb-4">
1118
+ <i class="fas fa-atom text-2xl mr-2 text-accent"></i>
1119
  <span class="text-xl font-bold">TN Medical Connect</span>
1120
  </div>
1121
+ <p class="text-gray-300 mb-4">The AI-powered professional network for Tamil Nadu medical practitioners.</p>
1122
  <div class="flex space-x-4">
1123
  <a href="#" class="text-gray-300 hover:text-white transition-colors">
1124
  <i class="fab fa-twitter"></i>
 
1149
  </ul>
1150
  </div>
1151
  </div>
1152
+ <div class="mt-12 pt-8 border-t border-gray-700 text-sm text-gray-400">
1153
  <p>© 2023 TN Medical Connect. All rights reserved.</p>
1154
  <p class="mt-2">TNMC verification does not imply endorsement of individual practitioners by the Tamil Nadu Medical Council.</p>
1155
  </div>
 
1312
  gsap.from(".card-hover", {
1313
  scrollTrigger: {
1314
  trigger: "#features",
1315
+ start: "top 80%",
1316
+ toggleActions: "play none none none"
1317
+ },
1318
+ y: 30,
1319
+ opacity: 0,
1320
+ duration: 0.8,
1321
+ stagger: 0.1,
1322
+ ease: "back.out"
1323
+ });
1324
+
1325
+ // AI Assistant interaction
1326
+ const aiAssistant = document.querySelector('.ai-assistant');
1327
+ aiAssistant.addEventListener('click', function() {
1328
+ // In a real implementation, this would open a chat interface
1329
+ alert('AI Assistant: Hello! How can I help you today?');
1330
+ });
1331
+
1332
+ // Interactive chips animation
1333
+ const chips = document.querySelectorAll('.interactive-chip');
1334
+ chips.forEach(chip => {
1335
+ chip.addEventListener('mouseenter', function() {
1336
+ gsap.to(this, {
1337
+ scale: 1.05,
1338
+ duration: 0.2,
1339
+ ease: "power1.out"
1340
+ });
1341
+ });
1342
+
1343
+ chip.addEventListener('mouseleave', function() {
1344
+ gsap.to(this, {
1345
+ scale: 1,
1346
+ duration: 0.2,
1347
+ ease: "power1.out"
1348
+ });
1349
+ });
1350
+ });
1351
+
1352
+ // Knowledge score animation
1353
+ const knowledgeMeter = document.querySelector('.knowledge-meter-fill');
1354
+ if (knowledgeMeter) {
1355
+ gsap.from(knowledgeMeter, {
1356
+ width: 0,
1357
+ duration: 1.5,
1358
+ delay: 0.5,
1359
+ ease: "power2.out"
1360
+ });
1361
+ }
1362
+ </script>
1363
+ <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=rainbowhunt/TN" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1364
  </html>