Orris

make me flow charts of this in easy way

Reading File
Running Command

cd /home/daytona/workspace/attachments/627b560e-f82d-43bf-ac8e-d1ce4e1e9034 && python3 -c " import pdfplumber with pdfplumber.open('JOINTS (2).pdf') as pdf: print(f'Total pages: {len(pdf.pages)}') for i, page in enumerate(pdf.pages): text = page.extract_text() print(f'--- PAGE {i+1} ---') print(text[:3000] if text else '[No text]') print() "

Running Command

mkdir -p /home/daytona/workspace/joints-flowcharts

Writing File

~/joints-flowcharts/joints_flowcharts.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joints - Classification Flowcharts</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f0f4f8;
    color: #222;
    padding: 30px 20px;
  }
  h1 {
    text-align: center;
    font-size: 2em;
    color: #1a3a5c;
    margin-bottom: 6px;
    letter-spacing: 1px;
  }
  .subtitle {
    text-align: center;
    color: #5a7a9a;
    font-size: 1em;
    margin-bottom: 36px;
  }
  .section-title {
    font-size: 1.35em;
    font-weight: 700;
    color: #1a3a5c;
    margin: 40px 0 18px 0;
    padding-left: 12px;
    border-left: 5px solid #2d80c4;
  }

  /* ===== FLOWCHART 1: Main Classification Tree ===== */
  .tree {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .node {
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1em;
    text-align: center;
    display: inline-block;
    min-width: 160px;
  }
  .node-root {
    background: #1a3a5c;
    color: #fff;
    font-size: 1.3em;
    padding: 14px 40px;
    border-radius: 14px;
    min-width: 200px;
    box-shadow: 0 4px 16px #1a3a5c44;
  }
  .node-false {
    background: #e05a5a;
    color: #fff;
    box-shadow: 0 2px 8px #e05a5a44;
  }
  .node-true {
    background: #2d80c4;
    color: #fff;
    box-shadow: 0 2px 8px #2d80c444;
  }
  .node-sub {
    background: #f7a800;
    color: #222;
    font-weight: 700;
    box-shadow: 0 2px 8px #f7a80044;
  }
  .node-leaf {
    background: #fff;
    color: #333;
    font-weight: 600;
    border: 2px solid #ccc;
    font-size: 0.88em;
    min-width: 120px;
  }
  .node-example {
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: 500;
    border: 1.5px solid #81c784;
    font-size: 0.82em;
    min-width: 110px;
  }

  .connector-v {
    width: 3px;
    background: #aaa;
    margin: 0 auto;
    height: 22px;
  }
  .connector-v-short { height: 14px; }
  .connector-h {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    position: relative;
  }
  .branch-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
  }
  .h-line {
    border-top: 3px solid #aaa;
    width: 100%;
    margin-top: 0;
  }
  .h-line-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  /* ===== CARD GRIDS ===== */
  .card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 10px;
  }
  .card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px #0001;
    padding: 20px 22px;
    min-width: 240px;
    max-width: 320px;
    flex: 1 1 240px;
  }
  .card-header {
    font-size: 1.05em;
    font-weight: 700;
    border-radius: 8px;
    padding: 7px 14px;
    margin-bottom: 12px;
    text-align: center;
  }
  .card-header.red { background: #e05a5a; color: #fff; }
  .card-header.blue { background: #2d80c4; color: #fff; }
  .card-header.gold { background: #f7a800; color: #222; }
  .card-header.green { background: #43a047; color: #fff; }
  .card-header.purple { background: #7b52c7; color: #fff; }
  .card-header.teal { background: #00897b; color: #fff; }
  .card-header.navy { background: #1a3a5c; color: #fff; }
  .card ul {
    padding-left: 18px;
    font-size: 0.93em;
    line-height: 1.7;
  }
  .card ul li { margin-bottom: 2px; }
  .card .note {
    margin-top: 10px;
    font-size: 0.82em;
    color: #888;
    font-style: italic;
  }
  .card .row-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 0.9em;
  }
  .badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 700;
    white-space: nowrap;
  }
  .badge-axes { background: #e3f2fd; color: #1565c0; }
  .badge-dof { background: #fce4ec; color: #b71c1c; }
  .badge-move { background: #f3e5f5; color: #6a1b9a; }
  .badge-ex { background: #e8f5e9; color: #2e7d32; }

  /* ===== FLOWCHART: True joint structure ===== */
  .struct-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .struct-node {
    background: #fff;
    border: 2.5px solid #2d80c4;
    border-radius: 10px;
    padding: 9px 30px;
    font-size: 0.97em;
    font-weight: 600;
    text-align: center;
    min-width: 280px;
    position: relative;
    color: #1a3a5c;
  }
  .struct-node .sub-note {
    font-size: 0.78em;
    color: #555;
    font-weight: 400;
    display: block;
    margin-top: 2px;
  }
  .struct-connector {
    width: 3px;
    background: #2d80c4;
    height: 18px;
    margin: 0 auto;
  }
  .struct-side {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 700px;
  }
  .struct-main { flex: 1; }
  .struct-detail {
    background: #e3f2fd;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.82em;
    color: #1565c0;
    min-width: 180px;
    max-width: 220px;
    align-self: center;
    border: 1.5px solid #90caf9;
  }

  /* ===== MECHANICS FLOW ===== */
  .mech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }
  .mech-box {
    background: #fff;
    border-radius: 12px;
    border-left: 6px solid #2d80c4;
    padding: 14px 18px;
    min-width: 200px;
    max-width: 260px;
    flex: 1 1 200px;
    box-shadow: 0 1px 8px #0001;
  }
  .mech-box h4 {
    font-size: 0.95em;
    color: #1a3a5c;
    margin-bottom: 7px;
  }
  .mech-box ul {
    padding-left: 15px;
    font-size: 0.87em;
    line-height: 1.65;
    color: #333;
  }
  .mech-box.c1 { border-color: #e05a5a; }
  .mech-box.c2 { border-color: #2d80c4; }
  .mech-box.c3 { border-color: #f7a800; }
  .mech-box.c4 { border-color: #43a047; }

  /* ===== MAIN CLASSIFICATION TABLE (Flowchart style) ===== */
  .main-tree-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 30px 20px;
    box-shadow: 0 2px 16px #0001;
    overflow-x: auto;
  }
  .flow-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    align-items: flex-start;
    position: relative;
  }
  .flow-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .flow-top-line {
    width: 3px;
    background: #aaa;
    height: 24px;
    margin: 0 auto;
  }
  .flow-h-rule {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto;
  }
  .flow-h-rule::before, .flow-h-rule::after {
    content: '';
    display: block;
    border-top: 3px solid #aaa;
    flex: 1;
  }
  .branch-join-line {
    height: 3px;
    background: #aaa;
    margin: 0;
  }

  /* Responsive */
  @media (max-width: 700px) {
    .flow-row { flex-direction: column; align-items: center; gap: 0; }
    .card { min-width: 90vw; }
  }
</style>
</head>
<body>

<h1>JOINTS</h1>
<div class="subtitle">Classification, Types &amp; Functions &mdash; Easy Flowcharts<br>
<small>Source: THIEME Atlas of Anatomy &mdash; General Anatomy &amp; Musculoskeletal System</small></div>

<!-- ==================== FLOWCHART 1: MAIN CLASSIFICATION ==================== -->
<div class="section-title">Flowchart 1: Overall Classification of Joints</div>
<div class="main-tree-wrap">
  <!-- ROOT -->
  <div style="display:flex; flex-direction:column; align-items:center;">
    <div class="node node-root">JOINTS</div>
    <div class="connector-v" style="height:28px;"></div>

    <!-- Two main branches -->
    <div style="display:flex; align-items:flex-start; justify-content:center; gap:0; width:100%;">
      <!-- Left branch line -->
      <div style="flex:1; display:flex; flex-direction:column; align-items:flex-end;">
        <div style="width:50%; border-top:3px solid #aaa; margin-top:0;"></div>
      </div>
      <!-- Right branch line -->
      <div style="flex:1; display:flex; flex-direction:column; align-items:flex-start;">
        <div style="width:50%; border-top:3px solid #aaa; margin-top:0;"></div>
      </div>
    </div>

    <div style="display:flex; align-items:flex-start; justify-content:center; gap:80px; width:100%;">

      <!-- FALSE JOINTS -->
      <div style="display:flex; flex-direction:column; align-items:center;">
        <div class="connector-v" style="height:20px;"></div>
        <div class="node node-false" style="font-size:1.05em; padding:12px 28px;">FALSE JOINTS<br><span style="font-size:0.78em; font-weight:400;">(Synarthroses)</span><br><span style="font-size:0.73em; font-weight:400;">No joint cavity</span></div>
        <div class="connector-v" style="height:20px;"></div>

        <!-- 3 sub-branches -->
        <div style="display:flex; gap:0; align-items:flex-start;">
          <div style="flex:1; border-top:3px solid #e05a5a; margin-top:0;"></div>
          <div style="flex:1; border-top:3px solid #e05a5a; margin-top:0;"></div>
        </div>
        <div style="display:flex; gap:16px; align-items:flex-start; justify-content:center;">

          <div style="display:flex; flex-direction:column; align-items:center;">
            <div class="connector-v" style="height:16px; background:#e05a5a;"></div>
            <div class="node node-sub" style="min-width:130px; font-size:0.9em;">Syndesmoses<br><span style="font-weight:400; font-size:0.82em;">Fibrous</span></div>
            <div class="connector-v" style="height:12px; background:#f7a800;"></div>
            <div class="node node-leaf" style="font-size:0.78em; min-width:110px; text-align:left; padding:6px 10px;">
              &#x2022; Interosseous memb.<br>&#x2022; Tibiofibular syndesmosis<br>&#x2022; Fontanelles<br>&#x2022; Gomphosis (teeth)
            </div>
          </div>

          <div style="display:flex; flex-direction:column; align-items:center;">
            <div class="connector-v" style="height:16px; background:#e05a5a;"></div>
            <div class="node node-sub" style="min-width:130px; font-size:0.9em;">Synchondroses<br><span style="font-weight:400; font-size:0.82em;">Cartilaginous</span></div>
            <div class="connector-v" style="height:12px; background:#f7a800;"></div>
            <div class="node node-leaf" style="font-size:0.78em; min-width:110px; text-align:left; padding:6px 10px;">
              &#x2022; Epiphyseal plates<br>&#x2022; Costal cartilage<br>&#x2022; Pubic symphysis<br>&#x2022; Intervertebral discs
            </div>
          </div>

          <div style="display:flex; flex-direction:column; align-items:center;">
            <div class="connector-v" style="height:16px; background:#e05a5a;"></div>
            <div class="node node-sub" style="min-width:130px; font-size:0.9em;">Synostoses<br><span style="font-weight:400; font-size:0.82em;">Bony Fusion</span></div>
            <div class="connector-v" style="height:12px; background:#f7a800;"></div>
            <div class="node node-leaf" style="font-size:0.78em; min-width:110px; text-align:left; padding:6px 10px;">
              &#x2022; Sacrum<br>&#x2022; Hip bone<br>&#x2022; Ossified epiphyseal plates (adults)
            </div>
          </div>

        </div>
      </div>

      <!-- TRUE JOINTS -->
      <div style="display:flex; flex-direction:column; align-items:center;">
        <div class="connector-v" style="height:20px;"></div>
        <div class="node node-true" style="font-size:1.05em; padding:12px 28px;">TRUE JOINTS<br><span style="font-size:0.78em; font-weight:400;">(Diarthroses)</span><br><span style="font-size:0.73em; font-weight:400;">Joint cavity present</span></div>
        <div class="connector-v" style="height:20px;"></div>

        <div style="display:flex; gap:0; align-items:flex-start;">
          <div style="flex:1; border-top:3px solid #2d80c4; margin-top:0;"></div>
          <div style="flex:1; border-top:3px solid #2d80c4; margin-top:0;"></div>
        </div>
        <div style="display:flex; gap:16px; align-items:flex-start; justify-content:center;">

          <div style="display:flex; flex-direction:column; align-items:center;">
            <div class="connector-v" style="height:16px; background:#2d80c4;"></div>
            <div class="node node-sub" style="background:#7b52c7; color:#fff; min-width:130px; font-size:0.9em;">Diarthroses<br><span style="font-weight:400; font-size:0.82em;">Variable DOF</span></div>
            <div class="connector-v" style="height:12px; background:#7b52c7;"></div>
            <div class="node node-leaf" style="font-size:0.78em; min-width:120px; text-align:left; padding:6px 10px;">
              &#x2022; Plane joints<br>&#x2022; Hinge joints<br>&#x2022; Pivot joints<br>&#x2022; Ellipsoidal joints<br>&#x2022; Saddle joints<br>&#x2022; Spheroidal joints
            </div>
          </div>

          <div style="display:flex; flex-direction:column; align-items:center;">
            <div class="connector-v" style="height:16px; background:#2d80c4;"></div>
            <div class="node node-sub" style="background:#00897b; color:#fff; min-width:130px; font-size:0.9em;">Amphiarthroses<br><span style="font-weight:400; font-size:0.82em;">Stiff / Limited</span></div>
            <div class="connector-v" style="height:12px; background:#00897b;"></div>
            <div class="node node-leaf" style="font-size:0.78em; min-width:110px; text-align:left; padding:6px 10px;">
              &#x2022; Sacroiliac joint<br>&#x2022; Tight ligamentous constraints
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

<!-- ==================== FLOWCHART 2: FALSE JOINTS DETAIL ==================== -->
<div class="section-title">Flowchart 2: False Joints (Synarthroses) in Detail</div>
<div class="card-grid">
  <div class="card">
    <div class="card-header red">1. Syndesmoses (Fibrous Joints)</div>
    <div class="row-item"><span style="font-size:1.3em;">🔗</span> <b>Connection:</b> Fibrous connective tissue</div>
    <div class="row-item"><span style="font-size:1.3em;">📐</span> <b>Mobility:</b> Low (slightly movable)</div>
    <ul>
      <li>Interosseous membrane (radius-ulna)</li>
      <li>Tibiofibular syndesmosis</li>
      <li>Fontanelles (newborn skull)</li>
      <li>Gomphosis – tooth in bony socket</li>
    </ul>
  </div>
  <div class="card">
    <div class="card-header gold">2. Synchondroses (Cartilaginous Joints)</div>
    <div class="row-item"><span style="font-size:1.3em;">🦴</span> <b>Connection:</b> Cartilage</div>
    <div class="row-item"><span style="font-size:1.3em;">📐</span> <b>Mobility:</b> Very limited</div>
    <ul>
      <li>Epiphyseal growth plates (allow bone growth; eventually ossify)</li>
      <li>Hip bone growth plates (ilium, ischium, pubis)</li>
      <li>Costal cartilage (ribs to sternum)</li>
      <li>Pubic symphysis &amp; intervertebral discs (fibrocartilaginous = symphyses)</li>
    </ul>
  </div>
  <div class="card">
    <div class="card-header navy">3. Synostoses (Bony Fusion)</div>
    <div class="row-item"><span style="font-size:1.3em;">🔒</span> <b>Connection:</b> Bone replaces cartilage/fibrous tissue</div>
    <div class="row-item"><span style="font-size:1.3em;">📐</span> <b>Mobility:</b> None (completely stiff)</div>
    <ul>
      <li>Sacrum (fused sacral vertebrae)</li>
      <li>Hip bone (fused ilium, ischium, pubis)</li>
      <li>Closed/ossified epiphyseal plates in adults</li>
    </ul>
  </div>
</div>

<!-- ==================== FLOWCHART 3: TRUE JOINT STRUCTURE ==================== -->
<div class="section-title">Flowchart 3: Structure of a True Joint (Synovial Joint)</div>
<div class="main-tree-wrap">
  <div style="display:flex; flex-direction:column; align-items:center; gap:0;">
    <div style="background:#2d80c4; color:#fff; border-radius:12px; padding:12px 36px; font-size:1.1em; font-weight:700;">TRUE JOINT (Synovial / Diarthrosis)</div>
    <div class="connector-v" style="height:22px; background:#2d80c4;"></div>
    <!-- 8 components in a grid -->
    <div style="display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:900px;">

      <div style="background:#e3f2fd; border:2px solid #2d80c4; border-radius:10px; padding:10px 16px; min-width:180px; max-width:220px;">
        <div style="font-weight:700; color:#1565c0; margin-bottom:4px;">① Articular Surfaces</div>
        <div style="font-size:0.85em; color:#333;">Covered by hyaline cartilage<br>1-2 mm (phalanges) to 5-7 mm (femoropatellar)<br><span style="color:#888; font-style:italic;">Exception: jaw &amp; sternoclavicular use fibrous cartilage</span></div>
      </div>

      <div style="background:#fce4ec; border:2px solid #e05a5a; border-radius:10px; padding:10px 16px; min-width:180px; max-width:220px;">
        <div style="font-weight:700; color:#b71c1c; margin-bottom:4px;">② Joint Cavity</div>
        <div style="font-size:0.85em; color:#333;">Narrow space (few mm)<br>Contains articular recesses</div>
      </div>

      <div style="background:#f3e5f5; border:2px solid #7b52c7; border-radius:10px; padding:10px 16px; min-width:180px; max-width:220px;">
        <div style="font-weight:700; color:#6a1b9a; margin-bottom:4px;">③ Joint Capsule</div>
        <div style="font-size:0.85em; color:#333;">Closed capsule with alar folds, synovial folds &amp; villi<br>Inner synovial membrane produces synovial fluid</div>
      </div>

      <div style="background:#e8f5e9; border:2px solid #43a047; border-radius:10px; padding:10px 16px; min-width:180px; max-width:220px;">
        <div style="font-weight:700; color:#2e7d32; margin-bottom:4px;">④ Synovial Fluid</div>
        <div style="font-size:0.85em; color:#333;">Highly viscous<br>Lubricates &amp; nourishes avascular cartilage<br>(by diffusion &amp; convection)</div>
      </div>

      <div style="background:#fff8e1; border:2px solid #f7a800; border-radius:10px; padding:10px 16px; min-width:180px; max-width:260px;">
        <div style="font-weight:700; color:#e65100; margin-bottom:4px;">⑤ Intra-articular Structures</div>
        <div style="font-size:0.85em; color:#333;">
          <b>Menisci</b> – crescent-shaped; knee only<br>
          <b>Articular discs</b> – divide joint into 2 chambers; jaw, sternoclavicular, wrist<br>
          <b>Articular labra</b> – wedge fibrocartilage; hip &amp; shoulder
        </div>
      </div>

      <div style="background:#e0f7fa; border:2px solid #00897b; border-radius:10px; padding:10px 16px; min-width:180px; max-width:220px;">
        <div style="font-weight:700; color:#006064; margin-bottom:4px;">⑥ Ligaments</div>
        <div style="font-size:0.85em; color:#333;">Intra- &amp; extracapsular<br>Primary joint stabilizers</div>
      </div>

      <div style="background:#fafafa; border:2px solid #999; border-radius:10px; padding:10px 16px; min-width:180px; max-width:220px;">
        <div style="font-weight:700; color:#333; margin-bottom:4px;">⑦ Muscles</div>
        <div style="font-size:0.85em; color:#333;">Agonist &amp; antagonist pairs<br>Cross joint to produce opposing movements</div>
      </div>

      <div style="background:#fbe9e7; border:2px solid #e64a19; border-radius:10px; padding:10px 16px; min-width:180px; max-width:220px;">
        <div style="font-weight:700; color:#bf360c; margin-bottom:4px;">⑧ Synovial Bursae</div>
        <div style="font-size:0.85em; color:#333;">Near the joint<br>May communicate with joint cavity<br>Reduce friction</div>
      </div>

    </div>
    <div style="background:#fff3e0; border:2px dashed #f7a800; border-radius:10px; padding:10px 20px; margin-top:16px; max-width:600px; text-align:center; font-size:0.88em; color:#6d4c41;">
      ⚠️ <b>Key Note:</b> Synovial membrane CAN regenerate, but hyaline cartilage CANNOT — it is avascular, has no perichondrium, and depends entirely on synovial fluid for nutrition.
    </div>
  </div>
</div>

<!-- ==================== FLOWCHART 4: TRUE JOINT TYPES ==================== -->
<div class="section-title">Flowchart 4: Types of True Joints (by Shape, Axes &amp; Degrees of Freedom)</div>
<div class="card-grid">

  <div class="card">
    <div class="card-header blue">Plane Joints</div>
    <div class="row-item"><span class="badge badge-axes">Axes: 1-2 translational</span></div>
    <div class="row-item"><span class="badge badge-dof">DOF: 1-4</span></div>
    <div class="row-item"><span class="badge badge-move">Gliding in multiple directions</span></div>
    <div class="row-item"><span class="badge badge-ex">Femoropatellar, Facet joints of spine</span></div>
    <div class="note">Patella slides up/down in femoral groove; facet joints allow vertebral gliding</div>
  </div>

  <div class="card">
    <div class="card-header red">Hinge Joint</div>
    <div class="row-item"><span class="badge badge-axes">Axes: 1 rotational</span></div>
    <div class="row-item"><span class="badge badge-dof">DOF: 2</span></div>
    <div class="row-item"><span class="badge badge-move">Flexion &amp; Extension only</span></div>
    <div class="row-item"><span class="badge badge-ex">Elbow, Knee</span></div>
    <div class="note">Like a door hinge — moves in one plane only</div>
  </div>

  <div class="card">
    <div class="card-header teal">Pivot Joint</div>
    <div class="row-item"><span class="badge badge-axes">Axes: 1 rotational</span></div>
    <div class="row-item"><span class="badge badge-dof">DOF: 2</span></div>
    <div class="row-item"><span class="badge badge-move">Rotation (axial) only</span></div>
    <div class="row-item"><span class="badge badge-ex">Atlanto-axial joint, Proximal radioulnar joint</span></div>
    <div class="note">Allows head rotation (nodding NO); forearm pronation/supination</div>
  </div>

  <div class="card">
    <div class="card-header purple">Ellipsoidal Joint</div>
    <div class="row-item"><span class="badge badge-axes">Axes: 2 rotational</span></div>
    <div class="row-item"><span class="badge badge-dof">DOF: 4</span></div>
    <div class="row-item"><span class="badge badge-move">Flexion, Extension, Abduction, Adduction</span></div>
    <div class="row-item"><span class="badge badge-ex">Radiocarpal (wrist) joint</span></div>
    <div class="note">Oval head in oval socket — 2 axes, no axial rotation</div>
  </div>

  <div class="card">
    <div class="card-header gold">Saddle Joint</div>
    <div class="row-item"><span class="badge badge-axes">Axes: 2 rotational</span></div>
    <div class="row-item"><span class="badge badge-dof">DOF: 4</span></div>
    <div class="row-item"><span class="badge badge-move">Flexion, Extension, Abduction, Adduction</span></div>
    <div class="row-item"><span class="badge badge-ex">Carpometacarpal joint of thumb</span></div>
    <div class="note">Two saddle-shaped surfaces — each concave one way, convex the other</div>
  </div>

  <div class="card">
    <div class="card-header green">Spheroidal Joint — Deep Socket</div>
    <div class="row-item"><span class="badge badge-axes">Axes: 3 rotational</span></div>
    <div class="row-item"><span class="badge badge-dof">DOF: 6</span></div>
    <div class="row-item"><span class="badge badge-move">Flexion, Extension, Abduction, Adduction, Int./Ext. Rotation</span></div>
    <div class="row-item"><span class="badge badge-ex">Hip joint (acetabulum)</span></div>
    <div class="note">Deep socket = more stability but less range than shallow socket</div>
  </div>

  <div class="card">
    <div class="card-header navy">Spheroidal Joint — Shallow Socket</div>
    <div class="row-item"><span class="badge badge-axes">Axes: 3 rotational</span></div>
    <div class="row-item"><span class="badge badge-dof">DOF: 6</span></div>
    <div class="row-item"><span class="badge badge-move">All 6 movements + GREATER range</span></div>
    <div class="row-item"><span class="badge badge-ex">Shoulder (glenohumeral) joint</span></div>
    <div class="note">Shallow socket = maximum range of motion but less inherent stability</div>
  </div>

</div>
<div style="background:#fff; border-radius:12px; padding:14px 22px; max-width:700px; margin:8px auto 0; border-left:5px solid #2d80c4; font-size:0.9em; box-shadow:0 1px 6px #0001;">
  <b>Key Principle:</b> The more <i>congruent</i> the articular surfaces (similar radius of curvature, e.g., shoulder) → surfaces <b>slide</b>. The less congruent → surfaces <b>roll</b> (e.g., knee). Most joints use a <b>roll-slide combination</b>.
</div>

<!-- ==================== FLOWCHART 5: JOINT STABILITY ==================== -->
<div class="section-title">Flowchart 5: Joint Mechanics — Stability Constraints</div>
<div class="main-tree-wrap">
  <div style="display:flex; flex-direction:column; align-items:center;">
    <div style="background:#1a3a5c; color:#fff; border-radius:12px; padding:12px 36px; font-size:1.1em; font-weight:700;">JOINT STABILITY</div>
    <div class="connector-v" style="height:20px;"></div>
    <div style="font-size:0.88em; color:#888; margin-bottom:12px;">4 Types of Constraints</div>
    <div class="mech-grid">
      <div class="mech-box c1">
        <h4>① Bony Constraint</h4>
        <ul><li>Shape of articular surfaces</li><li>Deep sockets = more stability (e.g., hip)</li><li>Shallow sockets = more mobility (e.g., shoulder)</li></ul>
      </div>
      <div class="mech-box c2">
        <h4>② Muscular Constraint</h4>
        <ul><li>Muscles crossing the joint</li><li>Agonist-antagonist pairs</li><li>Active stabilizers during movement</li></ul>
      </div>
      <div class="mech-box c3">
        <h4>③ Ligamentous Constraint</h4>
        <ul><li>Intra- and extracapsular ligaments</li><li>Limit range of motion</li><li>Primary passive stabilizers</li></ul>
      </div>
      <div class="mech-box c4">
        <h4>④ Soft-Tissue Constraint</h4>
        <ul><li>Joint capsule</li><li>Surrounding soft tissue</li><li>Provides containment</li></ul>
      </div>
    </div>

    <div style="margin-top:22px; font-size:1em; font-weight:700; color:#1a3a5c; margin-bottom:10px;">Key Muscles for Erect Posture</div>
    <div style="display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:800px;">
      <div style="background:#e8f5e9; border:1.5px solid #43a047; border-radius:10px; padding:9px 16px; min-width:190px; font-size:0.87em;">
        <b style="color:#2e7d32;">Ankle (Sagittal Plane)</b><br>Triceps surae + Tibialis anterior
      </div>
      <div style="background:#e3f2fd; border:1.5px solid #2d80c4; border-radius:10px; padding:9px 16px; min-width:190px; font-size:0.87em;">
        <b style="color:#1565c0;">Knee</b><br>Quadriceps femoris
      </div>
      <div style="background:#fce4ec; border:1.5px solid #e05a5a; border-radius:10px; padding:9px 16px; min-width:190px; font-size:0.87em;">
        <b style="color:#b71c1c;">Hip (Sagittal Plane)</b><br>Gluteal muscles
      </div>
      <div style="background:#f3e5f5; border:1.5px solid #7b52c7; border-radius:10px; padding:9px 16px; min-width:190px; font-size:0.87em;">
        <b style="color:#6a1b9a;">Hip (Frontal Plane)</b><br>Gluteus medius &amp; minimus
      </div>
      <div style="background:#fff8e1; border:1.5px solid #f7a800; border-radius:10px; padding:9px 16px; min-width:190px; font-size:0.87em;">
        <b style="color:#e65100;">Spinal Column</b><br>Intrinsic back muscles
      </div>
    </div>
  </div>
</div>

<!-- ==================== QUICK REFERENCE TABLE ==================== -->
<div class="section-title">Quick Reference: True Joint Types at a Glance</div>
<div style="overflow-x:auto; background:#fff; border-radius:14px; box-shadow:0 2px 12px #0001; padding:10px;">
<table style="width:100%; border-collapse:collapse; font-size:0.9em;">
  <thead>
    <tr style="background:#1a3a5c; color:#fff;">
      <th style="padding:10px 14px; text-align:left;">Joint Type</th>
      <th style="padding:10px 14px;">Axes</th>
      <th style="padding:10px 14px;">DOF</th>
      <th style="padding:10px 14px; text-align:left;">Movements</th>
      <th style="padding:10px 14px; text-align:left;">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background:#f0f4f8;">
      <td style="padding:9px 14px; font-weight:600;">Plane (Femoropatellar)</td>
      <td style="text-align:center; padding:9px;">1 translational</td>
      <td style="text-align:center; padding:9px;">1</td>
      <td style="padding:9px;">Slide up/down</td>
      <td style="padding:9px;">Patella in femoral groove</td>
    </tr>
    <tr>
      <td style="padding:9px 14px; font-weight:600;">Plane (Vertebral)</td>
      <td style="text-align:center; padding:9px;">1-2 translational</td>
      <td style="text-align:center; padding:9px;">2-4</td>
      <td style="padding:9px;">Gliding in multiple directions</td>
      <td style="padding:9px;">Facet joints of spine</td>
    </tr>
    <tr style="background:#f0f4f8;">
      <td style="padding:9px 14px; font-weight:600;">Ellipsoidal</td>
      <td style="text-align:center; padding:9px;">2 rotational</td>
      <td style="text-align:center; padding:9px;">4</td>
      <td style="padding:9px;">Flex, Ext, Abd, Add</td>
      <td style="padding:9px;">Radiocarpal (wrist)</td>
    </tr>
    <tr>
      <td style="padding:9px 14px; font-weight:600;">Saddle</td>
      <td style="text-align:center; padding:9px;">2 rotational</td>
      <td style="text-align:center; padding:9px;">4</td>
      <td style="padding:9px;">Flex, Ext, Abd, Add</td>
      <td style="padding:9px;">CMC joint of thumb</td>
    </tr>
    <tr style="background:#f0f4f8;">
      <td style="padding:9px 14px; font-weight:600;">Hinge</td>
      <td style="text-align:center; padding:9px;">1 rotational</td>
      <td style="text-align:center; padding:9px;">2</td>
      <td style="padding:9px;">Flexion, Extension</td>
      <td style="padding:9px;">Elbow, Knee</td>
    </tr>
    <tr>
      <td style="padding:9px 14px; font-weight:600;">Pivot</td>
      <td style="text-align:center; padding:9px;">1 rotational</td>
      <td style="text-align:center; padding:9px;">2</td>
      <td style="padding:9px;">Rotation (axial)</td>
      <td style="padding:9px;">Atlanto-axial, Proximal radioulnar</td>
    </tr>
    <tr style="background:#f0f4f8;">
      <td style="padding:9px 14px; font-weight:600;">Spheroidal (deep)</td>
      <td style="text-align:center; padding:9px;">3 rotational</td>
      <td style="text-align:center; padding:9px;">6</td>
      <td style="padding:9px;">Flex, Ext, Abd, Add, IR, ER</td>
      <td style="padding:9px;">Hip joint</td>
    </tr>
    <tr>
      <td style="padding:9px 14px; font-weight:600;">Spheroidal (shallow)</td>
      <td style="text-align:center; padding:9px;">3 rotational</td>
      <td style="text-align:center; padding:9px;">6</td>
      <td style="padding:9px;">All 6 + greater range</td>
      <td style="padding:9px;">Shoulder (glenohumeral)</td>
    </tr>
  </tbody>
</table>
</div>

<div style="text-align:center; color:#aaa; font-size:0.8em; margin-top:30px; padding-bottom:20px;">
  Source: THIEME Atlas of Anatomy — General Anatomy &amp; Musculoskeletal System, Sections 4.2–4.7
</div>

</body>
</html>
Running Command

rm /home/daytona/workspace/joints-flowcharts/joints_flowcharts.html

Writing File

~/joints-flowcharts/joints_flowcharts.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joints - Classification Flowcharts</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f0f4f8;
    color: #222;
    padding: 30px 20px;
  }
  h1 {
    text-align: center;
    font-size: 2em;
    color: #1a3a5c;
    margin-bottom: 6px;
    letter-spacing: 1px;
  }
  .subtitle {
    text-align: center;
    color: #5a7a9a;
    font-size: 1em;
    margin-bottom: 36px;
  }
  .section-title {
    font-size: 1.35em;
    font-weight: 700;
    color: #1a3a5c;
    margin: 40px 0 18px 0;
    padding-left: 12px;
    border-left: 5px solid #2d80c4;
  }
  .node-root {
    background: #1a3a5c;
    color: #fff;
    font-size: 1.3em;
    padding: 14px 40px;
    border-radius: 14px;
    min-width: 200px;
    box-shadow: 0 4px 16px #1a3a5c44;
    font-weight: 700;
    text-align: center;
  }
  .node-false {
    background: #e05a5a;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.05em;
    text-align: center;
    box-shadow: 0 2px 8px #e05a5a44;
  }
  .node-true {
    background: #2d80c4;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.05em;
    text-align: center;
    box-shadow: 0 2px 8px #2d80c444;
  }
  .node-sub {
    background: #f7a800;
    color: #222;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 8px #f7a80044;
  }
  .node-leaf {
    background: #fff;
    color: #333;
    font-weight: 500;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.82em;
    text-align: left;
  }
  .vline { width: 3px; margin: 0 auto; }
  .card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 10px;
  }
  .card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px #0001;
    padding: 20px 22px;
    min-width: 240px;
    max-width: 310px;
    flex: 1 1 240px;
  }
  .card-header {
    font-size: 1.05em;
    font-weight: 700;
    border-radius: 8px;
    padding: 7px 14px;
    margin-bottom: 12px;
    text-align: center;
  }
  .ch-red { background: #e05a5a; color: #fff; }
  .ch-blue { background: #2d80c4; color: #fff; }
  .ch-gold { background: #f7a800; color: #222; }
  .ch-green { background: #43a047; color: #fff; }
  .ch-purple { background: #7b52c7; color: #fff; }
  .ch-teal { background: #00897b; color: #fff; }
  .ch-navy { background: #1a3a5c; color: #fff; }
  .card ul { padding-left: 18px; font-size: 0.92em; line-height: 1.75; }
  .card .note { margin-top: 10px; font-size: 0.82em; color: #888; font-style: italic; }
  .badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 700;
    white-space: nowrap;
    margin-bottom: 5px;
    margin-right: 3px;
  }
  .ba { background: #e3f2fd; color: #1565c0; }
  .bd { background: #fce4ec; color: #b71c1c; }
  .bm { background: #f3e5f5; color: #6a1b9a; }
  .be { background: #e8f5e9; color: #2e7d32; }
  .main-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 30px 20px;
    box-shadow: 0 2px 16px #0001;
    overflow-x: auto;
  }
  .mech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }
  .mech-box {
    background: #fff;
    border-radius: 12px;
    border-left: 6px solid #2d80c4;
    padding: 14px 18px;
    min-width: 200px;
    max-width: 250px;
    flex: 1 1 200px;
    box-shadow: 0 1px 8px #0001;
  }
  .mech-box h4 { font-size: 0.95em; color: #1a3a5c; margin-bottom: 7px; }
  .mech-box ul { padding-left: 15px; font-size: 0.87em; line-height: 1.65; color: #333; }
  .mb-red { border-color: #e05a5a; }
  .mb-blue { border-color: #2d80c4; }
  .mb-gold { border-color: #f7a800; }
  .mb-green { border-color: #43a047; }
  @media (max-width: 700px) {
    .card { min-width: 90vw; }
  }
</style>
</head>
<body>

<h1>JOINTS</h1>
<div class="subtitle">Classification, Types &amp; Functions &mdash; Easy Flowcharts<br>
<small>Source: THIEME Atlas of Anatomy &mdash; General Anatomy &amp; Musculoskeletal System</small></div>

<!-- ===== FLOWCHART 1: MAIN CLASSIFICATION ===== -->
<div class="section-title">Flowchart 1: Overall Classification of Joints</div>
<div class="main-wrap">
<div style="display:flex;flex-direction:column;align-items:center;">

  <div class="node-root">JOINTS</div>
  <div class="vline" style="height:26px;background:#aaa;"></div>

  <!-- horizontal split -->
  <div style="display:flex;width:100%;max-width:900px;justify-content:center;align-items:flex-start;">

    <!-- FALSE column -->
    <div style="flex:1;display:flex;flex-direction:column;align-items:center;">
      <div style="width:50%;border-right:3px solid #aaa;border-top:3px solid #aaa;height:18px;margin-left:50%;"></div>
      <div class="node-false">FALSE JOINTS<br><span style="font-size:0.8em;font-weight:400;">(Synarthroses)<br>No joint cavity</span></div>
      <div class="vline" style="height:20px;background:#e05a5a;"></div>

      <!-- 3 sub-types of false joints -->
      <div style="display:flex;gap:12px;align-items:flex-start;justify-content:center;">

        <div style="display:flex;flex-direction:column;align-items:center;">
          <div class="vline" style="height:16px;background:#e05a5a;"></div>
          <div class="node-sub" style="font-size:0.9em;min-width:120px;">Syndesmoses<br><span style="font-weight:400;font-size:0.82em;">Fibrous</span></div>
          <div class="vline" style="height:12px;background:#f7a800;"></div>
          <div class="node-leaf">
            &#8226; Interosseous membranes<br>
            &#8226; Tibiofibular syndesmosis<br>
            &#8226; Fontanelles<br>
            &#8226; Gomphosis (teeth)
          </div>
        </div>

        <div style="display:flex;flex-direction:column;align-items:center;">
          <div class="vline" style="height:16px;background:#e05a5a;"></div>
          <div class="node-sub" style="font-size:0.9em;min-width:120px;">Synchondroses<br><span style="font-weight:400;font-size:0.82em;">Cartilaginous</span></div>
          <div class="vline" style="height:12px;background:#f7a800;"></div>
          <div class="node-leaf">
            &#8226; Epiphyseal growth plates<br>
            &#8226; Costal cartilage<br>
            &#8226; Pubic symphysis<br>
            &#8226; Intervertebral discs
          </div>
        </div>

        <div style="display:flex;flex-direction:column;align-items:center;">
          <div class="vline" style="height:16px;background:#e05a5a;"></div>
          <div class="node-sub" style="font-size:0.9em;min-width:120px;">Synostoses<br><span style="font-weight:400;font-size:0.82em;">Bony Fusion</span></div>
          <div class="vline" style="height:12px;background:#f7a800;"></div>
          <div class="node-leaf">
            &#8226; Sacrum<br>
            &#8226; Hip bone<br>
            &#8226; Ossified epiphyseal<br>&nbsp;&nbsp;plates (adults)
          </div>
        </div>

      </div>
    </div>

    <!-- divider -->
    <div style="width:40px;"></div>

    <!-- TRUE column -->
    <div style="flex:1;display:flex;flex-direction:column;align-items:center;">
      <div style="width:50%;border-left:3px solid #aaa;border-top:3px solid #aaa;height:18px;margin-right:50%;"></div>
      <div class="node-true">TRUE JOINTS<br><span style="font-size:0.8em;font-weight:400;">(Diarthroses)<br>Joint cavity present</span></div>
      <div class="vline" style="height:20px;background:#2d80c4;"></div>

      <!-- 2 sub-types of true joints -->
      <div style="display:flex;gap:12px;align-items:flex-start;justify-content:center;">

        <div style="display:flex;flex-direction:column;align-items:center;">
          <div class="vline" style="height:16px;background:#2d80c4;"></div>
          <div class="node-sub" style="background:#7b52c7;color:#fff;font-size:0.9em;min-width:130px;">Diarthroses<br><span style="font-weight:400;font-size:0.82em;">Variable DOF</span></div>
          <div class="vline" style="height:12px;background:#7b52c7;"></div>
          <div class="node-leaf">
            &#8226; Plane joints<br>
            &#8226; Hinge joints<br>
            &#8226; Pivot joints<br>
            &#8226; Ellipsoidal joints<br>
            &#8226; Saddle joints<br>
            &#8226; Spheroidal joints
          </div>
        </div>

        <div style="display:flex;flex-direction:column;align-items:center;">
          <div class="vline" style="height:16px;background:#2d80c4;"></div>
          <div class="node-sub" style="background:#00897b;color:#fff;font-size:0.9em;min-width:130px;">Amphiarthroses<br><span style="font-weight:400;font-size:0.82em;">Stiff / Limited</span></div>
          <div class="vline" style="height:12px;background:#00897b;"></div>
          <div class="node-leaf">
            &#8226; Sacroiliac joint<br>
            &#8226; Tight ligamentous<br>&nbsp;&nbsp;constraints
          </div>
        </div>

      </div>
    </div>

  </div>
</div>
</div>

<!-- ===== FLOWCHART 2: FALSE JOINTS DETAIL ===== -->
<div class="section-title">Flowchart 2: False Joints (Synarthroses) in Detail</div>
<div class="card-grid">
  <div class="card">
    <div class="card-header ch-red">1. Syndesmoses (Fibrous Joints)</div>
    <div style="margin-bottom:7px;font-size:0.9em;"><b>Connection:</b> Fibrous connective tissue &nbsp;|&nbsp; <b>Mobility:</b> Low</div>
    <ul>
      <li>Interosseous membrane (radius-ulna; tibia-fibula)</li>
      <li>Tibiofibular syndesmosis</li>
      <li>Fontanelles (newborn skull)</li>
      <li>Gomphosis — tooth in bony socket via periodontal ligament</li>
    </ul>
  </div>
  <div class="card">
    <div class="card-header ch-gold">2. Synchondroses (Cartilaginous Joints)</div>
    <div style="margin-bottom:7px;font-size:0.9em;"><b>Connection:</b> Cartilage &nbsp;|&nbsp; <b>Mobility:</b> Very limited</div>
    <ul>
      <li>Epiphyseal growth plates (allow bone growth; eventually ossify)</li>
      <li>Hip bone growth plates (ilium, ischium, pubis)</li>
      <li>Costal cartilage (ribs to sternum)</li>
      <li>Pubic symphysis &amp; intervertebral discs (fibrocartilaginous = symphyses)</li>
    </ul>
  </div>
  <div class="card">
    <div class="card-header ch-navy">3. Synostoses (Bony Fusion)</div>
    <div style="margin-bottom:7px;font-size:0.9em;"><b>Connection:</b> Bone replaces cartilage/fibrous tissue &nbsp;|&nbsp; <b>Mobility:</b> None</div>
    <ul>
      <li>Sacrum (fused sacral vertebrae)</li>
      <li>Hip bone (fused ilium, ischium, pubis)</li>
      <li>Ossified epiphyseal plates in adults</li>
    </ul>
  </div>
</div>

<!-- ===== FLOWCHART 3: TRUE JOINT STRUCTURE ===== -->
<div class="section-title">Flowchart 3: Structure of a True Joint (Synovial Joint)</div>
<div class="main-wrap">
<div style="display:flex;flex-direction:column;align-items:center;gap:0;">
  <div style="background:#2d80c4;color:#fff;border-radius:12px;padding:12px 36px;font-size:1.1em;font-weight:700;">TRUE JOINT (Synovial / Diarthrosis)</div>
  <div class="vline" style="height:22px;background:#2d80c4;"></div>
  <div style="font-size:0.9em;color:#555;margin-bottom:14px;font-weight:600;">8 Characteristic Components</div>

  <div style="display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:900px;">

    <div style="background:#e3f2fd;border:2px solid #2d80c4;border-radius:10px;padding:10px 16px;min-width:180px;max-width:210px;">
      <div style="font-weight:700;color:#1565c0;margin-bottom:4px;">&#9312; Articular Surfaces</div>
      <div style="font-size:0.84em;color:#333;">Hyaline cartilage: 1-2 mm (phalanges) to 5-7 mm (femoropatellar)<br><em style="color:#888;">Exception: jaw &amp; sternoclavicular = fibrocartilage</em></div>
    </div>

    <div style="background:#fce4ec;border:2px solid #e05a5a;border-radius:10px;padding:10px 16px;min-width:180px;max-width:210px;">
      <div style="font-weight:700;color:#b71c1c;margin-bottom:4px;">&#9313; Joint Cavity</div>
      <div style="font-size:0.84em;color:#333;">Narrow space (few mm wide)<br>Contains articular recesses</div>
    </div>

    <div style="background:#f3e5f5;border:2px solid #7b52c7;border-radius:10px;padding:10px 16px;min-width:180px;max-width:210px;">
      <div style="font-weight:700;color:#6a1b9a;margin-bottom:4px;">&#9314; Joint Capsule</div>
      <div style="font-size:0.84em;color:#333;">Closed capsule; alar folds, synovial folds, synovial villi<br>Inner synovial membrane produces synovial fluid</div>
    </div>

    <div style="background:#e8f5e9;border:2px solid #43a047;border-radius:10px;padding:10px 16px;min-width:180px;max-width:210px;">
      <div style="font-weight:700;color:#2e7d32;margin-bottom:4px;">&#9315; Synovial Fluid</div>
      <div style="font-size:0.84em;color:#333;">Highly viscous<br>Lubricates &amp; nourishes avascular cartilage (diffusion &amp; convection)</div>
    </div>

    <div style="background:#fff8e1;border:2px solid #f7a800;border-radius:10px;padding:10px 16px;min-width:200px;max-width:250px;">
      <div style="font-weight:700;color:#e65100;margin-bottom:4px;">&#9316; Intra-articular Structures</div>
      <div style="font-size:0.84em;color:#333;">
        <b>Menisci</b> — crescent-shaped; knee only<br>
        <b>Articular discs</b> — divide joint into 2 chambers; jaw, sternoclavicular, wrist<br>
        <b>Articular labra</b> — enlarge socket; hip &amp; shoulder
      </div>
    </div>

    <div style="background:#e0f7fa;border:2px solid #00897b;border-radius:10px;padding:10px 16px;min-width:180px;max-width:210px;">
      <div style="font-weight:700;color:#006064;margin-bottom:4px;">&#9317; Ligaments</div>
      <div style="font-size:0.84em;color:#333;">Intra- &amp; extracapsular<br>Primary passive stabilizers</div>
    </div>

    <div style="background:#fafafa;border:2px solid #999;border-radius:10px;padding:10px 16px;min-width:180px;max-width:210px;">
      <div style="font-weight:700;color:#333;margin-bottom:4px;">&#9318; Muscles</div>
      <div style="font-size:0.84em;color:#333;">Agonist &amp; antagonist pairs<br>Active movers &amp; stabilizers</div>
    </div>

    <div style="background:#fbe9e7;border:2px solid #e64a19;border-radius:10px;padding:10px 16px;min-width:180px;max-width:210px;">
      <div style="font-weight:700;color:#bf360c;margin-bottom:4px;">&#9319; Synovial Bursae</div>
      <div style="font-size:0.84em;color:#333;">Near joint; may communicate with joint cavity; reduce friction</div>
    </div>

  </div>

  <div style="background:#fff3e0;border:2px dashed #f7a800;border-radius:10px;padding:10px 22px;margin-top:16px;max-width:600px;text-align:center;font-size:0.87em;color:#6d4c41;">
    &#9888; <b>Key Note:</b> Synovial membrane CAN regenerate. Hyaline cartilage CANNOT &mdash; it is avascular, has no perichondrium, and depends entirely on synovial fluid for nutrition.
  </div>
</div>
</div>

<!-- ===== FLOWCHART 4: TRUE JOINT TYPES ===== -->
<div class="section-title">Flowchart 4: Types of True Joints (by Shape, Axes &amp; Degrees of Freedom)</div>
<div class="card-grid">

  <div class="card">
    <div class="card-header ch-blue">Plane Joint</div>
    <div><span class="badge ba">1-2 translational axes</span><span class="badge bd">DOF: 1-4</span></div>
    <div><span class="badge bm">Gliding in multiple directions</span></div>
    <div style="margin-top:8px;"><span class="badge be">Femoropatellar joint, Vertebral facet joints</span></div>
    <div class="note">Patella slides up/down in femoral groove; facet joints allow vertebral gliding</div>
  </div>

  <div class="card">
    <div class="card-header ch-red">Hinge Joint</div>
    <div><span class="badge ba">1 rotational axis</span><span class="badge bd">DOF: 2</span></div>
    <div><span class="badge bm">Flexion &amp; Extension only</span></div>
    <div style="margin-top:8px;"><span class="badge be">Elbow, Knee</span></div>
    <div class="note">Like a door hinge - moves in one plane only</div>
  </div>

  <div class="card">
    <div class="card-header ch-teal">Pivot Joint</div>
    <div><span class="badge ba">1 rotational axis</span><span class="badge bd">DOF: 2</span></div>
    <div><span class="badge bm">Axial rotation only</span></div>
    <div style="margin-top:8px;"><span class="badge be">Atlanto-axial joint, Proximal radioulnar joint</span></div>
    <div class="note">Allows head rotation (saying "NO"); forearm pronation/supination</div>
  </div>

  <div class="card">
    <div class="card-header ch-purple">Ellipsoidal Joint</div>
    <div><span class="badge ba">2 rotational axes</span><span class="badge bd">DOF: 4</span></div>
    <div><span class="badge bm">Flex, Ext, Abd, Add</span></div>
    <div style="margin-top:8px;"><span class="badge be">Radiocarpal (wrist) joint</span></div>
    <div class="note">Oval head in oval socket - 2 axes, no axial rotation</div>
  </div>

  <div class="card">
    <div class="card-header ch-gold">Saddle Joint</div>
    <div><span class="badge ba">2 rotational axes</span><span class="badge bd">DOF: 4</span></div>
    <div><span class="badge bm">Flex, Ext, Abd, Add</span></div>
    <div style="margin-top:8px;"><span class="badge be">Carpometacarpal joint of thumb</span></div>
    <div class="note">Two saddle-shaped surfaces, each concave one way and convex the other</div>
  </div>

  <div class="card">
    <div class="card-header ch-green">Spheroidal Joint (Deep Socket)</div>
    <div><span class="badge ba">3 rotational axes</span><span class="badge bd">DOF: 6</span></div>
    <div><span class="badge bm">Flex, Ext, Abd, Add, IR, ER</span></div>
    <div style="margin-top:8px;"><span class="badge be">Hip joint (acetabulum)</span></div>
    <div class="note">Deep socket = more stability, less range than shallow socket</div>
  </div>

  <div class="card">
    <div class="card-header ch-navy">Spheroidal Joint (Shallow Socket)</div>
    <div><span class="badge ba">3 rotational axes</span><span class="badge bd">DOF: 6</span></div>
    <div><span class="badge bm">All 6 movements + GREATER range</span></div>
    <div style="margin-top:8px;"><span class="badge be">Shoulder (glenohumeral) joint</span></div>
    <div class="note">Shallow socket = maximum range of motion but less inherent stability</div>
  </div>

</div>
<div style="background:#fff;border-radius:12px;padding:14px 22px;max-width:700px;margin:8px auto 0;border-left:5px solid #2d80c4;font-size:0.9em;box-shadow:0 1px 6px #0001;">
  <b>Key Principle:</b> More <em>congruent</em> surfaces (similar curvature, e.g., shoulder) = surfaces <b>slide</b>. Less congruent = surfaces <b>roll</b> (e.g., knee). Most joints use a <b>roll-slide combination</b>.
</div>

<!-- ===== FLOWCHART 5: JOINT STABILITY MECHANICS ===== -->
<div class="section-title">Flowchart 5: Joint Mechanics &mdash; Stability Constraints</div>
<div class="main-wrap">
<div style="display:flex;flex-direction:column;align-items:center;">
  <div style="background:#1a3a5c;color:#fff;border-radius:12px;padding:12px 36px;font-size:1.1em;font-weight:700;">JOINT STABILITY</div>
  <div class="vline" style="height:20px;background:#1a3a5c;"></div>
  <div style="font-size:0.88em;color:#888;margin-bottom:14px;font-weight:600;">4 Types of Constraints</div>
  <div class="mech-grid">
    <div class="mech-box mb-red">
      <h4>&#9312; Bony Constraint</h4>
      <ul>
        <li>Shape of articular surfaces</li>
        <li>Deep socket = more stability (e.g., hip)</li>
        <li>Shallow socket = more mobility (e.g., shoulder)</li>
      </ul>
    </div>
    <div class="mech-box mb-blue">
      <h4>&#9313; Muscular Constraint</h4>
      <ul>
        <li>Muscles crossing the joint</li>
        <li>Agonist-antagonist pairs</li>
        <li>Active stabilizers during movement</li>
      </ul>
    </div>
    <div class="mech-box mb-gold">
      <h4>&#9314; Ligamentous Constraint</h4>
      <ul>
        <li>Intra- and extracapsular ligaments</li>
        <li>Limit range of motion</li>
        <li>Primary passive stabilizers</li>
      </ul>
    </div>
    <div class="mech-box mb-green">
      <h4>&#9315; Soft-Tissue Constraint</h4>
      <ul>
        <li>Joint capsule</li>
        <li>Surrounding soft tissue</li>
        <li>Provides containment</li>
      </ul>
    </div>
  </div>

  <div style="margin-top:24px;font-size:1em;font-weight:700;color:#1a3a5c;margin-bottom:12px;">Key Muscles for Erect Posture</div>
  <div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:800px;">
    <div style="background:#e8f5e9;border:1.5px solid #43a047;border-radius:10px;padding:9px 16px;min-width:190px;font-size:0.87em;">
      <b style="color:#2e7d32;">Ankle (Sagittal Plane)</b><br>Triceps surae + Tibialis anterior
    </div>
    <div style="background:#e3f2fd;border:1.5px solid #2d80c4;border-radius:10px;padding:9px 16px;min-width:190px;font-size:0.87em;">
      <b style="color:#1565c0;">Knee</b><br>Quadriceps femoris
    </div>
    <div style="background:#fce4ec;border:1.5px solid #e05a5a;border-radius:10px;padding:9px 16px;min-width:190px;font-size:0.87em;">
      <b style="color:#b71c1c;">Hip (Sagittal Plane)</b><br>Gluteal muscles
    </div>
    <div style="background:#f3e5f5;border:1.5px solid #7b52c7;border-radius:10px;padding:9px 16px;min-width:190px;font-size:0.87em;">
      <b style="color:#6a1b9a;">Hip (Frontal Plane)</b><br>Gluteus medius &amp; minimus
    </div>
    <div style="background:#fff8e1;border:1.5px solid #f7a800;border-radius:10px;padding:9px 16px;min-width:190px;font-size:0.87em;">
      <b style="color:#e65100;">Spinal Column</b><br>Intrinsic back muscles
    </div>
  </div>
</div>
</div>

<!-- ===== QUICK REFERENCE TABLE ===== -->
<div class="section-title">Quick Reference: All True Joint Types at a Glance</div>
<div style="overflow-x:auto;background:#fff;border-radius:14px;box-shadow:0 2px 12px #0001;padding:10px;">
<table style="width:100%;border-collapse:collapse;font-size:0.9em;">
  <thead>
    <tr style="background:#1a3a5c;color:#fff;">
      <th style="padding:10px 14px;text-align:left;">Joint Type</th>
      <th style="padding:10px 14px;text-align:center;">Axes</th>
      <th style="padding:10px 14px;text-align:center;">DOF</th>
      <th style="padding:10px 14px;text-align:left;">Movements</th>
      <th style="padding:10px 14px;text-align:left;">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background:#f0f4f8;">
      <td style="padding:9px 14px;font-weight:600;">Plane (Femoropatellar)</td>
      <td style="text-align:center;padding:9px;">1 translational</td>
      <td style="text-align:center;padding:9px;">1</td>
      <td style="padding:9px;">Slide up/down</td>
      <td style="padding:9px;">Patella in femoral groove</td>
    </tr>
    <tr>
      <td style="padding:9px 14px;font-weight:600;">Plane (Vertebral)</td>
      <td style="text-align:center;padding:9px;">1-2 translational</td>
      <td style="text-align:center;padding:9px;">2-4</td>
      <td style="padding:9px;">Glide in multiple directions</td>
      <td style="padding:9px;">Facet joints of spine</td>
    </tr>
    <tr style="background:#f0f4f8;">
      <td style="padding:9px 14px;font-weight:600;">Hinge</td>
      <td style="text-align:center;padding:9px;">1 rotational</td>
      <td style="text-align:center;padding:9px;">2</td>
      <td style="padding:9px;">Flexion, Extension</td>
      <td style="padding:9px;">Elbow, Knee</td>
    </tr>
    <tr>
      <td style="padding:9px 14px;font-weight:600;">Pivot</td>
      <td style="text-align:center;padding:9px;">1 rotational</td>
      <td style="text-align:center;padding:9px;">2</td>
      <td style="padding:9px;">Rotation (axial)</td>
      <td style="padding:9px;">Atlanto-axial, Proximal radioulnar</td>
    </tr>
    <tr style="background:#f0f4f8;">
      <td style="padding:9px 14px;font-weight:600;">Ellipsoidal</td>
      <td style="text-align:center;padding:9px;">2 rotational</td>
      <td style="text-align:center;padding:9px;">4</td>
      <td style="padding:9px;">Flex, Ext, Abd, Add</td>
      <td style="padding:9px;">Radiocarpal (wrist)</td>
    </tr>
    <tr>
      <td style="padding:9px 14px;font-weight:600;">Saddle</td>
      <td style="text-align:center;padding:9px;">2 rotational</td>
      <td style="text-align:center;padding:9px;">4</td>
      <td style="padding:9px;">Flex, Ext, Abd, Add</td>
      <td style="padding:9px;">CMC joint of thumb</td>
    </tr>
    <tr style="background:#f0f4f8;">
      <td style="padding:9px 14px;font-weight:600;">Spheroidal (deep socket)</td>
      <td style="text-align:center;padding:9px;">3 rotational</td>
      <td style="text-align:center;padding:9px;">6</td>
      <td style="padding:9px;">Flex, Ext, Abd, Add, IR, ER</td>
      <td style="padding:9px;">Hip joint</td>
    </tr>
    <tr>
      <td style="padding:9px 14px;font-weight:600;">Spheroidal (shallow socket)</td>
      <td style="text-align:center;padding:9px;">3 rotational</td>
      <td style="text-align:center;padding:9px;">6</td>
      <td style="padding:9px;">All 6 + greater range</td>
      <td style="padding:9px;">Shoulder (glenohumeral)</td>
    </tr>
  </tbody>
</table>
</div>

<div style="text-align:center;color:#aaa;font-size:0.8em;margin-top:30px;padding-bottom:20px;">
  Source: THIEME Atlas of Anatomy &mdash; General Anatomy &amp; Musculoskeletal System, Sections 4.2&ndash;4.7
</div>

</body>
</html>
You've run out of free credits. Sign up for a free account to continue using Orris.
This is a shared conversation. Sign in to Orris to start your own chat.