| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>智能网站导航</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.3s ease-out forwards; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| .nav-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| } |
| |
| |
| .transition-all { |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen font-sans"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-compass text-blue-500 text-2xl"></i> |
| <h1 class="text-xl font-bold text-gray-800">智能导航</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-moon text-gray-600"></i> |
| </button> |
| <button id="add-site-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2"> |
| <i class="fas fa-plus"></i> |
| <span>添加网站</span> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <div class="max-w-2xl mx-auto mb-8 fade-in"> |
| <div class="relative"> |
| <input type="text" placeholder="搜索网站或输入网址..." class="w-full px-5 py-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm"> |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white p-2 rounded-full hover:bg-blue-600"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-8 fade-in" style="animation-delay: 0.1s;"> |
| <div class="flex flex-wrap gap-2"> |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-all">全部</button> |
| <button class="px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-all">社交</button> |
| <button class="px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-all">工具</button> |
| <button class="px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-all">娱乐</button> |
| <button class="px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-all">学习</button> |
| <button class="px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-all">购物</button> |
| <button class="px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-all">新闻</button> |
| </div> |
| </div> |
|
|
| |
| <section class="mb-10 fade-in" style="animation-delay: 0.2s;"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> |
| <i class="fas fa-star mr-2 text-yellow-400"></i> |
| 常用网站 |
| </h2> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
| |
| <a href="https://www.google.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fab fa-google text-blue-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Google</span> |
| <span class="text-xs text-gray-500 mt-1">搜索引擎</span> |
| </a> |
| |
| <a href="https://github.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-gray-100 flex items-center justify-center"> |
| <i class="fab fa-github text-gray-800 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">GitHub</span> |
| <span class="text-xs text-gray-500 mt-1">代码托管</span> |
| </a> |
| |
| <a href="https://www.youtube.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-red-100 flex items-center justify-center"> |
| <i class="fab fa-youtube text-red-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">YouTube</span> |
| <span class="text-xs text-gray-500 mt-1">视频平台</span> |
| </a> |
| |
| <a href="https://twitter.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fab fa-twitter text-blue-400 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Twitter</span> |
| <span class="text-xs text-gray-500 mt-1">社交媒体</span> |
| </a> |
| |
| <a href="https://www.wikipedia.org" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-gray-100 flex items-center justify-center"> |
| <i class="fas fa-globe text-gray-700 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Wikipedia</span> |
| <span class="text-xs text-gray-500 mt-1">百科全书</span> |
| </a> |
| |
| <a href="https://www.amazon.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-yellow-100 flex items-center justify-center"> |
| <i class="fab fa-amazon text-yellow-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Amazon</span> |
| <span class="text-xs text-gray-500 mt-1">购物平台</span> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-10 fade-in" style="animation-delay: 0.3s;"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> |
| <i class="fas fa-tools mr-2 text-blue-500"></i> |
| 实用工具 |
| </h2> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
| <a href="https://translate.google.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-language text-blue-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Google翻译</span> |
| <span class="text-xs text-gray-500 mt-1">在线翻译</span> |
| </a> |
| |
| <a href="https://www.canva.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-paint-brush text-green-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Canva</span> |
| <span class="text-xs text-gray-500 mt-1">设计工具</span> |
| </a> |
| |
| <a href="https://trello.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fab fa-trello text-blue-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Trello</span> |
| <span class="text-xs text-gray-500 mt-1">项目管理</span> |
| </a> |
| |
| <a href="https://www.notion.so" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-gray-100 flex items-center justify-center"> |
| <i class="fas fa-book text-gray-700 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Notion</span> |
| <span class="text-xs text-gray-500 mt-1">笔记工具</span> |
| </a> |
| |
| <a href="https://www.figma.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-purple-100 flex items-center justify-center"> |
| <i class="fab fa-figma text-purple-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Figma</span> |
| <span class="text-xs text-gray-500 mt-1">设计协作</span> |
| </a> |
| |
| <a href="https://zoom.us" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-video text-blue-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Zoom</span> |
| <span class="text-xs text-gray-500 mt-1">视频会议</span> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-10 fade-in" style="animation-delay: 0.4s;"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> |
| <i class="fas fa-graduation-cap mr-2 text-green-500"></i> |
| 学习资源 |
| </h2> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
| <a href="https://www.coursera.org" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-university text-blue-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Coursera</span> |
| <span class="text-xs text-gray-500 mt-1">在线课程</span> |
| </a> |
| |
| <a href="https://www.khanacademy.org" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-chalkboard-teacher text-blue-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Khan Academy</span> |
| <span class="text-xs text-gray-500 mt-1">教育平台</span> |
| </a> |
| |
| <a href="https://stackoverflow.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-orange-100 flex items-center justify-center"> |
| <i class="fab fa-stack-overflow text-orange-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Stack Overflow</span> |
| <span class="text-xs text-gray-500 mt-1">编程问答</span> |
| </a> |
| |
| <a href="https://www.udemy.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-laptop-code text-purple-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Udemy</span> |
| <span class="text-xs text-gray-500 mt-1">技能学习</span> |
| </a> |
| |
| <a href="https://www.ted.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-red-100 flex items-center justify-center"> |
| <i class="fas fa-comment-dots text-red-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">TED</span> |
| <span class="text-xs text-gray-500 mt-1">演讲视频</span> |
| </a> |
| |
| <a href="https://www.codecademy.com" target="_blank" class="nav-card bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-all flex flex-col items-center text-center"> |
| <div class="w-12 h-12 mb-3 rounded-full bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-code text-green-500 text-xl"></i> |
| </div> |
| <span class="font-medium text-gray-800">Codecademy</span> |
| <span class="text-xs text-gray-500 mt-1">编程学习</span> |
| </a> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <div id="add-site-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold text-gray-800">添加新网站</h3> |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <form id="add-site-form" class="space-y-4"> |
| <div> |
| <label for="site-name" class="block text-sm font-medium text-gray-700 mb-1">网站名称</label> |
| <input type="text" id="site-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div> |
| <label for="site-url" class="block text-sm font-medium text-gray-700 mb-1">网站URL</label> |
| <input type="url" id="site-url" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="https://"> |
| </div> |
| |
| <div> |
| <label for="site-category" class="block text-sm font-medium text-gray-700 mb-1">分类</label> |
| <select id="site-category" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="常用">常用</option> |
| <option value="工具">工具</option> |
| <option value="学习">学习</option> |
| <option value="社交">社交</option> |
| <option value="娱乐">娱乐</option> |
| <option value="购物">购物</option> |
| <option value="其他">其他</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="site-icon" class="block text-sm font-medium text-gray-700 mb-1">图标</label> |
| <select id="site-icon" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="fa-globe">地球</option> |
| <option value="fa-search">搜索</option> |
| <option value="fa-shopping-cart">购物车</option> |
| <option value="fa-video">视频</option> |
| <option value="fa-book">书籍</option> |
| <option value="fa-code">代码</option> |
| <option value="fa-paint-brush">画笔</option> |
| </select> |
| </div> |
| |
| <div class="flex justify-end space-x-3 pt-4"> |
| <button type="button" id="cancel-add" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">取消</button> |
| <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">添加</button> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-white border-t border-gray-200 py-6"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <p class="text-gray-600">© 2023 智能导航. 保留所有权利.</p> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-600 hover:text-blue-500">关于</a> |
| <a href="#" class="text-gray-600 hover:text-blue-500">帮助</a> |
| <a href="#" class="text-gray-600 hover:text-blue-500">隐私政策</a> |
| <a href="#" class="text-gray-600 hover:text-blue-500">使用条款</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const html = document.documentElement; |
| |
| themeToggle.addEventListener('click', () => { |
| if (html.classList.contains('dark')) { |
| html.classList.remove('dark'); |
| themeToggle.innerHTML = '<i class="fas fa-moon text-gray-600"></i>'; |
| localStorage.setItem('theme', 'light'); |
| } else { |
| html.classList.add('dark'); |
| themeToggle.innerHTML = '<i class="fas fa-sun text-yellow-400"></i>'; |
| localStorage.setItem('theme', 'dark'); |
| } |
| }); |
| |
| |
| if (localStorage.getItem('theme') === 'dark') { |
| html.classList.add('dark'); |
| themeToggle.innerHTML = '<i class="fas fa-sun text-yellow-400"></i>'; |
| } |
| |
| |
| const addSiteBtn = document.getElementById('add-site-btn'); |
| const addSiteModal = document.getElementById('add-site-modal'); |
| const closeModal = document.getElementById('close-modal'); |
| const cancelAdd = document.getElementById('cancel-add'); |
| |
| addSiteBtn.addEventListener('click', () => { |
| addSiteModal.classList.remove('hidden'); |
| }); |
| |
| closeModal.addEventListener('click', () => { |
| addSiteModal.classList.add('hidden'); |
| }); |
| |
| cancelAdd.addEventListener('click', () => { |
| addSiteModal.classList.add('hidden'); |
| }); |
| |
| |
| addSiteModal.addEventListener('click', (e) => { |
| if (e.target === addSiteModal) { |
| addSiteModal.classList.add('hidden'); |
| } |
| }); |
| |
| |
| const addSiteForm = document.getElementById('add-site-form'); |
| |
| addSiteForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| const siteName = document.getElementById('site-name').value; |
| const siteUrl = document.getElementById('site-url').value; |
| const siteCategory = document.getElementById('site-category').value; |
| const siteIcon = document.getElementById('site-icon').value; |
| |
| if (!siteName || !siteUrl) { |
| alert('请填写网站名称和URL'); |
| return; |
| } |
| |
| |
| console.log('添加新网站:', { |
| name: siteName, |
| url: siteUrl, |
| category: siteCategory, |
| icon: siteIcon |
| }); |
| |
| |
| addSiteForm.reset(); |
| addSiteModal.classList.add('hidden'); |
| |
| |
| alert('网站已成功添加！'); |
| }); |
| |
| |
| const searchInput = document.querySelector('input[type="text"]'); |
| const searchButton = document.querySelector('button[class*="bg-blue-500"]'); |
| |
| searchButton.addEventListener('click', () => { |
| const searchTerm = searchInput.value.trim(); |
| if (searchTerm) { |
| |
| console.log('搜索:', searchTerm); |
| |
| |
| if (searchTerm.startsWith('http://') || searchTerm.startsWith('https://')) { |
| window.open(searchTerm, '_blank'); |
| } else { |
| |
| alert('执行搜索: ' + searchTerm); |
| } |
| } |
| }); |
| |
| |
| searchInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| searchButton.click(); |
| } |
| }); |
| |
| |
| const categoryButtons = document.querySelectorAll('button[class*="bg-gray-100"]'); |
| categoryButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| |
| categoryButtons.forEach(btn => { |
| btn.classList.remove('bg-blue-500', 'text-white'); |
| btn.classList.add('bg-gray-100', 'hover:bg-gray-200'); |
| }); |
| |
| |
| button.classList.remove('bg-gray-100', 'hover:bg-gray-200'); |
| button.classList.add('bg-blue-500', 'text-white'); |
| |
| |
| console.log('选择分类:', button.textContent.trim()); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=xtuzwl/homepage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
