HTML 代码
<div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen p-4 sm:p-6 lg:p-8">
<!-- Outer Container with muted primary color accents -->
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
border-t-4 border-l-4 border-yellow-500 dark:border-yellow-600
md:border-t-8 md:border-l-8 md:border-yellow-500 dark:md:border-yellow-600">
<!-- Header Section with strong geometric lines -->
<div class="bg-blue-600 dark:bg-blue-800 text-white p-4 sm:p-6 lg:p-8
relative overflow-hidden
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-gradient-to-br before:from-blue-700 before:to-transparent before:opacity-20 before:z-0
after:content-[''] after:absolute after:bottom-0 after:right-0 after:w-full after:h-full after:bg-gradient-to-tl after:from-red-600 after:to-transparent after:opacity-10 after:z-0">
<div class="relative z-10 flex flex-col sm:flex-row items-center justify-between">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 sm:mb-0
tracking-tight text-white dark:text-gray-50 flex items-center">
<span class="block w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 bg-red-500 dark:bg-red-600 mr-3 rounded-sm transform rotate-45"></span>
Medical Index
</h1>
<div class="flex items-center space-x-3">
<span class="text-sm italic opacity-80 hidden md:block">Last Updated: 2023-10-27</span>
<img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Admin Avatar" class="w-10 h-10 rounded-full-lg border-2 border-white dark:border-gray-300 shadow-md">
</div>
</div>
</div>
<!-- Main Content Area: Search and Navigation -->
<div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Search and Filters Section -->
<div class="md:col-span-1 border-r-4 border-gray-200 dark:border-gray-700 pr-0 md:pr-6 lg:pr-8 space-y-6">
<div class="mb-4">
<label for="search-toc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Documentation</label>
<div class="relative">
<input type="text" id="search-toc" placeholder="Search diseases, treatments..."
class="w-full p-3 pl-10 rounded-lg border-2 border-red-300 dark:border-red-600
bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100
focus:ring-blue-500 focus:border-blue-500 transition duration-200 ease-in-out
placeholder-gray-400 dark:placeholder-gray-500">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
<!-- Filter Options with primary color toggles -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Filters</h3>
<div class="flex flex-wrap gap-3">
<button class="px-4 py-2 rounded-full text-sm font-medium
bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100
hover:bg-blue-200 dark:hover:bg-blue-600 transition duration-200">All Topics</button>
<button class="px-4 py-2 rounded-full text-sm font-medium
bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diseases</button>
<button class="px-4 py-2 rounded-full text-sm font-medium
bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Treatments</button>
<button class="px-4 py-2 rounded-full text-sm font-medium
bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Protocols</button>
<button class="px-4 py-2 rounded-full text-sm font-medium
bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diagnostics</button>
</div>
</div>
<!-- Recent Updates Section -->
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Recent Updates</h3>
<ul class="space-y-3">
<li class="flex items-start">
<span class="flex-shrink-0 w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-2"></span>
<a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">New Guidelines for Diabetes Management</a>
</li>
<li class="flex items-start">
<span class="flex-shrink-0 w-2 h-2 bg-red-500 rounded-full mt-2 mr-2"></span>
<a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Updated COVID-19 Vaccination Protocols</a>
</li>
<li class="flex items-start">
<span class="flex-shrink-0 w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full mt-2 mr-2"></span>
<a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Introduction to AI in Diagnostics</a>
</li>
</ul>
</div>
</div>
<!-- Table of Contents Main Navigation -->
<div class="md:col-span-2 space-y-8">
<!-- Section 1: Core Medical Conditions -->
<section>
<h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
<span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
Core Medical Conditions
</h2>
<ul class="space-y-3 pl-4 sm:pl-6">
<li><a href="#cardiovascular" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Cardiovascular Diseases</a>
<ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><a href="#hypertension" class="hover:text-blue-600 dark:hover:text-blue-400">Hypertension: Diagnosis & Management</a></li>
<li><a href="#ischemic-heart-disease" class="hover:text-blue-600 dark:hover:text-blue-400">Ischemic Heart Disease</a></li>
<li><a href="#arrhythmias" class="hover:text-blue-600 dark:hover:text-blue-400">Arrhythmias and ECG Interpretation</a></li>
</ul>
</li>
<li><a href="#respiratory" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Respiratory Diseases</a>
<ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><a href="#asthma" class="hover:text-blue-600 dark:hover:text-blue-400">Asthma and COPD</a></li>
<li><a href="#pneumonia" class="hover:text-blue-600 dark:hover:text-blue-400">Pneumonia: Types & Treatment</a></li>
</ul>
</li>
<li><a href="#endocrine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Endocrine Disorders</a>
<ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><a href="#diabetes-mellitus" class="hover:text-blue-600 dark:hover:text-blue-400">Diabetes Mellitus: Type 1 & 2</a></li>
<li><a href="#thyroid-disorders" class="hover:text-blue-600 dark:hover:text-blue-400">Thyroid Disorders</a></li>
</ul>
</li>
</ul>
</section>
<!-- Section 2: Medical Procedures & Diagnostics -->
<section>
<h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
<span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
Medical Procedures & Diagnostics
</h2>
<ul class="space-y-3 pl-4 sm:pl-6">
<li><a href="#surgical-techniques" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Surgical Techniques</a>
<ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><a href="#minimally-invasive" class="hover:text-blue-600 dark:hover:text-blue-400">Minimally Invasive Surgery</a></li>
<li><a href="#post-operative-care" class="hover:text-blue-600 dark:hover:text-blue-400">Post-Operative Care Protocols</a></li>
</ul>
</li>
<li><a href="#imaging" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Medical Imaging</a>
<ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><a href="#mri-ct-scans" class="hover:text-blue-600 dark:hover:text-blue-400">MRI & CT Scans Interpretation</a></li>
<li><a href="#ultrasound" class="hover:text-blue-600 dark:hover:text-blue-400">Diagnostic Ultrasound</a></li>
</ul>
</li>
</ul>
</section>
<!-- Section 3: Pharmacology & Therapeutics -->
<section>
<h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
<span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
Pharmacology & Therapeutics
</h2>
<ul class="space-y-3 pl-4 sm:pl-6">
<li><a href="#drug-classes" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Drug Classes & Mechanisms</a>
<ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><a href="#antibiotics" class="hover:text-blue-600 dark:hover:text-blue-400">Antibiotics: Spectrum & Resistance</a></li>
<li><a href="#analgesics" class="hover:text-blue-600 dark:hover:text-blue-400">Analgesics & Pain Management</a></li>
</ul>
</li>
<li><a href="#vaccines" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Vaccines & Immunization</a>
<ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><a href="#childhood-immunization" class="hover:text-blue-600 dark:hover:text-blue-400">Childhood Immunization Schedule</a></li>
</ul>
</li>
</ul>
</section>
<!-- Section 4: Public Health & Epidemiology -->
<section>
<h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
<span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
Public Health & Epidemiology
</h2>
<ul class="space-y-3 pl-4 sm:pl-6">
<li><a href="#disease-outbreaks" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Disease Outbreaks & Control</a></li>
<li><a href="#preventative-medicine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Preventative Medicine Strategies</a></li>
</ul>
</section>
</div>
</div>
<!-- Footer with simple branding -->
<div class="bg-gray-100 dark:bg-gray-800 p-4 sm:p-6 lg:p-8 text-center text-gray-600 dark:text-gray-400 text-sm
relative overflow-hidden
before:content-[''] before:absolute before:bottom-0 before:left-0 before:w-full before:h-1 before:bg-yellow-500 dark:before:bg-yellow-600 before:z-0">
<p class="relative z-10">© 2023 Medical Knowledge Hub. All rights reserved.</p>
</div>
</div>
</div>