添加 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