OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Add promotional slides with animations to TV stick component

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 12:13:10 -05:00
parent 1d49929ed3
commit ef0532ef9b
3 changed files with 116 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
theme/assets/css/main.css
View File

@@ -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;

18
theme/assets/js/main.js
View File

@@ -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);
}
})();

8
theme/blocks/index.php
View File

@@ -1504,7 +1504,13 @@ function oribi_render_platform_row( $a ) {
$ts = '<div class="ts-stage" data-tv-stick-anim aria-hidden="true">';
$ts .= '<div class="ts-tv">';
$ts .= '<div class="ts-tv__body">';
$ts .= '<div class="ts-tv__screen"></div>';
$ts .= '<div class="ts-tv__screen">';
$ts .= '<div class="ts-slides">';
$ts .= '<div class="ts-slide ts-slide--1"><div class="ts-slide__accent"></div><div class="ts-slide__heading"></div><div class="ts-slide__sub"></div></div>';
$ts .= '<div class="ts-slide ts-slide--2"><div class="ts-slide__badge"></div><div class="ts-slide__heading"></div><div class="ts-slide__bar"></div></div>';
$ts .= '<div class="ts-slide ts-slide--3"><div class="ts-slide__row"><div class="ts-slide__block"></div><div class="ts-slide__block"></div></div><div class="ts-slide__heading"></div></div>';
$ts .= '</div>'; // ts-slides
$ts .= '</div>'; // ts-tv__screen
$ts .= '<div class="ts-tv__port"></div>';
$ts .= '</div>';
$ts .= '<div class="ts-tv__feet"><div class="ts-tv__foot"></div><div class="ts-tv__foot"></div></div>';