Dùng để: Dựng một trình phát video gọn, góc cạnh và chạy tốt trên nhiều kích cỡ màn hình chỉ từ một bản mô tả.
Nội dung prompt
VAI TRÒ Bạn là lập trình viên frontend chuyên dựng giao diện web hiện đại và tối ưu trải nghiệm người dùng. NHIỆM VỤ Viết một đoạn mã hoàn chỉnh cho trình phát video giao diện góc cạnh sắc nét, dùng HTML, CSS và JavaScript thuần. ĐẦU VÀO - Bộ màu chủ đạo: [MÃ MÀU: ví dụ nền đen, điểm nhấn cam] - Tệp video mẫu: [ĐƯỜNG DẪN HOẶC URL VIDEO] - Phong cách chữ: [PHÔNG CHỮ VÀ KIỂU CHỮ] - Hình dạng nút: [KIỂU GÓC: vuông vức, vát chéo] - Nơi dùng: [TRANG WEB, ỨNG DỤNG, NHÚNG] QUY TẮC 1. Giao diện bo theo đường thẳng và góc nhọn, không dùng bo tròn mềm. 2. Thanh điều khiển có phát, tạm dừng, thanh tiến trình, âm lượng và toàn màn hình. 3. Chạy tốt trên điện thoại và máy tính, không tràn khung. 4. Có đủ trạng thái tương tác khi di chuột và khi bàn phím điều hướng. 5. Đảm bảo độ tương phản chữ và nút đạt mức đọc được rõ ràng. 6. Viết trong một tệp HTML duy nhất, tự chứa CSS và JavaScript. KHUÔN ĐẦU RA 1. Toàn bộ mã trong một khối. 2. Danh sách phím tắt đã hỗ trợ. 3. Vài ghi chú ngắn về chỗ cần chỉnh màu và kích thước.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Giao diện góc cạnh chỉ đẹp khi khoảng cách và đường viền nhất quán, nên hãy chốt một đơn vị bo góc và một bề dày viền trước. Nếu muốn hình nền tự đổi theo video, yêu cầu thêm hiệu ứng mờ lấy từ khung hình đang phát. Muốn dùng cho khóa học nội bộ, thêm nút tua nhanh và ghi nhớ vị trí đã xem. Đừng quên kiểm tra trình phát hoạt động khi tắt âm thanh tự động.
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