From 9cff9dd24ca9e9db521634f3919158f82b637ea0 Mon Sep 17 00:00:00 2001
From: GabiZar <GabiZar@proton.me>
Date: Thu, 15 Jan 2026 22:05:27 +0100
Subject: [PATCH] update html and and make use of template for pages

---
 main.js              |  6 +++-
 preload.js           |  7 +++++
 renderer/index.html  | 68 +++++++++++++++++++++-----------------------
 renderer/renderer.js | 42 ++++++++++++++-------------
 renderer/style.css   | 12 ++++----
 5 files changed, 73 insertions(+), 62 deletions(-)
 create mode 100644 preload.js

diff --git a/main.js b/main.js
index 00016aa..d4c2fca 100644
--- a/main.js
+++ b/main.js
@@ -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')
diff --git a/preload.js b/preload.js
new file mode 100644
index 0000000..561f442
--- /dev/null
+++ b/preload.js
@@ -0,0 +1,7 @@
+const { contextBridge } = require('electron')
+
+contextBridge.exposeInMainWorld('versions', {
+  node: () => process.versions.node,
+  chrome: () => process.versions.chrome,
+  electron: () => process.versions.electron
+})
\ No newline at end of file
diff --git a/renderer/index.html b/renderer/index.html
index 3af3cbf..4b8a482 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -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>
\ No newline at end of file
diff --git a/renderer/renderer.js b/renderer/renderer.js
index 5019785..0ba663e 100644
--- a/renderer/renderer.js
+++ b/renderer/renderer.js
@@ -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)
   }
 }
 
diff --git a/renderer/style.css b/renderer/style.css
index 92662dc..ca94c28 100644
--- a/renderer/style.css
+++ b/renderer/style.css
@@ -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 {