From f150e67e747c3eb36e57d5fe8d30710b64b534e5 Mon Sep 17 00:00:00 2001 From: Matt Batchelder Date: Sun, 5 Apr 2026 20:26:46 -0400 Subject: [PATCH] Add demo animation support and enhance visual rendering in blocks - Introduced `demoAnim` property in editor and PHP block definitions. - Updated UI to include a new toggle for Command Center demo animation. - Enhanced visual rendering logic to accommodate demo animation alongside existing animations. - Added HTML structure for Command Center demo animation in the rendering function. - Implemented additional scenes for partner management, co-marketing, training, and API integration. --- pages/partners.php | 24 +- pages/pricing.php | 2 +- theme/assets/css/main.css | 1426 ++++++++++++++++++++++++++++++++++++- theme/blocks/editor.js | 6 +- theme/blocks/index.php | 363 +++++++++- 5 files changed, 1791 insertions(+), 30 deletions(-) diff --git a/pages/partners.php b/pages/partners.php index c77e5e0..3805e23 100644 --- a/pages/partners.php +++ b/pages/partners.php @@ -10,24 +10,24 @@ - - - + + + - - - - - - + + + + + + - - - + + + diff --git a/pages/pricing.php b/pages/pricing.php index 8ed0c98..482b794 100644 --- a/pages/pricing.php +++ b/pages/pricing.php @@ -34,7 +34,7 @@ return <<<'ORIBI_SYNC_CONTENT' - + ORIBI_SYNC_CONTENT; diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 6ccbe1d..4b612df 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -3917,7 +3917,7 @@ p:last-child { margin-bottom: 0; } } .pkg-plus { - font-size: 2rem; + font-size: 3.5rem; font-weight: 300; color: var(--color-primary); line-height: 1; @@ -3932,11 +3932,11 @@ p:last-child { margin-bottom: 0; } } .pkg-player__body { - width: 58px; - height: 38px; + width: 72px; + height: 26px; background: #1c1c1e; border: 2px solid #111; - border-radius: 7px; + border-radius: 5px; position: relative; display: flex; align-items: center; @@ -3967,7 +3967,7 @@ p:last-child { margin-bottom: 0; } border-radius: 50%; background: #4CAF50; position: absolute; - bottom: 6px; + bottom: 4px; right: 7px; box-shadow: 0 0 5px #4CAF50; animation: pkg-led-blink 2.4s ease-in-out infinite; @@ -4056,6 +4056,286 @@ p:last-child { margin-bottom: 0; } } +/* ── Command Center Demo Animation ──────────────────────────── */ +.about-intro-visual.has-demo-anim { + background: none; + box-shadow: none; + aspect-ratio: unset; + font-size: inherit; + color: inherit; +} + +.cc-stage { + width: 100%; + max-width: 400px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + padding: 1.5rem 0; +} + +.cc-monitor { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.cc-monitor__screen { + width: 100%; + height: 250px; + background: #0d1117; + border: 3px solid #1c1c1e; + border-radius: 8px 8px 0 0; + overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,.45); +} + +.cc-monitor__stand { + display: flex; + flex-direction: column; + align-items: center; +} + +.cc-monitor__stem { + width: 5px; + height: 22px; + background: #1c1c1e; +} + +.cc-monitor__base { + width: 88px; + height: 10px; + background: #1c1c1e; + border-radius: 0 0 5px 5px; +} + +/* App chrome */ +.cc-app { + display: flex; + height: 100%; +} + +/* Sidebar */ +.cc-app__nav { + width: 38px; + background: #161b22; + border-right: 1px solid rgba(255,255,255,.06); + padding: 8px 6px; + display: flex; + flex-direction: column; + gap: 5px; + flex-shrink: 0; +} + +.cc-nav__logo { + width: 24px; + height: 24px; + background: var(--color-primary); + border-radius: 5px; + margin-bottom: 8px; + flex-shrink: 0; + animation: cc-logo-glow 3s ease-in-out infinite; +} + +@keyframes cc-logo-glow { + 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); } + 50% { box-shadow: 0 0 8px 2px rgba(var(--color-primary-rgb), 0.4); } +} + +.cc-nav__item { + width: 24px; + height: 7px; + background: rgba(255,255,255,.1); + border-radius: 3px; +} + +.cc-nav__item--active { + background: rgba(var(--color-primary-rgb), 0.55); +} + +/* Main panel */ +.cc-app__panel { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; +} + +/* Top app bar */ +.cc-app__bar { + height: 28px; + background: #161b22; + border-bottom: 1px solid rgba(255,255,255,.06); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 10px; + flex-shrink: 0; +} + +.cc-bar__title { + width: 90px; + height: 7px; + background: rgba(255,255,255,.18); + border-radius: 3px; +} + +.cc-bar__live { + display: flex; + align-items: center; + gap: 4px; +} + +.cc-live__dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: #4CAF50; + box-shadow: 0 0 6px #4CAF50; + animation: cc-live-pulse 2s ease-in-out infinite; +} + +.cc-live__label { + width: 24px; + height: 5px; + background: rgba(76,175,80,.35); + border-radius: 2px; +} + +@keyframes cc-live-pulse { + 0%, 100% { opacity: 1; box-shadow: 0 0 6px #4CAF50; } + 50% { opacity: 0.35; box-shadow: none; } +} + +/* Schedule grid */ +.cc-schedule { + flex: 1; + padding: 8px 10px; + display: flex; + flex-direction: column; + gap: 6px; +} + +.cc-sched__row { + display: flex; + align-items: center; + gap: 6px; + height: 30px; +} + +.cc-sched__label { + width: 22px; + height: 6px; + background: rgba(255,255,255,.1); + border-radius: 2px; + flex-shrink: 0; +} + +.cc-sched__track { + flex: 1; + display: flex; + gap: 4px; + align-items: center; + height: 100%; +} + +/* Content blocks */ +.cc-block { + height: 22px; + border-radius: 4px; + flex-shrink: 0; +} + +.cc-block--a { + width: 38%; + background: rgba(var(--color-primary-rgb), 0.65); + animation: cc-block-pulse 5s ease-in-out infinite; +} + +.cc-block--b { + width: 28%; + background: rgba(74,222,128,.45); + animation: cc-block-pulse 5s ease-in-out 1.2s infinite; +} + +.cc-block--c { + width: 52%; + background: rgba(96,165,250,.45); + animation: cc-block-pulse 5s ease-in-out 2.4s infinite; +} + +.cc-block--d { + width: 34%; + background: rgba(251,191,36,.4); + animation: cc-block-pulse 5s ease-in-out 3.6s infinite; +} + +.cc-block--gap { + flex: 1; + background: none; +} + +.cc-block--sm { + height: 16px; +} + +@keyframes cc-block-pulse { + 0%, 100% { opacity: 1; } + 40%, 60% { opacity: 0.5; } +} + +/* Content library thumbnails */ +.cc-library { + border-top: 1px solid rgba(255,255,255,.06); + padding: 6px 10px; + display: flex; + gap: 5px; + flex-shrink: 0; +} + +.cc-lib__item { + flex: 1; + height: 32px; + background: rgba(255,255,255,.07); + border-radius: 4px; + position: relative; + overflow: hidden; +} + +.cc-lib__item::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%); + background-size: 200% 100%; + animation: cc-shimmer 3.5s ease-in-out infinite; +} + +.cc-lib__item:nth-child(2)::after { animation-delay: 0.6s; } +.cc-lib__item:nth-child(3)::after { animation-delay: 1.2s; } +.cc-lib__item:nth-child(4)::after { animation-delay: 1.8s; } + +@keyframes cc-shimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + +@media (prefers-reduced-motion: reduce) { + .cc-live__dot, + .cc-nav__logo, + .cc-block, + .cc-lib__item::after { animation: none; } + .cc-live__dot { opacity: 1; box-shadow: 0 0 6px #4CAF50; } +} + +@media (max-width: 640px) { + .cc-stage { max-width: 320px; } + .cc-monitor__screen { height: 210px; } +} + + /* ── 13. Contact ────────────────────────────────────────────── */ .contact-layout { display: grid; @@ -4418,7 +4698,7 @@ p:last-child { margin-bottom: 0; } } .comparison-feature-col { min-width: 220px; } .comparison-feature-name { color: var(--color-text); } -.comparison-group-row td { +.comparison-table .comparison-group-row td { background: var(--color-primary); font-weight: 700; font-size: .82rem; @@ -4429,11 +4709,11 @@ p:last-child { margin-bottom: 0; } padding: .85rem 1.25rem; border-bottom-color: var(--color-primary) !important; } -.comparison-group-row td:first-child { +.comparison-table .comparison-group-row td:first-child { border-left: 4px solid var(--color-accent); } @media (prefers-color-scheme: dark) { - .comparison-group-row td { + .comparison-table .comparison-group-row td { background: var(--color-primary-dk); border-bottom-color: var(--color-primary-dk) !important; } @@ -10619,3 +10899,1133 @@ p:last-child { margin-bottom: 0; } .menu-content__desc { display: none; } .menu-content__price { font-size: 13px; } } + +/* ═══════════════════════════════════════════════════════════════ + PARTNERS PAGE ANIMATIONS + Platform-row visuals + card-scene mini UIs + ═══════════════════════════════════════════════════════════════ */ + +/* ── Shared platform-visual reset for partners animations ───── */ +.platform-visual.has-whitelabel, +.platform-visual.has-reseller, +.platform-visual.has-api { + background: none !important; + border: none !important; + border-radius: 0; + aspect-ratio: unset; + padding: 0; + overflow: visible; + box-shadow: none; + display: flex; + align-items: center; + justify-content: center; +} + +/* ═══════════════════════════════════════════════════════════════ + 1. WL-STAGE — White-Label Brand Customiser + ═══════════════════════════════════════════════════════════════ */ +.wl-stage { + width: 100%; + max-width: 520px; + margin: 0 auto; + display: flex; + gap: 14px; + align-items: stretch; +} + +/* Left pane: live preview */ +.wl-preview { + flex: 1.4; + background: #0a0e16; + border: 1px solid rgba(255,255,255,0.1); + border-radius: 10px; + overflow: hidden; + display: flex; + flex-direction: column; + box-shadow: 0 16px 48px rgba(0,0,0,0.5); + min-height: 260px; +} +.wl-preview__bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 12px; + background: #111827; + border-bottom: 1px solid rgba(255,255,255,0.07); + flex-shrink: 0; +} +.wl-preview__logo { + width: 60px; + height: 10px; + border-radius: 3px; + background: var(--color-primary); + opacity: 0.85; + animation: wl-logo-pulse 4s ease-in-out infinite; +} +@keyframes wl-logo-pulse { + 0%,100% { opacity: 0.7; } + 50% { opacity: 1; box-shadow: 0 0 8px rgba(var(--color-primary-rgb),0.5); } +} +.wl-preview__nav { + display: flex; + gap: 8px; +} +.wl-preview__nav span { + width: 28px; + height: 6px; + border-radius: 3px; + background: rgba(255,255,255,0.12); +} +.wl-preview__body { + display: flex; + flex: 1; + overflow: hidden; +} +.wl-preview__side { + width: 36px; + background: #0f1419; + border-right: 1px solid rgba(255,255,255,0.05); + display: flex; + flex-direction: column; + gap: 8px; + padding: 10px 6px; + flex-shrink: 0; +} +.wl-preview__side span { + display: block; + height: 6px; + border-radius: 3px; + background: rgba(255,255,255,0.1); +} +.wl-preview__side span:nth-child(1) { background: var(--color-primary); opacity: 0.7; } +.wl-preview__main { + flex: 1; + padding: 10px; + display: flex; + align-items: flex-start; +} +.wl-preview__screens { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 6px; + width: 100%; +} +.wl-preview__screen { + aspect-ratio: 16/9; + border-radius: 4px; + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.08); + animation: wl-screen-cycle 9s ease-in-out infinite; +} +.wl-ps--1 { animation-delay: 0.0s; } +.wl-ps--2 { animation-delay: 0.5s; } +.wl-ps--3 { animation-delay: 1.0s; } +.wl-ps--4 { animation-delay: 1.5s; } +.wl-ps--5 { animation-delay: 2.0s; } +.wl-ps--6 { animation-delay: 2.5s; } +@keyframes wl-screen-cycle { + 0%,10% { background: rgba(var(--color-primary-rgb),0.25); border-color: rgba(var(--color-primary-rgb),0.5); } + 33%,66% { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } + 90%,100%{ background: rgba(var(--color-primary-rgb),0.15); border-color: rgba(var(--color-primary-rgb),0.3); } +} + +/* Right pane: brand settings panel */ +.wl-panel { + flex: 1; + background: #111827; + border: 1px solid rgba(255,255,255,0.1); + border-radius: 10px; + padding: 14px; + display: flex; + flex-direction: column; + gap: 10px; + box-shadow: 0 16px 48px rgba(0,0,0,0.5); + color: #fff; +} +.wl-panel__title { + font-size: 11px; + font-weight: 700; + letter-spacing: 0.5px; + color: rgba(255,255,255,0.5); + text-transform: uppercase; + padding-bottom: 8px; + border-bottom: 1px solid rgba(255,255,255,0.07); +} +.wl-field { + display: flex; + flex-direction: column; + gap: 4px; +} +.wl-field__label { + font-size: 9px; + font-weight: 600; + color: rgba(255,255,255,0.35); + text-transform: uppercase; + letter-spacing: 0.5px; +} +.wl-logo-slot { + height: 26px; + border-radius: 5px; + border: 1.5px dashed rgba(255,255,255,0.2); + display: flex; + align-items: center; + justify-content: center; + animation: wl-logoslot-glow 3s ease-in-out infinite; +} +@keyframes wl-logoslot-glow { + 0%,100% { border-color: rgba(255,255,255,0.2); } + 50% { border-color: rgba(var(--color-primary-rgb),0.7); box-shadow: 0 0 6px rgba(var(--color-primary-rgb),0.2); } +} +.wl-logo-slot__text { + font-size: 8px; + font-weight: 700; + color: rgba(255,255,255,0.2); + letter-spacing: 1px; +} +.wl-swatches { + display: flex; + gap: 5px; +} +.wl-swatch { + width: 16px; + height: 16px; + border-radius: 50%; + border: 1.5px solid transparent; + cursor: pointer; + transition: transform 0.2s; +} +.wl-swatch--1 { background: #6366f1; } +.wl-swatch--2 { background: #f59e0b; } +.wl-swatch--3 { background: var(--color-primary); } +.wl-swatch--4 { background: #10b981; } +.wl-swatch--active { + outline: 2px solid rgba(255,255,255,0.7); + outline-offset: 2px; +} +.wl-domain { + font-size: 9px; + font-family: monospace; + color: rgba(255,255,255,0.45); + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 4px; + padding: 4px 7px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.wl-status { + display: flex; + align-items: center; + gap: 6px; + font-size: 9px; + font-weight: 600; + color: #4ade80; + margin-top: auto; +} +.wl-status__dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: #4ade80; + flex-shrink: 0; + animation: wl-dot-pulse 1.8s ease-in-out infinite; +} +@keyframes wl-dot-pulse { + 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); } + 50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(74,222,128,0); } +} + +@media (max-width: 768px) { + .wl-stage { flex-direction: column; } + .wl-preview { min-height: 160px; } +} + +/* ═══════════════════════════════════════════════════════════════ + 2. RSL-STAGE — Reseller Partner Portal + ═══════════════════════════════════════════════════════════════ */ +.rsl-stage { + width: 100%; + max-width: 400px; + margin: 0 auto; +} +.rsl-panel { + background: #0f1117; + border: 1px solid #1e2435; + border-radius: 12px; + padding: 22px 24px; + display: flex; + flex-direction: column; + gap: 18px; + box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); + color: #fff; +} +.rsl-header { + display: flex; + justify-content: space-between; + align-items: flex-start; +} +.rsl-header__left { + display: flex; + flex-direction: column; + gap: 3px; +} +.rsl-badge { + font-size: 13px; + font-weight: 700; + color: #f59e0b; + letter-spacing: 0.3px; +} +.rsl-sub { + font-size: 11px; + color: rgba(255,255,255,0.35); +} +.rsl-screens { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 1px; +} +.rsl-screens__val { + font-size: 22px; + font-weight: 700; + font-variant-numeric: tabular-nums; + line-height: 1; +} +.rsl-screens__lbl { + font-size: 10px; + color: rgba(255,255,255,0.4); + text-transform: uppercase; + letter-spacing: 0.5px; +} +.rsl-kpis { + display: flex; + gap: 8px; +} +.rsl-kpi { + flex: 1; + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.07); + border-radius: 8px; + padding: 10px; + display: flex; + flex-direction: column; + gap: 3px; + align-items: center; +} +.rsl-kpi--primary { + background: rgba(var(--color-primary-rgb),0.1); + border-color: rgba(var(--color-primary-rgb),0.3); +} +.rsl-kpi__val { + font-size: 16px; + font-weight: 700; + font-variant-numeric: tabular-nums; + color: #fff; +} +.rsl-kpi--primary .rsl-kpi__val { + color: var(--color-primary); + animation: rsl-kpi-tick 6s ease-in-out infinite; +} +@keyframes rsl-kpi-tick { + 0%,40% { opacity: 1; } + 50% { opacity: 0.3; } + 60%,100%{ opacity: 1; } +} +.rsl-kpi__lbl { + font-size: 9px; + color: rgba(255,255,255,0.35); + text-transform: uppercase; + letter-spacing: 0.5px; + text-align: center; +} +.rsl-tiers { + display: flex; + flex-direction: column; + gap: 8px; +} +.rsl-tier { + display: flex; + align-items: center; + gap: 10px; +} +.rsl-tier__name { + font-size: 11px; + font-weight: 600; + color: rgba(255,255,255,0.45); + min-width: 62px; + flex-shrink: 0; +} +.rsl-tier--active .rsl-tier__name { + color: #f59e0b; +} +.rsl-tier__bar { + flex: 1; + height: 6px; + background: rgba(255,255,255,0.06); + border-radius: 3px; + overflow: hidden; +} +.rsl-tier__fill { + height: 100%; + border-radius: 3px; + transition: width 1.2s ease; +} +.rsl-tf--silver { background: rgba(148,163,184,0.6); } +.rsl-tf--gold { background: linear-gradient(90deg, #f59e0b, #fbbf24); animation: rsl-gold-shimmer 3s ease-in-out infinite; } +.rsl-tf--plat { background: rgba(99,102,241,0.5); } +@keyframes rsl-gold-shimmer { + 0%,100% { filter: brightness(1); } + 50% { filter: brightness(1.35); box-shadow: 0 0 8px rgba(251,191,36,0.5); } +} +.rsl-tier__rate { + font-size: 11px; + font-weight: 700; + color: rgba(255,255,255,0.5); + min-width: 28px; + text-align: right; + flex-shrink: 0; +} +.rsl-tier--active .rsl-tier__rate { + color: #f59e0b; +} +.rsl-next { + display: flex; + flex-direction: column; + gap: 5px; +} +.rsl-next__lbl { + font-size: 10px; + color: rgba(255,255,255,0.3); +} +.rsl-next__bar { + height: 5px; + background: rgba(255,255,255,0.06); + border-radius: 3px; + overflow: hidden; +} +.rsl-next__fill { + height: 100%; + width: 68%; + border-radius: 3px; + background: linear-gradient(90deg, rgba(99,102,241,0.5), rgba(139,92,246,0.7)); + position: relative; + overflow: hidden; +} +.rsl-next__fill::after { + content: ''; + position: absolute; + top: 0; left: -100%; bottom: 0; + width: 60%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); + animation: rsl-shimmer 2.4s ease-in-out infinite; +} +@keyframes rsl-shimmer { + 0% { left: -100%; } + 100% { left: 160%; } +} + +@media (max-width: 640px) { + .rsl-panel { padding: 16px 18px; gap: 14px; } +} + +/* ═══════════════════════════════════════════════════════════════ + 3. API-STAGE — REST API Console + ═══════════════════════════════════════════════════════════════ */ +.api-stage { + width: 100%; + max-width: 500px; + margin: 0 auto; +} +.api-console { + background: #0d1117; + border: 1px solid #21262d; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 20px 60px rgba(0,0,0,0.6); + font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; +} +.api-console__bar { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + background: #161b22; + border-bottom: 1px solid #21262d; +} +.api-dots { + display: flex; + gap: 5px; +} +.api-dot { + width: 10px; + height: 10px; + border-radius: 50%; +} +.api-dot--r { background: #ff5f57; } +.api-dot--y { background: #febc2e; } +.api-dot--g { background: #28c840; } +.api-console__title { + font-size: 12px; + font-weight: 600; + color: rgba(255,255,255,0.5); + flex: 1; + text-align: center; + font-family: inherit; +} +.api-console__version { + font-size: 10px; + font-weight: 600; + color: rgba(255,255,255,0.25); + background: rgba(255,255,255,0.07); + padding: 2px 7px; + border-radius: 999px; +} +.api-console__body { + padding: 14px 16px; + display: flex; + flex-direction: column; + gap: 6px; + min-height: 220px; +} +/* Request rows */ +.api-req { + display: flex; + align-items: center; + gap: 8px; + opacity: 0; + transform: translateY(6px); + animation: api-row-in 9s ease-in-out infinite; +} +.api-req--1 { animation-delay: 0.2s; } +.api-req--2 { animation-delay: 0.6s; } +.api-req--3 { animation-delay: 1.0s; } +@keyframes api-row-in { + 0%,5% { opacity: 0; transform: translateY(6px); } + 12%,88% { opacity: 1; transform: translateY(0); } + 95%,100% { opacity: 0; transform: translateY(-4px); } +} +.api-method { + font-size: 10px; + font-weight: 700; + padding: 2px 7px; + border-radius: 4px; + min-width: 42px; + text-align: center; + flex-shrink: 0; +} +.api-method--post { background: rgba(249,115,22,0.2); color: #fb923c; } +.api-method--get { background: rgba(74,222,128,0.15); color: #4ade80; } +.api-method--patch { background: rgba(96,165,250,0.15); color: #60a5fa; } +.api-endpoint { + font-size: 11px; + color: rgba(255,255,255,0.65); + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.api-status { + font-size: 10px; + font-weight: 700; + color: #4ade80; + background: rgba(74,222,128,0.1); + padding: 2px 6px; + border-radius: 4px; + flex-shrink: 0; +} +/* Response rows */ +.api-res { + padding-left: 56px; + opacity: 0; + animation: api-res-in 9s ease-in-out infinite; + margin-bottom: 4px; +} +.api-res--1 { animation-delay: 0.4s; } +.api-res--2 { animation-delay: 0.8s; } +.api-res--3 { animation-delay: 1.2s; } +@keyframes api-res-in { + 0%,8% { opacity: 0; } + 15%,88% { opacity: 1; } + 95%,100% { opacity: 0; } +} +.api-json { + font-size: 10px; + color: rgba(74,222,128,0.6); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + max-width: 320px; +} +.api-cursor { + width: 7px; + height: 13px; + background: rgba(255,255,255,0.7); + border-radius: 1px; + animation: api-blink 1.1s step-end infinite; + margin-top: 4px; +} +@keyframes api-blink { + 0%,100% { opacity: 1; } + 50% { opacity: 0; } +} + +@media (prefers-reduced-motion: reduce) { + .wl-preview__screen, + .wl-preview__logo, + .wl-logo-slot, + .wl-status__dot { animation: none; } + .rsl-tf--gold { animation: none; } + .rsl-next__fill::after { animation: none; } + .rsl-kpi--primary .rsl-kpi__val { animation: none; } + .api-req { animation: none; opacity: 1; transform: none; } + .api-res { animation: none; opacity: 1; } + .api-cursor { animation: none; } +} + +/* ═══════════════════════════════════════════════════════════════ + PARTNERS CARD SCENES — Shared utilities + ═══════════════════════════════════════════════════════════════ */ + +/* Status dot (used in partner-mgr, it-managed, priority-support) */ +.cs-dot { + width: 7px; + height: 7px; + border-radius: 50%; + display: inline-block; + flex-shrink: 0; +} +.cs-dot--green { + background: #4ade80; + animation: cs-dot-green-pulse 1.8s ease-in-out infinite; +} +@keyframes cs-dot-green-pulse { + 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74,222,128,0.5); } + 50% { opacity: 0.8; box-shadow: 0 0 0 3px rgba(74,222,128,0); } +} +.cs-dot--orange { + background: #fb923c; + animation: cs-dot-orange-pulse 1.4s ease-in-out infinite; +} +@keyframes cs-dot-orange-pulse { + 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(251,146,60,0.5); } + 50% { opacity: 0.7; box-shadow: 0 0 0 3px rgba(251,146,60,0); } +} + +/* ── Scene: Margins (Partner Tier Progress) ─────────────────── */ +.cs-margins .cs-tiers { + display: flex; + flex-direction: column; + gap: 7px; + flex: 1; + justify-content: center; + padding: 2px 0; +} +.cs-tier-row { + display: flex; + align-items: center; + gap: 6px; +} +.cs-tier-name { + font-size: 8px; + font-weight: 700; + color: rgba(255,255,255,0.35); + min-width: 40px; + flex-shrink: 0; +} +.cs-tier-row--active .cs-tier-name { + color: #f59e0b; +} +.cs-tier-track { + flex: 1; + height: 5px; + background: rgba(255,255,255,0.06); + border-radius: 3px; + overflow: hidden; +} +.cs-tier-fill { + height: 100%; + border-radius: 3px; + animation: cs-tier-grow 2s cubic-bezier(0.4,0,0.2,1) backwards; +} +.cs-tf--silver { width: 100%; background: rgba(148,163,184,0.5); animation-delay: 0.1s; } +.cs-tf--gold { + width: 68%; + background: linear-gradient(90deg, #f59e0b, #fbbf24); + animation-delay: 0.3s; + animation: cs-tier-grow 2s cubic-bezier(0.4,0,0.2,1) 0.3s backwards, cs-gold-glow 3s ease-in-out 2.3s infinite; +} +.cs-tf--plat { width: 30%; background: rgba(99,102,241,0.55); animation-delay: 0.5s; } +@keyframes cs-tier-grow { + from { width: 0; } +} +@keyframes cs-gold-glow { + 0%,100% { filter: brightness(1); } + 50% { filter: brightness(1.4); box-shadow: 0 0 6px rgba(251,191,36,0.5); } +} +.cs-tier-pct { + font-size: 8px; + font-weight: 700; + color: rgba(255,255,255,0.35); + min-width: 22px; + text-align: right; + flex-shrink: 0; +} +.cs-tier-row--active .cs-tier-pct { color: #f59e0b; } +.cs-tier-note { + font-size: 7.5px; + color: rgba(255,255,255,0.2); + text-align: center; + flex-shrink: 0; + padding-top: 2px; +} + +/* ── Scene: Partner Manager ─────────────────────────────────── */ +.cs-partner-mgr .cs-mgr { + display: flex; + align-items: center; + gap: 9px; + flex-shrink: 0; +} +.cs-mgr__avatar { + width: 34px; + height: 34px; + border-radius: 50%; + background: linear-gradient(135deg, var(--color-primary), rgba(var(--color-primary-rgb),0.6)); + display: flex; + align-items: center; + justify-content: center; + font-size: 11px; + font-weight: 700; + color: #fff; + flex-shrink: 0; + animation: cs-avatar-pulse 4s ease-in-out infinite; +} +@keyframes cs-avatar-pulse { + 0%,100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb),0.4); } + 50% { box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb),0); } +} +.cs-mgr__info { display: flex; flex-direction: column; gap: 2px; flex: 1; } +.cs-mgr__name { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.85); } +.cs-mgr__role { font-size: 8px; color: rgba(255,255,255,0.35); } +.cs-mgr__rows { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; + justify-content: center; +} +.cs-mgr__row { + display: flex; + align-items: center; + gap: 7px; +} +.cs-mgr__icon { + width: 14px; + height: 14px; + border-radius: 3px; + flex-shrink: 0; + background: rgba(255,255,255,0.08); +} +.cs-mgr__icon--phone { background: rgba(74,222,128,0.2); } +.cs-mgr__icon--reply { background: rgba(96,165,250,0.2); } +.cs-mgr__val { + font-size: 8.5px; + color: rgba(255,255,255,0.5); +} +.cs-mgr__status { + display: flex; + align-items: center; + gap: 6px; + font-size: 8.5px; + font-weight: 600; + color: #4ade80; + flex-shrink: 0; + padding-top: 2px; +} + +/* ── Scene: Co-Marketing Campaigns ─────────────────────────── */ +.cs-co-marketing .cs-campaigns { + display: flex; + flex-direction: column; + gap: 6px; + flex: 1; + justify-content: center; +} +.cs-camp { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + opacity: 0; + transform: translateX(8px); + animation: cs-camp-in 6s ease-in-out infinite; +} +.cs-camp:nth-child(1) { animation-delay: 0.1s; } +.cs-camp:nth-child(2) { animation-delay: 0.4s; } +.cs-camp:nth-child(3) { animation-delay: 0.7s; } +@keyframes cs-camp-in { + 0%,5% { opacity: 0; transform: translateX(8px); } + 15%,80% { opacity: 1; transform: translateX(0); } + 92%,100% { opacity: 0; transform: translateX(-4px); } +} +.cs-camp__ch { + font-size: 9px; + color: rgba(255,255,255,0.6); + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.cs-camp__badge { + font-size: 8px; + font-weight: 700; + padding: 2px 7px; + border-radius: 999px; + flex-shrink: 0; +} +.cs-badge--live { background: rgba(74,222,128,0.15); color: #4ade80; } +.cs-badge--sched { background: rgba(96,165,250,0.15); color: #60a5fa; } +.cs-badge--draft { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.35); } + +/* ── Scene: Training Portal ─────────────────────────────────── */ +.cs-training .cs-courses { + display: flex; + flex-direction: column; + gap: 7px; + flex: 1; + justify-content: center; +} +.cs-course { + display: flex; + align-items: center; + gap: 6px; +} +.cs-course__name { + font-size: 8px; + color: rgba(255,255,255,0.5); + min-width: 0; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.cs-course__bar { + width: 55px; + height: 5px; + background: rgba(255,255,255,0.06); + border-radius: 3px; + overflow: hidden; + flex-shrink: 0; +} +.cs-course__fill { + height: 100%; + border-radius: 3px; + background: rgba(var(--color-primary-rgb),0.7); + animation: cs-course-grow 1.8s cubic-bezier(0.4,0,0.2,1) backwards; +} +.cs-fill--100 { width: 100%; background: #4ade80; animation-delay: 0.1s; } +.cs-fill--anim { width: 78%; animation-delay: 0.4s; } +.cs-fill--45 { width: 45%; animation-delay: 0.7s; } +@keyframes cs-course-grow { from { width: 0; } } +.cs-course__done { + font-size: 10px; + color: #4ade80; + min-width: 14px; + text-align: center; + flex-shrink: 0; +} +.cs-course__pct { + font-size: 8px; + font-weight: 600; + color: rgba(255,255,255,0.35); + min-width: 22px; + text-align: right; + flex-shrink: 0; +} + +/* ── Scene: Priority Support Ticket ─────────────────────────── */ +.cs-priority-support .cs-ticket { + display: flex; + flex-direction: column; + gap: 5px; + flex: 1; + justify-content: center; +} +.cs-ticket__hdr { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; +} +.cs-ticket__id { + font-size: 9px; + font-family: monospace; + color: rgba(255,255,255,0.4); + font-weight: 600; +} +.cs-ticket__pri { + font-size: 8px; + font-weight: 700; + color: #f87171; + background: rgba(248,113,113,0.12); + padding: 2px 6px; + border-radius: 4px; + border: 1px solid rgba(248,113,113,0.25); +} +.cs-ticket__title { + font-size: 9.5px; + font-weight: 600; + color: rgba(255,255,255,0.75); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.cs-ticket__meta { + display: flex; + justify-content: space-between; + gap: 8px; +} +.cs-ticket__sla { + font-size: 8px; + color: rgba(255,255,255,0.3); +} +.cs-sla-timer { + color: #fb923c; + font-weight: 700; + font-family: monospace; + animation: cs-sla-tick 60s linear infinite; +} +@keyframes cs-sla-tick { + 0% { opacity: 1; } + 49% { opacity: 1; } + 50% { opacity: 0.3; } + 51% { opacity: 1; } + 100% { opacity: 1; } +} +.cs-ticket__agent { + font-size: 8px; + color: rgba(255,255,255,0.35); +} +.cs-ticket__status { + display: flex; + align-items: center; + gap: 6px; + font-size: 8.5px; + font-weight: 600; + color: #fb923c; +} + +/* ── Scene: Early Access Roadmap ────────────────────────────── */ +.cs-early-access .cs-features { + display: flex; + flex-direction: column; + gap: 7px; + flex: 1; + justify-content: center; +} +.cs-feat { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + opacity: 0; + transform: translateX(10px); + animation: cs-feat-in 7s ease-in-out infinite; +} +.cs-feat--1 { animation-delay: 0.1s; } +.cs-feat--2 { animation-delay: 0.5s; } +.cs-feat--3 { animation-delay: 0.9s; } +@keyframes cs-feat-in { + 0%,4% { opacity: 0; transform: translateX(10px); } + 14%,80% { opacity: 1; transform: translateX(0); } + 92%,100% { opacity: 0; transform: translateX(-4px); } +} +.cs-feat__name { + font-size: 9px; + color: rgba(255,255,255,0.65); + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.cs-feat__tag { + font-size: 7.5px; + font-weight: 700; + padding: 2px 6px; + border-radius: 4px; + flex-shrink: 0; + letter-spacing: 0.3px; +} +.cs-feat__tag--beta { background: rgba(249,115,22,0.2); color: #fb923c; } +.cs-feat__tag--early { background: rgba(var(--color-primary-rgb),0.18); color: var(--color-primary); } +.cs-feat__tag--q3 { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.35); } + +/* ── Scene: AV Network Map ──────────────────────────────────── */ +.cs-av-network .cs-avnet { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 0 4px; + min-height: 0; +} +.cs-avnet__svg { + width: 100%; + height: auto; + max-height: 80px; +} +.cs-av-hub { + animation: cs-hub-pulse 2s ease-in-out infinite; +} +@keyframes cs-hub-pulse { + 0%,100% { filter: drop-shadow(0 0 0px rgba(216,51,2,0)); opacity: 1; } + 50% { filter: drop-shadow(0 0 6px rgba(216,51,2,0.8)); opacity: 0.9; } +} +.cs-av-scr { + animation: cs-scr-red-pulse 2.5s ease-in-out infinite; +} +.cs-av-scr--1 { animation-delay: 0.0s; } +.cs-av-scr--2 { animation-delay: 0.4s; } +.cs-av-scr--3 { animation-delay: 0.8s; } +@keyframes cs-scr-red-pulse { + 0%,100% { filter: drop-shadow(0 0 0px rgba(216,51,2,0)); } + 50% { filter: drop-shadow(0 0 4px rgba(216,51,2,0.7)); } +} +.cs-av-scr--4, +.cs-av-scr--5 { + animation: cs-scr-green-pulse 2.5s ease-in-out infinite; +} +.cs-av-scr--4 { animation-delay: 0.3s; } +.cs-av-scr--5 { animation-delay: 0.7s; } +@keyframes cs-scr-green-pulse { + 0%,100% { filter: drop-shadow(0 0 0px rgba(76,175,80,0)); } + 50% { filter: drop-shadow(0 0 4px rgba(76,175,80,0.7)); } +} +.cs-avnet__label { + font-size: 7.5px; + color: rgba(255,255,255,0.25); + text-align: center; + flex-shrink: 0; + padding: 2px 0; +} + +/* ── Scene: IT-Managed Devices ──────────────────────────────── */ +.cs-it-managed .cs-devices { + display: flex; + flex-direction: column; + gap: 5px; + flex: 1; + justify-content: center; +} +.cs-device { + display: flex; + align-items: center; + gap: 7px; + opacity: 0; + animation: cs-device-in 5s ease-in-out infinite; +} +.cs-device:nth-child(1) { animation-delay: 0.1s; } +.cs-device:nth-child(2) { animation-delay: 0.3s; } +.cs-device:nth-child(3) { animation-delay: 0.5s; } +.cs-device:nth-child(4) { animation-delay: 0.7s; } +@keyframes cs-device-in { + 0%,6% { opacity: 0; transform: translateY(4px); } + 18%,80% { opacity: 1; transform: translateY(0); } + 92%,100% { opacity: 0; } +} +.cs-device__name { + font-size: 8.5px; + color: rgba(255,255,255,0.55); + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.cs-device__uptime { + font-size: 8px; + font-weight: 700; + color: rgba(255,255,255,0.3); + font-family: monospace; + flex-shrink: 0; +} +.cs-device:nth-child(3) .cs-device__uptime { + color: #fb923c; +} + +/* ── Scene: API Embed / SDK ─────────────────────────────────── */ +.cs-api-embed .cs-code { + display: flex; + flex-direction: column; + gap: 3px; + flex: 1; + justify-content: center; + padding: 0 2px; +} +.cs-code__line { + font-size: 8.5px; + font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; + line-height: 1.5; + white-space: nowrap; + color: rgba(255,255,255,0.7); +} +.cs-code__line--2, +.cs-code__line--3, +.cs-code__line--4, +.cs-code__line--5 { + opacity: 0; + animation: cs-code-in 8s ease-in-out infinite; +} +.cs-code__line--2 { animation-delay: 0.4s; } +.cs-code__line--3 { animation-delay: 0.8s; } +.cs-code__line--4 { animation-delay: 1.2s; } +.cs-code__line--5 { animation-delay: 1.6s; } +@keyframes cs-code-in { + 0%,5% { opacity: 0; } + 18%,80% { opacity: 1; } + 92%,100% { opacity: 0; } +} +.cs-code__cursor { + display: inline-block; + width: 5px; + height: 10px; + background: rgba(255,255,255,0.7); + border-radius: 1px; + vertical-align: middle; + animation: cs-cursor-blink 1.1s step-end infinite; +} +@keyframes cs-cursor-blink { + 0%,100% { opacity: 1; } + 50% { opacity: 0; } +} +.cs-indent { padding-left: 14px; } +/* Syntax highlighting */ +.cs-kw { color: #c084fc; } /* keyword — purple */ +.cs-cl { color: #fbbf24; } /* class — amber */ +.cs-str { color: #4ade80; } /* string — green */ +.cs-var { color: rgba(255,255,255,0.85); } /* variable — white */ +.cs-op { color: rgba(255,255,255,0.35); } /* operator — muted */ +.cs-pu { color: rgba(255,255,255,0.4); } /* punctuation */ +.cs-fn { color: #60a5fa; } /* function — blue */ + +/* ── Partners scene reduced-motion ─────────────────────────── */ +@media (prefers-reduced-motion: reduce) { + .cs-dot--green, .cs-dot--orange { animation: none; } + .cs-tf--gold { animation: none; } + .cs-mgr__avatar { animation: none; } + .cs-camp { animation: none; opacity: 1; transform: none; } + .cs-course__fill { animation: none; } + .cs-tf--silver, + .cs-tf--plat { animation: none; } + .cs-sla-timer { animation: none; } + .cs-feat { animation: none; opacity: 1; transform: none; } + .cs-av-hub { animation: none; } + .cs-av-scr { animation: none; } + .cs-device { animation: none; opacity: 1; transform: none; } + .cs-code__line--2, + .cs-code__line--3, + .cs-code__line--4, + .cs-code__line--5 { animation: none; opacity: 1; } + .cs-code__cursor { animation: none; } +} diff --git a/theme/blocks/editor.js b/theme/blocks/editor.js index 6740367..061d784 100644 --- a/theme/blocks/editor.js +++ b/theme/blocks/editor.js @@ -607,6 +607,7 @@ reversed: { type: 'boolean', default: false }, cloudAnim: { type: 'boolean', default: false }, bundleAnim: { type: 'boolean', default: false }, + demoAnim: { type: 'boolean', default: false }, imgId: { type: 'number', default: 0 }, imgUrl: { type: 'string', default: '' }, imgAlt: { type: 'string', default: '' }, @@ -649,7 +650,8 @@ el(TC, { label: 'Visual (emoji or text)', value: a.visual, onChange: function (v) { s({ visual: v }); } }), el(TG, { label: 'Reversed layout', checked: a.reversed, onChange: function (v) { s({ reversed: v }); } }), el(TG, { label: 'Cloud Server Animation', checked: a.cloudAnim, onChange: function (v) { s({ cloudAnim: v }); } }), - el(TG, { label: 'Player + Display Bundle Animation', checked: !!a.bundleAnim, onChange: function (v) { s({ bundleAnim: v }); } }) + el(TG, { label: 'Player + Display Bundle Animation', checked: !!a.bundleAnim, onChange: function (v) { s({ bundleAnim: v }); } }), + el(TG, { label: 'Command Center Demo Animation', checked: !!a.demoAnim, onChange: function (v) { s({ demoAnim: v }); } }) ), el(PB, { title: 'Visual Image', initialOpen: false }, el(MUC, null, @@ -683,7 +685,7 @@ el(RT, { tagName: 'h2', style: { marginBottom: '1.5rem' }, value: a.heading, onChange: function (v) { s({ heading: v }); }, placeholder: 'Heading...' }), el(RT, { tagName: 'p', className: 'lead', value: a.description, onChange: function (v) { s({ description: v }); }, placeholder: 'Description...' }) ), - el('div', { className: 'about-intro-visual' + (a.cloudAnim ? ' has-cloud-anim' : (a.bundleAnim ? ' has-pkg-anim' : (a.imgUrl ? ' has-img' : ''))), style: a.reversed ? { direction: 'ltr' } : {} }, visualContent) + el('div', { className: 'about-intro-visual' + (a.cloudAnim ? ' has-cloud-anim' : (a.bundleAnim ? ' has-pkg-anim' : (a.demoAnim ? ' has-demo-anim' : (a.imgUrl ? ' has-img' : '')))), style: a.reversed ? { direction: 'ltr' } : {} }, visualContent) ) ) ) diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 05330b5..d309b0b 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -341,6 +341,7 @@ add_action('init', function () { 'reversed' => ['type' => 'boolean', 'default' => false], 'cloudAnim' => ['type' => 'boolean', 'default' => false], 'bundleAnim' => ['type' => 'boolean', 'default' => false], + 'demoAnim' => ['type' => 'boolean', 'default' => false], 'imgId' => ['type' => 'number', 'default' => 0], 'imgUrl' => ['type' => 'string', 'default' => ''], 'imgAlt' => ['type' => 'string', 'default' => ''], @@ -408,6 +409,7 @@ add_action('init', function () { 'faIcon' => ['type' => 'string', 'default' => ''], 'title' => ['type' => 'string', 'default' => ''], 'description' => ['type' => 'string', 'default' => ''], + 'scene' => ['type' => 'string', 'default' => ''], ], oribi_card_image_attributes() ), @@ -610,6 +612,9 @@ add_action('init', function () { 'videoMotionAnim' => ['type' => 'boolean', 'default' => false], 'brandLayoutAnim' => ['type' => 'boolean', 'default' => false], 'menuBoardAnim' => ['type' => 'boolean', 'default' => false], + 'whitelabelAnim' => ['type' => 'boolean', 'default' => false], + 'resellerAnim' => ['type' => 'boolean', 'default' => false], + 'apiAnim' => ['type' => 'boolean', 'default' => false], 'galleryIds' => ['type' => 'array', 'default' => [], 'items' => ['type' => 'number']], ], 'supports' => $block_supports, @@ -1007,7 +1012,7 @@ function oribi_render_intro_section($a)

-
> +
> '; @@ -1033,6 +1038,61 @@ function oribi_render_intro_section($a) $pkg .= '
'; // .pkg-stage echo $pkg; } + elseif (!empty($a['demoAnim'])) { + // Command Center demo animation + $cc = ''; // .cc-stage + echo $cc; + } else { echo wp_kses_post($a['visual']); } @@ -1231,6 +1291,163 @@ function oribi_render_card_scene($scene) . '
' . ''; + /* ── Partners page scenes ──────────────────────────────────────────── */ + + case 'margins': + return + ''; + + case 'partner-mgr': + return + ''; + + case 'co-marketing': + return + ''; + + case 'training': + return + ''; + + case 'priority-support': + return + ''; + + case 'early-access': + return + ''; + + case 'av-network': + return + ''; + + case 'it-managed': + return + ''; + + case 'api-embed': + return + ''; + default: return ''; } @@ -1247,6 +1464,7 @@ function oribi_render_value_card($a) { $img = oribi_card_image_html($a); $img_cls = $img['card_class'] ? ' ' . $img['card_class'] : ''; + $scene = !empty($a['scene']) ? trim($a['scene']) : ''; ob_start(); if ($img['html'] && $img['position'] === 'background'): ?> @@ -1273,7 +1491,9 @@ function oribi_render_value_card($a)
- + + +
@@ -3267,15 +3487,144 @@ function oribi_render_platform_row($a) } } + elseif (!empty($a['whitelabelAnim'])) { + /* ── White-Label Platform: branding customiser UI ── */ + $wl = ''; /* wl-stage */ + $visual_html = $wl; + $visual_cls = 'platform-visual has-whitelabel'; + } + elseif (!empty($a['resellerAnim'])) { + /* ── Reseller Programme: partner portal with tier dashboard ── */ + $rs = ''; /* rsl-stage */ + $visual_html = $rs; + $visual_cls = 'platform-visual has-reseller'; + } + elseif (!empty($a['apiAnim'])) { + /* ── API & Platform Integration: REST API console ── */ + $ap = ''; /* api-stage */ + $visual_html = $ap; + $visual_cls = 'platform-visual has-api'; + } else { $visual_html = oribi_render_icon($a['visual'] ?? ''); $visual_cls = 'platform-visual'; } - - ob_start(); ?> -
-
-

→