From 26ce44e1869564d3ab43806936c4c7a87fd699e9 Mon Sep 17 00:00:00 2001 From: Dierk Date: Tue, 19 May 2026 15:15:52 +0200 Subject: [PATCH] =?UTF-8?q?Add=20lightbox=20to=20all=20three=20frontends?= =?UTF-8?q?=20=E2=80=94=20click=20photo=20to=20view=20full=20size?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Click any result image to open it in a dark overlay. Click anywhere or press Escape to close. Score colour matches each frontend's accent colour. Co-Authored-By: Claude Sonnet 4.6 --- oravector-demo/frontend/indb/index.html | 55 ++++++++++++++++++++++++- oravector-demo/frontend/index.html | 55 ++++++++++++++++++++++++- pgvector-demo/frontend/index.html | 55 ++++++++++++++++++++++++- 3 files changed, 162 insertions(+), 3 deletions(-) diff --git a/oravector-demo/frontend/indb/index.html b/oravector-demo/frontend/indb/index.html index f18e2ea..07f7bf0 100644 --- a/oravector-demo/frontend/indb/index.html +++ b/oravector-demo/frontend/indb/index.html @@ -106,6 +106,37 @@ text-overflow: ellipsis; } .empty { text-align: center; color: #999; margin-top: 3rem; font-size: 1rem; } + + .card img { cursor: pointer; } + .card img:hover { opacity: 0.85; } + + .lightbox { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.85); + z-index: 100; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 0.8rem; + } + .lightbox.open { display: flex; } + .lightbox img { + max-width: 90vw; + max-height: 80vh; + object-fit: contain; + border-radius: 4px; + box-shadow: 0 4px 32px rgba(0,0,0,0.6); + } + .lightbox-info { color: white; font-size: 0.95rem; text-align: center; } + .lightbox-info .lb-score { color: #cba6f7; font-weight: 700; } + .lightbox-close { + position: fixed; + top: 1rem; right: 1.2rem; + color: white; font-size: 2rem; + cursor: pointer; line-height: 1; + } @@ -134,6 +165,14 @@

Enter a search term above.

+ + diff --git a/oravector-demo/frontend/index.html b/oravector-demo/frontend/index.html index 7375f23..680b222 100644 --- a/oravector-demo/frontend/index.html +++ b/oravector-demo/frontend/index.html @@ -106,6 +106,37 @@ text-overflow: ellipsis; } .empty { text-align: center; color: #999; margin-top: 3rem; font-size: 1rem; } + + .card img { cursor: pointer; } + .card img:hover { opacity: 0.85; } + + .lightbox { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.85); + z-index: 100; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 0.8rem; + } + .lightbox.open { display: flex; } + .lightbox img { + max-width: 90vw; + max-height: 80vh; + object-fit: contain; + border-radius: 4px; + box-shadow: 0 4px 32px rgba(0,0,0,0.6); + } + .lightbox-info { color: white; font-size: 0.95rem; text-align: center; } + .lightbox-info .lb-score { color: #f38ba8; font-weight: 700; } + .lightbox-close { + position: fixed; + top: 1rem; right: 1.2rem; + color: white; font-size: 2rem; + cursor: pointer; line-height: 1; + } @@ -134,6 +165,14 @@

Enter a search term above.

+ + diff --git a/pgvector-demo/frontend/index.html b/pgvector-demo/frontend/index.html index dac6008..9f4ad0c 100644 --- a/pgvector-demo/frontend/index.html +++ b/pgvector-demo/frontend/index.html @@ -106,6 +106,37 @@ text-overflow: ellipsis; } .empty { text-align: center; color: #999; margin-top: 3rem; font-size: 1rem; } + + .card img { cursor: pointer; } + .card img:hover { opacity: 0.85; } + + .lightbox { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.85); + z-index: 100; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 0.8rem; + } + .lightbox.open { display: flex; } + .lightbox img { + max-width: 90vw; + max-height: 80vh; + object-fit: contain; + border-radius: 4px; + box-shadow: 0 4px 32px rgba(0,0,0,0.6); + } + .lightbox-info { color: white; font-size: 0.95rem; text-align: center; } + .lightbox-info .lb-score { color: #89b4fa; font-weight: 700; } + .lightbox-close { + position: fixed; + top: 1rem; right: 1.2rem; + color: white; font-size: 2rem; + cursor: pointer; line-height: 1; + } @@ -134,6 +165,14 @@

Enter a search term above.

+ +