GabiZar/Silk-Fly-Launcher
1
0
Fork 0
mirror of https://github.com/Gabi-Zar/Silk-Fly-Launcher.git synced 2026-04-17 05:26:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

update html and and make use of template for pages

Browse Source
This commit is contained in:
GabiZar
2026-01-15 22:05:27 +01:00
parent c5693dcd4d
commit 9cff9dd24c
5 changed files with 73 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
main.js
View File

@@ -1,9 +1,13 @@
const { app, BrowserWindow } = require('electron/main')
const path = require('node:path')
const createWindow = () => {
const win = new BrowserWindow({
width: 1280,
height: 720
height: 720,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('renderer/index.html')

7
preload.js Normal file
View File

@@ -0,0 +1,7 @@
const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('versions', {
node: () => process.versions.node,
chrome: () => process.versions.chrome,
electron: () => process.versions.electron
})

68
renderer/index.html
View File

@@ -26,11 +26,9 @@
<button onclick="launch('vanilla')">
<img src="vanilla_launch_icon.png" class="button_icon"/>
Run Vanilla
</button>
<button onclick="launch('modded')">
<img src="modded_launch_icon.png" class="button_icon"/>
Run Modded
</button>
</div>
<div class="nav-section">
@@ -38,57 +36,55 @@
<button onclick="navigate('mods-installed')">
<img src="installed_mods_icon.png" class="button_icon"/>
Installed
</button>
<button onclick="navigate('mods-online')">
<img src="online_mods_icon.png" class="button_icon"/>
Online
</div>
<div class="nav-section">
<span class="nav-title">Settings</span>
<button onclick="navigate('general-settings')">
<img src="general_settings_icon.png" class="button_icon"/>
General
</div>
</nav>
</aside>
<!-- Main content -->
<main class="content">
<h1 id="title">Home</h1>
<div class="view" id="viewDiv">
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<p>Welcome to the Silk Fly Launcher.</p>
<div class="view" id="view">
</div>
</div>
<div class="slider-container">
<label for="heightSlider">Hauteur :</label>
<input type="range" id="heightSlider" min="200" max="1000" value="420">
<span id="heightValue">420px</span>
<label for="heightSlider">Height :</label>
<input type="range" id="heightSlider">
</div>
</div>
<!-- Template -->
<template id="home-template">
<h2>Silk Fly Launcher</h2>
<h3> Debugging data</h3>
<p id="version-text"></p>
</template>
<template id="installed-mods-template">
<p>List of installed mods.</p>
</template>
<template id="online-mods-template">
<p>Browse Nexus mods.</p>
</template>
<template id="settings-template">
<p>General settings</p>
</template>
<script src="renderer.js"></script>
</body>
</html>
</html>

42
renderer/renderer.js
View File

@@ -1,37 +1,41 @@
const title = document.getElementById("title");
const view = document.getElementById("view");
const slider = document.getElementById("heightSlider");
const viewDiv = document.getElementById("viewDiv");
const heightValue = document.getElementById("heightValue");
slider.addEventListener("input", () => {
const height = slider.value + "px";
viewDiv.style.height = height;
heightValue.textContent = height;
});
const HomeTemplate = document.getElementById("home-template");
const installedModsTemplate = document.getElementById("installed-mods-template");
const onlineModsTemplate = document.getElementById("online-mods-template");
const settingsTemplate = document.getElementById("settings-template");
const versionText = HomeTemplate.content.getElementById("version-text")
navigate("home")
function navigate(page) {
view.replaceChildren()
switch (page) {
case "home":
title.innerText = "Home";
view.innerHTML = `
<p>Welcome to the Silk Fly Launcher.</p>
`;
const HomeTemplateCopy = HomeTemplate.content.cloneNode(true)
const versionText = HomeTemplateCopy.querySelector("#version-text")
versionText.innerText =
`Chrome version: (v${versions.chrome()}), ` +
`Node.js version: (v${versions.node()}), Electron version: (v${versions.electron()})`
view.appendChild(HomeTemplateCopy)
break;
case "mods-installed":
title.innerText = "Installed Mods";
view.innerHTML = `
<p>List of installed mods.</p>
`;
const installedModsTemplateCopy = installedModsTemplate.content.cloneNode(true)
view.appendChild(installedModsTemplateCopy)
break;
case "mods-online":
title.innerText = "Online mods";
view.innerHTML = `
<p>Browse Nexus mods.</p>
`;
const onlineModsTemplateCopy = onlineModsTemplate.content.cloneNode(true)
view.appendChild(onlineModsTemplateCopy)
break;
case "general-settings":
const settingsTemplateCopy = settingsTemplate.content.cloneNode(true)
view.appendChild(settingsTemplateCopy)
}
}

12
renderer/style.css
View File

@@ -26,7 +26,7 @@ body {
height: 100%;
object-fit: cover;
z-index: -1;
filter: brightness(1);
filter: brightness(1.4);
}
.sidebar {
@@ -107,15 +107,15 @@ body {
}
.view {
width: clamp(600px, 70vw, 900px);
background: rgba(0, 0, 0, 0.6);
width: 100%;
background: rgba(0, 0, 0, 0.8);
border-radius: 12px;
padding: 40px;
position: relative;
z-index: -1;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
z-index: 0;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
overflow: auto;
height: 420px;
height: 90%;
}
.slider-container {