From 2548179a8d01d38408d22f3b677d825958dfd095 Mon Sep 17 00:00:00 2001 From: Matt Batchelder Date: Sun, 5 Apr 2026 20:01:08 -0400 Subject: [PATCH] Add bundle animation support to the editor and rendering logic - Introduced a new 'bundleAnim' attribute in the block editor settings and PHP backend. - Updated the editor UI to include a toggle for 'Player + Display Bundle Animation'. - Modified the rendering logic to display the bundle animation structure when 'bundleAnim' is enabled. - Adjusted the visual class names to accommodate the new animation type. --- pages/devices.php | 2 +- pages/hospitality.php | 2 +- theme/assets/css/main.css | 719 ++++++++++++++++++++++++++++++++------ theme/blocks/editor.js | 6 +- theme/blocks/index.php | 137 +++++++- 5 files changed, 738 insertions(+), 128 deletions(-) diff --git a/pages/devices.php b/pages/devices.php index bd036d5..812498b 100644 --- a/pages/devices.php +++ b/pages/devices.php @@ -66,7 +66,7 @@ return <<<'ORIBI_SYNC_CONTENT' - + diff --git a/pages/hospitality.php b/pages/hospitality.php index 947ab78..8762d74 100644 --- a/pages/hospitality.php +++ b/pages/hospitality.php @@ -10,7 +10,7 @@ - + diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index ddd68a9..d1275f4 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -3876,6 +3876,321 @@ p:last-child { margin-bottom: 0; } .ds-packet-3 { left: 80%; opacity: 1; } } +/* ── Player + Display Bundle Animation ──────────────────────── */ +.about-intro-visual.has-pkg-anim { + background: none; + box-shadow: none; + aspect-ratio: unset; + font-size: inherit; + color: inherit; +} + +.pkg-stage { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + max-width: 400px; + margin: 0 auto; + padding: 2rem 0; + position: relative; + color: var(--color-primary); +} + +.pkg-node { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.45rem; + flex-shrink: 0; + z-index: 2; +} + +.pkg-node__label { + font-size: 0.65rem; + font-weight: 600; + color: var(--color-text-muted); + letter-spacing: 0.07em; + text-transform: uppercase; +} + +/* ── Player device ────────────────────────────────────────── */ +.pkg-player { + display: flex; + align-items: center; +} + +.pkg-player__body { + width: 58px; + height: 38px; + background: #1c1c1e; + border: 2px solid #111; + border-radius: 7px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 14px rgba(0,0,0,.4); +} + +.pkg-player__body::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 30px; + height: 6px; + background: linear-gradient( + 180deg, + rgba(255,255,255,.07) 0px, rgba(255,255,255,.07) 1px, + transparent 1px, transparent 3px, + rgba(255,255,255,.07) 3px, rgba(255,255,255,.07) 4px, + transparent 4px + ); +} + +.pkg-player__led { + width: 5px; + height: 5px; + border-radius: 50%; + background: #4CAF50; + position: absolute; + bottom: 6px; + right: 7px; + box-shadow: 0 0 5px #4CAF50; + animation: pkg-led-blink 2.4s ease-in-out infinite; +} + +.pkg-player__hdmi { + width: 7px; + height: 8px; + background: #333; + border-radius: 0 2px 2px 0; + margin-left: -1px; + position: relative; +} + +.pkg-player__hdmi::before { + content: ''; + position: absolute; + top: 2px; + left: 1px; + width: 3px; + height: 3px; + background: #555; + border-radius: 0 1px 1px 0; +} + +@keyframes pkg-led-blink { + 0%, 100% { opacity: 1; box-shadow: 0 0 5px #4CAF50; } + 40%, 60% { opacity: 0.25; box-shadow: none; } +} + +/* ── Bundle box ───────────────────────────────────────────── */ +.pkg-box { + display: flex; + flex-direction: column; + align-items: center; +} + +.pkg-box__lids { + display: flex; + width: 76px; + gap: 3px; + perspective: 80px; +} + +.pkg-box__flap { + flex: 1; + height: 14px; + background: var(--color-primary-dk, #A22702); + border-radius: 3px 3px 0 0; +} + +.pkg-box__flap--l { + transform-origin: bottom center; + animation: pkg-flap-l 6s ease-in-out infinite; +} + +.pkg-box__flap--r { + transform-origin: bottom center; + animation: pkg-flap-r 6s ease-in-out infinite; +} + +@keyframes pkg-flap-l { + 0%, 10% { transform: rotateX(0deg); } + 28%, 72% { transform: rotateX(-110deg); } + 90%, 100% { transform: rotateX(0deg); } +} + +@keyframes pkg-flap-r { + 0%, 12% { transform: rotateX(0deg); } + 30%, 74% { transform: rotateX(-110deg); } + 92%, 100% { transform: rotateX(0deg); } +} + +.pkg-box__body { + width: 76px; + height: 68px; + background: var(--color-primary); + border-radius: 0 0 6px 6px; + position: relative; + overflow: hidden; + animation: pkg-box-glow 6s ease-in-out infinite; +} + +/* Tape stripe */ +.pkg-box__body::before { + content: ''; + position: absolute; + top: 0; bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 13px; + background: rgba(255,255,255,.18); +} + +/* Horizontal fold line */ +.pkg-box__body::after { + content: ''; + position: absolute; + top: 32px; left: 8px; right: 8px; + height: 1px; + background: rgba(0,0,0,.15); +} + +@keyframes pkg-box-glow { + 0%, 25% { box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), .25); } + 45%, 65% { box-shadow: 0 6px 34px rgba(var(--color-primary-rgb), .55); } + 85%, 100% { box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), .25); } +} + +/* ── TV / Display ─────────────────────────────────────────── */ +.pkg-tv { + display: flex; + flex-direction: column; + align-items: center; +} + +.pkg-tv__body { + width: 82px; + height: 56px; + background: #111; + border: 3px solid #111; + border-radius: 4px; + padding: 2px; + box-shadow: 0 6px 20px rgba(0,0,0,.45); +} + +.pkg-tv__screen { + width: 100%; + height: 100%; + border-radius: 2px; + background: linear-gradient(135deg, #0c1016 0%, #151c28 60%, #0c1016 100%); + position: relative; + overflow: hidden; +} + +.pkg-tv__screen::after { + content: ''; + position: absolute; + left: 0; width: 100%; height: 2px; + background: linear-gradient(90deg, transparent, rgba(74,222,128,.22), transparent); + animation: da-scan 4s linear infinite; + pointer-events: none; +} + +.pkg-tv__feet { + display: flex; + justify-content: space-between; + width: 46px; +} + +.pkg-tv__foot { + width: 9px; + height: 6px; + background: #111; + border-radius: 0 0 3px 3px; +} + +/* ── Connecting lines ─────────────────────────────────────── */ +.pkg-line { + flex-grow: 1; + height: 2px; + background: rgba(var(--color-primary-rgb), .18); + margin: 0 1rem; + position: relative; + display: flex; + align-items: center; + overflow: hidden; + border-radius: 2px; +} + +[data-theme="dark"] .pkg-line { + background: rgba(255,255,255,.1); +} + +.pkg-pkt { + width: 10px; + height: 4px; + background: var(--color-primary); + border-radius: 4px; + position: absolute; + left: -12px; + box-shadow: 0 0 6px var(--color-primary); +} + +[data-theme="dark"] .pkg-pkt { + background: #fff; + box-shadow: 0 0 6px rgba(255,255,255,.7); +} + +/* LTR packets (player → box) */ +.pkg-pkt--ltr-1 { animation: pkg-travel-ltr 2s linear infinite; } +.pkg-pkt--ltr-2 { animation: pkg-travel-ltr 2s linear infinite 0.65s; } +.pkg-pkt--ltr-3 { animation: pkg-travel-ltr 2s linear infinite 1.3s; } + +@keyframes pkg-travel-ltr { + 0% { left: -12px; opacity: 0; } + 8% { opacity: 1; } + 92% { opacity: 1; } + 100% { left: 100%; opacity: 0; } +} + +/* RTL packets (display → box) */ +.pkg-pkt--rtl-1 { animation: pkg-travel-rtl 2s linear infinite; } +.pkg-pkt--rtl-2 { animation: pkg-travel-rtl 2s linear infinite 0.65s; } +.pkg-pkt--rtl-3 { animation: pkg-travel-rtl 2s linear infinite 1.3s; } + +@keyframes pkg-travel-rtl { + 0% { left: calc(100% + 12px); opacity: 0; } + 8% { opacity: 1; } + 92% { opacity: 1; } + 100% { left: -12px; opacity: 0; } +} + +@media (prefers-reduced-motion: reduce) { + .pkg-player__led, + .pkg-box__flap--l, + .pkg-box__flap--r, + .pkg-box__body, + .pkg-pkt, + .pkg-tv__screen::after { animation: none; } + .pkg-box__flap--l, + .pkg-box__flap--r { transform: rotateX(-90deg); } + .pkg-pkt--ltr-1 { left: 15%; opacity: 1; } + .pkg-pkt--ltr-2 { left: 50%; opacity: 1; } + .pkg-pkt--ltr-3 { left: 75%; opacity: 1; } + .pkg-pkt--rtl-1 { left: 75%; opacity: 1; } + .pkg-pkt--rtl-2 { left: 50%; opacity: 1; } + .pkg-pkt--rtl-3 { left: 15%; opacity: 1; } +} + +@media (max-width: 640px) { + .pkg-stage { max-width: 300px; } +} + /* ── 13. Contact ────────────────────────────────────────────── */ .contact-layout { @@ -8781,56 +9096,135 @@ p:last-child { margin-bottom: 0; } box-shadow: none; } -.encl-stage { width: 100%; max-width: 400px; position: relative; padding-top: 20px; margin: 0 auto; } +.encl-stage { width: 100%; max-width: 420px; position: relative; padding-top: 16px; margin: 0 auto; } .encl-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .encl-rain__drop { - position: absolute; width: 2px; background: rgba(100,160,255,0.35); - border-radius: 1px; animation: encl-drop 1.2s linear infinite; + position: absolute; width: 2px; background: rgba(120,180,255,0.2); + border-radius: 1px; animation: encl-drop 1.4s linear infinite; } -.encl-rain__drop:nth-child(1) { left: 8%; height: 16px; animation-delay: 0s; } -.encl-rain__drop:nth-child(2) { left: 18%; height: 12px; animation-delay: 0.15s; } -.encl-rain__drop:nth-child(3) { left: 28%; height: 18px; animation-delay: 0.3s; } -.encl-rain__drop:nth-child(4) { left: 38%; height: 14px; animation-delay: 0.45s; } -.encl-rain__drop:nth-child(5) { left: 48%; height: 16px; animation-delay: 0.6s; } -.encl-rain__drop:nth-child(6) { left: 58%; height: 12px; animation-delay: 0.1s; } -.encl-rain__drop:nth-child(7) { left: 68%; height: 18px; animation-delay: 0.25s; } -.encl-rain__drop:nth-child(8) { left: 78%; height: 14px; animation-delay: 0.4s; } -.encl-rain__drop:nth-child(9) { left: 88%; height: 16px; animation-delay: 0.55s; } -.encl-rain__drop:nth-child(10) { left: 13%; height: 12px; animation-delay: 0.7s; } -.encl-rain__drop:nth-child(11) { left: 43%; height: 18px; animation-delay: 0.85s; } -.encl-rain__drop:nth-child(12) { left: 73%; height: 14px; animation-delay: 1s; } +.encl-rain__drop:nth-child(1) { left: 8%; height: 14px; animation-delay: 0s; } +.encl-rain__drop:nth-child(2) { left: 18%; height: 10px; animation-delay: 0.15s; } +.encl-rain__drop:nth-child(3) { left: 28%; height: 16px; animation-delay: 0.3s; } +.encl-rain__drop:nth-child(4) { left: 38%; height: 12px; animation-delay: 0.45s; } +.encl-rain__drop:nth-child(5) { left: 48%; height: 14px; animation-delay: 0.6s; } +.encl-rain__drop:nth-child(6) { left: 58%; height: 10px; animation-delay: 0.1s; } +.encl-rain__drop:nth-child(7) { left: 68%; height: 16px; animation-delay: 0.25s; } +.encl-rain__drop:nth-child(8) { left: 78%; height: 12px; animation-delay: 0.4s; } +.encl-rain__drop:nth-child(9) { left: 88%; height: 14px; animation-delay: 0.55s; } +.encl-rain__drop:nth-child(10) { left: 13%; height: 10px; animation-delay: 0.7s; } +.encl-rain__drop:nth-child(11) { left: 43%; height: 16px; animation-delay: 0.85s; } +.encl-rain__drop:nth-child(12) { left: 73%; height: 12px; animation-delay: 1s; } -.encl-unit { position: relative; z-index: 1; } -.encl-unit__body { - background: #1f2937; border-radius: 10px; border: 3px solid #374151; - padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); +/* Enclosure housing */ +.encl-housing { + position: relative; z-index: 1; + background: #1c2028; border-radius: 10px; + border: 4px solid #2a3040; padding: 8px 8px 6px; + box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); } -.encl-unit__screen { - background: linear-gradient(135deg, #1a1a2e, #16213e); - border-radius: 6px; padding: 28px 16px; text-align: center; +.encl-housing__header, +.encl-housing__footer { + display: flex; justify-content: space-between; align-items: center; + padding: 4px 4px; } -.encl-screen__content { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7); } -.encl-unit__badge { - position: absolute; top: -8px; right: 12px; - background: #15803d; color: #fff; font-size: 10px; font-weight: 800; - padding: 4px 10px; border-radius: 4px; letter-spacing: 1px; +.encl-housing__footer { padding-top: 6px; } +.encl-housing__vents { display: flex; gap: 4px; } +.encl-vent { + width: 18px; height: 4px; border-radius: 2px; + background: rgba(0,0,0,0.45); border: 1px solid rgba(0,0,0,0.6); } -.encl-unit__temp { - text-align: center; margin-top: 10px; - font-size: 11px; color: rgba(255,255,255,0.5); +.encl-housing__badge { + font-size: 9px; font-weight: 800; letter-spacing: 1.5px; + color: #fff; background: #15803d; padding: 2px 8px; border-radius: 3px; } +/* Screen inside the housing */ +.encl-housing__screen { + background: #090a0f; border-radius: 4px; overflow: hidden; + aspect-ratio: 16/7; position: relative; + border: 1px solid rgba(0,0,0,0.6); + box-shadow: inset 0 0 20px rgba(0,0,0,0.4); +} +.encl-slides { position: relative; width: 100%; height: 100%; } +.encl-slide { + position: absolute; inset: 0; opacity: 0; + animation: encl-fade 8s infinite; +} +.encl-slide--weather { animation-delay: 0s; } +.encl-slide--promo { animation-delay: 4s; } + +/* Weather/venue slide */ +.encl-weather { + height: 100%; padding: 14px 18px; + background: linear-gradient(135deg, #071020 0%, #0a1830 100%); + display: flex; flex-direction: column; gap: 10px; color: #fff; +} +.encl-weather__top { + display: flex; justify-content: space-between; align-items: flex-start; +} +.encl-weather__venue { font-size: 16px; font-weight: 800; color: #fff; } +.encl-weather__temp { + display: flex; flex-direction: column; align-items: flex-end; gap: 1px; +} +.encl-weather__deg { + font-size: 22px; font-weight: 700; color: #fbbf24; line-height: 1; +} +.encl-weather__cond { + font-size: 9px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; +} +.encl-weather__items { display: flex; flex-direction: column; gap: 6px; } +.encl-weather__row { + font-size: 12px; color: rgba(255,255,255,0.75); + display: flex; align-items: center; gap: 6px; +} + +/* Promo slide */ +.encl-promo { + height: 100%; padding: 14px 18px; + background: linear-gradient(135deg, #190a00 0%, #2d1200 100%); + display: flex; flex-direction: column; justify-content: center; gap: 6px; +} +.encl-promo__eyebrow { + font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; + color: rgba(255,200,100,0.7); +} +.encl-promo__headline { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.2; } +.encl-promo__cta { font-size: 12px; font-weight: 700; color: #fbbf24; margin-top: 2px; } + +@keyframes encl-fade { + 0%, 2% { opacity: 0; } + 8%, 45% { opacity: 1; } + 50%, 100% { opacity: 0; } +} + +/* Status pills */ +.encl-status { + display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; + margin-top: 10px; +} +.encl-status__pill { + font-size: 10px; font-weight: 700; padding: 3px 10px; + border-radius: 20px; letter-spacing: 0.5px; +} +.encl-status__pill--green { background: rgba(21,128,61,0.2); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); } +.encl-status__pill--blue { background: rgba(37,99,235,0.2); color: #93c5fd; border: 1px solid rgba(147,197,253,0.25); } +.encl-status__pill--amber { background: rgba(217,119,6,0.2); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); } + @keyframes encl-drop { - from { top: -20px; opacity: 1; } - to { top: 110%; opacity: 0.3; } + from { top: -20px; opacity: 0.8; } + to { top: 110%; opacity: 0.1; } } @media (prefers-reduced-motion: reduce) { - .encl-rain__drop { animation: none; opacity: 0.3; } + .encl-rain__drop { animation: none; opacity: 0.2; } + .encl-slide { animation: none; opacity: 0; } + .encl-slide--weather { opacity: 1; } } @media (max-width: 640px) { - .encl-stage { padding-top: 14px; } + .encl-housing { padding: 6px 6px 4px; } + .encl-weather { padding: 10px 12px; } + .encl-weather__venue { font-size: 14px; } } /* ═══════════════════════════════════════════════════════════ @@ -8846,49 +9240,123 @@ p:last-child { margin-bottom: 0; } box-shadow: none; } -.bright-stage { width: 100%; max-width: 460px; position: relative; padding-top: 10px; margin: 0 auto; } +.bright-stage { + width: 100%; max-width: 480px; position: relative; + margin: 0 auto; padding-top: 16px; +} +/* Sun with rays */ .bright-sun { - position: absolute; top: -10px; right: 20px; width: 50px; height: 50px; - border-radius: 50%; background: radial-gradient(circle, rgba(255,200,50,0.5), transparent 70%); - animation: bright-sun-glow 3s ease-in-out infinite; + position: absolute; top: -4px; right: 16px; + width: 48px; height: 48px; } -.bright-compare { display: flex; gap: 12px; align-items: center; } -.bright-panel { flex: 1; } +.bright-sun__core { + position: absolute; inset: 10px; + background: radial-gradient(circle, #fbbf24 40%, rgba(251,191,36,0.3) 70%, transparent 100%); + border-radius: 50%; + animation: bright-sun-pulse 3s ease-in-out infinite; +} +.bright-sun__ray { + position: absolute; top: 0; left: 50%; width: 2px; height: 10px; + background: rgba(251,191,36,0.5); border-radius: 1px; + transform-origin: 50% 100%; + animation: bright-ray-fade 3s ease-in-out infinite; +} +.bright-sun__ray--1 { transform: rotate(0deg) translateX(-50%); } +.bright-sun__ray--2 { transform: rotate(45deg) translateX(-50%); animation-delay: 0.375s; } +.bright-sun__ray--3 { transform: rotate(90deg) translateX(-50%); animation-delay: 0.75s; } +.bright-sun__ray--4 { transform: rotate(135deg) translateX(-50%); animation-delay: 1.125s; } +.bright-sun__ray--5 { transform: rotate(180deg) translateX(-50%); animation-delay: 1.5s; } +.bright-sun__ray--6 { transform: rotate(225deg) translateX(-50%); animation-delay: 1.875s; } +.bright-sun__ray--7 { transform: rotate(270deg) translateX(-50%); animation-delay: 2.25s; } +.bright-sun__ray--8 { transform: rotate(315deg) translateX(-50%); animation-delay: 2.625s; } + +.bright-compare { display: flex; gap: 12px; align-items: flex-start; } +.bright-panel { flex: 1; display: flex; flex-direction: column; gap: 8px; } + +/* Screen wrapper */ .bright-panel__screen { - border-radius: 8px; padding: 24px 12px; text-align: center; - border: 2px solid rgba(255,255,255,0.08); + border-radius: 6px; overflow: hidden; + border: 2px solid rgba(255,255,255,0.06); + position: relative; } -.bright-panel__screen--dim { - background: rgba(255,255,255,0.03); opacity: 0.4; +/* Content inside both screens */ +.bright-panel__content { + padding: 16px 12px; + display: flex; flex-direction: column; gap: 4px; } +.bright-panel__eyebrow { + font-size: 9px; text-transform: uppercase; letter-spacing: 1px; +} +.bright-panel__title { font-size: 15px; font-weight: 800; line-height: 1.2; } +.bright-panel__sub { font-size: 10px; margin-top: 2px; } + +/* Dim (indoor) screen — content washed out by sunlight */ +.bright-panel__screen--dim { background: rgba(30,30,40,0.6); } +.bright-panel__screen--dim .bright-panel__content { filter: blur(0.5px); opacity: 0.2; } +.bright-panel__screen--dim .bright-panel__eyebrow, +.bright-panel__screen--dim .bright-panel__title, +.bright-panel__screen--dim .bright-panel__sub { color: rgba(255,255,255,0.6); } +.bright-panel__glare { + position: absolute; inset: 0; + background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 60%); + pointer-events: none; +} + +/* Vivid (outdoor) screen — crisp and bright */ .bright-panel__screen--vivid { - background: linear-gradient(135deg, #1a1a2e, #16213e); + background: linear-gradient(135deg, #0a1628 0%, #0f1f3d 100%); animation: bright-vivid-pulse 3s ease-in-out infinite; } -.bright-panel__text { font-size: 14px; font-weight: 600; color: #fff; } -.bright-panel__screen--dim .bright-panel__text { color: rgba(255,255,255,0.3); } -.bright-panel__label { - text-align: center; font-size: 11px; color: rgba(255,255,255,0.5); - margin-top: 8px; font-weight: 600; -} -.bright-vs { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.3); } +.bright-panel__screen--vivid .bright-panel__eyebrow { color: rgba(255,255,255,0.6); } +.bright-panel__screen--vivid .bright-panel__title { color: #fff; } +.bright-panel__screen--vivid .bright-panel__sub { color: rgba(255,255,255,0.7); } -@keyframes bright-sun-glow { - 0%, 100% { opacity: 0.7; transform: scale(1); } - 50% { opacity: 1; transform: scale(1.2); } +/* Spec row under each panel */ +.bright-panel__spec { padding: 0 2px; } +.bright-panel__nits { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 2px; } +.bright-panel__label { font-size: 10px; color: rgba(255,255,255,0.4); margin-bottom: 5px; } +.bright-panel__bar { + height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; +} +.bright-panel__bar-fill { height: 100%; border-radius: 2px; } +.bright-panel__bar-fill--low { width: 14%; background: rgba(255,255,255,0.25); } +.bright-panel__bar-fill--high { + width: 100%; background: var(--color-primary); + animation: bright-bar-enter 1.5s ease forwards; +} + +.bright-vs { + font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.25); + align-self: center; flex-shrink: 0; margin-top: -24px; +} + +@keyframes bright-sun-pulse { + 0%, 100% { opacity: 0.8; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.15); } +} +@keyframes bright-ray-fade { + 0%, 100% { opacity: 0.4; } + 50% { opacity: 0.8; } } @keyframes bright-vivid-pulse { - 0%, 100% { box-shadow: 0 0 12px rgba(216,51,2,0.15); } - 50% { box-shadow: 0 0 24px rgba(216,51,2,0.3); } + 0%, 100% { box-shadow: 0 0 16px rgba(216,51,2,0.1); } + 50% { box-shadow: 0 0 28px rgba(216,51,2,0.25); } +} +@keyframes bright-bar-enter { + from { width: 0%; } + to { width: 100%; } } @media (prefers-reduced-motion: reduce) { - .bright-sun { animation: none; } + .bright-sun__core { animation: none; } + .bright-sun__ray { animation: none; opacity: 0.4; } .bright-panel__screen--vivid { animation: none; } + .bright-panel__bar-fill--high { animation: none; } } @media (max-width: 640px) { - .bright-panel__screen { padding: 18px 10px; } + .bright-panel__content { padding: 12px 8px; } + .bright-panel__title { font-size: 13px; } } /* ═══════════════════════════════════════════════════════════ @@ -8904,61 +9372,97 @@ p:last-child { margin-bottom: 0; } box-shadow: none; } -.cell-stage { - width: 100%; max-width: 380px; margin: 0 auto; - display: flex; flex-direction: column; align-items: center; gap: 16px; - padding: 20px 0; -} -.cell-tower { position: relative; width: 80px; height: 100px; } -.cell-tower__mast { - position: absolute; left: 50%; bottom: 0; width: 6px; height: 60px; - background: linear-gradient(to top, #374151, #6b7280); - transform: translateX(-50%); border-radius: 3px; -} -.cell-tower__base { - position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); - width: 30px; height: 8px; background: #374151; border-radius: 2px; -} -.cell-wave { - position: absolute; top: 10px; left: 50%; transform: translateX(-50%); - border: 2px solid rgba(216,51,2,0.4); border-radius: 50%; - animation: cell-wave-expand 3s ease-out infinite; -} -.cell-wave--1 { width: 30px; height: 30px; animation-delay: 0s; } -.cell-wave--2 { width: 50px; height: 50px; animation-delay: 1s; } -.cell-wave--3 { width: 70px; height: 70px; animation-delay: 2s; } -.cell-badge { - font-size: 14px; font-weight: 800; color: #fff; - background: rgba(216,51,2,0.15); padding: 6px 16px; border-radius: 20px; - letter-spacing: 1px; -} -.cell-signal { display: flex; gap: 3px; align-items: flex-end; } -.cell-signal__bar { - width: 6px; background: #22c55e; border-radius: 2px; - animation: cell-bar-fill 3s ease-in-out infinite; -} -.cell-signal__bar--1 { height: 6px; animation-delay: 0s; } -.cell-signal__bar--2 { height: 12px; animation-delay: 0.3s; } -.cell-signal__bar--3 { height: 18px; animation-delay: 0.6s; } -.cell-signal__bar--4 { height: 24px; animation-delay: 0.9s; } -.cell-status { font-size: 12px; color: #22c55e; font-weight: 600; } +.cell-stage { width: 100%; max-width: 380px; margin: 0 auto; } -@keyframes cell-wave-expand { - 0% { opacity: 1; transform: translateX(-50%) scale(0.5); } - 100% { opacity: 0; transform: translateX(-50%) scale(1.5); } +/* Device management card */ +.cell-device { + background: #0a0d14; + border: 1px solid #1a2035; border-radius: 10px; + overflow: hidden; + box-shadow: 0 16px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); + color: #fff; } -@keyframes cell-bar-fill { +.cell-device__hdr { + display: flex; justify-content: space-between; align-items: center; + padding: 12px 16px; background: rgba(255,255,255,0.04); + border-bottom: 1px solid rgba(255,255,255,0.06); +} +.cell-device__title { + font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.6); + text-transform: uppercase; letter-spacing: 0.8px; +} +.cell-device__badge { + font-size: 10px; font-weight: 700; + background: rgba(216,51,2,0.15); color: #f87060; + padding: 3px 10px; border-radius: 20px; + border: 1px solid rgba(216,51,2,0.3); + animation: cell-badge-pulse 3s ease-in-out infinite; +} +.cell-device__info { + padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; +} +.cell-device__row { + display: flex; justify-content: space-between; align-items: center; +} +.cell-device__key { + color: rgba(255,255,255,0.4); font-size: 11px; font-weight: 600; + text-transform: uppercase; letter-spacing: 0.5px; +} +.cell-device__val { + color: #fff; font-weight: 600; font-size: 13px; + display: flex; align-items: center; gap: 6px; +} + +/* Inline signal bars */ +.cell-signal { + display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; +} +.cell-signal__bar { + width: 4px; border-radius: 1px; background: #22c55e; + animation: cell-bar-pulse 3s ease-in-out infinite; +} +.cell-signal__bar:nth-child(1) { height: 5px; animation-delay: 0s; } +.cell-signal__bar:nth-child(2) { height: 8px; animation-delay: 0.2s; } +.cell-signal__bar:nth-child(3) { height: 11px; animation-delay: 0.4s; } +.cell-signal__bar:nth-child(4) { height: 14px; animation-delay: 0.6s; } + +/* Status footer */ +.cell-device__status { + display: flex; align-items: center; gap: 7px; + padding: 10px 16px; + background: rgba(34,197,94,0.06); + border-top: 1px solid rgba(34,197,94,0.12); + font-size: 12px; +} +.cell-device__dot { + width: 7px; height: 7px; border-radius: 50%; background: #22c55e; + animation: cell-dot-pulse 2s ease-in-out infinite; flex-shrink: 0; +} +.cell-device__online { color: #22c55e; font-weight: 700; } +.cell-device__sep { color: rgba(255,255,255,0.2); } +.cell-device__content { color: rgba(255,255,255,0.5); } + +@keyframes cell-badge-pulse { + 0%, 100% { opacity: 0.8; background: rgba(216,51,2,0.15); } + 50% { opacity: 1; background: rgba(216,51,2,0.25); } +} +@keyframes cell-bar-pulse { 0%, 100% { opacity: 1; } - 50% { opacity: 0.3; } + 50% { opacity: 0.4; } +} +@keyframes cell-dot-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.8); } } @media (prefers-reduced-motion: reduce) { - .cell-wave { animation: none; opacity: 0.3; } - .cell-signal__bar { animation: none; } + .cell-device__badge { animation: none; } + .cell-signal__bar { animation: none; } + .cell-device__dot { animation: none; } } @media (max-width: 640px) { - .cell-tower { transform: scale(0.85); } + .cell-device__info { padding: 12px 14px; } } /* ═══════════════════════════════════════════════════════════ @@ -9214,6 +9718,11 @@ p:last-child { margin-bottom: 0; } .groups-branch { padding-left: 14px; margin-left: 12px; } } +[data-theme="light"] .groups-node { background: rgba(0,0,0,0.04); } +[data-theme="light"] .groups-node__name { color: var(--color-text); } +[data-theme="light"] .groups-node__count { color: var(--color-text-muted); background: rgba(0,0,0,0.06); } +[data-theme="light"] .groups-branch { border-left-color: var(--color-border); } + /* ═══════════════════════════════════════════════════════════ MONITORING DASHBOARD ANIMATION ═══════════════════════════════════════════════════════════ */ diff --git a/theme/blocks/editor.js b/theme/blocks/editor.js index add7336..6740367 100644 --- a/theme/blocks/editor.js +++ b/theme/blocks/editor.js @@ -606,6 +606,7 @@ visual: { type: 'string', default: '' }, reversed: { type: 'boolean', default: false }, cloudAnim: { type: 'boolean', default: false }, + bundleAnim: { type: 'boolean', default: false }, imgId: { type: 'number', default: 0 }, imgUrl: { type: 'string', default: '' }, imgAlt: { type: 'string', default: '' }, @@ -647,7 +648,8 @@ el(TC, { label: 'Label', value: a.label, onChange: function (v) { s({ label: v }); } }), 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: '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(PB, { title: 'Visual Image', initialOpen: false }, el(MUC, null, @@ -681,7 +683,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.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.imgUrl ? ' has-img' : ''))), style: a.reversed ? { direction: 'ltr' } : {} }, visualContent) ) ) ) diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 3ac601b..141f88b 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -340,6 +340,7 @@ add_action('init', function () { 'visual' => ['type' => 'string', 'default' => ''], 'reversed' => ['type' => 'boolean', 'default' => false], 'cloudAnim' => ['type' => 'boolean', 'default' => false], + 'bundleAnim' => ['type' => 'boolean', 'default' => false], 'imgId' => ['type' => 'number', 'default' => 0], 'imgUrl' => ['type' => 'string', 'default' => ''], 'imgAlt' => ['type' => 'string', 'default' => ''], @@ -1006,7 +1007,7 @@ function oribi_render_intro_section($a)

-
> +
> '; @@ -1015,6 +1016,30 @@ function oribi_render_intro_section($a) echo '
'; echo '
'; } + elseif (!empty($a['bundleAnim'])) { + $pkg = ''; // .pkg-stage + echo $pkg; + } else { echo wp_kses_post($a['visual']); } @@ -2699,12 +2724,46 @@ function oribi_render_platform_row($a) $en .= '
'; } $en .= '
'; - $en .= '
'; - $en .= '
'; - $en .= '
Your Content Here
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + for ($i = 0; $i < 5; $i++) { $en .= '
'; } $en .= '
'; - $en .= '
IP65
'; - $en .= '
🌡 -20°C to 50°C
'; + $en .= '
IP65
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
Riverside Market
'; + $en .= '
18°Cloudy
'; + $en .= '
'; + $en .= '
'; + $en .= '
🕐 Open 8am – 3pm today
'; + $en .= '
📍 Victoria Embankment
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
Today Only
'; + $en .= '
Fresh Catch &
Artisan Bread
'; + $en .= '
Stall B3 →
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + for ($i = 0; $i < 5; $i++) { $en .= '
'; } + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= '
'; + $en .= 'IP65'; + $en .= '-20°C to +50°C'; + $en .= 'Fan Active'; $en .= '
'; $en .= '
'; $visual_html = $en; @@ -2713,29 +2772,69 @@ function oribi_render_platform_row($a) elseif (!empty($a['brightnessAnim'])) { /* ── High-Brightness Comparison ── */ $br = ''; $visual_html = $br; $visual_cls = 'platform-visual has-brightness'; } elseif (!empty($a['cellularAnim'])) { - /* ── Cellular Connectivity Tower ── */ + /* ── Cellular Connectivity — Device Status Card ── */ $cl = '