|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>All Journals | Research Portal</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
.journal-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.journal-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
.q1-badge { |
|
|
background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%); |
|
|
} |
|
|
.q2-badge { |
|
|
background: linear-gradient(135deg, #2196F3 极%, #64B5F6 100%); |
|
|
} |
|
|
.q3-badge { |
|
|
background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%); |
|
|
} |
|
|
.q4-badge { |
|
|
background: linear-gradient(135deg, #F44336 0%, #E57373 100%); |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-indigo-900 text-white w-64 flex-shrink-0 hidden md:block"> |
|
|
<div class="极-4"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i data-feather="book-open" class="w-8 h-8"></i> |
|
|
<h1 class="text-xl font-bold">Research Portal</h1> |
|
|
</div> |
|
|
<div class="mt-8"> |
|
|
<div class="px-4 py-2 bg-indigo-800 rounded极g"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> |
|
|
<i data-feather="user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">PhD Student</p> |
|
|
<p class="text-xs text-indigo-300">Computer Science</极> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<nav class="mt-8"> |
|
|
<div class="space-y-2"> |
|
|
<a href="index.html" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg"> |
|
|
<i data-feather="home"></i> |
|
|
<span>Dashboard</span> |
|
|
</a> |
|
|
<a href="my-papers.html" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg"> |
|
|
<i data-feather="file-text"></i> |
|
|
<span>My Papers</span> |
|
|
</a> |
|
|
<a href="references.html" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg"> |
|
|
<i data-feather="bookmark"></i> |
|
|
<span>References</span> |
|
|
</a> |
|
|
<a href="journals.html" class="flex items-center space-x-3 px-4 py-3 bg-indigo-800 rounded-lg"> |
|
|
<i data-feather="book"></i> |
|
|
<span>Journals</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg"> |
|
|
<极 data-feather="calendar"></i> |
|
|
<span>Timeline</span> |
|
|
</a> |
|
|
<a href="supervisor-notes.html" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg"> |
|
|
<i data-feather="message-square"></i> |
|
|
<span>Supervisor Notes</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg"> |
|
|
<i data-feather="settings"></i> |
|
|
<span>Settings</span> |
|
|
</a> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="px-6 py-4 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="md:hidden"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">All Journals</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
|
|
<input type="text" placeholder="Search journals..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div class="bg-white p-4 rounded-xl shadow-sm mb-6"> |
|
|
<div class="flex flex-wrap items-center gap-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm font-medium">Category:</span> |
|
|
<select class="border rounded-lg px-3 py-2 text-sm"> |
|
|
<option>All Categories</option> |
|
|
<option>Computer Science</option> |
|
|
<option>Engineering</option> |
|
|
<option>Medicine</option> |
|
|
<option>Physics</option> |
|
|
<option>Biology</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text极 font-medium">Quartile:</span> |
|
|
<select class="border rounded-lg px-3 py-2 text-sm"> |
|
|
<option>All Quartiles</option> |
|
|
<option>Q1</option> |
|
|
<option>Q2</option> |
|
|
<option>Q3</option> |
|
|
<option>Q4</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm font-medium">Impact Factor:</span> |
|
|
<select class="border rounded-lg px-3 py-2 text-sm"> |
|
|
<option>Any Impact Factor</option> |
|
|
<option>10+</option> |
|
|
<option>5-10</option> |
|
|
<option>3-5</option> |
|
|
<option>1-3</option> |
|
|
<option>Below 1</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm font-medium">Sort by:</span> |
|
|
<select class="border rounded-lg px-3 py-2 text-sm"> |
|
|
<option>Impact Factor (High to Low)</option> |
|
|
<option>Alphabetical</option> |
|
|
<option>Recently Added</option> |
|
|
<option>Acceptance Rate</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="journal-card bg-white p-6 rounded-xl shadow-sm border-t-4 border-green-500"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="q1-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q1</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i data-feather="plus" class="w-3 h-3 text-green-600"></i> |
|
|
</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i data-feather="share-2" class="w-3 h-3 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">Nature Communications</h3> |
|
|
<p class="text-sm text-gray-500 mb-4">Impact Factor: 14.919</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Student"> |
|
|
</div> |
|
|
<a href="journal-detail.html" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="journal-card bg-white p-6 rounded-xl shadow-sm border-t-4 border-blue-500"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="极-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q2</span> |
|
|
<div class="flex space极2"> |
|
|
<button class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i data-feather="plus" class="w-3 h-3 text-blue-600"></i> |
|
|
</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i data-feather="share-2" class="w-3 h-3 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">IEEE Access</h3> |
|
|
<p class="text-sm text-gray-500 mb-4">Impact Factor: 3.367</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor"> |
|
|
</div> |
|
|
<a href="journal-detail.html" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="journal-card bg-white p-6 rounded-xl shadow-sm border极4 border-orange-500"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="q3-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q3</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-6 h-6 rounded-full bg-orange-100 flex items-center justify-center"> |
|
|
<i data-feather="plus" class="w-3 h-3 text-orange-600"></极> |
|
|
</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-100极items-center justify-center"> |
|
|
<i data-feather="share-2" class="w-3 h-3 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">PLOS ONE</h3> |
|
|
<p class="text-sm text-gray-500 mb-4">Impact Factor: 2.740</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Student"> |
|
|
</div> |
|
|
<a href="journal-detail.html" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="journal-card bg-white p-6 rounded-xl shadow-sm border-t-4 border-red-500"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="q4-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q4</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center"> |
|
|
<i data-feather="plus" class="w-3 h-3 text-red-600"></i> |
|
|
</button> |
|
|
<button class="w-6 h极 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i data-feather="share-2" class="w-3 h-3 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">SpringerPlus</h3> |
|
|
<p class="text-sm text-gray-500 mb-4">Impact Factor: 0.847</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits极men/32.jpg" alt="Student"> |
|
|
</div> |
|
|
<a href="journal-detail.html" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="journal-card bg-white p-6 rounded-xl shadow-sm border-t-4 border-green-500"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="q1-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q1</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i data-feather="plus" class="w-3 h-3 text-green-600"></i> |
|
|
</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i data-feather="share-2" class极w-3 h-3 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</极> |
|
|
<h3 class="font-bold mb-2">Science</h3> |
|
|
<p class="text-sm text-gray-500 mb-4">Impact Factor: 47.728</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor"> |
|
|
</div> |
|
|
<a href="journal-detail.html" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="journal-card bg-white p-6 rounded-xl shadow-sm border-t-4 border-green-500"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="q1-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q1</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i data-feather="plus" class="w-3 h-3 text-green-600"></i> |
|
|
</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i data-feather="share-2" class="w-3 h-3 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">Nature</h3> |
|
|
<p class="text-sm text-gray-500 mb-4">Impact Factor: 49.962</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Student"> |
|
|
</div> |
|
|
<a href="journal-detail.html" class="text-xs font-medium text-indigo-600 hover:text极igo-800">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="journal-card bg-white p-6 rounded-xl shadow-sm border-t-4 border-blue-500"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="q2-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q2</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i data-feather="plus" class="w-3 h-3 text-blue-600"></i> |
|
|
</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i data-feather="share-2" class="w-3 h-3 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">ACM Computing Surveys</h3> |
|
|
<p class="text-sm text-gray极 mb-4">Impact Factor: 7.99</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor"> |
|
|
</div> |
|
|
<a href="journal-detail.html" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="journal-card bg-white p-6 rounded-xl shadow-sm border-t-4 border-green-500"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="q1-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q1极> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i data-feather="plus" class="w-3 h-3 text-green-600"></i> |
|
|
</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i data-feather="share-2" class="w-3 h-3 text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="font-bold mb-2">Cell</h3> |
|
|
<p class="text-sm text-gray-500 mb-4">Impact Factor: 41.582</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Supervisor"> |
|
|
<img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Student"> |
|
|
</div> |
|
|
<a href="journal-detail.html" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between mt-8 bg-white p-4 rounded-xl shadow-sm"> |
|
|
<div class="text-sm text-gray-500"> |
|
|
Showing 1-8 of 42 journals |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"> |
|
|
<i data-feather="chevron-left" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center"> |
|
|
1 |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"> |
|
|
2 |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"> |
|
|
3 |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"> |
|
|
<i data-feather="chevron-right" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script>AOS.init();</script> |
|
|
<script>feather.replace();</script> |
|
|
</body> |
|
|
</html> |
