Google I/O Extended Hanoi x
AI Riser Vietnam 2026

System Role: You are an expert full-stack developer and UX/UI designer known for creating beautiful, intuitive, and highly functional web applications.

Task: I want to "vibe-code" a modern note-taking application. Please write the complete, fully functioning code for this app.

Tech Stack: To make this easy to run instantly, please build this as a Single-Page Application (SPA) using:

- HTML5
- Vanilla JavaScript (ES6+)
- Tailwind CSS (import via CDN for styling)
- Include a CDN for an icon library (like FontAwesome or Phosphor Icons) if needed.
- Include a CDN for a Markdown parser (like Marked.js) to support Markdown formatting in the notes.

Core Features & Functionality:

1. CRUD Operations: Users can Create, Read, Update, and Delete notes.
2. Data Persistence: Save all notes automatically to the browser's localStorage so they persist after a page refresh.
3. Markdown Support: The note editor should accept Markdown (headers, lists, bold, etc.) and render it beautifully when viewing the note.
4. Search & Filter: A real-time search bar at the top that filters notes by title or content as the user types.
5. Categorization: Allow users to add color-coded tags or pin their favorite notes to the top of the list.

The "Vibe" (Design & UX):

- Aesthetic: Clean, minimalist, and modern. Think a mix between Notion and Apple Notes.
- Layout: A two-pane layout. A sidebar on the left containing the search bar and the list of saved notes, and a large editor/viewing pane on the right.
- Interactivity: Smooth micro-interactions. Add gentle hover states, soft transitions when switching notes, and a subtle animation when a new note is added or deleted.
- Theming: Implement a sleek Dark Mode by default, with a toggle switch to change to Light Mode. Use sophisticated colors (e.g., deep slate/charcoal for dark mode, off-white/zinc for light mode). Use slightly rounded corners (macOS style) and soft drop shadows to give depth to the UI elements.

Output Constraints:

- Provide the entire application within a single, cohesive index.html code block.
- Embed the CSS within <style> tags and the JavaScript within <script> tags at the bottom of the file.
- Do not leave placeholders like // add logic here. Provide the complete, working logic.
- Keep the code clean, well-commented, and modular within the script tag.

Vai trò Hệ thống: Bạn là một lập trình viên full-stack và nhà thiết kế UX/UI chuyên gia, nổi tiếng với việc tạo ra các ứng dụng web đẹp mắt, trực quan và có tính ứng dụng cao.

Nhiệm vụ: Tôi muốn "vibe-code" một ứng dụng ghi chú hiện đại. Vui lòng viết toàn bộ mã nguồn, đảm bảo ứng dụng hoạt động hoàn chỉnh.

Công nghệ sử dụng: Để dễ dàng chạy ngay lập tức, vui lòng xây dựng thành một Single-Page Application (SPA) sử dụng:

- HTML5
- Vanilla JavaScript (ES6+)
- Tailwind CSS (nhúng qua CDN để tạo kiểu)
- Nhúng CDN cho thư viện icon (như FontAwesome hoặc Phosphor Icons) nếu cần.
- Nhúng CDN cho bộ phân tích Markdown (như Marked.js) để hỗ trợ định dạng Markdown trong các ghi chú.

Các Tính năng cốt lõi:

1. Thao tác CRUD: Người dùng có thể Tạo, Đọc, Cập nhật và Xóa ghi chú.
2. Lưu trữ dữ liệu: Tự động lưu tất cả ghi chú vào localStorage của trình duyệt để không bị mất sau khi tải lại trang.
3. Hỗ trợ Markdown: Trình chỉnh sửa ghi chú phải chấp nhận Markdown (tiêu đề, danh sách, in đậm, v.v.) và hiển thị đẹp mắt khi xem ghi chú.
4. Tìm kiếm & Lọc: Thanh tìm kiếm theo thời gian thực ở trên cùng, giúp lọc ghi chú theo tiêu đề hoặc nội dung khi người dùng gõ.
5. Phân loại: Cho phép người dùng thêm các thẻ (tag) được phân loại bằng màu sắc hoặc ghim các ghi chú yêu thích lên đầu danh sách.

"Vibe" (Thiết kế & Trải nghiệm Người dùng):

- Thẩm mỹ: Sạch sẽ, tối giản và hiện đại. Hãy nghĩ đến sự kết hợp giữa Notion và Apple Notes.
- Bố cục: Giao diện chia 2 cột. Một thanh bên (sidebar) bên trái chứa thanh tìm kiếm và danh sách ghi chú đã lưu, và một vùng soạn thảo/xem lớn ở bên phải.
- Tương tác: Các tương tác nhỏ (micro-interactions) mượt mà. Thêm các hiệu ứng hover nhẹ nhàng, chuyển tiếp mượt mà khi chuyển đổi giữa các ghi chú, và một hiệu ứng hoạt họa tinh tế khi ghi chú mới được thêm hoặc xóa.
- Chủ đề (Theming): Mặc định sử dụng Giao diện Tối (Dark Mode) bóng bẩy, có nút chuyển đổi sang Giao diện Sáng (Light Mode). Sử dụng các màu sắc tinh tế (ví dụ: xám than/slate cho Dark Mode, trắng ngà/zinc cho Light Mode). Sử dụng các góc bo tròn nhẹ (phong cách macOS) và bóng đổ mềm mại để tạo chiều sâu cho các thành phần giao diện.

Yêu cầu Đầu ra:

- Cung cấp toàn bộ ứng dụng trong một khối mã index.html duy nhất, liền mạch.
- Nhúng CSS bên trong thẻ <style> và JavaScript bên trong thẻ <script> ở cuối tệp.
- Không để lại các phần giữ chỗ (placeholder) như // thêm logic ở đây. Vui lòng cung cấp toàn bộ logic hoạt động hoàn chỉnh.
- Giữ cho mã nguồn sạch sẽ, có comment rõ ràng và được thiết kế theo module bên trong thẻ script.