|
|
<!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> |
