diff --git a/Makefile b/Makefile index 30d78a2d..acd438c1 100644 --- a/Makefile +++ b/Makefile @@ -6,7 +6,6 @@ BIN ?= go-mud-server DOCKER_COMPOSE := docker-compose -f provisioning/docker-compose.yml export GOFLAGS := -mod=mod -export GOSUMDB := off ## Build Targets diff --git a/_datafiles/html/public/webclient.html b/_datafiles/html/public/webclient.html index 0a9cc8d2..b9040539 100644 --- a/_datafiles/html/public/webclient.html +++ b/_datafiles/html/public/webclient.html @@ -8,7 +8,7 @@ margin: 0; padding: 0; } - + body { margin: 0; padding: 0; @@ -17,6 +17,7 @@ display: flex; flex-direction: column; background-color: #1e1e1e; + position: relative; /* So absolutely positioned children can be placed relative to
*/ } /* Ensure the main container is positioned relatively */ @@ -29,7 +30,6 @@ background-color: #000; } - /* Adjust text-output to flex properly */ #terminal { flex: 1; } @@ -62,7 +62,6 @@ #connect-button:disabled { color: #888; pointer-events: none; - animation: none; background-color: #555; cursor: not-allowed; @@ -73,7 +72,7 @@ color: white; } 100% { - color:#d17a7a; + color: #d17a7a; background-color: #9f4a4a; } } @@ -81,13 +80,79 @@ #command-input:focus { outline: none; } + + /* Sound icon in top-right corner */ + #menu-icon { + position: absolute; + top: 10px; + right: 10px; + font-size: 26px; + color: white; + padding: 10px; + cursor: pointer; + z-index: 9999; + /* Optional background to make it stand out: */ + background-color: rgba(30,30,30, 0.8); + border-radius: 5px; + } + + /* The floating menu container */ + #floating-menu { + position: absolute; + top: 60px; /* Just below the icon */ + right: 10px; + width: 300px; + padding: 10px; + background-color: #2e2e2e; + border: 1px solid #444; + border-radius: 5px; + display: none; /* hidden by default */ + z-index: 9999; + } + #floating-menu h3 { + color: #fff; + margin-bottom: 10px; + } + + .slider-container { + margin-bottom: 15px; + display: flex; + align-items: center; + } + .slider-container label { + color: #ccc; + width: 70px; + } + .slider-container input[type="range"] { + flex: 1; + margin: 0 10px; + } + .slider-icon { + width: 32px; + text-align: center; + font-size: 20px; + color: #ccc; + } + + + + + + + +