diff --git a/static/games/games.html b/static/games/games.html index dec9d75..68fdcb6 100644 --- a/static/games/games.html +++ b/static/games/games.html @@ -24,9 +24,9 @@

Welcome to Terbium Game Center

- Minecraft - Roblox - GeForce NOW + Minecraft + Roblox + GeForce NOW diff --git a/static/index.css b/static/index.css index 6a21756..81fb806 100644 --- a/static/index.css +++ b/static/index.css @@ -156,6 +156,7 @@ --dock-alert-background: #47ca6360; --dock-button-boxshadow: #242424; --dock-icon-color: #47CA64; + --dock-icon-color2: #419854; --dock-button-inactive-span: #424242; /* context menu */ @@ -256,6 +257,7 @@ --dock-alert-background: #fff7a560; --dock-button-boxshadow: #110d44; --dock-icon-color: #fff7a5; + --dock-icon-color2: #d1ca7a; --dock-button-inactive-span: #594dee; /* context menu */ @@ -355,6 +357,7 @@ --dock-alert-background: #FF40F760; --dock-button-boxshadow: #282828; --dock-icon-color: #FF40F7; + --dock-icon-color2: #cc2ec4; --dock-button-inactive-span: #606060; /* context menu */ @@ -1481,10 +1484,6 @@ main > .inputAppSearch { min-width: 32px; } -.dockbtn.alert { - animation: blink 1s infinite ease-in-out; -} - .dockbtn:hover { cursor: var(--cursorHand); background-color: var(--dock-button-background); @@ -1512,6 +1511,10 @@ main > .inputAppSearch { fill: var(--dock-icon-color); } +.fill2 { + fill: var(--dock-icon-color2); +} + .iconFill1 { fill: var(--iconFill2); } @@ -1565,13 +1568,13 @@ main > .inputAppSearch { } .winNotFocus { - z-index: 1; + z-index: 3; opacity: 0.98; filter: blur(1px); } .winFocus { - z-index: 2; + z-index: 4; opacity: 1; filter: blur(0px); } @@ -1588,10 +1591,6 @@ main > .inputAppSearch { box-shadow: none !important; } -.maxiN { - resize: both; -} - .maxiY { top: 37px !important; left: 0 !important; @@ -1600,6 +1599,84 @@ main > .inputAppSearch { resize: none; } +.rightResize { + position: absolute; + right: 0; + top: 0; + width: 8px; + height: 100%; + cursor: e-resize; +} + +.bottomResize { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 8px; + cursor: s-resize; +} + +.bottomRightResize { + position: absolute; + bottom: 0; + right: 0; + width: 8px; + height: 8px; + cursor: se-resize; +} + +.topResize { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 8px; + cursor: n-resize; +} + +.leftResize { + position: absolute; + left: 0; + top: 0; + width: 8px; + height: 100%; + cursor: w-resize; +} + +.bottomLeftResize { + position: absolute; + bottom: 0; + left: 0; + width: 8px; + height: 8px; + cursor: sw-resize; +} + +.maxiY .bottomLeftResize { + cursor: var(--cursorNormal); +} + +.maxiY .bottomRightResize { + cursor: var(--cursorNormal); +} + +.maxiY .topResize { + cursor: var(--cursorNormal); +} + +.maxiY .leftResize { + cursor: var(--cursorNormal); +} + +.maxiY .rightResize { + cursor: var(--cursorNormal); +} + +.maxiY .bottomResize { + cursor: var(--cursorNormal); +} + .maxiR { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; diff --git a/static/index.html b/static/index.html index 76b8a7e..d126983 100644 --- a/static/index.html +++ b/static/index.html @@ -158,8 +158,8 @@
-
- +
+
diff --git a/static/js/windows.js b/static/js/windows.js index ec74f19..43a930c 100644 --- a/static/js/windows.js +++ b/static/js/windows.js @@ -70,6 +70,15 @@ function windows(link, icn, title, browser = Boolean, os = Boolean, fullscreen = newwin.setAttribute("data-browser", browser); newwin.setAttribute("data-fullscreen", fullscreen); newwin.setAttribute("data-appName", appName); + newwin.style.maxHeight = window.innerHeight - 37 + "px"; + newwin.style.maxWidth = window.innerWidth + "px"; + newwin.setAttribute("min-height", "499"); + newwin.setAttribute("min-width", "499"); + + window.onresize = (e) => { + newwin.style.maxHeight = window.innerHeight - 37 + "px"; + newwin.style.maxWidth = window.innerWidth - 37 + "px"; + } appsShellName.onclick = (e) => { appOptions.classList.toggle("h"); @@ -1271,6 +1280,241 @@ window.addEventListener("keydown", (e) => { } }) +const rightResize = document.createElement("div"); + rightResize.classList.add("rightResize"); + const bottomResize = document.createElement("div"); + bottomResize.classList.add("bottomResize"); + const bottomRightResize = document.createElement("div"); + bottomRightResize.classList.add("bottomRightResize"); + const leftResize = document.createElement("div"); + leftResize.classList.add("leftResize"); + const topResize = document.createElement("div"); + topResize.classList.add("topResize"); + const bottomLeftResize = document.createElement("div"); + bottomLeftResize.classList.add("bottomLeftResize"); + + newwin.appendChild(rightResize); + newwin.appendChild(bottomResize); + newwin.appendChild(bottomRightResize); + newwin.appendChild(leftResize); + newwin.appendChild(topResize); + newwin.appendChild(bottomLeftResize); + + rightResize.addEventListener("mousedown", (e) => { + if(newwin.classList.contains("maxiY")) { + return + } + var startX = e.clientX; + var rightest = window.innerWidth - 3; + var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10); + function mousemove(e) { + if(e.clientX >= rightest) { + return + } + var newX = e.clientX; + var deltaX = newX - startX; + var newWidth = startWidth + deltaX; + newwin.style.width = newWidth + "px"; + newwin.querySelector("iframe").style.pointerEvents = "none"; + } + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", (mu) => { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mu); + newwin.querySelector("iframe").style.pointerEvents = "auto"; + }); + }); + + bottomResize.addEventListener("mousedown", (e) => { + if(newwin.classList.contains("maxiY")) { + return + } + var startY = e.clientY; + var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10); + function mousemove(e) { + var newY = e.clientY; + var deltaY = newY - startY; + var newHeight = startHeight + deltaY; + newwin.style.height = newHeight + "px"; + newwin.querySelector("iframe").style.pointerEvents = "none"; + } + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", (mu) => { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mu); + newwin.querySelector("iframe").style.pointerEvents = "auto"; + }); + }) + + bottomRightResize.addEventListener("mousedown", (e) => { + if(newwin.classList.contains("maxiY")) { + return + } + var startX = e.clientX; + var startY = e.clientY; + var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10); + var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10); + function mousemove(e) { + var newX = e.clientX; + var newY = e.clientY; + var deltaX = newX - startX; + var deltaY = newY - startY; + var newWidth = startWidth + deltaX; + var newHeight = startHeight + deltaY; + newwin.style.width = newWidth + "px"; + newwin.style.height = newHeight + "px"; + newwin.querySelector("iframe").style.pointerEvents = "none"; + } + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", (mu) => { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mu); + newwin.querySelector("iframe").style.pointerEvents = "auto"; + }); + }) + + leftResize.addEventListener("mousedown", (e) => { + if(newwin.classList.contains("maxiY")) { + return + } + var startX = e.clientX; + var leftest = 0; + var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10); + function mousemove(e) { + if(e.clientX <= leftest) { + return + } + if(startWidth - (e.clientX - startX) <= newwin.getAttribute("min-width")) { + return + } + var newX = e.clientX; + var deltaX = newX - startX; + var newWidth = startWidth - deltaX; + newwin.style.width = newWidth + "px"; + newwin.style.left = e.clientX + "px"; + } + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", (mu) => { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mu); + newwin.querySelector("iframe").style.pointerEvents = "auto"; + }); + }) + + topResize.addEventListener("mousedown", (e) => { + if(newwin.classList.contains("maxiY")) { + return + } + var startY = e.clientY; + var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10); + function mousemove(e) { + if (e.clientY <= "37") { + return + } + if(startHeight - (e.clientY - startY) <= newwin.getAttribute("min-height")) { + return + } + newwin.style.top = e.clientY + "px"; + var newY = e.clientY; + var deltaY = newY - startY; + var newHeight = startHeight - deltaY; + newwin.style.height = newHeight + "px"; + newwin.querySelector("iframe").style.pointerEvents = "none"; + } + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", (mu) => { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mu); + newwin.querySelector("iframe").style.pointerEvents = "auto"; + }); + }) + + bottomLeftResize.addEventListener("mousedown", (e) => { + if(newwin.classList.contains("maxiY")) { + return + } + var startX = e.clientX; + var startY = e.clientY; + var leftest = 0; + var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10); + var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10); + function mousemove(e) { + if(e.clientX <= leftest) { + return + } + if(startWidth - (e.clientX - startX) <= newwin.getAttribute("min-width")) { + return + } + if(startHeight + (e.clientY - startY) <= newwin.getAttribute("min-height")) { + return + } + var newX = e.clientX; + var newY = e.clientY; + var deltaX = newX - startX; + var deltaY = newY - startY; + var newWidth = startWidth - deltaX; + var newHeight = startHeight + deltaY; + newwin.style.width = newWidth + "px"; + newwin.style.height = newHeight + "px"; + newwin.style.left = e.clientX + "px"; + newwin.querySelector("iframe").style.pointerEvents = "none"; + } + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", (mu) => { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mu); + newwin.querySelector("iframe").style.pointerEvents = "auto"; + }); + }) + + bottomRightResize.addEventListener("mousedown", (e) => { + if(newwin.classList.contains("maxiY")) { + return + } + var startX = e.clientX; + var startY = e.clientY; + var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10); + var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10); + function mousemove(e) { + var newX = e.clientX; + var newY = e.clientY; + var deltaX = newX - startX; + var deltaY = newY - startY; + var newWidth = startWidth + deltaX; + var newHeight = startHeight + deltaY; + newwin.style.width = newWidth + "px"; + newwin.style.height = newHeight + "px"; + newwin.querySelector("iframe").style.pointerEvents = "none"; + } + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", (mu) => { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mu); + newwin.querySelector("iframe").style.pointerEvents = "auto"; + }); + }) + + leftResize.addEventListener("mousedown", (e) => { + if(newwin.classList.contains("maxiY")) { + return + } + var startX = e.clientX; + var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10); + function mousemove(e) { + var newX = e.clientX; + var deltaX = newX - startX; + var newWidth = startWidth - deltaX; + newwin.style.width = newWidth + "px"; + newwin.querySelector("iframe").style.pointerEvents = "none"; + } + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", (mu) => { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mu); + newwin.querySelector("iframe").style.pointerEvents = "auto"; + }); + }) + switch(id) { case "browser": windows("../newwin.html", "../resources/terbium.svg", "Terbium Browser", true, true, false, 'browser'); @@ -1337,6 +1581,9 @@ switch(id) { case "ruffle": windows("../ruffle/ruffle.html", "../resources/ruffle.svg", "Ruffle", false, true, false, "ruffle"); break; + case "Terbium Games": + windows("../games/games.html", "../resources/games.ico", "Terbium Games", false, true, false, 'Terbium Games'); + break; default: break; } \ No newline at end of file diff --git a/static/resources/games.ico b/static/resources/games.ico new file mode 100644 index 0000000..ccb8958 Binary files /dev/null and b/static/resources/games.ico differ diff --git a/static/settings.html b/static/settings.html index cecaa67..6019cf5 100644 --- a/static/settings.html +++ b/static/settings.html @@ -123,7 +123,7 @@

Experimental