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

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>
 

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")
 }

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);
 }