haopengzhan
5c185da0a9
- Implement dynamic SEO meta tags and sitemap.xml for toolbox.pengzhan.dev - Fix SPA title/meta refresh issue in layout.html - Address golangci-lint findings: - Refactor switch-case for tool path and SVG token parsing - Replace math.Pow with direct multiplication for performance - Fix unhandled error returns and unused imports - Omit redundant type declarations
204 lines
11 KiB
HTML
204 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.Title}} | Own-Tools</title>
|
|
<meta name="description" content="{{.Description}}">
|
|
<meta name="keywords" content="{{.Keywords}}">
|
|
<link rel="canonical" href="{{.CanonicalURL}}">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="{{.CanonicalURL}}">
|
|
<meta property="og:title" content="{{.Title}} | Own-Tools">
|
|
<meta property="og:description" content="{{.Description}}">
|
|
<meta property="og:image" content="/static/og-image.png">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="{{.CanonicalURL}}">
|
|
<meta property="twitter:title" content="{{.Title}} | Own-Tools">
|
|
<meta property="twitter:description" content="{{.Description}}">
|
|
<meta property="twitter:image" content="/static/og-image.png">
|
|
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖋️</text></svg>">
|
|
|
|
{{if .GA_ID}}
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id={{.GA_ID}}"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', '{{.GA_ID}}');
|
|
</script>
|
|
{{end}}
|
|
|
|
<style>
|
|
:root { --sidebar-width: 260px; --apple-bg: #f5f5f7; --apple-blue: #0071e3; --sidebar-bg: rgba(255, 255, 255, 0.9); }
|
|
* { box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; background-color: var(--apple-bg); color: #1d1d1f; display: flex; height: 100vh; width: 100vw; overflow: hidden; }
|
|
|
|
/* Mobile Menu */
|
|
#menu-toggle { display: none; }
|
|
.menu-btn { display: none; position: fixed; top: 20px; left: 20px; z-index: 1000; padding: 10px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); cursor: pointer; }
|
|
|
|
.sidebar {
|
|
width: var(--sidebar-width); min-width: var(--sidebar-width);
|
|
background: var(--sidebar-bg); backdrop-filter: blur(20px);
|
|
border-right: 1px solid #d2d2d7; display: flex; flex-direction: column;
|
|
padding: 24px 0; z-index: 100; transition: transform 0.3s ease;
|
|
}
|
|
.sidebar-header { padding: 0 24px 24px; border-bottom: 1px solid #e5e5e7; margin-bottom: 16px; }
|
|
.sidebar-header h2 { font-size: 22px; font-weight: 700; margin: 0; color: #1d1d1f; letter-spacing: -0.5px; cursor: pointer; }
|
|
|
|
.nav-list { flex: 1; overflow-y: auto; }
|
|
.nav-item { padding: 12px 24px; cursor: pointer; transition: all 0.2s; font-size: 15px; font-weight: 500; color: #424245; display: flex; align-items: center; gap: 12px; }
|
|
.nav-item:hover { background: rgba(0,0,0,0.04); color: #000; }
|
|
.nav-item.active { background: var(--apple-blue); color: #ffffff; }
|
|
|
|
.main-container { flex: 1; display: flex; flex-direction: column; overflow-y: auto; width: 100%; }
|
|
.main-content { padding: 40px 60px; width: 100%; }
|
|
|
|
/* Unified Page Header */
|
|
.page-header { margin-bottom: 32px; }
|
|
.page-header h1 { font-size: 34px; font-weight: 700; margin: 0 0 8px 0; }
|
|
.page-header p { font-size: 18px; color: #86868b; margin: 0; }
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar { position: fixed; left: -260px; height: 100%; }
|
|
#menu-toggle:checked ~ .sidebar { transform: translateX(260px); }
|
|
.menu-btn { display: block; }
|
|
.main-content { padding: 80px 20px 20px; }
|
|
}
|
|
|
|
.tool-panel { display: none; }
|
|
.tool-panel.active { display: block; animation: fadeIn 0.3s ease-out; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
/* Shared Components */
|
|
.card { background: white; border-radius: 18px; padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); margin-bottom: 30px; border: 1px solid rgba(0,0,0,0.05); }
|
|
.tabs-container { display: flex; gap: 10px; border-bottom: 1px solid #d2d2d7; margin-bottom: 24px; overflow-x: auto; }
|
|
.tab-btn { padding: 10px 20px; cursor: pointer; font-size: 16px; font-weight: 600; color: #86868b; border-bottom: 3px solid transparent; transition: all 0.2s; white-space: nowrap; }
|
|
.tab-btn.active { color: var(--apple-blue); border-bottom-color: var(--apple-blue); }
|
|
|
|
/* Buttons */
|
|
button {
|
|
background-color: var(--apple-blue); color: white; border: none; padding: 0 30px;
|
|
border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; height: 48px;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center;
|
|
}
|
|
button:hover { background-color: #0077ed; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,113,227,0.2); }
|
|
button:active { transform: translateY(0); }
|
|
button:disabled { background-color: #d2d2d7; cursor: not-allowed; transform: none; box-shadow: none; }
|
|
|
|
/* Form Controls */
|
|
textarea, select {
|
|
padding: 14px 18px; border: 1px solid #d2d2d7; border-radius: 12px; font-size: 17px;
|
|
background-color: #fbfbfd; width: 100%; box-sizing: border-box; transition: all 0.2s;
|
|
font-family: inherit;
|
|
}
|
|
textarea:focus, select:focus {
|
|
border-color: var(--apple-blue); background-color: #fff;
|
|
box-shadow: 0 0 0 4px rgba(0,113,227,0.1); outline: none;
|
|
}
|
|
select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2386868b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 40px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<input type="checkbox" id="menu-toggle">
|
|
<label for="menu-toggle" class="menu-btn">☰</label>
|
|
|
|
<div class="sidebar">
|
|
<div class="sidebar-header" onclick="navigateTo('/')"><h2>Own-Tools</h2></div>
|
|
<div id="nav-list" class="nav-list">
|
|
<div id="nav-welcome" class="nav-item" onclick="navigateTo('/'); document.getElementById('menu-toggle').checked = false;"><span>🏠</span> 仪表盘</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-container">
|
|
<div class="main-content">
|
|
{{template "content" .}}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function loadTools() {
|
|
try {
|
|
const response = await fetch('/api/tools');
|
|
const tools = await response.json();
|
|
const navList = document.getElementById('nav-list');
|
|
tools.forEach(tool => {
|
|
const item = document.createElement('div');
|
|
item.className = 'nav-item'; item.id = `nav-${tool.id}`;
|
|
item.innerHTML = `<span>${tool.emoji || '🛠️'}</span> ${tool.name}`;
|
|
item.onclick = () => { navigateTo(`/${tool.id}`); document.getElementById('menu-toggle').checked = false; };
|
|
navList.appendChild(item);
|
|
});
|
|
renderCurrentPath();
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
function navigateTo(path) {
|
|
window.history.pushState({}, '', path);
|
|
renderCurrentPath();
|
|
}
|
|
|
|
const metaConfig = {
|
|
'welcome': {
|
|
title: '探索工具箱',
|
|
desc: '基于 Go 语言构建的模块化个人工具箱，提供汉字字帖生成、数字学习等多种实用生产力工具。',
|
|
keywords: '个人工具箱, 汉字字帖生成, 书法练习, 数字学习, Own-Tools'
|
|
},
|
|
'zitie': {
|
|
title: '汉字字帖生成器 - 教学方格与步进式分解',
|
|
desc: '在线生成 2x3 教学方格字帖和 9 列步进式笔顺分解字帖，支持多种书法字体和古风排版。',
|
|
keywords: '字帖生成, 笔顺分解, 汉字教学, 书法字帖, 练字'
|
|
},
|
|
'learn-number': {
|
|
title: '趣味数字学习工具',
|
|
desc: '为儿童设计的数字学习与计数练习工具，生动活泼，寓教于乐。',
|
|
keywords: '数字学习, 儿童计数, 幼小衔接'
|
|
}
|
|
};
|
|
|
|
function renderCurrentPath() {
|
|
const path = window.location.pathname.replace('/', '') || 'welcome';
|
|
|
|
// 1. 更新标题与元数据
|
|
const meta = metaConfig[path] || metaConfig['welcome'];
|
|
document.title = `${meta.title} | Own-Tools`;
|
|
document.querySelector('meta[name="description"]').setAttribute('content', meta.desc);
|
|
document.querySelector('meta[name="keywords"]').setAttribute('content', meta.keywords);
|
|
|
|
// 更新 Open Graph 标签 (可选，社交分享主要看服务端渲染)
|
|
const canonical = `https://toolbox.pengzhan.dev/${path === 'welcome' ? '' : path}`;
|
|
document.querySelector('link[rel="canonical"]').setAttribute('href', canonical);
|
|
document.querySelector('meta[property="og:title"]').setAttribute('content', `${meta.title} | Own-Tools`);
|
|
document.querySelector('meta[property="og:description"]').setAttribute('content', meta.desc);
|
|
document.querySelector('meta[property="og:url"]').setAttribute('content', canonical);
|
|
|
|
// 2. 隐藏所有面板
|
|
document.querySelectorAll('.tool-panel').forEach(p => p.classList.remove('active'));
|
|
|
|
// 显示目标面板
|
|
const target = document.getElementById(`panel-${path}`);
|
|
if (target) {
|
|
target.classList.add('active');
|
|
} else {
|
|
// 如果找不到路由，默认回首页
|
|
document.getElementById('panel-welcome').classList.add('active');
|
|
}
|
|
|
|
// 导航高亮
|
|
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
|
const activeNav = document.getElementById(`nav-${path}`) || document.getElementById('nav-welcome');
|
|
if (activeNav) activeNav.classList.add('active');
|
|
}
|
|
|
|
window.onpopstate = renderCurrentPath;
|
|
loadTools();
|
|
</script>
|
|
</body>
|
|
</html>
|