Ứng dụng web nhỏ gọn cho phép người dùng chọn badge và xem mã nguồn HTML, CSS, JS để tùy biến theo nhu cầu. Xây dựng với HTML, Tailwind CSS, Prism.js và Font Awesome, hỗ trợ giao diện sáng/tối và PWA cơ bản.
- Thanh điều hướng bên: Danh sách badge theo danh mục kèm hình thu nhỏ.
- Xem trước trực tiếp: Hiển thị badge và bật chế độ xem mã nguồn.
- Chỉnh sửa mã: Thay đổi HTML, CSS, JS ngay trong trình duyệt.
- Khôi phục mặc định: Trả mã về trạng thái gốc với nút Reset.
- Tìm kiếm: Lọc badge theo tên trong thời gian thực.
- Chuyển giao diện: Đổi giữa chế độ sáng và tối.
- PWA Ready: Có
manifest.jsoncho trình duyệt Web. - Chia sẻ phong phú: Thẻ Open Graph và Twitter Card cho preview khi chia sẻ.
- Giao diện sáng
- Giao diện tối
- Trình duyệt hiện đại: Chrome, Firefox, Safari, Edge.
- Kết nối Internet để tải các thư viện CDN.
-
Clone repository
git clone https://github.com/yourusername/dangkh0a-gallery.git cd dangkh0a-gallery -
Chạy local server
-
Mở trình duyệt Truy cập
http://localhost:..../index.htmlđể dùng ứng dụng.
├── index.html # Trang chính
├── style.css # Styles tùy chỉnh
├── components.json # Định nghĩa badge
├── manifest.json # PWA manifest
├── logo.png # Icon và favicon
├── README.md # Tài liệu dự án
- Chọn badge từ sidebar để xem trước.
- Nhấp vào vùng preview để mở code editor.
- Chỉnh sửa HTML, CSS, JavaScript theo ý.
- Nhấn Reset để khôi phục mã gốc.
- Dùng ô Search để tìm badge.
- Nhấn biểu tượng sun/moon để chuyển giao diện.
Chào đón mọi đóng góp:
- Fork repository.
- Tạo nhánh mới:
git checkout -b feature/tên-tính-năng. - Commit thay đổi:
git commit -m "Add new badge component". - Push lên nhánh:
git push origin feature/tên-tính-năng. - Mở Pull Request.
Được cấp phép theo MIT License. Xem file LICENSE để biết chi tiết.
Lưu ý: Hầu hết các tài nguyên badge (thumbnail, SVG) được tạo bởi img.shields.io ở đây chúng tôi hỗ trợ các bạn tùy biến