Danilka/Art-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add movement gallery wings with period interiors and expand timeline features.

Browse Source 
Movement galleries split large catalogs into chronological wings (~55 works), use era-themed 3D interiors with side-wall windows, wing navigator on the back exit, and front archways between wings. Also adds painting annotations, timeline event guides, portrait hover highlights, and documentation/API updates.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Danila Khodjaef
2026-06-21 16:54:19 +03:00
co-authored by Cursor
parent 0972b5df99
commit df29848d89
121 changed files with 4765 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/MovementBands.css
+81 -12
View File
@@ -47,12 +47,44 @@
cursor: grabbing;
}
.movement-lifespan-overlays {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.movement-lifespan-dim {
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.movement-lifespan-highlight {
position: absolute;
top: 0;
bottom: 0;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.16) 40%,
rgba(255, 255, 255, 0.12) 100%
);
box-shadow:
inset 0 0 0 2px rgba(255, 230, 180, 0.45),
inset 0 0 48px rgba(255, 255, 255, 0.08);
border-left: 2px solid rgba(255, 220, 160, 0.65);
border-right: 2px solid rgba(255, 220, 160, 0.65);
}
.movements-flow-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.movement-branch {
@@ -90,13 +122,16 @@
.movements-flow-artists {
position: absolute;
inset: 0;
pointer-events: none;
}
.movements-flow-artists {
pointer-events: auto;
}
.artist-on-band {
pointer-events: none;
}
.artist-lifespan {
position: absolute;
height: 0;
@@ -110,31 +145,45 @@
left: 0;
right: 0;
top: 0;
height: 3px;
height: 4px;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--lifespan-color, #e8d5b5) 25%, transparent) 0%,
color-mix(in srgb, var(--lifespan-color, #e8d5b5) 70%, #e8d5b5) 12%,
color-mix(in srgb, var(--lifespan-color, #e8d5b5) 85%, #fff) 50%,
color-mix(in srgb, var(--lifespan-color, #e8d5b5) 70%, #e8d5b5) 88%,
color-mix(in srgb, var(--lifespan-color, #e8d5b5) 25%, transparent) 100%
rgba(255, 255, 255, 0) 0%,
var(--lifespan-color, #e8d5b5) 15%,
#fff 50%,
var(--lifespan-color, #e8d5b5) 85%,
rgba(255, 255, 255, 0) 100%
);
box-shadow: 0 0 6px color-mix(in srgb, var(--lifespan-color, #e8d5b5) 40%, transparent);
border-radius: 1px;
box-shadow:
0 0 8px rgba(255, 255, 255, 0.55),
0 0 16px var(--lifespan-color, #e8d5b5);
border-radius: 2px;
pointer-events: none;
}
.artist-lifespan .artist-portrait {
.artist-on-band .artist-portrait {
position: absolute;
top: 0;
transform: translate(-50%, -50%);
pointer-events: auto;
}
.artist-lifespan .artist-portrait:hover {
.artist-on-band .artist-portrait:hover {
transform: translate(-50%, -50%) scale(1.14);
}
.artist-on-band-active .artist-portrait {
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.85),
0 4px 24px rgba(255, 220, 160, 0.65);
}
.movements-flow-labels {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
}
.movement-flow-label {
position: absolute;
transform: translate(-4px, -100%);
@@ -144,6 +193,26 @@
z-index: 3;
}
.movement-flow-label-btn {
pointer-events: auto;
border: none;
background: rgba(12, 10, 18, 0.55);
border-radius: 4px;
cursor: pointer;
text-align: left;
transition: background 0.2s, box-shadow 0.2s;
}
.movement-flow-label-btn:hover {
background: rgba(24, 20, 32, 0.82);
box-shadow: 0 0 0 1px rgba(255, 220, 160, 0.35);
}
.movement-flow-label-btn:focus-visible {
outline: 2px solid rgba(255, 220, 160, 0.65);
outline-offset: 2px;
}
.movement-name {
display: block;
font-family: 'Georgia', serif;