Moved footer back to screen bottom.

#html #webdev #gamedev #opensource

Devlog — Footer / HUD layout fix

Commit: c7cc832
Author: pj90 (weirdcodesofficial)
Date: 2026-08-17
Repo: weirdcodesofficial/MOKSHA — An HTML5 browser game based on Sanatan Shastras and Karmic philosophy.
Languages: JavaScript (89.7%), CSS (6.1%), HTML (4.2%)

Summary

Moved the UI footer back to the screen bottom and consolidated the HUD controls (volume slider, mute, help, credits) into the footer alongside the mode badge. This removes the separate HUD controls block earlier in the DOM and places the mode badge + controls together at the bottom of the viewport.

Commit message: "Footer: moved footer back to screen bottom."

What changed

Modified: index.html
- Removed the standalone HUD controls block from its previous location.
- Re-introduced/added a #ui-footer element placed immediately after the main container, containing:
- #mode-badge (mode/status badge)
- #hud-controls with #music-volume-slider, #music-toggle-btn, #shaashtra-help-btn, and #hud-credits.
Diff stats: +14 / -16 (total 30)

Why

Restore expected layout where the footer and HUD controls are anchored to the bottom of the screen, improving consistency of on-screen controls and grouping mode/status information with control elements.

User-visible effect

The mode badge and HUD controls now appear together fixed to the bottom area of the app UI instead of being separated. Users should find the music controls and help/credits consistently at the bottom.

Representative snippet (new footer block)

html name=index.html url=https://github.com/weirdcodesofficial/MOKSHA/blob/c7cc8322ace555c15fd08c066d1ffd284963d80d/index.html#L175-L193

<!-- ── Footer (mode badge + HUD controls) — screen bottom पर ── -->
<div id="ui-footer">
    <span id="mode-badge" class="mode-badge" title="तत्परता की जाँच हो रही है...">⏳ जाँच रहे हैं...</span>
    <div id="hud-controls">
        <div class="hud-right-group">
            <input type="range" id="music-volume-slider" min="0" max="100" value="100"
                title="संगीत वॉल्यूम" aria-label="Background Music Volume">
            <button id="music-toggle-btn" class="hud-icon-btn" title="पृष्ठभूमि ध्वनि म्यूट/अनम्यूट करें">🔊</button>
            <button id="shaashtra-help-btn" class="hud-icon-btn" title="शास्त्र पढ़ें (खेल की जानकारी)">❓</button>
            <div id="hud-credits" class="hud-icon-btn" style="cursor:default;" title="Developed by Weird Codes">🛠️</div>
        </div>
    </div>
</div>

DEV Community