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

Add photo and video camera components to platform row with animations and styling

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 10:12:23 -05:00
parent ab6f4212bd
commit a9697dd714
3 changed files with 476 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
theme/blocks/index.php
View File

@@ -1500,33 +1500,56 @@ function oribi_render_platform_row( $a ) {
$visual_html = $ts;
$visual_cls = 'platform-visual has-tv-stick';
} elseif ( ! empty( $a['cameraAnim'] ) ) {
$ca = '<div class="cam-stage" aria-hidden="true">';
// Scene: product being photographed
$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>';
// Camera body
$ca .= '<div class="cam-body">';
$ca .= '<div class="cam-top">';
$ca .= '<div class="cam-hump"><div class="cam-dial"></div></div>';
$ca .= '<div class="cam-shutter-btn"><div class="cam-shutter-inner"></div></div>';
$ca .= '</div>';
$ca .= '<div class="cam-front">';
$ca .= '<div class="cam-grip-ridge"></div>';
$ca .= '<div class="cam-lens-assembly"><div class="cam-lens-barrel"><div class="cam-lens-glass"><div class="cam-reflection"></div></div></div></div>';
$ca .= '<div class="cam-controls"><div class="cam-led"></div><div class="cam-btn"></div><div class="cam-btn"></div></div>';
$ca .= '</div>';
$ca .= '</div>';
// Polaroid prints ejecting after each capture
$ca .= '<div class="cam-prints">';
$ca .= '<div class="cam-print cam-print--1"><div class="cam-print__img"></div></div>';
$ca .= '<div class="cam-print cam-print--2"><div class="cam-print__img"></div></div>';
$ca .= '<div class="cam-print cam-print--3"><div class="cam-print__img"></div></div>';
$ca .= '</div>';
$ca .= '</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_cls = 'platform-visual has-camera';
} else {