| <!DOCTYPE html> |
| <html lang="zh-TW"> |
| <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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#3b82f6', |
| secondary: '#1e40af', |
| accent: '#f97316', |
| dark: '#1e293b', |
| light: '#f8fafc' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Sans TC', sans-serif; |
| background-color: #f1f5f9; |
| } |
| |
| .article-card { |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| } |
| |
| .article-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| } |
| |
| .hot-badge { |
| background: linear-gradient(45deg, #f97316, #ea580c); |
| } |
| |
| .popular-badge { |
| background: linear-gradient(45deg, #3b82f6, #1d4ed8); |
| } |
| |
| .recent-badge { |
| background: linear-gradient(45deg, #10b981, #059669); |
| } |
| |
| .pagination-btn { |
| transition: all 0.2s ease; |
| } |
| |
| .pagination-btn:hover { |
| background-color: #e2e8f0; |
| } |
| |
| .pagination-btn.active { |
| background-color: #3b82f6; |
| color: white; |
| } |
| |
| .sort-btn.active { |
| background-color: #dbeafe; |
| color: #3b82f6; |
| border-color: #3b82f6; |
| } |
| |
| .sticky-top { |
| position: sticky; |
| top: 20px; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <header class="relative bg-gradient-to-r from-blue-900 via-purple-900 to-indigo-900 text-white shadow-lg overflow-hidden"> |
| |
| <div class="absolute top-0 left-0 w-full h-full opacity-10"> |
| <div class="absolute top-10 right-10 w-64 h-64 bg-purple-500 rounded-full mix-blend-soft-light filter blur-3xl"></div> |
| <div class="absolute bottom-10 left-10 w-96 h-96 bg-indigo-500 rounded-full mix-blend-soft-light filter blur-3xl"></div> |
| </div> |
| |
| <div class="container mx-auto px-4 py-4 relative z-10"> |
| <div class="flex flex-col lg:flex-row justify-between items-center gap-4"> |
| <div class="flex items-center w-full lg:w-auto"> |
| <i class="fas fa-newspaper text-primary text-3xl mr-3"></i> |
| <h1 class="text-2xl lg:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">hoansu</h1> |
| <span class="mx-3 text-gray-300 opacity-50">|</span> |
| <h2 class="text-xl lg:text-2xl font-semibold text-gray-100">文章列表</h2> |
| </div> |
| <div class="flex items-center w-full lg:w-auto space-x-3"> |
| <button id="postArticleBtn" class="bg-gradient-to-r from-primary to-accent hover:from-secondary hover:to-purple-600 text-white px-4 py-2.5 rounded-lg transition-all duration-300 shadow-lg transform hover:scale-105 flex items-center text-sm lg:text-base"> |
| <i class="fas fa-plus mr-2"></i> 發表文章 |
| </button> |
| <div class="relative flex-1 max-w-xs lg:max-w-md"> |
| <input type="text" placeholder="搜尋文章..." class="w-full bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-20 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-white placeholder-gray-300 text-sm lg:text-base"> |
| <i class="fas fa-search absolute right-3 top-3 text-gray-300 text-sm"></i> |
| </div> |
| <button id="authBtn" class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white px-4 py-2.5 rounded-lg transition-all duration-300 flex items-center text-sm lg:text-base"> |
| <i class="fas fa-user mr-2"></i> 登入 |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl p-8 w-full max-w-md"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold text-gray-800">會員登入</h3> |
| <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <form id="loginForm"> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="username">帳號</label> |
| <input type="text" id="username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary" placeholder="請輸入帳號" required> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2" for="password">密碼</label> |
| <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary" placeholder="請輸入密碼" required> |
| </div> |
| <div class="flex justify-between items-center"> |
| <button type="button" class="text-gray-600 hover:text-gray-800">忘記密碼？</button> |
| <button type="submit" class="bg-gradient-to-r from-primary to-accent hover:from-secondary hover:to-purple-600 text-white px-6 py-2.5 rounded-lg transition-all duration-300"> |
| 登入 |
| </button> |
| </div> |
| </form> |
| <div class="mt-6 text-center"> |
| <p class="text-gray-600">還沒有帳號？ <a href="#" class="text-primary hover:underline">立即註冊</a></p> |
| </div> |
| </div> |
| </div> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <div class="w-full lg:w-3/4"> |
| |
| <section class="mb-10"> |
| <div class="flex items-center mb-6"> |
| <i class="fas fa-fire text-accent mr-2"></i> |
| <h2 class="text-2xl font-bold text-gray-800">熱門文章</h2> |
| <div class="ml-2 bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded"> |
| 置頂 |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="article-card bg-white rounded-xl overflow-hidden border border-gray-200"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="熱門文章" class="w-full h-48 object-cover"> |
| <div class="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> |
| 熱門 |
| </div> |
| </div> |
| <div class="p-5"> |
| <div class="flex items-center mb-2"> |
| <span class="popular-badge text-white text-xs font-bold px-2 py-1 rounded mr-2">人氣 98%</span> |
| <span class="text-gray-500 text-sm">2023-10-15</span> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">如何提升產品設計的用戶體驗</h3> |
| <p class="text-gray-600 mb-4">在競爭激烈的市場中，優秀的用戶體驗是產品成功的關鍵因素。本文將探討...</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="作者" class="w-8 h-8 rounded-full mr-2"> |
| <span class="text-gray-700">張美華</span> |
| </div> |
| <div class="flex space-x-2"> |
| <span class="text-gray-500"><i class="far fa-eye mr-1"></i> 1.2k</span> |
| <span class="text-gray-500"><i class="far fa-comment mr-1"></i> 42</span> |
| <span class="text-gray-500"><i class="far fa-heart mr-1"></i> 87</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="article-card bg-white rounded-xl overflow-hidden border border-gray-200"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="熱門文章" class="w-full h-48 object-cover"> |
| <div class="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> |
| 熱門 |
| </div> |
| </div> |
| <div class="p-5"> |
| <div class="flex items-center mb-2"> |
| <span class="popular-badge text-white text-xs font-bold px-2 py-1 rounded mr-2">人氣 95%</span> |
| <span class="text-gray-500 text-sm">2023-10-12</span> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">2024年科技趨勢預測</h3> |
| <p class="text-gray-600 mb-4">隨著技術的快速發展，了解未來趨勢對於企業和個人都至關重要。本文將...</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="作者" class="w-8 h-8 rounded-full mr-2"> |
| <span class="text-gray-700">李志明</span> |
| </div> |
| <div class="flex space-x-2"> |
| <span class="text-gray-500"><i class="far fa-eye mr-1"></i> 2.1k</span> |
| <span class="text-gray-500"><i class="far fa-comment mr-1"></i> 68</span> |
| <span class="text-gray-500"><i class="far fa-heart mr-1"></i> 124</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="article-card bg-white rounded-xl overflow-hidden border border-gray-200"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="熱門文章" class="w-full h-48 object-cover"> |
| <div class="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> |
| 熱門 |
| </div> |
| </div> |
| <div class="p-5"> |
| <div class="flex items-center mb-2"> |
| <span class="popular-badge text-white text-xs font-bold px-2 py-1 rounded mr-2">人氣 92%</span> |
| <span class="text-gray-500 text-sm">2023-10-10</span> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">數據分析在商業決策中的應用</h3> |
| <p class="text-gray-600 mb-4">數據驅動決策已成為現代企業的核心競爭力。本文將分享如何有效利用...</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="作者" class="w-8 h-8 rounded-full mr-2"> |
| <span class="text-gray-700">王雅婷</span> |
| </div> |
| <div class="flex space-x-2"> |
| <span class="text-gray-500"><i class="far fa-eye mr-1"></i> 1.8k</span> |
| <span class="text-gray-500"><i class="far fa-comment mr-1"></i> 53</span> |
| <span class="text-gray-500"><i class="far fa-heart mr-1"></i> 96</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 p-4 bg-white rounded-lg shadow-sm"> |
| <div class="flex flex-wrap items-center mb-2 sm:mb-0"> |
| <h3 class="text-xl font-bold text-gray-800 mr-4">所有文章</h3> |
| <div id="activeFilters" class="flex flex-wrap gap-2"> |
| |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button id="sortRecent" class="sort-btn active px-4 py-2 rounded-lg border border-gray-300 text-gray-700 flex items-center"> |
| <i class="fas fa-clock mr-2"></i> 最新時間 |
| </button> |
| <button id="sortPopular" class="sort-btn px-4 py-2 rounded-lg border border-gray-300 text-gray-700 flex items-center"> |
| <i class="fas fa-fire mr-2"></i> 人氣熱度 |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="articleList" class="space-y-6 mb-10"> |
| |
| </div> |
| |
| |
| <div class="flex justify-center mt-10"> |
| <nav class="flex items-center space-x-1"> |
| <button class="pagination-btn w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <button class="pagination-btn w-10 h-10 rounded-full flex items-center justify-center active">1</button> |
| <button class="pagination-btn w-10 h-10 rounded-full flex items-center justify-center">2</button> |
| <button class="pagination-btn w-10 h-10 rounded-full flex items-center justify-center">3</button> |
| <button class="pagination-btn w-10 h-10 rounded-full flex items-center justify-center">4</button> |
| <button class="pagination-btn w-10 h-10 rounded-full flex items-center justify-center">5</button> |
| <button class="pagination-btn w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </nav> |
| </div> |
| </div> |
| |
| |
| <div class="w-full lg:w-1/4"> |
| <div class="sticky-top"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> |
| <h3 class="text-lg font-bold text-gray-800 mb-4">文章分類</h3> |
| <ul class="space-y-2" id="categoryList"> |
| <li class="flex justify-between items-center py-2 border-b border-gray-100"> |
| <a href="#" class="text-gray-700 hover:text-primary flex items-center category-link" data-category="科技趨勢"> |
| <i class="fas fa-laptop-code mr-2 text-primary"></i> 科技趨勢 |
| </a> |
| <span class="bg-gray-100 text-gray-600 text-xs font-medium px-2 py-0.5 rounded-full">24</span> |
| </li> |
| <li class="flex justify-between items-center py-2 border-b border-gray-100"> |
| <a href="#" class="text-gray-700 hover:text-primary flex items-center category-link" data-category="設計"> |
| <i class="fas fa-paint-brush mr-2 text-primary"></i> 設計 |
| </a> |
| <span class="bg-gray-100 text-gray-600 text-xs font-medium px-2 py-0.5 rounded-full">18</span> |
| </li> |
| <li class="flex justify-between items-center py-2 border-b border-gray-100"> |
| <a href="#" class="text-gray-700 hover:text-primary flex items-center category-link" data-category="商業"> |
| <i class="fas fa-chart-line mr-2 text-primary"></i> 商業 |
| </a> |
| <span class="bg-gray-100 text-gray-600 text-xs font-medium px-2 py-0.5 rounded-full">32</span> |
| </li> |
| <li class="flex justify-between items-center py-2 border-b border-gray-100"> |
| <a href="#" class="text-gray-700 hover:text-primary flex items-center category-link" data-category="生活"> |
| <i class="fas fa-heartbeat mr-2 text-primary"></i> 生活 |
| </a> |
| <span class="bg-gray-100 text-gray-600 text-xs font-medium px-2 py-0.5 rounded-full">41</span> |
| </li> |
| <li class="flex justify-between items-center py-2"> |
| <a href="#" class="text-gray-700 hover:text-primary flex items-center category-link" data-category="教育"> |
| <i class="fas fa-graduation-cap mr-2 text-primary"></i> 教育 |
| </a> |
| <span class="bg-gray-100 text-gray-600 text-xs font-medium px-2 py-0.5 rounded-full">15</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> |
| <h3 class="text-lg font-bold text-gray-800 mb-4">熱門標籤</h3> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">人工智慧</span> |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">用戶體驗</span> |
| <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">區塊鏈</span> |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">數據分析</span> |
| <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">雲端計算</span> |
| <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">數位轉型</span> |
| <span class="bg-pink-100 text-pink-800 text-xs font-medium px-2.5 py-0.5 rounded">創業</span> |
| <span class="bg-teal-100 text-teal-800 text-xs font-medium px-2.5 py-0.5 rounded">行銷策略</span> |
| </div> |
| </div> |
| |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="relative bg-gradient-to-r from-blue-900 via-purple-900 to-indigo-900 text-white pt-16 pb-8 mt-12 overflow-hidden"> |
| |
| <div class="absolute top-0 left-0 w-full h-full opacity-10"> |
| <div class="absolute top-20 left-10 w-64 h-64 bg-purple-500 rounded-full mix-blend-soft-light filter blur-3xl"></div> |
| <div class="absolute bottom-10 right-10 w-96 h-96 bg-indigo-500 rounded-full mix-blend-soft-light filter blur-3xl"></div> |
| </div> |
| |
| <div class="container mx-auto px-4 relative z-10"> |
| <div class="flex flex-col md:flex-row justify-between mb-12"> |
| <div class="mb-10 md:mb-0 md:w-1/3"> |
| <div class="flex items-center mb-6"> |
| <i class="fas fa-newspaper text-primary text-2xl mr-3"></i> |
| <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">hoansu</h3> |
| </div> |
| <p class="text-gray-300 mb-6 max-w-md leading-relaxed">這裡是個人知識分享與生活紀錄的地方，希望我的文章能為您帶來啟發與幫助。</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20 transition-all duration-300"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20 transition-all duration-300"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20 transition-all duration-300"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20 transition-all duration-300"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8 md:w-2/3"> |
| <div> |
| <h4 class="text-lg font-semibold mb-6 relative inline-block"> |
| 關於我 |
| <span class="absolute bottom-0 left-0 w-10 h-0.5 bg-accent"></span> |
| </h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-300 flex items-start"> |
| <i class="fas fa-chevron-right text-xs mt-1 mr-2 text-accent"></i> 個人簡介 |
| </a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-300 flex items-start"> |
| <i class="fas fa-chevron-right text-xs mt-1 mr-2 text-accent"></i> 創作理念 |
| </a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-300 flex items-start"> |
| <i class="fas fa-chevron-right text-xs mt-1 mr-2 text-accent"></i> 聯絡方式 |
| </a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-6 relative inline-block"> |
| 文章分類 |
| <span class="absolute bottom-0 left-0 w-10 h-0.5 bg-accent"></span> |
| </h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-300 flex items-start"> |
| <i class="fas fa-chevron-right text-xs mt-1 mr-2 text-accent"></i> 技術分享 |
| </a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-300 flex items-start"> |
| <i class="fas fa-chevron-right text-xs mt-1 mr-2 text-accent"></i> 生活點滴 |
| </a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-300 flex items-start"> |
| <i class="fas fa-chevron-right text-xs mt-1 mr-2 text-accent"></i> 閱讀筆記 |
| </a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-6 relative inline-block"> |
| 快速連結 |
| <span class="absolute bottom-0 left-0 w-10 h-0.5 bg-accent"></span> |
| </h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-300 flex items-start"> |
| <i class="fas fa-chevron-right text-xs mt-1 mr-2 text-accent"></i> 首頁 |
| </a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-300 flex items-start"> |
| <i class="fas fa-chevron-right text-xs mt-1 mr-2 text-accent"></i> 最新文章 |
| </a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-300 flex items-start"> |
| <i class="fas fa-chevron-right text-xs mt-1 mr-2 text-accent"></i> 熱門文章 |
| </a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 border-opacity-30 pt-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 hoansu. 保留所有權利.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">隱私權政策</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">服務條款</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">聯絡我們</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| let currentUser = null; |
| |
| |
| const articles = [ |
| { |
| id: 1, |
| title: "人工智能在醫療領域的應用前景", |
| excerpt: "探討AI技術如何改善診斷準確性和治療方案，提升醫療服務效率。", |
| author: "林曉明", |
| authorAvatar: "https://randomuser.me/api/portraits/men/41.jpg", |
| date: "2023-10-18", |
| views: 1240, |
| comments: 32, |
| likes: 68, |
| category: "科技趨勢", |
| popularity: 85, |
| image: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| }, |
| { |
| id: 2, |
| title: "UI/UX設計中的色彩心理學", |
| excerpt: "了解色彩如何影響用戶情緒和行為，創建更有效的設計方案。", |
| author: "張雅琪", |
| authorAvatar: "https://randomuser.me/api/portraits/women/67.jpg", |
| date: "2023-10-17", |
| views: 892, |
| comments: 18, |
| likes: 42, |
| category: "設計", |
| popularity: 72, |
| image: "https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| }, |
| { |
| id: 3, |
| title: "數位轉型對傳統企業的挑戰", |
| excerpt: "分析傳統企業在數位轉型過程中面臨的關鍵問題和解決方案。", |
| author: "王大維", |
| authorAvatar: "https://randomuser.me/api/portraits/men/52.jpg", |
| date: "2023-10-16", |
| views: 1560, |
| comments: 45, |
| likes: 89, |
| category: "商業", |
| popularity: 91, |
| image: "https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| }, |
| { |
| id: 4, |
| title: "遠程工作的效率提升技巧", |
| excerpt: "分享在家中辦公時保持高效生產力的實用方法和工具。", |
| author: "陳美玲", |
| authorAvatar: "https://randomuser.me/api/portraits/women/33.jpg", |
| date: "2023-10-15", |
| views: 2105, |
| comments: 67, |
| likes: 124, |
| category: "生活", |
| popularity: 95, |
| image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| }, |
| { |
| id: 5, |
| title: "區塊鏈技術的未來發展方向", |
| excerpt: "探討區塊鏈技術在金融、供應鏈等領域的潛在應用和挑戰。", |
| author: "劉志豪", |
| authorAvatar: "https://randomuser.me/api/portraits/men/63.jpg", |
| date: "2023-10-14", |
| views: 956, |
| comments: 28, |
| likes: 51, |
| category: "科技趨勢", |
| popularity: 68, |
| image: "https://images.unsplash.com/photo-1620336655052-b57986f5a26a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| }, |
| { |
| id: 6, |
| title: "如何建立個人品牌影響力", |
| excerpt: "從內容創作到社群經營，打造個人專業形象的完整指南。", |
| author: "黃雅慧", |
| authorAvatar: "https://randomuser.me/api/portraits/women/78.jpg", |
| date: "2023-10-13", |
| views: 1780, |
| comments: 53, |
| likes: 98, |
| category: "商業", |
| popularity: 87, |
| image: "https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| }, |
| { |
| id: 7, |
| title: "2024年前端開發技術趨勢", |
| excerpt: "React、Vue、Angular等主流框架的發展方向和新特性。", |
| author: "吳建宏", |
| authorAvatar: "https://randomuser.me/api/portraits/men/84.jpg", |
| date: "2023-10-12", |
| views: 2340, |
| comments: 78, |
| likes: 156, |
| category: "科技趨勢", |
| popularity: 98, |
| image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| }, |
| { |
| id: 8, |
| title: "創業初期的資金籌措策略", |
| excerpt: "介紹天使投資、風險投資等不同資金來源的優缺點和申請要點。", |
| author: "林美娟", |
| authorAvatar: "https://randomuser.me/api/portraits/women/29.jpg", |
| date: "2023-10-11", |
| views: 1420, |
| comments: 41, |
| likes: 73, |
| category: "商業", |
| popularity: 82, |
| image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| }, |
| { |
| id: 9, |
| title: "心理健康與工作壓力管理", |
| excerpt: "現代職場中如何識別和應對壓力，維持身心健康。", |
| author: "張志明", |
| authorAvatar: "https://randomuser.me/api/portraits/men/12.jpg", |
| date: "2023-10-10", |
| views: 1890, |
| comments: 56, |
| likes: 102, |
| category: "生活", |
| popularity: 93, |
| image: "https://images.unsplash.com/photo-1481487196290-c152efe083f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| }, |
| { |
| id: 10, |
| title: "機器學習入門指南", |
| excerpt: "為初學者提供機器學習的核心概念、學習路徑和實用資源。", |
| author: "陳雅文", |
| authorAvatar: "https://randomuser.me/api/portraits/women/54.jpg", |
| date: "2023-10-09", |
| views: 3120, |
| comments: 92, |
| likes: 187, |
| category: "科技趨勢", |
| popularity: 99, |
| image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" |
| } |
| ]; |
| |
| |
| let currentSort = 'recent'; |
| |
| let activeFilters = []; |
| |
| |
| function renderArticles(articlesToRender) { |
| const articleList = document.getElementById('articleList'); |
| articleList.innerHTML = ''; |
| |
| articlesToRender.forEach(article => { |
| const articleElement = document.createElement('div'); |
| articleElement.className = 'article-card bg-white rounded-xl overflow-hidden border border-gray-200 flex flex-col md:flex-row'; |
| |
| articleElement.innerHTML = ` |
| <div class="md:w-1/3"> |
| <img src="${article.image}" alt="${article.title}" class="w-full h-full object-cover"> |
| </div> |
| <div class="p-6 md:w-2/3"> |
| <div class="flex items-center mb-3"> |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">${article.category}</span> |
| ${currentSort === 'popular' ? |
| `<span class="popular-badge text-white text-xs font-bold px-2 py-1 rounded mr-2">人氣 ${article.popularity}%</span>` : |
| `<span class="recent-badge text-white text-xs font-bold px-2 py-1 rounded mr-2">最新</span>` |
| } |
| <span class="text-gray-500 text-sm">${article.date}</span> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">${article.title}</h3> |
| <p class="text-gray-600 mb-4">${article.excerpt}</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <img src="${article.authorAvatar}" alt="${article.author}" class="w-8 h-8 rounded-full mr-2"> |
| <span class="text-gray-700">${article.author}</span> |
| </div> |
| <div class="flex space-x-4"> |
| <span class="text-gray-500 flex items-center"><i class="far fa-eye mr-1"></i> ${article.views}</span> |
| <span class="text-gray-500 flex items-center"><i class="far fa-comment mr-1"></i> ${article.comments}</span> |
| <span class="text-gray-500 flex items-center"><i class="far fa-heart mr-1"></i> ${article.likes}</span> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| articleList.appendChild(articleElement); |
| }); |
| } |
| |
| |
| function sortArticles(sortBy) { |
| currentSort = sortBy; |
| |
| |
| document.getElementById('sortRecent').classList.toggle('active', sortBy === 'recent'); |
| document.getElementById('sortPopular').classList.toggle('active', sortBy === 'popular'); |
| |
| let filteredArticles = [...articles]; |
| |
| |
| if (activeFilters.length > 0) { |
| filteredArticles = filteredArticles.filter(article => |
| activeFilters.includes(article.category) |
| ); |
| } |
| |
| |
| if (sortBy === 'recent') { |
| filteredArticles.sort((a, b) => new Date(b.date) - new Date(a.date)); |
| } else if (sortBy === 'popular') { |
| filteredArticles.sort((a, b) => b.popularity - a.popularity); |
| } |
| |
| renderArticles(filteredArticles); |
| } |
| |
| |
| function updateFilterTags() { |
| const filterContainer = document.getElementById('activeFilters'); |
| filterContainer.innerHTML = ''; |
| |
| activeFilters.forEach(category => { |
| const tag = document.createElement('span'); |
| tag.className = 'bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center'; |
| tag.innerHTML = ` |
| ${category} |
| <button class="ml-1 remove-filter" data-category="${category}"> |
| <i class="fas fa-times text-xs"></i> |
| </button> |
| `; |
| filterContainer.appendChild(tag); |
| }); |
| |
| |
| document.querySelectorAll('.remove-filter').forEach(button => { |
| button.addEventListener('click', function() { |
| const category = this.getAttribute('data-category'); |
| removeFilter(category); |
| }); |
| }); |
| } |
| |
| |
| function addFilter(category) { |
| if (!activeFilters.includes(category)) { |
| activeFilters.push(category); |
| updateFilterTags(); |
| sortArticles(currentSort); |
| } |
| } |
| |
| |
| function removeFilter(category) { |
| activeFilters = activeFilters.filter(filter => filter !== category); |
| updateFilterTags(); |
| sortArticles(currentSort); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| sortArticles('recent'); |
| |
| |
| document.getElementById('sortRecent').addEventListener('click', () => sortArticles('recent')); |
| document.getElementById('sortPopular').addEventListener('click', () => sortArticles('popular')); |
| |
| |
| document.querySelectorAll('.category-link').forEach(link => { |
| link.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const category = this.getAttribute('data-category'); |
| addFilter(category); |
| }); |
| }); |
| |
| |
| const authBtn = document.getElementById('authBtn'); |
| const loginModal = document.getElementById('loginModal'); |
| const closeLoginModal = document.getElementById('closeLoginModal'); |
| const loginForm = document.getElementById('loginForm'); |
| const postArticleBtn = document.getElementById('postArticleBtn'); |
| |
| authBtn.addEventListener('click', function() { |
| if (currentUser) { |
| |
| currentUser = null; |
| authBtn.innerHTML = '<i class="fas fa-user mr-2"></i> 登入'; |
| postArticleBtn.disabled = true; |
| postArticleBtn.classList.add('opacity-50', 'cursor-not-allowed'); |
| alert('您已成功登出'); |
| } else { |
| |
| loginModal.classList.remove('hidden'); |
| } |
| }); |
| |
| closeLoginModal.addEventListener('click', function() { |
| loginModal.classList.add('hidden'); |
| }); |
| |
| loginForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const username = document.getElementById('username').value; |
| const password = document.getElementById('password').value; |
| |
| |
| if (username && password) { |
| currentUser = { username: username }; |
| authBtn.innerHTML = `<i class="fas fa-user mr-2"></i> ${username} (登出)`; |
| postArticleBtn.disabled = false; |
| postArticleBtn.classList.remove('opacity-50', 'cursor-not-allowed'); |
| loginModal.classList.add('hidden'); |
| alert('登入成功！'); |
| } else { |
| alert('請輸入帳號和密碼'); |
| } |
| }); |
| |
| |
| postArticleBtn.addEventListener('click', function() { |
| if (!currentUser) { |
| alert('請先登入以發表文章'); |
| loginModal.classList.remove('hidden'); |
| return; |
| } |
| alert('發表文章功能已啟用！'); |
| |
| }); |
| |
| |
| postArticleBtn.disabled = true; |
| postArticleBtn.classList.add('opacity-50', 'cursor-not-allowed'); |
| }); |
| </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=suanan/self-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
