mirror of
https://github.com/open-goal/launcher.git
synced 2024-10-20 04:57:38 -04:00
restyled the entire thing again
This commit is contained in:
trippjoe
parent
13386f2e59
commit
5b3db5ef61
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 MiB |
|
|
@ -7,7 +7,6 @@ body {
|
|||
Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg-blue);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -16,15 +15,9 @@ body {
|
|||
max-width: 100vw;
|
||||
}
|
||||
|
||||
header{
|
||||
background: var(--bg-blue);
|
||||
border-bottom: 1px solid darkgray;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 25vw;
|
||||
margin: 0 35vw;
|
||||
width: 60vw;
|
||||
margin: 15px 0;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
|
|
@ -33,7 +26,6 @@ nav {
|
|||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: var(--bg-blue);
|
||||
border-right: 1px solid darkgray;
|
||||
padding: 1rem;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
|
@ -43,7 +35,6 @@ nav {
|
|||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: var(--bg-blue);
|
||||
border-right: 1px solid darkgray;
|
||||
padding: 1rem;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
|
|
@ -63,37 +54,44 @@ nav {
|
|||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.game-bg{
|
||||
width: 110%;
|
||||
#background {
|
||||
width: 130%;
|
||||
-webkit-user-drag: none;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.model {
|
||||
height: 80%;
|
||||
right: 155px;
|
||||
top: 170px;
|
||||
z-index: -1;
|
||||
/* this refers to the game logo, jak: tpl */
|
||||
#logo {
|
||||
width: 50%;
|
||||
margin: 15px 0;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.game-logo {
|
||||
width: 40%;
|
||||
padding: 10px 15px;
|
||||
z-index: -1;
|
||||
#toggle-sidebar {
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
background-color: var(--bg-blue);
|
||||
border-color: var(--bg-blue);
|
||||
}
|
||||
|
||||
.game-box {
|
||||
z-index: 1;
|
||||
padding-left: 2em;
|
||||
padding-top: 45%;
|
||||
min-height: 100%;
|
||||
#buttons {
|
||||
margin: 40px 0;
|
||||
gap: 0 10px;
|
||||
}
|
||||
|
||||
.btn-play {
|
||||
padding: .15em 2em;
|
||||
.row > #play {
|
||||
width: 30%;
|
||||
border-radius: 0;
|
||||
font-weight: bold;
|
||||
font-size: xxx-large;
|
||||
font-size: x-large;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.row > #config {
|
||||
width: 30%;
|
||||
border-radius: 0;
|
||||
font-weight: bold;
|
||||
font-size: x-large;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,56 +11,63 @@
|
|||
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<img src="../assets/images/header-logo.png" class="logo" alt="OpenGOAL Logo">
|
||||
</header>
|
||||
|
||||
<img id="background" class="position-fixed" src="../assets/images/jak1-bg.png">
|
||||
<div class="row">
|
||||
<div class="p-0">
|
||||
<img id="background" class="game-bg position-fixed" src="../assets/images/jak1-bg.png" alt="Rock Village">
|
||||
<img id="model" class="model position-fixed" src="../assets/images/jak1-model.png" alt="Jak">
|
||||
<img id="logo" class="game-logo position-fixed" src="../assets/images/jak1-logo.png"
|
||||
alt="Jak & Daxter: The Precursor Legacy">
|
||||
<div class="game-box">
|
||||
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#sidebar" role="button"
|
||||
aria-controls="offcanvasExample" onclick="openNav()">
|
||||
>
|
||||
</a>
|
||||
<button type="button" class="btn btn-success btn-play">PLAY</button>
|
||||
<!-- sidebar toggle button, it runs the entire vertical height -->
|
||||
<div class="col-1">
|
||||
<a id="toggle-sidebar" class="btn btn-primary" data-bs-toggle="offcanvas" href="#sidebar" role="button"
|
||||
aria-controls="offcanvasExample" onclick="openNav()">
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- OpenGOAL LOGO -->
|
||||
<div class="col my-auto">
|
||||
<div class="row justify-content-center">
|
||||
<img src="../assets/images/header-logo.png" class="logo">
|
||||
</div>
|
||||
|
||||
<!-- game logo -->
|
||||
<!-- <div class="row justify-content-center">
|
||||
<img id="logo" class="game-logo" src="../assets/images/jak1-logo.png">
|
||||
</div> -->
|
||||
|
||||
<!-- buttons -->
|
||||
<div id="buttons" class="row justify-content-center">
|
||||
<!-- config button -->
|
||||
<button id="config" type="button" class="btn btn-success">CONFIG</button>
|
||||
<!-- play button -->
|
||||
<button id="play" type="button" class="btn btn-success">PLAY</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OFFCANVAS SIDEBAR MENU -->
|
||||
<div class="offcanvas offcanvas-start" id="sidebar" aria-labelledby="sidebar-label">
|
||||
<div class="offcanvas-body">
|
||||
<a class="nav-link active" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
||||
title="Jak & Daxter: The Precursor Legacy" onclick="navBarClick('jak1')">
|
||||
<img src="../assets/images/jak-tpl.png" class="nav-img">
|
||||
</a>
|
||||
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 2"
|
||||
onclick="navBarClick('jak2')">
|
||||
<img src="../assets/images/jak-2.png" class="nav-img">
|
||||
</a>
|
||||
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 3"
|
||||
onclick="navBarClick('jak3')">
|
||||
<img src="../assets/images/jak-3.png" class="nav-img">
|
||||
</a>
|
||||
<a class="nav-link settings" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
||||
title="Settings" onclick="navBarClick('settings')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-sliders"
|
||||
viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z" />
|
||||
</svg>
|
||||
</a>
|
||||
<!-- OFFCANVAS SIDEBAR MENU -->
|
||||
<div class="offcanvas offcanvas-start" id="sidebar" aria-labelledby="sidebar-label">
|
||||
<div class="offcanvas-body">
|
||||
<a class="nav-link active" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
||||
title="Jak & Daxter: The Precursor Legacy" onclick="navBarClick('jak1')">
|
||||
<img src="../assets/images/jak-tpl.png" class="nav-img">
|
||||
</a>
|
||||
<!-- <a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
||||
title="Jak 2" onclick="navBarClick('jak2')">
|
||||
<img src="../assets/images/jak-2.png" class="nav-img">
|
||||
</a>
|
||||
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
||||
title="Jak 3" onclick="navBarClick('jak3')">
|
||||
<img src="../assets/images/jak-3.png" class="nav-img">
|
||||
</a> -->
|
||||
<a class="nav-link settings" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
||||
title="Settings" onclick="navBarClick('settings')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-sliders"
|
||||
viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -12,8 +12,8 @@ if (require('electron-squirrel-startup')) {
|
|||
const createWindow = () => {
|
||||
// Create the browser window.
|
||||
const mainWindow = new BrowserWindow({
|
||||
width: 1200,
|
||||
height: 800,
|
||||
width: 800,
|
||||
height: 600,
|
||||
resizable: false,
|
||||
title: "OpenGOAL Launcher",
|
||||
icon: path.join(__dirname, 'assets/images/icon.png'),
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ const container = document.querySelector('.container');
|
|||
const offcanvas = document.querySelector(".offcanvas-start");
|
||||
let backdrop = document.querySelector('.offcanvas-backdrop');
|
||||
const background = document.querySelector('#background');
|
||||
const model = document.querySelector('#model');
|
||||
const logo = document.querySelector('#logo');
|
||||
|
||||
const { recieve, send } = window.api;
|
||||
|
|
@ -43,22 +42,18 @@ function changeGame(game) {
|
|||
switch (game) {
|
||||
case "jak1":
|
||||
background.src = "../assets/images/jak1-bg.png";
|
||||
model.src = "../assets/images/jak1-model.png";
|
||||
logo.src = "../assets/images/jak1-logo.png";
|
||||
break;
|
||||
case "jak2":
|
||||
background.src = "../assets/images/jak2-bg.png";
|
||||
model.src = "../assets/images/jak2-model.png";
|
||||
logo.src = "../assets/images/jak-2.png";
|
||||
break;
|
||||
case "jak3":
|
||||
background.src = "../assets/images/jak3-bg.png";
|
||||
model.src = "../assets/images/jak3-model.png";
|
||||
logo.src = "../assets/images/jak-3.png";
|
||||
break;
|
||||
default:
|
||||
background.src = "../assets/images/jak1-bg.png";
|
||||
model.src = "../assets/images/jak1-model.png";
|
||||
logo.src = "../assets/images/jak1-logo.png";
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue