|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Journal Details | 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> |
|
|
.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, #FF980极 0%, #FFB74D 100%); |
|
|
} |
|
|
.q4-badge { |
|
|
background: linear-gradient(135deg, #F44336 0%, #E57373 100%); |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.tab-button { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.tab-button.active { |
|
|
border-bottom: 2px solid #4F46E5; |
|
|
color: #4F46E5; |
|
|
} |
|
|
.metric-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.metric-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
</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> |
|
|
<h极 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 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="#" 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="#" 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> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<a href="index.html" class="text-indigo-600 hover:text-indigo-800"> |
|
|
<i data-feather="arrow-left" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Journal Details</h1> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<button class="flex items-center space-x-2 bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50"> |
|
|
<i data-feather="external-link" class="w-4 h-4"></i> |
|
|
<span>Visit Website</span> |
|
|
</button> |
|
|
<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>Submit Paper</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-6"> |
|
|
<div class="flex items-start justify-between mb-4"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-3 mb-2"> |
|
|
<span class="q1-badge text-xs font-semibold px-2 py-1 rounded-full text-white">Q1</span> |
|
|
<span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">SCI Indexed</span> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Nature Communications</h2> |
|
|
<p class="text-gray-500 mt-1">Open access journal publishing high-quality research from all areas of natural sciences</p> |
|
|
</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="star" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"> |
|
|
<i data-feather="share-2" class="w-4 h-4"></极> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"> |
|
|
<i data-feather="more-vertical" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mt-6"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="bar-chart-2" class="text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Impact Factor</p> |
|
|
<p class="font-medium">14.919</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="trending-up" class="text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">5-Year IF</p> |
|
|
<p class="font-medium">15.804</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="clock" class="text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Decision Time</p> |
|
|
<p class="font-medium">8 days</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="dollar-sign" class="text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">APC</p> |
|
|
<p class="font-medium">$5,690</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-b border-gray-200 mb-6"> |
|
|
<nav class="flex space-x-8"> |
|
|
<button class="tab-button py-4 px-1 font-medium text-gray-500 hover:text-gray-700 active">Overview</button> |
|
|
<button class="tab-button py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Metrics</button> |
|
|
<button class="tab-button py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Submission</button> |
|
|
<button class="tab-button py-4 px-1 font-medium text-gray-500 hover:text-gray-700">My Submissions</button> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h3 class="text-lg font-medium mb-4">Journal Overview</h3> |
|
|
<p class="text-gray-600 leading-relaxed mb-4"> |
|
|
Nature Communications is an open access journal that publishes high-quality research from all areas of the natural sciences. |
|
|
Papers published by the journal aim to represent important advances of significance to specialists within each field. |
|
|
</p> |
|
|
<p class="text-gray-600 leading-relaxed mb-6"> |
|
|
The journal offers rapid publication and high visibility, and is committed to publishing sound research through a rigorous |
|
|
and fair review process. All papers are peer reviewed by experts in the field, and the journal is committed to providing |
|
|
a high level of service to both authors and readers. |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div> |
|
|
<h4 class="font-medium mb-2">Subject Areas</h4> |
|
|
<ul class="text-sm text-gray-600 space-y-1"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> |
|
|
Physics |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> |
|
|
Chemistry |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> |
|
|
Earth Sciences |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-4 h-4 mr极 text-green-500"></i> |
|
|
Biological Sciences |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium mb-2">Key Features</h4> |
|
|
<ul class="text-sm text-gray-600 space-y-1"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> |
|
|
Open Access |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> |
|
|
Rapid Publication |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> |
|
|
High Visibility |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> |
|
|
Rigorous Peer Review |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-6"> |
|
|
<h3 class="text-lg font-medium mb-4">Editorial Information</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-2">Editor-in-Chief</h4> |
|
|
<p class="text-gray-600">Dr. Magdalena Skipper</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-2">Publisher</h4> |
|
|
<p class="text-gray-600">Springer Nature</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-2">ISSN</h4> |
|
|
<p class="text-gray-600">2041-1723</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm mb-2">Launch Date</h4> |
|
|
<p class="text-gray-600">April 2010</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h3 class="text-lg font-medium mb-4">Impact Metrics</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="metric-card bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm font-medium">CiteScore</span> |
|
|
<span class="text-lg font-bold text-indigo-600">24.9</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="metric-card bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm font-medium">SJR</span> |
|
|
<span class="text-lg font-bold text-green-600">4.56</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="metric-card bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm font-medium">SNIP</span> |
|
|
<span class="text-lg font-bold text-purple-600">3.12</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></极> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h3 class="text-lg font-medium mb-4">Submission Stats</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">Acceptance Rate</span> |
|
|
<span class="font-medium">18%</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">Submission to Decision</span> |
|
|
<span class="font-medium">8 days</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">Submission to Publication</span> |
|
|
<span class="font-medium">42 days</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">Articles Published/Year</span> |
|
|
<span class="font-medium">6,240</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h3 class="text-lg font-medium mb-4">Quick Actions</h3> |
|
|
<div class="space-y-3"> |
|
|
<button class="w-full flex items-center space-x-3 text-left p-3 rounded-lg hover:bg-gray-50 border border-gray-200"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i data-feather="download" class="w-4 h-4 text-blue-600"></i> |
|
|
</div> |
|
|
<span>Download Template</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center space-x-3 text-left p-3 rounded-lg hover:bg-gray-50 border border-gray-200"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i data-feather="book-open" class="w-4 h-4 text-green-600"></i> |
|
|
</div> |
|
|
<span>Author Guidelines</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center space-x-3 text-left p-3 rounded-lg hover:bg-gray-50 border border-gray-200"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center"> |
|
|
<i data-feather="bar-chart-2" class="w-4 h-4 text-purple-600"></i> |
|
|
</div> |
|
|
<span>View Metrics</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center space-x-3 text-left p-3 rounded-lg hover:bg-gray-50 border border-gray-200"> |
|
|
<div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center"> |
|
|
<i data-feather="help-circle" class="w-4 h-4 text-orange-600"></i> |
|
|
</div> |
|
|
<span>Support</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script>AOS.init();</script> |
|
|
<script>feather.replace();</script> |
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); |
|
|
this.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
