96 lines
2.9 KiB
HTML
96 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>My Services Hub</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/tailwindcss@4.1.4/index.min.css"
|
|
/>
|
|
</head>
|
|
<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"
|
|
>
|
|
<header class="text-center mb-12">
|
|
<h1 class="text-5xl font-bold mb-4">🌐 My Network Services</h1>
|
|
<p class="text-gray-400">
|
|
All services hosted under the same IP, organized for your convenience 💡
|
|
</p>
|
|
</header>
|
|
|
|
<div
|
|
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"
|
|
></div>
|
|
|
|
<script>
|
|
const hostIP = window.location.hostname;
|
|
|
|
const services = [
|
|
{
|
|
port: 81,
|
|
name: "🏠 Personal Homepage",
|
|
desc: "Work in progress. Stay tuned!",
|
|
},
|
|
{
|
|
port: 40069,
|
|
name: "☁ Nextcloud",
|
|
desc: "Self-hosted cloud storage",
|
|
},
|
|
{
|
|
port: 1957,
|
|
name: "🌦️ Malaysia Weather Radar",
|
|
desc: "Historical weather radar visualization",
|
|
},
|
|
{
|
|
port: 1025,
|
|
name: "🎮 Kenney's Assets",
|
|
desc: "Open game art & asset collection",
|
|
},
|
|
{
|
|
port: 3000,
|
|
name: "📁 Gitea",
|
|
desc: "Self-hosted Git service",
|
|
},
|
|
{
|
|
port: 5230,
|
|
name: "📝 Memos",
|
|
desc: "Lightweight self-hosted note-taking",
|
|
},
|
|
{
|
|
port: 40178,
|
|
name: "📊 JSON Hero",
|
|
desc: "Visual JSON explorer",
|
|
},
|
|
{
|
|
port: 24680,
|
|
name: "🛠️ 1Panel Dashboard",
|
|
desc: "Unified server management panel",
|
|
},
|
|
];
|
|
|
|
const container = document.getElementById("service-grid");
|
|
|
|
services.forEach((service) => {
|
|
const card = document.createElement("a");
|
|
card.href = `http://${hostIP}:${service.port}`;
|
|
card.target = "_blank";
|
|
card.className =
|
|
"bg-gray-800 hover:bg-gray-700 transition rounded-lg p-6 shadow-lg border border-gray-700";
|
|
card.innerHTML = `
|
|
<h2 class="text-xl font-semibold mb-2">${service.name}</h2>
|
|
<p class="text-gray-400">${service.desc}</p>
|
|
<p class="mt-2 text-sm text-gray-500">Port: ${service.port}</p>
|
|
`;
|
|
container.appendChild(card);
|
|
});
|
|
</script>
|
|
|
|
<footer class="mt-16 text-gray-500 text-sm">
|
|
© 2024-2025 Xiaomai. All services self-hosted 🧠💻
|
|
</footer>
|
|
</body>
|
|
</html>
|