From 0ffab2e98f98bc8150c34f31ffa844fafcd3db64 Mon Sep 17 00:00:00 2001 From: Ruslan Date: Mon, 20 Jul 2026 19:29:44 +0000 Subject: [PATCH] web overlay: add 2s progress bar before showing Enter button --- universal-runtime/entrypoint.sh | 38 +++++++++++++++++++++++---------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/universal-runtime/entrypoint.sh b/universal-runtime/entrypoint.sh index 2cc46ad..b7709cc 100755 --- a/universal-runtime/entrypoint.sh +++ b/universal-runtime/entrypoint.sh @@ -33,6 +33,8 @@ cat > /opt/portal/index.html <<'HTML' .co-hint-btn{background:linear-gradient(180deg,#2db86e,#1a9452);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:13px 36px;color:#fff;font:700 15px/1 sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 20px rgba(0,100,50,.45);cursor:pointer;letter-spacing:.02em} .co-hint-btn:hover{filter:brightness(1.1)} .co-hint-btn:active{transform:translateY(1px)} + .co-bar-wrap{width:220px;height:3px;background:rgba(220,232,245,.1);border-radius:99px;overflow:hidden;opacity:0;transition:opacity .3s} + .co-bar{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#2a8cd6,#4fc3f7)} @keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} #status{ position:fixed;left:12px;top:12px;z-index:60;padding:8px 12px;border-radius:8px; @@ -64,6 +66,7 @@ cat > /opt/portal/index.html <<'HTML'
Подготовка приложения...
+
@@ -100,17 +103,30 @@ cat > /opt/portal/index.html <<'HTML' function hideOverlay() { if (overlayHidden) return; overlayHidden = true; - const hint = document.getElementById('co-hint'); - if (hint) hint.style.display = 'block'; - const title = document.querySelector('.co-title'); - if (title) title.style.display = 'none'; - coEl.addEventListener('pointerdown', function onCoClick() { - coEl.removeEventListener('pointerdown', onCoClick); - if (!document.fullscreenElement) { - document.documentElement.requestFullscreen().catch(() => {}); - } - _doHideOverlay(); - }, {once: true}); + // Start 2s progress bar, then show green button + const barWrap = document.getElementById('co-bar-wrap'); + const bar = document.getElementById('co-bar'); + if (barWrap && bar) { + barWrap.style.opacity = '1'; + requestAnimationFrame(() => requestAnimationFrame(() => { + bar.style.transition = 'width 1.8s cubic-bezier(0.25,0.46,0.45,0.94)'; + bar.style.width = '100%'; + })); + } + setTimeout(() => { + const hint = document.getElementById('co-hint'); + if (hint) hint.style.display = 'block'; + const title = document.querySelector('.co-title'); + if (title) title.style.display = 'none'; + if (barWrap) barWrap.style.display = 'none'; + coEl.addEventListener('pointerdown', function onCoClick() { + coEl.removeEventListener('pointerdown', onCoClick); + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen().catch(() => {}); + } + _doHideOverlay(); + }, {once: true}); + }, 2000); } function showError(text) {