just a bit re-arrangement of where stuff is placed
This commit is contained in:
+66
-37
@@ -50,15 +50,22 @@
|
||||
font-family: monospace;
|
||||
color: #fff;
|
||||
}
|
||||
#status {
|
||||
#top-left-stack {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
max-width: 220px;
|
||||
}
|
||||
#status {
|
||||
background: rgba(0,0,0,0.7);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
z-index: 10;
|
||||
}
|
||||
#hint {
|
||||
position: fixed;
|
||||
@@ -85,15 +92,30 @@
|
||||
}
|
||||
#idle-warning.visible { display: block; }
|
||||
|
||||
#brightness-control {
|
||||
#bottom-left-stack {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
max-width: 260px;
|
||||
}
|
||||
#disclaimer-text {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
background: rgba(0,0,0,0.6);
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#brightness-control {
|
||||
background: rgba(0,0,0,0.7);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -107,14 +129,10 @@
|
||||
}
|
||||
|
||||
#sensitivity-control {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -127,9 +145,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
#sound-toggle {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: #fff;
|
||||
border: 1px solid #444;
|
||||
@@ -138,15 +153,13 @@
|
||||
font-size: 13px;
|
||||
font-family: monospace;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
#sound-toggle:hover { background: rgba(40,40,40,0.85); }
|
||||
#sound-toggle.unmuted { color: #4fc; border-color: #4fc; }
|
||||
|
||||
#restart-group { display: none; flex-direction: column; gap: 4px; }
|
||||
#restart-group.visible { display: flex; }
|
||||
#restart-game-btn {
|
||||
position: fixed;
|
||||
top: 36px;
|
||||
left: 10px;
|
||||
background: rgba(120,20,20,0.75);
|
||||
color: #fff;
|
||||
border: 1px solid #a44;
|
||||
@@ -155,9 +168,16 @@
|
||||
font-size: 13px;
|
||||
font-family: monospace;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
#restart-game-btn:hover { background: rgba(160,30,30,0.9); }
|
||||
#restart-hint {
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
background: rgba(0,0,0,0.6);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#gameCanvas {
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
@@ -170,14 +190,10 @@
|
||||
#gameCanvas.controlling { cursor: none; }
|
||||
|
||||
#queue-panel {
|
||||
position: fixed;
|
||||
top: 68px;
|
||||
left: 10px;
|
||||
background: rgba(0,0,0,0.75);
|
||||
padding: 10px 14px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
min-width: 180px;
|
||||
}
|
||||
#queue-panel h3 { font-size: 12px; color: #ffcc00; margin-bottom: 6px; }
|
||||
@@ -215,6 +231,8 @@
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
max-width: 300px;
|
||||
max-height: calc(100vh - 60px);
|
||||
overflow-y: auto;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -224,23 +242,34 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="top-left-stack">
|
||||
<div id="status">Connecting...</div>
|
||||
<button id="sound-toggle">🔇 Unmute</button>
|
||||
<button id="restart-game-btn" style="display:none;">🔄 Restart Game</button>
|
||||
<div id="restart-group">
|
||||
<button id="restart-game-btn">🔄 Restart Game</button>
|
||||
<p id="restart-hint">If the game appears frozen or isn't responding, press this button to restart it.</p>
|
||||
</div>
|
||||
<div id="queue-panel">
|
||||
<h3>Controller</h3>
|
||||
<div id="queue-list">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom-left-stack">
|
||||
<p id="disclaimer-text">
|
||||
Unloze is an independent, community-run project and is not affiliated with, endorsed by, or sponsored by Valve Corporation.
|
||||
Counter-Strike, Counter-Strike: Source, and related logos are trademarks of Valve Corporation.
|
||||
</p>
|
||||
<div id="brightness-control">
|
||||
☀️ <input type="range" id="brightness-slider" min="50" max="200" value="100" step="5"> <span id="brightness-value">100%</span>
|
||||
</div>
|
||||
<div id="sensitivity-control">
|
||||
🖱️ <input type="range" id="sensitivity-slider" min="1" max="6" value="3" step="0.5"> <span id="sensitivity-value">1.0x</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="idle-warning">Idle — control will be released soon. Move your mouse to stay in control.</div>
|
||||
|
||||
<div id="queue-panel">
|
||||
<h3>Controller</h3>
|
||||
<div id="queue-list">—</div>
|
||||
</div>
|
||||
|
||||
<div id="loading-overlay">
|
||||
<p>Switching player — please wait...</p>
|
||||
<div class="spinner"></div>
|
||||
@@ -254,7 +283,7 @@
|
||||
<h2>FAQ</h2>
|
||||
<div class="faq-item">
|
||||
<h3>Experience problems with controlling the client?</h3>
|
||||
<p>The best thing to always try is reloading your webpage or restarting the game.</p>
|
||||
<p>The best thing to always try is reloading your webpage.</p>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<h3>What is this?</h3>
|
||||
@@ -275,6 +304,7 @@
|
||||
<div class="faq-item">
|
||||
<h3>Want to chat with us?</h3>
|
||||
<p>We have our own self hosted stoat instance: https://unloze.com/stoat/</p>
|
||||
<p>Or join our Discord server: https://discord.com/invite/7SjyB8vzBv</p>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<h3>Opening the in-game menu</h3>
|
||||
@@ -283,7 +313,11 @@
|
||||
<div class="faq-item">
|
||||
<h3>Keybinds</h3>
|
||||
<p>v: crouch key currently</p>
|
||||
<p>k: microphone key. Browser will ask for microphone permission on first use. but does not work currently.</p>
|
||||
<p>k: activates the microphone. Currently not working.</p>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<h3>Source code</h3>
|
||||
<p>This webclient is open source. You can find it on our Gitea instance: https://git.unloze.com/UNLOZE/webclient-css</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -329,6 +363,7 @@
|
||||
const idleWarnEl = document.getElementById('idle-warning');
|
||||
const soundToggleEl = document.getElementById('sound-toggle');
|
||||
const restartGameBtn = document.getElementById('restart-game-btn');
|
||||
const restartGroup = document.getElementById('restart-group');
|
||||
const brightnessSlider = document.getElementById('brightness-slider');
|
||||
const brightnessValue = document.getElementById('brightness-value');
|
||||
const sensitivitySlider = document.getElementById('sensitivity-slider');
|
||||
@@ -492,7 +527,7 @@
|
||||
canvas.requestPointerLock();
|
||||
hintEl.textContent = 'Mouse captured — ESC to release';
|
||||
resetIdleWarning();
|
||||
restartGameBtn.style.display = 'block';
|
||||
restartGroup.classList.add('visible');
|
||||
}
|
||||
|
||||
function exitControl() {
|
||||
@@ -504,7 +539,7 @@
|
||||
stopMic();
|
||||
if (idleWarnTimer) clearTimeout(idleWarnTimer);
|
||||
idleWarnEl.classList.remove('visible');
|
||||
restartGameBtn.style.display = 'none';
|
||||
restartGroup.classList.remove('visible');
|
||||
if (document.pointerLockElement === canvas) document.exitPointerLock();
|
||||
}
|
||||
|
||||
@@ -823,10 +858,4 @@
|
||||
connectSignaling();
|
||||
</script>
|
||||
</body>
|
||||
<footer style="background:#000; color:#ccc; font-family:sans-serif; font-size:13px; text-align:center; padding:12px 20px; line-height:1.5;">
|
||||
<p>
|
||||
Unloze is an independent, community-run project and is not affiliated with, endorsed by, or sponsored by Valve Corporation.
|
||||
Counter-Strike, Counter-Strike: Source, and related logos are trademarks of Valve Corporation.
|
||||
</p>
|
||||
</footer>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user