266 lines
11 KiB
HTML
266 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>ZSCGRの星标导航</title>
|
|
|
|
<link rel="icon" 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>">
|
|
|
|
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/lykmapipo/[email protected]/css/themify-icons.css">
|
|
|
|
<style>
|
|
/* 基础重置 */
|
|
* { padding: 0; margin: 0; box-sizing: border-box; }
|
|
li { list-style: none; }
|
|
a { text-decoration: none; color: inherit; }
|
|
|
|
body {
|
|
font-size: 14px;
|
|
color: #333;
|
|
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
/* 默认/电脑端 背景图设置 */
|
|
background-image: url('https://pic.chgr.cc/random?dir=cover&type=img');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
min-height: 100vh;
|
|
/* Firefox 的滚动条隐藏设置 */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255,255,255,0.2) transparent;
|
|
}
|
|
|
|
/* --- 滚动条美化核心 (WebKit 系列) --- */
|
|
/* 隐藏侧边栏和主页面的默认宽大滚动条，改为细线条 */
|
|
|
|
/* 1. 设置滚动条的宽度 */
|
|
::-webkit-scrollbar {
|
|
width: 6px; /* 纵向滚动条宽度 */
|
|
height: 6px; /* 横向滚动条高度 */
|
|
}
|
|
|
|
/* 2. 设置滚动条的轨道背景 (通常设为透明) */
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* 3. 设置滚动条的滑块 (也叫拇指) */
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.2); /* 半透明白色，非常低调 */
|
|
border-radius: 3px; /* 滑块圆角 */
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
/* 4. 鼠标悬停在滑块上时，颜色稍微加深一点 */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
/* --- 磨砂核心类 --- */
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.4); /* 半透明白色 */
|
|
backdrop-filter: blur(12px); /* 磨砂模糊核心 */
|
|
-webkit-backdrop-filter: blur(12px); /* 兼容 Safari */
|
|
border: 1px solid rgba(255, 255, 255, 0.3); /* 增加边缘亮光，更有质感 */
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* 柔和阴影 */
|
|
}
|
|
|
|
/* 布局 */
|
|
.container { display: flex; }
|
|
|
|
/* 侧边栏磨砂效果 */
|
|
.left-bar {
|
|
position: fixed;
|
|
width: 248px;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 1000;
|
|
transition: all .3s;
|
|
/* 使用稍深一点的磨砂 */
|
|
background: rgba(48, 51, 60, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
|
/* 确保侧边栏内部内容溢出时也能使用细滚动条 */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.big-logo { height: 160px; display: flex; align-items: center; justify-content: center; padding: 20px; }
|
|
.big-logo img { width: 90px; height: 90px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); }
|
|
|
|
.left-bar .title { color: #fff; font-size: 18px; text-align: center; padding: 10px 0; font-weight: bold; letter-spacing: 1px; }
|
|
.nav { flex: 1; overflow-y: auto; }
|
|
.nav-item li a { display: block; padding: 12px 25px; color: rgba(255,255,255,0.7); transition: 0.3s; }
|
|
.nav-item li:hover a { color: #fff; background: rgba(255,255,255,0.1); }
|
|
|
|
/* 主体内容区 */
|
|
.main { margin-left: 248px; flex: 1; padding-bottom: 50px; }
|
|
|
|
.header-tools {
|
|
position: sticky; top: 0; z-index: 900; padding: 15px 30px;
|
|
display: flex; align-items: center;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
#search {
|
|
width: 300px; padding: 10px 20px; border-radius: 25px;
|
|
border: 1px solid rgba(255,255,255,0.5);
|
|
background: rgba(255,255,255,0.2);
|
|
outline: none; color: #000;
|
|
}
|
|
#search::placeholder { color: #666; }
|
|
|
|
.content-wrapper { padding: 30px; }
|
|
|
|
.about-box {
|
|
padding: 15px 20px; border-radius: 12px; margin-bottom: 30px;
|
|
color: #333; font-weight: 500;
|
|
}
|
|
|
|
/* 仓库卡片磨砂 */
|
|
.category-title { font-size: 20px; font-weight: bold; margin: 30px 0 20px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
|
|
|
|
.repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
|
|
|
|
.repo-card {
|
|
padding: 20px; border-radius: 16px;
|
|
display: flex; align-items: flex-start;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.repo-card:hover { transform: translateY(-8px); background: rgba(255,255,255,0.5); }
|
|
|
|
.repo-avatar { width: 50px; height: 50px; border-radius: 12px; margin-right: 15px; border: 1px solid rgba(255,255,255,0.3); }
|
|
.repo-name { font-weight: bold; font-size: 16px; color: #1a1a1a; margin-bottom: 6px; }
|
|
.repo-desc { font-size: 13px; color: #444; line-height: 1.4; height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
|
|
.repo-meta { margin-top: 12px; display: flex; gap: 12px; font-size: 12px; color: #555; }
|
|
.repo-meta i { color: #3a85ff; }
|
|
|
|
/* 回到顶部 */
|
|
#fixedBar { position: fixed; right: 25px; bottom: 30px; width: 45px; height: 45px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 1001; }
|
|
|
|
/* 移动端适配 */
|
|
@media screen and (max-width: 768px) {
|
|
body {
|
|
/* 手机端专用背景图 (竖屏) */
|
|
background-image: url('https://pic.chgr.cc/random?dir=shuping&type=img');
|
|
}
|
|
.left-bar { left: -248px; }
|
|
.left-bar.active { left: 0; }
|
|
.main { margin-left: 0; }
|
|
#search { width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<aside class="left-bar" id="sidebar">
|
|
<div class="big-logo">
|
|
<img src="https://pic.chgr.cc/file/avatar/1753674815577_ZSCGR.png" alt="logo">
|
|
</div>
|
|
<div class="title">个人导航</div>
|
|
<nav class="nav">
|
|
<ul class="nav-item" id="sidebarLinks"></ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<section class="main">
|
|
<header class="header-tools">
|
|
<div style="cursor:pointer; margin-right:20px; color:#fff;" onclick="toggleSidebar()"><i class="ti-menu"></i></div>
|
|
<input id="search" type="text" placeholder="搜索 GitHub 仓库...">
|
|
</header>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="about-box glass-effect">
|
|
<i class="ti-light-bulb"></i> 欢迎来到我的个人星标仓库导航。
|
|
</div>
|
|
|
|
<div id="categories-container"></div>
|
|
</div>
|
|
|
|
<div id="fixedBar" class="glass-effect" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
|
|
<i class="ti-arrow-up"></i>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
const categoriesContainer = document.getElementById('categories-container');
|
|
const sidebarLinks = document.getElementById('sidebarLinks');
|
|
const searchInput = document.getElementById('search');
|
|
let allData = {};
|
|
|
|
// 获取数据
|
|
fetch('https://n8n.chgr.cc/webhook/api?name=github-stars')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
allData = data;
|
|
renderContent(data);
|
|
});
|
|
|
|
function renderContent(data) {
|
|
let categoriesHtml = '';
|
|
let sidebarHtml = '';
|
|
|
|
for (const lang in data) {
|
|
if (data[lang].length === 0) continue;
|
|
sidebarHtml += `<li><a href="#${lang}"><i class="ti-layout-grid2"></i> ${lang}</a></li>`;
|
|
categoriesHtml += `
|
|
<div id="${lang}">
|
|
<div class="category-title">${lang} Repositories</div>
|
|
<div class="repo-grid">
|
|
${data[lang].map(repo => `
|
|
<div class="repo-card glass-effect" onclick="window.open('${repo.html_url}', '_blank')">
|
|
<img class="repo-avatar" src="${repo.owner.avatar_url}">
|
|
<div style="flex:1; overflow:hidden;">
|
|
<div class="repo-name">${repo.name}</div>
|
|
<div class="repo-desc">${repo.description || 'No description available.'}</div>
|
|
<div class="repo-meta">
|
|
<span><i class="ti-star"></i> ${repo.stargazers_count}</span>
|
|
<span><i class="ti-eye"></i> ${repo.watchers_count}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
categoriesContainer.innerHTML = categoriesHtml;
|
|
sidebarLinks.innerHTML = sidebarHtml;
|
|
}
|
|
|
|
// 搜索逻辑
|
|
searchInput.addEventListener('input', (e) => {
|
|
const query = e.target.value.toLowerCase();
|
|
let matched = [];
|
|
for (const lang in allData) {
|
|
matched = matched.concat(allData[lang].filter(r =>
|
|
r.name.toLowerCase().includes(query) || (r.description && r.description.toLowerCase().includes(query))
|
|
));
|
|
}
|
|
if(!query) return renderContent(allData);
|
|
categoriesContainer.innerHTML = `<div class="category-title">搜索结果</div><div class="repo-grid">${matched.map(r => `
|
|
<div class="repo-card glass-effect" onclick="window.open('${r.html_url}', '_blank')">
|
|
<img class="repo-avatar" src="${r.owner.avatar_url}">
|
|
<div style="flex:1; overflow:hidden;">
|
|
<div class="repo-name">${r.name}</div>
|
|
<div class="repo-desc">${r.description || ''}</div>
|
|
</div>
|
|
</div>`).join('')}</div>`;
|
|
});
|
|
|
|
function toggleSidebar() { document.getElementById('sidebar').classList.toggle('active'); }
|
|
window.addEventListener('scroll', () => {
|
|
document.getElementById('fixedBar').style.display = window.scrollY > 300 ? 'flex' : 'none';
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|