Abhi13-coder/noteblocks-modular-note-magic
0
1<!DOCTYPE html>2<html lang="en" class="light">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>NoteBlocks - Modular Note Editor</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 primary: {18 50: '#eef2ff',19 100: '#e0e7ff',20 500: '#6366f1',21 600: '#4f46e5',22 700: '#4338ca',23 },24 secondary: {25 100: '#f3f4f6',26 200: '#e5e7eb',27 600: '#4b5563',28 700: '#374151',29 900: '#111827',30 }31 }32 }33 }34 }35 </script>36</head>37<body class="bg-secondary-100 dark:bg-secondary-900 min-h-screen transition-colors duration-200">38 <custom-navbar></custom-navbar>39 <main class="container mx-auto px-4 py-8">40 <div class="flex justify-between items-center mb-8">41 <h1 class="text-3xl font-bold text-secondary-900 dark:text-white">My Notes</h1>42 <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">43 <i data-feather="plus"></i>44 New Note45 </button>46 </div>47 48 <div id="notes-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">49 <!-- Notes will be dynamically inserted here -->50 </div>51 52 <div id="editor-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">53 <div class="bg-white dark:bg-secondary-700 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">54 <div class="flex justify-between items-center p-4 border-b border-secondary-200 dark:border-secondary-600">55 <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">56 <div class="flex gap-2">57 <button id="save-note" class="p-2 rounded-full hover:bg-secondary-100 dark:hover:bg-secondary-600">58 <i data-feather="save"></i>59 </button>60 <button id="close-editor" class="p-2 rounded-full hover:bg-secondary-100 dark:hover:bg-secondary-600">61 <i data-feather="x"></i>62 </button>63 </div>64 </div>65 <div id="editor-toolbar" class="p-2 border-b border-secondary-200 dark:border-secondary-600 flex gap-1 flex-wrap">66 <button data-type="paragraph" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600">67 <i data-feather="align-left"></i>68 </button>69 <button data-type="heading" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600">70 <i data-feather="type"></i>71 </button>72 <button data-type="list" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600">73 <i data-feather="list"></i>74 </button>75 <button data-type="image" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600">76 <i data-feather="image"></i>77 </button>78 <button data-type="quote" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600">79 <i data-feather="quote"></i>80 </button>81 <button data-type="code" class="p-2 rounded hover:bg-secondary-100 dark:hover:bg-secondary-600">82 <i data-feather="code"></i>83 </button>84 </div>85 <div id="editor-content" class="p-4 overflow-y-auto flex-1 outline-none" contenteditable="true">86 <!-- Editor content goes here -->87 </div>88 </div>89 </div>90 </main>91 92 <script src="components/navbar.js"></script>93 <script src="script.js"></script>94 <script>95 feather.replace();96 </script>97<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>98</body>99</html>