From 9ccc636fef9afa6a47a07d7c32ac9d5e6ff08452 Mon Sep 17 00:00:00 2001
From: kingsmai <xsbugh@gmail.com>
Date: Wed, 23 Apr 2025 12:07:33 +0800
Subject: [PATCH] Added External Links

---
 index.html | 163 +++++++++++++++++++++++------------------------------
 1 file changed, 70 insertions(+), 93 deletions(-)
diff --git a/index.html b/index.html
index 46b78a2..884ea14 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Services Hub</title>
+    <title>🌐 My Services Hub</title>
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <link
       rel="stylesheet"
@@ -29,104 +29,69 @@
       }
     </style>
   </head>
+  <body class="min-h-screen text-white font-sans tracking-wide">
+    <main class="flex flex-col items-center px-6 py-10 space-y-24">
+      <!-- Header -->
+      <header class="text-center space-y-4">
+        <h1 class="text-5xl font-bold">🌐 My Network Services</h1>
+        <p class="text-gray-300 text-lg">
+          All services hosted under the same IP, organized for your convenience 💡
+        </p>
+      </header>
 
-  <body
-    class="min-h-screen flex flex-col items-center justify-center text-white font-sans tracking-wide"
-  >
-    <header class="text-center mb-12">
-      <h1 class="text-5xl font-bold mb-4">🌐 My Network Services</h1>
-      <p class="text-gray-300 text-lg">
-        All services hosted under the same IP, organized for your convenience 💡
-      </p>
-    </header>
+      <!-- Services Section -->
+      <section class="w-full max-w-7xl">
+        <h2 class="text-3xl font-semibold mb-6">🛎️ Hosted Services</h2>
+        <div
+          id="service-grid"
+          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+        ></div>
+      </section>
 
-    <div
-      id="service-grid"
-      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl w-full px-6"
-    ></div>
+      <!-- External Links Section -->
+      <section class="w-full max-w-4xl border-t border-white/20 pt-12">
+        <h2 class="text-3xl font-semibold mb-6">📎 External Resources</h2>
+        <div id="external-links" class="grid grid-cols-1 sm:grid-cols-2 gap-6"></div>
+      </section>
 
-    <footer class="mt-16 text-gray-400 text-sm text-center">
-      &copy; 2024-2025 Xiaomai. All services self-hosted 🧠💻<br />
-      Powered by TailwindCSS · Script-enhanced · Inspired by Productivity ⚙️
-    </footer>
+      <!-- Footer -->
+      <footer class="text-gray-400 text-sm text-center pt-8 border-t border-white/10 w-full">
+        &copy; 2024-2025 Xiaomai. All services self-hosted 🧠💻<br />
+        Powered by TailwindCSS · Script-enhanced · Inspired by Productivity ⚙️
+      </footer>
+    </main>
 
     <script>
       const hostIP = window.location.hostname;
 
       const services = [
-        {
-          port: 81,
-          name: "🏠 Personal Homepage",
-          desc: "Work in progress. Stay tuned!",
-          tags: ["Web"],
-        },
-        {
-          port: 40069,
-          name: "☁ Nextcloud",
-          desc: "Self-hosted cloud storage",
-          secured: true,
-          tags: ["Cloud", "Storage"],
-        },
-        {
-          port: 1957,
-          name: "🌦️ Malaysia Weather Radar",
-          desc: "Historical weather radar visualization",
-          tags: ["Data", "Weather"],
-        },
-        {
-          port: 1025,
-          name: "🎮 Kenney's Assets",
-          desc: "Open game art & asset collection",
-          tags: ["Assets", "Games"],
-        },
-        {
-          port: 1031,
-          name: "🌐 Itch io PCK dl",
-          desc: "Download Godot pck files from itch.io",
-          tags: ["Games", "Tools"],
-        },
-        {
-          port: 3000,
-          name: "📁 Gitea",
-          desc: "Self-hosted Git service",
-          tags: ["Code", "Git"],
-        },
-        {
-          port: 5230,
-          name: "📝 Memos",
-          desc: "Lightweight self-hosted note-taking",
-          tags: ["Notes", "Productivity"],
-        },
-        {
-          port: 10001,
-          name: "📄 Stirling PDF",
-          desc: "Powerful locally hosted web based PDF manipulation tool",
-          tags: ["Tools", "PDF"],
-        },
-        {
-          port: 40178,
-          name: "📊 JSON Hero",
-          desc: "Visual JSON explorer",
-          tags: ["Tools", "JSON"],
-        },
-        {
-          port: 24680,
-          name: "🛠️ 1Panel Dashboard",
-          desc: "Unified server management panel",
-          tags: ["Admin", "Dashboard"],
-        },
+        { port: 81, name: "🏠 Personal Homepage", desc: "Work in progress. Stay tuned!", tags: ["Web"] },
+        { port: 40069, name: "☁ Nextcloud", desc: "Self-hosted cloud storage", secured: true, tags: ["Cloud", "Storage"] },
+        { port: 1957, name: "🌦️ Malaysia Weather Radar", desc: "Historical weather radar visualization", tags: ["Data", "Weather"] },
+        { port: 1025, name: "🎮 Kenney's Assets", desc: "Open game art & asset collection", tags: ["Assets", "Games"] },
+        { port: 1031, name: "🌐 Itch io PCK dl", desc: "Download Godot pck files from itch.io", tags: ["Games", "Tools"] },
+        { port: 3000, name: "📁 Gitea", desc: "Self-hosted Git service", tags: ["Code", "Git"] },
+        { port: 5230, name: "📝 Memos", desc: "Lightweight self-hosted note-taking", tags: ["Notes", "Productivity"] },
+        { port: 10001, name: "📄 Stirling PDF", desc: "Powerful locally hosted web based PDF manipulation tool", tags: ["Tools", "PDF"] },
+        { port: 40178, name: "📊 JSON Hero", desc: "Visual JSON explorer", tags: ["Tools", "JSON"] },
+        { port: 24680, name: "🛠️ 1Panel Dashboard", desc: "Unified server management panel", tags: ["Admin", "Dashboard"] },
+      ];
+
+      const externalLinks = [
+        { name: "🔗 GitHub", desc: "Code repositories and projects", url: "https://github.com/kingsmai" },
+        { name: "📘 Blog", desc: "Personal dev blog and updates", url: "https://kingsmai.github.io" },
+        { name: "💬 Discord Server", desc: "Join the dev chat room", url: "https://discord.gg/sJcv7ZM" },
       ];
 
       const container = document.getElementById("service-grid");
+      const extContainer = document.getElementById("external-links");
 
       async function checkStatus(service) {
         try {
-          // Using fetch HEAD mode may be blocked due to CORS;
-          // For local/internal services, this is mostly illustrative.
-          const res = await fetch(
-            `${service.secured ? "https" : "http"}://${hostIP}:${service.port}`,
-            { method: "HEAD", mode: "no-cors" }
-          );
+          await fetch(`${service.secured ? "https" : "http"}://${hostIP}:${service.port}`, {
+            method: "HEAD",
+            mode: "no-cors",
+          });
           return true;
         } catch {
           return false;
@@ -138,9 +103,7 @@
           const online = await checkStatus(service);
 
           const card = document.createElement("a");
-          card.href = `${service.secured ? "https" : "http"}://${hostIP}:${
-            service.port
-          }`;
+          card.href = `${service.secured ? "https" : "http"}://${hostIP}:${service.port}`;
           card.target = "_blank";
           card.rel = "noopener noreferrer";
           card.className =
@@ -150,16 +113,14 @@
             <div class="flex flex-col h-full">
               <h2 class="text-2xl font-bold mb-2">${service.name}</h2>
               <p class="text-gray-300 flex-grow">${service.desc}</p>
-              <div class="mt-4 flex flex-wrap items-center justify-between text-sm">
+              <div class="mt-4 flex justify-between items-center text-sm">
                 <div class="text-gray-400">Port: ${service.port}</div>
-                <div class="${
-                  online ? "bg-green-600" : "bg-red-600"
-                } text-white px-2 py-1 rounded-full text-xs">
+                <div class="${online ? "bg-green-600" : "bg-red-600"} text-white px-2 py-1 rounded-full text-xs">
                   ${online ? "🟢 Online" : "🔴 Offline"}
                 </div>
               </div>
               <div class="mt-3 flex flex-wrap gap-2">
-                ${(service.tags || [])
+                ${service.tags
                   .map(
                     (tag) =>
                       `<span class="bg-blue-800 text-white text-xs px-2 py-1 rounded-full">${tag}</span>`
@@ -171,6 +132,22 @@
           container.appendChild(card);
         }
       })();
+
+      for (const link of externalLinks) {
+        const card = document.createElement("a");
+        card.href = link.url;
+        card.target = "_blank";
+        card.rel = "noopener noreferrer";
+        card.className =
+          "rounded-lg border border-white/20 backdrop-blur-md bg-white/10 hover:bg-white/20 transition p-5 shadow-lg flex flex-col";
+
+        card.innerHTML = `
+          <h3 class="text-xl font-semibold mb-1">${link.name}</h3>
+          <p class="text-gray-300 text-sm">${link.desc}</p>
+        `;
+
+        extContainer.appendChild(card);
+      }
     </script>
   </body>
 </html>
