| <!DOCTYPE html> |
| <html lang="en" class="light"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NoteBlocks - Modular Note Editor</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#eef2ff', |
| 100: '#e0e7ff', |
| 500: '#6366f1', |
| 600: '#4f46e5', |
| 700: '#4338ca', |
| }, |
| secondary: { |
| 100: '#f3f4f6', |
| 200: '#e5e7eb', |
| 600: '#4b5563', |
| 700: '#374151', |
| 900: '#111827', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-secondary-100 dark:bg-secondary-900 min-h-screen transition-colors duration-200"> |
| <custom-navbar></custom-navbar> |
| <main class="container mx-auto px-4 py-8"> |
| <div class="flex justify-between items-center mb-8"> |
| <h1 class="text-3xl font-bold text-secondary-900 dark:text-white">My Notes</h1> |
| <button id="new-note-btn" class="flex items-center gap-2 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition"> |
| <i data-feather="plus"></i> |
| New Note |
| </button> |
| </div> |
|
|
| <div id="notes-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| </div> |
|
|
| <div id="editor-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white dark:bg-secondary-700 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col"> |
| <div class="flex justify-between items-center p-4 border-b border-secondary-200 dark:border-secondary-600"> |
| <input type="text" id="note-title" placeholder="Note title" class="text-xl font-bold bg-transparent outline-none w-full text-secondary-900 dark:text-white"> |
| <div class="flex gap-2"> |
| <button id="save-note" class="p-2 rounded-full hover:bg-secondary-100 dark:hover:bg-secondary-600"> |
| <i data-feather="save"></i> |
| </button> |
| <button id="close-editor" class="p-2 rounded-full hover:bg-secondary-100 dark:hover:bg-secondary-600"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| </div> |
| <div id="editor-toolbar" class="p-2 border-b border-secondary-200 dark:border-secondary-600 flex gap-1 flex-wrap"> |
| <button data-type="paragraph" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600"> |
| <i data-feather="align-left"></i> |
| </button> |
| <button data-type="heading" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600"> |
| <i data-feather="type"></i> |
| </button> |
| <button data-type="list" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600"> |
| <i data-feather="list"></i> |
| </button> |
| <button data-type="image" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600"> |
| <i data-feather="image"></i> |
| </button> |
| <button data-type="quote" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600"> |
| <i data-feather="quote"></i> |
| </button> |
| <button data-type="code" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600"> |
| <i data-feather="code"></i> |
| </button> |
| </div> |
| <div id="editor-content" class="p-4 overflow-y-auto flex-1 outline-none" contenteditable="true"> |
| |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
