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.

+ +