155 lines
7.9 KiB
HTML
155 lines
7.9 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>
|
|
<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>🛠️</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();
|
|
}
|
|
|
|
function renderCurrentPath() {
|
|
const path = window.location.pathname.replace('/', '') || 'welcome';
|
|
|
|
// 隐藏所有面板
|
|
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>
|