diff --git a/config.yml b/config.yml index dcb1f42..050c961 100644 --- a/config.yml +++ b/config.yml @@ -55,6 +55,14 @@ categories: url: https://www.github.com icon: fab fa-github description: 代码托管平台 + - name: Stack Overflow + url: https://stackoverflow.com + icon: fab fa-stack-overflow + description: 程序员问答社区 + - name: ChatGPT + url: https://chat.openai.com + icon: fas fa-robot + description: AI智能助手 - name: 学习资源 icon: fas fa-graduation-cap @@ -67,6 +75,74 @@ categories: url: https://www.zhihu.com icon: fas fa-question-circle description: 问答社区 + - name: 掘金 + url: https://juejin.cn + icon: fas fa-book + description: 高质量技术社区 + - name: LeetCode + url: https://leetcode.cn + icon: fas fa-code + description: 算法刷题平台 + + - name: 开发工具 + icon: fas fa-tools + sites: + - name: VS Code + url: https://code.visualstudio.com + icon: fas fa-code + description: 强大的代码编辑器 + - name: Postman + url: https://www.postman.com + icon: fas fa-paper-plane + description: API调试工具 + - name: Git + url: https://git-scm.com + icon: fab fa-git-alt + description: 版本控制工具 + - name: Docker + url: https://www.docker.com + icon: fab fa-docker + description: 容器化平台 + + - name: 设计资源 + icon: fas fa-palette + sites: + - name: Figma + url: https://www.figma.com + icon: fab fa-figma + description: 在线设计工具 + - name: Dribbble + url: https://dribbble.com + icon: fab fa-dribbble + description: 设计师社区 + - name: Behance + url: https://www.behance.net + icon: fab fa-behance + description: 创意设计平台 + - name: IconFont + url: https://www.iconfont.cn + icon: fas fa-icons + description: 图标资源库 + + - name: 在线工具 + icon: fas fa-wrench + sites: + - name: JSON Editor + url: https://jsoneditoronline.org + icon: fas fa-code-branch + description: JSON在线编辑器 + - name: Can I Use + url: https://caniuse.com + icon: fas fa-browser + description: 浏览器兼容性查询 + - name: TinyPNG + url: https://tinypng.com + icon: fas fa-compress + description: 图片压缩工具 + - name: Carbon + url: https://carbon.now.sh + icon: fas fa-code + description: 代码图片生成器 # 项目页面 projects: diff --git a/generator.js b/generator.js index 6128587..620bbef 100644 --- a/generator.js +++ b/generator.js @@ -55,8 +55,10 @@ function mergeConfigs(defaultConfig, userConfig) { function generateNavigation(navigation) { return navigation.map(nav => ` - - ${nav.name} +
+ +
+ ${nav.name} `).join('\n'); } @@ -85,8 +87,11 @@ function generateCategories(categories) { function generateSocialLinks(social) { return social.map(link => ` - - ${link.name} +
+ +
+ ${link.name} + `).join('\n'); } @@ -158,7 +163,9 @@ ${generateNavigation(config.navigation)}
-
在线账号
+
+ +
${generateSocialLinks(config.social)}
diff --git a/index.html b/index.html index cf31ad5..244b693 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,8 @@ 我的导航 - - + + @@ -20,47 +20,69 @@
- - 首页 +
+ +
+ 首页 - - 项目 +
+ +
+ 项目 - - 文章 +
+ +
+ 文章 - - 朋友 +
+ +
+ 朋友
-
在线账号
+
+ +
- - GitHub +
+ +
+ GitHub + - - Telegram +
+ +
+ Telegram + - - Twitter +
+ +
+ Twitter + - - Steam +
+ +
+ Steam +
@@ -95,6 +117,18 @@

GitHub

代码托管平台

+ + + +

Stack Overflow

+

程序员问答社区

+ + + + +

ChatGPT

+

AI智能助手

+ @@ -113,6 +147,108 @@

知乎

问答社区

+ + + +

掘金

+

高质量技术社区

+ + + + +

LeetCode

+

算法刷题平台

+ + + + +
+

开发工具

+
+ + + +

VS Code

+

强大的代码编辑器

+ + + + +

Postman

+

API调试工具

+ + + + +

Git

+

版本控制工具

+ + + + +

Docker

+

容器化平台

+ +
+
+ +
+

设计资源

+
+ + + +

Figma

+

在线设计工具

+ + + + +

Dribbble

+

设计师社区

+ + + + +

Behance

+

创意设计平台

+ + + + +

IconFont

+

图标资源库

+ +
+
+ +
+

在线工具

+
+ + + +

JSON Editor

+

JSON在线编辑器

+ + + + +

Can I Use

+

浏览器兼容性查询

+ + + + +

TinyPNG

+

图片压缩工具

+ + + + +

Carbon

+

代码图片生成器

+
diff --git a/script.js b/script.js index 5ccc929..76e958b 100644 --- a/script.js +++ b/script.js @@ -216,4 +216,40 @@ document.addEventListener('DOMContentLoaded', () => { }); }); }); + + // 移动端菜单交互 + const menuToggle = document.querySelector('.menu-toggle'); + const sidebar = document.querySelector('.sidebar'); + const overlay = document.querySelector('.overlay'); + + function toggleMenu() { + sidebar.classList.toggle('active'); + overlay.classList.toggle('active'); + document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : ''; + } + + function closeMenu() { + sidebar.classList.remove('active'); + overlay.classList.remove('active'); + document.body.style.overflow = ''; + } + + menuToggle.addEventListener('click', toggleMenu); + overlay.addEventListener('click', closeMenu); + + // 点击链接后自动关闭菜单 + document.querySelectorAll('.nav-item').forEach(item => { + item.addEventListener('click', () => { + if (window.innerWidth <= 768) { + closeMenu(); + } + }); + }); + + // 监听窗口大小变化 + window.addEventListener('resize', () => { + if (window.innerWidth > 768) { + closeMenu(); + } + }); }); \ No newline at end of file diff --git a/style.css b/style.css index a96ccad..7c3ef68 100644 --- a/style.css +++ b/style.css @@ -11,7 +11,7 @@ body { background-color: #1a1b1e; color: #e4e6eb; min-height: 100vh; - overflow-x: hidden; + overflow: hidden; /* 防止body滚动 */ } /* 布局 */ @@ -20,29 +20,58 @@ body { min-height: 100vh; opacity: 0; animation: fadeIn 0.3s ease-out forwards; - overflow-x: hidden; + position: relative; + z-index: 1; + overflow: hidden; /* 防止layout滚动 */ } /* 侧边栏样式 */ .sidebar { - width: 250px; + width: 240px; background-color: #2d2e32; - padding: 2rem 1rem; + padding: 2rem 1.2rem; display: flex; flex-direction: column; gap: 2rem; position: fixed; - height: 100vh; + top: 0; + left: 0; + bottom: 0; overflow-y: auto; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); + z-index: 100; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0); + height: 100vh; /* 确保高度固定 */ +} + +.sidebar::-webkit-scrollbar { + width: 6px; +} + +.sidebar::-webkit-scrollbar-track { + background: transparent; +} + +.sidebar::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 3px; +} + +.sidebar::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.2); } .logo h1 { - font-size: 1.5rem; + font-size: 1.4rem; color: #fff; margin-bottom: 2rem; padding-left: 0.5rem; + letter-spacing: 0.5px; } +/* 导航区域样式 */ .nav-section { display: flex; flex-direction: column; @@ -50,21 +79,47 @@ body { } .section-title { - font-size: 0.9rem; - color: #8b8c8f; + font-size: 1rem; + color: #4a9eff; padding: 0.5rem; margin-bottom: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.section-title i { + font-size: 1.2rem; } .nav-item { display: flex; align-items: center; - gap: 1rem; padding: 0.8rem; color: #a1a2a5; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; + position: relative; +} + +.nav-item .icon-container { + width: 24px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 1rem; +} + +.nav-item .nav-text { + flex: 1; +} + +.nav-item .external-icon { + font-size: 0.9rem; + opacity: 0.6; + margin-left: 0.5rem; + transition: all 0.3s ease; } .nav-item:hover { @@ -72,6 +127,11 @@ body { color: #fff; } +.nav-item:hover .external-icon { + opacity: 1; + transform: translateX(2px); +} + .nav-item.active { background-color: #3a3b3f; color: #fff; @@ -85,20 +145,39 @@ body { /* 主内容区域 */ .content { flex: 1; - margin-left: 250px; + margin-left: 240px; padding: 2rem 0; background-color: #1a1b1e; position: relative; - min-height: 100vh; + height: 100vh; /* 固定高度 */ + overflow-y: auto; /* 允许内容滚动 */ overflow-x: hidden; - max-width: calc(100vw - 250px); + max-width: calc(100vw - 240px); + display: flex; + flex-direction: column; + align-items: center; +} + +/* 搜索框容器 - 固定在顶部 */ +.search-container { + width: 100%; + display: flex; + justify-content: center; + padding: 0 2rem; + margin-bottom: 1rem; + position: sticky; + top: 0; + z-index: 10; + background-color: #1a1b1e; + padding-top: 2rem; + padding-bottom: 1rem; } /* 搜索框 */ .search-box { position: relative; + width: 100%; max-width: 600px; - margin: 0 2rem 3rem 2rem; } .search-box::after { @@ -126,18 +205,20 @@ body { .search-box input { width: 100%; - padding: 1rem 4.5rem 1rem 1.5rem; + padding: 1rem 4rem 1rem 1.5rem; border: none; border-radius: 12px; background-color: #2d2e32; color: #fff; font-size: 1rem; transition: all 0.3s ease; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .search-box input:focus { outline: none; background-color: #3a3b3f; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .search-box input::placeholder { @@ -161,69 +242,101 @@ body { color: #f44336; } +/* 页面容器 */ +.page { + position: relative; + width: 100%; + display: none; + flex-direction: column; + align-items: center; + padding-top: 2rem; +} + +.page.active { + display: flex; + animation: fadeIn 0.3s ease-out forwards; +} + /* 欢迎区域 */ .welcome-section { - margin: 0 2rem 3rem 2rem; + width: 100%; + max-width: 1200px; + margin: 0 auto 3.5rem auto; + padding: 0 6rem 0 8rem; + text-align: left; + position: relative; + z-index: 5; } .welcome-section h2 { - font-size: 2.5rem; + font-size: 2.4rem; color: #fff; margin-bottom: 0.5rem; + letter-spacing: 0.5px; } .welcome-section h3 { font-size: 2rem; color: #4a9eff; margin-bottom: 1rem; + letter-spacing: 0.3px; } .welcome-section .subtitle { color: #8b8c8f; font-size: 1.1rem; + line-height: 1.5; } /* 分类样式 */ .category { - background-color: #2d2e32; - border-radius: 15px; + background: linear-gradient(145deg, #2f3035, #2b2c30); + border-radius: 16px; padding: 2rem; - margin: 0 2rem 2rem 2rem; - transform: translateZ(0); - will-change: transform, opacity; - animation: none; + margin: 0 auto 2.5rem auto; + width: 100%; + max-width: 1100px; + position: relative; + z-index: 1; opacity: 0; - transition: opacity 0.3s ease; + animation: fadeIn 0.5s ease-out forwards; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + border: 1px solid rgba(255, 255, 255, 0.03); } .category h2 { - color: #fff; + font-size: 1.2rem; margin-bottom: 1.5rem; + color: #fff; display: flex; align-items: center; gap: 0.8rem; - font-size: 1.2rem; + letter-spacing: 0.3px; } .category h2 i { color: #4a9eff; + font-size: 1.3rem; } /* 网站卡片网格 */ .sites-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.2rem; + position: relative; + z-index: 1; + width: 100%; } /* 网站卡片样式 */ .site-card { - background-color: #3a3b3f; + background: linear-gradient(145deg, #363940, #31343a); border-radius: 12px; padding: 1.2rem; text-decoration: none; color: inherit; - transition: all 0.3s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; @@ -233,27 +346,43 @@ body { will-change: transform; max-width: 100%; position: relative; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + border: 1px solid rgba(255, 255, 255, 0.05); + z-index: 2; } .site-card:hover { - transform: translateY(-5px); - background-color: #4a4b4f; + transform: translateY(-4px); + background: linear-gradient(145deg, #3e4249, #383b41); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + border-color: rgba(255, 255, 255, 0.1); } .site-card i { - font-size: 2rem; + font-size: 1.8rem; margin-bottom: 1rem; color: #4a9eff; + transition: all 0.3s ease; +} + +.site-card:hover i { + transform: scale(1.1); + color: #5ba9ff; } .site-card h3 { + font-size: 1rem; margin-bottom: 0.5rem; color: #fff; + font-weight: 500; + letter-spacing: 0.3px; } .site-card p { font-size: 0.9rem; - color: #8b8c8f; + color: #a1a2a5; + margin: 0; + line-height: 1.4; } /* 添加编辑按钮 */ @@ -288,29 +417,37 @@ body { /* 添加网站按钮 */ .add-site-btn { - background-color: #3a3b3f; - border: 2px dashed #4a4b4f; - border-radius: 12px; - padding: 1.2rem; + background: linear-gradient(145deg, #363940, #31343a); + border: 2px dashed rgba(255, 255, 255, 0.1); + border-radius: 14px; + padding: 1.5rem; color: #8b8c8f; cursor: pointer; - transition: all 0.3s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; - min-height: 160px; + min-height: 180px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .add-site-btn:hover { - background-color: #4a4b4f; - border-color: #5a5b5f; + background: linear-gradient(145deg, #3e4249, #383b41); + border-color: #4a9eff; color: #fff; + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } .add-site-btn i { - font-size: 2rem; - margin-bottom: 0.5rem; + font-size: 2.2rem; + margin-bottom: 0.8rem; + transition: transform 0.3s ease; +} + +.add-site-btn:hover i { + transform: scale(1.1); } /* 模态框样式 */ @@ -320,36 +457,44 @@ body { left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 1000; + backdrop-filter: blur(4px); } .modal.active { display: flex; + animation: modalFadeIn 0.3s ease-out forwards; } .modal-content { background-color: #2d2e32; - border-radius: 15px; - padding: 2rem; + border-radius: 16px; + padding: 2.2rem; width: 90%; - max-width: 500px; + max-width: 520px; position: relative; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + transform: scale(0.95); + opacity: 0; + animation: modalContentShow 0.3s ease-out forwards; } .modal-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 1.5rem; + margin-bottom: 2rem; } .modal-header h3 { color: #fff; - font-size: 1.2rem; + font-size: 1.3rem; + letter-spacing: 0.3px; + font-weight: 500; } .close-modal { @@ -359,59 +504,73 @@ body { cursor: pointer; font-size: 1.5rem; padding: 0.5rem; - transition: color 0.3s ease; + transition: all 0.3s ease; + border-radius: 8px; } .close-modal:hover { color: #fff; + background-color: #3a3b3f; } /* 表单样式 */ .site-form { display: flex; flex-direction: column; - gap: 1rem; + gap: 1.2rem; } .form-group { display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.6rem; } .form-group label { color: #8b8c8f; - font-size: 0.9rem; + font-size: 0.95rem; + letter-spacing: 0.2px; } .form-group input, .form-group select { background-color: #3a3b3f; - border: none; - border-radius: 8px; - padding: 0.8rem 1rem; + border: 1px solid transparent; + border-radius: 10px; + padding: 0.9rem 1.2rem; color: #fff; font-size: 1rem; + transition: all 0.3s ease; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .form-group input:focus, .form-group select:focus { outline: none; - background-color: #4a4b4f; + background-color: #3a3b3f; + border-color: #4a9eff; + box-shadow: 0 2px 8px rgba(74, 158, 255, 0.15); +} + +.form-group input::placeholder { + color: #8b8c8f; } .form-actions { display: flex; justify-content: flex-end; gap: 1rem; - margin-top: 1.5rem; + margin-top: 2rem; } .btn { - padding: 0.8rem 1.5rem; + padding: 0.9rem 1.8rem; border: none; - border-radius: 8px; + border-radius: 10px; cursor: pointer; font-size: 1rem; - transition: all 0.3s ease; + font-weight: 500; + letter-spacing: 0.3px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .btn-primary { @@ -421,6 +580,8 @@ body { .btn-primary:hover { background-color: #3a8eef; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(74, 158, 255, 0.2); } .btn-secondary { @@ -431,63 +592,144 @@ body { .btn-secondary:hover { background-color: #4a4b4f; color: #fff; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* 响应式设计 */ +@media (max-width: 1200px) { + .welcome-section { + padding: 0 4rem; + margin-bottom: 3rem; + } + + .category { + max-width: 900px; + margin-bottom: 2rem; + } +} + @media (max-width: 768px) { + .menu-toggle { + display: block; + } + + .content { + margin-left: 0; + max-width: 100vw; + padding-top: 4rem; + } + .sidebar { - width: 70px; - padding: 1rem 0.5rem; + width: 240px; + transform: translateX(-100%); + transition: transform 0.3s ease; + } + + .sidebar.active { + transform: translateX(0); } .sidebar .logo h1, .sidebar .section-title, .sidebar .nav-item span { - display: none; + display: block; + } + + .nav-item .nav-text, + .nav-item .external-icon { + display: inline; } .nav-item { padding: 0.8rem; - justify-content: center; + justify-content: flex-start; } - .nav-item i { - margin: 0; - font-size: 1.2rem; + .nav-item .icon-container { + margin-right: 1rem; } - .content { - margin-left: 70px; - padding: 1rem 0; - } - - .welcome-section h2 { - font-size: 2rem; - } - - .welcome-section h3 { - font-size: 1.5rem; - } - - .page { - transform: translateX(10px); - } - - #search-results { - transform: translateY(10px); - } - - .category { - margin: 0 1rem 2rem 1rem; - padding: 1.5rem; + .search-container { + padding: 0 1rem; + margin-bottom: 1rem; } .welcome-section { - margin: 0 1rem 2rem 1rem; + padding: 0 1.5rem; + margin-bottom: 2rem; } - .search-box { - margin: 0 1rem 2rem 1rem; + .welcome-section h2 { + font-size: 1.8rem; + } + + .welcome-section h3 { + font-size: 1.6rem; + } + + .welcome-section .subtitle { + font-size: 1rem; + } + + .category { + margin: 0 1rem 1.5rem 1rem; + padding: 1.5rem; + } + + .sites-grid { + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 1rem; + } + + .site-card { + padding: 1rem; + } + + .site-card .site-icon { + font-size: 1.8rem; + } + + .site-card .site-name { + font-size: 0.9rem; + } + + .site-card .site-desc { + font-size: 0.8rem; + } +} + +@media (max-width: 480px) { + .welcome-section { + padding: 0 1rem; + margin-bottom: 1.5rem; + } + + .welcome-section h2 { + font-size: 1.6rem; + } + + .welcome-section h3 { + font-size: 1.4rem; + } + + .category { + margin: 0 0.8rem 1rem 0.8rem; + padding: 1rem; + } + + .sites-grid { + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + gap: 0.8rem; + } + + .site-card { + padding: 0.8rem; + } + + .site-card .site-icon { + font-size: 1.6rem; + margin-bottom: 0.5rem; } } @@ -495,7 +737,7 @@ body { @keyframes fadeIn { from { opacity: 0; - transform: translateY(20px); + transform: translateY(10px); } to { opacity: 1; @@ -503,66 +745,125 @@ body { } } -.category { - animation: fadeIn 0.5s ease-out forwards; -} - -/* 页面切换动画 */ -.page { - position: absolute; - width: 100%; - opacity: 0; - visibility: hidden; - transform: translateX(20px); - transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; - will-change: opacity, transform; -} - -.page.active { - opacity: 1; - visibility: visible; - transform: translateX(0); - transition-delay: 0s; -} - -/* 搜索结果页面特殊处理 */ +/* 搜索结果页面 */ #search-results { - transform: translateY(20px); + position: relative; + width: 100%; + display: none; + flex-direction: column; + align-items: center; + z-index: 15; } #search-results.active { - transform: translateY(0); + display: flex; + animation: fadeIn 0.3s ease-out forwards; } -/* 搜索结果区域动画 */ +/* 搜索结果区域 */ .search-section { - opacity: 0; - transform: translateY(10px); - transition: opacity 0.3s ease, transform 0.3s ease; + width: 100%; + max-width: 1100px; + margin: 0 auto; + position: relative; + z-index: 1; } -.search-section[style*="display: block"] { +/* 清除之前可能导致问题的样式 */ +.page { + transform: none; + visibility: visible; + transition: none; +} + +#search-results { + transform: none; +} + +.search-section { + transform: none; opacity: 1; - transform: translateY(0); } -/* 优化卡片动画 */ +/* 优化布局结构 */ +.layout { + position: relative; + z-index: 1; +} + +.sidebar { + z-index: 100; +} + +/* 确保内容不会重叠 */ .site-card { - backface-visibility: hidden; - transform: translateZ(0); - will-change: transform; + position: relative; + z-index: 2; } -/* 优化动画性能 */ -.category { - transform: translateZ(0); - will-change: transform, opacity; - animation: none; +.sites-grid { + position: relative; + z-index: 1; + width: 100%; +} + +@keyframes modalFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes modalContentShow { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* 移动端菜单按钮 */ +.menu-toggle { + display: none; + position: fixed; + top: 1rem; + left: 1rem; + z-index: 200; + background: none; + border: none; + color: #fff; + font-size: 1.5rem; + cursor: pointer; + padding: 0.5rem; + border-radius: 8px; + background-color: #2d2e32; + transition: all 0.3s ease; +} + +.menu-toggle:hover { + background-color: #3a3b3f; +} + +/* 遮罩层 */ +.overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 99; opacity: 0; transition: opacity 0.3s ease; } -.category[style*="display: block"], -.page.active .category { +.overlay.active { + display: block; opacity: 1; } \ No newline at end of file