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

Enhance Solutions Page and Add Touchscreen Animation

Browse Source 
- Updated descriptions for various industry sections on the solutions page to improve clarity and engagement.
- Introduced a new touchscreen display animation in the CSS, enhancing the visual appeal of the kiosks page.
- Modified JavaScript to update train departure data with local destinations, improving relevance for users.
- Added a new toggle for touchscreen display animations in the block editor, allowing for customizable visual effects.
- Updated the rendering logic to include touchscreen animations in the intro section, providing a more interactive experience.
- Made minor text adjustments across various sections for improved readability and consistency.
This commit is contained in:
Matt Batchelder
2026-04-16 22:28:07 -04:00
parent a274a13e94
commit 757c1eb05b
25 changed files with 362 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
theme/blocks/editor.js
View File

@@ -609,6 +609,7 @@
bundleAnim: { type: 'boolean', default: false },
demoAnim: { type: 'boolean', default: false },
featuresAnim: { type: 'boolean', default: false },
touchscreenAnim: { type: 'boolean', default: false },
imgId: { type: 'number', default: 0 },
imgUrl: { type: 'string', default: '' },
imgAlt: { type: 'string', default: '' },
@@ -653,7 +654,8 @@
el(TG, { label: 'Cloud Server Animation', checked: a.cloudAnim, onChange: function (v) { s({ cloudAnim: v }); } }),
el(TG, { label: 'Player + Display Bundle Animation', checked: !!a.bundleAnim, onChange: function (v) { s({ bundleAnim: v }); } }),
el(TG, { label: 'Command Center Demo Animation', checked: !!a.demoAnim, onChange: function (v) { s({ demoAnim: v }); } }),
el(TG, { label: 'Feature Ticker Animation', checked: !!a.featuresAnim, onChange: function (v) { s({ featuresAnim: v }); } })
el(TG, { label: 'Feature Ticker Animation', checked: !!a.featuresAnim, onChange: function (v) { s({ featuresAnim: v }); } }),
el(TG, { label: 'Touchscreen Displays Animation', checked: !!a.touchscreenAnim, onChange: function (v) { s({ touchscreenAnim: v }); } })
),
el(PB, { title: 'Visual Image', initialOpen: false },
el(MUC, null,
@@ -687,7 +689,7 @@
el(RT, { tagName: 'h2', style: { marginBottom: '1.5rem' }, value: a.heading, onChange: function (v) { s({ heading: v }); }, placeholder: 'Heading...' }),
el(RT, { tagName: 'p', className: 'lead', value: a.description, onChange: function (v) { s({ description: v }); }, placeholder: 'Description...' })
),
el('div', { className: 'about-intro-visual' + (a.cloudAnim ? ' has-cloud-anim' : (a.bundleAnim ? ' has-pkg-anim' : (a.demoAnim ? ' has-demo-anim' : (a.featuresAnim ? ' has-features-anim' : (a.imgUrl ? ' has-img' : ''))))), style: a.reversed ? { direction: 'ltr' } : {} }, visualContent)
el('div', { className: 'about-intro-visual' + (a.cloudAnim ? ' has-cloud-anim' : (a.bundleAnim ? ' has-pkg-anim' : (a.demoAnim ? ' has-demo-anim' : (a.featuresAnim ? ' has-features-anim' : (a.touchscreenAnim ? ' has-touchscreen-anim' : (a.imgUrl ? ' has-img' : '')))))), style: a.reversed ? { direction: 'ltr' } : {} }, visualContent)
)
)
)

74
theme/blocks/index.php
View File

@@ -343,6 +343,7 @@ add_action('init', function () {
'bundleAnim' => ['type' => 'boolean', 'default' => false],
'demoAnim' => ['type' => 'boolean', 'default' => false],
'featuresAnim' => ['type' => 'boolean', 'default' => false],
'touchscreenAnim' => ['type' => 'boolean', 'default' => false],
'imgId' => ['type' => 'number', 'default' => 0],
'imgUrl' => ['type' => 'string', 'default' => ''],
'imgAlt' => ['type' => 'string', 'default' => ''],
@@ -1015,7 +1016,7 @@ function oribi_render_intro_section($a)
<h2 style="margin-bottom:1.5rem;"><?php echo wp_kses_post($a['heading']); ?></h2>
<p class="lead"><?php echo wp_kses_post($a['description']); ?></p>
</div>
<div class="about-intro-visual<?php if (!empty($a['cloudAnim'])) echo ' has-cloud-anim'; elseif (!empty($a['bundleAnim'])) echo ' has-pkg-anim'; elseif (!empty($a['demoAnim'])) echo ' has-demo-anim'; elseif (!empty($a['featuresAnim'])) echo ' has-features-anim'; ?>"<?php echo $ltr; ?>>
<div class="about-intro-visual<?php if (!empty($a['cloudAnim'])) echo ' has-cloud-anim'; elseif (!empty($a['bundleAnim'])) echo ' has-pkg-anim'; elseif (!empty($a['demoAnim'])) echo ' has-demo-anim'; elseif (!empty($a['featuresAnim'])) echo ' has-features-anim'; elseif (!empty($a['touchscreenAnim'])) echo ' has-touchscreen-anim'; ?>"<?php echo $ltr; ?>>
<?php
if (!empty($a['cloudAnim'])) {
echo '<div class="ds-anim-container">';
@@ -1105,6 +1106,37 @@ function oribi_render_intro_section($a)
$feat .= '</div>';
echo $feat;
}
elseif (!empty($a['touchscreenAnim'])) {
$ts = '<div class="ts-stage" aria-hidden="true">';
// Large 55" floor-standing panel
$ts .= '<div class="ts-panel ts-panel--large">';
$ts .= '<div class="ts-bezel ts-bezel--large"><div class="ts-screen">';
$ts .= '<div class="ts-ui-header"></div>';
$ts .= '<div class="ts-ui-row ts-ui-row--1"></div>';
$ts .= '<div class="ts-ui-row ts-ui-row--2"></div>';
$ts .= '<div class="ts-ui-row ts-ui-row--3"></div>';
$ts .= '<div class="ts-ui-row ts-ui-row--4"></div>';
$ts .= '<div class="ts-ui-btn"></div>';
$ts .= '<div class="ts-ripple ts-ripple--a"></div>';
$ts .= '<div class="ts-ripple ts-ripple--b"></div>';
$ts .= '<div class="ts-ripple ts-ripple--c"></div>';
$ts .= '</div></div>'; // .ts-screen / .ts-bezel--large
$ts .= '<div class="ts-stand"><div class="ts-stem"></div><div class="ts-base"></div></div>';
$ts .= '</div>'; // .ts-panel--large
// Small 22" countertop unit
$ts .= '<div class="ts-panel ts-panel--small">';
$ts .= '<div class="ts-bezel ts-bezel--small"><div class="ts-screen ts-screen--sm">';
$ts .= '<div class="ts-ui-header ts-ui-header--sm"></div>';
$ts .= '<div class="ts-ui-row ts-ui-row--s1"></div>';
$ts .= '<div class="ts-ui-row ts-ui-row--s2"></div>';
$ts .= '<div class="ts-ui-row ts-ui-row--s3"></div>';
$ts .= '<div class="ts-ripple ts-ripple--d"></div>';
$ts .= '</div></div>'; // .ts-screen / .ts-bezel--small
$ts .= '<div class="ts-feet"><div class="ts-foot"></div><div class="ts-foot"></div></div>';
$ts .= '</div>'; // .ts-panel--small
$ts .= '</div>'; // .ts-stage
echo $ts;
}
else {
echo wp_kses_post($a['visual']);
}
@@ -2574,7 +2606,7 @@ function oribi_render_platform_row($a)
$ea .= '</div>'; // edu-board__rows
$ea .= '<div class="edu-board__alert">';
$ea .= '<span class="edu-alert__icon">!</span>';
$ea .= '<span class="edu-alert__txt">Fire drill scheduled — 15:45 today</span>';
$ea .= '<span class="edu-alert__txt">Fire drill scheduled at 15:45 today</span>';
$ea .= '</div>';
$ea .= '</div>'; // edu-board
$ea .= '</div>'; // edu-stage
@@ -2657,7 +2689,7 @@ function oribi_render_platform_row($a)
$la .= '<path id="ld-fill-path" d="M0,40 L0,40 L260,40 Z" fill="url(#ld-grad)"/>';
$la .= '<path id="ld-line-path" d="M0,40 L260,40" stroke="#4CAF50" stroke-width="2" fill="none" stroke-linejoin="round"/>';
$la .= '</svg>';
$la .= '<div class="ld-chart__label">Orders / hr — last 60 min</div>';
$la .= '<div class="ld-chart__label">Orders / hr, last 60 min</div>';
$la .= '</div>'; // ld-chart
$la .= '<div class="ld-status">';
@@ -2689,7 +2721,7 @@ function oribi_render_platform_row($a)
$hca .= '<div class="hc-now">';
$hca .= '<div class="hc-now__lbl">Now Serving</div>';
$hca .= '<div class="hc-now__number hc-ticker">A042</div>';
$hca .= '<div class="hc-now__counter">Counter 3 — Dr. Patel</div>';
$hca .= '<div class="hc-now__counter">Counter 3: Dr. Patel</div>';
$hca .= '</div>';
$hca .= '<div class="hc-counters">';
@@ -2709,7 +2741,7 @@ function oribi_render_platform_row($a)
}
$hca .= '</div>'; // hc-counters
$hca .= '<div class="hc-board__footer">Take a seat — your number will be called</div>';
$hca .= '<div class="hc-board__footer">Take a seat. Your number will be called shortly.</div>';
$hca .= '</div>'; // hc-board
$hca .= '</div>'; // hc-stage
@@ -2730,11 +2762,11 @@ function oribi_render_platform_row($a)
$ta .= '<div class="transit-rows" id="transit-rows">';
$departures = [
['time' => '10:14', 'destination' => 'London Victoria', 'platform' => '2', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '10:22', 'destination' => 'Brighton', 'platform' => '4', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '10:31', 'destination' => 'Gatwick Airport', 'platform' => '1', 'status' => 'Delayed', 'status_cls' => 'delayed'],
['time' => '10:45', 'destination' => 'London Bridge', 'platform' => '3', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '11:02', 'destination' => 'East Croydon', 'platform' => '2', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '10:14', 'destination' => 'Saratoga Springs', 'platform' => '2', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '10:22', 'destination' => 'Schenectady', 'platform' => '4', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '10:31', 'destination' => 'Albany Airport', 'platform' => '1', 'status' => 'Delayed', 'status_cls' => 'delayed'],
['time' => '10:45', 'destination' => 'Albany-Rensselaer','platform' => '3', 'status' => 'On Time', 'status_cls' => 'on-time'],
['time' => '11:02', 'destination' => 'Hudson', 'platform' => '2', 'status' => 'On Time', 'status_cls' => 'on-time'],
];
foreach ($departures as $d) {
$ta .= '<div class="transit-row">';
@@ -2808,7 +2840,7 @@ function oribi_render_platform_row($a)
$lb .= '<div class="lobby-slides">';
$lb .= '<div class="lobby-slide lobby-slide--welcome"><div class="lobby-welcome__msg">Welcome</div><div class="lobby-welcome__sub">We hope you enjoy your stay</div></div>';
$lb .= '<div class="lobby-slide lobby-slide--amenities"><div class="lobby-amen__title">Hotel Amenities</div><div class="lobby-amen__grid"><div class="lobby-amen__item">&#9737; Pool</div><div class="lobby-amen__item">&#9883; Spa</div><div class="lobby-amen__item">&#9832; Restaurant</div><div class="lobby-amen__item">&#8982; Gym</div></div></div>';
$lb .= '<div class="lobby-slide lobby-slide--events"><div class="lobby-events__title">Today\'s Events</div><div class="lobby-events__list"><div class="lobby-events__item"><span class="lobby-events__time">10:00</span><span class="lobby-events__name">Yoga on the Terrace</span></div><div class="lobby-events__item"><span class="lobby-events__time">14:00</span><span class="lobby-events__name">Wine Tasting</span></div><div class="lobby-events__item"><span class="lobby-events__time">19:00</span><span class="lobby-events__name">Live Jazz — Lobby Bar</span></div></div></div>';
$lb .= '<div class="lobby-slide lobby-slide--events"><div class="lobby-events__title">Today\'s Events</div><div class="lobby-events__list"><div class="lobby-events__item"><span class="lobby-events__time">10:00</span><span class="lobby-events__name">Yoga on the Terrace</span></div><div class="lobby-events__item"><span class="lobby-events__time">14:00</span><span class="lobby-events__name">Wine Tasting</span></div><div class="lobby-events__item"><span class="lobby-events__time">19:00</span><span class="lobby-events__name">Live Jazz: Lobby Bar</span></div></div></div>';
$lb .= '</div>';
$lb .= '<div class="lobby-wifi">Wi-Fi: <strong>GrandGuest</strong></div>';
$lb .= '</div>';
@@ -2860,9 +2892,9 @@ function oribi_render_platform_row($a)
$wf .= '<div class="wayfind-pin"><span class="wayfind-pin__dot"></span><span class="wayfind-pin__label">You are here</span></div>';
$wf .= '</div>';
$wf .= '<div class="wayfind-kiosk__dir">';
$wf .= '<div class="wayfind-dir__item"><span class="wayfind-dir__arrow">&#8593;</span> Fashion — Level 1</div>';
$wf .= '<div class="wayfind-dir__item"><span class="wayfind-dir__arrow">&#8594;</span> Electronics — Level 2</div>';
$wf .= '<div class="wayfind-dir__item"><span class="wayfind-dir__arrow">&#8595;</span> Food Hall — Ground</div>';
$wf .= '<div class="wayfind-dir__item"><span class="wayfind-dir__arrow">&#8593;</span> Fashion: Level 1</div>';
$wf .= '<div class="wayfind-dir__item"><span class="wayfind-dir__arrow">&#8594;</span> Electronics: Level 2</div>';
$wf .= '<div class="wayfind-dir__item"><span class="wayfind-dir__arrow">&#8595;</span> Food Hall: Ground Floor</div>';
$wf .= '</div>';
$wf .= '</div>';
$wf .= '</div>';
@@ -2893,7 +2925,7 @@ function oribi_render_platform_row($a)
$an .= '<div class="announce-board">';
$an .= '<div class="announce-hdr"><span class="announce-hdr__title">Company Updates</span><span class="announce-hdr__live">&#9679; Live</span></div>';
$an .= '<div class="announce-cards">';
$an .= '<div class="announce-card announce-card--urgent"><div class="announce-card__badge">Urgent</div><div class="announce-card__title">Fire Drill — 2 PM Today</div><div class="announce-card__body">All staff evacuate via nearest exit. Assembly point: Car Park B.</div></div>';
$an .= '<div class="announce-card announce-card--urgent"><div class="announce-card__badge">Urgent</div><div class="announce-card__title">Fire Drill: 2 PM Today</div><div class="announce-card__body">All staff evacuate via nearest exit. Assembly point: Car Park B.</div></div>';
$an .= '<div class="announce-card announce-card--celebration"><div class="announce-card__badge">Celebration</div><div class="announce-card__title">Welcome New Starters!</div><div class="announce-card__body">Say hello to 5 new team members joining Engineering &amp; Design.</div></div>';
$an .= '<div class="announce-card announce-card--hr"><div class="announce-card__badge">HR Notice</div><div class="announce-card__title">Benefits Enrolment Open</div><div class="announce-card__body">Deadline: March 31. Visit the HR portal to review your options.</div></div>';
$an .= '</div>';
@@ -3118,12 +3150,12 @@ function oribi_render_platform_row($a)
$sg .= '<div class="groups-tree">';
$sg .= '<div class="groups-node groups-node--root"><span class="groups-node__icon">&#9679;</span><span class="groups-node__name">HQ</span><span class="groups-node__count">48</span></div>';
$sg .= '<div class="groups-branch">';
$sg .= '<div class="groups-node groups-node--region"><span class="groups-node__icon">&#9679;</span><span class="groups-node__name">London</span><span class="groups-node__count">24</span></div>';
$sg .= '<div class="groups-node groups-node--region"><span class="groups-node__icon">&#9679;</span><span class="groups-node__name">Saratoga Springs</span><span class="groups-node__count">24</span></div>';
$sg .= '<div class="groups-branch groups-branch--deep">';
$sg .= '<div class="groups-node groups-node--site"><span class="groups-node__icon">&#9679;</span><span class="groups-node__name">Oxford St</span><span class="groups-node__count">12</span></div>';
$sg .= '<div class="groups-node groups-node--site"><span class="groups-node__icon">&#9679;</span><span class="groups-node__name">Canary Wharf</span><span class="groups-node__count">12</span></div>';
$sg .= '<div class="groups-node groups-node--site"><span class="groups-node__icon">&#9679;</span><span class="groups-node__name">Broadway</span><span class="groups-node__count">12</span></div>';
$sg .= '<div class="groups-node groups-node--site"><span class="groups-node__icon">&#9679;</span><span class="groups-node__name">Congress Park</span><span class="groups-node__count">12</span></div>';
$sg .= '</div>';
$sg .= '<div class="groups-node groups-node--region"><span class="groups-node__icon">&#9679;</span><span class="groups-node__name">Manchester</span><span class="groups-node__count">24</span></div>';
$sg .= '<div class="groups-node groups-node--region"><span class="groups-node__icon">&#9679;</span><span class="groups-node__name">Albany</span><span class="groups-node__count">24</span></div>';
$sg .= '</div>';
$sg .= '</div>';
$sg .= '<div class="groups-push"><div class="groups-push__ripple"></div><span class="groups-push__label">Push Update</span></div>';
@@ -3144,7 +3176,7 @@ function oribi_render_platform_row($a)
$mo .= '<div class="monitor-tile monitor-tile--ok"><span class="monitor-tile__dot"></span><span class="monitor-tile__name">Conf-A</span></div>';
$mo .= '<div class="monitor-tile monitor-tile--ok"><span class="monitor-tile__dot"></span><span class="monitor-tile__name">Conf-B</span></div>';
$mo .= '</div>';
$mo .= '<div class="monitor-screenshot"><div class="monitor-screenshot__img"></div><span class="monitor-screenshot__label">Live Screenshot — Lobby-01</span></div>';
$mo .= '<div class="monitor-screenshot"><div class="monitor-screenshot__img"></div><span class="monitor-screenshot__label">Live Screenshot: Lobby-01</span></div>';
$mo .= '</div>';
$mo .= '</div>';
$visual_html = $mo;
@@ -3157,7 +3189,7 @@ function oribi_render_platform_row($a)
$pw .= '<div class="pwayfind-hdr"><span class="pwayfind-hdr__title">Find Department</span><span class="pwayfind-hdr__a11y">&#9855;</span></div>';
$pw .= '<div class="pwayfind-search"><span class="pwayfind-search__icon">&#128269;</span><span class="pwayfind-search__text">Cardiology...</span></div>';
$pw .= '<div class="pwayfind-result">';
$pw .= '<div class="pwayfind-result__dept">Cardiology — Level 3, Wing B</div>';
$pw .= '<div class="pwayfind-result__dept">Cardiology: Level 3, Wing B</div>';
$pw .= '<div class="pwayfind-result__route"><div class="pwayfind-route__line"></div><div class="pwayfind-route__start">You are here</div><div class="pwayfind-route__end">Cardiology</div></div>';
$pw .= '</div>';
$pw .= '<div class="pwayfind-quick"><span class="pwayfind-quick__item">A&amp;E</span><span class="pwayfind-quick__item">Pharmacy</span><span class="pwayfind-quick__item">Radiology</span></div>';