OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Sync: implement camera animation rendering function and refactor platform row logic

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 17:55:50 -05:00
parent f9f15708e3
commit 6b8b6b2328
2 changed files with 65 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
theme/assets/css/main.css
View File

@@ -3812,6 +3812,9 @@ p:last-child { margin-bottom: 0; }
Photo camera (left) + product scene (centre) + VHS camcorder on tripod (right)
══════════════════════════════════════════════════════════════════════════════ */
.platform-visual.has-camera {
--cam-cycle: 9s;
--cam-rec-cycle: 1.4s;
--cam-lens-cycle: 4s;
background: none !important;
border: none !important;
border-radius: 0;
@@ -3864,20 +3867,20 @@ p:last-child { margin-bottom: 0; }
display: block;
border-radius: 8px;
}
.cam-subject--1 { animation: cam-subject-1 9s ease-in-out infinite; }
.cam-subject--1 { animation: cam-subject-1 var(--cam-cycle) ease-in-out infinite; }
.cam-subject--1::before {
width: 40px; height: 58px;
background: linear-gradient(135deg, #064e3b 0%, #4ade80 100%);
box-shadow: 0 0 18px rgba(74,222,128,.4);
}
.cam-subject--2 { animation: cam-subject-2 9s ease-in-out infinite; }
.cam-subject--2 { animation: cam-subject-2 var(--cam-cycle) ease-in-out infinite; }
.cam-subject--2::before {
width: 32px; height: 68px;
background: linear-gradient(160deg, #78350f 0%, #fbbf24 100%);
border-radius: 6px 6px 12px 12px;
box-shadow: 0 0 18px rgba(251,191,36,.35);
}
.cam-subject--3 { animation: cam-subject-3 9s ease-in-out infinite; }
.cam-subject--3 { animation: cam-subject-3 var(--cam-cycle) ease-in-out infinite; }
.cam-subject--3::before {
width: 74px; height: 50px;
background: linear-gradient(135deg, #1e1b4b 0%, #818cf8 100%);
@@ -3891,7 +3894,7 @@ p:last-child { margin-bottom: 0; }
background: #fff;
opacity: 0;
pointer-events: none;
animation: cam-flash-pulse 9s linear infinite;
animation: cam-flash-pulse var(--cam-cycle) linear infinite;
}
/* CRT scanlines from the video cam */
.cam-vid-overlay {
@@ -3940,7 +3943,7 @@ p:last-child { margin-bottom: 0; }
top: 2px; left: 4px; right: 4px; bottom: 2px;
background: #c8c870;
border-radius: 1px;
animation: pc-flash-glow 9s linear infinite;
animation: pc-flash-glow var(--cam-cycle) linear infinite;
}
/* Top strip */
.pc-top {
@@ -3964,7 +3967,7 @@ p:last-child { margin-bottom: 0; }
border-radius: 50%;
border: 2px solid var(--color-border);
box-shadow: 0 0 0 1px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.1);
animation: pc-shutter 9s linear infinite;
animation: pc-shutter var(--cam-cycle) linear infinite;
transform-origin: center;
}
.pc-viewfinder {
@@ -4052,9 +4055,9 @@ p:last-child { margin-bottom: 0; }
height: 38px;
border-radius: 1px;
}
.pc-print--1 { left: 0; top: 0; transform-origin: bottom center; animation: pc-print-1 9s linear infinite; }
.pc-print--2 { left: 18px; top: 0; transform-origin: bottom center; animation: pc-print-2 9s linear infinite; }
.pc-print--3 { left: 36px; top: 0; transform-origin: bottom center; animation: pc-print-3 9s linear infinite; }
.pc-print--1 { left: 0; top: 0; transform-origin: bottom center; animation: pc-print-1 var(--cam-cycle) linear infinite; }
.pc-print--2 { left: 18px; top: 0; transform-origin: bottom center; animation: pc-print-2 var(--cam-cycle) linear infinite; }
.pc-print--3 { left: 36px; top: 0; transform-origin: bottom center; animation: pc-print-3 var(--cam-cycle) linear infinite; }
.pc-print--1 .pc-print__img { background: linear-gradient(135deg, #064e3b, #4ade80); }
.pc-print--2 .pc-print__img { background: linear-gradient(160deg, #78350f, #fbbf24); }
.pc-print--3 .pc-print__img { background: linear-gradient(135deg, #1e1b4b, #818cf8); }
@@ -4124,7 +4127,7 @@ p:last-child { margin-bottom: 0; }
display: flex;
align-items: center;
justify-content: center;
animation: vc-lens-zoom 4s ease-in-out infinite;
animation: vc-lens-zoom var(--cam-lens-cycle) ease-in-out infinite;
}
.vc-lens-tip {
width: 26px; height: 26px;
@@ -4168,7 +4171,7 @@ p:last-child { margin-bottom: 0; }
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239,68,68,.4);
animation: vc-rec-blink 1.4s ease-in-out infinite;
animation: vc-rec-blink var(--cam-rec-cycle) ease-in-out infinite;
}
/* Eyepiece — extends RIGHT */
.vc-eyepiece {