From d647fcefc2a7a4bb5a398834eb44a89d1b33943a Mon Sep 17 00:00:00 2001
From: GabiZar <GabiZar@proton.me>
Date: Tue, 20 Jan 2026 20:32:35 +0100
Subject: [PATCH] update styles and html for online mods page, add open
 external link function

---
 main.js                              |   6 ++++-
 preload.js                           |   4 ++++
 renderer/assets/placeholder_icon.png | Bin 0 -> 356 bytes
 renderer/index.html                  |  14 +++++++++--
 renderer/renderer.js                 |  12 ++++++++++
 renderer/style.css                   |  34 ++++++++++++++++++++++++---
 6 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 renderer/assets/placeholder_icon.png

diff --git a/main.js b/main.js
index 716d4db..924283c 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow , ipcMain, dialog} = require('electron/main');
+const { app, BrowserWindow , ipcMain, dialog, shell} = require('electron/main');
 const path = require('node:path');
 const Store = require('electron-store').default;
 const fs = require('fs/promises');
@@ -94,4 +94,8 @@ ipcMain.handle('import-data', async () => {
         await fs.unlink(dataPath)
     }
     await fs.copyFile(filePaths[0], dataPath,fs.constants.COPYFILE_EXCL)
+})
+
+ipcMain.handle('open-link', async (event, link) => {
+    await shell.openExternal(link)
 })
\ No newline at end of file
diff --git a/preload.js b/preload.js
index 39e6bc9..dbc2e5a 100644
--- a/preload.js
+++ b/preload.js
@@ -17,4 +17,8 @@ contextBridge.exposeInMainWorld('files', {
     delete: (path) => ipcRenderer.invoke('delete-data', path),
     export: () => ipcRenderer.invoke('export-data'),
     import: () => ipcRenderer.invoke('import-data')
+});
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openExternalLink: (url) => ipcRenderer.invoke('open-link', url)
 });
\ No newline at end of file
diff --git a/renderer/assets/placeholder_icon.png b/renderer/assets/placeholder_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..250880f742dfc2af1a3bd5b2490e548e2fa7f377
GIT binary patch
literal 356
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1SJ1Ryj={W7>k44ofvPP)Tsw@SkfJR9T^xl
z_H+M9WCf{A_6YK2V5m}KU}$JzVE6?TYIwoGP-?)y@G60U!D<ErgLuK5U4b@03C;qK
z$YKTtJ!KGPtXOJa1{7p3@$_|Nf62qgWMMi>;#wY1XqTspV~EG`t=Am+4jXW|1WJ7U
z7rw09E$nrYg!G%KQ;*gMi3GUl$%_ga?+y(=x?}5d`|0cko86p4k4GP@xRqLSy}m&#
zdDVG`i$B&|AK3WtTJ3`a5m%=lm?n5dxxwU771I*8sPl~n5?+ZskV=`$s@A-|`$YGD
zvG$EyYZa&Smo3jMXDc*V9nE$wZK`>}9!?MDslEp!R=kls=CJgfgvPaC=C4&b3zo`B
uyjZoK$K+Zp^WM_*?f3uv+`D(}Q{IL%iyXd~ANT|G1%s!npUXO@geCw*VS?2F

literal 0
HcmV?d00001

diff --git a/renderer/index.html b/renderer/index.html
index a11b39f..8bc644d 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -80,8 +80,18 @@
 
     <template id="mod-template">
         <div class="mod-container">
-            <h3 id="mod-title"> Mod Title </h3>
-            <p id="mod-description"> description </p>
+            <div class="mod-text">
+                <h3 id="mod-title">Mod Title</h3>
+                <p id="mod-description">description</p>
+                <p class="transparent-text">V1.0.0 last update on 01/01/2026</p>
+
+                <div class="mod-actions">
+                    <button class="default-button" onclick="downloadMod()">Download</button>
+                    <a href="https://google.com" class="default-button" id="external-link">Website</a>
+                </div>
+            </div>
+
+            <img class="mod-icon" src="assets/placeholder_icon.png" alt="mod icon">
         </div>
     </template>
 
diff --git a/renderer/renderer.js b/renderer/renderer.js
index ec475f1..0db9118 100644
--- a/renderer/renderer.js
+++ b/renderer/renderer.js
@@ -48,6 +48,14 @@ async function navigate(page) {
 
             for(let i = 0; i <= 10; i++) {
                 const modTemplateCopy = modTemplate.content.cloneNode(true)
+
+                const modLinkButton = modTemplateCopy.getElementById("external-link")
+                modLinkButton.addEventListener('click', function(event) {
+                    event.preventDefault()
+                    const modLink = modLinkButton.href
+                    electronAPI.openExternalLink(modLink)
+                })
+
                 ModsContainer.appendChild(modTemplateCopy)
             }
             break;
@@ -103,4 +111,8 @@ async function exportData() {
 async function importData() {
     await files.import()
     document.getElementById("silksong-path-input").value = await save.loadSilksongPath()
+}
+
+async function downloadMod() {
+    console.log("WIP")
 }
\ No newline at end of file
diff --git a/renderer/style.css b/renderer/style.css
index 299ebfb..15b0a94 100644
--- a/renderer/style.css
+++ b/renderer/style.css
@@ -249,9 +249,33 @@ body {
     width: 100%;
     padding: 10px;
     margin-bottom: 10px;
-    background: rgba(0, 0, 0, 0.8);
-    border: 1px solid rgba(200, 25, 0);
-    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+}
+
+.mod-container:not(:last-child) {
+    border-bottom: 1px solid rgba(150, 25, 0, 0.5);
+
+}
+
+.mod-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.mod-actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 20px;
+}
+
+.mod-icon {
+  width: 128px;
+  height: 128px;
+  object-fit: contain;
+  opacity: 0.9;
 }
 
 ::-webkit-scrollbar {
@@ -269,4 +293,8 @@ body {
 
 ::-webkit-scrollbar-thumb:hover {
   background: rgb(170, 25, 0);
+}
+
+.transparent-text {
+    color: rgba(255, 255, 255, 0.7);
 }
\ No newline at end of file