Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TN Medical Connect | AI-Powered Medical Network</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></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=Poppins:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #0f172a; | |
| --secondary: #1e293b; | |
| --accent: #38bdf8; | |
| --gold: #f59e0b; | |
| --light: #f8fafc; | |
| --dark: #020617; | |
| --gradient-start: #0f172a; | |
| --gradient-end: #1e40af; | |
| --neon: #00f5d4; | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: var(--dark); | |
| color: var(--light); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .bg-primary { | |
| background-color: var(--primary); | |
| } | |
| .text-accent { | |
| color: var(--accent); | |
| } | |
| .bg-accent { | |
| background-color: var(--accent); | |
| } | |
| .border-accent { | |
| border-color: var(--accent); | |
| } | |
| .hover\:bg-accent:hover { | |
| background-color: var(--accent); | |
| } | |
| .hover\:text-accent:hover { | |
| color: var(--accent); | |
| } | |
| .btn-gold { | |
| background-color: var(--gold); | |
| color: white; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2); | |
| } | |
| .btn-gold:hover { | |
| background-color: #d97706; | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(245, 158, 11, 0.3); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .section-divider { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.2), transparent); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 16px; | |
| background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(56, 189, 248, 0.2) 100%); | |
| color: var(--accent); | |
| margin-bottom: 1.5rem; | |
| font-size: 1.5rem; | |
| box-shadow: 0 4px 6px rgba(56, 189, 248, 0.1); | |
| } | |
| .verified-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(56, 189, 248, 0.2) 100%); | |
| color: var(--accent); | |
| padding: 0.5rem 1rem; | |
| border-radius: 50px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| box-shadow: 0 2px 4px rgba(56, 189, 248, 0.1); | |
| } | |
| .verified-badge i { | |
| margin-right: 0.25rem; | |
| } | |
| /* Futuristic Dashboard styles */ | |
| .dashboard-sidebar { | |
| width: 280px; | |
| transition: all 0.3s; | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(10px); | |
| border-right: 1px solid rgba(56, 189, 248, 0.1); | |
| } | |
| .dashboard-content { | |
| margin-left: 280px; | |
| transition: all 0.3s; | |
| background: var(--dark); | |
| } | |
| .sidebar-collapsed .dashboard-sidebar { | |
| width: 80px; | |
| } | |
| .sidebar-collapsed .dashboard-content { | |
| margin-left: 80px; | |
| } | |
| .sidebar-item { | |
| transition: all 0.2s; | |
| border-radius: 8px; | |
| margin: 0.25rem 0.5rem; | |
| color: rgba(248, 250, 252, 0.8); | |
| } | |
| .sidebar-item:hover { | |
| background: linear-gradient(90deg, rgba(56, 189, 248, 0.2), transparent); | |
| transform: translateX(4px); | |
| color: var(--accent); | |
| } | |
| .sidebar-item.active { | |
| background: linear-gradient(90deg, rgba(56, 189, 248, 0.3), transparent); | |
| border-left: 3px solid var(--accent); | |
| color: var(--accent); | |
| } | |
| .email-item.unread { | |
| background-color: rgba(56, 189, 248, 0.05); | |
| border-left: 2px solid var(--accent); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(0,0,0,0.05); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(56, 189, 248, 0.5); | |
| border-radius: 3px; | |
| } | |
| /* Verification steps */ | |
| .verification-steps { | |
| counter-reset: step; | |
| } | |
| .verification-step { | |
| position: relative; | |
| counter-increment: step; | |
| } | |
| .verification-step:not(:last-child):after { | |
| content: ''; | |
| position: absolute; | |
| left: 20px; | |
| top: 40px; | |
| height: calc(100% - 40px); | |
| width: 1px; | |
| background-color: rgba(56, 189, 248, 0.2); | |
| } | |
| .verification-step:before { | |
| content: counter(step); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: rgba(56, 189, 248, 0.1); | |
| color: var(--accent); | |
| font-weight: 600; | |
| margin-right: 1rem; | |
| } | |
| .verification-step.completed:before { | |
| background-color: var(--accent); | |
| color: white; | |
| content: '✓'; | |
| } | |
| .verification-step.active:before { | |
| background-color: var(--accent); | |
| color: white; | |
| box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3); | |
| } | |
| /* Futuristic UI elements */ | |
| .hero-gradient { | |
| background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| transform: translateY(0); | |
| background: rgba(30, 41, 59, 0.6); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(56, 189, 248, 0.1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.3); | |
| border-color: rgba(56, 189, 248, 0.3); | |
| } | |
| .glow-effect { | |
| position: relative; | |
| } | |
| .glow-effect:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at center, rgba(56, 189, 248, 0.1) 0%, transparent 70%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: -1; | |
| } | |
| .glow-effect:hover:after { | |
| opacity: 1; | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .wave-shape { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| line-height: 0; | |
| } | |
| .wave-shape svg { | |
| position: relative; | |
| display: block; | |
| width: calc(100% + 1.3px); | |
| height: 150px; | |
| } | |
| .wave-shape .shape-fill { | |
| fill: var(--dark); | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--accent), var(--neon)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .blob { | |
| position: absolute; | |
| width: 300px; | |
| height: 300px; | |
| background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%); | |
| border-radius: 50%; | |
| filter: blur(60px); | |
| z-index: -1; | |
| } | |
| .blob-1 { | |
| top: -100px; | |
| right: -100px; | |
| } | |
| .blob-2 { | |
| bottom: -100px; | |
| left: -100px; | |
| } | |
| /* AI Recommendation Card */ | |
| .ai-card { | |
| background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)); | |
| border: 1px solid rgba(56, 189, 248, 0.2); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| } | |
| .ai-card-header { | |
| border-bottom: 1px solid rgba(56, 189, 248, 0.2); | |
| } | |
| /* Knowledge Score Meter */ | |
| .knowledge-meter { | |
| height: 8px; | |
| background: rgba(30, 41, 59, 0.8); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .knowledge-meter-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent), var(--neon)); | |
| border-radius: 4px; | |
| transition: width 1s ease; | |
| } | |
| /* Interactive Elements */ | |
| .interactive-chip { | |
| display: inline-block; | |
| padding: 0.25rem 0.75rem; | |
| background: rgba(56, 189, 248, 0.1); | |
| border: 1px solid rgba(56, 189, 248, 0.2); | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .interactive-chip:hover { | |
| background: rgba(56, 189, 248, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| /* Dynamic content styles */ | |
| #dynamic-content.active { | |
| display: block; | |
| } | |
| #public-homepage.hidden { | |
| display: none; | |
| } | |
| .nav-link.active { | |
| font-weight: 600; | |
| color: var(--accent); | |
| position: relative; | |
| } | |
| .nav-link.active:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: var(--accent); | |
| } | |
| .nav-link { | |
| position: relative; | |
| color: rgba(248, 250, 252, 0.8); | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| /* Neon glow effect */ | |
| .neon-glow { | |
| box-shadow: 0 0 10px rgba(0, 245, 212, 0.5), 0 0 20px rgba(0, 245, 212, 0.3); | |
| } | |
| /* Glass morphism effect */ | |
| .glass { | |
| background: rgba(15, 23, 42, 0.5); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(56, 189, 248, 0.1); | |
| } | |
| /* AI Assistant Floating Button */ | |
| .ai-assistant { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--accent), var(--neon)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--dark); | |
| font-size: 1.5rem; | |
| box-shadow: 0 5px 15px rgba(0, 245, 212, 0.4); | |
| cursor: pointer; | |
| z-index: 100; | |
| transition: all 0.3s ease; | |
| } | |
| .ai-assistant:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 8px 25px rgba(0, 245, 212, 0.6); | |
| } | |
| /* Animated background */ | |
| .animated-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .animated-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(56, 189, 248, 0.05) 0%, transparent 70%); | |
| animation: rotate 30s linear infinite; | |
| } | |
| @keyframes rotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Animated Background --> | |
| <div class="animated-bg"></div> | |
| <!-- Public Navigation --> | |
| <header class="bg-primary shadow-sm sticky top-0 z-50 glass" id="public-header"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-atom text-accent text-2xl mr-2 neon-glow"></i> | |
| <a href="#" class="home-link text-xl font-bold text-white">TN Medical Connect</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#about" class="nav-link transition-colors font-medium">About</a> | |
| <a href="#features" class="nav-link transition-colors font-medium">Features</a> | |
| <a href="#contact" class="nav-link transition-colors font-medium">Contact</a> | |
| <a href="#" onclick="return loadPageWithToggle('PodcastPage')" data-page="PodcastPage" class="nav-link transition-colors font-medium">Podcasts</a> | |
| <a href="#" onclick="return loadPageWithToggle('ResearchPage')" data-page="ResearchPage" class="nav-link transition-colors font-medium">Research</a> | |
| <a href="#" onclick="return loadPageWithToggle('AIPage')" data-page="AIPage" class="nav-link transition-colors font-medium">AI</a> | |
| <a href="#" onclick="return loadPageWithToggle('MedPage')" data-page="MedPage" class="nav-link transition-colors font-medium">Medical</a> | |
| <a href="#" onclick="return loadPageWithToggle('PhDPage')" data-page="PhDPage" class="nav-link transition-colors font-medium">PhD</a> | |
| <a href="#" class="nav-link transition-colors font-medium">Login</a> | |
| <a href="#register" class="btn-gold px-5 py-2.5 rounded-lg font-medium transition-all transform hover:scale-105">Register</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="menu-btn" class="text-gray-300 focus:outline-none"> | |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-primary border-t border-gray-800"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#about" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">About</a> | |
| <a href="#features" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Features</a> | |
| <a href="#contact" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Contact</a> | |
| <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> | |
| <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> | |
| <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> | |
| <a href="#" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Doctor Login</a> | |
| <a href="#register" class="block px-3 py-2 rounded-md text-base font-medium btn-gold text-white">Register</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Navigation (Hidden by default) --> | |
| <div id="dashboard-header" class="hidden bg-primary shadow-sm sticky top-0 z-40 glass"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <button id="sidebar-toggle" class="text-gray-300 mr-4 focus:outline-none"> | |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-lg font-bold text-white">Doctor Dashboard</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-300 hover:text-accent relative"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| <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> | |
| </button> | |
| <button class="text-gray-300 hover:text-accent relative"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <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> | |
| </button> | |
| <div class="relative"> | |
| <button id="profile-dropdown-btn" class="flex items-center space-x-2 focus:outline-none"> | |
| <div class="h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| <span class="text-gray-300 font-medium">Dr. Kumar</span> | |
| <i class="fas fa-chevron-down text-gray-400 text-xs"></i> | |
| </button> | |
| <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"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800">My Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800">Settings</a> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard Sidebar (Hidden by default) --> | |
| <div id="dashboard-sidebar" class="hidden fixed top-0 left-0 h-full dashboard-sidebar pt-16 z-30"> | |
| <div class="h-full overflow-y-auto py-4"> | |
| <nav> | |
| <div class="px-4 space-y-1"> | |
| <a href="#" class="sidebar-item active flex items-center px-4 py-3"> | |
| <i class="fas fa-home text-lg w-8"></i> | |
| <span class="ml-3">Dashboard</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3"> | |
| <i class="fas fa-envelope text-lg w-8"></i> | |
| <span class="ml-3">Email</span> | |
| <span class="ml-auto bg-accent text-white text-xs px-2 py-1 rounded-full">3</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3"> | |
| <i class="fas fa-users text-lg w-8"></i> | |
| <span class="ml-3">Networking</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3"> | |
| <i class="fas fa-book-open text-lg w-8"></i> | |
| <span class="ml-3">Research & Grants</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3"> | |
| <i class="fas fa-briefcase text-lg w-8"></i> | |
| <span class="ml-3">Careers</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3"> | |
| <i class="fas fa-podcast text-lg w-8"></i> | |
| <span class="ml-3">Podcasts/Webinars</span> | |
| </a> | |
| <div class="border-t border-gray-700 mt-4 pt-4"> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3"> | |
| <i class="fas fa-cog text-lg w-8"></i> | |
| <span class="ml-3">Settings</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Dashboard Content (Hidden by default) --> | |
| <div id="dashboard-content" class="hidden dashboard-content pt-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Breadcrumbs --> | |
| <div class="flex items-center text-sm text-gray-400 mb-6"> | |
| <a href="#" class="hover:text-accent">Dashboard</a> | |
| <span class="mx-2">/</span> | |
| <span class="text-gray-500">Home</span> | |
| </div> | |
| <!-- Welcome Banner --> | |
| <div class="ai-card rounded-xl p-6 mb-8 card-hover"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-white mb-2">Welcome, Dr. Kumar</h2> | |
| <p class="text-gray-400">Your personalized AI assistant has identified 3 new opportunities for you.</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex items-center"> | |
| <div class="w-48 bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-gradient-to-r from-accent to-neon h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <span class="ml-3 text-sm text-gray-400">75% profile complete</span> | |
| </div> | |
| <button class="mt-2 text-sm text-accent hover:underline">Complete your profile</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Recommendations --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold text-white mb-4 flex items-center"> | |
| <i class="fas fa-robot text-accent mr-2"></i> AI Recommendations | |
| </h3> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <!-- Recommendation 1 --> | |
| <div class="ai-card rounded-xl p-6 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-blue-900/50 text-accent mr-4"> | |
| <i class="fas fa-book-medical text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-white">Research Collaboration</h4> | |
| <p class="text-xs text-gray-400">Based on your publications</p> | |
| </div> | |
| </div> | |
| <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> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-400">Match: 87%</span> | |
| <button class="text-xs text-accent hover:underline">View Details</button> | |
| </div> | |
| </div> | |
| <!-- Recommendation 2 --> | |
| <div class="ai-card rounded-xl p-6 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-green-900/50 text-green-400 mr-4"> | |
| <i class="fas fa-chalkboard-teacher text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-white">Webinar Invitation</h4> | |
| <p class="text-xs text-gray-400">Matches your interests</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 text-sm mb-4">"Advances in Cardiac Imaging" webinar tomorrow at 4PM. 3 CME credits available.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-400">Relevance: 92%</span> | |
| <button class="text-xs text-accent hover:underline">Register Now</button> | |
| </div> | |
| </div> | |
| <!-- Recommendation 3 --> | |
| <div class="ai-card rounded-xl p-6 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-purple-900/50 text-purple-400 mr-4"> | |
| <i class="fas fa-graduation-cap text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-white">Learning Path</h4> | |
| <p class="text-xs text-gray-400">New in your specialty</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 text-sm mb-4">Complete this 5-module course on "Interventional Cardiology Techniques" to earn certification.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-400">Progress: 2/5 modules</span> | |
| <button class="text-xs text-accent hover:underline">Continue</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Knowledge Score --> | |
| <div class="ai-card rounded-xl p-6 mb-8 card-hover"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold text-white">Your Knowledge Score</h3> | |
| <div class="flex items-center"> | |
| <span class="text-accent font-bold text-xl mr-2">87</span> | |
| <span class="text-gray-400">/100</span> | |
| </div> | |
| </div> | |
| <div class="knowledge-meter mb-2"> | |
| <div class="knowledge-meter-fill" style="width: 87%"></div> | |
| </div> | |
| <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> | |
| </div> | |
| <!-- Quick Stats --> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="ai-card rounded-xl p-6 card-hover"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-900/50 text-accent mr-4"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Unread Messages</p> | |
| <p class="text-2xl font-bold text-white">3</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ai-card rounded-xl p-6 card-hover"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-900/50 text-green-400 mr-4"> | |
| <i class="fas fa-calendar-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Upcoming Events</p> | |
| <p class="text-2xl font-bold text-white">2</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ai-card rounded-xl p-6 card-hover"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-900/50 text-purple-400 mr-4"> | |
| <i class="fas fa-book-open text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">New Research</p> | |
| <p class="text-2xl font-bold text-white">5</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="ai-card rounded-xl p-6 card-hover"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold text-white">Recent Activity</h3> | |
| <a href="#" class="text-sm text-accent hover:underline">View All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-white">New message from Dr. Patel</p> | |
| <p class="text-sm text-gray-400">Regarding the upcoming cardiology conference...</p> | |
| <p class="text-xs text-gray-500 mt-1">2 hours ago</p> | |
| </div> | |
| <div class="ml-4 flex-shrink-0"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-300"> | |
| Unread | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 mr-4"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-white">Webinar reminder: Advances in Neurology</p> | |
| <p class="text-sm text-gray-400">Tomorrow at 3:00 PM IST</p> | |
| <p class="text-xs text-gray-500 mt-1">5 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 mr-4"> | |
| <i class="fas fa-book-open"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-white">New research published in your field</p> | |
| <p class="text-sm text-gray-400">"Impact of new surgical techniques on patient recovery"</p> | |
| <p class="text-xs text-gray-500 mt-1">1 day ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Global Connections --> | |
| <div class="ai-card rounded-xl p-6 mt-8 card-hover"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold text-white flex items-center"> | |
| <i class="fas fa-globe-asia text-accent mr-2"></i> Global Connections | |
| </h3> | |
| <a href="#" class="text-sm text-accent hover:underline">View All</a> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div class="flex items-center p-3 hover:bg-gray-800/50 rounded-lg transition-colors"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 mr-4"> | |
| <i class="fas fa-user-md"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-white">Dr. Chen (Cardiology)</p> | |
| <p class="text-xs text-gray-400">Singapore General Hospital</p> | |
| <div class="mt-1 flex flex-wrap gap-1"> | |
| <span class="interactive-chip text-xs">Interventional</span> | |
| <span class="interactive-chip text-xs">Research</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 hover:bg-gray-800/50 rounded-lg transition-colors"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 mr-4"> | |
| <i class="fas fa-user-md"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-white">Dr. Williams (Neurology)</p> | |
| <p class="text-xs text-gray-400">Mayo Clinic, USA</p> | |
| <div class="mt-1 flex flex-wrap gap-1"> | |
| <span class="interactive-chip text-xs">Parkinson's</span> | |
| <span class="interactive-chip text-xs">Clinical Trials</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 hover:bg-gray-800/50 rounded-lg transition-colors"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 mr-4"> | |
| <i class="fas fa-user-md"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-white">Dr. Tanaka (Cardiology)</p> | |
| <p class="text-xs text-gray-400">Tokyo University Hospital</p> | |
| <div class="mt-1 flex flex-wrap gap-1"> | |
| <span class="interactive-chip text-xs">Echocardiography</span> | |
| <span class="interactive-chip text-xs">Innovation</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Assistant Floating Button --> | |
| <div class="ai-assistant"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <!-- Public Content (Visible by default) --> | |
| <div id="public-content"> | |
| <!-- Dynamic Content Container --> | |
| <div id="dynamic-content" class="hidden"> | |
| <!-- Content will be loaded here dynamically --> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight"> | |
| The <span class="gradient-text">AI-Powered Network</span> for Tamil Nadu Doctors | |
| </h1> | |
| <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> | |
| <div class="flex space-x-4"> | |
| <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"> | |
| Join Now <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <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"> | |
| Explore Features <i class="fas fa-book-open ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-accent rounded-full opacity-10"></div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gold rounded-full opacity-10"></div> | |
| <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Medical professionals collaborating" | |
| class="rounded-xl shadow-xl w-full h-auto object-cover relative z-10 floating"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="wave-shape"> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path> | |
| </svg> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16 fade-in"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Intelligent Features for Medical Excellence</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Powered by AI to enhance your professional journey</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="ai-card p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-3">AI-Powered Insights</h3> | |
| <p class="text-gray-400">Get personalized recommendations for research, collaborations, and learning based on your profile and interests.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="ai-card p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-3">Global Network</h3> | |
| <p class="text-gray-400">Connect with specialists worldwide through intelligent matching and secure communication channels.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="ai-card p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-3">Adaptive Learning</h3> | |
| <p class="text-gray-400">Personalized learning paths with virtual case studies, CME courses, and certification programs tailored to your specialty.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="ai-card p-8 rounded-xl hover:shadow-lg transition-all card-hover glow-effect"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chart-network"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-3">Research Frontiers</h3> | |
| <p class="text-gray-400">Collaborative tools for research projects, grant applications, and publication tracking with impact analytics.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 fade-in relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl font-bold text-white mb-6">The Future of Medical Networking</h2> | |
| <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> | |
| <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> | |
| <div class="flex items-center"> | |
| <span class="verified-badge"> | |
| <i class="fas fa-shield-alt"></i> | |
| <span>TNMC Verified Platform</span> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute -top-4 -left-4 w-32 h-32 bg-accent rounded-full opacity-10"></div> | |
| <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-gold rounded-full opacity-10"></div> | |
| <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Medical team discussion" | |
| class="rounded-xl shadow-lg w-full h-auto object-cover relative z-10"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Registration Section --> | |
| <section id="register" class="py-16 fade-in"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="ai-card rounded-xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 md:p-12 text-white relative overflow-hidden"> | |
| <div class="absolute -top-20 -right-20 w-40 h-40 bg-white rounded-full opacity-10"></div> | |
| <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-accent rounded-full opacity-10"></div> | |
| <div class="relative z-10"> | |
| <h2 class="text-2xl font-bold mb-4">Join the Future of Medical Networking</h2> | |
| <p class="text-gray-300 mb-6">Become part of Tamil Nadu's premier AI-powered medical professional network.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-accent mt-1 mr-2"></i> | |
| <span>AI-curated professional opportunities</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-accent mt-1 mr-2"></i> | |
| <span>Secure, verified collaboration environment</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-accent mt-1 mr-2"></i> | |
| <span>Personalized learning and career growth</span> | |
| </li> | |
| </ul> | |
| <div class="flex items-center"> | |
| <span class="verified-badge bg-white/10"> | |
| <i class="fas fa-lock"></i> | |
| <span>End-to-end encrypted</span> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8 md:p-12 bg-gray-900 relative"> | |
| <div class="absolute -top-6 -left-6 w-16 h-16 bg-accent rounded-full opacity-10"></div> | |
| <div class="absolute -bottom-6 -right-6 w-16 h-16 bg-gold rounded-full opacity-10"></div> | |
| <div class="relative z-10"> | |
| <h3 class="text-xl font-semibold text-white mb-6">Create Your Verified Account</h3> | |
| <form id="registration-form"> | |
| <div class="mb-4"> | |
| <label for="full-name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label> | |
| <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"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="tnmc-id" class="block text-sm font-medium text-gray-300 mb-1">TNMC Registration Number</label> | |
| <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"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email Address</label> | |
| <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]"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="specialty" class="block text-sm font-medium text-gray-300 mb-1">Primary Specialty</label> | |
| <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"> | |
| <option value="">Select your specialty</option> | |
| <option value="cardiology">Cardiology</option> | |
| <option value="neurology">Neurology</option> | |
| <option value="pediatrics">Pediatrics</option> | |
| <option value="surgery">General Surgery</option> | |
| <option value="orthopedics">Orthopedics</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full btn-gold py-3 rounded-lg font-medium shadow-lg hover:shadow-xl transition-all transform hover:scale-105"> | |
| Complete Registration | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 fade-in"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Contact Us</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Our team is available to answer your questions about the platform.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="ai-card p-6 rounded-xl hover:shadow-lg transition-all card-hover"> | |
| <div class="text-accent mb-4"> | |
| <i class="fas fa-envelope text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Email Support</h3> | |
| <p class="text-gray-400 mb-2">For general inquiries and platform information</p> | |
| <a href="mailto:[email protected]" class="text-accent hover:underline">[email protected]</a> | |
| </div> | |
| <div class="ai-card p-6 rounded-xl hover:shadow-lg transition-all card-hover"> | |
| <div class="text-accent mb-4"> | |
| <i class="fas fa-phone-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Phone Support</h3> | |
| <p class="text-gray-400 mb-2">Available Monday-Friday, 9AM-5PM IST</p> | |
| <a href="tel:+914412345678" class="text-accent hover:underline">+91 44 1234 5678</a> | |
| </div> | |
| <div class="ai-card p-6 rounded-xl hover:shadow-lg transition-all card-hover"> | |
| <div class="text-accent mb-4"> | |
| <i class="fas fa-question-circle text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">FAQ & Help Center</h3> | |
| <p class="text-gray-400 mb-2">Find answers to common questions</p> | |
| <a href="#" class="text-accent hover:underline">Visit Help Center</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gradient-to-r from-primary to-secondary text-white py-12 relative overflow-hidden"> | |
| <div class="absolute -top-20 -left-20 w-64 h-64 bg-white rounded-full opacity-10"></div> | |
| <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-accent rounded-full opacity-10"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="md:col-span-2"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-atom text-2xl mr-2 text-accent"></i> | |
| <span class="text-xl font-bold">TN Medical Connect</span> | |
| </div> | |
| <p class="text-gray-300 mb-4">The AI-powered professional network for Tamil Nadu medical practitioners.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition-colors"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition-colors"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-300 hover:text-white transition-colors">About</a></li> | |
| <li><a href="#features" class="text-gray-300 hover:text-white transition-colors">Features</a></li> | |
| <li><a href="#register" class="text-gray-300 hover:text-white transition-colors">Register</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Login</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Terms of Use</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-700 text-sm text-gray-400"> | |
| <p>© 2023 TN Medical Connect. All rights reserved.</p> | |
| <p class="mt-2">TNMC verification does not imply endorsement of individual practitioners by the Tamil Nadu Medical Council.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-btn').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Profile dropdown toggle | |
| document.getElementById('profile-dropdown-btn').addEventListener('click', function() { | |
| const dropdown = document.getElementById('profile-dropdown'); | |
| dropdown.classList.toggle('hidden'); | |
| }); | |
| // Sidebar toggle | |
| document.getElementById('sidebar-toggle').addEventListener('click', function() { | |
| document.body.classList.toggle('sidebar-collapsed'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Form validation for registration | |
| const registrationForm = document.querySelector('#registration-form'); | |
| if (registrationForm) { | |
| registrationForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Simple validation | |
| const fullName = document.getElementById('full-name').value; | |
| const tnmcId = document.getElementById('tnmc-id').value; | |
| const email = document.getElementById('email').value; | |
| const specialty = document.getElementById('specialty').value; | |
| if (!fullName || !tnmcId || !email || !specialty) { | |
| alert('Please fill in all required fields.'); | |
| return; | |
| } | |
| // Hide public content and show verification steps | |
| document.getElementById('public-content').classList.add('hidden'); | |
| document.getElementById('public-header').classList.add('hidden'); | |
| document.getElementById('verification-steps').classList.remove('hidden'); | |
| }); | |
| } | |
| // Go to dashboard button | |
| document.getElementById('go-to-dashboard').addEventListener('click', function() { | |
| document.getElementById('verification-steps').classList.add('hidden'); | |
| document.getElementById('registration-success').classList.add('hidden'); | |
| // Show dashboard | |
| document.getElementById('dashboard-header').classList.remove('hidden'); | |
| document.getElementById('dashboard-sidebar').classList.remove('hidden'); | |
| document.getElementById('dashboard-content').classList.remove('hidden'); | |
| }); | |
| // Demo login button (for demonstration purposes) | |
| document.querySelector('a[href="#"]').addEventListener('click', function(e) { | |
| if (this.textContent.includes('Login')) { | |
| e.preventDefault(); | |
| // Hide public content and show dashboard | |
| document.getElementById('public-content').classList.add('hidden'); | |
| document.getElementById('public-header').classList.add('hidden'); | |
| // Show dashboard | |
| document.getElementById('dashboard-header').classList.remove('hidden'); | |
| document.getElementById('dashboard-sidebar').classList.remove('hidden'); | |
| document.getElementById('dashboard-content').classList.remove('hidden'); | |
| } | |
| }); | |
| // Animation observer for fade-in effects | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| fadeElements.forEach(el => { | |
| el.style.opacity = 0; | |
| el.style.transform = 'translateY(20px)'; | |
| observer.observe(el); | |
| }); | |
| // GSAP animations | |
| gsap.registerPlugin(ScrollTrigger); | |
| // Animate hero section elements | |
| gsap.from(".hero-gradient h1", { | |
| scrollTrigger: { | |
| trigger: ".hero-gradient", | |
| start: "top bottom", | |
| toggleActions: "play none none none" | |
| }, | |
| y: 50, | |
| opacity: 0, | |
| duration: 1, | |
| ease: "power3.out" | |
| }); | |
| gsap.from(".hero-gradient p", { | |
| scrollTrigger: { | |
| trigger: ".hero-gradient", | |
| start: "top bottom", | |
| toggleActions: "play none none none" | |
| }, | |
| y: 50, | |
| opacity: 0, | |
| duration: 1, | |
| delay: 0.2, | |
| ease: "power3.out" | |
| }); | |
| gsap.from(".hero-gradient a", { | |
| scrollTrigger: { | |
| trigger: ".hero-gradient", | |
| start: "top bottom", | |
| toggleActions: "play none none none" | |
| }, | |
| y: 50, | |
| opacity: 0, | |
| duration: 1, | |
| delay: 0.4, | |
| ease: "power3.out", | |
| stagger: 0.1 | |
| }); | |
| // Animate feature cards | |
| gsap.from(".card-hover", { | |
| scrollTrigger: { | |
| trigger: "#features", | |
| start: "top 80%", | |
| toggleActions: "play none none none" | |
| }, | |
| y: 30, | |
| opacity: 0, | |
| duration: 0.8, | |
| stagger: 0.1, | |
| ease: "back.out" | |
| }); | |
| // AI Assistant interaction | |
| const aiAssistant = document.querySelector('.ai-assistant'); | |
| aiAssistant.addEventListener('click', function() { | |
| // In a real implementation, this would open a chat interface | |
| alert('AI Assistant: Hello! How can I help you today?'); | |
| }); | |
| // Interactive chips animation | |
| const chips = document.querySelectorAll('.interactive-chip'); | |
| chips.forEach(chip => { | |
| chip.addEventListener('mouseenter', function() { | |
| gsap.to(this, { | |
| scale: 1.05, | |
| duration: 0.2, | |
| ease: "power1.out" | |
| }); | |
| }); | |
| chip.addEventListener('mouseleave', function() { | |
| gsap.to(this, { | |
| scale: 1, | |
| duration: 0.2, | |
| ease: "power1.out" | |
| }); | |
| }); | |
| }); | |
| // Knowledge score animation | |
| const knowledgeMeter = document.querySelector('.knowledge-meter-fill'); | |
| if (knowledgeMeter) { | |
| gsap.from(knowledgeMeter, { | |
| width: 0, | |
| duration: 1.5, | |
| delay: 0.5, | |
| ease: "power2.out" | |
| }); | |
| } | |
| </script> | |
| <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> | |
| </html> |