🔐 SecurePass Generator (React + Tailwind CSS)

Một trình tạo mật khẩu mạnh mẽ và an toàn được xây dựng bằng React và Tailwind CSS, cung cấp giao diện hiện đại và trải nghiệm người dùng tối ưu.

---

📸 Ảnh chụp màn hình

✨ Tính Năng Nổi Bật

🔒 Tạo Mật Khẩu An Toàn

• Độ dài tối ưu: 12-16 ký tự theo tiêu chuẩn bảo mật
• Đa dạng ký tự: Hỗ trợ chữ hoa, chữ thường, số và ký tự đặc biệt (@#$%&*!?)
• Đảm bảo an toàn: Luôn chứa ít nhất một ký tự từ mỗi loại được chọn

🎨 Giao Diện Hiện Đại

• 3 chế độ theme:
  • 🌞 Sáng (Light)
  • 🌙 Tối (Dark)
  • 💻 Theo hệ thống (System)
• Hiệu ứng mượt mà: Hover effects, transitions, và micro-interactions
• Thiết kế responsive: Hoạt động tốt trên mọi thiết bị

📊 Đánh Giá Độ Mạnh

• Phân loại rõ ràng: Weak / Medium / Strong
• Tính toán thông minh: Dựa trên độ dài và độ đa dạng ký tự
• Hiển thị trực quan: Màu sắc và badge tương ứng

🛠️ Tiện Ích Bổ Sung

• Sao chép một chạm: Copy password vào clipboard
• Mẹo bảo mật: 4 gợi ý quan trọng để bảo vệ tài khoản
• Ngăn lỗi thường gặp: Không cho phép tắt tất cả các loại ký tự

🚀 Công Nghệ Sử Dụng

• React 18+ - Thư viện UI chính
• Tailwind CSS 3+ - Framework CSS utility-first
• ES6+ - JavaScript hiện đại
• Vite - Build tool nhanh chóng

---

📦 Cài Đặt & Chạy Ứng Dụng

1️⃣ Clone repository:

git clone https://github.com/mtrong100/Password-Generator.git
cd <your-repo-name>

2️⃣ Cài đặt dependencies:

npm install

3️⃣ Chạy ứng dụng:

npm run dev

Sau đó truy cập http://localhost:5173 (hoặc port khác mà Vite chỉ định).

---

🛠️ Cấu Trúc Chính

src/
 ├─ App.jsx          # Giao diện và logic chính của ứng dụng
 ├─ index.jsx        # Điểm khởi động React
 ├─ styles/          # Cấu hình Tailwind CSS
 └─ assets/          # Hình ảnh, icon (nếu có)

---

🌈 Cách Sử Dụng

1. Chọn ngôn ngữ (Tiếng Việt)
2. Chọn giao diện (Light / Dark / System)
3. Điều chỉnh độ dài mật khẩu (12--16)
4. Bật/tắt các loại ký tự bạn muốn sử dụng
5. Nhấn "Tạo Mật Khẩu Mới"
6. Sao chép mật khẩu bằng nút "Copy"

---

💡 Gợi Ý Bảo Mật

• Dùng mật khẩu dài ít nhất 12 ký tự\
• Kết hợp chữ hoa, chữ thường, số và ký tự đặc biệt\
• Không sử dụng thông tin cá nhân\
• Dùng mật khẩu khác nhau cho mỗi tài khoản

---

📄 Giấy Phép

Phát hành theo giấy phép MIT License.
Bạn có thể tự do sử dụng, chỉnh sửa và phân phối lại mã nguồn này.

---

🧑‍💻 Tác Giả

Tên: [SigmaProVip68]
Công nghệ: React + Tailwind CSS
Năm: 2025