UNLOZE/webclient-css
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

just a bit re-arrangement of where stuff is placed

Browse Source
This commit is contained in:
jenz
2026-08-28 11:36:34 +01:00
parent a68f946aa6
commit 90bdc0fa15
1 changed files with 72 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client.html
+72 -43
View File
@@ -50,15 +50,22 @@
font-family: monospace; font-family: monospace;
color: #fff; color: #fff;
} }
#status { #top-left-stack {
position: fixed; position: fixed;
top: 10px; top: 10px;
left: 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); background: rgba(0,0,0,0.7);
padding: 6px 12px; padding: 6px 12px;
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
z-index: 10;
} }
#hint { #hint {
position: fixed; position: fixed;
@@ -85,15 +92,30 @@
} }
#idle-warning.visible { display: block; } #idle-warning.visible { display: block; }
#brightness-control { #bottom-left-stack {
position: fixed; position: fixed;
bottom: 40px; bottom: 10px;
left: 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); background: rgba(0,0,0,0.7);
padding: 8px 12px; padding: 8px 12px;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
z-index: 10;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -107,14 +129,10 @@
} }
#sensitivity-control { #sensitivity-control {
position: fixed;
bottom: 10px;
left: 10px;
background: rgba(0,0,0,0.7); background: rgba(0,0,0,0.7);
padding: 8px 12px; padding: 8px 12px;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
z-index: 10;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -127,9 +145,6 @@
cursor: pointer; cursor: pointer;
} }
#sound-toggle { #sound-toggle {
position: fixed;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.7); background: rgba(0,0,0,0.7);
color: #fff; color: #fff;
border: 1px solid #444; border: 1px solid #444;
@@ -138,15 +153,13 @@
font-size: 13px; font-size: 13px;
font-family: monospace; font-family: monospace;
cursor: pointer; cursor: pointer;
z-index: 10;
} }
#sound-toggle:hover { background: rgba(40,40,40,0.85); } #sound-toggle:hover { background: rgba(40,40,40,0.85); }
#sound-toggle.unmuted { color: #4fc; border-color: #4fc; } #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 { #restart-game-btn {
position: fixed;
top: 36px;
left: 10px;
background: rgba(120,20,20,0.75); background: rgba(120,20,20,0.75);
color: #fff; color: #fff;
border: 1px solid #a44; border: 1px solid #a44;
@@ -155,9 +168,16 @@
font-size: 13px; font-size: 13px;
font-family: monospace; font-family: monospace;
cursor: pointer; cursor: pointer;
z-index: 10;
} }
#restart-game-btn:hover { background: rgba(160,30,30,0.9); } #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 { #gameCanvas {
width: 1280px; width: 1280px;
height: 720px; height: 720px;
@@ -170,14 +190,10 @@
#gameCanvas.controlling { cursor: none; } #gameCanvas.controlling { cursor: none; }
#queue-panel { #queue-panel {
position: fixed;
top: 68px;
left: 10px;
background: rgba(0,0,0,0.75); background: rgba(0,0,0,0.75);
padding: 10px 14px; padding: 10px 14px;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
z-index: 10;
min-width: 180px; min-width: 180px;
} }
#queue-panel h3 { font-size: 12px; color: #ffcc00; margin-bottom: 6px; } #queue-panel h3 { font-size: 12px; color: #ffcc00; margin-bottom: 6px; }
@@ -215,6 +231,8 @@
padding: 12px 16px; padding: 12px 16px;
border-radius: 4px; border-radius: 4px;
max-width: 300px; max-width: 300px;
max-height: calc(100vh - 60px);
overflow-y: auto;
font-size: 12px; font-size: 12px;
z-index: 10; z-index: 10;
} }
@@ -224,23 +242,34 @@
</style> </style>
</head> </head>
<body> <body>
<div id="status">Connecting...</div> <div id="top-left-stack">
<button id="sound-toggle">🔇 Unmute</button> <div id="status">Connecting...</div>
<button id="restart-game-btn" style="display:none;">🔄 Restart Game</button> <button id="sound-toggle">🔇 Unmute</button>
<div id="brightness-control"> <div id="restart-group">
☀️ <input type="range" id="brightness-slider" min="50" max="200" value="100" step="5"> <span id="brightness-value">100%</span> <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>
<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 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>
<div id="idle-warning">Idle — control will be released soon. Move your mouse to stay in control.</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"> <div id="loading-overlay">
<p>Switching player — please wait...</p> <p>Switching player — please wait...</p>
<div class="spinner"></div> <div class="spinner"></div>
@@ -254,7 +283,7 @@
<h2>FAQ</h2> <h2>FAQ</h2>
<div class="faq-item"> <div class="faq-item">
<h3>Experience problems with controlling the client?</h3> <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>
<div class="faq-item"> <div class="faq-item">
<h3>What is this?</h3> <h3>What is this?</h3>
@@ -275,6 +304,7 @@
<div class="faq-item"> <div class="faq-item">
<h3>Want to chat with us?</h3> <h3>Want to chat with us?</h3>
<p>We have our own self hosted stoat instance: https://unloze.com/stoat/</p> <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>
<div class="faq-item"> <div class="faq-item">
<h3>Opening the in-game menu</h3> <h3>Opening the in-game menu</h3>
@@ -283,7 +313,11 @@
<div class="faq-item"> <div class="faq-item">
<h3>Keybinds</h3> <h3>Keybinds</h3>
<p>v: crouch key currently</p> <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>
</div> </div>
@@ -329,6 +363,7 @@
const idleWarnEl = document.getElementById('idle-warning'); const idleWarnEl = document.getElementById('idle-warning');
const soundToggleEl = document.getElementById('sound-toggle'); const soundToggleEl = document.getElementById('sound-toggle');
const restartGameBtn = document.getElementById('restart-game-btn'); const restartGameBtn = document.getElementById('restart-game-btn');
const restartGroup = document.getElementById('restart-group');
const brightnessSlider = document.getElementById('brightness-slider'); const brightnessSlider = document.getElementById('brightness-slider');
const brightnessValue = document.getElementById('brightness-value'); const brightnessValue = document.getElementById('brightness-value');
const sensitivitySlider = document.getElementById('sensitivity-slider'); const sensitivitySlider = document.getElementById('sensitivity-slider');
@@ -492,7 +527,7 @@
canvas.requestPointerLock(); canvas.requestPointerLock();
hintEl.textContent = 'Mouse captured — ESC to release'; hintEl.textContent = 'Mouse captured — ESC to release';
resetIdleWarning(); resetIdleWarning();
restartGameBtn.style.display = 'block'; restartGroup.classList.add('visible');
} }
function exitControl() { function exitControl() {
@@ -504,7 +539,7 @@
stopMic(); stopMic();
if (idleWarnTimer) clearTimeout(idleWarnTimer); if (idleWarnTimer) clearTimeout(idleWarnTimer);
idleWarnEl.classList.remove('visible'); idleWarnEl.classList.remove('visible');
restartGameBtn.style.display = 'none'; restartGroup.classList.remove('visible');
if (document.pointerLockElement === canvas) document.exitPointerLock(); if (document.pointerLockElement === canvas) document.exitPointerLock();
} }
@@ -823,10 +858,4 @@
connectSignaling(); connectSignaling();
</script> </script>
</body> </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> </html>