Add 2 files

index.html

@@ -6,45 +6,71 @@
     <title>Nexus Notes - Modern Note Taking</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <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>
     <style>
         .markdown-content h1 {
-            @apply text-2xl font-bold my-4;
+            @apply text-2xl font-bold my-4 text-gray-900 dark:text-white;
         }
         .markdown-content h2 {
-            @apply text-xl font-bold my-3;
+            @apply text-xl font-bold my-3 text-gray-800 dark:text-gray-200;
         }
         .markdown-content p {
-            @apply my-2;
+            @apply my-2 text-gray-700 dark:text-gray-300;
         }
         .markdown-content ul {
-            @apply list-disc pl-5 my-2;
+            @apply list-disc pl-5 my-2 text-gray-700 dark:text-gray-300;
         }
         .markdown-content ol {
-            @apply list-decimal pl-5 my-2;
+            @apply list-decimal pl-5 my-2 text-gray-700 dark:text-gray-300;
         }
         .markdown-content pre {
-            @apply bg-gray-100 p-3 rounded my-2 overflow-x-auto;
+            @apply bg-gray-100 dark:bg-gray-700 p-3 rounded my-2 overflow-x-auto text-gray-800 dark:text-gray-200;
         }
         .markdown-content code {
-            @apply bg-gray-100 px-1 rounded text-sm;
+            @apply bg-gray-100 dark:bg-gray-700 px-1 rounded text-sm text-gray-800 dark:text-gray-200;
         }
         .markdown-content blockquote {
-            @apply border-l-4 border-gray-300 pl-4 italic my-2;
+            @apply border-l-4 border-primary-500 pl-4 italic my-2 text-gray-600 dark:text-gray-400;
+        }
+        .markdown-content a {
+            @apply text-primary-600 dark:text-primary-400 hover:underline;
         }
         
         /* Custom scrollbar */
         ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
+            width: 6px;
+            height: 6px;
         }
         ::-webkit-scrollbar-track {
-            @apply bg-gray-100;
+            @apply bg-gray-200 dark:bg-gray-800;
         }
         ::-webkit-scrollbar-thumb {
-            @apply bg-gray-400 rounded;
+            @apply bg-gray-400 dark:bg-gray-600 rounded;
         }
         ::-webkit-scrollbar-thumb:hover {
-            @apply bg-gray-500;
+            @apply bg-gray-500 dark:bg-gray-500;
         }
         
         /* Animation for note cards */
@@ -56,134 +82,178 @@
             animation: fadeIn 0.3s ease-out forwards;
         }
         
-        /* Split pane */
-        .split-pane {
-            display: flex;
-            width: 100%;
-            height: calc(100vh - 60px);
+        /* Mobile menu transition */
+        .mobile-menu {
+            transition: transform 0.3s ease-in-out;
         }
-        .split-pane-left {
-            @apply border-r border-gray-200;
-            width: 25%;
-            min-width: 250px;
-            overflow-y: auto;
+        .mobile-menu.hidden {
+            transform: translateX(-100%);
         }
-        .split-pane-right {
-            flex: 1;
-            overflow-y: auto;
+        .mobile-menu.shown {
+            transform: translateX(0);
         }
         
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            .split-pane {
-                flex-direction: column;
-            }
-            .split-pane-left {
-                width: 100%;
-                height: auto;
-                max-height: 40vh;
-                border-right: none;
-                border-bottom: 1px solid #e5e7eb;
-            }
-            .split-pane-right {
-                height: 60vh;
+        /* Editor height */
+        .editor-container {
+            height: calc(100vh - 180px);
+        }
+        @media (min-width: 768px) {
+            .editor-container {
+                height: calc(100vh - 140px);
             }
         }
     </style>
 </head>
-<body class="bg-gray-50 text-gray-800 font-sans">
+<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-200">
     <div class="flex flex-col h-screen">
+        <!-- Mobile Menu Button -->
+        <div class="md:hidden fixed bottom-4 right-4 z-50">
+            <button id="mobileMenuButton" class="bg-primary-600 text-white p-4 rounded-full shadow-lg hover:bg-primary-700 transition">
+                <i class="fas fa-bars text-xl"></i>
+            </button>
+        </div>
+        
+        <!-- Mobile Menu -->
+        <div id="mobileMenu" class="mobile-menu hidden md:hidden fixed inset-0 z-40 bg-gray-100 dark:bg-gray-800 w-64 pt-4 pb-20 px-4 overflow-y-auto">
+            <div class="flex items-center justify-between mb-6">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-cube text-2xl text-primary-600"></i>
+                    <h1 class="text-xl font-bold">Nexus Notes</h1>
+                </div>
+                <button id="closeMobileMenu" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            
+            <div class="mb-6">
+                <button id="mobileNewNoteBtn" class="w-full bg-primary-600 text-white px-4 py-2 rounded-md font-medium hover:bg-primary-700 transition flex items-center justify-center">
+                    <i class="fas fa-plus mr-2"></i> New Note
+                </button>
+            </div>
+            
+            <div class="relative mb-6">
+                <input type="text" id="mobileSearchNotes" placeholder="Search notes..." 
+                       class="w-full p-2 pl-10 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-gray-700">
+                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+            </div>
+            
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="font-semibold text-gray-700 dark:text-gray-300">My Notes</h2>
+                <div class="flex space-x-2">
+                    <button id="mobileSortDateBtn" class="p-1 text-primary-600 dark:text-primary-400" title="Sort by date">
+                        <i class="fas fa-calendar"></i>
+                    </button>
+                    <button id="mobileSortAlphaBtn" class="p-1 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400" title="Sort alphabetically">
+                        <i class="fas fa-sort-alpha-down"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <div id="mobileNoteList" class="divide-y divide-gray-200 dark:divide-gray-700">
+                <!-- Notes will be dynamically added here -->
+                <div class="p-4 text-center text-gray-500 dark:text-gray-400">
+                    No notes yet. Create your first note!
+                </div>
+            </div>
+        </div>
+        
+        <!-- Overlay for mobile menu -->
+        <div id="mobileMenuOverlay" class="hidden fixed inset-0 z-30 bg-black bg-opacity-50"></div>
+
         <!-- Header -->
-        <header class="bg-indigo-600 text-white p-4 shadow-md">
+        <header class="bg-primary-600 text-white p-4 shadow-md">
             <div class="container mx-auto flex justify-between items-center">
                 <div class="flex items-center space-x-3">
                     <i class="fas fa-cube text-2xl"></i>
                     <h1 class="text-xl font-bold">Nexus Notes</h1>
                 </div>
                 <div class="flex items-center space-x-4">
-                    <button id="darkModeToggle" class="p-2 rounded-full hover:bg-indigo-500 transition">
-                        <i class="fas fa-moon"></i>
+                    <button id="darkModeToggle" class="p-2 rounded-full hover:bg-primary-500 transition">
+                        <i class="fas fa-moon dark:hidden"></i>
+                        <i class="fas fa-sun hidden dark:block"></i>
                     </button>
-                    <button id="newNoteBtn" class="bg-white text-indigo-600 px-4 py-2 rounded-md font-medium hover:bg-indigo-50 transition flex items-center">
-                        <i class="fas fa-plus mr-2"></i> New Note
+                    <button id="newNoteBtn" class="bg-white text-primary-600 px-4 py-2 rounded-md font-medium hover:bg-primary-50 transition flex items-center">
+                        <i class="fas fa-plus mr-2"></i> <span class="hidden md:inline">New Note</span>
                     </button>
                 </div>
             </div>
         </header>
 
         <!-- Main Content -->
-        <div class="split-pane container mx-auto">
-            <!-- Left Pane - Note List -->
-            <div class="split-pane-left bg-white">
-                <div class="p-4 border-b border-gray-200 sticky top-0 bg-white z-10">
-                    <div class="relative">
+        <div class="flex flex-1 overflow-hidden">
+            <!-- Left Pane - Note List (Desktop) -->
+            <div class="hidden md:flex md:w-1/3 lg:w-1/4 xl:w-1/5 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex-col overflow-y-auto">
+                <div class="p-4 sticky top-0 bg-white dark:bg-gray-800 z-10">
+                    <div class="relative mb-4">
                         <input type="text" id="searchNotes" placeholder="Search notes..." 
-                               class="w-full p-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                               class="w-full p-2 pl-10 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-gray-700">
                         <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                     </div>
-                    <div class="flex justify-between items-center mt-4">
-                        <h2 class="font-semibold text-gray-700">My Notes</h2>
+                    <div class="flex justify-between items-center">
+                        <h2 class="font-semibold text-gray-700 dark:text-gray-300">My Notes</h2>
                         <div class="flex space-x-2">
-                            <button id="sortDateBtn" class="p-1 text-gray-500 hover:text-indigo-600" title="Sort by date">
+                            <button id="sortDateBtn" class="p-1 text-primary-600 dark:text-primary-400" title="Sort by date">
                                 <i class="fas fa-calendar"></i>
                             </button>
-                            <button id="sortAlphaBtn" class="p-1 text-gray-500 hover:text-indigo-600" title="Sort alphabetically">
+                            <button id="sortAlphaBtn" class="p-1 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400" title="Sort alphabetically">
                                 <i class="fas fa-sort-alpha-down"></i>
                             </button>
                         </div>
                     </div>
                 </div>
-                <div id="noteList" class="divide-y divide-gray-100">
+                <div id="noteList" class="divide-y divide-gray-200 dark:divide-gray-700 flex-1 overflow-y-auto">
                     <!-- Notes will be dynamically added here -->
-                    <div class="p-4 text-center text-gray-500">
+                    <div class="p-4 text-center text-gray-500 dark:text-gray-400">
                         No notes yet. Create your first note!
                     </div>
                 </div>
             </div>
 
             <!-- Right Pane - Note Editor -->
-            <div class="split-pane-right bg-white">
-                <div id="emptyState" class="h-full flex flex-col items-center justify-center text-gray-500">
+            <div class="flex-1 flex flex-col bg-white dark:bg-gray-800 overflow-hidden">
+                <div id="emptyState" class="h-full flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 p-4">
                     <i class="fas fa-sticky-note text-5xl mb-4 opacity-30"></i>
                     <h2 class="text-xl font-medium mb-2">No Note Selected</h2>
-                    <p class="mb-4">Select a note from the sidebar or create a new one</p>
-                    <button id="emptyNewNoteBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-md font-medium hover:bg-indigo-700 transition flex items-center">
+                    <p class="mb-4 text-center">Select a note from the sidebar or create a new one</p>
+                    <button id="emptyNewNoteBtn" class="bg-primary-600 text-white px-4 py-2 rounded-md font-medium hover:bg-primary-700 transition flex items-center">
                         <i class="fas fa-plus mr-2"></i> Create New Note
                     </button>
                 </div>
                 
                 <div id="noteEditor" class="h-full hidden flex-col">
-                    <div class="p-4 border-b border-gray-200 sticky top-0 bg-white z-10 flex justify-between items-center">
+                    <div class="p-4 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-800 z-10 flex justify-between items-center">
                         <input type="text" id="noteTitle" placeholder="Note title" 
-                               class="text-xl font-bold w-full focus:outline-none">
+                               class="text-xl font-bold w-full focus:outline-none bg-transparent">
                         <div class="flex space-x-2">
-                            <button id="saveNoteBtn" class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-gray-100 rounded-full transition" title="Save">
+                            <button id="saveNoteBtn" class="p-2 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition" title="Save">
                                 <i class="fas fa-save"></i>
                             </button>
-                            <button id="deleteNoteBtn" class="p-2 text-gray-500 hover:text-red-600 hover:bg-gray-100 rounded-full transition" title="Delete">
+                            <button id="deleteNoteBtn" class="p-2 text-gray-500 dark:text-gray-400 hover:text-red-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition" title="Delete">
                                 <i class="fas fa-trash"></i>
                             </button>
-                            <button id="exportNoteBtn" class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-gray-100 rounded-full transition" title="Export">
+                            <button id="exportNoteBtn" class="p-2 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition" title="Export">
                                 <i class="fas fa-file-export"></i>
                             </button>
                         </div>
                     </div>
                     
-                    <div class="flex border-b border-gray-200">
-                        <button id="writeTab" class="px-4 py-2 font-medium border-b-2 border-indigo-600 text-indigo-600">Write</button>
-                        <button id="previewTab" class="px-4 py-2 font-medium text-gray-500 hover:text-gray-700">Preview</button>
-                    </div>
-                    
-                    <div id="writePane" class="flex-1 overflow-auto">
-                        <textarea id="noteContent" class="w-full h-full p-4 focus:outline-none resize-none font-mono" 
-                                  placeholder="Start writing your note here... Markdown is supported!"></textarea>
+                    <div class="flex border-b border-gray-200 dark:border-gray-700">
+                        <button id="writeTab" class="px-4 py-2 font-medium border-b-2 border-primary-600 text-primary-600 dark:text-primary-400">Write</button>
+                        <button id="previewTab" class="px-4 py-2 font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Preview</button>
                     </div>
                     
-                    <div id="previewPane" class="flex-1 overflow-auto p-4 hidden markdown-content">
-                        <!-- Markdown preview will be rendered here -->
+                    <div class="editor-container flex flex-col">
+                        <div id="writePane" class="flex-1 overflow-auto">
+                            <textarea id="noteContent" class="w-full h-full p-4 focus:outline-none resize-none font-mono bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" 
+                                      placeholder="Start writing your note here... Markdown is supported!"></textarea>
+                        </div>
+                        
+                        <div id="previewPane" class="flex-1 overflow-auto p-4 hidden markdown-content bg-white dark:bg-gray-800">
+                            <!-- Markdown preview will be rendered here -->
+                        </div>
                     </div>
                     
-                    <div class="p-2 border-t border-gray-200 bg-gray-50 text-sm text-gray-500 flex justify-between items-center">
+                    <div class="p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-sm text-gray-500 dark:text-gray-400 flex justify-between items-center">
                         <div id="wordCount">0 words</div>
                         <div id="lastSaved" class="text-xs">Not saved yet</div>
                     </div>
@@ -198,10 +268,15 @@
             const darkModeToggle = document.getElementById('darkModeToggle');
             const newNoteBtn = document.getElementById('newNoteBtn');
             const emptyNewNoteBtn = document.getElementById('emptyNewNoteBtn');
+            const mobileNewNoteBtn = document.getElementById('mobileNewNoteBtn');
             const searchNotes = document.getElementById('searchNotes');
+            const mobileSearchNotes = document.getElementById('mobileSearchNotes');
             const sortDateBtn = document.getElementById('sortDateBtn');
             const sortAlphaBtn = document.getElementById('sortAlphaBtn');
+            const mobileSortDateBtn = document.getElementById('mobileSortDateBtn');
+            const mobileSortAlphaBtn = document.getElementById('mobileSortAlphaBtn');
             const noteList = document.getElementById('noteList');
+            const mobileNoteList = document.getElementById('mobileNoteList');
             const emptyState = document.getElementById('emptyState');
             const noteEditor = document.getElementById('noteEditor');
             const noteTitle = document.getElementById('noteTitle');
@@ -215,6 +290,10 @@
             const previewPane = document.getElementById('previewPane');
             const wordCount = document.getElementById('wordCount');
             const lastSaved = document.getElementById('lastSaved');
+            const mobileMenuButton = document.getElementById('mobileMenuButton');
+            const mobileMenu = document.getElementById('mobileMenu');
+            const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+            const closeMobileMenu = document.getElementById('closeMobileMenu');
             
             // State
             let notes = JSON.parse(localStorage.getItem('nexus-notes')) || [];
@@ -224,51 +303,53 @@
             
             // Initialize
             if (darkMode) {
-                enableDarkMode();
+                document.documentElement.classList.add('dark');
             }
             renderNoteList();
+            renderMobileNoteList();
             
             // Event Listeners
             darkModeToggle.addEventListener('click', toggleDarkMode);
             newNoteBtn.addEventListener('click', createNewNote);
             emptyNewNoteBtn.addEventListener('click', createNewNote);
+            mobileNewNoteBtn.addEventListener('click', () => {
+                createNewNote();
+                hideMobileMenu();
+            });
             searchNotes.addEventListener('input', filterNotes);
+            mobileSearchNotes.addEventListener('input', filterMobileNotes);
             sortDateBtn.addEventListener('click', () => {
                 sortByDate = true;
                 renderNoteList();
-                sortDateBtn.classList.remove('text-gray-500');
-                sortDateBtn.classList.add('text-indigo-600');
-                sortAlphaBtn.classList.remove('text-indigo-600');
-                sortAlphaBtn.classList.add('text-gray-500');
+                updateSortButtons();
             });
             sortAlphaBtn.addEventListener('click', () => {
                 sortByDate = false;
                 renderNoteList();
-                sortAlphaBtn.classList.remove('text-gray-500');
-                sortAlphaBtn.classList.add('text-indigo-600');
-                sortDateBtn.classList.remove('text-indigo-600');
-                sortDateBtn.classList.add('text-gray-500');
+                updateSortButtons();
+            });
+            mobileSortDateBtn.addEventListener('click', () => {
+                sortByDate = true;
+                renderMobileNoteList();
+                updateMobileSortButtons();
+            });
+            mobileSortAlphaBtn.addEventListener('click', () => {
+                sortByDate = false;
+                renderMobileNoteList();
+                updateMobileSortButtons();
             });
             saveNoteBtn.addEventListener('click', saveCurrentNote);
             deleteNoteBtn.addEventListener('click', deleteCurrentNote);
             exportNoteBtn.addEventListener('click', exportCurrentNote);
             writeTab.addEventListener('click', () => {
-                writePane.classList.remove('hidden');
-                previewPane.classList.add('hidden');
-                writeTab.classList.add('border-indigo-600', 'text-indigo-600');
-                writeTab.classList.remove('text-gray-500');
-                previewTab.classList.remove('border-indigo-600', 'text-indigo-600');
-                previewTab.classList.add('text-gray-500');
+                showWritePane();
             });
             previewTab.addEventListener('click', () => {
-                writePane.classList.add('hidden');
-                previewPane.classList.remove('hidden');
-                previewTab.classList.add('border-indigo-600', 'text-indigo-600');
-                previewTab.classList.remove('text-gray-500');
-                writeTab.classList.remove('border-indigo-600', 'text-indigo-600');
-                writeTab.classList.add('text-gray-500');
-                renderMarkdownPreview();
+                showPreviewPane();
             });
+            mobileMenuButton.addEventListener('click', showMobileMenu);
+            mobileMenuOverlay.addEventListener('click', hideMobileMenu);
+            closeMobileMenu.addEventListener('click', hideMobileMenu);
             
             // Auto-save when typing
             let saveTimeout;
@@ -288,46 +369,54 @@
                 darkMode = !darkMode;
                 localStorage.setItem('darkMode', darkMode);
                 if (darkMode) {
-                    enableDarkMode();
+                    document.documentElement.classList.add('dark');
                 } else {
-                    disableDarkMode();
+                    document.documentElement.classList.remove('dark');
                 }
             }
             
-            function enableDarkMode() {
-                document.body.classList.add('bg-gray-900', 'text-gray-100');
-                document.body.classList.remove('bg-gray-50', 'text-gray-800');
-                document.querySelectorAll('.split-pane-left, .split-pane-right, #noteEditor').forEach(el => {
-                    el.classList.add('bg-gray-800');
-                    el.classList.remove('bg-white');
-                });
-                document.querySelectorAll('.border-gray-200').forEach(el => {
-                    el.classList.add('border-gray-700');
-                    el.classList.remove('border-gray-200');
-                });
-                document.querySelectorAll('.bg-gray-100').forEach(el => {
-                    el.classList.add('bg-gray-700');
-                    el.classList.remove('bg-gray-100');
-                });
-                darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+            function updateSortButtons() {
+                if (sortByDate) {
+                    sortDateBtn.classList.remove('text-gray-500', 'dark:text-gray-400');
+                    sortDateBtn.classList.add('text-primary-600', 'dark:text-primary-400');
+                    sortAlphaBtn.classList.remove('text-primary-600', 'dark:text-primary-400');
+                    sortAlphaBtn.classList.add('text-gray-500', 'dark:text-gray-400');
+                } else {
+                    sortAlphaBtn.classList.remove('text-gray-500', 'dark:text-gray-400');
+                    sortAlphaBtn.classList.add('text-primary-600', 'dark:text-primary-400');
+                    sortDateBtn.classList.remove('text-primary-600', 'dark:text-primary-400');
+                    sortDateBtn.classList.add('text-gray-500', 'dark:text-gray-400');
+                }
             }
             
-            function disableDarkMode() {
-                document.body.classList.remove('bg-gray-900', 'text-gray-100');
-                document.body.classList.add('bg-gray-50', 'text-gray-800');
-                document.querySelectorAll('.split-pane-left, .split-pane-right, #noteEditor').forEach(el => {
-                    el.classList.remove('bg-gray-800');
-                    el.classList.add('bg-white');
-                });
-                document.querySelectorAll('.border-gray-700').forEach(el => {
-                    el.classList.remove('border-gray-700');
-                    el.classList.add('border-gray-200');
-                });
-                document.querySelectorAll('.bg-gray-700').forEach(el => {
-                    el.classList.remove('bg-gray-700');
-                    el.classList.add('bg-gray-100');
-                });
-                darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+            function updateMobileSortButtons() {
+                if (sortByDate) {
+                    mobileSortDateBtn.classList.remove('text-gray-500', 'dark:text-gray-400');
+                    mobileSortDateBtn.classList.add('text-primary-600', 'dark:text-primary-400');
+                    mobileSortAlphaBtn.classList.remove('text-primary-600', 'dark:text-primary-400');
+                    mobileSortAlphaBtn.classList.add('text-gray-500', 'dark:text-gray-400');
+                } else {
+                    mobileSortAlphaBtn.classList.remove('text-gray-500', 'dark:text-gray-400');
+                    mobileSortAlphaBtn.classList.add('text-primary-600', 'dark:text-primary-400');
+                    mobileSortDateBtn.classList.remove('text-primary-600', 'dark:text-primary-400');
+                    mobileSortDateBtn.classList.add('text-gray-500', 'dark:text-gray-400');
+                }
+            }
+            
+            function showMobileMenu() {
+                mobileMenu.classList.remove('hidden');
+                mobileMenuOverlay.classList.remove('hidden');
+                setTimeout(() => {
+                    mobileMenu.classList.add('shown');
+                }, 10);
+            }
+            
+            function hideMobileMenu() {
+                mobileMenu.classList.remove('shown');
+                setTimeout(() => {
+                    mobileMenu.classList.add('hidden');
+                    mobileMenuOverlay.classList.add('hidden');
+                }, 300);
             }
             
             function createNewNote() {
@@ -342,6 +431,7 @@
                 notes.unshift(newNote);
                 saveNotes();
                 renderNoteList();
+                renderMobileNoteList();
                 openNote(newNote.id);
                 
                 // Focus on title field
@@ -356,10 +446,42 @@
             }
             
             function renderNoteList() {
+                let filteredNotes = getFilteredNotes();
+                
+                // Render
+                if (filteredNotes.length === 0) {
+                    noteList.innerHTML = `
+                        <div class="p-4 text-center text-gray-500 dark:text-gray-400">
+                            ${searchNotes.value ? 'No notes found matching your search.' : 'No notes yet. Create your first note!'}
+                        </div>
+                    `;
+                    return;
+                }
+                
+                noteList.innerHTML = filteredNotes.map(note => createNoteCardHTML(note)).join('');
+            }
+            
+            function renderMobileNoteList() {
+                let filteredNotes = getFilteredNotes(true);
+                
+                // Render
+                if (filteredNotes.length === 0) {
+                    mobileNoteList.innerHTML = `
+                        <div class="p-4 text-center text-gray-500 dark:text-gray-400">
+                            ${mobileSearchNotes.value ? 'No notes found matching your search.' : 'No notes yet. Create your first note!'}
+                        </div>
+                    `;
+                    return;
+                }
+                
+                mobileNoteList.innerHTML = filteredNotes.map(note => createNoteCardHTML(note, true)).join('');
+            }
+            
+            function getFilteredNotes(forMobile = false) {
                 let filteredNotes = [...notes];
                 
                 // Filter by search
-                const searchTerm = searchNotes.value.toLowerCase();
+                const searchTerm = forMobile ? mobileSearchNotes.value.toLowerCase() : searchNotes.value.toLowerCase();
                 if (searchTerm) {
                     filteredNotes = filteredNotes.filter(note => 
                         note.title.toLowerCase().includes(searchTerm) || 
@@ -374,29 +496,26 @@
                     filteredNotes.sort((a, b) => a.title.localeCompare(b.title));
                 }
                 
-                // Render
-                if (filteredNotes.length === 0) {
-                    noteList.innerHTML = `
-                        <div class="p-4 text-center text-gray-500">
-                            No notes found matching your search.
-                        </div>
-                    `;
-                    return;
-                }
+                return filteredNotes;
+            }
+            
+            function createNoteCardHTML(note, forMobile = false) {
+                const isActive = currentNoteId === note.id;
+                const onClick = forMobile ? `openNote('${note.id}'); hideMobileMenu();` : `openNote('${note.id}')`;
                 
-                noteList.innerHTML = filteredNotes.map(note => `
-                    <div class="note-card cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition ${currentNoteId === note.id ? 'bg-indigo-50 dark:bg-indigo-900' : ''}" 
-                         data-id="${note.id}" onclick="openNote('${note.id}')">
+                return `
+                    <div class="note-card cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition ${isActive ? 'bg-primary-50 dark:bg-gray-700' : ''}" 
+                         data-id="${note.id}" onclick="${onClick}">
                         <div class="p-4">
-                            <h3 class="font-medium truncate">${note.title || 'Untitled Note'}</h3>
-                            <p class="text-sm text-gray-500 dark:text-gray-400 truncate mt-1">${note.content.substring(0, 100)}${note.content.length > 100 ? '...' : ''}</p>
-                            <div class="flex justify-between items-center mt-2 text-xs text-gray-400 dark:text-gray-500">
+                            <h3 class="font-medium truncate ${isActive ? 'text-primary-600 dark:text-primary-400' : 'text-gray-800 dark:text-gray-200'}">${note.title || 'Untitled Note'}</h3>
+                            <p class="text-sm ${isActive ? 'text-primary-500 dark:text-primary-300' : 'text-gray-500 dark:text-gray-400'} truncate mt-1">${note.content.substring(0, 100)}${note.content.length > 100 ? '...' : ''}</p>
+                            <div class="flex justify-between items-center mt-2 text-xs ${isActive ? 'text-primary-400 dark:text-primary-300' : 'text-gray-400 dark:text-gray-500'}">
                                 <span>${formatDate(note.updatedAt)}</span>
                                 <span>${countWords(note.content)} words</span>
                             </div>
                         </div>
                     </div>
-                `).join('');
+                `;
             }
             
             function openNote(id) {
@@ -411,22 +530,27 @@
                 updateWordCount();
                 lastSaved.textContent = `Last saved: ${formatDate(note.updatedAt)}`;
                 
-                // Highlight active note in list
+                // Highlight active note in lists
+                highlightActiveNote();
+                
+                // Switch to write tab
+                showWritePane();
+            }
+            
+            function highlightActiveNote() {
                 document.querySelectorAll('.note-card').forEach(card => {
-                    if (card.dataset.id === id) {
-                        card.classList.add('bg-indigo-50', 'dark:bg-indigo-900');
+                    if (card.dataset.id === currentNoteId) {
+                        card.classList.add('bg-primary-50', 'dark:bg-gray-700');
+                        card.querySelector('h3').classList.add('text-primary-600', 'dark:text-primary-400');
+                        card.querySelector('p').classList.add('text-primary-500', 'dark:text-primary-300');
+                        card.querySelector('div').classList.add('text-primary-400', 'dark:text-primary-300');
                     } else {
-                        card.classList.remove('bg-indigo-50', 'dark:bg-indigo-900');
+                        card.classList.remove('bg-primary-50', 'dark:bg-gray-700');
+                        card.querySelector('h3').classList.remove('text-primary-600', 'dark:text-primary-400');
+                        card.querySelector('p').classList.remove('text-primary-500', 'dark:text-primary-300');
+                        card.querySelector('div').classList.remove('text-primary-400', 'dark:text-primary-300');
                     }
                 });
-                
-                // Switch to write tab
-                writePane.classList.remove('hidden');
-                previewPane.classList.add('hidden');
-                writeTab.classList.add('border-indigo-600', 'text-indigo-600');
-                writeTab.classList.remove('text-gray-500');
-                previewTab.classList.remove('border-indigo-600', 'text-indigo-600');
-                previewTab.classList.add('text-gray-500');
             }
             
             function saveCurrentNote() {
@@ -444,6 +568,7 @@
                 
                 saveNotes();
                 renderNoteList();
+                renderMobileNoteList();
                 lastSaved.textContent = `Last saved: ${formatDate(new Date().toISOString())}`;
             }
             
@@ -454,6 +579,7 @@
                     notes = notes.filter(note => note.id !== currentNoteId);
                     saveNotes();
                     renderNoteList();
+                    renderMobileNoteList();
                     
                     // Reset editor
                     currentNoteId = null;
@@ -483,6 +609,10 @@
                 renderNoteList();
             }
             
+            function filterMobileNotes() {
+                renderMobileNoteList();
+            }
+            
             function updateWordCount() {
                 const text = noteContent.value;
                 wordCount.textContent = `${countWords(text)} words`;
@@ -507,47 +637,20 @@
                 return date.toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' });
             }
             
-            function renderMarkdownPreview() {
-                if (!currentNoteId) return;
-                
-                const note = notes.find(n => n.id === currentNoteId);
-                if (!note) return;
-                
-                // Simple markdown rendering (for demo purposes)
-                let html = note.content
-                    // Headers
-                    .replace(/^# (.*$)/gm, '<h1>$1</h1>')
-                    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
-                    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
-                    // Bold
-                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-                    // Italic
-                    .replace(/\*(.*?)\*/g, '<em>$1</em>')
-                    // Links
-                    .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" class="text-indigo-600 hover:underline">$1</a>')
-                    // Lists
-                    .replace(/^\s*\*\s(.*$)/gm, '<li>$1</li>')
-                    .replace(/^\s*-\s(.*$)/gm, '<li>$1</li>')
-                    // Code blocks
-                    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
-                    // Inline code
-                    .replace(/`(.*?)`/g, '<code>$1</code>')
-                    // Blockquotes
-                    .replace(/^>\s(.*$)/gm, '<blockquote>$1</blockquote>')
-                    // Paragraphs
-                    .replace(/^(?!<[a-z])(.*$)/gm, function(m) {
-                        return m.trim() ? '<p>' + m + '</p>' : '';
-                    });
-                
-                // Handle line breaks
-                html = html.replace(/\n/g, '<br>');
-                
-                previewPane.innerHTML = html;
+            function showWritePane() {
+                writePane.classList.remove('hidden');
+                previewPane.classList.add('hidden');
+                writeTab.classList.add('border-primary-600', 'text-primary-600', 'dark:text-primary-400');
+                writeTab.classList.remove('text-gray-500', 'dark:text-gray-400');
+                previewTab.classList.remove('border-primary-600', 'text-primary-600', 'dark:text-primary-400');
+                previewTab.classList.add('text-gray-500', 'dark:text-gray-400');
             }
             
-            // Make functions available globally for inline event handlers
-            window.openNote = openNote;
-        });
-    </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yasarefe/nexus-notes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+            function showPreviewPane() {
+                writePane.classList.add('hidden');
+                previewPane.classList.remove('hidden');
+                previewTab.classList.add('border-primary-600', 'text-primary-600', 'dark:text-primary-400');
+                previewTab.classList.remove('text-gray-500', 'dark:text-gray-400');
+                writeTab.classList.remove('border-primary-600', 'text-primary-600', 'dark:text-primary-400');
+                writeTab.classList.add('text-gray-500', 'dark:text-gray-
 </html>

prompts.txt

@@ -1 +1,2 @@
-Bana Obsidian Note benzeri modern ve ayrıca gelişmiş, responsive tasarıma sahip olan bir uygulama oluştur. Başta hiçbir not vb. bulunmasın ve biz kaydedelim. Eklediğin tüm özellikler yapmacık olmasın ve hepsi çalışsın.
+Bana Obsidian Note benzeri modern ve ayrıca gelişmiş, responsive tasarıma sahip olan bir uygulama oluştur. Başta hiçbir not vb. bulunmasın ve biz kaydedelim. Eklediğin tüm özellikler yapmacık olmasın ve hepsi çalışsın.
+Uygulama mobile tam olarak uyumlu değil ve çok kötü bir görünümü var. Örnek olarak temayı değiştirme, notlarım kısmı ve uygulama içi renk uyumsuzluğu bunlardan sadece birkaçı. Bunları düzeltmeni ve daha iyi bir yapı haline getirmeni rica ediyorum.