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 {

102
theme/blocks/index.php
View File

@@ -1356,6 +1356,56 @@ function oribi_render_platform_section( $a, $content ) {
}
/* ── Platform Row (child - renders one service row) ────────────────────────── */
function oribi_render_camera_animation() {
return <<<'HTML'
<div class="cam-stage" aria-hidden="true">
<div class="pc-wrap">
<div class="pc-body">
<div class="pc-flash-unit"></div>
<div class="pc-top"><div class="pc-shutter-btn"></div><div class="pc-viewfinder"></div></div>
<div class="pc-front">
<div class="pc-lens-ring"><div class="pc-lens-glass"><div class="pc-lens-reflex"></div></div></div>
<div class="pc-grip"></div>
</div>
</div>
<div class="pc-prints">
<div class="pc-print pc-print--1"><div class="pc-print__img"></div></div>
<div class="pc-print pc-print--2"><div class="pc-print__img"></div></div>
<div class="pc-print pc-print--3"><div class="pc-print__img"></div></div>
</div>
</div>
<div class="cam-scene">
<div class="cam-subject cam-subject--1"></div>
<div class="cam-subject cam-subject--2"></div>
<div class="cam-subject cam-subject--3"></div>
<div class="cam-flash-overlay"></div>
<div class="cam-vid-overlay"></div>
</div>
<div class="vc-wrap">
<div class="vc-camera">
<div class="vc-handle"></div>
<div class="vc-body">
<div class="vc-lens-barrel"><div class="vc-lens-tip"><div class="vc-lens-glass"><div class="vc-lens-reflex"></div></div></div></div>
<div class="vc-top-rail"></div>
<div class="vc-rec-light"></div>
<div class="vc-eyepiece"></div>
</div>
</div>
<div class="vc-tripod">
<div class="vc-stem"></div>
<div class="vc-legs">
<div class="vc-leg vc-leg--l"></div>
<div class="vc-leg vc-leg--c"></div>
<div class="vc-leg vc-leg--r"></div>
</div>
</div>
</div>
</div>
HTML;
}
function oribi_render_platform_row( $a ) {
$rev = ! empty( $a['reversed'] ) ? ' reverse' : '';
$img_id = ! empty( $a['imgId'] ) ? intval( $a['imgId'] ) : 0;
@@ -1742,57 +1792,7 @@ function oribi_render_platform_row( $a ) {
$visual_html = $bd;
$visual_cls = 'platform-visual has-branded';
} elseif ( ! empty( $a['cameraAnim'] ) ) {
$ca = '<div class="cam-stage" aria-hidden="true">';
// ── Left: compact photo camera ──
$ca .= '<div class="pc-wrap">';
$ca .= '<div class="pc-body">';
$ca .= '<div class="pc-flash-unit"></div>';
$ca .= '<div class="pc-top"><div class="pc-shutter-btn"></div><div class="pc-viewfinder"></div></div>';
$ca .= '<div class="pc-front">';
$ca .= '<div class="pc-lens-ring"><div class="pc-lens-glass"><div class="pc-lens-reflex"></div></div></div>';
$ca .= '<div class="pc-grip"></div>';
$ca .= '</div>';
$ca .= '</div>'; // pc-body
$ca .= '<div class="pc-prints">';
$ca .= '<div class="pc-print pc-print--1"><div class="pc-print__img"></div></div>';
$ca .= '<div class="pc-print pc-print--2"><div class="pc-print__img"></div></div>';
$ca .= '<div class="pc-print pc-print--3"><div class="pc-print__img"></div></div>';
$ca .= '</div>'; // pc-prints
$ca .= '</div>'; // pc-wrap
// ── Centre: product scene both cameras shoot ──
$ca .= '<div class="cam-scene">';
$ca .= '<div class="cam-subject cam-subject--1"></div>';
$ca .= '<div class="cam-subject cam-subject--2"></div>';
$ca .= '<div class="cam-subject cam-subject--3"></div>';
$ca .= '<div class="cam-flash-overlay"></div>';
$ca .= '<div class="cam-vid-overlay"></div>';
$ca .= '</div>'; // cam-scene
// ── Right: retro VHS video camera on tripod ──
$ca .= '<div class="vc-wrap">';
$ca .= '<div class="vc-camera">';
$ca .= '<div class="vc-handle"></div>';
$ca .= '<div class="vc-body">';
$ca .= '<div class="vc-lens-barrel"><div class="vc-lens-tip"><div class="vc-lens-glass"><div class="vc-lens-reflex"></div></div></div></div>';
$ca .= '<div class="vc-top-rail"></div>';
$ca .= '<div class="vc-rec-light"></div>';
$ca .= '<div class="vc-eyepiece"></div>';
$ca .= '</div>'; // vc-body
$ca .= '</div>'; // vc-camera
$ca .= '<div class="vc-tripod">';
$ca .= '<div class="vc-stem"></div>';
$ca .= '<div class="vc-legs">';
$ca .= '<div class="vc-leg vc-leg--l"></div>';
$ca .= '<div class="vc-leg vc-leg--c"></div>';
$ca .= '<div class="vc-leg vc-leg--r"></div>';
$ca .= '</div>'; // vc-legs
$ca .= '</div>'; // vc-tripod
$ca .= '</div>'; // vc-wrap
$ca .= '</div>'; // cam-stage
$visual_html = $ca;
$visual_html = oribi_render_camera_animation();
$visual_cls = 'platform-visual has-camera';
/* ── Gallery TV Slideshow ───────────────────────────────── */