From eb23a772d0168474d67f8bd27266526a1b8c70e3 Mon Sep 17 00:00:00 2001 From: xiaomai Date: Thu, 11 Sep 2025 15:44:22 +0800 Subject: [PATCH] feat(ui): overhaul landing page with new design and search functionality This commit completely rewrites the main landing page (index.html) to introduce a modern, data-driven design and new features. The previous implementation had hardcoded data and styles directly within the HTML file. This refactor separates concerns and improves maintainability. Key changes: - Complete visual redesign with a modern "glassmorphism" aesthetic and a new color palette. - Externalized all service and link data into a new `siteConfig.json` file, which is now fetched asynchronously. - Added a search bar to dynamically filter the list of services. - Implemented a keyboard shortcut ('/') to focus the search input. - Rewrote the JavaScript logic for rendering content, making it more modular and easier to manage. --- index.html | 1017 +++++++++++------------------------------------ siteConfig.json | 90 +++++ 2 files changed, 333 insertions(+), 774 deletions(-) create mode 100644 siteConfig.json diff --git a/index.html b/index.html index 843da8e..35856b3 100644 --- a/index.html +++ b/index.html @@ -1,805 +1,274 @@ - - + + - - - Tootaio - Premium Developer Services - - - + -
-
- - - - +
+
+
+
T AIO
+
+
Tootaio
+
All In One · 私有托管 · 高端体验
+
+ +
+
+ + +
+ +
-
-
-

Premium Developer Experience

-

卓越开发者体验

-

Tootaio provides a suite of premium tools and services for developers, gamers, and creators. Experience the difference.

-

Tootaio 为开发者、游戏玩家和创作者提供一套高级工具和服务。体验与众不同的服务。

- Explore Services - -
-
+
+
+

奢华·私有·一站式 —— Tootaio

+

将最常用的自托管服务与精品工具收纳于一处。我们为个人与团队提供稳定、可控且有温度的基础设施体验。

-
-
-

Our Services

- - -
- -
+
+ 查看服务 + 联系我们
-
-
-
-

Other Links

- - - -
-
+ -
+ +
+
+
Tootaio
+
欲了解更多，请通过下面链接联系。©
+
+
+
- -
-

Developer Options

-
- - -
-
+ + + + + + + - + }); + + // language toggle + const langBtn = document.getElementById('langBtn'); + langBtn.addEventListener('click', ()=>{ + lang = (lang === 'zh') ? 'en' : 'zh'; + langBtn.textContent = (lang === 'zh') ? '中文' : 'EN'; + renderServices(cfg, lang); + renderOtherLinks(cfg, lang); + // heading translations (minimal) + document.querySelector('.lead').textContent = (lang === 'zh') ? '将最常用的自托管服务与精品工具收纳于一处。我们为个人与团队提供稳定、可控且有温度的基础设施体验。' : 'We gather the most useful self-hosted tools — from source hosting and cloud storage to game asset mirrors. Tootaio delivers luxurious, stable solutions for individuals and teams.'; + }); + + // quick keyboard: '/' focus search + window.addEventListener('keydown', (e)=>{ if(e.key === '/' && document.activeElement !== q){ e.preventDefault(); q.focus(); }}); + + })(); + + + + - \ No newline at end of file + diff --git a/siteConfig.json b/siteConfig.json new file mode 100644 index 0000000..9161f2a --- /dev/null +++ b/siteConfig.json @@ -0,0 +1,90 @@ +{ + "services": [ + { + "name": "git.tootaio.com", + "url": "https://git.tootaio.com", + "description_en": "Self-hosted Gitea open source community platform.", + "description_zh": "自托管的 Gitea 开源社区平台。" + }, + { + "name": "nas.tootaio.com", + "url": "https://nas.tootaio.com", + "description_en": "Cloud storage solution for your files and data.", + "description_zh": "为您的文件和数据提供的云存储解决方案。" + }, + { + "name": "torrent.tootaio.com", + "url": "https://torrent.tootaio.com", + "description_en": "Download torrent files to our server with high speed.", + "description_zh": "借助服务器高速下载 Torrent 文件。" + }, + { + "name": "wiki.tootaio.com", + "url": "https://wiki.tootaio.com", + "description_en": "Wiki for our studio's games and project planning.", + "description_zh": "我们工作室游戏和项目策划的维基百科。" + }, + { + "name": "kenney-assets.tootaio.com", + "url": "https://kenney-assets.tootaio.com", + "description_en": "Unofficial mirror for Kenney's game assets.", + "description_zh": "Kenney 游戏资源的非官方镜像站。" + }, + { + "name": "itch-gd-dl.tootaio.com", + "url": "https://itch-gd-dl.tootaio.com", + "description_en": "Itch.io Godot game crawler and downloader.", + "description_zh": "Itch.io Godot 游戏爬取和下载工具。" + }, + { + "name": "pdf.tootaio.com", + "url": "https://pdf.tootaio.com", + "description_en": "Online PDF tools for all your document needs.", + "description_zh": "满足您所有文档需求的在线 PDF 工具。" + }, + { + "name": "life-restart.tootaio.com", + "url": "https://life-restart.tootaio.com", + "description_en": "Mirror site for the Life Restart Simulator game.", + "description_zh": "人生重开模拟器游戏的镜像站。" + }, + { + "name": "memos.tootaio.com", + "url": "https://memos.tootaio.com", + "description_en": "Note-taking space for your ideas and thoughts.", + "description_zh": "记录您的想法和思考的笔记空间。" + }, + { + "name": "json.tootaio.com", + "url": "https://json.tootaio.com", + "description_en": "JSON Hero viewer for visualizing and editing JSON data.", + "description_zh": "用于可视化和编辑 JSON 数据的 JSON Hero 查看器。" + } + ], + "otherLinks": [ + { + "name_en": "Kingsmai's Personal Blog", + "name_zh": "Kingsmai 的个人博客", + "url": "https://kingsmai.github.io", + "icon": "blog" + }, + { + "name_en": "Kingsmai's GitHub", + "name_zh": "Kingsmai 的 GitHub", + "url": "https://github.com/kingsmai", + "icon": "github" + }, + { + "name_en": "Studio Discord Community", + "name_zh": "工作室 Discord 社区", + "url": "https://discord.com/invite/sJcv7ZM", + "icon": "discord" + }, + { + "name_en": "Studio BiliBili Space", + "name_zh": "工作室 BiliBili 空间", + "url": "https://space.bilibili.com/670118055", + "icon": "video" + } + ] +} \ No newline at end of file