From 210ad4b97bd9b67409f1df39e7a501b1637dbd53 Mon Sep 17 00:00:00 2001 From: xiaomai Date: Thu, 11 Sep 2025 17:03:48 +0800 Subject: [PATCH] refactor(ui): implement compact and modern UI redesign This commit introduces a significant UI overhaul for a more compact, modern, and information-dense layout. Key visual changes: - Adjusted color palette, spacing, font sizes, and border radii for a cleaner look. - Replaced centered section titles with a left-aligned design featuring icons. - Improved card header layout to better handle long titles and URLs. - Grouped search bar and language toggle into a unified control area. Additionally, a fallback mechanism has been added to the script. The page will now use a default configuration if `siteConfig.json` is unavailable, improving robustness. --- index.html | 1029 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 588 insertions(+), 441 deletions(-) diff --git a/index.html b/index.html index 04cce49..339202e 100644 --- a/index.html +++ b/index.html @@ -1,465 +1,611 @@ - - - - Tootaio Studio - 游戏开发与工具服务 - - - - + /* 紧凑型调整 */ + .compact-view .card-header { + padding: 15px; + } + + .compact-view .card-body { + padding: 15px; + } + + .compact-view .card-footer { + padding: 0 15px 15px; + } + + .compact-view .grid { + gap: 15px; + } + - -
- -
- -
-
- -

Tootaio Studio

-

专注于游戏开发与创新工具服务的创意工作室

- -
- - -
-
-
- -
-

我们的服务

-
- -
- -

其他链接

-
- -
-
- - + - - + // 过滤内容 + function filterContent(searchTerm) { + const services = document.querySelectorAll('#servicesGrid .card'); + const links = document.querySelectorAll('#linksGrid .card'); + + const allItems = [...services, ...links]; + const term = searchTerm.toLowerCase(); + + if (term === '') { + allItems.forEach(item => item.style.display = 'flex'); + return; + } + + allItems.forEach(item => { + const title = item.querySelector('.card-title').textContent.toLowerCase(); + const description = item.querySelector('.card-description')?.textContent.toLowerCase() || ''; + const url = item.querySelector('.card-url').textContent.toLowerCase(); + + if (title.includes(term) || description.includes(term) || url.includes(term)) { + item.style.display = 'flex'; + } else { + item.style.display = 'none'; + } + }); + } + + \ No newline at end of file