Add Itch Godot pck downloader
This commit is contained in:
114
index.html
114
index.html
@@ -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">
|
||||||
|
© 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) {
|
||||||
const card = document.createElement("a");
|
try {
|
||||||
card.href = `${service.secured ? "https" : "http"}://${hostIP}:${service.port}`;
|
// Using fetch HEAD mode may be blocked due to CORS;
|
||||||
card.target = "_blank";
|
// For local/internal services, this is mostly illustrative.
|
||||||
card.className =
|
const res = await fetch(
|
||||||
"bg-gray-800 hover:bg-gray-700 transition rounded-lg p-6 shadow-lg border border-gray-700";
|
`${service.secured ? "https" : "http"}://${hostIP}:${service.port}`,
|
||||||
card.innerHTML = `
|
{ method: "HEAD", mode: "no-cors" }
|
||||||
<h2 class="text-xl font-semibold mb-2">${service.name}</h2>
|
);
|
||||||
<p class="text-gray-400">${service.desc}</p>
|
return true;
|
||||||
<p class="mt-2 text-sm text-gray-500">Port: ${service.port}</p>
|
} catch {
|
||||||
`;
|
return false;
|
||||||
container.appendChild(card);
|
}
|
||||||
});
|
}
|
||||||
</script>
|
|
||||||
|
|
||||||
<footer class="mt-16 text-gray-500 text-sm">
|
(async () => {
|
||||||
© 2024-2025 Xiaomai. All services self-hosted 🧠💻
|
for (const service of services) {
|
||||||
</footer>
|
const online = await checkStatus(service);
|
||||||
|
|
||||||
|
const card = document.createElement("a");
|
||||||
|
card.href = `${service.secured ? "https" : "http"}://${hostIP}:${
|
||||||
|
service.port
|
||||||
|
}`;
|
||||||
|
card.target = "_blank";
|
||||||
|
card.rel = "noopener noreferrer";
|
||||||
|
card.className =
|
||||||
|
"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 = `
|
||||||
|
<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="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);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user