Skip to content

Fine-tune and harden bridge-screens overlay for accessibility, performance, and mobile usability #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 2 commits into from
Closed

Fine-tune and harden bridge-screens overlay for accessibility, performance, and mobile usability #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7ffe6f
Initial plan
Copilot Oct 20, 2025
6d59995
Implement bridge-screens overlay with accessibility and performance e…
Copilot Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 77 additions & 15 deletions docs/bridge-screens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,19 @@
grid-template-columns: 2fr 1.2fr 0.8fr;
gap: 18px;
padding: 18px;
z-index: 0;
}

/* Pause animations when tab is backgrounded */
.bridge-screens.paused * {
animation-play-state: paused !important;
}

.bridge-screens .screen {
background: rgba(6, 12, 24, 0.35);
background: rgba(6, 12, 24, 0.25);
border: 1px solid rgba(0, 234, 255, 0.22);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0, 0, 0, .25) inset, 0 4px 22px rgba(0, 234, 255, .08);
box-shadow: 0 10px 32px rgba(0, 0, 0, .20) inset, 0 3px 18px rgba(0, 234, 255, .07);
overflow: hidden;
position: relative;
}
Expand All @@ -47,8 +53,8 @@
transparent 14px 18px
);
mix-blend-mode: screen;
animation: strip-shift 26s linear infinite;
opacity: .7;
animation: strip-shift 30s linear infinite;
opacity: .55;
}
@keyframes strip-shift {
0% { background-position: 0 0, -120px 0, 90px 0; }
Expand All @@ -60,7 +66,7 @@
.screen.main-hud svg {
width: 100%; height: 100%;
display: block;
filter: drop-shadow(0 0 8px rgba(0,234,255,.35));
filter: drop-shadow(0 0 6px rgba(0,234,255,.3));
}
.hud-ring { fill: none; stroke: rgba(0,234,255,.4); }
.hud-ring.thick { stroke-width: 2.5; }
Expand All @@ -72,8 +78,9 @@
stroke: var(--primary);
stroke-width: 2.2;
transform-origin: 50% 50%;
animation: hud-rotate 6s linear infinite;
animation: hud-rotate 7s linear infinite;
filter: drop-shadow(0 0 6px var(--primary));
will-change: transform;
}
@keyframes hud-rotate { to { transform: rotate(360deg); } }

Expand All @@ -82,7 +89,7 @@
transform-origin: 50% 50%;
animation: hud-pulse 2.4s ease-in-out infinite;
opacity: .85;
filter: drop-shadow(0 0 12px rgba(0,234,255,.55));
filter: drop-shadow(0 0 10px rgba(0,234,255,.5));
}
@keyframes hud-pulse {
0%,100% { transform: scale(.95); }
Expand All @@ -98,7 +105,8 @@
stroke-width: 2;
stroke-dasharray: 8 12;
animation: wave-run 2.6s linear infinite;
filter: drop-shadow(0 0 6px rgba(255, 209, 102, .6));
filter: drop-shadow(0 0 5px rgba(255, 209, 102, .5));
will-change: stroke-dashoffset;
}
@keyframes wave-run { to { stroke-dashoffset: -200; } }

Expand All @@ -107,15 +115,16 @@
.eq .bar {
height: 30%;
background: linear-gradient(180deg, var(--primary), var(--primary-2));
box-shadow: 0 0 12px rgba(0,234,255,.35);
box-shadow: 0 0 10px rgba(0,234,255,.3);
border-radius: 4px 4px 0 0;
animation: equalize 950ms ease-in-out infinite;
animation: equalize 1100ms ease-in-out infinite;
transform-origin: bottom center;
opacity: .9;
will-change: transform;
}
.eq .bar:nth-child(odd) { animation-duration: 1100ms; }
.eq .bar:nth-child(3n) { animation-duration: 820ms; }
.eq .bar:nth-child(5n) { animation-duration: 1250ms; }
.eq .bar:nth-child(odd) { animation-duration: 1265ms; }
.eq .bar:nth-child(3n) { animation-duration: 943ms; }
.eq .bar:nth-child(5n) { animation-duration: 1438ms; }
@keyframes equalize {
0%,100% { transform: scaleY(.25); }
45% { transform: scaleY(.96); }
Expand Down Expand Up @@ -155,9 +164,9 @@
@keyframes dot-blink { 0%,100%{opacity:.25} 50%{opacity:1} }

/* 6) Simple starship-like schematic (neutral, non-branded) */
.screen.schematic { position: absolute; width: 34%; aspect-ratio: 16/9; right: 24px; top: 24px; opacity: .7; }
.screen.schematic { position: absolute; width: 34%; aspect-ratio: 16/9; right: 24px; top: 24px; opacity: .6; }
.screen.schematic svg { width: 100%; height: 100%; display: block; }
.ship-stroke { fill: none; stroke: var(--primary); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(0,234,255,.35)); }
.ship-stroke { fill: none; stroke: var(--primary); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(0,234,255,.3)); }
.ship-fill { fill: rgba(0,234,255,.18); stroke: var(--primary); stroke-width: 1; }

/* Responsiveness */
Expand All @@ -173,4 +182,57 @@
grid-template-columns: 1fr;
}
.screen.schematic { position: absolute; right: 12px; top: 12px; width: 42%; }
}

/* Mobile layout: simpler, less busy */
@media (max-width: 720px) {
.bridge-screens {
grid-template-rows: 48px auto 180px 140px 240px;
gap: 12px;
padding: 12px;
}
.screen.top-strip {
height: 48px;
}
.screen.schematic {
display: none;
}
/* Reduce EQ bar density - hide odd bars for simpler appearance */
.eq .bar:nth-child(odd) {
display: none;
}
.eq {
gap: 8px;
}
}

/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.bridge-screens * {
animation: none !important;
animation-duration: 0s !important;
animation-iteration-count: 1 !important;
}
.screen.top-strip::before {
animation: none;
}
.hud-sweep {
animation: none;
}
.hud-pulse {
animation: none;
}
.wave-path {
animation: none;
}
.eq .bar {
animation: none;
}
.list::before,
.list::after {
animation: none;
}
.list .dot {
animation: none;
}
}
52 changes: 52 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..800&family=Exo:wght@300;400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./styles.css" />
<link rel="stylesheet" href="./bridge-screens.css" />
</head>
<body>
<!-- Betöltési animáció (warp-mag) -->
Expand All @@ -33,6 +34,57 @@
<div class="stars layer"></div>
<div class="stars layer delay"></div>
<div class="grid"></div>

<!-- LCARS Bridge Screens Overlay -->
<div class="bridge-screens">
<div class="screen top-strip"></div>
<div class="screen main-hud">
<svg viewBox="0 0 400 400" aria-hidden="true">
<circle class="hud-ring thick" cx="200" cy="200" r="140"/>
<circle class="hud-ring" cx="200" cy="200" r="100"/>
<circle class="hud-ring faint" cx="200" cy="200" r="60"/>
<line class="hud-grid" x1="200" y1="60" x2="200" y2="340"/>
<line class="hud-grid" x1="60" y1="200" x2="340" y2="200"/>
<line class="hud-sweep" x1="200" y1="200" x2="200" y2="60"/>
<circle class="hud-pulse" cx="200" cy="200" r="8"/>
</svg>
</div>
<div class="screen wave">
<svg viewBox="0 0 400 200" preserveAspectRatio="none" aria-hidden="true">
<path class="wave-path" d="M0,100 Q50,50 100,100 T200,100 T300,100 T400,100"/>
</svg>
</div>
<div class="screen eq">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="screen list">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="dot" style="top:15%;"></div>
<div class="dot" style="top:35%; left:38%;"></div>
<div class="dot" style="top:55%; left:72%;"></div>
<div class="dot" style="top:75%;"></div>
</div>
<div class="screen schematic">
<svg viewBox="0 0 160 90" aria-hidden="true">
<ellipse class="ship-fill" cx="80" cy="45" rx="35" ry="15"/>
<path class="ship-stroke" d="M50,45 L20,40 M50,45 L20,50 M110,45 L140,40 M110,45 L140,50"/>
<rect class="ship-fill" x="70" y="30" width="20" height="30" rx="2"/>
</svg>
</div>
</div>
</div>

<header class="site-header">
Expand Down
14 changes: 14 additions & 0 deletions docs/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,20 @@ window.addEventListener("load", () => {
setTimeout(() => pre.classList.add("hidden"), 850);
});

// Bridge screens: pause animations when tab is hidden (performance)
(function initBridgeScreensPause() {
const bridgeScreens = document.querySelector(".bridge-screens");
if (!bridgeScreens) return;

document.addEventListener("visibilitychange", () => {
if (document.hidden) {
bridgeScreens.classList.add("paused");
} else {
bridgeScreens.classList.remove("paused");
}
});
})();

// Gépelés-animáció a fő címhez
(function typingEffect(){
const el = document.querySelector(".title-focus");
Expand Down