|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Research Dashboard | PhD 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://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.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 0%, #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; |
|
|
} |
|
|
.progress-ring__circle { |
|
|
transition: stroke-dashoffset 0.35s; |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
</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="p-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-lg"> |
|
|
<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</p> |
|
|
</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 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="#" 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="#" class="flex items-center space-x-3 px-4 py-3 hover:bg-indigo-800 rounded-lg"> |
|
|
<i 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">Research Dashboard</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 papers..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center"> |
|
|
<i data-feather="bell"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Total Papers</p> |
|
|
<h3 class="text-2xl font-bold mt-1">24</h3> |
|
|
</div> |
|
|
<div class="w-16 h-16"> |
|
|
<svg class="w-full h-full" viewBox="0 0 36 36"> |
|
|
<path d="M18 2.0845 |
|
|
a 15.9155 15.9155 0 0 1 0 31.831 |
|
|
a 15.9155 15.9155 0 0 1 0 -31.831" |
|
|
fill="none" |
|
|
stroke="#E5E7EB" |
|
|
stroke-width="3" |
|
|
stroke-dasharray="100, 100" |
|
|
/> |
|
|
<path d="M18 2.0845 |
|
|
a 15.9155 15.9155 0 0 1 0 31.831 |
|
|
a 15.9155 15.9155 0 0 1 0 -31.831" |
|
|
fill="none" |
|
|
stroke="#4F46E5" |
|
|
stroke-width="3" |
|
|
stroke-dasharray="75, 100" |
|
|
/> |
|
|
<text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#4F46E5" font-weight="bold">75%</text> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Q1 Journals</p> |
|
|
<h3 class="text-2xl font-bold mt-1">8</h3> |
|
|
</div> |
|
|
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i data-feather="trending-up" class="text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Pending Reviews</p> |
|
|
<h3 class="text-2xl font-bold mt-1">5</h3> |
|
|
</div> |
|
|
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center"> |
|
|
<i data-feather="clock" class="text-yellow-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">References</p> |
|
|
<h3 class="text-2xl font-bold mt-1">142</h3> |
|
|
</div> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i data-feather="book" class="text-blue-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-xl font-semibold">Journal Categories</h2> |
|
|
<a href="journals.html" class="flex items-center space-x-1 text-indigo-600 hover:text-indigo-800"> |
|
|
<span>View All</span> |
|
|
<i data-feather="chevron-right" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg: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> |
|
|
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Assign to me</button> |
|
|
</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">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> |
|
|
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Assign to me</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="journal-card bg-white p-6 rounded-xl shadow-sm border-t-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"></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">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> |
|
|
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Assign to me</button> |
|
|
</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-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">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/women/12.jpg" alt="Supervisor"> |
|
|
</div> |
|
|
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Assign to me</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-xl font-semibold">My Papers</h2> |
|
|
<button class="flex items-center space-x-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> |
|
|
<span>Add New Paper</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Journal</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="file-text" class="text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Deep Learning Approaches for NLP</div> |
|
|
<div class="text-sm text-gray-500">Version 2.1</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="q1-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q1</span> |
|
|
<span class="text-sm text-gray-900 ml-2">Nature Comms</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Under Review</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Oct 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"> |
|
|
<i data-feather="edit" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i data-feather="trash-2" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="file-text" class="text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Transformer Models Survey</div> |
|
|
<div class="text-sm text-gray-500">Version 1.3</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="q2-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q2</span> |
|
|
<span class="text-sm text-gray-900 ml-2">IEEE Access</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Revisions</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30 Sep 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"> |
|
|
<i data-feather="edit" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i data-feather="trash-2" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-orange-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="file-text" class="text-orange-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Sentiment Analysis Techniques</div> |
|
|
<div class="text-sm text-gray-500">Version 3.0</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="q3-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q3</span> |
|
|
<span class="text-sm text-gray-900 ml-2">PLOS ONE</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Submitted</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20 Nov 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"> |
|
|
<i data-feather="edit" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i data-feather="trash-2" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-xl font-semibold">References</h2> |
|
|
<button class="flex items-center space-x-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> |
|
|
<span>Add Reference</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-start justify-between mb-3"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="book" class="text-purple-600"></i> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i data-feather="more-vertical" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-bold mb-1">Attention Is All You Need</h3> |
|
|
<p class="text-sm text-gray-500 mb-3">Vaswani et al., 2017</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-xs font-medium bg-gray-100 text-gray-800 px-2 py-1 rounded">Neural Networks</span> |
|
|
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Add to Paper</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-start justify-between mb-3"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="book" class="text-green-600"></i> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i data-feather="more-vertical" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-bold mb-1">BERT: Pre-training of Deep Bidirectional Transformers</h3> |
|
|
<p class="text-sm text-gray-500 mb-3">Devlin et al., 2018</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-xs font-medium bg-gray-100 text-gray-800 px-2 py-1 rounded">NLP</span> |
|
|
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Add to Paper</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-start justify-between mb-3"> |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="book" class="text-blue-600"></i> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i data-feather="more-vertical" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h3 class="font-bold mb-1">Deep Learning</h3> |
|
|
<p class="text-sm text-gray-500 mb-3">Goodfellow et al., 2016</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-xs font-medium bg-gray-100 text-gray-800 px-2 py-1 rounded">Textbook</span> |
|
|
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Add to Paper</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script>AOS.init();</script> |
|
|
<script>const { animate } = anime;</script> |
|
|
<script>feather.replace();</script> |
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
anime({ |
|
|
targets: '.journal-card', |
|
|
opacity: [0, 1], |
|
|
translateY: [20, 0], |
|
|
delay: anime.stagger(100), |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
