SecurePad 🔐

End-to-end encrypted note-taking — your thoughts, only yours.

📁 Structure

securepad/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── Icon.jsx            ← SVG icon system
│   │   ├── NoteCard.jsx        ← Note card (grid + list)
│   │   ├── NoteEditor.jsx      ← Rich text editor modal
│   │   ├── NoteView.jsx        ← Note view modal
│   │   ├── SettingsModal.jsx   ← Settings + backup
│   │   ├── SmartGroupedNotes.jsx ← Smart collection groups
│   │   ├── RichToolbar.jsx     ← Editor formatting toolbar
│   │   ├── DrawingCanvas.jsx   ← Sketch/drawing tool
│   │   ├── TemplatePicker.jsx  ← Note template selector
│   │   └── ZenMode.jsx         ← Fullscreen focus mode
│   ├── pages/
│   │   ├── Landing.jsx         ← Marketing homepage
│   │   └── App.jsx             ← Main note-taking app
│   ├── utils/
│   │   ├── crypto.js           ← AES-256-GCM / PBKDF2
│   │   ├── db.js               ← IndexedDB wrapper
│   │   └── constants.js        ← Colors, folders, templates, onboarding
│   ├── styles/
│   │   ├── globals.css         ← CSS variables + shared styles
│   │   ├── app.css             ← App shell + components
│   │   └── landing.css         ← Landing page styles
│   └── main.jsx                ← Entry point + React Router
├── index.html
├── vite.config.js
├── netlify.toml
└── package.json

🔐 Security

• AES-256-GCM encryption on every note
• PBKDF2 key derivation (310,000 iterations)
• Zero-knowledge — passphrase never leaves your device
• Offline-first — IndexedDB, no server required
• Encrypted backups — .enc.json files safe to store anywhere

✨ Features

• Rich text editor (bold, italic, headers, lists, images)
• Drawing canvas with pen + eraser
• 6 note templates
• Zen / focus writing mode
• Nested folders + tags
• Smart collections (auto-grouped by date, type, tag)
• Note linking
• Bulk select & actions (move, tag, delete, pin, archive)
• Drag-and-drop reordering
• Encrypted export/import backup
• Auto-lock after inactivity
• Mobile-first responsive + bottom nav bar