From 6f40e9dc7231f409517dd9c84630ef73fc83000e Mon Sep 17 00:00:00 2001
From: Ruslan <ruslan@ipcom.su>
Date: Mon, 20 Jul 2026 15:05:27 +0000
Subject: [PATCH] rdp-proxy: replace corner status with centered fullscreen
 overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove Ожидайте corner badge
- Phase 1 (connecting): centered spinner + Подключение к рабочему столу... + elapsed timer
- Phase 2 (desktop ready): progress bar fills over 5.8s then fades out
- Errors (reconnect) shown in small top-left box only
---
 rdp-proxy/entrypoint.sh | 119 ++++++++++++++++++++++++++++++++--------
 1 file changed, 97 insertions(+), 22 deletions(-)
diff --git a/rdp-proxy/entrypoint.sh b/rdp-proxy/entrypoint.sh
index 75550b1..da8b1f3 100644
--- a/rdp-proxy/entrypoint.sh
+++ b/rdp-proxy/entrypoint.sh
@@ -26,16 +26,32 @@ cat > /opt/portal/index.html <<HTML
   <title>RDP Session</title>
   <style>
     html,body,#screen{margin:0;height:100%;background:#111}
-    .status{
-      position:fixed;left:12px;top:12px;z-index:50;padding:8px 10px;border-radius:8px;
-      background:rgba(16,22,32,.86);border:1px solid rgba(255,255,255,.18);
-      color:#dce8f5;font:600 13px/1.25 sans-serif;max-width:min(92vw,560px);
+    #co{
+      position:fixed;inset:0;z-index:50;background:rgba(8,14,24,.95);
+      display:flex;align-items:center;justify-content:center;
+      transition:opacity .5s;
     }
-    .status.error{background:rgba(85,20,20,.9);border-color:rgba(255,130,130,.36);color:#ffe3e3}
-    .status.hidden{display:none}
-    .spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(220,232,245,.3);
-      border-top-color:#dce8f5;border-radius:50%;animation:spin .8s linear infinite;margin-right:7px;vertical-align:middle}
+    #co.hidden{opacity:0;pointer-events:none}
+    .co-inner{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px}
+    .co-ring{
+      width:64px;height:64px;border-radius:50%;
+      border:4px solid rgba(220,232,245,.12);
+      border-top-color:#4a9de0;
+      animation:spin .9s linear infinite;
+    }
+    .co-title{color:#dce8f5;font:600 1.1rem/1.4 sans-serif;text-align:center;letter-spacing:.01em}
+    .co-timer{color:#6a8aaa;font:400 .85rem sans-serif;min-height:1.2em}
+    .co-bar-wrap{
+      width:280px;height:4px;background:rgba(220,232,245,.1);
+      border-radius:99px;overflow:hidden;
+    }
+    .co-bar{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#2a8cd6,#4fc3f7)}
     @keyframes spin{to{transform:rotate(360deg)}}
+    #status{
+      position:fixed;left:12px;top:12px;z-index:60;padding:8px 12px;border-radius:8px;
+      background:rgba(85,20,20,.9);border:1px solid rgba(255,130,130,.36);
+      color:#ffe3e3;font:600 13px/1.25 sans-serif;max-width:min(92vw,560px);display:none;
+    }
     .nav-panel{
       position:fixed;left:16px;top:64px;z-index:99;display:flex;gap:10px;
       background:linear-gradient(180deg,rgba(15,24,36,.78),rgba(9,14,22,.86));
@@ -55,7 +71,17 @@ cat > /opt/portal/index.html <<HTML
 </head>
 <body>
   <div id="screen"></div>
-  <div id="status" class="status"><span class="spinner"></span>Ожидайте...</div>
+  <div id="co">
+    <div class="co-inner">
+      <div class="co-ring"></div>
+      <div class="co-title" id="co-title">Подключение к рабочему столу...</div>
+      <div class="co-timer" id="co-timer"></div>
+      <div class="co-bar-wrap" id="co-bar-wrap" style="display:none">
+        <div class="co-bar" id="co-bar"></div>
+      </div>
+    </div>
+  </div>
+  <div id="status"></div>
   <div class="nav-panel">
     <button class="nav-btn" id="btn-back" type="button" title="Назад">←</button>
     <button class="nav-btn" id="btn-home" type="button" title="Главная">⌂</button>
@@ -65,9 +91,14 @@ cat > /opt/portal/index.html <<HTML
     import RFB from './core/rfb.js';
     const wsBase = location.pathname.replace(/\/+$/, '');
     const wsUrl = (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + wsBase + '/websockify';
-    const statusEl = document.getElementById('status');
-    const XK_ALT_L = 0xffe9;
-    const XK_LEFT  = 0xff51;
+    const statusEl  = document.getElementById('status');
+    const coEl      = document.getElementById('co');
+    const coTitleEl = document.getElementById('co-title');
+    const coTimerEl = document.getElementById('co-timer');
+    const coBarWrap = document.getElementById('co-bar-wrap');
+    const coBar     = document.getElementById('co-bar');
+    const XK_ALT_L  = 0xffe9;
+    const XK_LEFT   = 0xff51;
 
     let rfb = null;
     let connected = false;
@@ -76,31 +107,76 @@ cat > /opt/portal/index.html <<HTML
     const MAX_RECONNECT = 12;
     const DELAYS = [1000,2000,3000,5000,8000];
     let manualDisconnect = false;
+    let timerInterval = null;
+    let timerStart = 0;
 
-    function showStatus(text, isError) {
-      const spinner = isError ? '' : '<span class="spinner"></span>';
-      statusEl.innerHTML = spinner + text;
-      statusEl.className = 'status' + (isError ? ' error' : '');
+    function startTimer() {
+      timerStart = Date.now();
+      clearInterval(timerInterval);
+      timerInterval = setInterval(() => {
+        const s = Math.floor((Date.now() - timerStart) / 1000);
+        coTimerEl.textContent = s + ' сек';
+      }, 500);
     }
 
-    function hideStatus() { statusEl.className = 'status hidden'; }
+    function showOverlayWaiting() {
+      coTitleEl.textContent = 'Подключение к рабочему столу...';
+      coTimerEl.textContent = '0 сек';
+      coBarWrap.style.display = 'none';
+      coBar.style.width = '0%';
+      coEl.style.opacity = '1';
+      coEl.style.display = 'flex';
+      coEl.classList.remove('hidden');
+      statusEl.style.display = 'none';
+      startTimer();
+    }
+
+    function showOverlayConnecting() {
+      clearInterval(timerInterval);
+      coTitleEl.textContent = 'Устанавливается соединение с рабочим столом...';
+      coTimerEl.textContent = '';
+      coBarWrap.style.display = 'block';
+      coBar.style.transition = 'none';
+      coBar.style.width = '0%';
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        coBar.style.transition = 'width 5.8s cubic-bezier(0.25,0.46,0.45,0.94)';
+        coBar.style.width = '100%';
+      }));
+      setTimeout(hideOverlay, 6200);
+    }
+
+    function hideOverlay() {
+      clearInterval(timerInterval);
+      coEl.classList.add('hidden');
+      setTimeout(() => { coEl.style.display = 'none'; }, 520);
+    }
+
+    function showStatus(text) {
+      statusEl.textContent = text;
+      statusEl.style.display = 'block';
+    }
+
+    function hideStatus() { statusEl.style.display = 'none'; }
 
     function scheduleReconnect(reason) {
       if (manualDisconnect) return;
       if (reconnectAttempts >= MAX_RECONNECT) {
-        showStatus('Соединение потеряно. Переподключение не удалось. Откройте сервис заново.', true);
+        hideOverlay();
+        showStatus('Соединение потеряно. Переподключение не удалось. Откройте сервис заново.');
         return;
       }
       const n = ++reconnectAttempts;
       const delay = DELAYS[Math.min(n-1, DELAYS.length-1)];
-      showStatus(\`\${reason} Повтор \${n}/\${MAX_RECONNECT} через \${Math.ceil(delay/1000)} сек.\`, true);
+      hideOverlay();
+      showStatus(\`\${reason} Повтор \${n}/\${MAX_RECONNECT} через \${Math.ceil(delay/1000)} сек.\`);
       reconnectTimer = setTimeout(connect, delay);
     }
 
     function connect() {
       if (manualDisconnect) return;
       connected = false;
-      showStatus('Ожидайте...');
+      hideStatus();
+      showOverlayWaiting();
       if (rfb) { try { rfb.disconnect(); } catch(e){} }
       rfb = new RFB(document.getElementById('screen'), wsUrl);
       rfb.viewOnly = false;
@@ -110,8 +186,7 @@ cat > /opt/portal/index.html <<HTML
         connected = true;
         reconnectAttempts = 0;
         clearTimeout(reconnectTimer);
-        showStatus('Устанавливается соединение с рабочим столом...');
-        setTimeout(hideStatus, 6000);
+        showOverlayConnecting();
       });
       rfb.addEventListener('disconnect', () => {
         connected = false;
