nav: add labels to buttons, auto-fullscreen on session open
This commit is contained in:
+14
-8
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user