diff options
Diffstat (limited to 'src/app')
| -rw-r--r-- | src/app/browser.js | 29 | ||||
| -rw-r--r-- | src/app/index.html | 3 | ||||
| -rw-r--r-- | src/app/main.css | 46 |
3 files changed, 78 insertions, 0 deletions
diff --git a/src/app/browser.js b/src/app/browser.js new file mode 100644 index 0000000..1fe6930 --- /dev/null +++ b/src/app/browser.js @@ -0,0 +1,29 @@ +function Browser() { + browser.classList.toggle("shown") +};Browser() + +function BrowserEl(properties) { + properties = { + title: "No name", + image: "", + author: "Unnamed Pilot", + description: "No description", + ...properties + } + + browser.innerHTML += ` + <div class="el"> + <div class="image"> + <img src="${properties.image}"> + </div> + <div class="text"> + <div class="title">${properties.title}</div> + <div class="description">${properties.description} - by ${properties.author}</div> + </div> + </div> + ` +} + +new BrowserEl() +new BrowserEl() +new BrowserEl() diff --git a/src/app/index.html b/src/app/index.html index fe383a0..424265e 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -12,6 +12,8 @@ <div id="minimize" onclick="ipcRenderer.send('minimize')"></div> <div id="close" onclick="ipcRenderer.send('exit')"></div> </div> + + <div id="browser"></div> <nav class="gamesContainer"> <button id="vpBtn" onclick="page(0)"></button> @@ -102,6 +104,7 @@ <script src="lang.js"></script> <script src="main.js"></script> + <script src="browser.js"></script> <script src="launcher.js"></script> </body> </html> diff --git a/src/app/main.css b/src/app/main.css index de0db46..a2c144c 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -30,6 +30,52 @@ cursor: pointer; } +#browser { + --spacing: calc(var(--padding) * 3); + + z-index: 1; + opacity: 0.0; + position: fixed; + overflow-y: scroll; + top: var(--spacing); + pointer-events: none; + left: var(--spacing); + background: var(--bg); + right: var(--spacing); + bottom: var(--spacing); + backdrop-filter: blur(15px); + transition: opacity 0.15s ease-in-out; + border-radius: calc(var(--padding) / 2); +} + +#browser.shown { + opacity: 1.0; + pointer-events: all; +} + +#browser .el { + --spacing: calc(var(--padding) / 2); + --height: calc(var(--padding) * 2.5); + + color: white; + display: flex; + align-items: center; + height: var(--height); + margin: var(--spacing); + padding: var(--spacing); + background: var(--selbg); + border-radius: var(--spacing); + width: calc(100% - var(--spacing) * 4); +} + +#browser .el .image, #browser .el .image img { + width: var(--height); + height: var(--height); + margin-right: var(--spacing); +} +#browser .el .title {font-size: 1.2em} +#browser .el .description {font-size: 0.8em} + #winbtns { z-index: 1; display: flex; |