nav: add labels to buttons, auto-fullscreen on session open

This commit is contained in:
2026-07-20 19:12:47 +00:00
parent 709de88c95
commit e079723922
2 changed files with 28 additions and 15 deletions
+14 -8
View File
@@ -54,10 +54,13 @@ cat > /opt/portal/index.html <<HTML
}
.nav-panel.dragging{cursor:grabbing;opacity:.85}
.nav-btn{
border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:9px 14px;cursor:pointer;
background:linear-gradient(180deg,#2a8cd6,#1668a6);color:#fff;font:700 13px/1 sans-serif;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 12px rgba(10,46,78,.45)
border:1px solid rgba(255,255,255,.26);border-radius:14px;padding:8px 12px;cursor:pointer;
background:linear-gradient(180deg,#2a8cd6,#1668a6);color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 12px rgba(10,46,78,.45);
display:flex;flex-direction:column;align-items:center;gap:4px;min-width:48px
}
.nav-btn .nb-icon{font-size:16px;line-height:1}
.nav-btn .nb-label{font:600 10px/1 sans-serif;opacity:.85;letter-spacing:.02em}
.nav-btn:hover{filter:brightness(1.08)}
.nav-btn:active{transform:translateY(1px)}
</style>
@@ -75,9 +78,9 @@ cat > /opt/portal/index.html <<HTML
</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>
<button class="nav-btn" id="btn-fs" type="button" title="На весь экран"></button>
<button class="nav-btn" id="btn-back" type="button" title="Назад"><span class="nb-icon">←</span><span class="nb-label">Назад</span></button>
<button class="nav-btn" id="btn-home" type="button" title="Главная"><span class="nb-icon">⌂</span><span class="nb-label">Главная</span></button>
<button class="nav-btn" id="btn-fs" type="button" title="На весь экран"><span class="nb-icon">⛶</span><span class="nb-label">Экран</span></button>
</div>
<script type="module">
import RFB from './core/rfb.js';
@@ -221,8 +224,10 @@ cat > /opt/portal/index.html <<HTML
else document.exitFullscreen();
});
document.addEventListener('fullscreenchange', () => {
document.getElementById('btn-fs').textContent = document.fullscreenElement ? '✕' : '⛶';
document.getElementById('btn-fs').title = document.fullscreenElement ? 'Выйти из полного экрана' : 'На весь экран';
const fsBtn = document.getElementById('btn-fs');
fsBtn.querySelector('.nb-icon').textContent = document.fullscreenElement ? '✕' : '⛶';
fsBtn.querySelector('.nb-label').textContent = document.fullscreenElement ? 'Свернуть' : 'Экран';
fsBtn.title = document.fullscreenElement ? 'Выйти из полного экрана' : 'На весь экран';
});
document.addEventListener('contextmenu', (e) => e.preventDefault());
@@ -254,6 +259,7 @@ cat > /opt/portal/index.html <<HTML
})();
connect();
setTimeout(() => { try { document.documentElement.requestFullscreen(); } catch(e){} }, 800);
</script>
</body>
</html>
+14 -7
View File
@@ -41,9 +41,13 @@ cat > /opt/portal/index.html <<'HTML'
cursor:grab;user-select:none;touch-action:none
}
.nav-btn{
border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:9px 14px;cursor:pointer;letter-spacing:.01em;
background:linear-gradient(180deg,#2a8cd6,#1668a6);color:#fff;font:700 13px/1 sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 12px rgba(10,46,78,.45)
border:1px solid rgba(255,255,255,.26);border-radius:14px;padding:8px 12px;cursor:pointer;
background:linear-gradient(180deg,#2a8cd6,#1668a6);color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 12px rgba(10,46,78,.45);
display:flex;flex-direction:column;align-items:center;gap:4px;min-width:48px
}
.nav-btn .nb-icon{font-size:16px;line-height:1}
.nav-btn .nb-label{font:600 10px/1 sans-serif;opacity:.85;letter-spacing:.02em}
.nav-btn:hover{filter:brightness(1.08)}
.nav-btn:active{transform:translateY(1px)}
.nav-panel.dragging{cursor:grabbing;opacity:.85}
@@ -59,9 +63,9 @@ cat > /opt/portal/index.html <<'HTML'
</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>
<button class="nav-btn" id="btn-fs" type="button" title="На весь экран"></button>
<button class="nav-btn" id="btn-back" type="button" title="Назад"><span class="nb-icon">←</span><span class="nb-label">Назад</span></button>
<button class="nav-btn" id="btn-home" type="button" title="Главная"><span class="nb-icon">⌂</span><span class="nb-label">Главная</span></button>
<button class="nav-btn" id="btn-fs" type="button" title="На весь экран"><span class="nb-icon">⛶</span><span class="nb-label">Экран</span></button>
</div>
<script type="module">
import RFB from './core/rfb.js';
@@ -251,8 +255,10 @@ cat > /opt/portal/index.html <<'HTML'
else document.exitFullscreen();
});
document.addEventListener('fullscreenchange', () => {
document.getElementById('btn-fs').textContent = document.fullscreenElement ? '✕' : '⛶';
document.getElementById('btn-fs').title = document.fullscreenElement ? 'Выйти из полного экрана' : 'На весь экран';
const fsBtn = document.getElementById('btn-fs');
fsBtn.querySelector('.nb-icon').textContent = document.fullscreenElement ? '✕' : '⛶';
fsBtn.querySelector('.nb-label').textContent = document.fullscreenElement ? 'Свернуть' : 'Экран';
fsBtn.title = document.fullscreenElement ? 'Выйти из полного экрана' : 'На весь экран';
});
document.addEventListener('contextmenu', (e) => e.preventDefault());
@@ -284,6 +290,7 @@ cat > /opt/portal/index.html <<'HTML'
})();
connectRfb();
setTimeout(() => { try { document.documentElement.requestFullscreen(); } catch(e){} }, 800);
</script>
</body>
</html>