Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MediTeach Pro | AI Medical Learning Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1a75bc', | |
| secondary: '#085d9e', | |
| accent: '#ff7e46', | |
| dark: '#1c2e4a', | |
| light: '#f5f7fa', | |
| success: '#4caf50', | |
| warning: '#ff9800' | |
| }, | |
| fontFamily: { | |
| sans: ['Open Sans', 'sans-serif'], | |
| heading: ['Roboto Slab', 'serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .flashcard { | |
| perspective: 1000px; | |
| height: 220px; | |
| } | |
| .flashcard-inner { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .flashcard.flipped .flashcard-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .flashcard-front, .flashcard-back { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| backface-visibility: hidden; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.1); | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .flashcard-back { | |
| transform: rotateY(180deg); | |
| } | |
| .tab-content-section { | |
| display: none; | |
| animation: fadeEffect 0.5s; | |
| } | |
| @keyframes fadeEffect { | |
| from {opacity: 0;} | |
| to {opacity: 1;} | |
| } | |
| .active-tab { | |
| display: block; | |
| } | |
| .video-card:hover .overlay { | |
| opacity: 1; | |
| } | |
| #progressCircle { | |
| transform: rotate(-90deg); | |
| transform-origin: center; | |
| } | |
| .progress-ring__circle { | |
| stroke-dasharray: 283; | |
| transition: stroke-dashoffset 0.5s; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light font-sans"> | |
| <!-- Header --> | |
| <header class="bg-dark text-white shadow-lg"> | |
| <div class="container mx-auto py-4 px-6 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-heartbeat text-3xl text-accent"></i> | |
| <h1 class="text-2xl font-bold heading">MediTeach <span class="text-primary">Pro</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:block"> | |
| <div class="flex space-x-1"> | |
| <div class="h-3 w-3 rounded-full bg-success"></div> | |
| <div class="h-3 w-3 rounded-full bg-warning"></div> | |
| <div class="h-3 w-3 rounded-full bg-accent"></div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-primary rounded-full h-10 w-10 flex items-center justify-center"> | |
| <span class="text-white font-bold">AM</span> | |
| </div> | |
| <span class="absolute -top-1 -right-1 bg-accent text-white rounded-full h-5 w-5 flex items-center justify-center text-xs">1</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="mb-8"> | |
| <div class="relative max-w-2xl mx-auto"> | |
| <input type="text" placeholder="Search medical topics, flashcards, videos..." | |
| class="w-full py-3 px-6 pr-12 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-white shadow-sm"> | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-primary"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Sidebar --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-bold text-dark mb-4 heading">Your Learning Progress</h2> | |
| <div class="flex justify-center mb-4"> | |
| <div class="relative w-40 h-40"> | |
| <svg id="progressCircle" width="140" height="140" viewBox="0 0 100 100"> | |
| <circle cx="50" cy="50" r="45" fill="transparent" stroke="#e6e6e6" stroke-width="8"/> | |
| <circle class="progress-ring__circle" cx="50" cy="50" r="45" fill="transparent" | |
| stroke="#4caf50" stroke-width="8" stroke-dashoffset="113" /> | |
| <text x="50" y="50" text-anchor="middle" dy="6" class="text-2xl font-bold fill-dark">68%</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Cardiology</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 rounded-full bg-primary" style="width:85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Neurology</span> | |
| <span>45%</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 rounded-full bg-accent" style="width:45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Oncology</span> | |
| <span>72%</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 rounded-full bg-success" style="width:72%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-bold text-dark mb-4 heading">Premium Resources</h2> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <button class="filter-btn px-3 py-1 text-sm rounded-full bg-primary text-white" data-filter="all">All</button> | |
| <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="cardiology">Cardiology</button> | |
| <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="pathology">Pathology</button> | |
| <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="general">General</button> | |
| <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="book">Books</button> | |
| <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="video">Videos</button> | |
| </div> | |
| <div class="space-y-4" id="resourcesList"> | |
| <a href="#" class="resource-item flex items-center p-3 hover:bg-gray-50 rounded-lg transition" data-topic="cardiology" data-type="book"> | |
| <div class="bg-primary bg-opacity-10 p-2 rounded-lg"> | |
| <i class="fas fa-book-medical text-primary text-lg"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="font-medium text-dark">First Aid Step 1</div> | |
| <div class="text-sm text-gray-600 mt-1">Comprehensive review</div> | |
| </div> | |
| </a> | |
| <a href="#" class="resource-item flex items-center p-3 hover:bg-gray-50 rounded-lg transition" data-topic="general" data-type="handbook"> | |
| <div class="bg-accent bg-opacity-10 p-2 rounded-lg"> | |
| <i class="fas fa-book-open text-accent text-lg"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="font-medium text-dark">Oxford Clinical Handbook</div> | |
| <div class="text-sm text-gray-600 mt-1">Practical guidance</div> | |
| </div> | |
| </a> | |
| <a href="#" class="resource-item flex items-center p-3 hover:bg-gray-50 rounded-lg transition" data-topic="pathology" data-type="video"> | |
| <div class="bg-success bg-opacity-10 p-2 rounded-lg"> | |
| <i class="fas fa-heartbeat text-success text-lg"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="font-medium text-dark">Pathoma Videos</div> | |
| <div class="text-sm text-gray-600 mt-1">Pathology essentials</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:col-span-2"> | |
| <!-- Header Tabs --> | |
| <div class="bg-white rounded-t-xl shadow overflow-hidden"> | |
| <div class="flex border-b"> | |
| <button id="overviewTab" class="tab-button bg-primary text-white px-6 py-3 font-medium">Topic Overview</button> | |
| <button id="videosTab" class="tab-button bg-white px-6 py-3 font-medium hover:bg-gray-100">Video Lectures</button> | |
| <button id="flashcardsTab" class="tab-button bg-white px-6 py-3 font-medium hover:bg-gray-100">Flashcards</button> | |
| <button id="quizTab" class="tab-button bg-white px-6 py-3 font-medium hover:bg-gray-100">Practice Quiz</button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="p-6"> | |
| <!-- Overview Section --> | |
| <div id="overviewSection" class="tab-content-section active-tab"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold heading text-dark">Cardiology Fundamentals</h2> | |
| <span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">Complete Learning Path</span> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl p-6 mb-6"> | |
| <h3 class="text-xl font-bold heading mb-4">Introduction to Cardiovascular System</h3> | |
| <p class="text-gray-600 mb-4">This comprehensive module covers all essential aspects of cardiology including anatomy, physiology, common pathologies, and treatment approaches.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-bold text-dark mb-2"><i class="fas fa-book-medical text-primary mr-2"></i> Learning Objectives</h4> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Understand cardiac anatomy and physiology</li> | |
| <li>Recognize common cardiovascular pathologies</li> | |
| <li>Interpret ECG findings</li> | |
| <li>Master pharmacological treatments</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-bold text-dark mb-2"><i class="fas fa-clock text-primary mr-2"></i> Estimated Completion</h4> | |
| <div class="flex items-center text-gray-600"> | |
| <div class="w-12 h-12 mr-4"> | |
| <svg viewBox="0 0 36 36" class="circular-chart"> | |
| <path class="circle-bg" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#e6e6e6" stroke-width="3"/> | |
| <path class="circle" stroke-dasharray="60, 100" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#1a75bc" stroke-width="3" stroke-linecap="round"/> | |
| <text x="18" y="20.5" class="percentage" text-anchor="middle" fill="#1a75bc" font-size="8">60 min</text> | |
| </svg> | |
| </div> | |
| <div> | |
| <p class="text-sm">Complete all sections including:</p> | |
| <p class="text-sm">• 4 Video Lectures</p> | |
| <p class="text-sm">• 12 Flashcards</p> | |
| <p class="text-sm">• 10 Question Quiz</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-primary bg-opacity-10 border-l-4 border-primary p-4 rounded-r-lg"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-lightbulb text-primary text-xl mt-1"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-bold text-dark">Learning Tip</h4> | |
| <p class="text-gray-600 text-sm">Proceed through each section in order for optimal learning retention. Start with the overview, then videos, flashcards, and finally test your knowledge with the quiz.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-6"> | |
| <button class="bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-secondary transition flex items-center mx-auto" onclick="openTab('videosSection'); setActiveTab(document.getElementById('videosTab'))"> | |
| Continue to Video Lectures <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- Flashcard 1 --> | |
| <div class="flashcard" onclick="this.classList.toggle('flipped')"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-white border border-gray-200"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="h-8 w-8 flex items-center justify-center bg-primary bg-opacity-10 text-primary rounded-full"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <span class="text-xs font-semibold text-primary">CARDIO PHYSIOLOGY</span> | |
| </div> | |
| <h3 class="font-bold text-xl heading mb-3">Frank-Starling Law</h3> | |
| <p class="text-gray-600">Describe the relationship expressed in the Frank-Starling law of the heart.</p> | |
| <div class="absolute bottom-4 right-4 text-gray-400"> | |
| <i class="fas fa-repeat"></i> Flip to see | |
| </div> | |
| </div> | |
| <div class="flashcard-back bg-primary text-white"> | |
| <div class="text-xs mb-4">ANSWER</div> | |
| <p class="mb-2">The Frank-Starling Law states that the stroke volume of the heart increases in response to an increase in the volume of blood filling the heart (end-diastolic volume).</p> | |
| <p class="text-sm opacity-80 mt-2"><strong>Key Point:</strong> Intrinsic mechanism of the heart that causes increased contraction force with increased stretch.</p> | |
| <div class="absolute bottom-4 right-4 text-white opacity-70"> | |
| <i class="fas fa-book-open"></i> Oxford Cardiovascular 4th Ed. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Flashcard 2 --> | |
| <div class="flashcard" onclick="this.classList.toggle('flipped')"> | |
| <div class="flashcard-inner"> | |
| <div class="flashcard-front bg-white border border-gray-200"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="h-8 w-8 flex items-center justify-center bg-warning bg-opacity-10 text-warning rounded-full"> | |
| <i class="fas fa-file-medical"></i> | |
| </div> | |
| <span class="text-xs font-semibold text-warning">PHARMACOLOGY</span> | |
| </div> | |
| <h3 class="font-bold text-xl heading mb-3">ACE Inhibitors</h3> | |
| <p class="text-gray-600">What is the mechanism of action and primary clinical use for ACE inhibitors?</p> | |
| <div class="absolute bottom-4 right-4 text-gray-400"> | |
| <i class="fas fa-repeat"></i> Flip to see | |
| </div> | |
| </div> | |
| <div class="flashcard-back bg-secondary text-white"> | |
| <div class="text-xs mb-4">ANSWER</div> | |
| <p><strong>Mechanism:</strong> Inhibit angiotensin-converting enzyme → ↓ angiotensin II → ↓ vasoconstriction and ↓ aldosterone secretion.</p> | |
| <p class="my-2"><strong>Uses:</strong> Hypertension, CHF, diabetic nephropathy, myocardial infarction prevention.</p> | |
| <div class="text-sm opacity-80 mt-2"><strong>First Aid Tip:</strong> Common side effect: dry cough due to increased bradykinin.</div> | |
| <div class="absolute bottom-4 right-4 text-white opacity-70"> | |
| <i class="fas fa-stethoscope"></i> First Aid 2023 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="btn-action bg-primary text-white px-6 py-2 rounded-lg font-medium hover:bg-secondary transition flex items-center"> | |
| <i class="fas fa-plus-circle mr-2"></i> New Flashcard Set | |
| </button> | |
| <button class="btn-action bg-white text-dark border border-gray-300 px-6 py-2 rounded-lg font-medium hover:bg-gray-50 transition flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Shuffle Cards | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Videos Section --> | |
| <div id="videosSection" class="tab-content-section"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold heading text-dark">Cardiology Video Lectures</h2> | |
| <span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">4 Videos</span> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl p-6 mb-6"> | |
| <p class="text-gray-600 mb-4">Select the correct answer based on your clinical knowledge:</p> | |
| <div class="text-xl font-medium heading mb-6"> | |
| A 58-year-old man presents to the emergency department with severe, crushing substernal chest pain that started 3 hours ago. He has a history of hypertension and smokes 1 pack per day. ECG shows ST-segment elevation in leads V1-V4. What medication should be administered immediately to reduce infarct size? | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="quiz-option"> | |
| <input type="radio" id="option1" name="quiz" class="hidden"> | |
| <label for="option1" class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50"> | |
| <div class="flex-shrink-0 w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-4 relative"> | |
| <div class="absolute w-3 h-3 rounded-full bg-transparent transition"></div> | |
| </div> | |
| <div class="font-medium text-gray-800">A) Nitroglycerin sublingual</div> | |
| </label> | |
| </div> | |
| <div class="quiz-option"> | |
| <input type="radio" id="option2" name="quiz" class="hidden"> | |
| <label for="option2" class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50"> | |
| <div class="flex-shrink-0 w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-4 relative"> | |
| <div class="absolute w-3 h-3 rounded-full bg-transparent transition"></div> | |
| </div> | |
| <div class="font-medium text-gray-800">B) Aspirin oral</div> | |
| </label> | |
| </div> | |
| <div class="quiz-option bg-green-50 border-green-100"> | |
| <input type="radio" id="option3" name="quiz" class="hidden"> | |
| <label for="option3" class="flex items-center p-4 border-2 border-green-500 rounded-lg cursor-pointer relative"> | |
| <div class="flex-shrink-0 w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-4 relative"> | |
| <div class="absolute w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="font-medium text-gray-800">C) Tissue plasminogen activator (tPA)</div> | |
| <div class="absolute top-0 right-0 mt-2 mr-3 text-green-500"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| </label> | |
| <div class="mt-3 p-4 bg-green-50 rounded-lg"> | |
| <p class="font-bold text-green-700 mb-2">Correct!</p> | |
| <p class="text-green-800">tPA is indicated for ST-elevation myocardial infarction when PCI is not available within 90 minutes. It helps dissolve the clot causing the MI, reducing infarct size.</p> | |
| </div> | |
| </div> | |
| <div class="quiz-option"> | |
| <input type="radio" id="option4" name="quiz" class="hidden"> | |
| <label for="option4" class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50"> | |
| <div class="flex-shrink-0 w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-4 relative"> | |
| <div class="absolute w-3 h-3 rounded-full bg-transparent transition"></div> | |
| </div> | |
| <div class="font-medium text-gray-800">D) Clopidogrel oral</div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between"> | |
| <button class="bg-gray-100 text-dark px-5 py-2 rounded-lg font-medium hover:bg-gray-200 transition flex items-center"> | |
| <i class="fas fa-arrow-left mr-2"></i> Previous | |
| </button> | |
| <button class="bg-primary text-white px-5 py-2 rounded-lg font-medium hover:bg-secondary transition"> | |
| Next Question <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">Watch these videos in sequence to build your understanding of cardiovascular concepts.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Video Card 1 --> | |
| <div class="bg-white rounded-xl shadow overflow-hidden"> | |
| <div class="relative"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-t-xl w-full h-40"></div> | |
| <div class="overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition"> | |
| <div class="w-16 h-16 flex items-center justify-center rounded-full bg-white bg-opacity-90"> | |
| <i class="fas fa-play text-primary text-2xl" style="margin-left: 4px;"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-xs mb-3"> | |
| <span class="bg-primary bg-opacity-10 text-primary px-2 py-1 rounded">Step 1</span> | |
| <span class="mx-2">•</span> | |
| <span class="text-gray-500"><i class="far fa-clock mr-1"></i> 18 min</span> | |
| </div> | |
| <h3 class="font-bold text-lg heading mb-2">Cardiomyopathies Review</h3> | |
| <p class="text-gray-600 text-sm mb-4">Comprehensive guide to dilated, hypertrophic, and restrictive cardiomyopathies with ECG interpretations.</p> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 bg-primary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-graduation-cap text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-xs font-medium text-gray-700">Dr. Jonathan Stern</div> | |
| <div class="text-xs text-gray-500">Johns Hopkins Medicine</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Card 2 --> | |
| <div class="bg-white rounded-xl shadow overflow-hidden"> | |
| <div class="relative"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-t-xl w-full h-40"></div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-xs mb-3"> | |
| <span class="bg-success bg-opacity-10 text-success px-2 py-1 rounded">Ck Path</span> | |
| <span class="mx-2">•</span> | |
| <span class="text-gray-500"><i class="far fa-clock mr-1"></i> 24 min</span> | |
| </div> | |
| <h3 class="font-bold text-lg heading mb-2">Neuroanatomy Essentials</h3> | |
| <p class="text-gray-600 text-sm mb-4">Master stroke localization with CT/MRI correlations. Includes lesions of the motor and sensory pathways.</p> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 bg-accent bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user-md text-accent"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-xs font-medium text-gray-700">Dr. Emily Parkinson</div> | |
| <div class="text-xs text-gray-500">Oxford Medical Videos</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Card 3 --> | |
| <div class="bg-white rounded-xl shadow overflow-hidden"> | |
| <div class="relative"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-t-xl w-full h-40"></div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-xs mb-3"> | |
| <span class="bg-warning bg-opacity-10 text-warning px-2 py-1 rounded">Step 2</span> | |
| <span class="mx-2">•</span> | |
| <span class="text-gray-500"><i class="far fa-clock mr-1"></i> 32 min</span> | |
| </div> | |
| <h3 class="font-bold text-lg heading mb-2">Pharmacokinetics Deep Dive</h3> | |
| <p class="text-gray-600 text-sm mb-4">Understanding drug absorption, distribution, metabolism and excretion with clinical correlations.</p> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 bg-secondary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-flask text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-xs font-medium text-gray-700">Dr. Michael Chen</div> | |
| <div class="text-xs text-gray-500">First Aid Team</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Card 4 --> | |
| <div class="bg-white rounded-xl shadow overflow-hidden"> | |
| <div class="relative"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-t-xl w-full h-40"></div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center text-xs mb-3"> | |
| <span class="bg-success bg-opacity-10 text-success px-2 py-1 rounded">Pathology</span> | |
| <span class="mx-2">•</span> | |
| <span class="text-gray-500"><i class="far fa-clock mr-1"></i> 15 min</span> | |
| </div> | |
| <h3 class="font-bold text-lg heading mb-2">Inflammatory Pathways</h3> | |
| <p class="text-gray-600 text-sm mb-4">Innate vs. adaptive immunity with focus on cytokine signaling pathways and clinical applications.</p> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 bg-primary bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-microscope text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-xs font-medium text-gray-700">Dr. Anika Patel</div> | |
| <div class="text-xs text-gray-500">Harvard Medical School</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-secondary transition flex items-center mx-auto" onclick="openTab('flashcardsSection'); setActiveTab(document.getElementById('flashcardsTab'))"> | |
| Continue to Flashcards <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <i class="fas fa-heartbeat text-3xl text-accent"></i> | |
| <h2 class="text-2xl font-bold heading">MediTeach Pro</h2> | |
| </div> | |
| <p class="text-gray-400">Medical education platform powered by AI. Developed for tomorrow's physicians.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4 heading">Premium Resources</h3> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="hover:text-white transition"><i class="fas fa-star text-accent mr-2"></i> First Aid USMLE Series</li> | |
| <li class="hover:text-white transition"><i class="fas fa-star text-accent mr-2"></i> Oxford Clinical Handbooks</li> | |
| <li class="hover:text-white transition"><i class="fas fa-star text-accent mr-2"></i> Pathoma Foundation Series</li> | |
| <li class="hover:text-white transition"><i class="fas fa-star text-accent mr-2"></i> Robbins Pathology</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4 heading">Download App</h3> | |
| <p class="text-gray-400 mb-4">Get our mobile app on the App Store or Google Play</p> | |
| <div class="flex space-x-3"> | |
| <button class="bg-gray-700 hover:bg-gray-600 transition text-white rounded-lg px-4 py-2 flex items-center"> | |
| <i class="fab fa-apple mr-2 text-xl"></i> | |
| <span>App Store</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 transition text-white rounded-lg px-4 py-2 flex items-center"> | |
| <i class="fab fa-google-play mr-2 text-lg"></i> | |
| <span>Play Store</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm"> | |
| <p>MediTeach Pro - Professional Medical Education Platform © 2023. For educational purposes only.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Resource filtering functionality | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| // Update active filter button | |
| document.querySelectorAll('.filter-btn').forEach(b => { | |
| b.classList.remove('bg-primary', 'text-white'); | |
| b.classList.add('bg-gray-200'); | |
| }); | |
| this.classList.remove('bg-gray-200'); | |
| this.classList.add('bg-primary', 'text-white'); | |
| const filter = this.dataset.filter; | |
| const resources = document.querySelectorAll('.resource-item'); | |
| resources.forEach(resource => { | |
| if (filter === 'all' || | |
| resource.dataset.topic === filter || | |
| resource.dataset.type === filter) { | |
| resource.style.display = 'flex'; | |
| } else { | |
| resource.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Tab functionality | |
| document.getElementById('overviewTab').addEventListener('click', function() { | |
| openTab('overviewSection'); | |
| setActiveTab(this); | |
| }); | |
| document.getElementById('videosTab').addEventListener('click', function() { | |
| openTab('videosSection'); | |
| setActiveTab(this); | |
| }); | |
| document.getElementById('flashcardsTab').addEventListener('click', function() { | |
| openTab('flashcardsSection'); | |
| setActiveTab(this); | |
| }); | |
| document.getElementById('quizTab').addEventListener('click', function() { | |
| openTab('quizSection'); | |
| setActiveTab(this); | |
| }); | |
| function openTab(tabId) { | |
| var tabContents = document.getElementsByClassName('tab-content-section'); | |
| for (var i = 0; i < tabContents.length; i++) { | |
| tabContents[i].classList.remove('active-tab'); | |
| } | |
| document.getElementById(tabId).classList.add('active-tab'); | |
| } | |
| function setActiveTab(tabBtn) { | |
| var tabs = document.getElementsByClassName('tab-button'); | |
| for (var i = 0; i < tabs.length; i++) { | |
| tabs[i].classList.remove('bg-primary', 'text-white'); | |
| tabs[i].classList.add('bg-white'); | |
| } | |
| tabBtn.classList.remove('bg-white'); | |
| tabBtn.classList.add('bg-primary', 'text-white'); | |
| } | |
| // Flashcard functionality | |
| document.querySelectorAll('.flashcard').forEach(card => { | |
| card.addEventListener('click', function() { | |
| this.classList.toggle('flipped'); | |
| }); | |
| }); | |
| // Quiz option selection | |
| document.querySelectorAll('.quiz-option').forEach(option => { | |
| option.querySelector('input').addEventListener('change', function() { | |
| this.closest('.quiz-option').classList.add('bg-green-50', 'border-green-100'); | |
| }); | |
| }); | |
| </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=SAboodh/ai-midical-study" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |