Add Day-Part Clock Animator and multiple animation options for various displays
- Implemented a new Day-Part Clock Animator in `solutions-animator.js` that updates a clock and badge based on simulated time. - Updated `index.php` to include new animation options for lobby, conference, day-part, wayfinding, storefront, announcement, campus wayfinding, emergency, enclosure, brightness, cellular, designer, media library, publish, screen groups, monitoring, patient wayfinding, waiting room, multi-zone, and membership displays. - Each animation option includes HTML structure for respective displays.
This commit is contained in:
Matt Batchelder
@@ -585,6 +585,26 @@ add_action('init', function () {
|
||||
'healthcareAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'transitAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'fitnessAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'lobbyAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'conferenceAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'dayPartAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'wayfindAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'storefrontAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'announcementAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'campusWayfindAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'emergencyAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'enclosureAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'brightnessAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'cellularAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'designerAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'mediaLibraryAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'publishAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'screenGroupsAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'monitoringAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'patientWayfindAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'waitingRoomAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'multiZoneAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'membershipAnim' => ['type' => 'boolean', 'default' => false],
|
||||
'galleryIds' => ['type' => 'array', 'default' => [], 'items' => ['type' => 'number']],
|
||||
],
|
||||
'supports' => $block_supports,
|
||||
@@ -2420,6 +2440,354 @@ function oribi_render_platform_row($a)
|
||||
$visual_html = $fa;
|
||||
$visual_cls = 'platform-visual has-fitness';
|
||||
}
|
||||
elseif (!empty($a['lobbyAnim'])) {
|
||||
/* ── Hotel Lobby Welcome Display ── */
|
||||
$lb = '<div class="lobby-stage" aria-hidden="true">';
|
||||
$lb .= '<div class="lobby-screen">';
|
||||
$lb .= '<div class="lobby-hdr"><span class="lobby-hdr__logo">◆ Grand Hotel</span><span class="lobby-hdr__time">3:42 PM</span></div>';
|
||||
$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">☉ Pool</div><div class="lobby-amen__item">⚛ Spa</div><div class="lobby-amen__item">♨ Restaurant</div><div class="lobby-amen__item">⌖ 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>';
|
||||
$lb .= '<div class="lobby-wifi">Wi-Fi: <strong>GrandGuest</strong></div>';
|
||||
$lb .= '</div>';
|
||||
$lb .= '</div>';
|
||||
$visual_html = $lb;
|
||||
$visual_cls = 'platform-visual has-lobby';
|
||||
}
|
||||
elseif (!empty($a['conferenceAnim'])) {
|
||||
/* ── Conference Room Door Panel ── */
|
||||
$cf = '<div class="conf-stage" aria-hidden="true">';
|
||||
$cf .= '<div class="conf-panel">';
|
||||
$cf .= '<div class="conf-panel__room">Boardroom A</div>';
|
||||
$cf .= '<div class="conf-panel__status"><span class="conf-status__dot"></span>In Use</div>';
|
||||
$cf .= '<div class="conf-panel__current"><div class="conf-current__label">Current Session</div><div class="conf-current__title">Q1 Strategy Review</div><div class="conf-current__meta">09:00 – 10:30 · Sarah Mitchell</div></div>';
|
||||
$cf .= '<div class="conf-panel__timeline">';
|
||||
$cf .= '<div class="conf-tl__bar"><div class="conf-tl__fill"></div></div>';
|
||||
$cf .= '</div>';
|
||||
$cf .= '<div class="conf-panel__next"><span class="conf-next__label">Next:</span> <span class="conf-next__title">Design Sprint Kickoff</span> <span class="conf-next__time">11:00</span></div>';
|
||||
$cf .= '</div>';
|
||||
$cf .= '</div>';
|
||||
$visual_html = $cf;
|
||||
$visual_cls = 'platform-visual has-conference';
|
||||
}
|
||||
elseif (!empty($a['dayPartAnim'])) {
|
||||
/* ── Day-Part Retail Promo Display (JS-driven clock) ── */
|
||||
$dp = '<div class="daypart-stage" aria-hidden="true">';
|
||||
$dp .= '<div class="daypart-screen">';
|
||||
$dp .= '<div class="daypart-hdr"><span class="daypart-hdr__clock" data-daypart-clock>12:00</span><span class="daypart-hdr__badge" data-daypart-badge>Afternoon</span></div>';
|
||||
$dp .= '<div class="daypart-slides">';
|
||||
$dp .= '<div class="daypart-slide daypart-slide--morning"><div class="daypart-promo__tag">Morning</div><div class="daypart-promo__title">Breakfast Deals</div><div class="daypart-promo__sub">Fresh pastries & coffee combos from $4.99</div></div>';
|
||||
$dp .= '<div class="daypart-slide daypart-slide--afternoon"><div class="daypart-promo__tag">Afternoon</div><div class="daypart-promo__title">Lunch Specials</div><div class="daypart-promo__sub">Meal deals & combo offers until 4 PM</div></div>';
|
||||
$dp .= '<div class="daypart-slide daypart-slide--evening"><div class="daypart-promo__tag">Evening</div><div class="daypart-promo__title">Happy Hour</div><div class="daypart-promo__sub">2-for-1 drinks & 20% off appetisers</div></div>';
|
||||
$dp .= '</div>';
|
||||
$dp .= '</div>';
|
||||
$dp .= '</div>';
|
||||
$visual_html = $dp;
|
||||
$visual_cls = 'platform-visual has-daypart';
|
||||
}
|
||||
elseif (!empty($a['wayfindAnim'])) {
|
||||
/* ── In-Store Wayfinding Kiosk ── */
|
||||
$wf = '<div class="wayfind-stage" aria-hidden="true">';
|
||||
$wf .= '<div class="wayfind-kiosk">';
|
||||
$wf .= '<div class="wayfind-kiosk__search"><span class="wayfind-search__icon">🔍</span><span class="wayfind-search__text">Search departments...</span></div>';
|
||||
$wf .= '<div class="wayfind-kiosk__map">';
|
||||
$wf .= '<div class="wayfind-zone wayfind-zone--a">Fashion</div>';
|
||||
$wf .= '<div class="wayfind-zone wayfind-zone--b">Electronics</div>';
|
||||
$wf .= '<div class="wayfind-zone wayfind-zone--c">Home</div>';
|
||||
$wf .= '<div class="wayfind-zone wayfind-zone--d">Food Hall</div>';
|
||||
$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">↑</span> Fashion — Level 1</div>';
|
||||
$wf .= '<div class="wayfind-dir__item"><span class="wayfind-dir__arrow">→</span> Electronics — Level 2</div>';
|
||||
$wf .= '<div class="wayfind-dir__item"><span class="wayfind-dir__arrow">↓</span> Food Hall — Ground</div>';
|
||||
$wf .= '</div>';
|
||||
$wf .= '</div>';
|
||||
$wf .= '</div>';
|
||||
$visual_html = $wf;
|
||||
$visual_cls = 'platform-visual has-wayfind';
|
||||
}
|
||||
elseif (!empty($a['storefrontAnim'])) {
|
||||
/* ── Window / Storefront Display ── */
|
||||
$sf = '<div class="store-stage" aria-hidden="true">';
|
||||
$sf .= '<div class="store-window">';
|
||||
$sf .= '<div class="store-window__sun"></div>';
|
||||
$sf .= '<div class="store-window__screen">';
|
||||
$sf .= '<div class="store-slides">';
|
||||
$sf .= '<div class="store-slide store-slide--new"><div class="store-slide__tag">New Arrivals</div><div class="store-slide__title">Spring Collection</div><div class="store-slide__cta">Shop Now →</div></div>';
|
||||
$sf .= '<div class="store-slide store-slide--sale"><div class="store-slide__tag">Limited Time</div><div class="store-slide__title">Up to 50% Off</div><div class="store-slide__cta">View Offers →</div></div>';
|
||||
$sf .= '<div class="store-slide store-slide--hours"><div class="store-slide__tag">Opening Hours</div><div class="store-slide__title">Mon–Sat 9am–9pm</div><div class="store-slide__sub">Sunday 10am–6pm</div></div>';
|
||||
$sf .= '</div>';
|
||||
$sf .= '</div>';
|
||||
$sf .= '<div class="store-window__glare"></div>';
|
||||
$sf .= '</div>';
|
||||
$sf .= '</div>';
|
||||
$visual_html = $sf;
|
||||
$visual_cls = 'platform-visual has-storefront';
|
||||
}
|
||||
elseif (!empty($a['announcementAnim'])) {
|
||||
/* ── Corporate Announcement Board ── */
|
||||
$an = '<div class="announce-stage" aria-hidden="true">';
|
||||
$an .= '<div class="announce-board">';
|
||||
$an .= '<div class="announce-hdr"><span class="announce-hdr__title">Company Updates</span><span class="announce-hdr__live">● 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--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 & 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>';
|
||||
$an .= '</div>';
|
||||
$an .= '</div>';
|
||||
$visual_html = $an;
|
||||
$visual_cls = 'platform-visual has-announcement';
|
||||
}
|
||||
elseif (!empty($a['campusWayfindAnim'])) {
|
||||
/* ── Campus Wayfinding Kiosk ── */
|
||||
$cw = '<div class="campus-stage" aria-hidden="true">';
|
||||
$cw .= '<div class="campus-kiosk">';
|
||||
$cw .= '<div class="campus-kiosk__hdr">Campus Directory</div>';
|
||||
$cw .= '<div class="campus-kiosk__search"><span class="campus-search__icon">🔍</span><span class="campus-search__text">Find a building...</span></div>';
|
||||
$cw .= '<div class="campus-kiosk__map">';
|
||||
$cw .= '<div class="campus-bldg campus-bldg--lib">Library</div>';
|
||||
$cw .= '<div class="campus-bldg campus-bldg--sci">Science</div>';
|
||||
$cw .= '<div class="campus-bldg campus-bldg--arts">Arts</div>';
|
||||
$cw .= '<div class="campus-bldg campus-bldg--sports">Sports</div>';
|
||||
$cw .= '<div class="campus-pin"><span class="campus-pin__dot"></span></div>';
|
||||
$cw .= '</div>';
|
||||
$cw .= '<div class="campus-kiosk__legend"><span class="campus-legend__dot campus-legend__dot--you"></span> You are here</div>';
|
||||
$cw .= '</div>';
|
||||
$cw .= '</div>';
|
||||
$visual_html = $cw;
|
||||
$visual_cls = 'platform-visual has-campus-wayfind';
|
||||
}
|
||||
elseif (!empty($a['emergencyAnim'])) {
|
||||
/* ── Emergency Override Alert ── */
|
||||
$em = '<div class="emerg-stage" aria-hidden="true">';
|
||||
$em .= '<div class="emerg-screen">';
|
||||
$em .= '<div class="emerg-screen__normal">';
|
||||
$em .= '<div class="emerg-normal__hdr">Campus Notices</div>';
|
||||
$em .= '<div class="emerg-normal__item">Library open until 10 PM</div>';
|
||||
$em .= '<div class="emerg-normal__item">Café special: Flat white $3</div>';
|
||||
$em .= '</div>';
|
||||
$em .= '<div class="emerg-screen__alert">';
|
||||
$em .= '<div class="emerg-alert__icon">⚠</div>';
|
||||
$em .= '<div class="emerg-alert__title">EMERGENCY ALERT</div>';
|
||||
$em .= '<div class="emerg-alert__msg">Building lockdown in effect. Remain indoors. Follow staff instructions.</div>';
|
||||
$em .= '<div class="emerg-alert__pulse"></div>';
|
||||
$em .= '</div>';
|
||||
$em .= '</div>';
|
||||
$em .= '</div>';
|
||||
$visual_html = $em;
|
||||
$visual_cls = 'platform-visual has-emergency';
|
||||
}
|
||||
elseif (!empty($a['enclosureAnim'])) {
|
||||
/* ── Outdoor Weather-Resistant Enclosure ── */
|
||||
$en = '<div class="encl-stage" aria-hidden="true">';
|
||||
$en .= '<div class="encl-rain">';
|
||||
for ($i = 0; $i < 12; $i++) {
|
||||
$en .= '<div class="encl-rain__drop"></div>';
|
||||
}
|
||||
$en .= '</div>';
|
||||
$en .= '<div class="encl-unit">';
|
||||
$en .= '<div class="encl-unit__body">';
|
||||
$en .= '<div class="encl-unit__screen"><div class="encl-screen__content">Your Content Here</div></div>';
|
||||
$en .= '</div>';
|
||||
$en .= '<div class="encl-unit__badge">IP65</div>';
|
||||
$en .= '<div class="encl-unit__temp"><span class="encl-temp__icon">🌡</span> <span class="encl-temp__range">-20°C to 50°C</span></div>';
|
||||
$en .= '</div>';
|
||||
$en .= '</div>';
|
||||
$visual_html = $en;
|
||||
$visual_cls = 'platform-visual has-enclosure';
|
||||
}
|
||||
elseif (!empty($a['brightnessAnim'])) {
|
||||
/* ── High-Brightness Comparison ── */
|
||||
$br = '<div class="bright-stage" aria-hidden="true">';
|
||||
$br .= '<div class="bright-sun"></div>';
|
||||
$br .= '<div class="bright-compare">';
|
||||
$br .= '<div class="bright-panel bright-panel--indoor"><div class="bright-panel__screen bright-panel__screen--dim"><span class="bright-panel__text">Hello World</span></div><div class="bright-panel__label">Indoor 350 nits</div></div>';
|
||||
$br .= '<div class="bright-vs">vs</div>';
|
||||
$br .= '<div class="bright-panel bright-panel--outdoor"><div class="bright-panel__screen bright-panel__screen--vivid"><span class="bright-panel__text">Hello World</span></div><div class="bright-panel__label">Outdoor 2,500+ nits</div></div>';
|
||||
$br .= '</div>';
|
||||
$br .= '</div>';
|
||||
$visual_html = $br;
|
||||
$visual_cls = 'platform-visual has-brightness';
|
||||
}
|
||||
elseif (!empty($a['cellularAnim'])) {
|
||||
/* ── Cellular Connectivity Tower ── */
|
||||
$cl = '<div class="cell-stage" aria-hidden="true">';
|
||||
$cl .= '<div class="cell-tower">';
|
||||
$cl .= '<div class="cell-tower__mast"></div>';
|
||||
$cl .= '<div class="cell-tower__base"></div>';
|
||||
$cl .= '<div class="cell-wave cell-wave--1"></div>';
|
||||
$cl .= '<div class="cell-wave cell-wave--2"></div>';
|
||||
$cl .= '<div class="cell-wave cell-wave--3"></div>';
|
||||
$cl .= '</div>';
|
||||
$cl .= '<div class="cell-badge">4G / 5G</div>';
|
||||
$cl .= '<div class="cell-signal"><div class="cell-signal__bar cell-signal__bar--1"></div><div class="cell-signal__bar cell-signal__bar--2"></div><div class="cell-signal__bar cell-signal__bar--3"></div><div class="cell-signal__bar cell-signal__bar--4"></div></div>';
|
||||
$cl .= '<div class="cell-status">Connected ●</div>';
|
||||
$cl .= '</div>';
|
||||
$visual_html = $cl;
|
||||
$visual_cls = 'platform-visual has-cellular';
|
||||
}
|
||||
elseif (!empty($a['designerAnim'])) {
|
||||
/* ── Drag-and-Drop Editor Canvas ── */
|
||||
$ds = '<div class="designer-stage" aria-hidden="true">';
|
||||
$ds .= '<div class="designer-editor">';
|
||||
$ds .= '<div class="designer-toolbar"><span class="designer-tool">T</span><span class="designer-tool">□</span><span class="designer-tool">▶</span><span class="designer-tool">⋯</span></div>';
|
||||
$ds .= '<div class="designer-canvas">';
|
||||
$ds .= '<div class="designer-widget designer-widget--text"><span class="designer-widget__label">Heading</span></div>';
|
||||
$ds .= '<div class="designer-widget designer-widget--img"><span class="designer-widget__label">Image</span></div>';
|
||||
$ds .= '<div class="designer-widget designer-widget--ticker"><span class="designer-widget__label">Ticker</span></div>';
|
||||
$ds .= '<div class="designer-widget designer-widget--video"><span class="designer-widget__label">Video</span></div>';
|
||||
$ds .= '</div>';
|
||||
$ds .= '<div class="designer-layers"><div class="designer-layers__title">Layers</div><div class="designer-layer">Heading</div><div class="designer-layer">Image</div><div class="designer-layer">Ticker</div><div class="designer-layer">Video</div></div>';
|
||||
$ds .= '</div>';
|
||||
$ds .= '</div>';
|
||||
$visual_html = $ds;
|
||||
$visual_cls = 'platform-visual has-designer';
|
||||
}
|
||||
elseif (!empty($a['mediaLibraryAnim'])) {
|
||||
/* ── Media Library Grid ── */
|
||||
$ml = '<div class="medialib-stage" aria-hidden="true">';
|
||||
$ml .= '<div class="medialib-panel">';
|
||||
$ml .= '<div class="medialib-hdr"><span class="medialib-hdr__title">Media Library</span><span class="medialib-hdr__count">24 assets</span></div>';
|
||||
$ml .= '<div class="medialib-grid">';
|
||||
$ml .= '<div class="medialib-thumb medialib-thumb--img"><span class="medialib-thumb__icon">📷</span></div>';
|
||||
$ml .= '<div class="medialib-thumb medialib-thumb--vid"><span class="medialib-thumb__icon">▶</span></div>';
|
||||
$ml .= '<div class="medialib-thumb medialib-thumb--pdf"><span class="medialib-thumb__icon">PDF</span></div>';
|
||||
$ml .= '<div class="medialib-thumb medialib-thumb--ppt"><span class="medialib-thumb__icon">PPT</span></div>';
|
||||
$ml .= '<div class="medialib-thumb medialib-thumb--img2"><span class="medialib-thumb__icon">📷</span></div>';
|
||||
$ml .= '<div class="medialib-thumb medialib-thumb--audio"><span class="medialib-thumb__icon">♫</span></div>';
|
||||
$ml .= '</div>';
|
||||
$ml .= '<div class="medialib-upload"><div class="medialib-upload__bar"></div><span class="medialib-upload__text">Uploading...</span></div>';
|
||||
$ml .= '</div>';
|
||||
$ml .= '</div>';
|
||||
$visual_html = $ml;
|
||||
$visual_cls = 'platform-visual has-media-library';
|
||||
}
|
||||
elseif (!empty($a['publishAnim'])) {
|
||||
/* ── Draft → Publish Workflow ── */
|
||||
$pb = '<div class="publish-stage" aria-hidden="true">';
|
||||
$pb .= '<div class="publish-flow">';
|
||||
$pb .= '<div class="publish-step publish-step--draft"><span class="publish-step__badge">Draft</span><span class="publish-step__label">Edit safely</span></div>';
|
||||
$pb .= '<div class="publish-arrow">→</div>';
|
||||
$pb .= '<div class="publish-step publish-step--review"><span class="publish-step__badge">Review</span><span class="publish-step__label">Preview on screen</span></div>';
|
||||
$pb .= '<div class="publish-arrow">→</div>';
|
||||
$pb .= '<div class="publish-step publish-step--live"><span class="publish-step__badge">Live</span><span class="publish-step__label">Instant publish</span></div>';
|
||||
$pb .= '</div>';
|
||||
$pb .= '<div class="publish-bar"><div class="publish-bar__fill"></div></div>';
|
||||
$pb .= '<div class="publish-status">Publishing to 48 screens...</div>';
|
||||
$pb .= '</div>';
|
||||
$visual_html = $pb;
|
||||
$visual_cls = 'platform-visual has-publish';
|
||||
}
|
||||
elseif (!empty($a['screenGroupsAnim'])) {
|
||||
/* ── Screen Group Hierarchy Tree ── */
|
||||
$sg = '<div class="groups-stage" aria-hidden="true">';
|
||||
$sg .= '<div class="groups-tree">';
|
||||
$sg .= '<div class="groups-node groups-node--root"><span class="groups-node__icon">●</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">●</span><span class="groups-node__name">London</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">●</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">●</span><span class="groups-node__name">Canary Wharf</span><span class="groups-node__count">12</span></div>';
|
||||
$sg .= '</div>';
|
||||
$sg .= '<div class="groups-node groups-node--region"><span class="groups-node__icon">●</span><span class="groups-node__name">Manchester</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>';
|
||||
$sg .= '</div>';
|
||||
$visual_html = $sg;
|
||||
$visual_cls = 'platform-visual has-screen-groups';
|
||||
}
|
||||
elseif (!empty($a['monitoringAnim'])) {
|
||||
/* ── Remote Monitoring Dashboard ── */
|
||||
$mo = '<div class="monitor-stage" aria-hidden="true">';
|
||||
$mo .= '<div class="monitor-dash">';
|
||||
$mo .= '<div class="monitor-hdr"><span class="monitor-hdr__title">Display Status</span><span class="monitor-hdr__count">48/48 Online</span></div>';
|
||||
$mo .= '<div class="monitor-grid">';
|
||||
$mo .= '<div class="monitor-tile monitor-tile--ok"><span class="monitor-tile__dot"></span><span class="monitor-tile__name">Lobby-01</span></div>';
|
||||
$mo .= '<div class="monitor-tile monitor-tile--ok"><span class="monitor-tile__dot"></span><span class="monitor-tile__name">Lobby-02</span></div>';
|
||||
$mo .= '<div class="monitor-tile monitor-tile--warn"><span class="monitor-tile__dot"></span><span class="monitor-tile__name">Floor3-01</span></div>';
|
||||
$mo .= '<div class="monitor-tile monitor-tile--ok"><span class="monitor-tile__dot"></span><span class="monitor-tile__name">Café-01</span></div>';
|
||||
$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>';
|
||||
$mo .= '</div>';
|
||||
$visual_html = $mo;
|
||||
$visual_cls = 'platform-visual has-monitoring';
|
||||
}
|
||||
elseif (!empty($a['patientWayfindAnim'])) {
|
||||
/* ── Hospital Patient Wayfinding Kiosk ── */
|
||||
$pw = '<div class="pwayfind-stage" aria-hidden="true">';
|
||||
$pw .= '<div class="pwayfind-kiosk">';
|
||||
$pw .= '<div class="pwayfind-hdr"><span class="pwayfind-hdr__title">Find Department</span><span class="pwayfind-hdr__a11y">♿</span></div>';
|
||||
$pw .= '<div class="pwayfind-search"><span class="pwayfind-search__icon">🔍</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__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&E</span><span class="pwayfind-quick__item">Pharmacy</span><span class="pwayfind-quick__item">Radiology</span></div>';
|
||||
$pw .= '</div>';
|
||||
$pw .= '</div>';
|
||||
$visual_html = $pw;
|
||||
$visual_cls = 'platform-visual has-patient-wayfind';
|
||||
}
|
||||
elseif (!empty($a['waitingRoomAnim'])) {
|
||||
/* ── Waiting Room Information Display ── */
|
||||
$wr = '<div class="waitroom-stage" aria-hidden="true">';
|
||||
$wr .= '<div class="waitroom-tv">';
|
||||
$wr .= '<div class="waitroom-tv__body">';
|
||||
$wr .= '<div class="waitroom-tv__screen">';
|
||||
$wr .= '<div class="waitroom-slides">';
|
||||
$wr .= '<div class="waitroom-slide waitroom-slide--tips"><div class="waitroom-tips__title">Health Tip</div><div class="waitroom-tips__text">Regular hand washing reduces infection spread by up to 50%</div></div>';
|
||||
$wr .= '<div class="waitroom-slide waitroom-slide--wait"><div class="waitroom-wait__title">Estimated Wait</div><div class="waitroom-wait__value">~15 min</div><div class="waitroom-wait__queue">Position: 4 of 12</div></div>';
|
||||
$wr .= '<div class="waitroom-slide waitroom-slide--info"><div class="waitroom-info__title">Facility Hours</div><div class="waitroom-info__text">Mon–Fri: 8am – 8pm<br>Sat: 9am – 1pm</div></div>';
|
||||
$wr .= '</div>';
|
||||
$wr .= '</div>';
|
||||
$wr .= '</div>';
|
||||
$wr .= '<div class="waitroom-tv__feet"><div class="waitroom-tv__foot"></div><div class="waitroom-tv__foot"></div></div>';
|
||||
$wr .= '</div>';
|
||||
$wr .= '</div>';
|
||||
$visual_html = $wr;
|
||||
$visual_cls = 'platform-visual has-waiting-room';
|
||||
}
|
||||
elseif (!empty($a['multiZoneAnim'])) {
|
||||
/* ── Multi-Zone Layout Display ── */
|
||||
$mz = '<div class="mzone-stage" aria-hidden="true">';
|
||||
$mz .= '<div class="mzone-tv">';
|
||||
$mz .= '<div class="mzone-tv__body">';
|
||||
$mz .= '<div class="mzone-tv__screen">';
|
||||
$mz .= '<div class="mzone-layout">';
|
||||
$mz .= '<div class="mzone-main"><div class="mzone-main__label">▶ Live TV</div></div>';
|
||||
$mz .= '<div class="mzone-side"><div class="mzone-side__title">Class Schedule</div><div class="mzone-side__item">10:00 Spin</div><div class="mzone-side__item">11:15 Yoga</div><div class="mzone-side__item">12:30 HIIT</div></div>';
|
||||
$mz .= '<div class="mzone-ticker">★ Member of the Month: Alex R | Gym closes 10 PM tonight | New PT packages available</div>';
|
||||
$mz .= '</div>';
|
||||
$mz .= '</div>';
|
||||
$mz .= '</div>';
|
||||
$mz .= '<div class="mzone-tv__feet"><div class="mzone-tv__foot"></div><div class="mzone-tv__foot"></div></div>';
|
||||
$mz .= '</div>';
|
||||
$mz .= '</div>';
|
||||
$visual_html = $mz;
|
||||
$visual_cls = 'platform-visual has-multi-zone';
|
||||
}
|
||||
elseif (!empty($a['membershipAnim'])) {
|
||||
/* ── Seasonal Membership Promo Cycling ── */
|
||||
$mb = '<div class="member-stage" aria-hidden="true">';
|
||||
$mb .= '<div class="member-screen">';
|
||||
$mb .= '<div class="member-slides">';
|
||||
$mb .= '<div class="member-slide member-slide--jan"><div class="member-slide__tag">January Offer</div><div class="member-slide__title">New Year, New You</div><div class="member-slide__price">Join from $29/mo</div><div class="member-slide__cta">Sign Up Today →</div></div>';
|
||||
$mb .= '<div class="member-slide member-slide--summer"><div class="member-slide__tag">Summer Special</div><div class="member-slide__title">Get Beach Ready</div><div class="member-slide__price">3 months for $79</div><div class="member-slide__cta">Claim Offer →</div></div>';
|
||||
$mb .= '<div class="member-slide member-slide--sept"><div class="member-slide__tag">Back to Fitness</div><div class="member-slide__title">Bring a Friend Free</div><div class="member-slide__price">This week only</div><div class="member-slide__cta">Book Now →</div></div>';
|
||||
$mb .= '</div>';
|
||||
$mb .= '</div>';
|
||||
$mb .= '</div>';
|
||||
$visual_html = $mb;
|
||||
$visual_cls = 'platform-visual has-membership';
|
||||
}
|
||||
elseif (!empty($a['hospitalityAnim'])) {
|
||||
/* ── Hospitality Sign: Rotating Menu (Breakfast, Lunch, Dinner) ── */
|
||||
$ha = '<div class="hosp-stage" aria-hidden="true">';
|
||||
|
||||
Reference in New Issue
Block a user