Enhance Solutions Page and Add Touchscreen Animation
- Updated descriptions for various industry sections on the solutions page to improve clarity and engagement. - Introduced a new touchscreen display animation in the CSS, enhancing the visual appeal of the kiosks page. - Modified JavaScript to update train departure data with local destinations, improving relevance for users. - Added a new toggle for touchscreen display animations in the block editor, allowing for customizable visual effects. - Updated the rendering logic to include touchscreen animations in the intro section, providing a more interactive experience. - Made minor text adjustments across various sections for improved readability and consistency.
This commit is contained in:
Matt Batchelder
@@ -12115,6 +12115,196 @@ p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
COMPATIBLE TOUCHSCREEN DISPLAYS ANIMATION
|
||||
intro-section touchscreenAnim – kiosks page
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
.about-intro-visual.has-touchscreen-anim {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
aspect-ratio: unset;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ts-stage {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 1.75rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* ── Panel shell ───────────────────────────────────────────── */
|
||||
.ts-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ── Bezel ─────────────────────────────────────────────────── */
|
||||
.ts-bezel {
|
||||
background: #141418;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ts-bezel--large { width: 152px; height: 210px; }
|
||||
.ts-bezel--small { width: 96px; height: 126px; }
|
||||
|
||||
/* ── Screen ────────────────────────────────────────────────── */
|
||||
.ts-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(160deg, #0c1016 0%, #111827 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Subtle scan line */
|
||||
.ts-screen::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0; width: 100%; height: 2px;
|
||||
background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.2), transparent);
|
||||
animation: ts-scan 5s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes ts-scan {
|
||||
0% { top: 0; opacity: 0; }
|
||||
5% { opacity: 1; }
|
||||
95% { opacity: 1; }
|
||||
100% { top: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── UI chrome ─────────────────────────────────────────────── */
|
||||
.ts-ui-header {
|
||||
height: 22px;
|
||||
background: rgba(var(--color-primary-rgb), 0.25);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ts-ui-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px; top: 7px;
|
||||
width: 40px; height: 5px;
|
||||
background: rgba(255,255,255,0.35);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ts-ui-header--sm { height: 16px; margin-bottom: 6px; }
|
||||
.ts-ui-header--sm::before { width: 28px; height: 4px; top: 4px; }
|
||||
|
||||
.ts-ui-row {
|
||||
height: 15px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* rows pulse in sync with the touch ripples */
|
||||
.ts-ui-row--1 { animation: ts-row-pulse 6s ease-in-out infinite; animation-delay: 0.8s; }
|
||||
.ts-ui-row--2 { animation: ts-row-pulse 6s ease-in-out infinite; animation-delay: 2.4s; }
|
||||
.ts-ui-row--3 { animation: ts-row-pulse 6s ease-in-out infinite; animation-delay: 4.0s; }
|
||||
.ts-ui-row--4 { animation: ts-row-pulse 6s ease-in-out infinite; animation-delay: 5.2s; }
|
||||
.ts-ui-row--s1 { animation: ts-row-pulse 5s ease-in-out infinite; animation-delay: 1.2s; }
|
||||
.ts-ui-row--s2 { animation: ts-row-pulse 5s ease-in-out infinite; animation-delay: 2.8s; }
|
||||
.ts-ui-row--s3 { animation: ts-row-pulse 5s ease-in-out infinite; animation-delay: 4.2s; }
|
||||
|
||||
@keyframes ts-row-pulse {
|
||||
0%, 100% { background: rgba(255,255,255,0.07); }
|
||||
15%, 28% { background: rgba(var(--color-primary-rgb), 0.28);
|
||||
box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.15); }
|
||||
}
|
||||
|
||||
.ts-ui-btn {
|
||||
height: 18px;
|
||||
background: rgba(var(--color-primary-rgb), 0.35);
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
animation: ts-btn-glow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes ts-btn-glow {
|
||||
0%, 100% { background: rgba(var(--color-primary-rgb), 0.35); }
|
||||
50% { background: rgba(var(--color-primary-rgb), 0.6); }
|
||||
}
|
||||
|
||||
/* ── Touch ripples ─────────────────────────────────────────── */
|
||||
.ts-ripple {
|
||||
position: absolute;
|
||||
width: 0; height: 0;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255,255,255,0.55);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ts-ripple--a { left: 50%; top: 40%; animation: ts-ripple-expand 6s ease-out infinite; animation-delay: 1.0s; }
|
||||
.ts-ripple--b { left: 25%; top: 57%; animation: ts-ripple-expand 6s ease-out infinite; animation-delay: 2.6s; }
|
||||
.ts-ripple--c { left: 68%; top: 72%; animation: ts-ripple-expand 6s ease-out infinite; animation-delay: 4.2s; }
|
||||
.ts-ripple--d { left: 55%; top: 55%; animation: ts-ripple-expand 5s ease-out infinite; animation-delay: 1.5s; }
|
||||
|
||||
@keyframes ts-ripple-expand {
|
||||
0% { width: 0; height: 0; opacity: 0.9; }
|
||||
30% { opacity: 0.5; }
|
||||
100% { width: 52px; height: 52px; opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Stand (large floor panel) ─────────────────────────────── */
|
||||
.ts-stand { display: flex; flex-direction: column; align-items: center; }
|
||||
|
||||
.ts-stem {
|
||||
width: 10px; height: 28px;
|
||||
background: #141418;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
.ts-base {
|
||||
width: 64px; height: 7px;
|
||||
background: #141418;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ── Feet (small countertop unit) ───────────────────────────── */
|
||||
.ts-feet { display: flex; justify-content: space-between; width: 56px; }
|
||||
|
||||
.ts-foot {
|
||||
width: 12px; height: 5px;
|
||||
background: #141418;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ts-screen::after,
|
||||
.ts-ripple,
|
||||
.ts-ui-btn { animation: none; opacity: 1; }
|
||||
.ts-ui-row { animation: none; background: rgba(255,255,255,0.1) !important; }
|
||||
.ts-ui-row--1, .ts-ui-row--3, .ts-ui-row--s2 {
|
||||
background: rgba(var(--color-primary-rgb), 0.22) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.ts-stage { gap: 1.25rem; }
|
||||
.ts-bezel--large { width: 120px; height: 168px; }
|
||||
.ts-bezel--small { width: 76px; height: 100px; }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
SELF CHECK-IN KIOSK ANIMATION
|
||||
Used on the kiosks page – platform-row selfCheckInAnim
|
||||
|
||||
Reference in New Issue
Block a user