Paper Notes is a beautifully designed, responsive web application that mimics the experience of writing on real paper. Built with pure HTML, CSS, and JavaScript, it provides a seamless note-taking experience with a realistic paper-like interface.
- Realistic Paper Interface: Notes appear as actual paper with lined backgrounds
- Floating Animation: Notes float gently for a dynamic visual experience
- Dark/Light Theme: Toggle between themes for comfortable reading in any lighting
- Responsive Design: Perfectly adapted for desktop, tablet, and mobile devices
- Create & Edit Notes: Simple and intuitive note creation and editing
- Search Functionality: Quickly find notes by title or content
- Pagination: Efficiently browse through large collections of notes
- Real-time Updates: Instant saving and loading of notes
- Single Page Application: Smooth transitions between sections
- Modal Confirmation: Safe deletion with confirmation dialogs
- Notifications: Beautiful toast notifications for user feedback
- Loading States: Visual feedback during operations
- Click "Start" or "New Note" button
- Enter note title and content
- Click "Save Note" to store
- View All Notes: Click "View Notes" to see all your notes
- Search: Use the search box to filter notes
- Edit: Click the edit icon on any note
- Delete: Click the trash icon (requires confirmation)
- Click the moon/sun icon in the header to toggle between dark and light themes
Ctrl + N: Create new noteCtrl + H: Return to home pageEscape: Close modal dialogs
Modify CSS variables in css/style.css:
:root {
--primary-color: #4f46e5;
--primary-dark: #4338ca;
--secondary-color: #6b7280;
--background-light: #f8fafc;
--background-dark: #0f172a;
/* Add your custom colors */
}Made with ❤️ for those who love writing on paper