|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="h-full"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Personal Knowledge Hub</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.sidebar-item:hover .sidebar-icon { |
|
|
transform: translateX(3px); |
|
|
} |
|
|
.sidebar-icon { |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.editor-toolbar button:hover { |
|
|
background-color: rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.dark .editor-toolbar button:hover { |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.3s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 h-full flex"> |
|
|
|
|
|
<div class="w-64 bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg border-r border-gray-100 dark:border-gray-700/50 flex flex-col h-screen sticky top-0 transition-all duration-300"> |
|
|
<div class="p-4 border-b border-gray-100 dark:border-gray-700/50 flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-white font-bold mr-2">PK</div> |
|
|
<h1 class="text-xl font-bold bg-gradient-to-r from-primary-600 to-gray-800 dark:to-gray-100 bg-clip-text text-transparent">Personal Knowledge</h1> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<button class="w-full bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white py-2.5 px-4 rounded-lg flex items-center justify-center transition-all duration-300 shadow-sm hover:shadow-md"> |
|
|
<i data-feather="plus" class="mr-2 w-4 h-4"></i> New Page |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto px-2"> |
|
|
<div class="mb-4"> |
|
|
<div class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-2 mb-2">Workspace</div> |
|
|
<a href="#" class="sidebar-item flex items-center px-3 py-2.5 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100/80 dark:hover:bg-gray-700/50 mb-1 transition-all duration-200"> |
|
|
<i data-feather="inbox" class="sidebar-icon mr-3 w-4 h-4"></i> Inbox |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-2 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 mb-1"> |
|
|
<i data-feather="star" class="sidebar-icon mr-3 w-4 h-4"></i> Favorites |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-2 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 mb-1"> |
|
|
<i data-feather="clock" class="sidebar-icon mr-3 w-4 h-4"></i> Recent |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-2 mb-2">Categories</div> |
|
|
<a href="#" class="sidebar-item flex items-center px-2 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 mb-1"> |
|
|
<i data-feather="file-text" class="sidebar-icon mr-3 w-4 h-4"></i> Notes |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-2 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 mb-1"> |
|
|
<i data-feather="bookmark" class="sidebar-icon mr-3 w-4 h-4"></i> Bookmarks |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-2 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 mb-1"> |
|
|
<i data-feather="check-square" class="sidebar-icon mr-3 w-4 h-4"></i> Tasks |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-2 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 mb-1"> |
|
|
<i data-feather="database" class="sidebar-icon mr-3 w-4 h-4"></i> Databases |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-2 mb-2">Tags</div> |
|
|
<div class="flex flex-wrap px-2 gap-1"> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">Work</span> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Personal</span> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">Ideas</span> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Research</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-100 dark:border-gray-700/50"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 font-bold mr-2">U</div> |
|
|
<div class="flex-1"> |
|
|
<div class="text-sm font-medium">User</div> |
|
|
<div class="text-xs text-gray-500 dark:text-gray-400">Free Plan</div> |
|
|
</div> |
|
|
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"> |
|
|
<i data-feather="settings" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col h-screen overflow-hidden"> |
|
|
|
|
|
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg border-b border-gray-100 dark:border-gray-700/50 p-4 flex items-center justify-between sticky top-0 z-10"> |
|
|
<div class="flex items-center"> |
|
|
<button class="md:hidden mr-4 text-gray-500 dark:text-gray-400"> |
|
|
<i data-feather="menu" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div class="relative w-64"> |
|
|
<input type="text" placeholder="Search or jump to..." class="w-full pl-10 pr-4 py-2 bg-gray-100/70 dark:bg-gray-700/70 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/50 transition-all duration-300"> |
|
|
<i data-feather="search" class="absolute left-3 top-2.5 w-4 h-4 text-gray-500 dark:text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"> |
|
|
<i data-feather="moon" class="w-5 h-5 dark:hidden"></i> |
|
|
<i data-feather="sun" class="w-5 h-5 hidden dark:block"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"> |
|
|
<i data-feather="help-circle" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"> |
|
|
<i data-feather="bell" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto p-6"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-2xl font-bold">Dashboard</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex items-center text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-3 py-1.5 rounded-md"> |
|
|
<i data-feather="grid" class="w-4 h-4 mr-2"></i> View |
|
|
</button> |
|
|
<button class="flex items-center text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-3 py-1.5 rounded-md"> |
|
|
<i data-feather="filter" class="w-4 h-4 mr-2"></i> Filter |
|
|
</button> |
|
|
<button class="flex items-center text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-3 py-1.5 rounded-md"> |
|
|
<i data-feather="sort-asc" class="w-4 h-4 mr-2"></i> Sort |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="text-lg font-medium mb-4">Quick Stats</h3> |
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
<div class="text-center"> |
|
|
<div class="text-2xl font-bold">42</div> |
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Notes</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-2xl font-bold">18</div> |
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Tasks</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-2xl font-bold">27</div> |
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Bookmarks</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="text-lg font-medium mb-4">Recent Notes</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-md bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-300 mr-3"> |
|
|
<i data-feather="file-text" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Project Brainstorm</h4> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Updated 2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-md bg-green-100 dark:bg-green-900 flex items-center justify-center text-green-600 dark:text-green-300 mr-3"> |
|
|
<i data-feather="file-text" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Meeting Notes</h4> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Updated yesterday</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="text-lg font-medium mb-4">Upcoming Tasks</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start"> |
|
|
<input type="checkbox" class="mt-1 mr-3 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700"> |
|
|
<div> |
|
|
<h4 class="font-medium">Review project proposal</h4> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Due tomorrow</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<input type="checkbox" class="mt-1 mr-3 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700"> |
|
|
<div> |
|
|
<h4 class="font-medium">Send client update</h4> |
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Due in 3 days</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-xl font-bold">Your Notes</h3> |
|
|
<button class="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 flex items-center"> |
|
|
View all <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="card-hover bg-white dark:bg-gray-800 rounded-lg shadow-sm p-5 border border-gray-200 dark:border-gray-700"> |
|
|
<div class="flex items-start mb-3"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-md bg-purple-100 dark:bg-purple-900 flex items-center justify-center text-purple-600 dark:text-purple-300 mr-3"> |
|
|
<i data-feather="file-text" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<h4 class="font-medium">Research Findings</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600/90 dark:text-gray-300/90 mb-3 line-clamp-2">Compilation of key findings from market research conducted last quarter with supporting data visualizations.</p> |
|
|
<div class="flex items-center text-xs text-gray-500/80 dark:text-gray-400/80"> |
|
|
<span class="mr-3">Last edited 3 days ago</span> |
|
|
<span class="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700">Research</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card-hover bg-white dark:bg-gray-800 rounded-lg shadow-sm p-5 border border-gray-200 dark:border-gray-700"> |
|
|
<div class="flex items-start mb-3"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-md bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center text-yellow-600 dark:text-yellow-300 mr-3"> |
|
|
<i data-feather="file-text" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<h4 class="font-medium">Personal Goals</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">Annual personal development goals with quarterly milestones and progress tracking.</p> |
|
|
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400"> |
|
|
<span class="mr-3">Last edited 1 week ago</span> |
|
|
<span class="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700">Personal</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Quick Actions</h3> |
|
|
<div class="space-y-3"> |
|
|
<button class="w-full flex items-center justify-between p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl shadow-sm border border-gray-100/50 dark:border-gray-700/30 hover:bg-gray-100/50 dark:hover:bg-gray-700/50 transition-all duration-300"> |
|
|
<div class="flex items-center"> |
|
|
<div class="h-10 w-10 rounded-lg bg-blue-100/70 dark:bg-blue-900/70 flex items-center justify-center text-blue-600 dark:text-blue-300 mr-3 transition-all duration-300"> |
|
|
<i data-feather="file-text" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<span>New Note</span> |
|
|
</div> |
|
|
<i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="h-10 w-10 rounded-md bg-green-100 dark:bg-green-900 flex items-center justify-center text-green-600 dark:text-green-300 mr-3"> |
|
|
<i data-feather="bookmark" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<span>Save Bookmark</span> |
|
|
</div> |
|
|
<i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="h-10 w-10 rounded-md bg-purple-100 dark:bg-purple-900 flex items-center justify-center text-purple-600 dark:text-purple-300 mr-3"> |
|
|
<i data-feather="check-square" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<span>Add Task</span> |
|
|
</div> |
|
|
<i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="h-10 w-10 rounded-md bg-red-100 dark:bg-red-900 flex items-center justify-center text-red-600 dark:text-red-300 mr-3"> |
|
|
<i data-feather="database" class="w-5 h-5"></i> |
|
|
</div> |
|
|
<span>New Database</span> |
|
|
</div> |
|
|
<i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
AOS.init({ |
|
|
duration: 600, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const darkModeToggle = document.querySelector('button[aria-label="Toggle dark mode"]'); |
|
|
|
|
|
|
|
|
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); |
|
|
const currentTheme = localStorage.getItem('theme'); |
|
|
|
|
|
if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('button').forEach(button => { |
|
|
if (button.querySelector('i[data-feather="moon"], i[data-feather="sun"]')) { |
|
|
button.addEventListener('click', function() { |
|
|
const isDark = document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light'); |
|
|
feather.replace(); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('button[aria-label="Toggle mobile menu"]')?.addEventListener('click', function() { |
|
|
|
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
