Tootaio/portal.tootaio.com
1
0
Fork 0
Code Pull Requests Activity

Add Itch Godot pck downloader

Browse Source
This commit is contained in:
kingsmai
2025-04-21 09:38:02 +08:00
parent 1453cb7f82
commit 8a80d73e7e
1 changed files with 94 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
index.html
View File

@@ -9,22 +9,47 @@
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/tailwindcss@4.1.4/index.min.css" href="https://cdn.jsdelivr.net/npm/tailwindcss@4.1.4/index.min.css"
/> />
<style>
body {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head> </head>
<body <body
class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white min-h-screen flex flex-col items-center justify-center font-sans" class="min-h-screen flex flex-col items-center justify-center text-white font-sans tracking-wide"
> >
<header class="text-center mb-12"> <header class="text-center mb-12">
<h1 class="text-5xl font-bold mb-4">🌐 My Network Services</h1> <h1 class="text-5xl font-bold mb-4">🌐 My Network Services</h1>
<p class="text-gray-400"> <p class="text-gray-300 text-lg">
All services hosted under the same IP, organized for your convenience 💡 All services hosted under the same IP, organized for your convenience 💡
</p> </p>
</header> </header>
<div <div
id="service-grid" id="service-grid"
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 max-w-5xl w-full px-6" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl w-full px-6"
></div> ></div>
<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>
<script> <script>
const hostIP = window.location.hostname; const hostIP = window.location.hostname;
@@ -33,64 +58,113 @@
port: 81, port: 81,
name: "🏠 Personal Homepage", name: "🏠 Personal Homepage",
desc: "Work in progress. Stay tuned!", desc: "Work in progress. Stay tuned!",
tags: ["Web"],
}, },
{ {
port: 40069, port: 40069,
name: "☁ Nextcloud", name: "☁ Nextcloud",
desc: "Self-hosted cloud storage", desc: "Self-hosted cloud storage",
secured: true, secured: true,
tags: ["Cloud", "Storage"],
}, },
{ {
port: 1957, port: 1957,
name: "🌦️ Malaysia Weather Radar", name: "🌦️ Malaysia Weather Radar",
desc: "Historical weather radar visualization", desc: "Historical weather radar visualization",
tags: ["Data", "Weather"],
}, },
{ {
port: 1025, port: 1025,
name: "🎮 Kenney's Assets", name: "🎮 Kenney's Assets",
desc: "Open game art & asset collection", desc: "Open game art & asset collection",
tags: ["Assets", "Games"],
},
{
port: 1031,
name: "🌐 Itch io Godot pck Downloader",
desc: "Download Godot pck files from itch.io",
tags: ["Games", "Tools"],
}, },
{ {
port: 3000, port: 3000,
name: "📁 Gitea", name: "📁 Gitea",
desc: "Self-hosted Git service", desc: "Self-hosted Git service",
tags: ["Code", "Git"],
}, },
{ {
port: 5230, port: 5230,
name: "📝 Memos", name: "📝 Memos",
desc: "Lightweight self-hosted note-taking", desc: "Lightweight self-hosted note-taking",
tags: ["Notes", "Productivity"],
}, },
{ {
port: 40178, port: 40178,
name: "📊 JSON Hero", name: "📊 JSON Hero",
desc: "Visual JSON explorer", desc: "Visual JSON explorer",
tags: ["Tools", "JSON"],
}, },
{ {
port: 24680, port: 24680,
name: "🛠️ 1Panel Dashboard", name: "🛠️ 1Panel Dashboard",
desc: "Unified server management panel", desc: "Unified server management panel",
tags: ["Admin", "Dashboard"],
}, },
]; ];
const container = document.getElementById("service-grid"); const container = document.getElementById("service-grid");
services.forEach((service) => { 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" }
);
return true;
} catch {
return false;
}
}
(async () => {
for (const service of services) {
const online = await checkStatus(service);
const card = document.createElement("a"); 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.target = "_blank";
card.rel = "noopener noreferrer";
card.className = card.className =
"bg-gray-800 hover:bg-gray-700 transition rounded-lg p-6 shadow-lg border border-gray-700"; "rounded-xl overflow-hidden p-6 backdrop-blur-md bg-white/10 hover:bg-white/20 transition duration-300 border border-white/20 shadow-xl transform hover:scale-[1.03]";
card.innerHTML = ` card.innerHTML = `
<h2 class="text-xl font-semibold mb-2">${service.name}</h2> <div class="flex flex-col h-full">
<p class="text-gray-400">${service.desc}</p> <h2 class="text-2xl font-bold mb-2">${service.name}</h2>
<p class="mt-2 text-sm text-gray-500">Port: ${service.port}</p> <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="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">
${online ? "🟢 Online" : "🔴 Offline"}
</div>
</div>
<div class="mt-3 flex flex-wrap gap-2">
${(service.tags || [])
.map(
(tag) =>
`<span class="bg-blue-800 text-white text-xs px-2 py-1 rounded-full">${tag}</span>`
)
.join("")}
</div>
</div>
`; `;
container.appendChild(card); container.appendChild(card);
}); }
})();
</script> </script>
<footer class="mt-16 text-gray-500 text-sm">
&copy; 2024-2025 Xiaomai. All services self-hosted 🧠💻
</footer>
</body> </body>
</html> </html>