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

Added Landing Page

Browse Source
This commit is contained in:
kingsmai
2025-04-19 14:48:21 +08:00
parent 0a1d9142f1
commit 0a5dd13a13
1 changed files with 81 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
index.html Normal file
View File

@@ -0,0 +1,81 @@
<!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: 1957,
name: "🌦️ Malaysia Weather Radar",
desc: "Historical weather radar visualization",
},
{
port: 81,
name: "🏠 Personal Homepage",
desc: "Work in progress. Stay tuned!",
},
{
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.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">
&copy; 2024-2025 Xiaomai. All services self-hosted 🧠💻
</footer>
</body>
</html>