| <!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> |
|
|
