diff --git a/clinicians.html b/clinicians.html
index 86cc9f1..7bf191e 100644
--- a/clinicians.html
+++ b/clinicians.html
@@ -373,7 +373,12 @@
Field Definitions
Side of Tumor Center
Defined as the anatomical laterality of the tumor center based on the position of the TC barycenter relative to the brain midline, for example left, right, or midline.
- F003_tumor_laterality
+
+

+
+ RightCentral/bilateralLeft
+
+
@@ -381,7 +386,12 @@
Side of Tumor Center
Enhancement Quality
Qualitative assessment of CET contrast enhancement, indicating whether enhancement is present and how pronounced it appears.
- F005_enhancement_quality
+
+

+
+ NoneMinimal/mildMarked
+
+
@@ -389,7 +399,12 @@
Enhancement Quality
Definition of the Enhancing Margin
Assesses whether most of the outer margin of the enhancement is well defined or poorly defined.
- F010_enhancing_margin
+
+

+
+ Well-definedPoorly-defined
+
+
@@ -397,7 +412,12 @@
Definition of the Enhancing Margin
Definition of the Non-Enhancing Margin
Assesses whether most of the outer margin of the non-enhancing component is well defined or poorly defined.
- F011_non_enhancing_margin
+
+

+
+ Well-definedPoorly-defined
+
+
@@ -405,7 +425,12 @@
Definition of the Non-Enhancing Margin
Intratumoral Hemorrhage
Assesses whether intrinsic hemorrhage is visible anywhere in the tumor matrix.
- F012_intratumoral_hemorrhage
+
+

+
+ NoYes
+
+
@@ -413,7 +438,6 @@
Intratumoral Hemorrhage
Tumor Heterogeneity
The degree of heterogeneity of the internal architecture of the tumor.
- F015_tumor_heterogeneity
@@ -421,7 +445,6 @@
Tumor Heterogeneity
Number of Lesions
Number of independent lesions observed in the brain.
- F018_number_of_lesions
@@ -429,7 +452,12 @@
Number of Lesions
Type of Lesion
Categorical variable indicating the observed lesion type. Possible values: single, multicentric, or multifocal.
- F019_lesion_type
+
+

+
+ SingleMultifocalMulticentric
+
+
@@ -437,7 +465,12 @@
Type of Lesion
Ependymal Invasion
Assesses whether the TC abuts any adjacent ependymal surface.
- F020_ependymal_invasion
+
+

+
+ NoYes
+
+
@@ -445,7 +478,6 @@
Ependymal Invasion
Depth of TC
Determines the depth of the TC. Possible values: cortical, subcortical white matter, deep white matter, and basal nuclei.
- F021_tc_depth
@@ -453,7 +485,6 @@
Depth of TC
Tumor Center Macroarea
The macroarea, or lobe, in which the barycenter lies, obtained using the atlas.
- F022_center_macroarea
@@ -461,7 +492,6 @@
Tumor Center Macroarea
Midline Shift
The shift of the midline caused by the tumor mass, in millimeters.
- F023_midline_shift
@@ -469,7 +499,6 @@
Midline Shift
Tumor Shape
The approximate shape of the tumor mass.
- F024_tumor_shape
@@ -477,7 +506,6 @@
Tumor Shape
Tumor Origin
Where the tumor originates, according to the categories: periventricular, gyral, or deep white matter.
- F025_tumor_origin
@@ -485,7 +513,6 @@
Tumor Origin
Tumor Crosses Midline
Indicates whether the tumor crosses the midline.
- F026_midline_crossing
@@ -493,7 +520,6 @@
Tumor Crosses Midline
Subject-Specific Findings
Any subject-specific findings that do not fall under any predefined category.
- F027_subject_specific_findings
@@ -762,7 +788,12 @@ Definizione dei Campi
Lato del Centro del Tumore
Definito come la lateralità anatomica del centro del tumore in base alla posizione del baricentro del TC rispetto alla linea mediana del cervello, ad esempio sinistra, destra o linea mediana.
- F003_lateralita_tumore
+
+

+
+ DestraCentrale/bilateraleSinistra
+
+
@@ -770,7 +801,12 @@
Lato del Centro del Tumore
Qualità dell'Enhancement
Valutazione qualitativa dell'enhancement del contrasto CET, indicando se l'enhancement è presente e quanto appare pronunciato.
- F005_qualita_enhancement
+
+

+
+ AssenteMinimo/lieveMarcato
+
+
@@ -778,7 +814,12 @@
Qualità dell'Enhancement
Definizione del Margine Enhancing
Valuta se la maggior parte del margine esterno dell'enhancement è ben definita o scarsamente definita.
- F010_margine_enhancing
+
+

+
+ Ben definitoScarsamente definito
+
+
@@ -786,7 +827,12 @@
Definizione del Margine Enhancing
Definizione del Margine Non-Enhancing
Valuta se la maggior parte del margine esterno della componente non-enhancing è ben definita o scarsamente definita.
- F011_margine_non_enhancing
+
+

+
+ Ben definitoScarsamente definito
+
+
@@ -794,7 +840,12 @@
Definizione del Margine Non-Enhancing
Emorragia Intratumorale
Valuta se un'emorragia intrinseca è visibile in qualsiasi punto della matrice tumorale.
- F012_emorragia_intratumorale
+
+

+
+ NoSì
+
+
@@ -802,7 +853,6 @@
Emorragia Intratumorale
Eterogeneità del Tumore
Il grado di eterogeneità dell'architettura interna del tumore.
- F015_eterogeneita_tumore
@@ -810,7 +860,6 @@
Eterogeneità del Tumore
Numero di Lesioni
Numero di lesioni indipendenti osservate nel cervello.
- F018_numero_lesioni
@@ -818,7 +867,12 @@
Numero di Lesioni
Tipo di Lesione
Variabile categorica che indica il tipo di lesione osservata. Valori possibili: singola, multicentrica o multifocale.
- F019_tipo_lesione
+
+

+
+ SingolaMultifocaleMulticentrica
+
+
@@ -826,7 +880,12 @@
Tipo di Lesione
Invasione Ependimale
Valuta se il TC è a contatto con una superficie ependimale adiacente.
- F020_invasione_ependimale
+
+

+
+ NoSì
+
+
@@ -834,15 +893,13 @@
Invasione Ependimale
Profondità del TC
Determina la profondità del TC. Valori possibili: corticale, sostanza bianca sottocorticale, sostanza bianca profonda e nuclei della base.
- F021_profondita_tc
F022
Macroarea del Centro del Tumore
-
La macroarea, o lobo, in cui ricade il baricentro, ottenuta utilizzando l'atlante.
+
La macroarea, o lobo, in cui ricade il baricentro.
- F022_macroarea_centro
@@ -850,7 +907,6 @@
Macroarea del Centro del Tumore
Spostamento della Linea Mediana
Lo spostamento della linea mediana causato dalla massa tumorale, in millimetri.
- F023_spostamento_linea_mediana
@@ -858,7 +914,6 @@
Spostamento della Linea Mediana
Forma del Tumore
La forma approssimativa della massa tumorale.
- F024_forma_tumore
@@ -866,7 +921,6 @@
Forma del Tumore
Origine del Tumore
Dove origina il tumore, secondo le categorie: Periventricolare, Girale, Sostanza bianca profonda.
- F025_origine_tumore
@@ -874,7 +928,6 @@
Origine del Tumore
Il Tumore Attraversa la Linea Mediana
Indica se il tumore attraversa la linea mediana.
- F026_crossing_linea_mediana
@@ -882,7 +935,6 @@
Il Tumore Attraversa la Linea Mediana
Reperti Specifici del Soggetto
Qualsiasi reperto specifico del soggetto che non rientra in alcuna categoria predefinita.
- F027_reperti_specifici
diff --git a/index.html b/index.html
index f718a5e..ee29f5d 100644
--- a/index.html
+++ b/index.html
@@ -379,6 +379,144 @@ Annotators Version in English
+
+
Field Definitions
+
+
+
+
+
F003
+
Side of Tumor Center
+
Anatomical laterality of the tumor center relative to the brain midline: left, right, or midline.
+
+
+

+
+
+
+
+
F005
+
Enhancement Quality
+
Qualitative assessment of CET contrast enhancement, including whether it is present and how pronounced it appears.
+
+
+

+
+
+
+
+
F010
+
Definition of the Enhancing Margin
+
Whether most of the outer enhancing margin is well defined or poorly defined.
+
+
+

+
+
+
+
+
F011
+
Definition of the Non-Enhancing Margin
+
Whether most of the outer non-enhancing component margin is well defined or poorly defined.
+
+
+

+
+
+
+
+
F012
+
Intratumoral Hemorrhage
+
Whether intrinsic hemorrhage is visible anywhere in the tumor matrix.
+
+
+

+
+
+
+
+
F015
+
Tumor Heterogeneity
+
Degree of heterogeneity of the tumor internal architecture.
+
+
+
+
+
F018
+
Number of Lesions
+
Number of independent lesions observed in the brain.
+
+
+
+
+
F019
+
Type of Lesion
+
Categorical lesion type: single, multicentric, or multifocal.
+
+
+

+
+
+
+
+
F020
+
Ependymal Invasion
+
Whether the TC abuts an adjacent ependymal surface.
+
+
+

+
+
+
+
+
F021
+
Depth of TC
+
Possible values: cortical, subcortical white matter, deep white matter, and basal nuclei.
+
+
+
+
+
F022
+
Tumor Center Macroarea
+
The macroarea or lobe in which the barycenter lies.
+
+
+
+
+
F023
+
Midline Shift
+
Shift of the midline caused by the tumor mass, reported in millimeters.
+
+
+
+
+
F024
+
Tumor Shape
+
Approximate shape of the tumor mass.
+
+
+
+
+
F025
+
Tumor Origin
+
Likely origin category: periventricular, gyral, or deep white matter.
+
+
+
+
+
F026
+
Tumor Crosses Midline
+
Whether the tumor crosses the midline.
+
+
+
+
+
F027
+
Subject-Specific Findings
+
Any subject-specific finding that does not fall under a predefined category.
+
+
+
@@ -434,7 +572,9 @@ Definizione dei Campi
Lato del Centro del Tumore
Definito come la lateralità anatomica del centro del tumore in base alla posizione del baricentro del TC rispetto alla linea mediana del cervello, ad esempio sinistra, destra o linea mediana.
- F003_lateralita_tumore
+
+

+
@@ -442,7 +582,9 @@
Lato del Centro del Tumore
Qualità dell'Enhancement
Valutazione qualitativa dell'enhancement del contrasto CET, indicando se l'enhancement è presente e quanto appare pronunciato.
- F005_qualita_enhancement
+
+

+
@@ -450,7 +592,9 @@
Qualità dell'Enhancement
Definizione del Margine Enhancing
Valuta se la maggior parte del margine esterno dell'enhancement è ben definita o scarsamente definita.
- F010_margine_enhancing
+
+

+
@@ -458,7 +602,9 @@
Definizione del Margine Enhancing
Definizione del Margine Non-Enhancing
Valuta se la maggior parte del margine esterno della componente non-enhancing è ben definita o scarsamente definita.
- F011_margine_non_enhancing
+
+

+
@@ -466,7 +612,9 @@
Definizione del Margine Non-Enhancing
Emorragia Intratumorale
Valuta se un'emorragia intrinseca è visibile in qualsiasi punto della matrice tumorale.
- F012_emorragia_intratumorale
+
+

+
@@ -474,7 +622,6 @@
Emorragia Intratumorale
Eterogeneità del Tumore
Il grado di eterogeneità dell'architettura interna del tumore.
- F015_eterogeneita_tumore
@@ -482,7 +629,6 @@
Eterogeneità del Tumore
Numero di Lesioni
Numero di lesioni indipendenti osservate nel cervello.
- F018_numero_lesioni
@@ -490,7 +636,9 @@
Numero di Lesioni
Tipo di Lesione
Variabile categorica che indica il tipo di lesione osservata. Valori possibili: singola, multicentrica o multifocale.
- F019_tipo_lesione
+
+

+
@@ -498,7 +646,9 @@
Tipo di Lesione
Invasione Ependimale
Valuta se il TC è a contatto con una superficie ependimale adiacente.
- F020_invasione_ependimale
+
+

+
@@ -506,7 +656,6 @@
Invasione Ependimale
Profondità del TC
Determina la profondità del TC. Valori possibili: corticale, sostanza bianca sottocorticale, sostanza bianca profonda e nuclei della base.
- F021_profondita_tc
@@ -514,7 +663,6 @@
Profondità del TC
Macroarea del Centro del Tumore
La macroarea, o lobo, in cui ricade il baricentro, ottenuta utilizzando l'atlante.
- F022_macroarea_centro
@@ -522,7 +670,6 @@
Macroarea del Centro del Tumore
Spostamento della Linea Mediana
Lo spostamento della linea mediana causato dalla massa tumorale, in millimetri.
- F023_spostamento_linea_mediana
@@ -530,7 +677,6 @@
Spostamento della Linea Mediana
Forma del Tumore
La forma approssimativa della massa tumorale.
- F024_forma_tumore
@@ -538,7 +684,6 @@
Forma del Tumore
Origine del Tumore
Dove origina il tumore, secondo le categorie: Periventricolare, Girale, Sostanza bianca profonda.
- F025_origine_tumore
@@ -546,7 +691,6 @@
Origine del Tumore
Il Tumore Attraversa la Linea Mediana
Indica se il tumore attraversa la linea mediana.
- F026_crossing_linea_mediana
@@ -554,7 +698,6 @@
Il Tumore Attraversa la Linea Mediana
Reperti Specifici del Soggetto
Qualsiasi reperto specifico del soggetto che non rientra in alcuna categoria predefinita.
- F027_reperti_specifici
diff --git a/instruction_images/F003_img.png b/instruction_images/F003_img.png
new file mode 100644
index 0000000..af2ae5f
Binary files /dev/null and b/instruction_images/F003_img.png differ
diff --git a/instruction_images/F005_img.png b/instruction_images/F005_img.png
new file mode 100644
index 0000000..d33693a
Binary files /dev/null and b/instruction_images/F005_img.png differ
diff --git a/instruction_images/F010_img.png b/instruction_images/F010_img.png
new file mode 100644
index 0000000..6eaca69
Binary files /dev/null and b/instruction_images/F010_img.png differ
diff --git a/instruction_images/F011_img.png b/instruction_images/F011_img.png
new file mode 100644
index 0000000..9664522
Binary files /dev/null and b/instruction_images/F011_img.png differ
diff --git a/instruction_images/F012_img.png b/instruction_images/F012_img.png
new file mode 100644
index 0000000..90ea850
Binary files /dev/null and b/instruction_images/F012_img.png differ
diff --git a/instruction_images/F019_img.png b/instruction_images/F019_img.png
new file mode 100644
index 0000000..e466f49
Binary files /dev/null and b/instruction_images/F019_img.png differ
diff --git a/instruction_images/F020_img.png b/instruction_images/F020_img.png
new file mode 100644
index 0000000..cb835de
Binary files /dev/null and b/instruction_images/F020_img.png differ
diff --git a/site.js b/site.js
index 0743e51..3348ee6 100644
--- a/site.js
+++ b/site.js
@@ -24,3 +24,50 @@
button.addEventListener("click", copyPageLink);
})();
+
+(function () {
+ function openLightbox(src, alt, labels) {
+ const overlay = document.createElement("div");
+ overlay.className = "img-lightbox";
+ const box = document.createElement("div");
+ box.className = "img-lightbox-box";
+ const img = document.createElement("img");
+ img.src = src;
+ img.alt = alt || "";
+ box.appendChild(img);
+ if (labels.length) {
+ const row = document.createElement("div");
+ row.className = "img-labels img-labels--lightbox";
+ labels.forEach(function (label) {
+ const s = document.createElement("span");
+ s.textContent = label.text;
+ s.style.flex = label.weight;
+ row.appendChild(s);
+ });
+ box.appendChild(row);
+ }
+ overlay.appendChild(box);
+ overlay.addEventListener("click", () => overlay.remove());
+ document.addEventListener("keydown", function onKey(e) {
+ if (e.key === "Escape") { overlay.remove(); document.removeEventListener("keydown", onKey); }
+ });
+ document.body.appendChild(overlay);
+ }
+
+ document.querySelectorAll(".field-img-wrap img").forEach(function (img) {
+ const inner = document.createElement("div");
+ inner.className = "field-img-inner";
+ img.parentNode.insertBefore(inner, img);
+ inner.appendChild(img);
+ });
+
+ document.addEventListener("click", function (e) {
+ const wrap = e.target.closest(".field-img-wrap");
+ if (!wrap) return;
+ const img = wrap.querySelector("img");
+ if (!img) return;
+ const labelEls = Array.from(wrap.querySelectorAll(".img-labels span"));
+ const labels = labelEls.map(function (s) { return { text: s.textContent, weight: s.dataset.weight || "1" }; });
+ openLightbox(img.src, img.alt, labels);
+ });
+})();
diff --git a/styles.css b/styles.css
index 4a9d8d9..bcdcab1 100644
--- a/styles.css
+++ b/styles.css
@@ -508,6 +508,10 @@ td:first-child {
font-size: 0.95rem;
}
+.field-item > div:only-child {
+ grid-column: 1 / -1;
+}
+
.image-placeholder {
display: grid;
place-items: center;
@@ -525,6 +529,142 @@ td:first-child {
word-break: break-word;
}
+.field-img-wrap {
+ background: #fff;
+ border: 1px solid var(--line);
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100px;
+ padding: 8px;
+ cursor: zoom-in;
+ position: relative;
+}
+
+.field-img-inner {
+ width: 100%;
+ border-radius: 4px;
+ overflow: hidden;
+ flex-shrink: 0;
+}
+
+/* Hover overlay with centered expand icon */
+.field-img-inner {
+ position: relative;
+}
+
+.field-img-inner::after {
+ content: "⤢";
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.6rem;
+ color: #fff;
+ background: rgba(15, 23, 42, 0.38);
+ opacity: 0;
+ transition: opacity 0.18s ease;
+ pointer-events: none;
+}
+
+.field-img-wrap:hover .field-img-inner::after {
+ opacity: 1;
+}
+
+.field-img-wrap img {
+ max-height: 110px;
+ width: 100%;
+ object-fit: contain;
+ display: block;
+ transition: transform 0.18s ease;
+}
+
+.field-img-wrap:hover img {
+ transform: scale(1.03);
+}
+
+.img-labels {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ justify-content: center;
+ margin-top: 8px;
+ position: relative;
+ z-index: 1;
+}
+
+.img-labels span {
+ font-size: 0.72rem;
+ font-weight: 600;
+ color: #48566f;
+ background: #f1f5f9;
+ border: 1px solid #e2e8f0;
+ border-radius: 4px;
+ padding: 2px 7px;
+ white-space: nowrap;
+}
+
+/* Lightbox overlay */
+.img-lightbox {
+ position: fixed;
+ inset: 0;
+ z-index: 9999;
+ background: rgba(0, 0, 0, 0.72);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: zoom-out;
+ animation: lb-in 0.18s ease;
+}
+
+@keyframes lb-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+.img-lightbox-box {
+ background: #fff;
+ border-radius: 10px;
+ padding: 16px 16px 12px;
+ box-shadow: 0 24px 80px rgba(0,0,0,0.45);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ max-width: min(90vw, 900px);
+}
+
+.img-lightbox-box img {
+ max-width: 100%;
+ max-height: 75vh;
+ object-fit: contain;
+ display: block;
+}
+
+.img-labels:has(span[data-weight]) {
+ width: 100%;
+ justify-content: space-between;
+}
+
+.img-labels span[data-weight="1"] { flex: 1; text-align: center; }
+.img-labels span[data-weight="2"] { flex: 2; text-align: center; }
+.img-labels span[data-weight="3"] { flex: 3; text-align: center; }
+
+.img-labels--lightbox {
+ width: 100%;
+ justify-content: space-between;
+}
+
+.img-labels--lightbox span {
+ font-size: 0.85rem;
+ padding: 4px 12px;
+ flex: 1;
+ text-align: center;
+}
+
.prose {
max-width: 940px;
color: #354159;