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 KhodjaefandCursor committed 2026-06-21 16:54:19 +03:00
1 parent 0972b5df99
commit df29848d89
121 files changed
+4765 -396
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/Timeline.css
+65 -28
View File
@@ -33,15 +33,17 @@
.timeline-range {
margin-left: 12px;
color: #c9a96e;
color: #f5e6c8;
font-family: 'Georgia', serif;
font-size: 14px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.timeline-container {
position: relative;
height: 88px;
height: 96px;
cursor: grab;
user-select: none;
border: 1px solid rgba(201, 169, 110, 0.3);
@@ -53,6 +55,39 @@
cursor: grabbing;
}
.timeline-lifespan-overlays {
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
}
.timeline-lifespan-dim {
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.55);
}
.timeline-lifespan-highlight {
position: absolute;
top: 0;
bottom: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.22) 18%,
rgba(255, 255, 255, 0.38) 50%,
rgba(255, 255, 255, 0.22) 82%,
rgba(255, 255, 255, 0.05) 100%
);
box-shadow:
inset 0 0 0 2px rgba(255, 240, 200, 0.55),
inset 0 0 32px rgba(255, 255, 255, 0.2);
border-left: 2px solid rgba(255, 230, 180, 0.75);
border-right: 2px solid rgba(255, 230, 180, 0.75);
}
.timeline-track {
position: absolute;
inset: 0;
@@ -120,18 +155,16 @@
}
.historical-event-point .event-marker-line {
position: absolute;
top: 18px;
bottom: 22px;
left: 50%;
width: 2px;
transform: translateX(-50%);
background: linear-gradient(
180deg,
rgba(255, 210, 120, 0.95) 0%,
rgba(255, 180, 90, 0.75) 100%
);
box-shadow: 0 0 6px rgba(255, 190, 100, 0.45);
display: none;
}
.historical-event-span {
top: 20px;
bottom: 24px;
background: rgba(180, 70, 55, 0.28);
border-left: 2px solid rgba(255, 150, 110, 0.75);
border-right: 2px solid rgba(255, 150, 110, 0.75);
border-radius: 2px;
}
.historical-event-point::before {
@@ -148,16 +181,13 @@
}
.historical-event-span {
top: 20px;
bottom: 24px;
background: rgba(180, 70, 55, 0.22);
border-left: 2px solid rgba(255, 150, 110, 0.65);
border-right: 2px solid rgba(255, 150, 110, 0.65);
border-radius: 2px;
background: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
.historical-event-span:hover,
.historical-event-point:hover .event-marker-line {
.historical-event-point:hover::before {
filter: brightness(1.2);
}
@@ -197,24 +227,31 @@
bottom: 0;
left: 0;
right: 0;
height: 24px;
height: 34px;
z-index: 5;
}
.tick {
position: absolute;
bottom: 0;
transform: translateX(-50%);
border-left: 1px solid rgba(201, 169, 110, 0.4);
height: 8px;
border-left: 2px solid rgba(245, 230, 200, 0.75);
height: 12px;
}
.tick span {
position: absolute;
bottom: 10px;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: rgba(201, 169, 110, 0.7);
font-family: 'Georgia', serif;
font-size: 14px;
font-weight: 700;
color: #f5e6c8;
text-shadow:
0 0 8px rgba(0, 0, 0, 0.95),
0 1px 2px rgba(0, 0, 0, 1),
0 0 1px rgba(0, 0, 0, 1);
white-space: nowrap;
}