diff --git a/pages/design.php b/pages/design.php index 2cd99ee..0c7a632 100644 --- a/pages/design.php +++ b/pages/design.php @@ -11,11 +11,11 @@ return <<<'ORIBI_SYNC_CONTENT' - + - + - + diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index acc33c9..d99f4d2 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -9049,3 +9049,721 @@ p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .member-slide__title { font-size: 20px; } } + +/* ═══════════════════════════════════════════════════════════════ + VIDEO & MOTION GRAPHICS ANIMATION (.platform-visual.has-video-motion) + Looping reel with kinetic typography and motion preview + ═══════════════════════════════════════════════════════════════ */ +.platform-visual.has-video-motion { + background: none !important; + border: none !important; + border-radius: 0; + aspect-ratio: unset; + padding: 0; + overflow: visible; + box-shadow: none; +} + +.vidmo-stage { + width: 100%; + max-width: 520px; + margin: 0 auto; +} + +.vidmo-tv { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.vidmo-tv__body { + width: 100%; + background: #111; + border: 5px solid #1a1a1a; + border-radius: 8px 8px 4px 4px; + outline: 2px solid #000; + padding: 4px; + box-shadow: 0 14px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); +} + +.vidmo-tv__screen { + width: 100%; + aspect-ratio: 16/9; + background: #0a0a0a; + border-radius: 2px; + overflow: hidden; + position: relative; +} + +.vidmo-tv__feet { + display: flex; + justify-content: space-between; + width: 60%; + max-width: 300px; +} + +.vidmo-tv__foot { + width: 12px; + height: 8px; + background: #111; + border: 1px solid #000; + border-radius: 0 0 4px 4px; +} + +/* Slides */ +.vidmo-slides { + position: relative; + width: 100%; + height: 100%; +} + +.vidmo-slide { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 24px; + text-align: center; + opacity: 0; + animation: vidmo-cycle 12s infinite; +} + +.vidmo-slide--kinetic { animation-delay: 0s; } +.vidmo-slide--promo { animation-delay: 4s; } +.vidmo-slide--loop { animation-delay: 8s; } + +/* Kinetic typography slide */ +.vidmo-kinetic { + display: flex; + flex-direction: column; + gap: 4px; + align-items: center; +} + +.vidmo-kinetic__word { + font-weight: 800; + text-transform: uppercase; + letter-spacing: 2px; + color: #fff; + opacity: 0; + animation: vidmo-word-in 12s infinite; +} + +.vidmo-kinetic__word--1 { font-size: 28px; animation-delay: 0.2s; } +.vidmo-kinetic__word--2 { font-size: 20px; color: var(--color-primary); animation-delay: 0.5s; } +.vidmo-kinetic__word--3 { font-size: 16px; color: rgba(255,255,255,0.5); animation-delay: 0.8s; } + +/* Promo slide */ +.vidmo-promo { + position: relative; + width: 80%; + max-width: 280px; +} + +.vidmo-promo__bg { + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(216,51,2,0.2), transparent); + border-radius: 10px; + animation: vidmo-bg-pulse 4s ease-in-out infinite; +} + +.vidmo-promo__label { + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1.5px; + color: var(--color-primary); + margin-bottom: 6px; + position: relative; +} + +.vidmo-promo__title { + font-size: 22px; + font-weight: 800; + color: #fff; + position: relative; +} + +.vidmo-promo__sub { + font-size: 12px; + color: rgba(255,255,255,0.5); + margin-top: 6px; + position: relative; +} + +/* Loop counter slide */ +.vidmo-loop { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.vidmo-loop__icon { + width: 40px; + height: 40px; + border-radius: 50%; + border: 2px solid var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + animation: vidmo-icon-spin 4s linear infinite; +} + +.vidmo-loop__text { + font-size: 13px; + font-weight: 600; + color: rgba(255,255,255,0.6); +} + +.vidmo-loop__formats { + display: flex; + gap: 8px; +} + +.vidmo-loop__fmt { + font-size: 10px; + font-weight: 700; + padding: 3px 8px; + border-radius: 4px; + background: rgba(255,255,255,0.06); + color: rgba(255,255,255,0.4); + letter-spacing: 0.5px; +} + +/* Progress bar */ +.vidmo-progress { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + background: rgba(255,255,255,0.06); +} + +.vidmo-progress__bar { + height: 100%; + background: var(--color-primary); + animation: vidmo-progress-fill 12s linear infinite; +} + +@keyframes vidmo-cycle { + 0%, 2% { opacity: 0; transform: translateY(10px); } + 5%, 30% { opacity: 1; transform: translateY(0); } + 33%, 100%{ opacity: 0; transform: translateY(-10px); } +} + +@keyframes vidmo-word-in { + 0%, 2% { opacity: 0; transform: scale(0.8); } + 5%, 28% { opacity: 1; transform: scale(1); } + 33%, 100%{ opacity: 0; transform: scale(1.05); } +} + +@keyframes vidmo-bg-pulse { + 0%, 100% { opacity: 0.6; } + 50% { opacity: 1; } +} + +@keyframes vidmo-icon-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +@keyframes vidmo-progress-fill { + 0% { width: 0%; } + 95% { width: 100%; } + 100% { width: 0%; } +} + +@media (prefers-reduced-motion: reduce) { + .vidmo-slide { animation: none; } + .vidmo-slide--kinetic { opacity: 1; transform: none; } + .vidmo-kinetic__word { animation: none; opacity: 1; transform: none; } + .vidmo-loop__icon { animation: none; } + .vidmo-progress__bar { animation: none; width: 60%; } +} + +@media (max-width: 640px) { + .vidmo-kinetic__word--1 { font-size: 22px; } + .vidmo-promo__title { font-size: 18px; } +} + +/* ═══════════════════════════════════════════════════════════════ + BRANDED LAYOUT DESIGN ANIMATION (.platform-visual.has-brand-layout) + Template builder showing brand elements snapping into place + ═══════════════════════════════════════════════════════════════ */ +.platform-visual.has-brand-layout { + background: none !important; + border: none !important; + border-radius: 0; + aspect-ratio: unset; + padding: 0; + overflow: visible; + box-shadow: none; +} + +.blay-stage { + width: 100%; + max-width: 480px; + margin: 0 auto; +} + +.blay-editor { + background: #0d1117; + border: 1px solid #1e2435; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); +} + +.blay-toolbar { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 16px; + background: rgba(255,255,255,0.03); + border-bottom: 1px solid rgba(255,255,255,0.06); +} + +.blay-toolbar__title { + font-size: 12px; + font-weight: 600; + color: rgba(255,255,255,0.5); + flex: 1; +} + +.blay-toolbar__dots { + display: flex; + gap: 4px; +} + +.blay-toolbar__dot { + width: 8px; + height: 8px; + border-radius: 50%; +} + +.blay-toolbar__dot--r { background: #ff5f56; } +.blay-toolbar__dot--y { background: #ffbd2e; } +.blay-toolbar__dot--g { background: #27c93f; } + +.blay-body { + display: grid; + grid-template-columns: 1fr 140px; +} + +/* Canvas area */ +.blay-canvas { + padding: 16px; + border-right: 1px solid rgba(255,255,255,0.06); +} + +.blay-preview { + background: #0a0a0e; + border-radius: 6px; + overflow: hidden; + position: relative; + aspect-ratio: 16/10; +} + +/* Brand elements dropping in */ +.blay-el { + position: absolute; + opacity: 0; + animation: blay-drop 10s infinite; +} + +.blay-el--logo { + top: 12px; + left: 12px; + width: 60px; + height: 18px; + background: var(--color-primary); + border-radius: 3px; + animation-delay: 0s; +} + +.blay-el--hero { + top: 38px; + left: 12px; + right: 12px; + height: 48%; + background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08)); + border-radius: 4px; + animation-delay: 0.5s; +} + +.blay-el--headline { + bottom: 38%; + left: 12px; + width: 65%; + height: 12px; + background: rgba(255,255,255,0.2); + border-radius: 2px; + animation-delay: 1s; +} + +.blay-el--body { + bottom: 28%; + left: 12px; + width: 80%; + height: 6px; + background: rgba(255,255,255,0.08); + border-radius: 2px; + animation-delay: 1.3s; +} + +.blay-el--body2 { + bottom: 22%; + left: 12px; + width: 70%; + height: 6px; + background: rgba(255,255,255,0.06); + border-radius: 2px; + animation-delay: 1.5s; +} + +.blay-el--cta { + bottom: 10%; + left: 12px; + width: 80px; + height: 24px; + background: var(--color-primary); + border-radius: 4px; + animation-delay: 1.8s; +} + +.blay-el--accent { + top: 0; + right: 0; + width: 4px; + height: 100%; + background: var(--color-primary); + animation-delay: 2.1s; +} + +/* Brand guide panel */ +.blay-panel { + padding: 14px 12px; +} + +.blay-panel__title { + font-size: 9px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + color: rgba(255,255,255,0.35); + margin-bottom: 12px; +} + +.blay-colors { + display: flex; + gap: 6px; + margin-bottom: 14px; +} + +.blay-color { + width: 22px; + height: 22px; + border-radius: 4px; + border: 1px solid rgba(255,255,255,0.1); +} + +.blay-color--1 { background: var(--color-primary); } +.blay-color--2 { background: #1a1a2e; } +.blay-color--3 { background: #fff; } +.blay-color--4 { background: #6b7280; } + +.blay-fonts { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 14px; +} + +.blay-font { + display: flex; + flex-direction: column; + gap: 2px; +} + +.blay-font__label { + font-size: 8px; + text-transform: uppercase; + letter-spacing: 0.5px; + color: rgba(255,255,255,0.25); +} + +.blay-font__sample { + font-size: 14px; + font-weight: 700; + color: rgba(255,255,255,0.6); +} + +.blay-font__sample--body { + font-size: 11px; + font-weight: 400; +} + +.blay-spacing { + display: flex; + flex-direction: column; + gap: 4px; +} + +.blay-spacing__label { + font-size: 8px; + text-transform: uppercase; + letter-spacing: 0.5px; + color: rgba(255,255,255,0.25); +} + +.blay-spacing__bars { + display: flex; + align-items: flex-end; + gap: 3px; + height: 20px; +} + +.blay-spacing__bar { + width: 12px; + border-radius: 2px; + background: rgba(255,255,255,0.1); +} + +.blay-spacing__bar--sm { height: 6px; } +.blay-spacing__bar--md { height: 12px; } +.blay-spacing__bar--lg { height: 18px; } +.blay-spacing__bar--xl { height: 20px; } + +@keyframes blay-drop { + 0%, 5% { opacity: 0; transform: translateY(-8px); } + 12%, 75% { opacity: 1; transform: translateY(0); } + 85%, 100%{ opacity: 0; } +} + +@media (prefers-reduced-motion: reduce) { + .blay-el { animation: none; opacity: 1; transform: none; } +} + +@media (max-width: 640px) { + .blay-body { grid-template-columns: 1fr; } + .blay-panel { display: none; } +} + +/* ═══════════════════════════════════════════════════════════════ + DIGITAL MENU BOARD ANIMATION (.platform-visual.has-menu-board) + Rotating restaurant menu with categories and prices + ═══════════════════════════════════════════════════════════════ */ +.platform-visual.has-menu-board { + background: none !important; + border: none !important; + border-radius: 0; + aspect-ratio: unset; + padding: 0; + overflow: visible; + box-shadow: none; + font-size: inherit; +} + +.menu-stage { + width: 100%; + max-width: 520px; + margin: 0 auto; +} + +.menu-tv { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.menu-tv__body { + width: 100%; + background: #111; + border: 5px solid #1a1a1a; + border-radius: 8px 8px 4px 4px; + outline: 2px solid #000; + padding: 4px; + position: relative; + box-shadow: 0 14px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); +} + +.menu-tv__screen { + width: 100%; + aspect-ratio: 16/9; + background: #0a0a0a; + border-radius: 2px; + overflow: hidden; + position: relative; +} + +.menu-tv__feet { + display: flex; + justify-content: space-between; + width: 60%; + max-width: 300px; +} + +.menu-tv__foot { + width: 12px; + height: 8px; + background: #111; + border: 1px solid #000; + border-radius: 0 0 4px 4px; +} + +/* Live badge */ +.menu-live { + position: absolute; + top: 10px; + right: 10px; + display: flex; + align-items: center; + gap: 5px; + background: rgba(0,0,0,0.5); + padding: 3px 8px; + border-radius: 20px; + z-index: 10; + border: 1px solid rgba(255,255,255,0.1); + backdrop-filter: blur(4px); +} + +.menu-live__dot { + width: 6px; + height: 6px; + background: #4ade80; + border-radius: 50%; + box-shadow: 0 0 8px #4ade80; + animation: menu-live-pulse 2s ease-in-out infinite; +} + +.menu-live__text { + font-size: 9px; + color: #fff; + font-weight: 500; + letter-spacing: 0.3px; +} + +/* Menu slides */ +.menu-slides { + position: relative; + width: 100%; + height: 100%; +} + +.menu-slide { + position: absolute; + inset: 0; + opacity: 0; + animation: menu-slide-fade 9s infinite; + display: flex; + flex-direction: column; +} + +.menu-slide--mains { animation-delay: 0s; } +.menu-slide--drinks { animation-delay: 3s; } +.menu-slide--dessert { animation-delay: 6s; } + +.menu-content { + padding: 20px 28px; + height: 100%; + display: flex; + flex-direction: column; + background: linear-gradient(135deg, rgba(15,15,20,1) 0%, rgba(25,25,35,1) 100%); + color: #fff; +} + +.menu-content__hd { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 6px; +} + +.menu-content__badge { + font-size: 10px; + text-transform: uppercase; + letter-spacing: 1px; + background: var(--color-primary); + padding: 2px 8px; + border-radius: 4px; + font-weight: 700; +} + +.menu-content__time { + font-size: 11px; + color: rgba(255,255,255,0.5); + font-family: monospace; +} + +.menu-content__title { + font-size: 22px; + font-weight: 800; + margin-bottom: 16px; + color: #fff; +} + +.menu-content__items { + display: flex; + flex-direction: column; + gap: 12px; +} + +.menu-content__item { + display: flex; + justify-content: space-between; + align-items: flex-start; + border-bottom: 1px solid rgba(255,255,255,0.05); + padding-bottom: 6px; +} + +.menu-content__name { + font-size: 14px; + font-weight: 600; + color: #fff; + margin-bottom: 2px; +} + +.menu-content__desc { + font-size: 11px; + color: rgba(255,255,255,0.35); +} + +.menu-content__price { + font-size: 15px; + font-weight: 700; + color: var(--color-primary); + white-space: nowrap; +} + +@keyframes menu-live-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(0.8); } +} + +@keyframes menu-slide-fade { + 0%, 2% { opacity: 0; transform: translateY(10px); } + 5%, 30% { opacity: 1; transform: translateY(0); } + 33%, 100%{ opacity: 0; transform: translateY(-10px); } +} + +@media (prefers-reduced-motion: reduce) { + .menu-slide { animation: none; } + .menu-slide--mains { opacity: 1; transform: none; } + .menu-live__dot { animation: none; } +} + +@media (max-width: 640px) { + .menu-content { padding: 14px 18px; } + .menu-content__title { font-size: 17px; margin-bottom: 10px; } + .menu-content__name { font-size: 12px; } + .menu-content__desc { display: none; } + .menu-content__price { font-size: 13px; } +} diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 0132e98..3c95322 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -605,6 +605,9 @@ add_action('init', function () { 'waitingRoomAnim' => ['type' => 'boolean', 'default' => false], 'multiZoneAnim' => ['type' => 'boolean', 'default' => false], 'membershipAnim' => ['type' => 'boolean', 'default' => false], + 'videoMotionAnim' => ['type' => 'boolean', 'default' => false], + 'brandLayoutAnim' => ['type' => 'boolean', 'default' => false], + 'menuBoardAnim' => ['type' => 'boolean', 'default' => false], 'galleryIds' => ['type' => 'array', 'default' => [], 'items' => ['type' => 'number']], ], 'supports' => $block_supports, @@ -2849,6 +2852,180 @@ function oribi_render_platform_row($a) $visual_html = $ha; $visual_cls = 'platform-visual has-hospitality'; } + elseif (!empty($a['videoMotionAnim'])) { + /* ── Video & Motion Graphics: TV with kinetic text, promo, loop preview ── */ + $vm = ''; // vidmo-stage + + $visual_html = $vm; + $visual_cls = 'platform-visual has-video-motion'; + } + elseif (!empty($a['brandLayoutAnim'])) { + /* ── Branded Layout Design: template builder with brand guide ── */ + $bl = ''; // blay-stage + + $visual_html = $bl; + $visual_cls = 'platform-visual has-brand-layout'; + } + elseif (!empty($a['menuBoardAnim'])) { + /* ── Digital Menu Board: TV with rotating menu categories ── */ + $mb = ''; // menu-stage + + $visual_html = $mb; + $visual_cls = 'platform-visual has-menu-board'; + } elseif (!empty($a['cameraAnim'])) { $visual_html = oribi_render_camera_animation(); $visual_cls = 'platform-visual has-video-editor';