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

refactor(ui): implement compact and modern UI redesign

Browse Source 
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.
This commit is contained in:
xiaomai
2025-09-11 17:03:48 +08:00
parent fb1116ab45
commit 210ad4b97b
1 changed files with 588 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
index.html
View File

@@ -1,21 +1,18 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tootaio Studio - 游戏开发与工具服务</title>
<meta name="description" content="Tootaio工作室专注于游戏开发与工具服务，提供多种在线工具和资源">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0a12;
--bg-secondary: #151521;
--bg-card: #1c1c2d;
--bg-card-hover: #23233a;
--bg-primary: #0f0f1a;
--bg-secondary: #1a1a2a;
--bg-card: #222236;
--bg-card-hover: #2a2a40;
--accent-primary: #ff9e44;
--accent-secondary: #ff6b6b;
--text-primary: #ffffff;
@@ -23,9 +20,9 @@
--text-muted: #7a7a9d;
--border-color: rgba(255, 255, 255, 0.08);
--gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
--shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
--radius: 16px;
--transition: all 0.3s ease;
--shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--radius: 12px;
--transition: all 0.2s ease;
}
* {
@@ -38,22 +35,22 @@
font-family: 'Inter', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
line-height: 1.5;
padding: 0;
overflow-x: hidden;
}
.container {
max-width: 1280px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
padding: 0 20px;
}
/* Header Styles */
header {
padding: 40px 0;
padding: 30px 0 20px;
text-align: center;
background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
background: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
}
@@ -61,106 +58,128 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--gradient);
margin-bottom: 20px;
margin-bottom: 15px;
box-shadow: var(--shadow);
transition: var(--transition);
}
.logo:hover {
transform: scale(1.05) rotate(5deg);
transform: scale(1.05);
}
.logo-text {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 28px;
font-size: 20px;
color: #fff;
}
h1 {
font-family: 'Playfair Display', serif;
font-size: 48px;
margin-bottom: 12px;
font-size: 32px;
margin-bottom: 8px;
background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.tagline {
font-size: 18px;
font-size: 16px;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 30px;
max-width: 500px;
margin: 0 auto 20px;
}
.header-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-top: 15px;
}
.search-container {
max-width: 500px;
margin: 0 auto;
position: relative;
width: 300px;
}
.search-box {
width: 100%;
padding: 16px 20px;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: 50px;
border-radius: 30px;
color: var(--text-primary);
font-size: 16px;
padding-left: 50px;
font-size: 14px;
padding-left: 40px;
transition: var(--transition);
}
.search-box:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(255, 158, 68, 0.2);
box-shadow: 0 0 0 2px rgba(255, 158, 68, 0.2);
}
.search-icon {
position: absolute;
left: 20px;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 14px;
}
.lang-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
color: var(--text-secondary);
padding: 10px 15px;
border-radius: 30px;
cursor: pointer;
transition: var(--transition);
font-size: 14px;
}
.lang-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Main Content */
main {
padding: 60px 0;
padding: 40px 0;
}
.section-title {
font-size: 28px;
margin-bottom: 40px;
text-align: center;
font-size: 22px;
margin-bottom: 25px;
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
padding-left: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title::after {
.section-title::before {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
width: 5px;
height: 22px;
background: var(--gradient);
border-radius: 2px;
border-radius: 10px;
}
.section-title i {
color: var(--accent-primary);
font-size: 18px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
margin-bottom: 60px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.card {
@@ -176,82 +195,96 @@
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 158, 68, 0.2);
}
.card-header {
padding: 20px;
padding: 18px;
position: relative;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--border-color);
}
.card-icon {
width: 50px;
height: 50px;
border-radius: 12px;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--gradient);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
font-size: 20px;
font-size: 16px;
flex-shrink: 0;
}
.card-title-container {
flex: 1;
min-width: 0;
}
.card-title {
font-size: 20px;
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-url {
color: var(--accent-primary);
font-size: 14px;
display: block;
margin-bottom: 12px;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-body {
padding: 20px;
padding: 18px;
flex-grow: 1;
}
.card-description {
color: var(--text-secondary);
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
.card-footer {
padding: 0 20px 20px;
padding: 0 18px 18px;
}
.card-link {
display: inline-flex;
align-items: center;
padding: 10px 20px;
padding: 8px 16px;
background: rgba(255, 158, 68, 0.1);
color: var(--accent-primary);
border-radius: 50px;
border-radius: 20px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
transition: var(--transition);
}
.card-link:hover {
background: rgba(255, 158, 68, 0.2);
transform: translateX(5px);
transform: translateX(3px);
}
.card-link i {
margin-left: 8px;
font-size: 14px;
margin-left: 6px;
font-size: 12px;
}
/* Footer */
footer {
background: var(--bg-secondary);
padding: 40px 0;
padding: 30px 0;
border-top: 1px solid var(--border-color);
}
@@ -260,24 +293,24 @@
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
gap: 15px;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 24px;
font-size: 18px;
}
.footer-links {
display: flex;
gap: 20px;
gap: 15px;
}
.footer-link {
color: var(--text-secondary);
text-decoration: none;
transition: var(--transition);
font-size: 14px;
}
.footer-link:hover {
@@ -286,7 +319,7 @@
.copyright {
color: var(--text-muted);
font-size: 14px;
font-size: 13px;
margin-top: 20px;
width: 100%;
text-align: center;
@@ -295,13 +328,22 @@
/* Responsive */
@media (max-width: 768px) {
h1 {
font-size: 36px;
font-size: 28px;
}
.grid {
grid-template-columns: 1fr;
}
.header-controls {
flex-direction: column;
}
.search-container {
width: 100%;
max-width: 300px;
}
.footer-content {
flex-direction: column;
text-align: center;
@@ -309,6 +351,7 @@
.footer-links {
justify-content: center;
flex-wrap: wrap;
}
}
@@ -316,9 +359,8 @@
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
@@ -326,37 +368,28 @@
}
.card {
animation: fadeIn 0.5s ease-out;
animation: fadeIn 0.4s ease-out;
}
/* Language Toggle */
.lang-toggle {
position: absolute;
top: 20px;
right: 20px;
/* 紧凑型调整 */
.compact-view .card-header {
padding: 15px;
}
.lang-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
color: var(--text-secondary);
padding: 8px 16px;
border-radius: 50px;
cursor: pointer;
transition: var(--transition);
.compact-view .card-body {
padding: 15px;
}
.lang-btn:hover {
background: rgba(255, 255, 255, 0.1);
.compact-view .card-footer {
padding: 0 15px 15px;
}
.compact-view .grid {
gap: 15px;
}
</style>
</head>
<body>
<div class="lang-toggle">
<button class="lang-btn" id="langToggle">EN</button>
</div>
<header>
<div class="container">
<div class="logo">
@@ -365,20 +398,29 @@
<h1>Tootaio Studio</h1>
<p class="tagline">专注于游戏开发与创新工具服务的创意工作室</p>
<div class="header-controls">
<div class="search-container">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-box" placeholder="搜索服务或工具..." id="searchInput">
</div>
<button class="lang-btn" id="langToggle">EN</button>
</div>
</div>
</header>
<main class="container">
<h2 class="section-title">我们的服务</h2>
<main class="container compact-view">
<h2 class="section-title">
<i class="fas fa-server"></i>
<span>我们的服务</span>
</h2>
<div class="grid" id="servicesGrid">
<!-- 服务卡片将通过JavaScript动态生成 -->
</div>
<h2 class="section-title">其他链接</h2>
<h2 class="section-title">
<i class="fas fa-link"></i>
<span>其他链接</span>
</h2>
<div class="grid" id="linksGrid">
<!-- 链接卡片将通过JavaScript动态生成 -->
</div>
@@ -401,6 +443,108 @@
</footer>
<script>
// 默认配置
const defaultSiteConfig = {
services: [
{
"name": "git.tootaio.com",
"url": "https://git.tootaio.com",
"description_en": "Self-hosted Gitea open source community platform.",
"description_zh": "自托管的 Gitea 开源社区平台。",
"icon": "code-branch"
},
{
"name": "nas.tootaio.com",
"url": "https://nas.tootaio.com",
"description_en": "Cloud storage and file sharing service.",
"description_zh": "云端存储和文件共享服务。",
"icon": "cloud"
},
{
"name": "torrent.tootaio.com",
"url": "https://torrent.tootaio.com",
"description_en": "Download torrent files to the server with the help of the server.",
"description_zh": "借助服务器，将 Torrent 文件下载到服务器中。",
"icon": "download"
},
{
"name": "wiki.tootaio.com",
"url": "https://wiki.tootaio.com",
"description_en": "Our studio's various game/project planning wiki.",
"description_zh": "我们工作室的各个游戏/项目策划维基百科。",
"icon": "book"
},
{
"name": "kenney-assets.tootaio.com",
"url": "https://kenney-assets.tootaio.com",
"description_en": "Unofficial mirror site for Kenney's assets.",
"description_zh": "Kenney资源非官网镜像站。",
"icon": "palette"
},
{
"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 游戏爬取器。",
"icon": "gamepad"
},
{
"name": "pdf.tootaio.com",
"url": "https://pdf.tootaio.com",
"description_en": "Online PDF tools and utilities.",
"description_zh": "在线PDF工具集。",
"icon": "file-pdf"
},
{
"name": "life-restart.tootaio.com",
"url": "https://life-restart.tootaio.com",
"description_en": "Life Restart Simulator mirror site.",
"description_zh": "人生重开模拟器镜像站。",
"icon": "redo"
},
{
"name": "memos.tootaio.com",
"url": "https://memos.tootaio.com",
"description_en": "Note-taking space and knowledge management.",
"description_zh": "笔记空间和知识管理。",
"icon": "sticky-note"
},
{
"name": "json.tootaio.com",
"url": "https://json.tootaio.com",
"description_en": "JSON Hero viewer for visualizing JSON data.",
"description_zh": "JSON Hero 查看器，可视化JSON数据。",
"icon": "code"
}
],
otherLinks: [
{
"name_en": "Kingsmai's Personal Blog",
"name_zh": "Kingsmai 的个人博客",
"url": "https://kingsmai.github.io",
"icon": "blog"
},
{
"name_en": "GitHub Profile",
"name_zh": "GitHub 主页",
"url": "https://github.com/kingsmai",
"icon": "github"
},
{
"name_en": "Discord Community",
"name_zh": "Discord 社区",
"url": "https://discord.com/invite/sJcv7ZM",
"icon": "discord"
},
{
"name_en": "BiliBili Space",
"name_zh": "BiliBili 空间",
"url": "https://space.bilibili.com/670118055",
"icon": "video"
}
]
};
// 配置数据
async function loadConfig() {
try {
@@ -458,9 +602,11 @@
<div class="card-icon">
<i class="fas fa-${service.icon || 'link'}"></i>
</div>
<div class="card-title-container">
<h3 class="card-title">${service.name}</h3>
<span class="card-url">${service.url.replace('https://', '')}</span>
</div>
</div>
<div class="card-body">
<p class="card-description">${currentLang === 'zh' ? service.description_zh : service.description_en}</p>
</div>
@@ -489,9 +635,11 @@
<div class="card-icon">
<i class="fab fa-${link.icon || 'link'}"></i>
</div>
<div class="card-title-container">
<h3 class="card-title">${currentLang === 'zh' ? link.name_zh : link.name_en}</h3>
<span class="card-url">${link.url.replace('https://', '')}</span>
</div>
</div>
<div class="card-footer">
<a href="${link.url}" target="_blank" class="card-link">
${currentLang === 'zh' ? '访问链接' : 'Visit Link'}
@@ -531,5 +679,4 @@
}
</script>
</body>
</html>