+4 more
Create illustrated mindmap infographic in table formate for 5 types of cellular adaptations , in 3 colums of introduction, mechanism and types. Include whole text from images, nothing must be skipped.
analyse_media
analyse_media
analyse_media
Running Command
mkdir -p /tmp/workspace/cellular-adaptations && ls /tmp/workspace/
Writing File
~/cellular-adaptations/cellular_adaptations_infographic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cellular Adaptations – Mindmap Infographic Table</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Nunito', Arial, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
padding: 30px 20px;
color: #333;
}
.page-title {
text-align: center;
color: #fff;
margin-bottom: 30px;
}
.page-title h1 {
font-size: 2.4em;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
background: linear-gradient(90deg, #f9ca24, #f0932b, #eb4d4b, #6c5ce7, #00b894);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-title p {
font-size: 1em;
color: #aad4f5;
margin-top: 6px;
letter-spacing: 1px;
}
.subtitle-bar {
display: inline-block;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
padding: 5px 22px;
border-radius: 20px;
font-size: 0.85em;
margin-top: 8px;
letter-spacing: 1px;
}
/* MAIN TABLE WRAPPER */
.table-wrapper {
overflow-x: auto;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
table {
width: 100%;
min-width: 900px;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border-radius: 20px;
overflow: hidden;
}
/* HEADER ROW */
thead tr th {
padding: 18px 20px;
font-size: 1.05em;
font-weight: 800;
text-align: center;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #fff;
}
th.col-adaptation { background: #2d3436; width: 12%; }
th.col-intro { background: #0984e3; width: 29%; }
th.col-mechanism { background: #6c5ce7; width: 29%; }
th.col-types { background: #00b894; width: 30%; }
/* ADAPTATION LABEL CELLS */
td.label-cell {
padding: 20px 12px;
text-align: center;
vertical-align: middle;
font-weight: 900;
font-size: 1.05em;
color: #fff;
letter-spacing: 1px;
border-bottom: 3px solid rgba(255,255,255,0.15);
position: relative;
}
.adapt-number {
display: block;
font-size: 2.2em;
font-weight: 900;
line-height: 1;
margin-bottom: 6px;
}
.adapt-name {
display: block;
font-size: 0.85em;
letter-spacing: 1.5px;
text-transform: uppercase;
opacity: 0.9;
}
.adapt-icon {
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
/* CONTENT CELLS */
td.content-cell {
padding: 20px 22px;
vertical-align: top;
border-bottom: 2px solid #f0f0f0;
font-size: 0.88em;
line-height: 1.65;
}
/* ROW COLORS */
/* (1) Hypertrophy */
tr.row-hypertrophy td.label-cell { background: linear-gradient(180deg, #fd79a8, #e84393); }
tr.row-hypertrophy td.content-cell { background: #fff; }
tr.row-hypertrophy td.intro-cell { border-left: 5px solid #fd79a8; }
tr.row-hypertrophy td.mech-cell { border-left: 4px solid #e84393; background: #fff9fc; }
tr.row-hypertrophy td.types-cell { border-left: 4px solid #fd79a8; background: #fff5fa; }
/* (2) Hyperplasia */
tr.row-hyperplasia td.label-cell { background: linear-gradient(180deg, #fdcb6e, #e17055); }
tr.row-hyperplasia td.content-cell { background: #fff; }
tr.row-hyperplasia td.intro-cell { border-left: 5px solid #fdcb6e; }
tr.row-hyperplasia td.mech-cell { border-left: 4px solid #e17055; background: #fffcf5; }
tr.row-hyperplasia td.types-cell { border-left: 4px solid #fdcb6e; background: #fff9f0; }
/* (3) Atrophy */
tr.row-atrophy td.label-cell { background: linear-gradient(180deg, #74b9ff, #0984e3); }
tr.row-atrophy td.content-cell { background: #fff; }
tr.row-atrophy td.intro-cell { border-left: 5px solid #74b9ff; }
tr.row-atrophy td.mech-cell { border-left: 4px solid #0984e3; background: #f5fbff; }
tr.row-atrophy td.types-cell { border-left: 4px solid #74b9ff; background: #f0f8ff; }
/* (4) Metaplasia */
tr.row-metaplasia td.label-cell { background: linear-gradient(180deg, #55efc4, #00b894); }
tr.row-metaplasia td.content-cell { background: #fff; }
tr.row-metaplasia td.intro-cell { border-left: 5px solid #55efc4; }
tr.row-metaplasia td.mech-cell { border-left: 4px solid #00b894; background: #f5fffc; }
tr.row-metaplasia td.types-cell { border-left: 4px solid #55efc4; background: #f0fff8; }
/* (5) Dysplasia */
tr.row-dysplasia td.label-cell { background: linear-gradient(180deg, #a29bfe, #6c5ce7); }
tr.row-dysplasia td.content-cell { background: #fff; }
tr.row-dysplasia td.intro-cell { border-left: 5px solid #a29bfe; }
tr.row-dysplasia td.mech-cell { border-left: 4px solid #6c5ce7; background: #faf8ff; }
tr.row-dysplasia td.types-cell { border-left: 4px solid #a29bfe; background: #f7f5ff; }
/* INNER STYLING */
.section-title {
font-weight: 800;
font-size: 0.95em;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.8px;
display: flex;
align-items: center;
gap: 6px;
}
.section-title .dot {
width: 10px; height: 10px; border-radius: 50%;
display: inline-block; flex-shrink: 0;
}
.definition-box {
background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(240,248,255,0.9));
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 12px;
border: 1px solid rgba(0,0,0,0.08);
font-size: 0.95em;
}
.definition-box .def-label {
font-weight: 800;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
color: #555;
}
.stress-diagram {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 12px 0;
padding: 10px;
background: rgba(255,255,255,0.7);
border-radius: 10px;
border: 1px dashed #ccc;
}
.stress-box {
background: #dfe6e9;
border-radius: 8px;
padding: 5px 10px;
font-size: 0.8em;
font-weight: 700;
text-align: center;
}
.stress-arrow { font-size: 1.3em; color: #636e72; }
.cell-circle {
width: 38px; height: 38px;
border-radius: 50%;
border: 3px solid;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.65em;
font-weight: 700;
text-align: center;
flex-shrink: 0;
}
ul { padding-left: 16px; margin-top: 4px; }
li { margin-bottom: 3px; }
ol { padding-left: 18px; margin-top: 4px; }
ol li { margin-bottom: 4px; }
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 20px;
font-size: 0.75em;
font-weight: 700;
margin: 2px 2px;
letter-spacing: 0.5px;
}
.tag-physio { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.tag-patho { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.tag-sq { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.tag-col { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.subsection {
margin-top: 10px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(0,0,0,0.07);
}
.subsection-title {
font-weight: 800;
font-size: 0.83em;
color: #2d3436;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 8px;
}
.compare-box {
padding: 8px 10px;
border-radius: 8px;
font-size: 0.82em;
}
.compare-box.normal { background: #e8f5e9; border: 1px solid #a5d6a7; }
.compare-box.adapted { background: #fce4ec; border: 1px solid #f48fb1; }
.compare-box h4 { font-size: 0.85em; font-weight: 800; margin-bottom: 3px; text-align: center; }
.highlight-box {
background: linear-gradient(135deg, #fff9c4, #fff3e0);
border: 1px solid #ffe082;
border-radius: 8px;
padding: 8px 12px;
margin-top: 8px;
font-size: 0.85em;
}
.highlight-box strong { color: #e65100; }
.cytology-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78em;
margin-top: 8px;
border-radius: 8px;
overflow: hidden;
}
.cytology-table th {
padding: 5px 8px;
font-weight: 800;
text-align: center;
font-size: 0.9em;
}
.cytology-table td {
padding: 4px 8px;
border-bottom: 1px solid #e0e0e0;
text-align: center;
}
.cytology-table tr:last-child td { border-bottom: none; }
.normal-col th { background: #c8e6c9; color: #1b5e20; }
.dysplasia-col { background: #ffcdd2; }
.normal-col { background: #f1f8e9; }
.mechanism-diagram {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 12px 0;
flex-wrap: wrap;
}
.mech-cell-icon {
text-align: center;
font-size: 0.78em;
}
.mech-cell-icon .cell-svg {
width: 55px; height: 55px;
border-radius: 50%;
border: 2px solid #999;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 3px;
font-size: 1.4em;
position: relative;
}
.mech-arrow { font-size: 1.5em; color: #b2bec3; }
.footer-note {
text-align: center;
color: rgba(255,255,255,0.6);
font-size: 0.78em;
margin-top: 20px;
letter-spacing: 1px;
}
/* DIVIDER between sub-sections within types cell */
.type-divider {
border: none;
border-top: 1.5px dashed #e0e0e0;
margin: 10px 0;
}
.arrow-right::after { content: " →"; }
.badge {
display: inline-block;
background: #2d3436;
color: #fff;
border-radius: 5px;
padding: 1px 6px;
font-size: 0.75em;
font-weight: 800;
margin-right: 3px;
}
.example-tag {
display: inline-block;
background: #dfe6e9;
color: #2d3436;
border-radius: 4px;
padding: 1px 6px;
font-size: 0.78em;
font-weight: 600;
margin: 1px;
}
</style>
</head>
<body>
<div class="page-title">
<h1>🔬 Cellular Adaptations</h1>
<p>Cell Adaptations, Cell Injury, and Death — General Pathology</p>
<span class="subtitle-bar">📖 Patho Prof Buster | Paper 1 — Complete Mindmap Infographic Table</span>
</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th class="col-adaptation">Adaptation</th>
<th class="col-intro">📋 Introduction & Definition</th>
<th class="col-mechanism">⚙️ Mechanism</th>
<th class="col-types">🗂️ Types & Examples</th>
</tr>
</thead>
<tbody>
<!-- ===================== (1) HYPERTROPHY ===================== -->
<tr class="row-hypertrophy">
<td class="label-cell">
<span class="adapt-icon">💪</span>
<span class="adapt-number">1</span>
<span class="adapt-name">Hyper­trophy</span>
</td>
<!-- INTRODUCTION -->
<td class="content-cell intro-cell">
<div class="section-title">
<span class="dot" style="background:#e84393;"></span>Definition
</div>
<div class="definition-box">
<div class="def-label">📌 Definition</div>
Increase in the <strong>size of cells</strong> resulting in increase in the size of the organ.
</div>
<div class="stress-diagram">
<div style="text-align:center;">
<div class="cell-circle" style="border-color:#e84393; background:#fff;">
<span style="font-size:1.5em;">⚫</span>
</div>
<div style="font-size:0.75em; margin-top:3px; font-weight:700;">Normal Cell</div>
</div>
<span class="stress-arrow">⟶<br><span style="font-size:0.65em; color:#e84393;">STRESS</span></span>
<div style="text-align:center;">
<div class="cell-circle" style="border-color:#e84393; background:#fce4ec; width:52px; height:52px;">
<span style="font-size:1.8em;">⚫</span>
</div>
<div style="font-size:0.75em; margin-top:3px; font-weight:700;">Hypertrophied Cell</div>
</div>
</div>
<div style="background:#fce4ec; border-radius:8px; padding:8px 12px; margin-top:8px; font-size:0.86em;">
<strong>Key point:</strong> The <em>number of cells does NOT change</em> — only the size increases.
<br>This is an <strong>adaptive response</strong> to increased functional demand.
</div>
</td>
<!-- MECHANISM -->
<td class="content-cell mech-cell">
<div class="section-title">
<span class="dot" style="background:#6c5ce7;"></span>Mechanism
</div>
<div class="definition-box" style="background: linear-gradient(135deg, #fce4ec, #f8bbd0);">
Increased size is due to more <strong>structural components / cellular proteins</strong>
<br><em>(NOT due to cellular swelling)</em>
</div>
<div class="mechanism-diagram">
<div class="mech-cell-icon">
<div class="cell-svg" style="background:#f1f8e9; border-color:#81c784;">
⚫
</div>
<div>Normal</div>
</div>
<span class="mech-arrow">→</span>
<div class="mech-cell-icon">
<div class="cell-svg" style="background:#fce4ec; border-color:#e91e63; width:68px; height:68px; font-size:1.8em;">
⚫
</div>
<div>Hypertrophy</div>
</div>
</div>
<div style="font-size:0.84em; background:#f3e5f5; border-radius:8px; padding:8px 12px; margin-top:6px;">
<strong>Cellular change:</strong> ↑ structural proteins & organelles (mitochondria, ER, myofilaments)
<br>→ leads to larger cell volume and enhanced functional capacity
</div>
</td>
<!-- TYPES -->
<td class="content-cell types-cell">
<div class="section-title">
<span class="dot" style="background:#00b894;"></span>Types
</div>
<span class="tag tag-physio">A) Physiologic Hypertrophy</span>
<span class="tag tag-patho">B) Pathologic Hypertrophy</span>
<div class="subsection" style="border-left: 3px solid #00b894; margin-top:10px;">
<div class="subsection-title">🌿 (A) Physiologic Hypertrophy</div>
<ol>
<li><strong>Enlarged size of uterus in pregnancy</strong> → Physiologic hypertrophy <em>as well as hyperplasia</em></li>
<li><strong>Hypertrophy of skeletal muscle</strong> → in <em>athletes and manual labourers</em></li>
</ol>
</div>
<hr class="type-divider">
<div class="subsection" style="border-left: 3px solid #e84393;">
<div class="subsection-title">🔴 (B) Pathologic Hypertrophy</div>
<ol>
<li><strong>Hypertrophy of cardiac muscle</strong> → occurs in:
<ul>
<li><span class="example-tag">Systemic Hypertension</span></li>
<li><span class="example-tag">Aortic valve disease</span></li>
</ul>
</li>
<li><strong>Hypertrophy of smooth muscle</strong> → e.g.:
<ul>
<li><span class="example-tag">Cardiac achalasia (in oesophagus)</span></li>
<li><span class="example-tag">Pyloric stenosis (in stomach)</span></li>
</ul>
</li>
</ol>
</div>
</td>
</tr>
<!-- ===================== (2) HYPERPLASIA ===================== -->
<tr class="row-hyperplasia">
<td class="label-cell">
<span class="adapt-icon">🔢</span>
<span class="adapt-number">2</span>
<span class="adapt-name">Hyper­plasia</span>
</td>
<!-- INTRODUCTION -->
<td class="content-cell intro-cell">
<div class="section-title">
<span class="dot" style="background:#e17055;"></span>Definition
</div>
<div class="definition-box">
<div class="def-label">📌 Definition</div>
Increase in the <strong>number of cells</strong> in an organ or tissue,
resulting in increased mass of the organ or tissue.
</div>
<div class="stress-diagram">
<div style="text-align:center;">
<div style="display:flex; gap:3px;">
<div class="cell-circle" style="border-color:#e17055; background:#fff; width:30px; height:30px;"><span>⚫</span></div>
<div class="cell-circle" style="border-color:#e17055; background:#fff; width:30px; height:30px;"><span>⚫</span></div>
</div>
<div style="font-size:0.75em; margin-top:3px; font-weight:700;">Normal (2 cells)</div>
</div>
<span class="stress-arrow">⟶<br><span style="font-size:0.65em; color:#e17055;">STRESS</span></span>
<div style="text-align:center;">
<div style="display:flex; gap:2px; flex-wrap:wrap; width:80px;">
<div class="cell-circle" style="border-color:#e17055; background:#fff3e0; width:25px; height:25px;"><span style="font-size:0.8em;">⚫</span></div>
<div class="cell-circle" style="border-color:#e17055; background:#fff3e0; width:25px; height:25px;"><span style="font-size:0.8em;">⚫</span></div>
<div class="cell-circle" style="border-color:#e17055; background:#fff3e0; width:25px; height:25px;"><span style="font-size:0.8em;">⚫</span></div>
<div class="cell-circle" style="border-color:#e17055; background:#fff3e0; width:25px; height:25px;"><span style="font-size:0.8em;">⚫</span></div>
</div>
<div style="font-size:0.75em; margin-top:3px; font-weight:700;">Hyperplasia (↑ cells)</div>
</div>
</div>
<div style="background:#fff3cd; border-radius:8px; padding:8px 12px; margin-top:8px; font-size:0.86em;">
<strong>Key point:</strong> Each cell is <em>normal size</em>, but the <em>total number increases</em>.
<br>Occurs only in cells capable of <strong>mitotic division</strong> (not neurons or cardiac muscle under normal circumstances).
</div>
</td>
<!-- MECHANISM -->
<td class="content-cell mech-cell">
<div class="section-title">
<span class="dot" style="background:#6c5ce7;"></span>Mechanism
</div>
<div class="definition-box" style="background: linear-gradient(135deg, #fff8e1, #ffe082);">
Increase in the number of cells via <strong>cell division (mitosis)</strong>
in response to increased functional demand or growth factor stimulation.
</div>
<div style="font-size:0.84em; margin-top:10px;">
<strong>Stimulated by:</strong>
<ul style="margin-top:4px;">
<li>↑ Hormonal stimulation</li>
<li>↑ Growth factors</li>
<li>Compensatory mechanisms after tissue loss</li>
</ul>
</div>
<div style="background:#e8f5e9; border-radius:8px; padding:8px 12px; margin-top:8px; font-size:0.84em;">
<strong>Note:</strong> Hypertrophy and hyperplasia often <strong>occur together</strong>
(e.g. uterus in pregnancy — both cell size AND number increase)
</div>
</td>
<!-- TYPES -->
<td class="content-cell types-cell">
<div class="section-title">
<span class="dot" style="background:#00b894;"></span>Types
</div>
<span class="tag tag-physio">A) Physiologic Hyperplasia</span>
<span class="tag tag-patho">B) Pathologic Hyperplasia</span>
<div class="subsection" style="border-left: 3px solid #00b894; margin-top:10px;">
<div class="subsection-title">🌿 (A) Physiologic Hyperplasia</div>
<ol>
<li><strong>Hormonal hyperplasia:</strong> Proliferation of glandular epithelium of female breast at puberty and pregnancy</li>
<li><strong>Compensatory hyperplasia:</strong> Liver regeneration after partial hepatectomy</li>
<li><strong>Uterus in pregnancy</strong> → Hyperplasia + Hypertrophy (combined)</li>
</ol>
</div>
<hr class="type-divider">
<div class="subsection" style="border-left: 3px solid #e17055;">
<div class="subsection-title">🔴 (B) Pathologic Hyperplasia</div>
<ol>
<li><strong>Endometrial hyperplasia</strong> → Excess oestrogen stimulation</li>
<li><strong>Benign prostatic hyperplasia (BPH)</strong> → in older males</li>
<li><strong>Thyroid hyperplasia (Goitre)</strong> → Iodine deficiency</li>
<li><strong>Skin warts (verrucae)</strong> → due to HPV</li>
</ol>
<div class="highlight-box">
<strong>⚠️ Important:</strong> Pathologic hyperplasia is a <em>precursor to neoplasia</em> but does not directly become cancer
</div>
</div>
</td>
</tr>
<!-- ===================== (3) ATROPHY ===================== -->
<tr class="row-atrophy">
<td class="label-cell">
<span class="adapt-icon">📉</span>
<span class="adapt-number">3</span>
<span class="adapt-name">Atrophy</span>
</td>
<!-- INTRODUCTION -->
<td class="content-cell intro-cell">
<div class="section-title">
<span class="dot" style="background:#0984e3;"></span>Definition
</div>
<div class="definition-box">
<div class="def-label">📌 Definition</div>
<strong>Decrease in cell size and number of cells</strong>
<br><br>
<ul>
<li>Atrophied cells are <strong>smaller than normal</strong> but they are <strong>still viable</strong></li>
</ul>
</div>
<div class="stress-diagram">
<div style="text-align:center;">
<div style="font-weight:700; font-size:0.8em; margin-bottom:4px; color:#e17055;">STRESS</div>
<div class="cell-circle" style="border-color:#0984e3; background:#e3f2fd; width:45px; height:45px; font-size:1.5em;">⚫</div>
<div style="font-size:0.75em; margin-top:3px;">Normal cell</div>
</div>
<div style="text-align:center;">
<span style="font-size:0.7em; color:#636e72;">Adaptation</span>
<span class="stress-arrow">→</span>
</div>
<div style="text-align:center;">
<div class="cell-circle" style="border-color:#0984e3; background:#e3f2fd; width:28px; height:28px; font-size:0.9em;">⚫</div>
<div style="font-size:0.75em; margin-top:3px;">Atrophy</div>
</div>
</div>
<div style="background:#e3f2fd; border-radius:8px; padding:8px 12px; margin-top:8px; font-size:0.86em;">
<strong>Key point:</strong> Cell viability is <em>maintained</em> — cells are smaller but functional (unlike cell death where cells are non-viable)
</div>
</td>
<!-- MECHANISM -->
<td class="content-cell mech-cell">
<div class="section-title">
<span class="dot" style="background:#6c5ce7;"></span>Mechanism
</div>
<div class="definition-box" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb);">
<strong>Shrinkage in cell size is due to reduction in cell organelles</strong>
</div>
<div class="mechanism-diagram">
<div class="mech-cell-icon">
<div class="cell-svg" style="background:#e8f5e9; border-color:#66bb6a; font-size:1.4em;">
⚫
</div>
<div>Normal</div>
<div style="font-size:0.72em; color:#555;">(Full organelles)</div>
</div>
<span class="mech-arrow">→</span>
<div class="mech-cell-icon">
<div class="cell-svg" style="background:#e3f2fd; border-color:#42a5f5; width:38px; height:38px; font-size:0.9em;">
⚫
</div>
<div>Atrophy</div>
<div style="font-size:0.72em; color:#555;">(↓ organelles)</div>
</div>
</div>
<div style="font-size:0.84em; background:#e8eaf6; border-radius:8px; padding:8px 12px; margin-top:6px;">
<strong>Cellular changes:</strong>
<ul style="margin-top:4px;">
<li>↓ Mitochondria</li>
<li>↓ Myofilaments</li>
<li>↓ Endoplasmic reticulum</li>
<li>Autophagic vacuoles may appear (cell digests its own organelles)</li>
<li>↑ Lipofuscin pigment (brown pigment = "wear and tear" pigment)</li>
</ul>
</div>
</td>
<!-- TYPES -->
<td class="content-cell types-cell">
<div class="section-title">
<span class="dot" style="background:#00b894;"></span>Types
</div>
<span class="tag tag-physio">A) Physiologic Atrophy</span>
<span class="tag tag-patho">B) Pathologic Atrophy</span>
<div class="subsection" style="border-left: 3px solid #00b894; margin-top:10px;">
<div class="subsection-title">🌿 (A) Physiologic Atrophy</div>
<ol>
<li><strong>Atrophy of thymus</strong> in adult life</li>
<li><strong>Atrophy of ovary</strong> after menopause</li>
<li><strong>Atrophy of brain</strong> with ageing <em>(Young age — Normal → Old age — Atrophy)</em></li>
<li><strong>Atrophy of uterus</strong> after parturition</li>
</ol>
<div style="font-size:0.8em; margin-top:5px; color:#555;">
📌 <em>Uterus: Normal → (Pregnancy: Hypertrophy + Hyperplasia) → (Parturition: Atrophy)</em>
</div>
</div>
<hr class="type-divider">
<div class="subsection" style="border-left: 3px solid #e84393;">
<div class="subsection-title">🔴 (B) Pathologic Atrophy</div>
<ol>
<li><strong>Starvation atrophy</strong> → Cachexia seen in <em>cancer and severely ill patients</em></li>
<li><strong>Ischaemic atrophy</strong> → Atrophic kidney in <em>atherosclerosis of renal artery</em>; Atrophy of brain in <em>cerebral atherosclerosis</em></li>
<li><strong>Neuropathic atrophy</strong> → e.g. <span class="example-tag">Poliomyelitis</span></li>
<li><strong>Disuse atrophy</strong> → e.g. Wasting of muscles of limb <em>immobilized in cast</em>; Atrophy of the pancreas in <em>obstruction of pancreatic duct</em></li>
<li><strong>Endocrine atrophy</strong> → e.g. <em>Hypopituitarism</em> may lead to atrophy of thyroid, adrenal and gonads</li>
<li><strong>Pressure atrophy</strong> → e.g. <em>Erosion of skull by meningioma</em>; Erosion of the sternum by <em>aneurysm of arch of aorta</em></li>
<li><strong>Idiopathic atrophy</strong> → no cause present</li>
</ol>
</div>
</td>
</tr>
<!-- ===================== (4) METAPLASIA ===================== -->
<tr class="row-metaplasia">
<td class="label-cell">
<span class="adapt-icon">🔄</span>
<span class="adapt-number">4</span>
<span class="adapt-name">Meta­plasia</span>
</td>
<!-- INTRODUCTION -->
<td class="content-cell intro-cell">
<div class="section-title">
<span class="dot" style="background:#00b894;"></span>Definition
</div>
<div class="definition-box">
<div class="def-label">📌 Definition</div>
One <strong>mature/adult cell type is replaced by another mature/adult cell type</strong>
</div>
<div class="stress-diagram" style="flex-direction:column; gap:5px;">
<div style="display:flex; align-items:center; gap:8px; justify-content:center;">
<div style="text-align:center;">
<div style="font-weight:700; font-size:0.75em; color:#e17055;">STRESS</div>
<div class="cell-circle" style="border-color:#00b894; background:#e8f5e9; width:35px; height:35px;">
<span style="font-size:0.7em; font-weight:700;">SQ</span>
</div>
<div style="font-size:0.7em; margin-top:2px;">Squamous</div>
</div>
<div style="text-align:center;">
<span style="font-size:0.7em; color:#636e72;">Adaptation</span>
<span class="stress-arrow"> →</span>
</div>
<div style="text-align:center;">
<div class="cell-circle" style="border-color:#e17055; background:#fff3e0; width:35px; height:35px; border-radius:3px;">
<span style="font-size:0.7em; font-weight:700;">COL</span>
</div>
<div style="font-size:0.7em; margin-top:2px;">Columnar</div>
</div>
</div>
<div style="font-size:0.7em; color:#636e72; text-align:center;">OR reverse direction ↔</div>
</div>
<div style="background:#e8f5e9; border-radius:8px; padding:8px 12px; margin-top:8px; font-size:0.86em;">
<strong>Key point:</strong> The replaced cell type is <em>better suited to withstand</em> the new environmental stress.
<br>This is an <strong>adaptive response to chronic irritation</strong>.
</div>
</td>
<!-- MECHANISM -->
<td class="content-cell mech-cell">
<div class="section-title">
<span class="dot" style="background:#6c5ce7;"></span>Mechanism
</div>
<div class="definition-box" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9);">
<ul>
<li>Metaplasia does <strong>NOT</strong> result from a change in phenotype of an already differentiated cell type</li>
<li>Result of a <strong>reprogramming of stem cells</strong> that are known to exist in normal tissues</li>
</ul>
</div>
<div style="margin-top:10px; font-size:0.84em;">
<strong>Diagram — Squamous Metaplasia:</strong>
<div style="background:#f0f4ff; border-radius:8px; padding:8px; margin-top:5px; text-align:center; border:1px solid #c5cae9;">
<div style="display:flex; align-items:flex-end; justify-content:center; gap:0; margin-bottom:4px;">
<div style="background:#b3e5fc; width:70px; height:30px; border-radius:4px 0 0 0; border:1px solid #0288d1; font-size:0.7em; display:flex; align-items:center; justify-content:center; font-weight:700; color:#01579b;">Normal Columnar Epithelium</div>
<div style="background:#c8e6c9; width:70px; height:20px; border-radius:0 4px 0 0; border:1px solid #388e3c; font-size:0.65em; display:flex; align-items:center; justify-content:center; font-weight:700; color:#1b5e20;">Squamous Epithelium</div>
</div>
<div style="background:#fff9c4; height:6px; border: 1px solid #f9a825;"></div>
<div style="font-size:0.7em; margin-top:3px; color:#555;">▲ Basement membrane</div>
<div style="font-size:0.72em; font-weight:700; color:#6a1b9a; margin-top:3px;">SQUAMOUS METAPLASIA</div>
</div>
</div>
</td>
<!-- TYPES -->
<td class="content-cell types-cell">
<div class="section-title">
<span class="dot" style="background:#00b894;"></span>Types
</div>
<span class="tag tag-sq">A) Squamous (Col → Sq)</span>
<span class="tag tag-col">B) Columnar (Sq → Col)</span>
<div class="subsection" style="border-left: 3px solid #0288d1; margin-top:10px;">
<div class="subsection-title">🟦 (A) Squamous Metaplasia Examples<br><small style="font-weight:500;">(Columnar → Squamous)</small></div>
<ol>
<li><strong>In bronchus</strong> in chronic smokers
<span class="example-tag">Smoke ↑</span></li>
<li><strong>In gallbladder</strong> in cholelithiasis
<span class="example-tag">Calculus</span></li>
<li><strong>In prostate</strong> in chronic prostatitis
<span class="example-tag">Inflammation</span></li>
<li><strong>In uterine endocervix</strong> in prolapse of uterus
<span class="example-tag">Uterus Prolapse</span></li>
</ol>
</div>
<hr class="type-divider">
<div class="subsection" style="border-left: 3px solid #e17055;">
<div class="subsection-title">🟧 (B) Columnar Metaplasia Examples<br><small style="font-weight:500;">(Squamous → Columnar)</small></div>
<ol>
<li><strong>Barrett's oesophagus</strong> → due to <span class="example-tag">GERD</span>
<div style="font-size:0.8em; color:#555; margin-top:2px;">Normal (HCl stomach) → GERD (HCl → oesophagus) → Barrett's Oesophagus</div>
</li>
<li><strong>Cervical erosion</strong> → Ectocervix → due to <em>increased exposure of cervical epithelium to oestrogen</em>
<div style="font-size:0.8em; color:#555; margin-top:2px;">
Cervix: <strong>Endo (Col) / Ecto (Sq)</strong>
<br>Columnar Metaplasia → Cervical erosion (due to oestrogen exposure)
</div>
</li>
</ol>
</div>
</td>
</tr>
<!-- ===================== (5) DYSPLASIA ===================== -->
<tr class="row-dysplasia">
<td class="label-cell">
<span class="adapt-icon">⚠️</span>
<span class="adapt-number">5</span>
<span class="adapt-name">Dys­plasia</span>
</td>
<!-- INTRODUCTION -->
<td class="content-cell intro-cell">
<div class="section-title">
<span class="dot" style="background:#6c5ce7;"></span>Definition
</div>
<div class="definition-box">
<div class="def-label">📌 Definition</div>
<ul>
<li><strong>Disordered cellular development</strong></li>
<li><strong>Characterised by cellular cytologic changes</strong></li>
</ul>
</div>
<div style="background:#ede7f6; border-radius:8px; padding:8px 12px; margin-top:8px; font-size:0.86em;">
<strong>🔑 Key point:</strong> Dysplasia is <em>NOT a true adaptation</em> — it is a disordered growth
that may progress to cancer.
<br><br>
<strong>Continuum:</strong>
<div style="display:flex; align-items:center; gap:4px; margin-top:6px; flex-wrap:wrap;">
<span style="background:#c8e6c9; padding:2px 7px; border-radius:4px; font-size:0.85em; font-weight:700;">Normal</span>
<span>→</span>
<span style="background:#fff9c4; padding:2px 7px; border-radius:4px; font-size:0.85em; font-weight:700;">Sq. Metaplasia</span>
<span>→</span>
<span style="background:#ffe0b2; padding:2px 7px; border-radius:4px; font-size:0.85em; font-weight:700;">Dysplasia</span>
<span>→</span>
<span style="background:#ffcdd2; padding:2px 7px; border-radius:4px; font-size:0.85em; font-weight:700;">Ca in Situ</span>
</div>
</div>
<div class="highlight-box" style="margin-top:8px;">
<strong>⚠️ Full thickness dysplasia</strong> is known as <strong>Carcinoma in situ</strong>
<br><em>(Precursor of cancer)</em>
</div>
</td>
<!-- MECHANISM -->
<td class="content-cell mech-cell">
<div class="section-title">
<span class="dot" style="background:#6c5ce7;"></span>Mechanism — Cytological Changes
</div>
<div class="definition-box" style="background: linear-gradient(135deg, #ede7f6, #d1c4e9);">
<strong>Cytological changes →</strong>
</div>
<ol style="font-size:0.86em; margin-top:5px;">
<li><strong>Increased number of layers</strong></li>
<li><strong>Disorderly arrangement</strong> of cells from basal layer to surface layer</li>
<li><strong>Loss of basal polarity</strong> i.e. nuclei lying away from basement membrane</li>
<li><strong>Cellular and nuclear pleomorphism</strong></li>
<li><strong>Increased nucleocytoplasmic (N/C) ratio</strong></li>
<li><strong>Nuclear hyperchromatism</strong></li>
<li><strong>Increased mitotic activity</strong></li>
</ol>
</td>
<!-- TYPES -->
<td class="content-cell types-cell">
<div class="section-title">
<span class="dot" style="background:#00b894;"></span>Normal vs Dysplasia Comparison
</div>
<table class="cytology-table">
<thead>
<tr>
<th style="background:#c8e6c9; color:#1b5e20; border-radius:6px 0 0 0;">Normal Endocervical Epithelium</th>
<th style="background:#ffcdd2; color:#b71c1c; border-radius:0 6px 0 0;">Dysplasia</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background:#f1f8e9;">No. of layers <strong>normal</strong></td>
<td style="background:#fff3f3;">No. of layers <strong>↑</strong></td>
</tr>
<tr>
<td style="background:#f1f8e9;"><strong>Ordered</strong> arrangement</td>
<td style="background:#fff3f3;"><strong>Disordered</strong> arrangement</td>
</tr>
<tr>
<td style="background:#f1f8e9;">Basal Polarity <strong>+</strong></td>
<td style="background:#fff3f3;">Basal Polarity <strong>–</strong></td>
</tr>
<tr>
<td style="background:#f1f8e9;">Pleomorphism <strong>–</strong></td>
<td style="background:#fff3f3;">Pleomorphism <strong>+</strong></td>
</tr>
<tr>
<td style="background:#f1f8e9;"><strong>N/C Normal</strong></td>
<td style="background:#fff3f3;"><strong>N/C ↑</strong></td>
</tr>
<tr>
<td style="background:#f1f8e9;">Hyper chromatism <strong>–</strong></td>
<td style="background:#fff3f3;">Hyper chromatism <strong>+</strong></td>
</tr>
<tr>
<td style="background:#f1f8e9;">Mitosis <strong>normal</strong></td>
<td style="background:#fff3f3;">Mitosis <strong>↑</strong></td>
</tr>
</tbody>
</table>
<div class="highlight-box" style="margin-top:10px;">
<strong>⚠️ Full thickness dysplasia</strong> = <strong>Carcinoma in situ</strong>
<br><em>(Precursor of cancer)</em>
<br><br>
<strong>Progression Stages:</strong>
<div style="display:flex; align-items:center; gap:3px; margin-top:5px; flex-wrap:wrap; font-size:0.85em;">
<span style="background:#c8e6c9; padding:2px 5px; border-radius:3px; font-weight:700;">Normal Endocervical Epithelium</span>
<span>→</span>
<span style="background:#b3e5fc; padding:2px 5px; border-radius:3px; font-weight:700;">Squamous Metaplasia</span>
<span>→</span>
<span style="background:#ffe0b2; padding:2px 5px; border-radius:3px; font-weight:700;">Dysplasia</span>
<span>→</span>
<span style="background:#ffcdd2; padding:2px 5px; border-radius:3px; font-weight:700;">Carcinoma in Situ</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer-note">
📚 Source: Patho Prof Buster | General Pathology — Paper 1 | Cell Adaptations, Cell Injury, and Death
<br>⚕️ Pages 4–9 / 850 | All content preserved verbatim from original study material
</div>
</body>
</html>
Running Command
cd /tmp/workspace/cellular-adaptations && python3 -c " import subprocess, sys # Try to generate PDF using weasyprint try: import weasyprint weasyprint.HTML(filename='cellular_adaptations_infographic.html').write_pdf('cellular_adaptations_infographic.pdf') print('PDF generated with weasyprint') except Exception as e: print(f'weasyprint failed: {e}') # Try pdfkit try: import pdfkit pdfkit.from_file('cellular_adaptations_infographic.html', 'cellular_adaptations_infographic.pdf') print('PDF generated with pdfkit') except Exception as e2: print(f'pdfkit failed: {e2}') print('HTML file is ready') "
Running Command
ls -lh /tmp/workspace/cellular-adaptations/
Your illustrated mindmap infographic table is ready! Here's the download link:
cellular adaptations infographic
HTML File · HTML
What's inside the infographic
The table covers all 5 Cellular Adaptations across 3 columns (Introduction/Definition, Mechanism, Types) with full illustrated styling:
| # | Adaptation | Colour Theme | Key Highlight |
|---|---|---|---|
| 1 | Hypertrophy | 💗 Pink-Rose | ↑ Cell SIZE (not number); structural proteins ↑; Physiologic (uterus in pregnancy, skeletal muscle) vs Pathologic (cardiac hypertrophy in HTN, aortic valve disease; smooth muscle in achalasia, pyloric stenosis) |
| 2 | Hyperplasia | 🟠 Orange-Amber | ↑ Cell NUMBER (mitosis); Physiologic (hormonal breast, compensatory liver) vs Pathologic (endometrial hyperplasia, BPH, goitre, warts) |
| 3 | Atrophy | 💙 Blue | ↓ Cell size + number; shrinkage due to ↓ organelles; 7 types of pathologic atrophy (starvation, ischaemic, neuropathic, disuse, endocrine, pressure, idiopathic) |
| 4 | Metaplasia | 🟢 Green-Teal | One adult cell type replaced by another; stem cell reprogramming; Squamous (Col→Sq in smokers, gallstones, prostatitis, uterine prolapse) vs Columnar (Sq→Col in Barrett's/GERD, cervical erosion/oestrogen) |
| 5 | Dysplasia | 🟣 Purple | Disordered cellular development; 7 cytological changes (↑ layers, disordered arrangement, loss of basal polarity, pleomorphism, ↑ N/C ratio, hyperchromatism, ↑ mitosis); comparison table Normal vs Dysplasia; Full thickness = Carcinoma in Situ |
All text from the original images is preserved verbatim - open the HTML file in any browser for the full colour-coded illustrated table.
/visualizedlearning cellular Adaptations
Writing File
~/cellular-adaptations/visualized_learning.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cellular Adaptations — Visualized Learning</title>
<style>
/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--hyper-t: #ff6b9d;
--hyper-d: #c2185b;
--hyperp-t: #ffb347;
--hyperp-d: #e65100;
--atro-t: #4fc3f7;
--atro-d: #0277bd;
--meta-t: #69f0ae;
--meta-d: #1b5e20;
--dyspl-t: #ce93d8;
--dyspl-d: #6a1b9a;
--bg-dark: #0d0d1a;
--bg-card: #141428;
--bg-card2: #1a1a35;
--text: #e8e8ff;
--text-dim: #9090bb;
--border: rgba(255,255,255,0.08);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background: var(--bg-dark);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
/* ===== ANIMATED BACKGROUND ===== */
body::before {
content: '';
position: fixed; inset: 0; z-index: -1;
background:
radial-gradient(ellipse 80% 50% at 20% 20%, rgba(255,107,157,0.08) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(105,240,174,0.07) 0%, transparent 55%),
radial-gradient(ellipse 50% 60% at 50% 50%, rgba(206,147,216,0.05) 0%, transparent 50%);
}
/* ===== HERO ===== */
.hero {
text-align: center;
padding: 60px 20px 40px;
position: relative;
}
.hero-label {
display: inline-block;
background: linear-gradient(90deg, var(--hyper-t), var(--dyspl-t));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
font-size: 0.8em; font-weight: 700; letter-spacing: 4px;
text-transform: uppercase; margin-bottom: 12px;
}
.hero h1 {
font-size: clamp(2em, 6vw, 3.8em);
font-weight: 900; letter-spacing: -1px; line-height: 1.1;
background: linear-gradient(135deg, #fff 0%, #c8d8ff 50%, var(--dyspl-t) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
margin-top: 14px; font-size: 1.05em; color: var(--text-dim);
max-width: 600px; margin-inline: auto; line-height: 1.7;
}
.pill-row {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center; margin-top: 20px;
}
.pill {
padding: 5px 16px; border-radius: 20px;
font-size: 0.78em; font-weight: 700; letter-spacing: 0.5px;
border: 1.5px solid; cursor: pointer; transition: all 0.25s;
}
.pill:hover { transform: translateY(-2px); filter: brightness(1.2); }
/* ===== NAV TABS ===== */
.nav-tabs {
display: flex; flex-wrap: wrap; gap: 6px;
justify-content: center; padding: 0 20px 30px;
}
.tab-btn {
padding: 8px 20px; border-radius: 25px;
font-size: 0.82em; font-weight: 700; letter-spacing: 0.5px;
background: var(--bg-card2); border: 1.5px solid var(--border);
color: var(--text-dim); cursor: pointer; transition: all 0.25s;
}
.tab-btn:hover, .tab-btn.active {
color: #fff; transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
/* ===== SECTION CARDS ===== */
.section { padding: 10px 20px 60px; max-width: 1200px; margin: 0 auto; }
.card {
background: var(--bg-card);
border-radius: 20px;
border: 1px solid var(--border);
overflow: hidden;
margin-bottom: 30px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
.card-header {
padding: 24px 28px 20px;
display: flex; align-items: center; gap: 16px;
border-bottom: 1px solid var(--border);
}
.card-num {
width: 52px; height: 52px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.5em; font-weight: 900; flex-shrink: 0;
border: 3px solid;
}
.card-title-block h2 { font-size: 1.5em; font-weight: 800; }
.card-title-block p { font-size: 0.82em; color: var(--text-dim); margin-top: 3px; }
.card-body {
padding: 24px 28px;
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width: 800px) {
.card-body { grid-template-columns: 1fr; }
}
.col-box {
background: var(--bg-card2);
border-radius: 14px; padding: 18px;
border: 1px solid var(--border);
}
.col-box h3 {
font-size: 0.72em; font-weight: 800; letter-spacing: 2px;
text-transform: uppercase; margin-bottom: 14px;
padding-bottom: 8px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 7px;
}
.col-box h3 .icon { font-size: 1.3em; }
/* ===== DEFINITION ===== */
.def-text {
font-size: 0.92em; line-height: 1.7; color: #c8d8ff;
background: rgba(255,255,255,0.04);
border-radius: 10px; padding: 12px 14px;
border-left: 3px solid;
}
.key-point {
margin-top: 10px; padding: 10px 14px;
border-radius: 10px; font-size: 0.82em; line-height: 1.6;
background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.12);
}
.key-point .kp-label {
font-weight: 800; font-size: 0.8em; text-transform: uppercase;
letter-spacing: 1px; display: block; margin-bottom: 4px;
}
/* ===== SVG DIAGRAMS ===== */
svg { display: block; }
.diagram-wrap {
display: flex; justify-content: center; align-items: center;
margin: 14px 0; min-height: 120px;
}
/* ===== TYPES LIST ===== */
.type-section { margin-bottom: 14px; }
.type-label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.75em; font-weight: 800; text-transform: uppercase;
letter-spacing: 1px; padding: 3px 10px; border-radius: 20px;
margin-bottom: 8px;
}
.type-label.physio { background: rgba(105,240,174,0.15); color: #69f0ae; border: 1px solid rgba(105,240,174,0.3); }
.type-label.patho { background: rgba(255,107,107,0.15); color: #ff7070; border: 1px solid rgba(255,107,107,0.3); }
.type-list { list-style: none; }
.type-list li {
padding: 5px 0 5px 14px;
font-size: 0.83em; line-height: 1.55; color: #c8d8ff;
border-bottom: 1px solid rgba(255,255,255,0.05);
position: relative;
}
.type-list li:last-child { border-bottom: none; }
.type-list li::before {
content: '▸'; position: absolute; left: 0; color: var(--text-dim);
}
.type-list li strong { color: #fff; }
.eg-chip {
display: inline-block; background: rgba(255,255,255,0.08);
border-radius: 4px; padding: 1px 6px;
font-size: 0.78em; color: #aac4ff; margin: 1px;
}
/* ===== MECH INFO ===== */
.mech-text {
font-size: 0.86em; line-height: 1.65; color: #c8d8ff;
}
.mech-item {
display: flex; gap: 10px; align-items: flex-start;
margin-bottom: 8px;
}
.mech-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
margin-top: 6px;
}
.change-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 8px; margin-top: 10px;
}
.change-box {
border-radius: 10px; padding: 10px 12px; font-size: 0.8em;
}
.change-box h4 { font-size: 0.8em; font-weight: 800; text-align: center; margin-bottom: 5px; }
.change-box ul { list-style: none; }
.change-box ul li { padding: 2px 0; }
.change-box ul li::before { content: '• '; color: var(--text-dim); }
/* ===== COMPARE TABLE ===== */
.compare-tbl {
width: 100%; border-collapse: collapse; font-size: 0.78em;
border-radius: 10px; overflow: hidden;
}
.compare-tbl th {
padding: 8px 10px; font-weight: 800; text-align: center;
font-size: 0.85em; letter-spacing: 0.5px;
}
.compare-tbl td {
padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.05);
text-align: center; color: #c8d8ff;
}
.compare-tbl tr:last-child td { border-bottom: none; }
.plus { color: #69f0ae; font-weight: 800; }
.minus { color: #ff7070; font-weight: 800; }
.up { color: #ffb347; font-weight: 800; }
/* ===== PROGRESSION STRIP ===== */
.progression {
display: flex; align-items: center; flex-wrap: wrap;
gap: 4px; margin-top: 10px;
}
.prog-step {
padding: 4px 10px; border-radius: 6px;
font-size: 0.75em; font-weight: 700;
}
.prog-arrow { color: var(--text-dim); font-size: 1.1em; }
/* ===== COLOUR THEMES ===== */
/* Hypertrophy */
.ht .card-header { background: linear-gradient(135deg, rgba(255,107,157,0.12), rgba(194,24,91,0.08)); border-bottom-color: rgba(255,107,157,0.2); }
.ht .card-num { background: rgba(255,107,157,0.15); border-color: var(--hyper-t); color: var(--hyper-t); }
.ht .card-title-block h2 { color: var(--hyper-t); }
.ht .col-box h3 .icon { color: var(--hyper-t); }
.ht .def-text { border-color: var(--hyper-t); }
.ht .key-point .kp-label { color: var(--hyper-t); }
.ht .mech-dot { background: var(--hyper-t); }
.ht .type-label.physio .num, .ht .card:hover { box-shadow: 0 16px 48px rgba(255,107,157,0.15); }
/* Hyperplasia */
.hp .card-header { background: linear-gradient(135deg, rgba(255,179,71,0.12), rgba(230,81,0,0.08)); border-bottom-color: rgba(255,179,71,0.2); }
.hp .card-num { background: rgba(255,179,71,0.15); border-color: var(--hyperp-t); color: var(--hyperp-t); }
.hp .card-title-block h2 { color: var(--hyperp-t); }
.hp .def-text { border-color: var(--hyperp-t); }
.hp .mech-dot { background: var(--hyperp-t); }
.hp .key-point .kp-label { color: var(--hyperp-t); }
/* Atrophy */
.at .card-header { background: linear-gradient(135deg, rgba(79,195,247,0.12), rgba(2,119,189,0.08)); border-bottom-color: rgba(79,195,247,0.2); }
.at .card-num { background: rgba(79,195,247,0.15); border-color: var(--atro-t); color: var(--atro-t); }
.at .card-title-block h2 { color: var(--atro-t); }
.at .def-text { border-color: var(--atro-t); }
.at .mech-dot { background: var(--atro-t); }
.at .key-point .kp-label { color: var(--atro-t); }
/* Metaplasia */
.mt .card-header { background: linear-gradient(135deg, rgba(105,240,174,0.12), rgba(27,94,32,0.08)); border-bottom-color: rgba(105,240,174,0.2); }
.mt .card-num { background: rgba(105,240,174,0.15); border-color: var(--meta-t); color: var(--meta-t); }
.mt .card-title-block h2 { color: var(--meta-t); }
.mt .def-text { border-color: var(--meta-t); }
.mt .mech-dot { background: var(--meta-t); }
.mt .key-point .kp-label { color: var(--meta-t); }
/* Dysplasia */
.dy .card-header { background: linear-gradient(135deg, rgba(206,147,216,0.12), rgba(106,27,154,0.08)); border-bottom-color: rgba(206,147,216,0.2); }
.dy .card-num { background: rgba(206,147,216,0.15); border-color: var(--dyspl-t); color: var(--dyspl-t); }
.dy .card-title-block h2 { color: var(--dyspl-t); }
.dy .def-text { border-color: var(--dyspl-t); }
.dy .mech-dot { background: var(--dyspl-t); }
.dy .key-point .kp-label { color: var(--dyspl-t); }
/* ===== OVERVIEW GRID ===== */
.overview-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px; max-width: 1200px; margin: 0 auto 40px;
padding: 0 20px;
}
@media (max-width: 900px) { .overview-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 580px) { .overview-grid { grid-template-columns: 1fr 1fr; } }
.ov-card {
background: var(--bg-card); border-radius: 16px;
border: 1.5px solid var(--border); padding: 20px 16px;
text-align: center; cursor: pointer; transition: all 0.3s;
}
.ov-card:hover { transform: translateY(-5px); }
.ov-emoji { font-size: 2.4em; margin-bottom: 8px; }
.ov-title { font-size: 0.88em; font-weight: 800; margin-bottom: 4px; }
.ov-sub { font-size: 0.72em; color: var(--text-dim); line-height: 1.4; }
/* ===== SUMMARY BAR ===== */
.summary-bar {
max-width: 1200px; margin: 0 auto 30px;
padding: 0 20px;
display: flex; gap: 10px; flex-wrap: wrap;
}
.sum-chip {
display: flex; align-items: center; gap: 8px;
background: var(--bg-card); border-radius: 12px;
border: 1px solid var(--border); padding: 10px 16px;
font-size: 0.8em; flex: 1; min-width: 150px;
}
.sum-chip .sc-icon { font-size: 1.5em; }
.sum-chip .sc-text strong { display: block; font-size: 0.95em; }
.sum-chip .sc-text span { color: var(--text-dim); font-size: 0.85em; }
/* ===== MNEMONICS ===== */
.mnemonic-box {
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
padding: 20px 22px; margin: 0 20px 30px;
max-width: 1160px; margin-inline: auto;
}
.mnemonic-box h3 { font-size: 0.8em; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.mnemonic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mn-item {
background: var(--bg-card2); border-radius: 10px; padding: 12px 14px;
border: 1px solid var(--border);
}
.mn-item .mn-letter { font-size: 1.8em; font-weight: 900; line-height: 1; }
.mn-item .mn-word { font-size: 0.9em; font-weight: 700; margin-top: 2px; }
.mn-item .mn-desc { font-size: 0.75em; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
/* ===== FOOTER ===== */
.footer {
text-align: center; padding: 30px 20px;
color: var(--text-dim); font-size: 0.78em; letter-spacing: 1px;
border-top: 1px solid var(--border); margin-top: 20px;
}
/* ===== ANIMATIONS ===== */
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
.card { animation: fadeIn 0.5s ease both; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
.card:nth-child(4) { animation-delay: 0.3s; }
.card:nth-child(5) { animation-delay: 0.4s; }
/* ===== STRESS-ADAPT TAG ===== */
.stress-tag {
display: inline-block; background: rgba(255,100,100,0.18);
color: #ff9090; border: 1px solid rgba(255,100,100,0.3);
border-radius: 6px; padding: 1px 8px; font-size: 0.75em; font-weight: 700;
}
.adapt-tag {
display: inline-block; background: rgba(100,200,100,0.15);
color: #90ee90; border: 1px solid rgba(100,200,100,0.25);
border-radius: 6px; padding: 1px 8px; font-size: 0.75em; font-weight: 700;
}
</style>
</head>
<body>
<!-- ===== HERO ===== -->
<div class="hero">
<div class="hero-label">📚 Patho Prof Buster · General Pathology · Paper 1</div>
<h1>Cellular Adaptations</h1>
<p>Visual learning guide covering all 5 cellular adaptations — definitions, mechanisms, types, and clinical examples from your notes.</p>
<div class="pill-row">
<span class="pill" style="color:var(--hyper-t);border-color:var(--hyper-t);">💪 Hypertrophy</span>
<span class="pill" style="color:var(--hyperp-t);border-color:var(--hyperp-t);">🔢 Hyperplasia</span>
<span class="pill" style="color:var(--atro-t);border-color:var(--atro-t);">📉 Atrophy</span>
<span class="pill" style="color:var(--meta-t);border-color:var(--meta-t);">🔄 Metaplasia</span>
<span class="pill" style="color:var(--dyspl-t);border-color:var(--dyspl-t);">⚠️ Dysplasia</span>
</div>
</div>
<!-- ===== OVERVIEW CARDS ===== -->
<div class="overview-grid">
<div class="ov-card" style="border-color:rgba(255,107,157,0.35);box-shadow:0 4px 20px rgba(255,107,157,0.1);">
<div class="ov-emoji" style="animation:float 3s ease-in-out infinite;">💪</div>
<div class="ov-title" style="color:var(--hyper-t);">Hypertrophy</div>
<div class="ov-sub">↑ Cell SIZE<br>Same number of cells</div>
</div>
<div class="ov-card" style="border-color:rgba(255,179,71,0.35);box-shadow:0 4px 20px rgba(255,179,71,0.1);">
<div class="ov-emoji" style="animation:float 3.4s ease-in-out infinite;">🔢</div>
<div class="ov-title" style="color:var(--hyperp-t);">Hyperplasia</div>
<div class="ov-sub">↑ Cell NUMBER<br>Same cell size</div>
</div>
<div class="ov-card" style="border-color:rgba(79,195,247,0.35);box-shadow:0 4px 20px rgba(79,195,247,0.1);">
<div class="ov-emoji" style="animation:float 2.8s ease-in-out infinite;">📉</div>
<div class="ov-title" style="color:var(--atro-t);">Atrophy</div>
<div class="ov-sub">↓ Cell SIZE & NUMBER<br>Still viable</div>
</div>
<div class="ov-card" style="border-color:rgba(105,240,174,0.35);box-shadow:0 4px 20px rgba(105,240,174,0.1);">
<div class="ov-emoji" style="animation:float 3.2s ease-in-out infinite;">🔄</div>
<div class="ov-title" style="color:var(--meta-t);">Metaplasia</div>
<div class="ov-sub">One adult cell type<br>→ Another adult cell type</div>
</div>
<div class="ov-card" style="border-color:rgba(206,147,216,0.35);box-shadow:0 4px 20px rgba(206,147,216,0.1);">
<div class="ov-emoji" style="animation:float 3.6s ease-in-out infinite;">⚠️</div>
<div class="ov-title" style="color:var(--dyspl-t);">Dysplasia</div>
<div class="ov-sub">Disordered cellular<br>development</div>
</div>
</div>
<!-- ===== QUICK SUMMARY BAR ===== -->
<div class="summary-bar">
<div class="sum-chip">
<div class="sc-icon">📐</div>
<div class="sc-text"><strong>Size Changes</strong><span>Hypertrophy ↑ · Atrophy ↓</span></div>
</div>
<div class="sum-chip">
<div class="sc-icon">🔢</div>
<div class="sc-text"><strong>Number Changes</strong><span>Hyperplasia ↑ · Atrophy ↓</span></div>
</div>
<div class="sum-chip">
<div class="sc-icon">🔬</div>
<div class="sc-text"><strong>Cell Type Change</strong><span>Metaplasia (adult→adult)</span></div>
</div>
<div class="sum-chip">
<div class="sc-icon">💀</div>
<div class="sc-text"><strong>Pre-Malignant</strong><span>Dysplasia → Ca in Situ</span></div>
</div>
</div>
<!-- ===== MAIN SECTION ===== -->
<div class="section">
<!-- ============ 1. HYPERTROPHY ============ -->
<div class="card ht">
<div class="card-header">
<div class="card-num">💪</div>
<div class="card-title-block">
<h2>① Hypertrophy</h2>
<p><span class="stress-tag">STRESS</span> → <span class="adapt-tag">Adaptation</span> → ↑ Cell Size (same number)</p>
</div>
</div>
<div class="card-body">
<!-- COL 1: DEFINITION -->
<div class="col-box">
<h3><span class="icon">📋</span> Introduction & Definition</h3>
<div class="def-text">
Increase in the <strong>size of cells</strong> resulting in increase in the size of the organ.
</div>
<!-- SVG: Normal vs Hypertrophy -->
<div class="diagram-wrap">
<svg width="200" height="110" viewBox="0 0 200 110">
<!-- Normal cell -->
<circle cx="45" cy="55" r="28" fill="rgba(255,107,157,0.1)" stroke="#ff6b9d" stroke-width="2"/>
<circle cx="45" cy="55" r="11" fill="#ff6b9d" opacity="0.7"/>
<text x="45" y="96" text-anchor="middle" fill="#9090bb" font-size="9" font-family="sans-serif">Normal</text>
<!-- Arrow -->
<path d="M82 55 L118 55" stroke="#666" stroke-width="1.5" marker-end="url(#arrowH)"/>
<text x="100" y="49" text-anchor="middle" fill="#9090bb" font-size="8" font-family="sans-serif">STRESS</text>
<!-- Hypertrophy cell -->
<circle cx="158" cy="55" r="38" fill="rgba(255,107,157,0.15)" stroke="#ff6b9d" stroke-width="2.5"/>
<circle cx="158" cy="55" r="13" fill="#ff6b9d" opacity="0.8"/>
<!-- organelles dots -->
<circle cx="140" cy="44" r="3" fill="#ff6b9d" opacity="0.5"/>
<circle cx="170" cy="42" r="3" fill="#ff6b9d" opacity="0.5"/>
<circle cx="145" cy="66" r="3" fill="#ff6b9d" opacity="0.5"/>
<circle cx="168" cy="68" r="3" fill="#ff6b9d" opacity="0.5"/>
<text x="158" y="104" text-anchor="middle" fill="#9090bb" font-size="9" font-family="sans-serif">Hypertrophy</text>
<defs>
<marker id="arrowH" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
<path d="M0,0 L0,6 L6,3 z" fill="#666"/>
</marker>
</defs>
</svg>
</div>
<div class="key-point">
<span class="kp-label">🔑 Key Point</span>
<strong>NOT</strong> due to cellular swelling. Due to ↑ structural proteins/cellular components.
Cell number remains the same.
</div>
</div>
<!-- COL 2: MECHANISM -->
<div class="col-box">
<h3><span class="icon">⚙️</span> Mechanism</h3>
<div class="mech-text">
<div class="mech-item">
<div class="mech-dot" style="background:var(--hyper-t);"></div>
<div>Increased size due to more <strong>structural components / cellular proteins</strong></div>
</div>
<div class="mech-item">
<div class="mech-dot" style="background:var(--hyper-t);"></div>
<div><strong>NOT</strong> due to cellular swelling</div>
</div>
</div>
<div class="change-grid">
<div class="change-box" style="background:rgba(79,195,247,0.08); border:1px solid rgba(79,195,247,0.2);">
<h4 style="color:#4fc3f7;">Normal Cell</h4>
<ul>
<li>Normal organelles</li>
<li>Normal proteins</li>
</ul>
</div>
<div class="change-box" style="background:rgba(255,107,157,0.08); border:1px solid rgba(255,107,157,0.2);">
<h4 style="color:#ff6b9d;">Hypertrophied</h4>
<ul>
<li>↑ Mitochondria</li>
<li>↑ Myofilaments</li>
<li>↑ ER & proteins</li>
</ul>
</div>
</div>
<!-- Cardiac SVG -->
<div class="diagram-wrap" style="margin-top:10px;">
<svg width="180" height="90" viewBox="0 0 180 90">
<!-- Heart outline simple -->
<path d="M90 75 C55 50 25 35 25 22 C25 10 38 8 50 14 C60 19 70 28 90 42 C110 28 120 19 130 14 C142 8 155 10 155 22 C155 35 125 50 90 75Z"
fill="rgba(255,107,157,0.15)" stroke="#ff6b9d" stroke-width="2"/>
<text x="90" y="85" text-anchor="middle" fill="#9090bb" font-size="8" font-family="sans-serif">Cardiac Hypertrophy</text>
<text x="90" y="42" text-anchor="middle" fill="#ff6b9d" font-size="9" font-weight="bold" font-family="sans-serif">↑ WALL THICKNESS</text>
</svg>
</div>
</div>
<!-- COL 3: TYPES -->
<div class="col-box">
<h3><span class="icon">🗂️</span> Types & Examples</h3>
<div class="type-section">
<div class="type-label physio">🌿 A) Physiologic Hypertrophy</div>
<ul class="type-list">
<li><strong>Uterus in pregnancy</strong> → Physiologic hypertrophy + hyperplasia</li>
<li><strong>Skeletal muscle hypertrophy</strong> → in athletes and manual labourers</li>
</ul>
</div>
<div class="type-section">
<div class="type-label patho">🔴 B) Pathologic Hypertrophy</div>
<ul class="type-list">
<li><strong>Cardiac muscle hypertrophy</strong>
<span class="eg-chip">Systemic Hypertension</span>
<span class="eg-chip">Aortic Valve Disease</span>
</li>
<li><strong>Smooth muscle hypertrophy</strong>
<span class="eg-chip">Cardiac Achalasia (oesophagus)</span>
<span class="eg-chip">Pyloric Stenosis (stomach)</span>
</li>
</ul>
</div>
<!-- SVG achalasia pyloric -->
<div class="diagram-wrap">
<svg width="180" height="75" viewBox="0 0 180 75">
<!-- Oesophagus tube -->
<rect x="20" y="10" width="18" height="40" rx="4" fill="rgba(255,107,157,0.2)" stroke="#ff6b9d" stroke-width="1.5"/>
<!-- Thick LES -->
<rect x="16" y="46" width="26" height="12" rx="3" fill="rgba(255,107,157,0.45)" stroke="#ff6b9d" stroke-width="2"/>
<text x="29" y="70" text-anchor="middle" fill="#9090bb" font-size="8" font-family="sans-serif">Achalasia</text>
<!-- Stomach -->
<ellipse cx="110" cy="40" rx="30" ry="22" fill="rgba(255,107,157,0.1)" stroke="#ff6b9d" stroke-width="1.5"/>
<!-- Pylorus thick -->
<rect x="136" y="33" width="16" height="14" rx="4" fill="rgba(255,107,157,0.4)" stroke="#ff6b9d" stroke-width="2"/>
<rect x="150" y="36" width="14" height="8" rx="3" fill="rgba(255,255,255,0.05)" stroke="#ff6b9d" stroke-width="1"/>
<text x="110" y="70" text-anchor="middle" fill="#9090bb" font-size="8" font-family="sans-serif">Pyloric Stenosis</text>
</svg>
</div>
</div>
</div>
</div>
<!-- ============ 2. HYPERPLASIA ============ -->
<div class="card hp">
<div class="card-header">
<div class="card-num">🔢</div>
<div class="card-title-block">
<h2>② Hyperplasia</h2>
<p><span class="stress-tag">STRESS</span> → <span class="adapt-tag">Adaptation</span> → ↑ Cell Number (same size)</p>
</div>
</div>
<div class="card-body">
<!-- COL 1: DEFINITION -->
<div class="col-box">
<h3><span class="icon">📋</span> Introduction & Definition</h3>
<div class="def-text">
Increase in the <strong>number of cells</strong> in an organ or tissue, resulting in increased mass of the organ or tissue.
</div>
<!-- SVG: Normal vs Hyperplasia -->
<div class="diagram-wrap">
<svg width="200" height="110" viewBox="0 0 200 110">
<!-- Normal: 2 cells -->
<circle cx="30" cy="50" r="18" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="1.5"/>
<circle cx="30" cy="50" r="7" fill="#ffb347" opacity="0.7"/>
<circle cx="56" cy="50" r="18" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="1.5"/>
<circle cx="56" cy="50" r="7" fill="#ffb347" opacity="0.7"/>
<text x="43" y="85" text-anchor="middle" fill="#9090bb" font-size="9" font-family="sans-serif">Normal (2)</text>
<!-- Arrow -->
<path d="M82 50 L110 50" stroke="#666" stroke-width="1.5" marker-end="url(#arrowP)"/>
<text x="96" y="44" text-anchor="middle" fill="#9090bb" font-size="8" font-family="sans-serif">STRESS</text>
<!-- Hyperplasia: 6 cells -->
<circle cx="130" cy="35" r="14" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="1.5"/>
<circle cx="130" cy="35" r="5" fill="#ffb347" opacity="0.7"/>
<circle cx="155" cy="35" r="14" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="1.5"/>
<circle cx="155" cy="35" r="5" fill="#ffb347" opacity="0.7"/>
<circle cx="130" cy="60" r="14" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="1.5"/>
<circle cx="130" cy="60" r="5" fill="#ffb347" opacity="0.7"/>
<circle cx="155" cy="60" r="14" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="1.5"/>
<circle cx="155" cy="60" r="5" fill="#ffb347" opacity="0.7"/>
<text x="142" y="85" text-anchor="middle" fill="#9090bb" font-size="9" font-family="sans-serif">Hyperplasia (↑)</text>
<defs>
<marker id="arrowP" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
<path d="M0,0 L0,6 L6,3 z" fill="#666"/>
</marker>
</defs>
</svg>
</div>
<div class="key-point">
<span class="kp-label">🔑 Key Point</span>
Occurs only in cells capable of <strong>mitotic division</strong>. Not possible in neurons or cardiac muscle under normal conditions.
</div>
</div>
<!-- COL 2: MECHANISM -->
<div class="col-box">
<h3><span class="icon">⚙️</span> Mechanism</h3>
<div class="mech-text">
<div class="mech-item">
<div class="mech-dot" style="background:var(--hyperp-t);"></div>
<div>Increase in cell number via <strong>cell division (mitosis)</strong></div>
</div>
<div class="mech-item">
<div class="mech-dot" style="background:var(--hyperp-t);"></div>
<div>Stimulated by <strong>hormonal / growth factor</strong> signals</div>
</div>
<div class="mech-item">
<div class="mech-dot" style="background:var(--hyperp-t);"></div>
<div>Response to increased functional demand or tissue loss</div>
</div>
</div>
<!-- SVG mitosis -->
<div class="diagram-wrap">
<svg width="170" height="90" viewBox="0 0 170 90">
<circle cx="50" cy="45" r="22" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="2"/>
<circle cx="50" cy="45" r="9" fill="#ffb347" opacity="0.6"/>
<!-- Mitosis arrow -->
<path d="M78 45 L92 45" stroke="#ffb347" stroke-width="1.5" marker-end="url(#arrowM)" stroke-dasharray="3,2"/>
<text x="85" y="38" fill="#ffb347" font-size="8" text-anchor="middle" font-family="sans-serif">Mitosis</text>
<!-- Two daughter cells -->
<circle cx="115" cy="30" r="16" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="1.5"/>
<circle cx="115" cy="30" r="6" fill="#ffb347" opacity="0.6"/>
<circle cx="115" cy="60" r="16" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="1.5"/>
<circle cx="115" cy="60" r="6" fill="#ffb347" opacity="0.6"/>
<!-- Dividing line -->
<path d="M99 45 L131 45" stroke="#ffb347" stroke-width="1" stroke-dasharray="2,2"/>
<defs>
<marker id="arrowM" markerWidth="5" markerHeight="5" refX="4" refY="2.5" orient="auto">
<path d="M0,0 L0,5 L5,2.5 z" fill="#ffb347"/>
</marker>
</defs>
<text x="115" y="85" text-anchor="middle" fill="#9090bb" font-size="8" font-family="sans-serif">Daughter Cells</text>
</svg>
</div>
<div style="background:rgba(255,179,71,0.07); border-radius:8px; padding:8px 12px; font-size:0.8em; color:#c8d8ff; margin-top:4px; border:1px solid rgba(255,179,71,0.15);">
<strong style="color:#ffb347;">Note:</strong> Hypertrophy + Hyperplasia often <strong>occur together</strong><br>e.g. Uterus in pregnancy
</div>
</div>
<!-- COL 3: TYPES -->
<div class="col-box">
<h3><span class="icon">🗂️</span> Types & Examples</h3>
<div class="type-section">
<div class="type-label physio">🌿 A) Physiologic Hyperplasia</div>
<ul class="type-list">
<li><strong>Hormonal hyperplasia:</strong> Glandular epithelium of female breast at puberty & pregnancy</li>
<li><strong>Compensatory hyperplasia:</strong> Liver regeneration after partial hepatectomy</li>
<li><strong>Uterus in pregnancy:</strong> Hyperplasia + Hypertrophy (combined)</li>
</ul>
</div>
<div class="type-section">
<div class="type-label patho">🔴 B) Pathologic Hyperplasia</div>
<ul class="type-list">
<li><strong>Endometrial hyperplasia</strong> <span class="eg-chip">Excess Oestrogen</span></li>
<li><strong>Benign Prostatic Hyperplasia (BPH)</strong> <span class="eg-chip">Older males</span></li>
<li><strong>Thyroid hyperplasia (Goitre)</strong> <span class="eg-chip">Iodine deficiency</span></li>
<li><strong>Skin warts (verrucae)</strong> <span class="eg-chip">HPV</span></li>
</ul>
</div>
<div class="key-point">
<span class="kp-label">⚠️ Important</span>
Pathologic hyperplasia is a <strong>precursor to neoplasia</strong> but does not directly become cancer.
</div>
</div>
</div>
</div>
<!-- ============ 3. ATROPHY ============ -->
<div class="card at">
<div class="card-header">
<div class="card-num">📉</div>
<div class="card-title-block">
<h2>③ Atrophy</h2>
<p><span class="stress-tag">STRESS</span> → <span class="adapt-tag">Adaptation</span> → ↓ Cell Size & Number (still viable)</p>
</div>
</div>
<div class="card-body">
<!-- COL 1: DEFINITION -->
<div class="col-box">
<h3><span class="icon">📋</span> Introduction & Definition</h3>
<div class="def-text">
<strong>Decrease in cell size and number of cells</strong><br>
<ul style="margin-top:6px; padding-left:16px;">
<li>Atrophied cells are <strong>smaller than normal</strong> but they are <strong>still viable</strong></li>
</ul>
</div>
<!-- SVG: Stress → Atrophy -->
<div class="diagram-wrap">
<svg width="200" height="110" viewBox="0 0 200 110">
<!-- STRESS label -->
<text x="30" y="14" text-anchor="middle" fill="#ff9090" font-size="9" font-weight="bold" font-family="sans-serif">STRESS</text>
<!-- Normal cell -->
<circle cx="40" cy="55" r="30" fill="rgba(79,195,247,0.12)" stroke="#4fc3f7" stroke-width="2"/>
<circle cx="40" cy="55" r="12" fill="#4fc3f7" opacity="0.6"/>
<circle cx="28" cy="44" r="3" fill="#4fc3f7" opacity="0.4"/>
<circle cx="52" cy="44" r="3" fill="#4fc3f7" opacity="0.4"/>
<circle cx="32" cy="65" r="3" fill="#4fc3f7" opacity="0.4"/>
<circle cx="50" cy="66" r="3" fill="#4fc3f7" opacity="0.4"/>
<!-- Arrow -->
<text x="105" y="35" text-anchor="middle" fill="#9090bb" font-size="8" font-family="sans-serif">Adaptation</text>
<path d="M80 55 L125 55" stroke="#4fc3f7" stroke-width="1.5" marker-end="url(#arrowA)"/>
<!-- Atrophy cell -->
<circle cx="160" cy="55" r="20" fill="rgba(79,195,247,0.08)" stroke="#4fc3f7" stroke-width="1.5"/>
<circle cx="160" cy="55" r="7" fill="#4fc3f7" opacity="0.5"/>
<text x="40" y="96" text-anchor="middle" fill="#9090bb" font-size="9" font-family="sans-serif">Normal</text>
<text x="160" y="86" text-anchor="middle" fill="#9090bb" font-size="9" font-family="sans-serif">Atrophy</text>
<defs>
<marker id="arrowA" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
<path d="M0,0 L0,6 L6,3 z" fill="#4fc3f7"/>
</marker>
</defs>
</svg>
</div>
<!-- Uterus progression -->
<div style="font-size:0.78em; color:#9090bb; text-align:center; margin-top:2px;">
<span style="color:#4fc3f7;">Uterus:</span> Normal → Pregnancy (↑ Hypertrophy+Hyperplasia) → Parturition (Atrophy)
</div>
<div class="key-point">
<span class="kp-label">🔑 Key Point</span>
Cell viability is <strong>maintained</strong>. Cells are smaller but functional.
Different from cell death where cells are non-viable.
</div>
</div>
<!-- COL 2: MECHANISM -->
<div class="col-box">
<h3><span class="icon">⚙️</span> Mechanism</h3>
<div class="def-text" style="border-color:var(--atro-t); margin-bottom:10px;">
Shrinkage in cell size is due to <strong>reduction in cell organelles</strong>
</div>
<!-- SVG normal vs atrophied organelles -->
<div class="diagram-wrap">
<svg width="190" height="100" viewBox="0 0 190 100">
<!-- Normal cell -->
<circle cx="45" cy="48" r="32" fill="rgba(79,195,247,0.1)" stroke="#4fc3f7" stroke-width="2"/>
<circle cx="45" cy="48" r="10" fill="#4fc3f7" opacity="0.6"/>
<ellipse cx="30" cy="40" rx="6" ry="3" fill="#4fc3f7" opacity="0.35" transform="rotate(-20,30,40)"/>
<ellipse cx="58" cy="40" rx="6" ry="3" fill="#4fc3f7" opacity="0.35" transform="rotate(20,58,40)"/>
<ellipse cx="32" cy="58" rx="6" ry="3" fill="#4fc3f7" opacity="0.35" transform="rotate(15,32,58)"/>
<ellipse cx="56" cy="58" rx="6" ry="3" fill="#4fc3f7" opacity="0.35" transform="rotate(-15,56,58)"/>
<text x="45" y="90" text-anchor="middle" fill="#9090bb" font-size="9" font-family="sans-serif">Normal</text>
<!-- Arrow -->
<path d="M84 48 L108 48" stroke="#4fc3f7" stroke-width="1.5" marker-end="url(#arrowA2)"/>
<!-- Atrophy cell -->
<circle cx="148" cy="48" r="22" fill="rgba(79,195,247,0.07)" stroke="#4fc3f7" stroke-width="1.5"/>
<circle cx="148" cy="48" r="7" fill="#4fc3f7" opacity="0.4"/>
<ellipse cx="138" cy="42" rx="4" ry="2" fill="#4fc3f7" opacity="0.2" transform="rotate(-20,138,42)"/>
<text x="148" y="82" text-anchor="middle" fill="#9090bb" font-size="9" font-family="sans-serif">Atrophy</text>
<defs>
<marker id="arrowA2" markerWidth="5" markerHeight="5" refX="4" refY="2.5" orient="auto">
<path d="M0,0 L0,5 L5,2.5 z" fill="#4fc3f7"/>
</marker>
</defs>
</svg>
</div>
<div class="mech-text">
<div class="mech-item"><div class="mech-dot"></div><div>↓ Mitochondria</div></div>
<div class="mech-item"><div class="mech-dot"></div><div>↓ Myofilaments</div></div>
<div class="mech-item"><div class="mech-dot"></div><div>↓ Endoplasmic reticulum</div></div>
<div class="mech-item"><div class="mech-dot"></div><div>Autophagic vacuoles (cell digests own organelles)</div></div>
<div class="mech-item"><div class="mech-dot"></div><div>↑ Lipofuscin pigment ("wear and tear" brown pigment)</div></div>
</div>
</div>
<!-- COL 3: TYPES -->
<div class="col-box">
<h3><span class="icon">🗂️</span> Types & Examples</h3>
<div class="type-section">
<div class="type-label physio">🌿 A) Physiologic Atrophy</div>
<ul class="type-list">
<li><strong>Thymus</strong> → atrophy in adult life</li>
<li><strong>Ovary</strong> → after menopause</li>
<li><strong>Brain</strong> → with ageing (Young age Normal → Old age Atrophy)</li>
<li><strong>Uterus</strong> → after parturition</li>
</ul>
</div>
<div class="type-section">
<div class="type-label patho">🔴 B) Pathologic Atrophy (7 types)</div>
<ul class="type-list">
<li><strong>Starvation atrophy</strong> → Cachexia in <span class="eg-chip">Cancer</span> <span class="eg-chip">Severely ill patients</span></li>
<li><strong>Ischaemic atrophy</strong> → Atrophic kidney in <span class="eg-chip">Atherosclerosis of renal artery</span>; Brain in <span class="eg-chip">Cerebral atherosclerosis</span></li>
<li><strong>Neuropathic atrophy</strong> → <span class="eg-chip">Poliomyelitis</span></li>
<li><strong>Disuse atrophy</strong> → <span class="eg-chip">Muscles in cast</span> <span class="eg-chip">Pancreas — duct obstruction</span></li>
<li><strong>Endocrine atrophy</strong> → <span class="eg-chip">Hypopituitarism</span> → atrophy of thyroid, adrenal, gonads</li>
<li><strong>Pressure atrophy</strong> → <span class="eg-chip">Skull erosion by meningioma</span> <span class="eg-chip">Sternum by aortic aneurysm</span></li>
<li><strong>Idiopathic atrophy</strong> → no cause present</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============ 4. METAPLASIA ============ -->
<div class="card mt">
<div class="card-header">
<div class="card-num">🔄</div>
<div class="card-title-block">
<h2>④ Metaplasia</h2>
<p><span class="stress-tag">STRESS</span> → <span class="adapt-tag">Adaptation</span> → One mature cell type replaced by another</p>
</div>
</div>
<div class="card-body">
<!-- COL 1: DEFINITION -->
<div class="col-box">
<h3><span class="icon">📋</span> Introduction & Definition</h3>
<div class="def-text">
One <strong>mature/adult cell type is replaced by another mature/adult cell type</strong>
</div>
<!-- SVG: Col → Sq and Sq → Col -->
<div class="diagram-wrap">
<svg width="200" height="115" viewBox="0 0 200 115">
<!-- Top row: Squamous → Columnar -->
<rect x="8" y="8" width="22" height="28" rx="4" fill="rgba(105,240,174,0.12)" stroke="#69f0ae" stroke-width="1.5"/>
<text x="19" y="23" text-anchor="middle" fill="#69f0ae" font-size="8" font-weight="bold" font-family="sans-serif">SQ</text>
<text x="19" y="46" text-anchor="middle" fill="#9090bb" font-size="7" font-family="sans-serif">Squamous</text>
<path d="M36 22 L58 22" stroke="#9090bb" stroke-width="1" marker-end="url(#arrowMeta)"/>
<text x="47" y="16" fill="#69f0ae" font-size="7" text-anchor="middle" font-family="sans-serif">STRESS</text>
<!-- Columnar cells (tall rect) -->
<rect x="62" y="5" width="10" height="32" rx="2" fill="rgba(105,240,174,0.2)" stroke="#69f0ae" stroke-width="1.5"/>
<rect x="74" y="5" width="10" height="32" rx="2" fill="rgba(105,240,174,0.2)" stroke="#69f0ae" stroke-width="1.5"/>
<rect x="86" y="5" width="10" height="32" rx="2" fill="rgba(105,240,174,0.2)" stroke="#69f0ae" stroke-width="1.5"/>
<text x="80" y="46" text-anchor="middle" fill="#9090bb" font-size="7" font-family="sans-serif">Columnar</text>
<!-- Divider line -->
<line x1="8" y1="57" x2="192" y2="57" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="4,3"/>
<!-- Bottom row: Columnar → Squamous -->
<rect x="8" y="63" width="10" height="32" rx="2" fill="rgba(105,240,174,0.12)" stroke="#69f0ae" stroke-width="1.5"/>
<rect x="20" y="63" width="10" height="32" rx="2" fill="rgba(105,240,174,0.12)" stroke="#69f0ae" stroke-width="1.5"/>
<rect x="32" y="63" width="10" height="32" rx="2" fill="rgba(105,240,174,0.12)" stroke="#69f0ae" stroke-width="1.5"/>
<text x="25" y="105" text-anchor="middle" fill="#9090bb" font-size="7" font-family="sans-serif">Columnar</text>
<path d="M50 78 L72 78" stroke="#9090bb" stroke-width="1" marker-end="url(#arrowMeta)"/>
<text x="61" y="72" fill="#69f0ae" font-size="7" text-anchor="middle" font-family="sans-serif">STRESS</text>
<rect x="76" y="67" width="22" height="22" rx="4" fill="rgba(105,240,174,0.2)" stroke="#69f0ae" stroke-width="1.5"/>
<text x="87" y="81" text-anchor="middle" fill="#69f0ae" font-size="8" font-weight="bold" font-family="sans-serif">SQ</text>
<text x="87" y="105" text-anchor="middle" fill="#9090bb" font-size="7" font-family="sans-serif">Squamous</text>
<defs>
<marker id="arrowMeta" markerWidth="5" markerHeight="5" refX="4" refY="2.5" orient="auto">
<path d="M0,0 L0,5 L5,2.5 z" fill="#9090bb"/>
</marker>
</defs>
</svg>
</div>
<div class="key-point">
<span class="kp-label">🔑 Key Point</span>
The replaced cell is <strong>better adapted</strong> to withstand the environmental stress.
Adaptive response to <strong>chronic irritation</strong>.
</div>
</div>
<!-- COL 2: MECHANISM -->
<div class="col-box">
<h3><span class="icon">⚙️</span> Mechanism</h3>
<div class="mech-text">
<div class="mech-item">
<div class="mech-dot" style="background:var(--meta-t);"></div>
<div>Does <strong>NOT</strong> result from a change in phenotype of an already differentiated cell type</div>
</div>
<div class="mech-item">
<div class="mech-dot" style="background:var(--meta-t);"></div>
<div>Result of a <strong>reprogramming of stem cells</strong> that are known to exist in normal tissues</div>
</div>
</div>
<!-- SVG: Squamous metaplasia (epithelium diagram) -->
<div class="diagram-wrap" style="flex-direction:column; gap:4px;">
<div style="font-size:0.75em; color:#9090bb; text-align:center;">Normal Columnar → Squamous Metaplasia</div>
<svg width="190" height="70" viewBox="0 0 190 70">
<!-- Basement membrane -->
<rect x="5" y="58" width="180" height="7" rx="2" fill="rgba(105,240,174,0.15)" stroke="#69f0ae" stroke-width="1"/>
<text x="95" y="67" text-anchor="middle" fill="#69f0ae" font-size="7" font-family="sans-serif">Basement membrane</text>
<!-- Left: Columnar epithelium -->
<rect x="10" y="28" width="11" height="28" rx="2" fill="rgba(79,195,247,0.2)" stroke="#4fc3f7" stroke-width="1"/>
<rect x="23" y="28" width="11" height="28" rx="2" fill="rgba(79,195,247,0.2)" stroke="#4fc3f7" stroke-width="1"/>
<rect x="36" y="28" width="11" height="28" rx="2" fill="rgba(79,195,247,0.2)" stroke="#4fc3f7" stroke-width="1"/>
<text x="33" y="22" text-anchor="middle" fill="#4fc3f7" font-size="7" font-family="sans-serif">Normal Columnar</text>
<!-- Divider -->
<line x1="52" y1="8" x2="52" y2="58" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,2"/>
<!-- Right: Squamous epithelium (layered flat cells) -->
<rect x="55" y="52" width="125" height="6" rx="2" fill="rgba(105,240,174,0.25)" stroke="#69f0ae" stroke-width="1"/>
<rect x="55" y="44" width="120" height="7" rx="2" fill="rgba(105,240,174,0.18)" stroke="#69f0ae" stroke-width="1"/>
<rect x="58" y="36" width="112" height="7" rx="2" fill="rgba(105,240,174,0.12)" stroke="#69f0ae" stroke-width="1"/>
<rect x="62" y="22" width="100" height="13" rx="3" fill="rgba(105,240,174,0.08)" stroke="#69f0ae" stroke-width="1"/>
<text x="110" y="16" text-anchor="middle" fill="#69f0ae" font-size="7" font-family="sans-serif">SQUAMOUS METAPLASIA</text>
</svg>
</div>
</div>
<!-- COL 3: TYPES -->
<div class="col-box">
<h3><span class="icon">🗂️</span> Types & Examples</h3>
<span style="font-size:0.72em; color:#9090bb; display:block; margin-bottom:6px;">Types: (A) Squamous (Col→Sq) | (B) Columnar (Sq→Col)</span>
<div class="type-section">
<div class="type-label" style="background:rgba(79,195,247,0.12); color:#4fc3f7; border-color:rgba(79,195,247,0.3);">🟦 A) Squamous Metaplasia (Col → Sq)</div>
<ul class="type-list">
<li><strong>Bronchus</strong> in chronic smokers <span class="eg-chip">Smoke ↑</span></li>
<li><strong>Gallbladder</strong> in cholelithiasis <span class="eg-chip">Calculus</span></li>
<li><strong>Prostate</strong> in chronic prostatitis <span class="eg-chip">Inflammation</span></li>
<li><strong>Uterine endocervix</strong> in prolapse of uterus <span class="eg-chip">Uterus Prolapse</span></li>
</ul>
</div>
<div class="type-section">
<div class="type-label" style="background:rgba(255,179,71,0.12); color:#ffb347; border-color:rgba(255,179,71,0.3);">🟧 B) Columnar Metaplasia (Sq → Col)</div>
<ul class="type-list">
<li><strong>Barrett's oesophagus</strong> → due to <span class="eg-chip">GERD</span>
<div style="font-size:0.8em; color:#666; margin-top:2px;">Normal → GERD (HCl → oesophagus) → Barrett's</div>
</li>
<li><strong>Cervical erosion → Ectocervix</strong> → increased exposure of cervical epithelium to oestrogen
<div style="font-size:0.78em; color:#9090bb; margin-top:2px;">Endo (Col) / Ecto (Sq) — Cervical erosion due to oestrogen exposure</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============ 5. DYSPLASIA ============ -->
<div class="card dy">
<div class="card-header">
<div class="card-num">⚠️</div>
<div class="card-title-block">
<h2>⑤ Dysplasia</h2>
<p>Disordered cellular development · Characterised by cellular cytologic changes · Pre-malignant</p>
</div>
</div>
<div class="card-body">
<!-- COL 1: DEFINITION -->
<div class="col-box">
<h3><span class="icon">📋</span> Introduction & Definition</h3>
<div class="def-text">
<ul style="padding-left:14px;">
<li><strong>Disordered cellular development</strong></li>
<li><strong>Characterised by cellular cytologic changes</strong></li>
</ul>
</div>
<!-- Progression SVG -->
<div style="margin-top:12px;">
<div style="font-size:0.72em; color:#9090bb; margin-bottom:6px; text-align:center;">Progression Continuum</div>
<div class="diagram-wrap">
<svg width="190" height="80" viewBox="0 0 190 80">
<!-- 4 stages -->
<!-- Stage 1: Normal -->
<rect x="2" y="20" width="36" height="36" rx="5" fill="rgba(105,240,174,0.15)" stroke="#69f0ae" stroke-width="1.5"/>
<!-- uniform cells -->
<rect x="7" y="48" width="6" height="6" rx="1" fill="#69f0ae" opacity="0.5"/>
<rect x="15" y="48" width="6" height="6" rx="1" fill="#69f0ae" opacity="0.5"/>
<rect x="23" y="48" width="6" height="6" rx="1" fill="#69f0ae" opacity="0.5"/>
<rect x="7" y="40" width="6" height="6" rx="1" fill="#69f0ae" opacity="0.4"/>
<rect x="15" y="40" width="6" height="6" rx="1" fill="#69f0ae" opacity="0.4"/>
<rect x="23" y="40" width="6" height="6" rx="1" fill="#69f0ae" opacity="0.4"/>
<text x="20" y="18" text-anchor="middle" fill="#69f0ae" font-size="7" font-family="sans-serif">Normal</text>
<path d="M40 38 L48 38" stroke="#9090bb" stroke-width="1" marker-end="url(#arrowDy)"/>
<!-- Stage 2: Sq Meta -->
<rect x="50" y="20" width="36" height="36" rx="5" fill="rgba(79,195,247,0.12)" stroke="#4fc3f7" stroke-width="1.5"/>
<rect x="52" y="50" width="32" height="4" rx="1" fill="#4fc3f7" opacity="0.4"/>
<rect x="52" y="44" width="30" height="4" rx="1" fill="#4fc3f7" opacity="0.3"/>
<rect x="54" y="38" width="26" height="5" rx="1" fill="#4fc3f7" opacity="0.2"/>
<text x="68" y="18" text-anchor="middle" fill="#4fc3f7" font-size="7" font-family="sans-serif">Sq. Meta.</text>
<path d="M88 38 L96 38" stroke="#9090bb" stroke-width="1" marker-end="url(#arrowDy)"/>
<!-- Stage 3: Dysplasia -->
<rect x="98" y="20" width="36" height="36" rx="5" fill="rgba(255,179,71,0.12)" stroke="#ffb347" stroke-width="1.5"/>
<!-- disordered cells -->
<circle cx="106" cy="50" r="4" fill="#ffb347" opacity="0.5"/>
<circle cx="117" cy="46" r="5" fill="#ffb347" opacity="0.5"/>
<circle cx="109" cy="38" r="3" fill="#ffb347" opacity="0.4"/>
<circle cx="122" cy="35" r="6" fill="#ffb347" opacity="0.45"/>
<text x="116" y="18" text-anchor="middle" fill="#ffb347" font-size="7" font-family="sans-serif">Dysplasia</text>
<path d="M136 38 L144 38" stroke="#9090bb" stroke-width="1" marker-end="url(#arrowDy)"/>
<!-- Stage 4: Ca in Situ -->
<rect x="146" y="20" width="40" height="36" rx="5" fill="rgba(255,107,107,0.15)" stroke="#ff7070" stroke-width="2"/>
<circle cx="152" cy="32" r="5" fill="#ff7070" opacity="0.6"/>
<circle cx="162" cy="28" r="6" fill="#ff7070" opacity="0.6"/>
<circle cx="172" cy="32" r="5" fill="#ff7070" opacity="0.6"/>
<circle cx="155" cy="42" r="6" fill="#ff7070" opacity="0.6"/>
<circle cx="167" cy="44" r="5" fill="#ff7070" opacity="0.6"/>
<text x="166" y="18" text-anchor="middle" fill="#ff7070" font-size="7" font-family="sans-serif">Ca in Situ</text>
<defs>
<marker id="arrowDy" markerWidth="5" markerHeight="5" refX="4" refY="2.5" orient="auto">
<path d="M0,0 L0,5 L5,2.5 z" fill="#9090bb"/>
</marker>
</defs>
</svg>
</div>
</div>
<div class="key-point" style="border:1px solid rgba(255,107,107,0.3); background:rgba(255,107,107,0.06);">
<span class="kp-label" style="color:#ff7070;">⚠️ Critical</span>
<strong>Full thickness dysplasia</strong> = <strong>Carcinoma in situ</strong>
<br><em>(Precursor of cancer)</em>
</div>
</div>
<!-- COL 2: MECHANISM -->
<div class="col-box">
<h3><span class="icon">⚙️</span> Mechanism — Cytological Changes</h3>
<div class="def-text" style="margin-bottom:10px;">
<strong>Cytological changes →</strong>
</div>
<ol style="font-size:0.83em; color:#c8d8ff; padding-left:18px; line-height:1.9;">
<li><strong>Increased number of layers</strong></li>
<li><strong>Disorderly arrangement</strong> of cells from basal layer to surface layer</li>
<li><strong>Loss of basal polarity</strong> — nuclei lying away from basement membrane</li>
<li><strong>Cellular and nuclear pleomorphism</strong></li>
<li><strong>Increased nucleocytoplasmic (N/C) ratio</strong></li>
<li><strong>Nuclear hyperchromatism</strong></li>
<li><strong>Increased mitotic activity</strong></li>
</ol>
<!-- SVG: normal epithelium vs dysplasia layers -->
<div class="diagram-wrap" style="margin-top:12px;">
<svg width="190" height="85" viewBox="0 0 190 85">
<!-- Normal -->
<text x="38" y="9" text-anchor="middle" fill="#69f0ae" font-size="8" font-family="sans-serif">Normal</text>
<rect x="5" y="76" width="64" height="5" rx="1" fill="rgba(255,255,255,0.1)" stroke="#666" stroke-width="1"/>
<rect x="5" y="68" width="64" height="7" rx="1" fill="rgba(105,240,174,0.2)" stroke="#69f0ae" stroke-width="0.5"/>
<rect x="7" y="58" width="60" height="9" rx="1" fill="rgba(105,240,174,0.15)" stroke="#69f0ae" stroke-width="0.5"/>
<rect x="9" y="46" width="56" height="11" rx="2" fill="rgba(105,240,174,0.1)" stroke="#69f0ae" stroke-width="0.5"/>
<rect x="10" y="13" width="54" height="32" rx="3" fill="rgba(105,240,174,0.05)" stroke="#69f0ae" stroke-width="0.5"/>
<!-- Normal cell dots aligned -->
<circle cx="22" cy="28" r="3" fill="#69f0ae" opacity="0.4"/>
<circle cx="38" cy="28" r="3" fill="#69f0ae" opacity="0.4"/>
<circle cx="54" cy="28" r="3" fill="#69f0ae" opacity="0.4"/>
<!-- Divider -->
<line x1="97" y1="5" x2="97" y2="82" stroke="rgba(255,255,255,0.15)" stroke-width="1" stroke-dasharray="3,2"/>
<!-- Dysplasia -->
<text x="144" y="9" text-anchor="middle" fill="#ff7070" font-size="8" font-family="sans-serif">Dysplasia</text>
<rect x="100" y="76" width="83" height="5" rx="1" fill="rgba(255,255,255,0.1)" stroke="#666" stroke-width="1"/>
<!-- Disordered crowded layers all the way -->
<rect x="100" y="12" width="83" height="63" rx="3" fill="rgba(255,107,107,0.07)" stroke="#ff7070" stroke-width="1.5"/>
<!-- Scattered large nuclei -->
<circle cx="112" cy="65" r="4" fill="#ff7070" opacity="0.5"/>
<circle cx="126" cy="60" r="5" fill="#ff7070" opacity="0.5"/>
<circle cx="140" cy="55" r="4" fill="#ff7070" opacity="0.4"/>
<circle cx="155" cy="62" r="6" fill="#ff7070" opacity="0.55"/>
<circle cx="110" cy="45" r="5" fill="#ff7070" opacity="0.45"/>
<circle cx="130" cy="38" r="6" fill="#ff7070" opacity="0.5"/>
<circle cx="148" cy="42" r="5" fill="#ff7070" opacity="0.45"/>
<circle cx="118" cy="25" r="5" fill="#ff7070" opacity="0.4"/>
<circle cx="140" cy="22" r="6" fill="#ff7070" opacity="0.45"/>
<circle cx="160" cy="28" r="5" fill="#ff7070" opacity="0.4"/>
</svg>
</div>
</div>
<!-- COL 3: TYPES (Comparison table) -->
<div class="col-box">
<h3><span class="icon">🗂️</span> Normal vs Dysplasia</h3>
<table class="compare-tbl">
<thead>
<tr>
<th style="background:rgba(105,240,174,0.15); color:#69f0ae; border-radius:8px 0 0 0;">Normal Endocervical Epithelium</th>
<th style="background:rgba(255,107,107,0.15); color:#ff7070; border-radius:0 8px 0 0;">Dysplasia</th>
</tr>
</thead>
<tbody>
<tr><td>No. of layers <span class="plus">normal</span></td><td>No. of layers <span class="up">↑</span></td></tr>
<tr><td><span class="plus">Ordered</span> arrangement</td><td><span class="minus">Disordered</span> arrangement</td></tr>
<tr><td>Basal Polarity <span class="plus">+</span></td><td>Basal Polarity <span class="minus">–</span></td></tr>
<tr><td>Pleomorphism <span class="plus">–</span></td><td>Pleomorphism <span class="up">+</span></td></tr>
<tr><td>N/C ratio <span class="plus">Normal</span></td><td>N/C ratio <span class="up">↑</span></td></tr>
<tr><td>Hyperchromatism <span class="plus">–</span></td><td>Hyperchromatism <span class="up">+</span></td></tr>
<tr><td>Mitosis <span class="plus">normal</span></td><td>Mitosis <span class="up">↑</span></td></tr>
</tbody>
</table>
<div class="progression" style="margin-top:14px;">
<span class="prog-step" style="background:rgba(105,240,174,0.15); color:#69f0ae;">Normal Endocervical Epithelium</span>
<span class="prog-arrow">→</span>
<span class="prog-step" style="background:rgba(79,195,247,0.15); color:#4fc3f7;">Squamous Metaplasia</span>
<span class="prog-arrow">→</span>
<span class="prog-step" style="background:rgba(255,179,71,0.15); color:#ffb347;">Dysplasia</span>
<span class="prog-arrow">→</span>
<span class="prog-step" style="background:rgba(255,107,107,0.2); color:#ff7070;">Carcinoma in Situ</span>
</div>
<div style="margin-top:12px; background:rgba(255,107,107,0.08); border:1px solid rgba(255,107,107,0.25); border-radius:10px; padding:10px 12px; font-size:0.82em;">
<strong style="color:#ff7070;">⚠️ Full thickness dysplasia = Carcinoma in situ</strong>
<br><span style="color:#9090bb;">(Precursor of cancer)</span>
</div>
</div>
</div>
</div>
</div><!-- /section -->
<!-- ===== MNEMONIC SECTION ===== -->
<div class="mnemonic-box">
<h3>🧠 Quick Recall Mnemonics & Memory Hooks</h3>
<div class="mnemonic-grid">
<div class="mn-item">
<div class="mn-letter" style="color:var(--hyper-t);">💪 HT</div>
<div class="mn-word" style="color:var(--hyper-t);">Hypertrophy = Heavy Training</div>
<div class="mn-desc">Like a bodybuilder — same number of muscle cells, each cell gets BIGGER. More proteins, bigger size.</div>
</div>
<div class="mn-item">
<div class="mn-letter" style="color:var(--hyperp-t);">🔢 HP</div>
<div class="mn-word" style="color:var(--hyperp-t);">Hyperplasia = High Population</div>
<div class="mn-desc">More cells, same size. Like a growing city — MORE buildings of the same height.</div>
</div>
<div class="mn-item">
<div class="mn-letter" style="color:var(--atro-t);">📉 AT</div>
<div class="mn-word" style="color:var(--atro-t);">Atrophy = All Tiny</div>
<div class="mn-desc">Cells shrink (↓ organelles). Still alive — 7 causes: Starvation, Ischaemic, Neuropathic, Disuse, Endocrine, Pressure, Idiopathic</div>
</div>
<div class="mn-item">
<div class="mn-letter" style="color:var(--meta-t);">🔄 MT</div>
<div class="mn-word" style="color:var(--meta-t);">Metaplasia = Make Trade</div>
<div class="mn-desc">One adult cell trades places with another. Stem cells reprogram — NOT phenotype change of existing cell.</div>
</div>
<div class="mn-item">
<div class="mn-letter" style="color:var(--dyspl-t);">⚠️ DY</div>
<div class="mn-word" style="color:var(--dyspl-t);">Dysplasia = Disorganised Youth</div>
<div class="mn-desc">7 cytologic changes. Full thickness = Ca in situ. Progression: Normal → Sq Meta → Dysplasia → CIS → Cancer</div>
</div>
</div>
</div>
<!-- ===== FOOTER ===== -->
<div class="footer">
📚 Source: Patho Prof Buster · General Pathology · Paper 1 · Pages 4–9/850
<br>Cell Adaptations, Cell Injury, and Death · All content from original notes
</div>
</body>
</html>
Running Command
ls -lh /tmp/workspace/cellular-adaptations/
Your Visualized Learning page is ready! Download it here:
visualized learning
HTML File · HTML
What's inside the Visualized Learning page
🌟 Design Features
- Dark space-themed UI with glowing colour-coded cards per adaptation
- Animated floating emoji icons in the overview grid
- Fade-in card animations on load
- Hover lift effects on all cards
📐 Structure (5 colour-coded sections)
| # | Adaptation | Colour | Visual Highlights |
|---|---|---|---|
| 💪 1 | Hypertrophy | Hot Pink | SVG cell size comparison · Heart wall diagram · Achalasia + Pyloric stenosis SVG |
| 🔢 2 | Hyperplasia | Amber/Orange | SVG 2-cell → 6-cell diagram · Mitosis cell division SVG |
| 📉 3 | Atrophy | Sky Blue | SVG normal vs shrunken cell + organelle loss · Brain ageing note · All 7 pathologic causes |
| 🔄 4 | Metaplasia | Green/Teal | SVG bidirectional Col↔Sq · Squamous metaplasia epithelium layer diagram · Barrett's + Cervix notes |
| ⚠️ 5 | Dysplasia | Purple | SVG 4-stage progression strip · Normal vs Dysplasia epithelium SVG · Full comparison table |
🧠 Bonus Sections
- Quick overview cards with floating animations at the top
- Summary chips (Size/Number/Cell type/Pre-malignant at a glance)
- Memory mnemonics for all 5 adaptations (HT = Heavy Training, HP = High Population, etc.)
Open in any browser for the full interactive dark-mode visual learning experience!
This is a shared conversation. Sign in to Orris to start your own chat.