Dùng để: Dựng thanh điều hướng bên cho bảng điều khiển, chạy mượt và thu gọn gọn gàng trên mọi màn hình.
Nội dung prompt
VAI TRÒ Bạn là lập trình viên frontend chuyên dựng giao diện bảng điều khiển bằng HTML, CSS và JavaScript. NHIỆM VỤ Dựng thanh điều hướng bên cho một bảng điều khiển theo yêu cầu trong phần đầu vào. ĐẦU VÀO - Danh sách mục menu: [LIỆT KÊ CÁC MỤC] - Phong cách: [TỐI / SÁNG / TỐI GIẢN] - Màu nhấn: [MÃ MÀU HOẶC TÊN MÀU] - Có thu gọn thành biểu tượng hay không: [CÓ / KHÔNG] QUY TẮC - Xây bố cục đáp ứng tốt, chạy bằng HTML5 và CSS3. - Thêm tương tác bằng JavaScript để đổi nội dung mà không tải lại trang. - Có mục thu gọn và mở rộng linh hoạt cho từng nhóm chức năng. - Đánh dấu mục đang được chọn thật rõ. - Hỗ trợ chuyển nhanh bằng bàn phím và đủ độ tương phản màu. - Khi thu gọn, vẫn xem được biểu tượng và chú thích khi rê chuột. - Mã sạch, có cấu trúc, dễ bảo trì và không dùng thư viện ngoài. - Chạy tốt trên các trình duyệt hiện đại lẫn trên điện thoại. KHUÔN ĐẦU RA Một tệp HTML chạy được, kèm ghi chú cách thêm mục menu mới.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Thanh bên dễ trở nên nặng khi có quá nhiều mục, nên hãy nhóm chúng lại và chỉ mở nhóm đang dùng. Trạng thái đang chọn cần nổi bật bằng màu nhấn và một vạch chỉ báo để người dùng không bị lạc. Khi thu gọn, đừng bỏ hẳn chữ mà hãy hiện chú thích khi rê chuột để vẫn hiểu được chức năng. Nếu mục menu do dữ liệu sinh ra, yêu cầu tách phần dựng danh sách khỏi phần giao diện. Cuối cùng, kiểm lại khả năng dùng bàn phím vì phần này hay bị bỏ sót.
Prompt khác cùng nhóm
Dựng ứng dụng web tạo avatar cá nhân hóaNêu các phong cách và trường mô tả, nhận về mã ứng dụng web tạo avatar với lưới kết quả và lịch sử lưu trên máy.Xem promptTư vấn di chuyển hệ thống lên AWSMô tả hệ thống hiện tại, nhận về phương án di chuyển lên AWS, điểm cần cân nhắc và thứ tự thực hiện.Xem promptĐóng vai chuyên gia lập trình Swift và iOSNêu đoạn mã và mục tiêu, nhận về hướng dẫn Swift hiện đại, SwiftUI và xử lý bất đồng bộ theo chuẩn của Apple.Xem promptDựng trang HTML hiện lời nhắn khi nhấp chuộtĐiền lời nhắn và tông màu, nhận về một tệp HTML nhẹ, nhấp vào màn hình là hiện thông điệp.Xem promptThiết kế hệ thống nhiều tác nhân AINêu bài toán và các vai trò, nhận về sơ đồ hệ thống nhiều tác nhân, cách nhớ ngữ cảnh và hàng rào an toàn.Xem promptViết Bash script tự động hóa chuẩn chuyên nghiệpMô tả công việc cần tự động, nhận về Bash script có xử lý lỗi, tô màu đầu ra và cờ trợ giúp đầy đủ.Xem promptDựng ứng dụng web nhật ký và phản hồi bản thânMô tả lĩnh vực và giọng phản hồi, nhận về đặc tả ứng dụng web ghi nhật ký ngày và nhận lại lời nhận xét cá nhân.Xem promptThiết kế hệ thống điều hướng cho ứng dụng di độngMô tả ứng dụng và số màn hình, nhận về phương án điều hướng dễ hiểu kèm lý do và các điểm cần kiểm thử.Xem promptĐóng vai kiến trúc sư kỹ thuật di động Native và CloudNêu bài toán ứng dụng di động, nhận về phương án kiến trúc Native kết hợp Cloud chạy tốt cả khi mất mạng.Xem prompt