diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index f957245..4f8da2f 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -2487,6 +2487,97 @@ p:last-child { margin-bottom: 0; } 40% { filter: brightness(1.25); } 100% { filter: brightness(1); } } +/* ── Promotional slides inside screen ── */ +.ts-slides { + position: absolute; + inset: 0; + opacity: 0; + transition: opacity 0.6s ease; + z-index: 1; +} +.ts-stage.is-playing .ts-slides { opacity: 1; } +.ts-slide { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 12%; + opacity: 0; + transition: opacity 0.7s ease; +} +.ts-slide.is-active { opacity: 1; } +/* — Slide 1: Welcome / hero style — */ +.ts-slide--1 { + background: linear-gradient(135deg, #1a2940 0%, #0f1923 100%); +} +.ts-slide--1 .ts-slide__accent { + width: 30px; + height: 3px; + background: #4ade80; + border-radius: 2px; + margin-bottom: 8px; +} +.ts-slide--1 .ts-slide__heading { + width: 70%; + height: 8px; + background: rgba(255,255,255,0.85); + border-radius: 2px; + margin-bottom: 6px; +} +.ts-slide--1 .ts-slide__sub { + width: 50%; + height: 5px; + background: rgba(255,255,255,0.35); + border-radius: 2px; +} +/* — Slide 2: Sale / promo style — */ +.ts-slide--2 { + background: linear-gradient(135deg, #14532d 0%, #052e16 100%); +} +.ts-slide--2 .ts-slide__badge { + width: 22px; + height: 22px; + background: #4ade80; + border-radius: 50%; + margin-bottom: 8px; +} +.ts-slide--2 .ts-slide__heading { + width: 60%; + height: 7px; + background: rgba(255,255,255,0.9); + border-radius: 2px; + margin-bottom: 6px; +} +.ts-slide--2 .ts-slide__bar { + width: 45%; + height: 12px; + background: #4ade80; + border-radius: 3px; +} +/* — Slide 3: Menu / info-board style — */ +.ts-slide--3 { + background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); +} +.ts-slide--3 .ts-slide__row { + display: flex; + gap: 8px; + margin-bottom: 8px; +} +.ts-slide--3 .ts-slide__block { + width: 36px; + height: 28px; + background: rgba(255,255,255,0.12); + border-radius: 3px; + border: 1px solid rgba(74,222,128,0.25); +} +.ts-slide--3 .ts-slide__heading { + width: 55%; + height: 5px; + background: rgba(255,255,255,0.45); + border-radius: 2px; +} /* HDMI port on back-right of TV */ .ts-tv__port { position: absolute; diff --git a/theme/assets/js/main.js b/theme/assets/js/main.js index 91b6773..4192758 100644 --- a/theme/assets/js/main.js +++ b/theme/assets/js/main.js @@ -685,6 +685,7 @@ document.addEventListener('DOMContentLoaded', () => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { stages.forEach(function (stage) { stage.classList.add('is-plugged'); + startTsSlides(stage); }); return; } @@ -698,6 +699,10 @@ document.addEventListener('DOMContentLoaded', () => { // Add plugged state after slide-in completes (1.4s) setTimeout(function () { stage.classList.add('is-plugged'); + // Start promotional slide cycling after screen glow (0.9s) + setTimeout(function () { + startTsSlides(stage); + }, 900); }, 1400); io.unobserve(stage); } @@ -705,4 +710,17 @@ document.addEventListener('DOMContentLoaded', () => { }, { threshold: 0.3 }); stages.forEach(function (stage) { io.observe(stage); }); } + + function startTsSlides(stage) { + var slides = stage.querySelectorAll('.ts-slide'); + if (!slides.length) return; + var current = 0; + slides[0].classList.add('is-active'); + stage.classList.add('is-playing'); + setInterval(function () { + slides[current].classList.remove('is-active'); + current = (current + 1) % slides.length; + slides[current].classList.add('is-active'); + }, 3000); + } })(); diff --git a/theme/blocks/index.php b/theme/blocks/index.php index f9c2be4..7652c77 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -1504,7 +1504,13 @@ function oribi_render_platform_row( $a ) { $ts = '