📝 NoteOS — Futuristic Smart Notes Workspace

A premium cinematic notes workspace built with pure HTML, CSS & JavaScript. No frameworks. Fully responsive PWA. Works offline.

---

✨ What Makes This Special

NoteOS is not a simple notes app. It's a full cinematic productivity operating system that feels like a mix of Notion + Obsidian + a futuristic OS.

---

🚀 All Features

📝 Core Notes

Feature	Details
Create / Edit	Click + New Note or press Ctrl+N
Auto-save	Saves 600ms after you stop typing, shows "Saving…" → "Saved ✓"
Delete	Soft-delete to Trash, with animated card exit
Restore	One-click restore from Trash
Permanent delete	Confirm modal before permanent removal
Pin notes	Pinned notes always appear first
Favorite notes	Star notes for quick access in Favorites view

📐 Editor

Feature	Details
Markdown support	H1–H3, bold, italic, strikethrough, code, code blocks, lists, checklists, blockquotes, links, HR
Live preview	Split-screen — editor left, rendered preview right
Markdown toolbar	One-click formatting buttons for all markdown
Note colors	5 accent colors — Default, Rose, Amber, Emerald, Sky
Word counter	Live word & character count in status bar
Fullscreen mode	⛶ button or press Esc to exit
Copy note	Copies title + content to clipboard
Print note	Generates clean HTML print view

🗂 Organization

Feature	Details
Categories	Study, Work, Personal, Ideas, Projects
Tags	Multiple tags per note, colored chips, click to filter
Pin / Favorite	Visual flags on cards
Note colors	Color-coded top accent stripe on each card

🔍 Search & Filter

Feature	Details
Real-time search	Debounced, searches title + content + tags
View filters	All Notes / Pinned / Favorites / Trash
Category filter	Click any category in sidebar
Tag filter	Pill buttons above grid auto-populated from notes
Sort	Newest / Oldest / A→Z / Last Edited
Grid / List view	Toggle between card grid and compact list

📦 Data

Feature	Details
Export	Downloads all notes as .json file
Import	Merges notes from .json file (no duplicates by ID)
localStorage	All notes persist instantly
Sample notes	Pre-seeded on first visit

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl+N	New note
Ctrl+S	Save current note
Ctrl+F	Focus search
Esc	Close editor / Exit fullscreen

🌙 UI/UX

Feature	Details
Dark / Light mode	Toggle with 🌙 button, saved to localStorage
Glassmorphism cards	Frosted glass effect with neon border glow
Card animations	Slide-in entry, scale hover, slide-out delete
Cinematic dot grid	Subtle background pattern
Responsive layout	3-column desktop → adaptive tablet → fullscreen mobile

📡 PWA

Feature	Details
Service Worker	Cache-first for app shell
Offline support	All notes in localStorage — works 100% offline
Installable	Add to home screen on Android/iOS/Desktop
Offline banner	Yellow banner shown when offline

♿ Accessibility

Feature	Details
ARIA labels	Every button, input, region labelled
aria-live	Save status, search results, counters announced
Focus-visible	Keyboard focus rings on all interactive elements
Semantic HTML	<header>, <nav>, <aside>, <section>, <main>
Role attributes	listitem, listbox, toolbar, dialog, search

---

📁 File Structure

noteos/
├── index.html       ← Full HTML, SEO meta, JSON-LD, accessibility
├── manifest.json    ← PWA manifest
├── sw.js            ← Service Worker (cache-first)
├── css/
│   └── style.css    ← Complete styles (dark/light, responsive, animations)
├── js/
│   └── app.js       ← 29 modular sections — all logic
└── README.md

---

🚀 Run Locally

# Open directly (localStorage works fine without server)
open index.html

# Local server (for PWA Service Worker)
npx serve .
# or
python -m http.server 5500

---

🌐 Deploy to GitHub Pages

git init && git add .
git commit -m "feat: NoteOS smart notes workspace"
git remote add origin https://github.com/YOUR_USERNAME/noteos.git
git push -u origin main
# Settings → Pages → Source: main / root

Then update in index.html:

<link rel="canonical" href="https://YOUR_USERNAME.github.io/noteos/" />
<meta property="og:url"  content="https://YOUR_USERNAME.github.io/noteos/" />

---

🛠️ Tech Stack

Layer	Details
HTML5	Semantic, ARIA, meta tags, JSON-LD structured data
CSS3	CSS custom properties, grid layout, keyframe animations
JavaScript	ES6+, localStorage, FileReader API, Clipboard API
PWA	Service Worker, manifest.json, cache-first strategy
Markdown	Custom lightweight parser (no external library)

---

🔑 Architecture Highlights

• CSS variables drive entire dark/light theme — zero JS style writes
• Modular JS — 29 named sections, clean function separation
• No DOM rebuild on sort/filter — only re-renders the notes grid
• Custom markdown parser — no marked.js or external dependency
• Debounced search (250ms) and debounced autosave (600ms)
• Soft delete — notes go to Trash first, never instantly gone
• Import/Export — JSON round-trip with duplicate-ID protection

---

📄 License

MIT — free to use, fork, and learn from.

link: https://note-6lj48jgb4-kingsank647s-projects.vercel.app/

---

Built with ❤️ using zero dependencies — pure HTML, CSS & JavaScript.