添加 z.ai/daohang.html
This commit is contained in:
@@ -0,0 +1,772 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>个人导航</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f8f9fa;
|
||||||
|
--text-primary: #2c3e50;
|
||||||
|
--text-secondary: #6c757d;
|
||||||
|
--text-muted: #adb5bd;
|
||||||
|
--border-color: #e9ecef;
|
||||||
|
--accent-color: #3498db;
|
||||||
|
--hover-bg: #f1f3f5;
|
||||||
|
--shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
|
||||||
|
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
|
||||||
|
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-primary: #1a1a1a;
|
||||||
|
--bg-secondary: #2d2d2d;
|
||||||
|
--text-primary: #e9ecef;
|
||||||
|
--text-secondary: #adb5bd;
|
||||||
|
--text-muted: #6c757d;
|
||||||
|
--border-color: #404040;
|
||||||
|
--accent-color: #5dade2;
|
||||||
|
--hover-bg: #343434;
|
||||||
|
--shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
|
||||||
|
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: var(--transition);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
header {
|
||||||
|
padding: 40px 0;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search */
|
||||||
|
.search-section {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-hint {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 14px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Grid */
|
||||||
|
.nav-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-category {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
transition: var(--transition);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-category:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-title::before {
|
||||||
|
content: '';
|
||||||
|
width: 3px;
|
||||||
|
height: 18px;
|
||||||
|
background: var(--accent-color);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 15px;
|
||||||
|
display: inline-block;
|
||||||
|
transition: var(--transition);
|
||||||
|
position: relative;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--accent-color);
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quick Links */
|
||||||
|
.quick-links {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 30px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-links-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-links-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-link {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 20px;
|
||||||
|
transition: var(--transition);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-link:hover {
|
||||||
|
background: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 14px;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Edit Mode */
|
||||||
|
.edit-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 30px;
|
||||||
|
right: 30px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transition: var(--transition);
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-btn:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal */
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.active {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 30px;
|
||||||
|
max-width: 500px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
animation: slideUp 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
transform: translateY(20px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-links-grid {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-link {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header-content">
|
||||||
|
<h1>我的导航</h1>
|
||||||
|
<button class="theme-toggle" onclick="toggleTheme()">🌙 深色</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container">
|
||||||
|
<!-- Search Section -->
|
||||||
|
<section class="search-section">
|
||||||
|
<div class="search-container">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="search-input"
|
||||||
|
id="searchInput"
|
||||||
|
placeholder="搜索网站..."
|
||||||
|
onkeyup="searchLinks(event)"
|
||||||
|
>
|
||||||
|
<span class="search-hint">Ctrl+K</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Quick Links -->
|
||||||
|
<section class="quick-links">
|
||||||
|
<h2 class="quick-links-title">快速访问</h2>
|
||||||
|
<div class="quick-links-grid" id="quickLinks">
|
||||||
|
<a href="https://www.google.com" class="quick-link" target="_blank">Google</a>
|
||||||
|
<a href="https://github.com" class="quick-link" target="_blank">GitHub</a>
|
||||||
|
<a href="https://www.youtube.com" class="quick-link" target="_blank">YouTube</a>
|
||||||
|
<a href="https://www.bilibili.com" class="quick-link" target="_blank">哔哩哔哩</a>
|
||||||
|
<a href="https://www.zhihu.com" class="quick-link" target="_blank">知乎</a>
|
||||||
|
<a href="https://www.weibo.com" class="quick-link" target="_blank">微博</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Navigation Grid -->
|
||||||
|
<div class="nav-grid" id="navGrid">
|
||||||
|
<!-- 工作相关 -->
|
||||||
|
<div class="nav-category">
|
||||||
|
<h3 class="category-title">工作相关</h3>
|
||||||
|
<ul class="link-list">
|
||||||
|
<li class="link-item"><a href="https://mail.google.com" class="link" target="_blank">Gmail</a></li>
|
||||||
|
<li class="link-item"><a href="https://calendar.google.com" class="link" target="_blank">Google Calendar</a></li>
|
||||||
|
<li class="link-item"><a href="https://docs.google.com" class="link" target="_blank">Google Docs</a></li>
|
||||||
|
<li class="link-item"><a href="https://trello.com" class="link" target="_blank">Trello</a></li>
|
||||||
|
<li class="link-item"><a href="https://slack.com" class="link" target="_blank">Slack</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 开发工具 -->
|
||||||
|
<div class="nav-category">
|
||||||
|
<h3 class="category-title">开发工具</h3>
|
||||||
|
<ul class="link-list">
|
||||||
|
<li class="link-item"><a href="https://stackoverflow.com" class="link" target="_blank">Stack Overflow</a></li>
|
||||||
|
<li class="link-item"><a href="https://developer.mozilla.org" class="link" target="_blank">MDN Web Docs</a></li>
|
||||||
|
<li class="link-item"><a href="https://codepen.io" class="link" target="_blank">CodePen</a></li>
|
||||||
|
<li class="link-item"><a href="https://codesandbox.io" class="link" target="_blank">CodeSandbox</a></li>
|
||||||
|
<li class="link-item"><a href="https://npmjs.com" class="link" target="_blank">NPM</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 设计资源 -->
|
||||||
|
<div class="nav-category">
|
||||||
|
<h3 class="category-title">设计资源</h3>
|
||||||
|
<ul class="link-list">
|
||||||
|
<li class="link-item"><a href="https://dribbble.com" class="link" target="_blank">Dribbble</a></li>
|
||||||
|
<li class="link-item"><a href="https://behance.net" class="link" target="_blank">Behance</a></li>
|
||||||
|
<li class="link-item"><a href="https://unsplash.com" class="link" target="_blank">Unsplash</a></li>
|
||||||
|
<li class="link-item"><a href="https://figma.com" class="link" target="_blank">Figma</a></li>
|
||||||
|
<li class="link-item"><a href="https://coolors.co" class="link" target="_blank">Coolors</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 学习平台 -->
|
||||||
|
<div class="nav-category">
|
||||||
|
<h3 class="category-title">学习平台</h3>
|
||||||
|
<ul class="link-list">
|
||||||
|
<li class="link-item"><a href="https://coursera.org" class="link" target="_blank">Coursera</a></li>
|
||||||
|
<li class="link-item"><a href="https://edx.org" class="link" target="_blank">edX</a></li>
|
||||||
|
<li class="link-item"><a href="https://udemy.com" class="link" target="_blank">Udemy</a></li>
|
||||||
|
<li class="link-item"><a href="https://khanacademy.org" class="link" target="_blank">Khan Academy</a></li>
|
||||||
|
<li class="link-item"><a href="https://freecodecamp.org" class="link" target="_blank">freeCodeCamp</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新闻资讯 -->
|
||||||
|
<div class="nav-category">
|
||||||
|
<h3 class="category-title">新闻资讯</h3>
|
||||||
|
<ul class="link-list">
|
||||||
|
<li class="link-item"><a href="https://news.ycombinator.com" class="link" target="_blank">Hacker News</a></li>
|
||||||
|
<li class="link-item"><a href="https://www.reddit.com" class="link" target="_blank">Reddit</a></li>
|
||||||
|
<li class="link-item"><a href="https://producthunt.com" class="link" target="_blank">Product Hunt</a></li>
|
||||||
|
<li class="link-item"><a href="https://techcrunch.com" class="link" target="_blank">TechCrunch</a></li>
|
||||||
|
<li class="link-item"><a href="https://36kr.com" class="link" target="_blank">36氪</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 娱乐休闲 -->
|
||||||
|
<div class="nav-category">
|
||||||
|
<h3 class="category-title">娱乐休闲</h3>
|
||||||
|
<ul class="link-list">
|
||||||
|
<li class="link-item"><a href="https://www.netflix.com" class="link" target="_blank">Netflix</a></li>
|
||||||
|
<li class="link-item"><a href="https://www.spotify.com" class="link" target="_blank">Spotify</a></li>
|
||||||
|
<li class="link-item"><a href="https://soundcloud.com" class="link" target="_blank">SoundCloud</a></li>
|
||||||
|
<li class="link-item"><a href="https://www.twitch.tv" class="link" target="_blank">Twitch</a></li>
|
||||||
|
<li class="link-item"><a href="https://www.douban.com" class="link" target="_blank">豆瓣</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2024 个人导航页 | 用心收集，高效访问</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Edit Button -->
|
||||||
|
<button class="edit-btn" onclick="openEditModal()">✏️</button>
|
||||||
|
|
||||||
|
<!-- Edit Modal -->
|
||||||
|
<div class="modal" id="editModal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3 class="modal-title">添加新链接</h3>
|
||||||
|
<button class="close-btn" onclick="closeEditModal()">×</button>
|
||||||
|
</div>
|
||||||
|
<form onsubmit="addNewLink(event)">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">分类名称</label>
|
||||||
|
<input type="text" class="form-input" id="categoryName" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">链接名称</label>
|
||||||
|
<input type="text" class="form-input" id="linkName" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">链接地址</label>
|
||||||
|
<input type="url" class="form-input" id="linkUrl" required>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn-primary">添加链接</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Theme Toggle
|
||||||
|
function toggleTheme() {
|
||||||
|
const body = document.body;
|
||||||
|
const themeToggle = document.querySelector('.theme-toggle');
|
||||||
|
|
||||||
|
if (body.getAttribute('data-theme') === 'dark') {
|
||||||
|
body.removeAttribute('data-theme');
|
||||||
|
themeToggle.textContent = '🌙 深色';
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
body.setAttribute('data-theme', 'dark');
|
||||||
|
themeToggle.textContent = '☀️ 浅色';
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load saved theme
|
||||||
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
if (savedTheme === 'dark') {
|
||||||
|
document.body.setAttribute('data-theme', 'dark');
|
||||||
|
document.querySelector('.theme-toggle').textContent = '☀️ 浅色';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Search functionality
|
||||||
|
function searchLinks(event) {
|
||||||
|
const searchTerm = event.target.value.toLowerCase();
|
||||||
|
const allLinks = document.querySelectorAll('.link');
|
||||||
|
const allCategories = document.querySelectorAll('.nav-category');
|
||||||
|
|
||||||
|
if (searchTerm === '') {
|
||||||
|
allLinks.forEach(link => {
|
||||||
|
link.parentElement.style.display = 'block';
|
||||||
|
});
|
||||||
|
allCategories.forEach(category => {
|
||||||
|
category.style.display = 'block';
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
allCategories.forEach(category => {
|
||||||
|
let hasVisibleLinks = false;
|
||||||
|
const links = category.querySelectorAll('.link');
|
||||||
|
|
||||||
|
links.forEach(link => {
|
||||||
|
const text = link.textContent.toLowerCase();
|
||||||
|
if (text.includes(searchTerm)) {
|
||||||
|
link.parentElement.style.display = 'block';
|
||||||
|
hasVisibleLinks = true;
|
||||||
|
} else {
|
||||||
|
link.parentElement.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
category.style.display = hasVisibleLinks ? 'block' : 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keyboard shortcut for search
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||||
|
e.preventDefault();
|
||||||
|
document.getElementById('searchInput').focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Modal functions
|
||||||
|
function openEditModal() {
|
||||||
|
document.getElementById('editModal').classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeEditModal() {
|
||||||
|
document.getElementById('editModal').classList.remove('active');
|
||||||
|
document.getElementById('categoryName').value = '';
|
||||||
|
document.getElementById('linkName').value = '';
|
||||||
|
document.getElementById('linkUrl').value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add new link
|
||||||
|
function addNewLink(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const categoryName = document.getElementById('categoryName').value;
|
||||||
|
const linkName = document.getElementById('linkName').value;
|
||||||
|
const linkUrl = document.getElementById('linkUrl').value;
|
||||||
|
|
||||||
|
// Find or create category
|
||||||
|
let category = Array.from(document.querySelectorAll('.category-title'))
|
||||||
|
.find(title => title.textContent === categoryName)
|
||||||
|
?.parentElement;
|
||||||
|
|
||||||
|
if (!category) {
|
||||||
|
category = document.createElement('div');
|
||||||
|
category.className = 'nav-category';
|
||||||
|
category.innerHTML = `
|
||||||
|
<h3 class="category-title">${categoryName}</h3>
|
||||||
|
<ul class="link-list"></ul>
|
||||||
|
`;
|
||||||
|
document.getElementById('navGrid').appendChild(category);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add new link
|
||||||
|
const linkList = category.querySelector('.link-list');
|
||||||
|
const newLinkItem = document.createElement('li');
|
||||||
|
newLinkItem.className = 'link-item';
|
||||||
|
newLinkItem.innerHTML = `<a href="${linkUrl}" class="link" target="_blank">${linkName}</a>`;
|
||||||
|
linkList.appendChild(newLinkItem);
|
||||||
|
|
||||||
|
// Save to localStorage
|
||||||
|
saveCustomLinks();
|
||||||
|
|
||||||
|
// Close modal
|
||||||
|
closeEditModal();
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
showNotification('链接添加成功！');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save custom links to localStorage
|
||||||
|
function saveCustomLinks() {
|
||||||
|
const categories = [];
|
||||||
|
document.querySelectorAll('.nav-category').forEach(category => {
|
||||||
|
const title = category.querySelector('.category-title').textContent;
|
||||||
|
const links = [];
|
||||||
|
category.querySelectorAll('.link').forEach(link => {
|
||||||
|
links.push({
|
||||||
|
name: link.textContent,
|
||||||
|
url: link.href
|
||||||
|
});
|
||||||
|
});
|
||||||
|
categories.push({ title, links });
|
||||||
|
});
|
||||||
|
localStorage.setItem('customLinks', JSON.stringify(categories));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show notification
|
||||||
|
function showNotification(message) {
|
||||||
|
const notification = document.createElement('div');
|
||||||
|
notification.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
z-index: 2000;
|
||||||
|
animation: slideInRight 0.3s ease;
|
||||||
|
`;
|
||||||
|
notification.textContent = message;
|
||||||
|
document.body.appendChild(notification);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.style.animation = 'fadeOut 0.3s ease';
|
||||||
|
setTimeout(() => notification.remove(), 300);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add animation styles
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes slideInRight {
|
||||||
|
from {
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadeOut {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
|
||||||
|
// Close modal when clicking outside
|
||||||
|
document.getElementById('editModal').addEventListener('click', (e) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
closeEditModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user