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 { app, BrowserWindow } = require('electron/main')
const path = require('node:path')
const createWindow = () => { const createWindow = () => {
const win = new BrowserWindow({ const win = new BrowserWindow({
width: 1280, width: 1280,
height: 720 height: 720,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
}) })
win.loadFile('renderer/index.html') 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
})

66
renderer/index.html
View File

@@ -26,11 +26,9 @@
<button onclick="launch('vanilla')"> <button onclick="launch('vanilla')">
<img src="vanilla_launch_icon.png" class="button_icon"/> <img src="vanilla_launch_icon.png" class="button_icon"/>
Run Vanilla Run Vanilla
</button>
<button onclick="launch('modded')"> <button onclick="launch('modded')">
<img src="modded_launch_icon.png" class="button_icon"/> <img src="modded_launch_icon.png" class="button_icon"/>
Run Modded Run Modded
</button>
</div> </div>
<div class="nav-section"> <div class="nav-section">
@@ -38,57 +36,55 @@
<button onclick="navigate('mods-installed')"> <button onclick="navigate('mods-installed')">
<img src="installed_mods_icon.png" class="button_icon"/> <img src="installed_mods_icon.png" class="button_icon"/>
Installed Installed
</button>
<button onclick="navigate('mods-online')"> <button onclick="navigate('mods-online')">
<img src="online_mods_icon.png" class="button_icon"/> <img src="online_mods_icon.png" class="button_icon"/>
Online Online
</div> </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> </nav>
</aside> </aside>
<!-- Main content --> <!-- Main content -->
<main class="content"> <main class="content">
<h1 id="title">Home</h1> <h1 id="title">Home</h1>
<div class="view" id="viewDiv"> <div class="view" id="view">
<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> </div>
</div> </div>
<div class="slider-container"> <div class="slider-container">
<label for="heightSlider">Hauteur :</label> <label for="heightSlider">Height :</label>
<input type="range" id="heightSlider" min="200" max="1000" value="420"> <input type="range" id="heightSlider">
<span id="heightValue">420px</span>
</div> </div>
</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> <script src="renderer.js"></script>
</body> </body>
</html> </html>

42
renderer/renderer.js
View File

@@ -1,37 +1,41 @@
const title = document.getElementById("title"); const title = document.getElementById("title");
const view = document.getElementById("view"); const view = document.getElementById("view");
const slider = document.getElementById("heightSlider");
const viewDiv = document.getElementById("viewDiv");
const heightValue = document.getElementById("heightValue");
slider.addEventListener("input", () => { const HomeTemplate = document.getElementById("home-template");
const height = slider.value + "px"; const installedModsTemplate = document.getElementById("installed-mods-template");
viewDiv.style.height = height; const onlineModsTemplate = document.getElementById("online-mods-template");
heightValue.textContent = height; const settingsTemplate = document.getElementById("settings-template");
});
const versionText = HomeTemplate.content.getElementById("version-text")
navigate("home")
function navigate(page) { function navigate(page) {
view.replaceChildren()
switch (page) { switch (page) {
case "home": case "home":
title.innerText = "Home"; title.innerText = "Home";
view.innerHTML = ` const HomeTemplateCopy = HomeTemplate.content.cloneNode(true)
<p>Welcome to the Silk Fly Launcher.</p> 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; break;
case "mods-installed": case "mods-installed":
title.innerText = "Installed Mods"; const installedModsTemplateCopy = installedModsTemplate.content.cloneNode(true)
view.innerHTML = ` view.appendChild(installedModsTemplateCopy)
<p>List of installed mods.</p>
`;
break; break;
case "mods-online": case "mods-online":
title.innerText = "Online mods"; const onlineModsTemplateCopy = onlineModsTemplate.content.cloneNode(true)
view.innerHTML = ` view.appendChild(onlineModsTemplateCopy)
<p>Browse Nexus mods.</p>
`;
break; 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%; height: 100%;
object-fit: cover; object-fit: cover;
z-index: -1; z-index: -1;
filter: brightness(1); filter: brightness(1.4);
} }
.sidebar { .sidebar {
@@ -107,15 +107,15 @@ body {
} }
.view { .view {
width: clamp(600px, 70vw, 900px); width: 100%;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.8);
border-radius: 12px; border-radius: 12px;
padding: 40px; padding: 40px;
position: relative; position: relative;
z-index: -1; z-index: 0;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3); box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
overflow: auto; overflow: auto;
height: 420px; height: 90%;
} }
.slider-container { .slider-container {