Enhance platform row block with new animation options and gallery support
- Added new attributes for dashboard, device, TV stick, camera, never goes dark, and branded animations in the platform row block. - Implemented HTML structures for various animations including dashboard, device, TV stick, and branded displays. - Integrated a media uploader for selecting images for a TV slideshow. - Updated the editor controls to manage new animation settings and gallery images. Update enqueue scripts for new animation functionalities - Enqueued scripts for gallery TV slideshow and video editor timeline animator. Revise theme color palette for improved aesthetics - Changed primary color scheme to a new vibrant palette for light and dark modes. Adjust button styles to reflect new primary color - Updated button background color to match the new primary color in theme settings. Modify theme JSON to align with new color definitions - Updated color definitions in theme.json to reflect the new primary color scheme for both light and dark modes.
This commit is contained in:
Matt Batchelder
@@ -1170,28 +1170,105 @@ reg('oribi/platform-row', {
|
||||
parent: ['oribi/platform-section'],
|
||||
supports: { html: false, reusable: false },
|
||||
attributes: {
|
||||
heading: { type: 'string', default: '' },
|
||||
description: { type: 'string', default: '' },
|
||||
btnText: { type: 'string', default: 'Learn More' },
|
||||
btnUrl: { type: 'string', default: '' },
|
||||
visual: { type: 'string', default: '' },
|
||||
reversed: { type: 'boolean', default: false },
|
||||
imgId: { type: 'number', default: 0 },
|
||||
imgUrl: { type: 'string', default: '' },
|
||||
imgAlt: { type: 'string', default: '' },
|
||||
imgWidth: { type: 'number', default: 300 },
|
||||
cameraAnim: { type: 'boolean', default: false },
|
||||
heading: { type: 'string', default: '' },
|
||||
description: { type: 'string', default: '' },
|
||||
btnText: { type: 'string', default: 'Learn More' },
|
||||
btnUrl: { type: 'string', default: '' },
|
||||
visual: { type: 'string', default: '' },
|
||||
reversed: { type: 'boolean', default: false },
|
||||
imgId: { type: 'number', default: 0 },
|
||||
imgUrl: { type: 'string', default: '' },
|
||||
imgAlt: { type: 'string', default: '' },
|
||||
imgWidth: { type: 'number', default: 300 },
|
||||
isDashboard: { type: 'boolean', default: false },
|
||||
deviceAnim: { type: 'boolean', default: false },
|
||||
tvStick: { type: 'boolean', default: false },
|
||||
cameraAnim: { type: 'boolean', default: false },
|
||||
neverGoesDark: { type: 'boolean', default: false },
|
||||
brandedAnim: { type: 'boolean', default: false },
|
||||
galleryIds: { type: 'array', default: [] },
|
||||
},
|
||||
edit: function (props) {
|
||||
var a = props.attributes, s = props.setAttributes;
|
||||
var imgW = a.imgWidth || 300;
|
||||
|
||||
/* ── Animation HTML strings (mirror PHP render, used via dangerouslySetInnerHTML) ── */
|
||||
var DA_SCREEN = '<div class="da-screen"><div class="da-promo"><div class="da-promo__top"><span class="da-promo__dot"></span><span class="da-promo__brand"></span></div><div class="da-promo__hero"></div><div class="da-promo__row"><span class="da-promo__line da-promo__line--lg"></span><span class="da-promo__line da-promo__line--sm"></span></div><div class="da-promo__row"><span class="da-promo__line da-promo__line--md"></span><span class="da-promo__line da-promo__line--xs"></span></div><div class="da-promo__ticker"><span class="da-promo__chip"></span><span class="da-promo__chip"></span><span class="da-promo__chip"></span></div></div></div>';
|
||||
var DA_HTML = '<div class="da-stage" aria-hidden="true">' +
|
||||
'<div class="da-device da-tablet"><div class="da-body">' + DA_SCREEN + '</div><span class="da-label">Tablet</span></div>' +
|
||||
'<div class="da-device da-monitor-sm"><div class="da-body">' + DA_SCREEN + '</div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Small Monitor</span></div>' +
|
||||
'<div class="da-device da-monitor-lg"><div class="da-body">' + DA_SCREEN + '</div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Large Monitor</span></div>' +
|
||||
'<div class="da-device da-tv"><div class="da-body">' + DA_SCREEN + '</div><div class="da-feet"><div class="da-foot"></div><div class="da-foot"></div></div><span class="da-label">TV</span></div>' +
|
||||
'<div class="da-device da-projector"><div class="da-proj-layout"><div class="da-proj-body"><div class="da-lens"></div></div><div class="da-beam"></div><div class="da-proj-screen">' + DA_SCREEN + '</div></div><span class="da-label">Projector</span></div>' +
|
||||
'<div class="da-device da-vwall"><div class="da-vwall-grid"><div class="da-panel">' + DA_SCREEN + '</div><div class="da-panel">' + DA_SCREEN + '</div><div class="da-panel">' + DA_SCREEN + '</div><div class="da-panel">' + DA_SCREEN + '</div></div><span class="da-label">Video Wall</span></div>' +
|
||||
'</div>';
|
||||
|
||||
var TS_MI = '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
|
||||
var TS_COL = '<div class="ts-menu__col"><div class="ts-menu__cat"></div>' + TS_MI + TS_MI + TS_MI + '</div>';
|
||||
var TS_HTML = '<div class="ts-stage" data-tv-stick-anim aria-hidden="true">' +
|
||||
'<div class="ts-tv"><div class="ts-tv__body"><div class="ts-tv__screen"><div class="ts-slides">' +
|
||||
'<div class="ts-slide ts-slide--menu"><div class="ts-menu"><div class="ts-menu__header"><div class="ts-menu__logo"></div><div class="ts-menu__title"></div></div><div class="ts-menu__cols">' + TS_COL + TS_COL + '</div></div></div>' +
|
||||
'<div class="ts-slide ts-slide--wayfind"><div class="ts-wf"><div class="ts-wf__header"><div class="ts-wf__building"></div></div><div class="ts-wf__rows"><div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--left"></span><span class="ts-wf__label ts-wf__label--w1"></span><span class="ts-wf__floor"></span></div><div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--right"></span><span class="ts-wf__label ts-wf__label--w2"></span><span class="ts-wf__floor"></span></div><div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--up"></span><span class="ts-wf__label ts-wf__label--w3"></span><span class="ts-wf__floor"></span></div><div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--left"></span><span class="ts-wf__label ts-wf__label--w4"></span><span class="ts-wf__floor"></span></div></div></div></div>' +
|
||||
'<div class="ts-slide ts-slide--sched"><div class="ts-sched"><div class="ts-sched__header"><div class="ts-sched__title"></div><div class="ts-sched__date"></div></div><div class="ts-sched__table"><div class="ts-sched__hrow"><span class="ts-sched__hcell"></span><span class="ts-sched__hcell"></span><span class="ts-sched__hcell"></span><span class="ts-sched__hcell"></span></div><div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__event ts-sched__event--a"></span><span class="ts-sched__cell"></span><span class="ts-sched__cell"></span></div><div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__cell"></span><span class="ts-sched__event ts-sched__event--b"></span><span class="ts-sched__cell"></span></div><div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__cell"></span><span class="ts-sched__cell"></span><span class="ts-sched__event ts-sched__event--c"></span></div><div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__event ts-sched__event--a"></span><span class="ts-sched__event ts-sched__event--b"></span><span class="ts-sched__cell"></span></div></div></div></div>' +
|
||||
'</div></div><div class="ts-tv__port"></div></div><div class="ts-tv__feet"><div class="ts-tv__foot"></div><div class="ts-tv__foot"></div></div></div>' +
|
||||
'<div class="ts-stick"><div class="ts-stick__body"><div class="ts-stick__led"></div></div><div class="ts-stick__connector"></div></div>' +
|
||||
'</div>';
|
||||
|
||||
var NGD_ROW = '<div class="ngd-menu__row"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
|
||||
var NGD_ROWH = '<div class="ngd-menu__row ngd-menu__row--hl"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
|
||||
var NGD_HTML = '<div class="ngd-stage" aria-hidden="true">' +
|
||||
'<div class="ngd-tv"><div class="ngd-tv__body"><div class="ngd-tv__screen"><div class="ngd-menu"><div class="ngd-menu__hd"><div class="ngd-menu__logo"></div><div class="ngd-menu__ttl"></div></div><div class="ngd-menu__cols"><div class="ngd-menu__col"><div class="ngd-menu__cat"></div>' + NGD_ROW + NGD_ROWH + NGD_ROW + '</div><div class="ngd-menu__col"><div class="ngd-menu__cat"></div>' + NGD_ROW + NGD_ROW + NGD_ROWH + '</div></div><div class="ngd-menu__ticker"><div class="ngd-menu__ticker-inner"></div></div></div></div><div class="ngd-tv__port"></div></div><div class="ngd-tv__feet"><div class="ngd-tv__foot"></div><div class="ngd-tv__foot"></div></div></div>' +
|
||||
'<div class="ngd-player"><div class="ngd-player__connector"></div><div class="ngd-player__body"><div class="ngd-player__led"></div></div><div class="ngd-player__check"><svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="10" stroke="#4CAF50" stroke-width="1.5"/><polyline points="6,11 9.5,14.5 16,7.5" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>' +
|
||||
'<div class="ngd-signal-wrap"><div class="ngd-cloud"><svg class="ngd-cloud__svg" viewBox="0 0 64 46" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="ngd-cloud__path" cx="32" cy="23" r="14" stroke-width="2.2" fill="none"/><path class="ngd-cloud__path" d="M18.5 23C23 20 41 20 45.5 23" stroke-width="1.9" stroke-linecap="round" fill="none"/><path class="ngd-cloud__path" d="M20.5 29C25.5 31 38.5 31 43.5 29" stroke-width="1.9" stroke-linecap="round" fill="none"/><path class="ngd-cloud__path" d="M24.5 12C21.5 16.5 21.5 29.5 24.5 34" stroke-width="1.9" stroke-linecap="round" fill="none"/><path class="ngd-cloud__path" d="M39.5 12C42.5 16.5 42.5 29.5 39.5 34" stroke-width="1.9" stroke-linecap="round" fill="none"/></svg></div><div class="ngd-signal-line"><div class="ngd-signal__dots"><div class="ngd-signal__dot ngd-signal__dot--1"></div><div class="ngd-signal__dot ngd-signal__dot--2"></div><div class="ngd-signal__dot ngd-signal__dot--3"></div></div><div class="ngd-signal__break"><svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="8" fill="rgba(239,68,68,0.12)" stroke="#ef4444" stroke-width="1.2"/><line x1="5.5" y1="5.5" x2="12.5" y2="12.5" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/><line x1="12.5" y1="5.5" x2="5.5" y2="12.5" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/></svg></div></div></div>' +
|
||||
'</div>';
|
||||
|
||||
var BD_SPLASH = '<div class="bd-splash"><div class="bd-splash__logo"></div></div>';
|
||||
var BD_HDR = '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
|
||||
var BD_HTML = '<div class="bd-stage" aria-hidden="true">' +
|
||||
'<div class="bd-device bd-device--tablet"><span class="bd-device__label">Kiosk</span><div class="bd-device__body"><div class="bd-device__screen">' + BD_SPLASH + '<div class="bd-ui">' + BD_HDR + '<div class="bd-ui__content"><div class="bd-promo bd-promo--welcome"><div class="bd-promo__hero"></div><div class="bd-promo__heading"></div><div class="bd-promo__text"></div><div class="bd-promo__btn"></div></div></div></div></div></div></div>' +
|
||||
'<div class="bd-device bd-device--wall"><span class="bd-device__label">Wall Display</span><div class="bd-device__body"><div class="bd-device__screen">' + BD_SPLASH + '<div class="bd-ui">' + BD_HDR + '<div class="bd-ui__content"><div class="bd-promo bd-promo--sale"><div class="bd-promo__cols"><div class="bd-promo__visual"></div><div class="bd-promo__info"><div class="bd-promo__badge"></div><div class="bd-promo__heading"></div><div class="bd-promo__text"></div><div class="bd-promo__text bd-promo__text--short"></div><div class="bd-promo__price"></div></div></div></div></div></div></div></div><div class="bd-mount"></div></div>' +
|
||||
'<div class="bd-device bd-device--interactive"><span class="bd-device__label">Interactive</span><div class="bd-device__body"><div class="bd-device__screen">' + BD_SPLASH + '<div class="bd-ui">' + BD_HDR + '<div class="bd-ui__content"><div class="bd-promo bd-promo--menu"><div class="bd-promo__heading"></div><div class="bd-promo__grid"><div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div><div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div><div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div><div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div></div></div></div></div></div></div><div class="bd-table"></div></div>' +
|
||||
'</div>';
|
||||
|
||||
var DB_HTML = '<div class="dashboard-tv" data-dashboard-container="true"><div class="dashboard-tv__body"><div class="dashboard-tv__screen"><svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts"><defs><linearGradient id="dbe-barGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#D83302" stop-opacity="1"/><stop offset="100%" stop-color="#4CAF50" stop-opacity=".8"/></linearGradient><linearGradient id="dbe-lineGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#4CAF50" stop-opacity=".3"/><stop offset="100%" stop-color="#4CAF50" stop-opacity="0"/></linearGradient></defs><g transform="translate(35,20)"><text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#888">Performance</text><g id="dbe-bars1" transform="translate(0,25)"><rect x="0" y="60" width="28" height="60" fill="url(#dbe-barGrad)"/><rect x="40" y="80" width="28" height="40" fill="url(#dbe-barGrad)"/><rect x="80" y="40" width="28" height="80" fill="url(#dbe-barGrad)"/><rect x="120" y="70" width="28" height="50" fill="url(#dbe-barGrad)"/><rect x="160" y="50" width="28" height="70" fill="url(#dbe-barGrad)"/></g><g transform="translate(0,152)"><text class="cl" x="14" y="0" font-size="10" text-anchor="middle" fill="#aaa">API</text><text class="cl" x="54" y="0" font-size="10" text-anchor="middle" fill="#aaa">Cache</text><text class="cl" x="94" y="0" font-size="10" text-anchor="middle" fill="#aaa">DB</text><text class="cl" x="134" y="0" font-size="10" text-anchor="middle" fill="#aaa">Queue</text><text class="cl" x="174" y="0" font-size="10" text-anchor="middle" fill="#aaa">Worker</text></g></g><g transform="translate(430,20)"><text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#888">Requests/sec</text><g transform="translate(0,25)"><rect x="0" y="50" width="28" height="70" fill="url(#dbe-barGrad)"/><rect x="40" y="30" width="28" height="90" fill="url(#dbe-barGrad)"/><rect x="80" y="65" width="28" height="55" fill="url(#dbe-barGrad)"/><rect x="120" y="45" width="28" height="75" fill="url(#dbe-barGrad)"/></g><g transform="translate(0,152)"><text class="cl" x="14" y="0" font-size="10" text-anchor="middle" fill="#aaa">Read</text><text class="cl" x="54" y="0" font-size="10" text-anchor="middle" fill="#aaa">Write</text><text class="cl" x="94" y="0" font-size="10" text-anchor="middle" fill="#aaa">Update</text><text class="cl" x="134" y="0" font-size="10" text-anchor="middle" fill="#aaa">Delete</text></g></g><g transform="translate(35,245)"><text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#888">Traffic Trend</text><g transform="translate(0,25)"><line class="grid-line" x1="0" y1="0" x2="340" y2="0" stroke="#ddd" stroke-width=".5"/><line class="grid-line" x1="0" y1="40" x2="340" y2="40" stroke="#ddd" stroke-width=".5"/><line class="grid-line" x1="0" y1="80" x2="340" y2="80" stroke="#ddd" stroke-width=".5"/><line class="grid-line" x1="0" y1="120" x2="340" y2="120" stroke="#ddd" stroke-width=".5"/><path d="M0,90 L42,70 L85,50 L127,80 L170,45 L212,65 L255,55 L297,75 L340,60 L340,145 L0,145 Z" fill="url(#dbe-lineGrad)"/><path d="M0,90 L42,70 L85,50 L127,80 L170,45 L212,65 L255,55 L297,75 L340,60" stroke="#4CAF50" stroke-width="2.5" fill="none" stroke-linecap="round"/></g></g><g transform="translate(490,245)"><text class="ct" x="100" y="0" font-size="14" font-weight="600" text-anchor="middle" fill="#888">Distribution</text><g transform="translate(100,90)"><path d="M0,0 L0,-55 A55,55 0 0,1 38.89,-38.89 Z" fill="#D83302" opacity=".9"/><path d="M0,0 L38.89,-38.89 A55,55 0 0,1 55,0 Z" fill="#4CAF50" opacity=".8"/><path d="M0,0 L55,0 A55,55 0 0,1 0,55 Z" fill="#f59e0b" opacity=".7"/><path d="M0,0 L0,55 A55,55 0 1,1 0,-55 Z" fill="#ef4444" opacity=".7"/><circle cx="0" cy="0" r="22" fill="#f5f5f5" stroke="#ddd" stroke-width="1"/></g></g></svg></div></div><div class="dashboard-tv__feet"><div class="dashboard-tv__foot"></div><div class="dashboard-tv__foot"></div></div></div>';
|
||||
|
||||
return el(Frag, null,
|
||||
el(IC, null,
|
||||
el(PB, { title: 'Row Settings' },
|
||||
el(TC, { label: 'Visual (emoji)', value: a.visual, onChange: function(v){s({visual:v});} }),
|
||||
el(TC, { label: 'Button URL', value: a.btnUrl, onChange: function(v){s({btnUrl:v});} }),
|
||||
el(TG, { label: 'Reversed', checked: !!a.reversed, onChange: function(v){s({reversed:v});} }),
|
||||
el(TG, { label: 'Camera Animation', checked: !!a.cameraAnim, onChange: function(v){s({cameraAnim:v});} })
|
||||
el(TG, { label: 'Dashboard Animation', checked: !!a.isDashboard, onChange: function(v){s({isDashboard:v});} }),
|
||||
el(TG, { label: 'Device Animation', checked: !!a.deviceAnim, onChange: function(v){s({deviceAnim:v});} }),
|
||||
el(TG, { label: 'TV Stick Animation', checked: !!a.tvStick, onChange: function(v){s({tvStick:v});} }),
|
||||
el(TG, { label: 'Camera Animation', checked: !!a.cameraAnim, onChange: function(v){s({cameraAnim:v});} }),
|
||||
el(TG, { label: 'Never Goes Dark', checked: !!a.neverGoesDark, onChange: function(v){s({neverGoesDark:v});} }),
|
||||
el(TG, { label: 'Branded Display', checked: !!a.brandedAnim, onChange: function(v){s({brandedAnim:v});} })
|
||||
),
|
||||
el(PB, { title: 'Gallery TV Slideshow', initialOpen: false },
|
||||
el(MUC, null,
|
||||
el(MU, {
|
||||
onSelect: function(media) {
|
||||
s({ galleryIds: media.map(function(m){ return m.id; }) });
|
||||
},
|
||||
allowedTypes: ['image'],
|
||||
gallery: true,
|
||||
multiple: true,
|
||||
value: a.galleryIds || [],
|
||||
render: function(ref) {
|
||||
return el(Frag, null,
|
||||
a.galleryIds && a.galleryIds.length
|
||||
? el('div', { style: { marginBottom: '8px' } },
|
||||
el('p', { style: { margin: '0 0 4px' } }, a.galleryIds.length + ' image(s) selected'),
|
||||
el(Btn, { variant: 'link', isDestructive: true, onClick: function(){ s({ galleryIds: [] }); } }, 'Clear gallery')
|
||||
)
|
||||
: null,
|
||||
el(Btn, { onClick: ref.open, variant: 'secondary', __next40pxDefaultSize: true },
|
||||
a.galleryIds && a.galleryIds.length ? 'Edit gallery' : 'Select images for TV slideshow')
|
||||
);
|
||||
}
|
||||
})
|
||||
)
|
||||
),
|
||||
el(PB, { title: 'Visual Image', initialOpen: false },
|
||||
el(MUC, null,
|
||||
@@ -1222,7 +1299,9 @@ reg('oribi/platform-row', {
|
||||
a.btnUrl ? el(RT, { tagName: 'span', className: 'btn btn-outline mt-3',
|
||||
value: a.btnText, onChange: function(v){s({btnText:v});}, placeholder: 'Button...' }) : null
|
||||
),
|
||||
a.cameraAnim
|
||||
a.isDashboard
|
||||
? el('div', { className: 'platform-visual has-dashboard', dangerouslySetInnerHTML: { __html: DB_HTML } })
|
||||
: a.cameraAnim
|
||||
? el('div', { className: 'platform-visual has-camera' },
|
||||
el('div', { className: 'cam-stage', 'aria-hidden': 'true' },
|
||||
// Photo camera (left)
|
||||
@@ -1282,6 +1361,14 @@ reg('oribi/platform-row', {
|
||||
)
|
||||
)
|
||||
)
|
||||
: a.deviceAnim
|
||||
? el('div', { className: 'platform-visual has-anim', dangerouslySetInnerHTML: { __html: DA_HTML } })
|
||||
: a.tvStick
|
||||
? el('div', { className: 'platform-visual has-tv-stick', dangerouslySetInnerHTML: { __html: TS_HTML } })
|
||||
: a.neverGoesDark
|
||||
? el('div', { className: 'platform-visual has-ngd', dangerouslySetInnerHTML: { __html: NGD_HTML } })
|
||||
: a.brandedAnim
|
||||
? el('div', { className: 'platform-visual has-branded', dangerouslySetInnerHTML: { __html: BD_HTML } })
|
||||
: a.imgUrl
|
||||
? el('div', { className: 'platform-visual has-img' },
|
||||
el('img', { src: a.imgUrl, style: { width: imgW + 'px', maxWidth: '100%', height: 'auto', borderRadius: '4px', objectFit: 'contain', display: 'block', marginInline: 'auto' } })
|
||||
@@ -1618,6 +1705,74 @@ reg('oribi/comparison-table', {
|
||||
var a = props.attributes, s = props.setAttributes;
|
||||
var cols = a.columns || [];
|
||||
var rows = a.rows || [];
|
||||
|
||||
/* ── Column helpers ─────────────────────────────────────── */
|
||||
function updateCol(idx, val) {
|
||||
var c = cols.slice(); c[idx] = val; s({ columns: c });
|
||||
}
|
||||
function addCol() {
|
||||
var newRows = rows.map(function(r) {
|
||||
if (r.group) return r;
|
||||
return Object.assign({}, r, { values: (r.values || []).concat([false]) });
|
||||
});
|
||||
s({ columns: cols.concat(['Plan']), rows: newRows });
|
||||
}
|
||||
function removeCol(idx) {
|
||||
var c = cols.slice(); c.splice(idx, 1);
|
||||
var newRows = rows.map(function(r) {
|
||||
if (r.group) return r;
|
||||
var v = (r.values || []).slice(); v.splice(idx, 1);
|
||||
return Object.assign({}, r, { values: v });
|
||||
});
|
||||
s({ columns: c, rows: newRows });
|
||||
}
|
||||
|
||||
/* ── Row helpers ────────────────────────────────────────── */
|
||||
function updateRow(idx, key, val) {
|
||||
var r = rows.slice();
|
||||
r[idx] = Object.assign({}, r[idx]);
|
||||
r[idx][key] = val;
|
||||
s({ rows: r });
|
||||
}
|
||||
function updateCell(ri, ci, val) {
|
||||
var r = rows.slice();
|
||||
r[ri] = Object.assign({}, r[ri]);
|
||||
var v = (r[ri].values || []).slice();
|
||||
v[ci] = val;
|
||||
r[ri].values = v;
|
||||
s({ rows: r });
|
||||
}
|
||||
function toggleCell(ri, ci) {
|
||||
var val = (rows[ri].values || [])[ci];
|
||||
updateCell(ri, ci, val === true ? false : val === false ? true : true);
|
||||
}
|
||||
function switchCellToText(ri, ci) { updateCell(ri, ci, ''); }
|
||||
function addFeatureRow() {
|
||||
var vals = cols.map(function() { return false; });
|
||||
s({ rows: rows.concat([{ feature: 'New feature', values: vals }]) });
|
||||
}
|
||||
function addGroupRow() {
|
||||
s({ rows: rows.concat([{ group: 'New Group' }]) });
|
||||
}
|
||||
function removeRow(idx) {
|
||||
var r = rows.slice(); r.splice(idx, 1); s({ rows: r });
|
||||
}
|
||||
function moveRow(idx, dir) {
|
||||
var t = idx + dir;
|
||||
if (t < 0 || t >= rows.length) return;
|
||||
var r = rows.slice();
|
||||
var tmp = r[idx]; r[idx] = r[t]; r[t] = tmp;
|
||||
s({ rows: r });
|
||||
}
|
||||
|
||||
/* ── Inline styles for editor controls ──────────────────── */
|
||||
var inputStyle = { width: '100%', padding: '4px 6px', border: '1px solid #ddd', borderRadius: '3px', fontSize: '13px', background: 'transparent', boxSizing: 'border-box' };
|
||||
var thInputStyle = Object.assign({}, inputStyle, { fontWeight: 600, textAlign: 'center' });
|
||||
var smallBtnStyle = { background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', fontSize: '11px', lineHeight: 1, opacity: 0.6, verticalAlign: 'middle' };
|
||||
var rowCtrlStyle = { whiteSpace: 'nowrap', width: '1%', padding: '4px', verticalAlign: 'middle', border: 'none', background: 'transparent' };
|
||||
var cellBtnStyle = { background: 'none', border: '1px solid #ddd', borderRadius: '3px', cursor: 'pointer', padding: '2px 6px', fontSize: '13px', lineHeight: '1.4', margin: '0 1px' };
|
||||
|
||||
/* ── Render ─────────────────────────────────────────────── */
|
||||
return el(Frag, null,
|
||||
el(IC, null,
|
||||
el(PB, { title: 'Table Settings' },
|
||||
@@ -1625,6 +1780,21 @@ reg('oribi/comparison-table', {
|
||||
{ label: 'Normal', value: 'normal' }, { label: 'Alternate', value: 'alt' }
|
||||
], onChange: function(v){s({variant:v});} }),
|
||||
el(TC, { label: 'Label', value: a.label, onChange: function(v){s({label:v});} })
|
||||
),
|
||||
el(PB, { title: 'Columns', initialOpen: false },
|
||||
cols.map(function(col, i) {
|
||||
return el('div', { key: i, style: { display: 'flex', gap: '4px', marginBottom: '8px', alignItems: 'center' } },
|
||||
el(TC, { label: '', value: col, onChange: function(v){ updateCol(i, v); }, style: { flex: 1 } }),
|
||||
el(Btn, { isDestructive: true, isSmall: true, onClick: function(){ removeCol(i); } }, '\u2715')
|
||||
);
|
||||
}),
|
||||
el(Btn, { isSecondary: true, isSmall: true, onClick: addCol }, '+ Add Column')
|
||||
),
|
||||
el(PB, { title: 'Add Rows', initialOpen: false },
|
||||
el('div', { style: { display: 'flex', gap: '8px' } },
|
||||
el(Btn, { isSecondary: true, isSmall: true, onClick: addFeatureRow }, '+ Feature Row'),
|
||||
el(Btn, { isSecondary: true, isSmall: true, onClick: addGroupRow }, '+ Group Row')
|
||||
)
|
||||
)
|
||||
),
|
||||
el('section', { className: a.variant === 'alt' ? 'section section-alt' : 'section' },
|
||||
@@ -1639,26 +1809,62 @@ reg('oribi/comparison-table', {
|
||||
el('thead', null,
|
||||
el('tr', null,
|
||||
el('th', { className: 'comparison-feature-col' }, 'Feature'),
|
||||
cols.map(function(col, i) { return el('th', { key: i }, col); })
|
||||
cols.map(function(col, i) {
|
||||
return el('th', { key: i },
|
||||
el('input', { type: 'text', value: col, style: thInputStyle, onChange: function(e){ updateCol(i, e.target.value); } })
|
||||
);
|
||||
}),
|
||||
el('th', { style: rowCtrlStyle })
|
||||
)
|
||||
),
|
||||
el('tbody', null,
|
||||
rows.map(function(row, i) {
|
||||
rows.map(function(row, ri) {
|
||||
if (row.group) {
|
||||
return el('tr', { key: i, className: 'comparison-group-row' },
|
||||
el('td', { colSpan: cols.length + 1 }, row.group)
|
||||
return el('tr', { key: ri, className: 'comparison-group-row' },
|
||||
el('td', { colSpan: cols.length + 1 },
|
||||
el('input', { type: 'text', value: row.group, style: Object.assign({}, inputStyle, { fontWeight: 700 }), onChange: function(e){ updateRow(ri, 'group', e.target.value); } })
|
||||
),
|
||||
el('td', { style: rowCtrlStyle },
|
||||
el('button', { style: smallBtnStyle, onClick: function(){ moveRow(ri, -1); }, title: 'Move up' }, '\u25B2'),
|
||||
el('button', { style: smallBtnStyle, onClick: function(){ moveRow(ri, 1); }, title: 'Move down' }, '\u25BC'),
|
||||
el('button', { style: Object.assign({}, smallBtnStyle, { color: '#b00' }), onClick: function(){ removeRow(ri); }, title: 'Remove row' }, '\u2715')
|
||||
)
|
||||
);
|
||||
}
|
||||
return el('tr', { key: i },
|
||||
el('td', { className: 'comparison-feature-name' }, row.feature || ''),
|
||||
(row.values || []).map(function(val, j) {
|
||||
return el('td', { key: j, className: 'comparison-cell' },
|
||||
val === true ? '\u2713' : val === false ? '\u2014' : String(val)
|
||||
return el('tr', { key: ri },
|
||||
el('td', { className: 'comparison-feature-name' },
|
||||
el('input', { type: 'text', value: row.feature || '', style: inputStyle, placeholder: 'Feature name\u2026', onChange: function(e){ updateRow(ri, 'feature', e.target.value); } })
|
||||
),
|
||||
(row.values || []).map(function(val, ci) {
|
||||
if (typeof val === 'boolean') {
|
||||
return el('td', { key: ci, className: 'comparison-cell', style: { textAlign: 'center' } },
|
||||
el('button', { style: Object.assign({}, cellBtnStyle, { color: val ? '#2e7d32' : '#c62828' }), onClick: function(){ toggleCell(ri, ci); }, title: 'Toggle \u2713/\u2717' },
|
||||
val ? '\u2713' : '\u2717'
|
||||
),
|
||||
el('button', { style: Object.assign({}, smallBtnStyle, { fontSize: '10px' }), onClick: function(){ switchCellToText(ri, ci); }, title: 'Switch to text' }, 'Aa')
|
||||
);
|
||||
}
|
||||
return el('td', { key: ci, className: 'comparison-cell' },
|
||||
el('div', { style: { display: 'flex', alignItems: 'center', gap: '2px' } },
|
||||
el('input', { type: 'text', value: String(val), style: Object.assign({}, inputStyle, { flex: 1, minWidth: '60px' }), placeholder: 'Value\u2026', onChange: function(e){ updateCell(ri, ci, e.target.value); } }),
|
||||
el('button', { style: Object.assign({}, smallBtnStyle, { color: '#2e7d32' }), onClick: function(){ updateCell(ri, ci, true); }, title: 'Set as \u2713' }, '\u2713'),
|
||||
el('button', { style: Object.assign({}, smallBtnStyle, { color: '#c62828' }), onClick: function(){ updateCell(ri, ci, false); }, title: 'Set as \u2717' }, '\u2717')
|
||||
)
|
||||
);
|
||||
})
|
||||
}),
|
||||
el('td', { style: rowCtrlStyle },
|
||||
el('button', { style: smallBtnStyle, onClick: function(){ moveRow(ri, -1); }, title: 'Move up' }, '\u25B2'),
|
||||
el('button', { style: smallBtnStyle, onClick: function(){ moveRow(ri, 1); }, title: 'Move down' }, '\u25BC'),
|
||||
el('button', { style: Object.assign({}, smallBtnStyle, { color: '#b00' }), onClick: function(){ removeRow(ri); }, title: 'Remove row' }, '\u2715')
|
||||
)
|
||||
);
|
||||
})
|
||||
)
|
||||
),
|
||||
el('div', { style: { display: 'flex', gap: '8px', marginTop: '12px', justifyContent: 'center' } },
|
||||
el(Btn, { isSecondary: true, isSmall: true, onClick: addFeatureRow }, '+ Feature Row'),
|
||||
el(Btn, { isSecondary: true, isSmall: true, onClick: addGroupRow }, '+ Group Row'),
|
||||
el(Btn, { isSecondary: true, isSmall: true, onClick: addCol }, '+ Column')
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
@@ -553,9 +553,13 @@ add_action( 'init', function () {
|
||||
'imgUrl' => [ 'type' => 'string', 'default' => '' ],
|
||||
'imgAlt' => [ 'type' => 'string', 'default' => '' ],
|
||||
'imgWidth' => [ 'type' => 'number', 'default' => 300 ],
|
||||
'deviceAnim' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'tvStick' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'cameraAnim' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'isDashboard' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'deviceAnim' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'tvStick' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'cameraAnim' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'neverGoesDark'=> [ 'type' => 'boolean', 'default' => false ],
|
||||
'brandedAnim' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'galleryIds' => [ 'type' => 'array', 'default' => [], 'items' => [ 'type' => 'number' ] ],
|
||||
],
|
||||
'supports' => $block_supports,
|
||||
'render_callback' => 'oribi_render_platform_row',
|
||||
@@ -671,9 +675,8 @@ function oribi_render_site_header() {
|
||||
<div class="site-logo">
|
||||
<?php if ( $has_logo ) : ?>
|
||||
<?php the_custom_logo(); ?>
|
||||
<?php else : ?>
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="logo-text"><strong>Oribi</strong> Tech</a>
|
||||
<?php endif; ?>
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="logo-text"><strong>OTS</strong> Signs</a>
|
||||
</div>
|
||||
<button class="nav-toggle" id="nav-toggle" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'ots-theme' ); ?>">
|
||||
<span></span><span></span><span></span>
|
||||
@@ -1344,6 +1347,208 @@ function oribi_render_platform_section( $a, $content ) {
|
||||
}
|
||||
|
||||
/* ── Platform Row (child - renders one service row) ────────────────────────── */
|
||||
function oribi_render_camera_animation() {
|
||||
return <<<'HTML'
|
||||
<div class="ve-stage" aria-hidden="true"><svg viewBox="0 0 540 360" xmlns="http://www.w3.org/2000/svg" class="ve-svg" role="img" aria-label="Animated video editor timeline">
|
||||
<defs>
|
||||
<clipPath id="ve-preview-clip">
|
||||
<rect x="54" y="36" width="256" height="184"/>
|
||||
</clipPath>
|
||||
<linearGradient id="ve-sg-warm" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#3d0800"/>
|
||||
<stop offset="50%" stop-color="#a02500"/>
|
||||
<stop offset="100%" stop-color="#1d0400"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ve-sg-cold" x1="100%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0a1f3d"/>
|
||||
<stop offset="50%" stop-color="#0e3d6e"/>
|
||||
<stop offset="100%" stop-color="#06111e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ve-sg-go" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#07180d"/>
|
||||
<stop offset="50%" stop-color="#1c6038"/>
|
||||
<stop offset="100%" stop-color="#040e07"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ve-scr-warm" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ff9500"/>
|
||||
<stop offset="100%" stop-color="#ff4500"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ve-scr-cold" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#1a8aff"/>
|
||||
<stop offset="100%" stop-color="#0055cc"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ve-scr-go" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#00cc66"/>
|
||||
<stop offset="100%" stop-color="#008844"/>
|
||||
</linearGradient>
|
||||
<pattern id="ve-scanlines" x="0" y="0" width="1" height="3" patternUnits="userSpaceOnUse">
|
||||
<rect width="1" height="1" fill="rgba(0,0,0,0.18)"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- Laptop lid outer shell -->
|
||||
<rect x="20" y="5" width="500" height="300" rx="12" fill="#d2d2d0" stroke="#b0aca8" stroke-width="1.5"/>
|
||||
<rect x="28" y="12" width="484" height="280" rx="8" fill="#1c1c1c"/>
|
||||
<rect x="32" y="16" width="476" height="272" rx="5" fill="#0e1117"/>
|
||||
<!-- Laptop base -->
|
||||
<rect x="10" y="305" width="520" height="26" rx="5" fill="#c8c8c8" stroke="#b0ada8" stroke-width="0.8"/>
|
||||
<rect x="80" y="301" width="380" height="5" rx="2" fill="#a8a6a2"/>
|
||||
<rect x="205" y="311" width="130" height="13" rx="5" fill="#b8b5b0" stroke="#a0a09a" stroke-width="0.7"/>
|
||||
<rect x="38" y="306" width="155" height="18" rx="2" fill="#bcbab6" opacity="0.45"/>
|
||||
<rect x="347" y="306" width="155" height="18" rx="2" fill="#bcbab6" opacity="0.45"/>
|
||||
|
||||
<!-- Editor title bar -->
|
||||
<rect x="32" y="16" width="476" height="20" rx="4" fill="#1e2229"/>
|
||||
<circle cx="50" cy="26" r="5" fill="#FF5F56"/>
|
||||
<circle cx="66" cy="26" r="5" fill="#FFBD2E"/>
|
||||
<circle cx="82" cy="26" r="5" fill="#27C93F"/>
|
||||
<rect x="180" y="21" width="180" height="10" rx="3" fill="#3a3f48"/>
|
||||
<rect x="100" y="22" width="28" height="8" rx="2" fill="#2e333c"/>
|
||||
<rect x="132" y="22" width="24" height="8" rx="2" fill="#2e333c"/>
|
||||
<rect x="160" y="22" width="16" height="8" rx="2" fill="#2e333c"/>
|
||||
|
||||
<!-- Left toolbar -->
|
||||
<rect x="32" y="36" width="22" height="184" fill="#181c22"/>
|
||||
<line x1="54" y1="36" x2="54" y2="220" stroke="#2a2e38" stroke-width="1"/>
|
||||
<rect x="36" y="46" width="14" height="14" rx="2" fill="#3a4152"/>
|
||||
<rect x="36" y="66" width="14" height="14" rx="2" fill="#3a4152"/>
|
||||
<rect x="36" y="86" width="14" height="14" rx="2" fill="#3a4152"/>
|
||||
<rect x="36" y="106" width="14" height="14" rx="2" fill="#3a4152"/>
|
||||
<rect x="36" y="126" width="14" height="14" rx="2" fill="#3a4152"/>
|
||||
<rect x="33" y="46" width="3" height="14" rx="1" fill="#D83302"/>
|
||||
|
||||
<!-- Preview pane -->
|
||||
<rect x="54" y="36" width="256" height="184" fill="#0a0b0e"/>
|
||||
<g clip-path="url(#ve-preview-clip)">
|
||||
<rect id="ve-scene-1" x="54" y="36" width="256" height="184" fill="url(#ve-sg-warm)" opacity="1"/>
|
||||
<rect id="ve-scene-2" x="54" y="36" width="256" height="184" fill="url(#ve-sg-cold)" opacity="0"/>
|
||||
<rect id="ve-scene-3" x="54" y="36" width="256" height="184" fill="url(#ve-sg-go)" opacity="0"/>
|
||||
<!-- Laptop in the preview video -->
|
||||
<rect x="102" y="52" width="156" height="106" rx="5" fill="#1c1c1c" stroke="#2e2e2e" stroke-width="1"/>
|
||||
<rect x="106" y="56" width="148" height="98" rx="3" fill="#111111"/>
|
||||
<rect id="ve-inner-screen" x="108" y="58" width="144" height="94" rx="1" fill="url(#ve-scr-warm)"/>
|
||||
<polygon points="108,58 160,58 108,88" fill="white" opacity="0.04"/>
|
||||
<rect x="108" y="58" width="144" height="94" fill="url(#ve-scanlines)" opacity="0.45"/>
|
||||
<circle cx="180" cy="55" r="2.5" fill="#232323" stroke="#2e2e2e" stroke-width="0.5"/>
|
||||
<rect x="92" y="158" width="176" height="17" rx="2" fill="#222222" stroke="#2d2d2d" stroke-width="0.5"/>
|
||||
<rect x="150" y="162" width="60" height="9" rx="3" fill="#2a2a2a" stroke="#353535" stroke-width="0.5"/>
|
||||
<rect x="97" y="159" width="166" height="1" fill="#2c2c2c"/>
|
||||
<line x1="54" y1="175" x2="310" y2="175" stroke="#1c1c1c" stroke-width="2"/>
|
||||
<rect x="54" y="175" width="256" height="45" fill="#040507" opacity="0.75"/>
|
||||
<rect x="54" y="36" width="256" height="184" fill="url(#ve-scanlines)" opacity="0.25"/>
|
||||
</g>
|
||||
<rect x="54" y="36" width="256" height="184" fill="none" stroke="#2a2e38" stroke-width="0.5"/>
|
||||
<line x1="310" y1="36" x2="310" y2="220" stroke="#2a2e38" stroke-width="1"/>
|
||||
|
||||
<!-- Inspector / Properties panel -->
|
||||
<rect x="310" y="36" width="198" height="184" fill="#141619"/>
|
||||
<rect x="310" y="36" width="198" height="20" fill="#1a1e25"/>
|
||||
<rect x="318" y="42" width="80" height="8" rx="2" fill="#3a3f48"/>
|
||||
<rect x="318" y="64" width="50" height="7" rx="2" fill="#2a2e38"/>
|
||||
<rect x="378" y="64" width="82" height="7" rx="2" fill="#333a45"/>
|
||||
<rect x="318" y="78" width="45" height="7" rx="2" fill="#2a2e38"/>
|
||||
<rect x="378" y="78" width="96" height="7" rx="2" fill="#333a45"/>
|
||||
<rect x="318" y="92" width="35" height="7" rx="2" fill="#2a2e38"/>
|
||||
<rect x="378" y="92" width="62" height="7" rx="2" fill="#333a45"/>
|
||||
<rect x="318" y="106" width="55" height="7" rx="2" fill="#2a2e38"/>
|
||||
<rect x="378" y="106" width="72" height="7" rx="2" fill="#333a45"/>
|
||||
<rect x="318" y="120" width="40" height="7" rx="2" fill="#2a2e38"/>
|
||||
<rect x="378" y="120" width="54" height="7" rx="2" fill="#333a45"/>
|
||||
<line x1="318" y1="136" x2="498" y2="136" stroke="#2a2e38" stroke-width="0.5"/>
|
||||
<rect x="310" y="136" width="198" height="12" fill="#1a1e25"/>
|
||||
<rect x="318" y="140" width="60" height="6" rx="2" fill="#2a2e38"/>
|
||||
<rect x="318" y="150" width="32" height="24" rx="1" fill="#C0390A" opacity="0.8"/>
|
||||
<rect x="354" y="150" width="32" height="24" rx="1" fill="#1a52c8" opacity="0.8"/>
|
||||
<rect x="390" y="150" width="32" height="24" rx="1" fill="#1a7a3d" opacity="0.8"/>
|
||||
<rect x="426" y="150" width="32" height="24" rx="1" fill="#c07800" opacity="0.8"/>
|
||||
<rect x="462" y="150" width="32" height="24" rx="1" fill="#7030d0" opacity="0.8"/>
|
||||
|
||||
<!-- Timeline section -->
|
||||
<rect x="32" y="220" width="476" height="68" fill="#161616"/>
|
||||
<line x1="32" y1="220" x2="508" y2="220" stroke="#2a2e38" stroke-width="1"/>
|
||||
<rect x="32" y="220" width="476" height="14" fill="#1a1e24"/>
|
||||
<rect x="32" y="220" width="72" height="68" fill="#1a1e24"/>
|
||||
<line x1="104" y1="220" x2="104" y2="288" stroke="#2a2e38" stroke-width="1"/>
|
||||
<!-- Ruler ticks and labels -->
|
||||
<line x1="104" y1="220" x2="104" y2="232" stroke="#4a4e58" stroke-width="1"/>
|
||||
<text x="105" y="231" fill="#565a64" font-size="8" font-family="monospace">0:00</text>
|
||||
<line x1="184" y1="220" x2="184" y2="232" stroke="#4a4e58" stroke-width="1"/>
|
||||
<text x="185" y="231" fill="#565a64" font-size="8" font-family="monospace">0:02</text>
|
||||
<line x1="264" y1="220" x2="264" y2="232" stroke="#4a4e58" stroke-width="1"/>
|
||||
<text x="265" y="231" fill="#565a64" font-size="8" font-family="monospace">0:04</text>
|
||||
<line x1="344" y1="220" x2="344" y2="232" stroke="#4a4e58" stroke-width="1"/>
|
||||
<text x="345" y="231" fill="#565a64" font-size="8" font-family="monospace">0:06</text>
|
||||
<line x1="424" y1="220" x2="424" y2="232" stroke="#4a4e58" stroke-width="1"/>
|
||||
<text x="425" y="231" fill="#565a64" font-size="8" font-family="monospace">0:08</text>
|
||||
<line x1="144" y1="220" x2="144" y2="226" stroke="#2e3240" stroke-width="0.5"/>
|
||||
<line x1="224" y1="220" x2="224" y2="226" stroke="#2e3240" stroke-width="0.5"/>
|
||||
<line x1="304" y1="220" x2="304" y2="226" stroke="#2e3240" stroke-width="0.5"/>
|
||||
<line x1="384" y1="220" x2="384" y2="226" stroke="#2e3240" stroke-width="0.5"/>
|
||||
<line x1="464" y1="220" x2="464" y2="226" stroke="#2e3240" stroke-width="0.5"/>
|
||||
<!-- Track label colour strips -->
|
||||
<rect x="36" y="237" width="56" height="14" rx="2" fill="#283040"/>
|
||||
<rect x="36" y="255" width="56" height="14" rx="2" fill="#203020"/>
|
||||
<rect x="36" y="273" width="56" height="14" rx="2" fill="#302818"/>
|
||||
|
||||
<!-- Track 1: VIDEO clips -->
|
||||
<rect x="104" y="234" width="404" height="18" fill="#1a1a22"/>
|
||||
<rect x="104" y="235" width="88" height="16" rx="2" fill="#2563EB"/>
|
||||
<rect x="104" y="235" width="88" height="5" rx="2" fill="rgba(255,255,255,0.07)"/>
|
||||
<rect x="196" y="235" width="66" height="16" rx="2" fill="#1D4ED8"/>
|
||||
<rect x="196" y="235" width="66" height="5" rx="2" fill="rgba(255,255,255,0.07)"/>
|
||||
<rect x="266" y="235" width="106" height="16" rx="2" fill="#2563EB"/>
|
||||
<rect x="266" y="235" width="106" height="5" rx="2" fill="rgba(255,255,255,0.07)"/>
|
||||
<rect x="376" y="235" width="88" height="16" rx="2" fill="#1E40AF"/>
|
||||
<rect x="376" y="235" width="88" height="5" rx="2" fill="rgba(255,255,255,0.07)"/>
|
||||
|
||||
<!-- Track 2: AUDIO/MUSIC clips -->
|
||||
<rect x="104" y="252" width="404" height="18" fill="#141c12"/>
|
||||
<rect x="104" y="253" width="178" height="16" rx="2" fill="#15803D"/>
|
||||
<rect x="104" y="253" width="178" height="5" rx="2" fill="rgba(255,255,255,0.06)"/>
|
||||
<!-- Inline waveform bars -->
|
||||
<rect x="108" y="259" width="2" height="5" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="112" y="257" width="2" height="8" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="116" y="260" width="2" height="4" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="120" y="257" width="2" height="7" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="124" y="260" width="2" height="5" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="128" y="257" width="2" height="7" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="132" y="259" width="2" height="5" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="136" y="257" width="2" height="8" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="140" y="260" width="2" height="4" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="144" y="258" width="2" height="7" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="148" y="261" width="2" height="4" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="152" y="258" width="2" height="6" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="156" y="259" width="2" height="5" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="160" y="257" width="2" height="7" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="164" y="259" width="2" height="5" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="168" y="257" width="2" height="8" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="172" y="261" width="2" height="4" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="176" y="259" width="2" height="5" fill="rgba(255,255,255,0.22)"/>
|
||||
<rect x="286" y="253" width="148" height="16" rx="2" fill="#166534"/>
|
||||
<rect x="286" y="253" width="148" height="5" rx="2" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="438" y="253" width="66" height="16" rx="2" fill="#15803D"/>
|
||||
<rect x="438" y="253" width="66" height="5" rx="2" fill="rgba(255,255,255,0.06)"/>
|
||||
|
||||
<!-- Track 3: GFX / TEXT clips -->
|
||||
<rect x="104" y="270" width="404" height="18" fill="#181710"/>
|
||||
<rect x="120" y="271" width="60" height="16" rx="2" fill="#D97706"/>
|
||||
<rect x="120" y="271" width="60" height="5" rx="2" fill="rgba(255,255,255,0.07)"/>
|
||||
<rect x="226" y="271" width="52" height="16" rx="2" fill="#B45309"/>
|
||||
<rect x="226" y="271" width="52" height="5" rx="2" fill="rgba(255,255,255,0.07)"/>
|
||||
<rect x="334" y="271" width="78" height="16" rx="2" fill="#D97706"/>
|
||||
<rect x="334" y="271" width="78" height="5" rx="2" fill="rgba(255,255,255,0.07)"/>
|
||||
<rect x="452" y="271" width="50" height="16" rx="2" fill="#B45309"/>
|
||||
<rect x="452" y="271" width="50" height="5" rx="2" fill="rgba(255,255,255,0.07)"/>
|
||||
|
||||
<!-- Animated playhead -->
|
||||
<polygon id="ve-playhead-head" points="0,-8 -6,-2 6,-2" transform="translate(104,234)" fill="#FF4500"/>
|
||||
<rect id="ve-playhead-line" x="103" y="220" width="2" height="68" fill="#FF4500" opacity="0.92"/>
|
||||
<!-- Timecode display -->
|
||||
<text id="ve-timecode" x="36" y="230" fill="#8a8e98" font-size="8" font-family="monospace">0:00</text>
|
||||
</svg></div>
|
||||
HTML;
|
||||
}
|
||||
|
||||
function oribi_render_platform_row( $a ) {
|
||||
$rev = ! empty( $a['reversed'] ) ? ' reverse' : '';
|
||||
$img_id = ! empty( $a['imgId'] ) ? intval( $a['imgId'] ) : 0;
|
||||
@@ -1364,7 +1569,7 @@ function oribi_render_platform_row( $a ) {
|
||||
<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts">
|
||||
<defs>
|
||||
<linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#004225" stop-opacity="1"/>
|
||||
<stop offset="0%" stop-color="#D83302" stop-opacity="1"/>
|
||||
<stop offset="100%" stop-color="#4CAF50" stop-opacity=".8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
@@ -1442,7 +1647,7 @@ function oribi_render_platform_row( $a ) {
|
||||
<text class="ct" x="100" y="0" font-size="14" font-weight="600" text-anchor="middle" fill="#333">Distribution</text>
|
||||
<g transform="translate(100,90)">
|
||||
<g class="pie-segment" transform="rotate(0)">
|
||||
<path d="M0,0 L0,-55 A55,55 0 0,1 38.89,-38.89 Z" fill="#004225" opacity=".9"/>
|
||||
<path d="M0,0 L0,-55 A55,55 0 0,1 38.89,-38.89 Z" fill="#D83302" opacity=".9"/>
|
||||
</g>
|
||||
<g class="pie-segment" transform="rotate(90)">
|
||||
<path d="M0,0 L0,-55 A55,55 0 0,1 38.89,-38.89 Z" fill="#4CAF50" opacity=".8"/>
|
||||
@@ -1457,7 +1662,7 @@ function oribi_render_platform_row( $a ) {
|
||||
<text id="pie-center-text" x="0" y="5" text-anchor="middle" font-size="13" font-weight="600" fill="#333">100%</text>
|
||||
</g>
|
||||
<g transform="translate(30,170)">
|
||||
<rect x="0" y="0" width="8" height="8" fill="#004225"/>
|
||||
<rect x="0" y="0" width="8" height="8" fill="#D83302"/>
|
||||
<text class="cl" x="12" y="8" font-size="11" fill="#666">Service A</text>
|
||||
<rect x="0" y="15" width="8" height="8" fill="#4CAF50"/>
|
||||
<text class="cl" x="12" y="23" font-size="11" fill="#666">Service B</text>
|
||||
@@ -1481,13 +1686,14 @@ function oribi_render_platform_row( $a ) {
|
||||
}
|
||||
$visual_cls = 'platform-visual has-img';
|
||||
} elseif ( ! empty( $a['deviceAnim'] ) ) {
|
||||
$da_screen = '<div class="da-screen"><div class="da-promo"><div class="da-promo__top"><span class="da-promo__dot"></span><span class="da-promo__brand"></span></div><div class="da-promo__hero"></div><div class="da-promo__row"><span class="da-promo__line da-promo__line--lg"></span><span class="da-promo__line da-promo__line--sm"></span></div><div class="da-promo__row"><span class="da-promo__line da-promo__line--md"></span><span class="da-promo__line da-promo__line--xs"></span></div><div class="da-promo__ticker"><span class="da-promo__chip"></span><span class="da-promo__chip"></span><span class="da-promo__chip"></span></div></div></div>';
|
||||
$da = '<div class="da-stage" aria-hidden="true">';
|
||||
$da .= '<div class="da-device da-tablet"><div class="da-body"><div class="da-screen"></div></div><span class="da-label">Tablet</span></div>';
|
||||
$da .= '<div class="da-device da-monitor-sm"><div class="da-body"><div class="da-screen"></div></div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Small Monitor</span></div>';
|
||||
$da .= '<div class="da-device da-monitor-lg"><div class="da-body"><div class="da-screen"></div></div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Large Monitor</span></div>';
|
||||
$da .= '<div class="da-device da-tv"><div class="da-body"><div class="da-screen"></div></div><div class="da-feet"><div class="da-foot"></div><div class="da-foot"></div></div><span class="da-label">TV</span></div>';
|
||||
$da .= '<div class="da-device da-projector"><div class="da-proj-layout"><div class="da-proj-body"><div class="da-lens"></div></div><div class="da-beam"></div><div class="da-proj-screen"><div class="da-screen"></div></div></div><span class="da-label">Projector</span></div>';
|
||||
$da .= '<div class="da-device da-vwall"><div class="da-vwall-grid"><div class="da-panel"><div class="da-screen"></div></div><div class="da-panel"><div class="da-screen"></div></div><div class="da-panel"><div class="da-screen"></div></div><div class="da-panel"><div class="da-screen"></div></div></div><span class="da-label">Video Wall</span></div>';
|
||||
$da .= '<div class="da-device da-tablet"><div class="da-body">' . $da_screen . '</div><span class="da-label">Tablet</span></div>';
|
||||
$da .= '<div class="da-device da-monitor-sm"><div class="da-body">' . $da_screen . '</div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Small Monitor</span></div>';
|
||||
$da .= '<div class="da-device da-monitor-lg"><div class="da-body">' . $da_screen . '</div><div class="da-stand"><div class="da-stem"></div><div class="da-base"></div></div><span class="da-label">Large Monitor</span></div>';
|
||||
$da .= '<div class="da-device da-tv"><div class="da-body">' . $da_screen . '</div><div class="da-feet"><div class="da-foot"></div><div class="da-foot"></div></div><span class="da-label">TV</span></div>';
|
||||
$da .= '<div class="da-device da-projector"><div class="da-proj-layout"><div class="da-proj-body"><div class="da-lens"></div></div><div class="da-beam"></div><div class="da-proj-screen">' . $da_screen . '</div></div><span class="da-label">Projector</span></div>';
|
||||
$da .= '<div class="da-device da-vwall"><div class="da-vwall-grid"><div class="da-panel">' . $da_screen . '</div><div class="da-panel">' . $da_screen . '</div><div class="da-panel">' . $da_screen . '</div><div class="da-panel">' . $da_screen . '</div></div><span class="da-label">Video Wall</span></div>';
|
||||
$da .= '</div>';
|
||||
$visual_html = $da;
|
||||
$visual_cls = 'platform-visual has-anim';
|
||||
@@ -1495,7 +1701,59 @@ function oribi_render_platform_row( $a ) {
|
||||
$ts = '<div class="ts-stage" data-tv-stick-anim aria-hidden="true">';
|
||||
$ts .= '<div class="ts-tv">';
|
||||
$ts .= '<div class="ts-tv__body">';
|
||||
$ts .= '<div class="ts-tv__screen"></div>';
|
||||
$ts .= '<div class="ts-tv__screen">';
|
||||
$ts .= '<div class="ts-slides">';
|
||||
|
||||
// Slide 1 — Menu Board
|
||||
$ts .= '<div class="ts-slide ts-slide--menu">';
|
||||
$ts .= '<div class="ts-menu">';
|
||||
$ts .= '<div class="ts-menu__header"><div class="ts-menu__logo"></div><div class="ts-menu__title"></div></div>';
|
||||
$ts .= '<div class="ts-menu__cols">';
|
||||
$ts .= '<div class="ts-menu__col">';
|
||||
$ts .= '<div class="ts-menu__cat"></div>';
|
||||
$ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
|
||||
$ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
|
||||
$ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
|
||||
$ts .= '</div>';
|
||||
$ts .= '<div class="ts-menu__col">';
|
||||
$ts .= '<div class="ts-menu__cat"></div>';
|
||||
$ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
|
||||
$ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
|
||||
$ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
|
||||
$ts .= '</div>';
|
||||
$ts .= '</div>';
|
||||
$ts .= '</div>';
|
||||
$ts .= '</div>';
|
||||
|
||||
// Slide 2 — Wayfinding Sign
|
||||
$ts .= '<div class="ts-slide ts-slide--wayfind">';
|
||||
$ts .= '<div class="ts-wf">';
|
||||
$ts .= '<div class="ts-wf__header"><div class="ts-wf__building"></div></div>';
|
||||
$ts .= '<div class="ts-wf__rows">';
|
||||
$ts .= '<div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--left"></span><span class="ts-wf__label ts-wf__label--w1"></span><span class="ts-wf__floor"></span></div>';
|
||||
$ts .= '<div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--right"></span><span class="ts-wf__label ts-wf__label--w2"></span><span class="ts-wf__floor"></span></div>';
|
||||
$ts .= '<div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--up"></span><span class="ts-wf__label ts-wf__label--w3"></span><span class="ts-wf__floor"></span></div>';
|
||||
$ts .= '<div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--left"></span><span class="ts-wf__label ts-wf__label--w4"></span><span class="ts-wf__floor"></span></div>';
|
||||
$ts .= '</div>';
|
||||
$ts .= '</div>';
|
||||
$ts .= '</div>';
|
||||
|
||||
// Slide 3 — Schedule / Timetable
|
||||
$ts .= '<div class="ts-slide ts-slide--sched">';
|
||||
$ts .= '<div class="ts-sched">';
|
||||
$ts .= '<div class="ts-sched__header"><div class="ts-sched__title"></div><div class="ts-sched__date"></div></div>';
|
||||
$ts .= '<div class="ts-sched__table">';
|
||||
$ts .= '<div class="ts-sched__hrow"><span class="ts-sched__hcell"></span><span class="ts-sched__hcell"></span><span class="ts-sched__hcell"></span><span class="ts-sched__hcell"></span></div>';
|
||||
$ts .= '<div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__event ts-sched__event--a"></span><span class="ts-sched__cell"></span><span class="ts-sched__cell"></span></div>';
|
||||
$ts .= '<div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__cell"></span><span class="ts-sched__event ts-sched__event--b"></span><span class="ts-sched__cell"></span></div>';
|
||||
$ts .= '<div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__cell"></span><span class="ts-sched__cell"></span><span class="ts-sched__event ts-sched__event--c"></span></div>';
|
||||
$ts .= '<div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__event ts-sched__event--a"></span><span class="ts-sched__event ts-sched__event--b"></span><span class="ts-sched__cell"></span></div>';
|
||||
$ts .= '</div>';
|
||||
$ts .= '</div>';
|
||||
$ts .= '</div>';
|
||||
|
||||
$ts .= '</div>'; // ts-slides
|
||||
$ts .= '</div>'; // ts-tv__screen
|
||||
$ts .= '<div class="ts-tv__port"></div>';
|
||||
$ts .= '</div>';
|
||||
$ts .= '<div class="ts-tv__feet"><div class="ts-tv__foot"></div><div class="ts-tv__foot"></div></div>';
|
||||
@@ -1509,59 +1767,210 @@ function oribi_render_platform_row( $a ) {
|
||||
$ts .= '</div>';
|
||||
$visual_html = $ts;
|
||||
$visual_cls = 'platform-visual has-tv-stick';
|
||||
} elseif ( ! empty( $a['neverGoesDark'] ) ) {
|
||||
/* ── Never Goes Dark: player + TV + cloud connection/break animation ── */
|
||||
$ngd = '<div class="ngd-stage" aria-hidden="true">';
|
||||
|
||||
/* TV */
|
||||
$ngd .= '<div class="ngd-tv">';
|
||||
$ngd .= '<div class="ngd-tv__body">';
|
||||
$ngd .= '<div class="ngd-tv__screen">';
|
||||
$ngd .= '<div class="ngd-menu">';
|
||||
$ngd .= '<div class="ngd-menu__hd">';
|
||||
$ngd .= '<div class="ngd-menu__logo"></div>';
|
||||
$ngd .= '<div class="ngd-menu__ttl"></div>';
|
||||
$ngd .= '</div>';
|
||||
$ngd .= '<div class="ngd-menu__cols">';
|
||||
$ngd .= '<div class="ngd-menu__col">';
|
||||
$ngd .= '<div class="ngd-menu__cat"></div>';
|
||||
$ngd .= '<div class="ngd-menu__row"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
|
||||
$ngd .= '<div class="ngd-menu__row ngd-menu__row--hl"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
|
||||
$ngd .= '<div class="ngd-menu__row"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
|
||||
$ngd .= '</div>';
|
||||
$ngd .= '<div class="ngd-menu__col">';
|
||||
$ngd .= '<div class="ngd-menu__cat"></div>';
|
||||
$ngd .= '<div class="ngd-menu__row"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
|
||||
$ngd .= '<div class="ngd-menu__row"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
|
||||
$ngd .= '<div class="ngd-menu__row ngd-menu__row--hl"><span class="ngd-menu__name"></span><span class="ngd-menu__price"></span></div>';
|
||||
$ngd .= '</div>';
|
||||
$ngd .= '</div>'; /* cols */
|
||||
$ngd .= '<div class="ngd-menu__ticker"><div class="ngd-menu__ticker-inner"></div></div>';
|
||||
$ngd .= '</div>'; /* ngd-menu */
|
||||
$ngd .= '</div>'; /* ngd-tv__screen */
|
||||
$ngd .= '<div class="ngd-tv__port"></div>';
|
||||
$ngd .= '</div>'; /* ngd-tv__body */
|
||||
$ngd .= '<div class="ngd-tv__feet"><div class="ngd-tv__foot"></div><div class="ngd-tv__foot"></div></div>';
|
||||
$ngd .= '</div>'; /* ngd-tv */
|
||||
|
||||
/* Player device (stick style, plugged into TV right-side HDMI port) */
|
||||
$ngd .= '<div class="ngd-player">';
|
||||
$ngd .= '<div class="ngd-player__connector"></div>';
|
||||
$ngd .= '<div class="ngd-player__body">';
|
||||
$ngd .= '<div class="ngd-player__led"></div>';
|
||||
$ngd .= '</div>';
|
||||
$ngd .= '<div class="ngd-player__check">';
|
||||
$ngd .= '<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">';
|
||||
$ngd .= '<circle cx="11" cy="11" r="10" stroke="#4CAF50" stroke-width="1.5"/>';
|
||||
$ngd .= '<polyline points="6,11 9.5,14.5 16,7.5" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>';
|
||||
$ngd .= '</svg>';
|
||||
$ngd .= '</div>';
|
||||
$ngd .= '</div>'; /* ngd-player */
|
||||
|
||||
/* Signal wrap: vertical line connecting player to globe above */
|
||||
$ngd .= '<div class="ngd-signal-wrap">';
|
||||
$ngd .= '<div class="ngd-cloud">';
|
||||
$ngd .= '<svg class="ngd-cloud__svg" viewBox="0 0 64 46" fill="none" xmlns="http://www.w3.org/2000/svg">';
|
||||
$ngd .= '<circle class="ngd-cloud__path" cx="32" cy="23" r="14" stroke-width="2.2" fill="none"/>';
|
||||
$ngd .= '<path class="ngd-cloud__path" d="M18.5 23C23 20 41 20 45.5 23" stroke-width="1.9" stroke-linecap="round" fill="none"/>';
|
||||
$ngd .= '<path class="ngd-cloud__path" d="M20.5 29C25.5 31 38.5 31 43.5 29" stroke-width="1.9" stroke-linecap="round" fill="none"/>';
|
||||
$ngd .= '<path class="ngd-cloud__path" d="M24.5 12C21.5 16.5 21.5 29.5 24.5 34" stroke-width="1.9" stroke-linecap="round" fill="none"/>';
|
||||
$ngd .= '<path class="ngd-cloud__path" d="M39.5 12C42.5 16.5 42.5 29.5 39.5 34" stroke-width="1.9" stroke-linecap="round" fill="none"/>';
|
||||
$ngd .= '</svg>';
|
||||
$ngd .= '</div>';
|
||||
$ngd .= '<div class="ngd-signal-line">';
|
||||
$ngd .= '<div class="ngd-signal__dots">';
|
||||
$ngd .= '<div class="ngd-signal__dot ngd-signal__dot--1"></div>';
|
||||
$ngd .= '<div class="ngd-signal__dot ngd-signal__dot--2"></div>';
|
||||
$ngd .= '<div class="ngd-signal__dot ngd-signal__dot--3"></div>';
|
||||
$ngd .= '</div>';
|
||||
$ngd .= '<div class="ngd-signal__break">';
|
||||
$ngd .= '<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">';
|
||||
$ngd .= '<circle cx="9" cy="9" r="8" fill="rgba(239,68,68,0.12)" stroke="#ef4444" stroke-width="1.2"/>';
|
||||
$ngd .= '<line x1="5.5" y1="5.5" x2="12.5" y2="12.5" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>';
|
||||
$ngd .= '<line x1="12.5" y1="5.5" x2="5.5" y2="12.5" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>';
|
||||
$ngd .= '</svg>';
|
||||
$ngd .= '</div>';
|
||||
$ngd .= '</div>'; /* ngd-signal-line */
|
||||
$ngd .= '</div>'; /* ngd-signal-wrap */
|
||||
|
||||
$ngd .= '</div>'; /* ngd-stage */
|
||||
|
||||
$visual_html = $ngd;
|
||||
$visual_cls = 'platform-visual has-ngd';
|
||||
} elseif ( ! empty( $a['brandedAnim'] ) ) {
|
||||
/* ── Custom Display Solutions: branded screens cascade animation ── */
|
||||
$bd = '<div class="bd-stage" aria-hidden="true">';
|
||||
|
||||
/* ── Screen 1: Tablet (portrait kiosk) ── */
|
||||
$bd .= '<div class="bd-device bd-device--tablet">';
|
||||
$bd .= '<span class="bd-device__label">Kiosk</span>';
|
||||
$bd .= '<div class="bd-device__body">';
|
||||
$bd .= '<div class="bd-device__screen">';
|
||||
$bd .= '<div class="bd-splash">';
|
||||
$bd .= '<div class="bd-splash__logo"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-ui">';
|
||||
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
|
||||
$bd .= '<div class="bd-ui__content">';
|
||||
$bd .= '<div class="bd-promo bd-promo--welcome">';
|
||||
$bd .= '<div class="bd-promo__hero"></div>';
|
||||
$bd .= '<div class="bd-promo__heading"></div>';
|
||||
$bd .= '<div class="bd-promo__text"></div>';
|
||||
$bd .= '<div class="bd-promo__btn"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
|
||||
/* ── Screen 2: Wide wall-mount (landscape) ── */
|
||||
$bd .= '<div class="bd-device bd-device--wall">';
|
||||
$bd .= '<span class="bd-device__label">Wall Display</span>';
|
||||
$bd .= '<div class="bd-device__body">';
|
||||
$bd .= '<div class="bd-device__screen">';
|
||||
$bd .= '<div class="bd-splash">';
|
||||
$bd .= '<div class="bd-splash__logo"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-ui">';
|
||||
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
|
||||
$bd .= '<div class="bd-ui__content">';
|
||||
$bd .= '<div class="bd-promo bd-promo--sale">';
|
||||
$bd .= '<div class="bd-promo__cols">';
|
||||
$bd .= '<div class="bd-promo__visual"></div>';
|
||||
$bd .= '<div class="bd-promo__info">';
|
||||
$bd .= '<div class="bd-promo__badge"></div>';
|
||||
$bd .= '<div class="bd-promo__heading"></div>';
|
||||
$bd .= '<div class="bd-promo__text"></div>';
|
||||
$bd .= '<div class="bd-promo__text bd-promo__text--short"></div>';
|
||||
$bd .= '<div class="bd-promo__price"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-mount"></div>';
|
||||
$bd .= '</div>';
|
||||
|
||||
/* ── Screen 3: Interactive tablet on table ── */
|
||||
$bd .= '<div class="bd-device bd-device--interactive">';
|
||||
$bd .= '<span class="bd-device__label">Interactive</span>';
|
||||
$bd .= '<div class="bd-device__body">';
|
||||
$bd .= '<div class="bd-device__screen">';
|
||||
$bd .= '<div class="bd-splash">';
|
||||
$bd .= '<div class="bd-splash__logo"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-ui">';
|
||||
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
|
||||
$bd .= '<div class="bd-ui__content">';
|
||||
$bd .= '<div class="bd-promo bd-promo--menu">';
|
||||
$bd .= '<div class="bd-promo__heading"></div>';
|
||||
$bd .= '<div class="bd-promo__grid">';
|
||||
$bd .= '<div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div>';
|
||||
$bd .= '<div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div>';
|
||||
$bd .= '<div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div>';
|
||||
$bd .= '<div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-table"></div>';
|
||||
$bd .= '</div>';
|
||||
|
||||
$bd .= '</div>'; /* bd-stage */
|
||||
$visual_html = $bd;
|
||||
$visual_cls = 'platform-visual has-branded';
|
||||
} elseif ( ! empty( $a['cameraAnim'] ) ) {
|
||||
$ca = '<div class="cam-stage" aria-hidden="true">';
|
||||
$visual_html = oribi_render_camera_animation();
|
||||
$visual_cls = 'platform-visual has-video-editor';
|
||||
|
||||
// ── 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
|
||||
/* ── Gallery TV Slideshow ───────────────────────────────── */
|
||||
} elseif ( ! empty( $a['galleryIds'] ) && is_array( $a['galleryIds'] ) && count( $a['galleryIds'] ) > 0 ) {
|
||||
$slides = '';
|
||||
$count = 0;
|
||||
foreach ( $a['galleryIds'] as $gid ) {
|
||||
$gid = intval( $gid );
|
||||
if ( ! $gid ) continue;
|
||||
$url = wp_get_attachment_url( $gid );
|
||||
$alt = get_post_meta( $gid, '_wp_attachment_image_alt', true );
|
||||
if ( ! $url ) continue;
|
||||
$active = $count === 0 ? ' is-active' : '';
|
||||
$slides .= '<div class="gtv-slide' . $active . '">';
|
||||
$slides .= '<img src="' . esc_url( $url ) . '" alt="' . esc_attr( $alt ) . '" loading="lazy" />';
|
||||
$slides .= '</div>';
|
||||
$count++;
|
||||
}
|
||||
if ( $count > 0 ) {
|
||||
$visual_html = '<div class="gtv-stage" data-gtv-slideshow aria-hidden="true">';
|
||||
$visual_html .= '<div class="gtv-tv">';
|
||||
$visual_html .= '<div class="gtv-tv__body">';
|
||||
$visual_html .= '<div class="gtv-tv__screen">';
|
||||
$visual_html .= '<div class="gtv-slides">' . $slides . '</div>';
|
||||
$visual_html .= '</div>'; // screen
|
||||
$visual_html .= '</div>'; // body
|
||||
$visual_html .= '<div class="gtv-tv__feet"><div class="gtv-tv__foot"></div><div class="gtv-tv__foot"></div></div>';
|
||||
$visual_html .= '</div>'; // tv
|
||||
$visual_html .= '</div>'; // stage
|
||||
$visual_cls = 'platform-visual has-gallery-tv';
|
||||
} else {
|
||||
$visual_html = oribi_render_icon( $a['visual'] ?? '' );
|
||||
$visual_cls = 'platform-visual';
|
||||
}
|
||||
|
||||
// ── 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_cls = 'platform-visual has-camera';
|
||||
} else {
|
||||
$visual_html = oribi_render_icon( $a['visual'] ?? '' );
|
||||
$visual_cls = 'platform-visual';
|
||||
@@ -1580,7 +1989,6 @@ function oribi_render_platform_row( $a ) {
|
||||
</div>
|
||||
<?php return ob_get_clean();
|
||||
}
|
||||
|
||||
/* ── Trust Section (parent - wraps child trust-item blocks) ────────────────── */
|
||||
function oribi_render_trust_section( $a, $content ) {
|
||||
ob_start(); ?>
|
||||
@@ -1772,3 +2180,107 @@ function oribi_render_page_hero_animated( $a ) {
|
||||
</section>
|
||||
<?php return ob_get_clean();
|
||||
}
|
||||
|
||||
/* ── Use Cases Showcase ────────────────────────────────────────────────── */
|
||||
function oribi_uc_anim_inner( $mod ) {
|
||||
switch ( $mod ) {
|
||||
case 'menu':
|
||||
return '
|
||||
<div class="uc-inner uc-inner--menu" aria-hidden="true">
|
||||
<div class="uc-menu-header"></div>
|
||||
<div class="uc-menu-row"><span class="uc-menu-name"></span><span class="uc-menu-price"></span></div>
|
||||
<div class="uc-menu-row uc-menu-row--highlight"><span class="uc-menu-name"></span><span class="uc-menu-price"></span></div>
|
||||
<div class="uc-menu-row"><span class="uc-menu-name uc-menu-name--sm"></span><span class="uc-menu-price"></span></div>
|
||||
<div class="uc-menu-row"><span class="uc-menu-name"></span><span class="uc-menu-price"></span></div>
|
||||
<div class="uc-menu-divider"></div>
|
||||
<div class="uc-menu-row"><span class="uc-menu-name uc-menu-name--sm"></span><span class="uc-menu-price"></span></div>
|
||||
</div>';
|
||||
case 'event':
|
||||
return '
|
||||
<div class="uc-inner uc-inner--event" aria-hidden="true">
|
||||
<div class="uc-event-cursor"></div>
|
||||
<div class="uc-event-header">Schedule</div>
|
||||
<div class="uc-event-row">
|
||||
<div class="uc-event-time">9:00</div>
|
||||
<div class="uc-event-title uc-event-title--active">Keynote Speech</div>
|
||||
</div>
|
||||
<div class="uc-event-row">
|
||||
<div class="uc-event-time">10:30</div>
|
||||
<div class="uc-event-title">Panel Discussion</div>
|
||||
</div>
|
||||
<div class="uc-event-row">
|
||||
<div class="uc-event-time">11:45</div>
|
||||
<div class="uc-event-title uc-event-title--accent">Coffee Break</div>
|
||||
</div>
|
||||
<div class="uc-event-row">
|
||||
<div class="uc-event-time">12:30</div>
|
||||
<div class="uc-event-title">Networking Lunch</div>
|
||||
</div>
|
||||
</div>';
|
||||
case 'dashboard':
|
||||
return '
|
||||
<div class="uc-inner uc-inner--dashboard" aria-hidden="true">
|
||||
<div class="uc-db-bars">
|
||||
<div class="uc-db-bar uc-db-bar--1"></div>
|
||||
<div class="uc-db-bar uc-db-bar--2"></div>
|
||||
<div class="uc-db-bar uc-db-bar--3"></div>
|
||||
<div class="uc-db-bar uc-db-bar--4"></div>
|
||||
</div>
|
||||
<div class="uc-db-baseline"></div>
|
||||
<div class="uc-db-labels">
|
||||
<div class="uc-db-lbl"></div>
|
||||
<div class="uc-db-lbl"></div>
|
||||
<div class="uc-db-lbl"></div>
|
||||
<div class="uc-db-lbl"></div>
|
||||
</div>
|
||||
</div>';
|
||||
case 'wayfinding':
|
||||
return '
|
||||
<div class="uc-inner uc-inner--wayfinding" aria-hidden="true">
|
||||
<div class="uc-wf-corridor uc-wf-corridor--h"></div>
|
||||
<div class="uc-wf-corridor uc-wf-corridor--v"></div>
|
||||
<div class="uc-wf-room uc-wf-room--1"></div>
|
||||
<div class="uc-wf-room uc-wf-room--2"></div>
|
||||
<div class="uc-wf-room uc-wf-room--3"></div>
|
||||
<div class="uc-wf-dot"></div>
|
||||
<div class="uc-wf-arrow"></div>
|
||||
</div>';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function oribi_render_use_cases( $a ) {
|
||||
$cases = [
|
||||
[ 'title' => $a['case1Title'], 'desc' => $a['case1Desc'], 'mod' => 'menu' ],
|
||||
[ 'title' => $a['case2Title'], 'desc' => $a['case2Desc'], 'mod' => 'event' ],
|
||||
[ 'title' => $a['case3Title'], 'desc' => $a['case3Desc'], 'mod' => 'dashboard' ],
|
||||
[ 'title' => $a['case4Title'], 'desc' => $a['case4Desc'], 'mod' => 'wayfinding' ],
|
||||
];
|
||||
ob_start(); ?>
|
||||
<section class="section use-cases-section">
|
||||
<div class="container">
|
||||
<?php if ( $a['label'] || $a['heading'] || $a['lead'] ) : ?>
|
||||
<div class="section-header">
|
||||
<?php if ( $a['label'] ) : ?><span class="section-label"><?php echo esc_html( $a['label'] ); ?></span><?php endif; ?>
|
||||
<?php if ( $a['heading'] ) : ?><h2><?php echo wp_kses_post( $a['heading'] ); ?></h2><?php endif; ?>
|
||||
<?php if ( $a['lead'] ) : ?><p class="lead"><?php echo wp_kses_post( $a['lead'] ); ?></p><?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="uc-track">
|
||||
<?php foreach ( $cases as $c ) : ?>
|
||||
<div class="uc-item">
|
||||
<div class="uc-circle uc-anim--<?php echo esc_attr( $c['mod'] ); ?>">
|
||||
<?php echo oribi_uc_anim_inner( $c['mod'] ); ?>
|
||||
</div>
|
||||
<div class="uc-item-body">
|
||||
<div class="uc-item-title"><?php echo esc_html( $c['title'] ); ?></div>
|
||||
<?php if ( $c['desc'] ) : ?><p class="uc-item-desc"><?php echo esc_html( $c['desc'] ); ?></p><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php return ob_get_clean();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user