scholarsync / index.html
KaptinKay's picture
Build an app that collects my scholarly publications online and updates it on Google scholar - Initial Deployment
536029d verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScholarSync - Academic Publication Manager</title>
<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://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.publication-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="book" class="text-indigo-600 h-8 w-8"></i>
<span class="ml-2 text-xl font-bold text-gray-900">ScholarSync</span>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8">
<a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium">Dashboard</a>
<a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Publications</a>
<a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Settings</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
Connect Google Scholar
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="gradient-bg">
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
Manage Your Academic Publications
</h1>
<p class="mt-6 max-w-lg mx-auto text-xl text-indigo-100">
Automatically collect, organize, and sync your publications with Google Scholar.
</p>
<div class="mt-10">
<button class="bg-white text-indigo-600 px-8 py-3 rounded-md text-lg font-medium hover:bg-gray-100">
Get Started
</button>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
A better way to manage your research
</p>
</div>
<div class="mt-10">
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
<div class="relative" data-aos="fade-up">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<i data-feather="search"></i>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Publication Discovery</p>
<p class="mt-2 ml-16 text-base text-gray-500">
Automatically find all your publications across various databases and journals.
</p>
</div>
<div class="relative" data-aos="fade-up" data-aos-delay="100">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<i data-feather="refresh-cw"></i>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Auto Sync</p>
<p class="mt-2 ml-16 text-base text-gray-500">
Keep your Google Scholar profile updated with your latest publications automatically.
</p>
</div>
<div class="relative" data-aos="fade-up" data-aos-delay="200">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<i data-feather="bar-chart-2"></i>
</div>
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Impact Analytics</p>
<p class="mt-2 ml-16 text-base text-gray-500">
Track citations, h-index, and other metrics in one dashboard.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Publications -->
<div class="bg-gray-50 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-10">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Recent Publications</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Your latest research
</p>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Publication Card 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden publication-card transition duration-300 ease-in-out" data-aos="fade-up">
<div class="p-6">
<div class="flex items-center">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
Journal
</span>
<span class="ml-2 text-sm text-gray-500">2023</span>
</div>
<h3 class="mt-4 text-xl font-semibold text-gray-900">Advanced Machine Learning Techniques</h3>
<p class="mt-3 text-base text-gray-500">
A comprehensive study on the latest advancements in machine learning algorithms and their applications.
</p>
<div class="mt-4 flex items-center">
<span class="text-sm text-gray-500">Citations: 42</span>
<button class="ml-auto text-indigo-600 hover:text-indigo-900 text-sm font-medium">
Sync to Scholar
</button>
</div>
</div>
</div>
<!-- Publication Card 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden publication-card transition duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="100">
<div class="p-6">
<div class="flex items-center">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
Conference
</span>
<span class="ml-2 text-sm text-gray-500">2022</span>
</div>
<h3 class="mt-4 text-xl font-semibold text-gray-900">Neural Networks in Healthcare</h3>
<p class="mt-3 text-base text-gray-500">
Exploring the potential of deep learning models in medical diagnosis and treatment planning.
</p>
<div class="mt-4 flex items-center">
<span class="text-sm text-gray-500">Citations: 28</span>
<button class="ml-auto text-indigo-600 hover:text-indigo-900 text-sm font-medium">
Sync to Scholar
</button>
</div>
</div>
</div>
<!-- Publication Card 3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden publication-card transition duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="200">
<div class="p-6">
<div class="flex items-center">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
Book Chapter
</span>
<span class="ml-2 text-sm text-gray-500">2021</span>
</div>
<h3 class="mt-4 text-xl font-semibold text-gray-900">Data Science Fundamentals</h3>
<p class="mt-3 text-base text-gray-500">
Essential concepts and techniques for aspiring data scientists in the modern era.
</p>
<div class="mt-4 flex items-center">
<span class="text-sm text-gray-500">Citations: 76</span>
<button class="ml-auto text-indigo-600 hover:text-indigo-900 text-sm font-medium">
Sync to Scholar
</button>
</div>
</div>
</div>
</div>
<div class="mt-10 text-center">
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
View All Publications
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</button>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="bg-indigo-700">
<div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-white sm:text-4xl">
<span class="block">Ready to streamline your academic profile?</span>
</h2>
<p class="mt-4 text-lg leading-6 text-indigo-200">
Connect your Google Scholar account and let us handle the rest.
</p>
<button class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
Connect Google Scholar
<i data-feather="external-link" class="ml-2 w-4 h-4"></i>
</button>
</div>
</div>
<!-- Footer -->
<footer class="bg-white">
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
<div class="px-5 py-2">
<a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a>
</div>
<div class="px-5 py-2">
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Privacy</a>
</div>
<div class="px-5 py-2">
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Terms</a>
</div>
<div class="px-5 py-2">
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Contact</a>
</div>
</nav>
<div class="mt-8 flex justify-center space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-500">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<i data-feather="github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<i data-feather="linkedin"></i>
</a>
</div>
<p class="mt-8 text-center text-base text-gray-400">
&copy; 2023 ScholarSync. All rights reserved.
</p>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
</script>
</body>
</html>