4e86ab5627
This commit completely replaces the previous simple service dashboard with a full-featured, professional landing page for the 'Tootaio' brand. The new design is modern, responsive, and uses a card-based layout. Key features include a language switcher for English/Chinese, user-friendly subdomain URLs instead of IP:port links, and a structured layout with a header, hero section, and footer.
606 lines
22 KiB
HTML
606 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tootaio - 一站式开发者服务平台</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--primary: #6366f1;
|
|
--primary-dark: #4f46e5;
|
|
--secondary: #8b5cf6;
|
|
--light: #f8fafc;
|
|
--dark: #1e293b;
|
|
--gray: #64748b;
|
|
--card-bg: #ffffff;
|
|
}
|
|
|
|
.dark-mode {
|
|
--light: #0f172a;
|
|
--dark: #f1f5f9;
|
|
--gray: #cbd5e1;
|
|
--card-bg: #1e293b;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: var(--light);
|
|
color: var(--dark);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
header {
|
|
background: linear-gradient(120deg, var(--primary), var(--secondary));
|
|
color: white;
|
|
padding: 1rem 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.nav-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo i {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.language-switcher {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: none;
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hero {
|
|
text-align: center;
|
|
padding: 4rem 1rem;
|
|
background: linear-gradient(45deg, #4f46e5, #7c3aed);
|
|
color: white;
|
|
border-radius: 0 0 20px 20px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.2rem;
|
|
max-width: 700px;
|
|
margin: 0 auto 2rem;
|
|
}
|
|
|
|
.cta-button {
|
|
display: inline-block;
|
|
background-color: white;
|
|
color: var(--primary);
|
|
padding: 12px 30px;
|
|
border-radius: 50px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.cta-button:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
margin-bottom: 2.5rem;
|
|
font-size: 2.2rem;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.services {
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
.services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.service-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.card-header {
|
|
padding: 1.5rem;
|
|
background: linear-gradient(45deg, var(--primary), var(--secondary));
|
|
color: white;
|
|
}
|
|
|
|
.card-header h3 {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card-body p {
|
|
color: var(--gray);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card-link {
|
|
display: inline-block;
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.other-links {
|
|
padding: 3rem 0;
|
|
background-color: rgba(99, 102, 241, 0.05);
|
|
border-radius: 20px;
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
.links-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.link-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background-color: var(--card-bg);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
text-decoration: none;
|
|
color: var(--dark);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.link-item:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.link-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(45deg, var(--primary), var(--secondary));
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 1rem;
|
|
color: white;
|
|
}
|
|
|
|
footer {
|
|
background-color: var(--dark);
|
|
color: white;
|
|
padding: 3rem 0 2rem;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.footer-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-column {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.footer-column h3 {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 1.2rem;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.footer-column a {
|
|
display: block;
|
|
color: #cbd5e1;
|
|
text-decoration: none;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.footer-column a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.copyright {
|
|
text-align: center;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: #94a3b8;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.mobile-menu-btn {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container nav-container">
|
|
<div class="logo">
|
|
<i class="fas fa-cube"></i>
|
|
<span data-lang="en">Tootaio</span>
|
|
<span data-lang="zh" style="display: none;">Tootaio</span>
|
|
</div>
|
|
<nav class="nav-links">
|
|
<a href="#" data-lang="en">Home</a>
|
|
<a href="#" data-lang="en">Services</a>
|
|
<a href="#" data-lang="en">About</a>
|
|
<a href="#" data-lang="en">Contact</a>
|
|
|
|
<a href="#" data-lang="zh" style="display: none;">首页</a>
|
|
<a href="#" data-lang="zh" style="display: none;">服务</a>
|
|
<a href="#" data-lang="zh" style="display: none;">关于</a>
|
|
<a href="#" data-lang="zh" style="display: none;">联系</a>
|
|
</nav>
|
|
<button class="language-switcher" id="languageSwitcher">
|
|
<span data-lang="en">中文</span>
|
|
<span data-lang="zh" style="display: none;">English</span>
|
|
</button>
|
|
<button class="mobile-menu-btn">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1 data-lang="en">Your All-in-One Developer Platform</h1>
|
|
<h1 data-lang="zh" style="display: none;">一站式开发者服务平台</h1>
|
|
<p data-lang="en">Tootaio provides a suite of powerful tools and services for developers, gamers, and creators. Everything you need in one place.</p>
|
|
<p data-lang="zh" style="display: none;">Tootaio 为开发者、游戏玩家和创作者提供一套强大的工具和服务。您所需的一切，尽在一处。</p>
|
|
<a href="#services" class="cta-button" data-lang="en">Explore Services</a>
|
|
<a href="#services" class="cta-button" data-lang="zh" style="display: none;">探索服务</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="services" id="services">
|
|
<div class="container">
|
|
<h2 class="section-title" data-lang="en">Our Services</h2>
|
|
<h2 class="section-title" data-lang="zh" style="display: none;">我们的服务</h2>
|
|
|
|
<div class="services-grid">
|
|
<!-- Main Site -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">The main portal to all Tootaio services and resources.</p>
|
|
<p data-lang="zh" style="display: none;">通往所有 Tootaio 服务和资源的主门户。</p>
|
|
<a href="https://tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gitea -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>git.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">Self-hosted Gitea open source community platform.</p>
|
|
<p data-lang="zh" style="display: none;">自托管的 Gitea 开源社区平台。</p>
|
|
<a href="https://git.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NAS -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>nas.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">Cloud storage solution for your files and data.</p>
|
|
<p data-lang="zh" style="display: none;">为您的文件和数据提供的云存储解决方案。</p>
|
|
<a href="https://nas.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Torrent -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>torrent.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">Download torrent files to our server with high speed.</p>
|
|
<p data-lang="zh" style="display: none;">借助服务器高速下载 Torrent 文件。</p>
|
|
<a href="https://torrent.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wiki -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>wiki.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">Wiki for our studio's games and project planning.</p>
|
|
<p data-lang="zh" style="display: none;">我们工作室游戏和项目策划的维基百科。</p>
|
|
<a href="https://wiki.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kenney Assets -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>kenney-assets.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">Unofficial mirror for Kenney's game assets.</p>
|
|
<p data-lang="zh" style="display: none;">Kenney 游戏资源的非官方镜像站。</p>
|
|
<a href="https://kenney-assets.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Itch.io Godot Downloader -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>itch-gd-dl.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">Itch.io Godot game crawler and downloader.</p>
|
|
<p data-lang="zh" style="display: none;">Itch.io Godot 游戏爬取和下载工具。</p>
|
|
<a href="https://itch-gd-dl.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PDF Tools -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>pdf.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">Online PDF tools for all your document needs.</p>
|
|
<p data-lang="zh" style="display: none;">满足您所有文档需求的在线 PDF 工具。</p>
|
|
<a href="https://pdf.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Life Restart -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>life-restart.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">Mirror site for the Life Restart Simulator game.</p>
|
|
<p data-lang="zh" style="display: none;">人生重开模拟器游戏的镜像站。</p>
|
|
<a href="https://life-restart.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Memos -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>memos.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">Note-taking space for your ideas and thoughts.</p>
|
|
<p data-lang="zh" style="display: none;">记录您的想法和思考的笔记空间。</p>
|
|
<a href="https://memos.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JSON Hero -->
|
|
<div class="service-card">
|
|
<div class="card-header">
|
|
<h3>json.tootaio.com</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p data-lang="en">JSON Hero viewer for visualizing and editing JSON data.</p>
|
|
<p data-lang="zh" style="display: none;">用于可视化和编辑 JSON 数据的 JSON Hero 查看器。</p>
|
|
<a href="https://json.tootaio.com" class="card-link" target="_blank">Visit Site</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="other-links">
|
|
<div class="container">
|
|
<h2 class="section-title" data-lang="en">Other Links</h2>
|
|
<h2 class="section-title" data-lang="zh" style="display: none;">其他链接</h2>
|
|
|
|
<div class="links-grid">
|
|
<a href="https://kingsmai.github.io" class="link-item" target="_blank">
|
|
<div class="link-icon">
|
|
<i class="fas fa-blog"></i>
|
|
</div>
|
|
<span data-lang="en">Kingsmai's Personal Blog</span>
|
|
<span data-lang="zh" style="display: none;">Kingsmai 的个人博客</span>
|
|
</a>
|
|
|
|
<a href="https://github.com/kingsmai" class="link-item" target="_blank">
|
|
<div class="link-icon">
|
|
<i class="fab fa-github"></i>
|
|
</div>
|
|
<span data-lang="en">Kingsmai's GitHub</span>
|
|
<span data-lang="zh" style="display: none;">Kingsmai 的 GitHub</span>
|
|
</a>
|
|
|
|
<a href="https://discord.com/invite/sJcv7ZM" class="link-item" target="_blank">
|
|
<div class="link-icon">
|
|
<i class="fab fa-discord"></i>
|
|
</div>
|
|
<span data-lang="en">Studio Discord Community</span>
|
|
<span data-lang="zh" style="display: none;">工作室 Discord 社区</span>
|
|
</a>
|
|
|
|
<a href="https://space.bilibili.com/670118055" class="link-item" target="_blank">
|
|
<div class="link-icon">
|
|
<i class="fas fa-video"></i>
|
|
</div>
|
|
<span data-lang="en">Studio BiliBili Space</span>
|
|
<span data-lang="zh" style="display: none;">工作室 BiliBili 空间</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-column">
|
|
<h3 data-lang="en">Tootaio</h3>
|
|
<h3 data-lang="zh" style="display: none;">Tootaio</h3>
|
|
<a href="#" data-lang="en">About Us</a>
|
|
<a href="#" data-lang="en">Our Team</a>
|
|
<a href="#" data-lang="en">Careers</a>
|
|
|
|
<a href="#" data-lang="zh" style="display: none;">关于我们</a>
|
|
<a href="#" data-lang="zh" style="display: none;">我们的团队</a>
|
|
<a href="#" data-lang="zh" style="display: none;">招聘信息</a>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h3 data-lang="en">Services</h3>
|
|
<h3 data-lang="zh" style="display: none;">服务</h3>
|
|
<a href="https://git.tootaio.com" target="_blank">Gitea</a>
|
|
<a href="https://nas.tootaio.com" target="_blank">Cloud Storage</a>
|
|
<a href="https://wiki.tootaio.com" target="_blank">Project Wiki</a>
|
|
<a href="https://pdf.tootaio.com" target="_blank">PDF Tools</a>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h3 data-lang="en">Connect</h3>
|
|
<h3 data-lang="zh" style="display: none;">联系</h3>
|
|
<a href="https://github.com/kingsmai" target="_blank">GitHub</a>
|
|
<a href="https://discord.com/invite/sJcv7ZM" target="_blank">Discord</a>
|
|
<a href="https://space.bilibili.com/670118055" target="_blank">BiliBili</a>
|
|
<a href="mailto:contact@tootaio.com">Email</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="copyright">
|
|
<p>© 2023 Tootaio. <span data-lang="en">All rights reserved.</span><span data-lang="zh" style="display: none;">版权所有。</span></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const languageSwitcher = document.getElementById('languageSwitcher');
|
|
let currentLang = 'en';
|
|
|
|
languageSwitcher.addEventListener('click', function() {
|
|
// Toggle language
|
|
currentLang = currentLang === 'en' ? 'zh' : 'en';
|
|
|
|
// Update all elements with data-lang attribute
|
|
document.querySelectorAll('[data-lang]').forEach(element => {
|
|
if (element.getAttribute('data-lang') === currentLang) {
|
|
element.style.display = element.tagName === 'SPAN' ? 'inline' : 'block';
|
|
} else {
|
|
element.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Update button text
|
|
const buttonText = currentLang === 'en' ? '中文' : 'English';
|
|
languageSwitcher.querySelector('span').textContent = buttonText;
|
|
});
|
|
|
|
// Mobile menu toggle (optional enhancement)
|
|
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
|
const navLinks = document.querySelector('.nav-links');
|
|
|
|
mobileMenuBtn.addEventListener('click', function() {
|
|
navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |