update styles and html for online mods page, add open external link function

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');
@@ -95,3 +95,7 @@ ipcMain.handle('import-data', async () => {
     }
     await fs.copyFile(filePaths[0], dataPath,fs.constants.COPYFILE_EXCL)
 })
+
+ipcMain.handle('open-link', async (event, link) => {
+    await shell.openExternal(link)
+})

preload.js

@@ -18,3 +18,7 @@ contextBridge.exposeInMainWorld('files', {
     export: () => ipcRenderer.invoke('export-data'),
     import: () => ipcRenderer.invoke('import-data')
 });
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openExternalLink: (url) => ipcRenderer.invoke('open-link', url)
+});

renderer/index.html

@@ -80,8 +80,18 @@
 
     <template id="mod-template">
         <div class="mod-container">
+            <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>
 

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;
@@ -104,3 +112,7 @@ async function importData() {
     await files.import()
     document.getElementById("silksong-path-input").value = await save.loadSilksongPath()
 }
+
+async function downloadMod() {
+    console.log("WIP")
+}

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 {
@@ -270,3 +294,7 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: rgb(170, 25, 0);
 }
+
+.transparent-text {
+    color: rgba(255, 255, 255, 0.7);
+}