Công cụ ›

Công cụ soạn yêu cầu giao diện

Chọn cảm giác bạn muốn cho trang. Yêu cầu bên phải tuân theo quy tắc giao diện v1.5, nên AI sẽ tạo ra tệp bạn có thể tải lên ngay.

Yêu cầu của bạn

[Phong cách mong muốn: Palco de K-pop vibrante, màu nền #f6f3ee, màu nhấn #d2462f, góc hơi bo tròn (khoảng 8px), giao diện sáng (chữ tối trên nền sáng). Dùng đúng các màu này cho --aml-bg và --aml-accent / --aml-accent-fill.]

Dựa trên phong cách ở trên, hãy làm một tệp HTML "giao diện" (skin) cho trang nhạc của tôi. Tuân thủ chính xác các quy tắc sau.

[Quy tắc]
1. Một tệp HTML. Đặt toàn bộ CSS trong một thẻ <style> duy nhất bên trong <head>. Giữ ngắn gọn — 30KB trở xuống.
2. Không được dùng: <script>, thuộc tính on…= như onclick, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), hình ảnh bên ngoài hoặc phông chữ web bên ngoài. Nếu cần họa tiết, hãy dùng CSS gradient.
3. Trang web tự vẽ các dòng bài hát, menu, trình phát, album và sổ lưu bút. Tôi chỉ chọn màu sắc và bố cục. Dùng đúng khung này:
   <!doctype html><html lang="{{lang}}"><head><meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="(màu nền)"><title>{{site_name}}</title><style> … </style></head>
   <body class="aml-kit">
   {{banner}}
   {{hero}}
   <div class="aml-bar">{{menu}}{{lang_select}}</div>
   {{ad_top}}
   {{content}}
   {{footer}}
   {{player}}
   </body></html>
   ({{menu}}, {{content}} và {{player}} mỗi cái phải xuất hiện đúng một lần. Không bao giờ viết tên chỗ giữ chỗ bên trong chú thích.)
4. Trong :root bên trong <style>, đặt tất cả các biến màu sau (chỉ cần đổi các biến này là đổi màu cả trang):
   --aml-bg (nền trang) --aml-panel (dòng bài hát, thẻ) --aml-panel-2 (ô khi nhấn) --aml-text (chữ) --aml-muted (chữ phụ)
   --aml-line (đường kẻ mảnh) --aml-glass (thanh menu và trình phát, trong suốt: rgb(… / .74))
   --aml-accent (chữ và đường kẻ nhấn) --aml-accent-fill (nền nút) --aml-accent-ink (chữ trên nút)
   --aml-hero-a (lượng màu ảnh đại diện pha vào phần đầu trang: 8% cho nền sáng, 20% cho nền tối) --aml-art-shadow (bóng album hoặc none)
   --aml-viz-color (thanh khi đang phát) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (cửa sổ lời bài hát) --aml-footer-color --aml-social-color --aml-ext-color
   Đặt danh sách phông chữ của thiết bị vào --aml-font (ví dụ: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. Chữ phải có độ tương phản với nền từ 4.5:1 trở lên (không dùng chữ xám trên nền xám). Chữ phụ (--aml-muted) cũng phải từ 4.5:1 trở lên trên --aml-panel.
6. Muốn trang trí thêm, hãy thêm CSS cho các class sau (chỉ đổi hình dáng — đừng di chuyển hay đổi kích thước nhiều):
   .aml-hero (phần đầu trang) .aml-hero-name (tên trang) .aml-profile (ảnh tròn) .aml-btn-primary (nút phát tất cả)
   .aml-bar (thanh menu) .aml-menu-item / .aml-menu-item.is-active (nút menu dạng viên thuốc)
   .aml-section-title (tiêu đề) .aml-track (thẻ dòng bài hát) .aml-track.is-playing (dòng đang phát) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (ảnh bìa album) .aml-gb-form .aml-gb-post (sổ lưu bút) .aml-footer
   Không đổi vị trí hay kích thước của trình phát (.aml-player) hoặc hiệu ứng sóng nhạc (.aml-viz) — chỉ đổi màu.
7. Đảm bảo trang đẹp trên điện thoại (rộng 390px). Thiết kế có sẵn đã vừa với điện thoại, nên đừng cố định chiều rộng.

Chỉ hiển thị tệp HTML hoàn chỉnh, trong một khối mã duy nhất.

Sao chép yêu cầu và dán vào ChatGPT hoặc Claude miễn phí.
Nếu câu trả lời bị cắt ngang, hãy gõ “tiếp tục”.
Lưu mã thành tệp .html và kiểm tra: Công cụ kiểm tra giao diện
Tải lên ở mục Giao diện trong trang quản trị.