From d5f4da20f5aec527288bbc5775122b7c712a0678 Mon Sep 17 00:00:00 2001
From: ghol <ghol@wtox.net>
Date: Sat, 11 Oct 2025 18:57:31 +0000
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20z.ai/daohang.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 z.ai/daohang.html | 772 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 772 insertions(+)
 create mode 100644 z.ai/daohang.html
diff --git a/z.ai/daohang.html b/z.ai/daohang.html
new file mode 100644
index 0000000..79b4dbf
--- /dev/null
+++ b/z.ai/daohang.html
@@ -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>
\ No newline at end of file
