Đây là một dự án front-end xây dựng giao diện người dùng (UI) cho một ứng dụng nghe nhạc. Dự án được code hoàn toàn bằng HTML, CSS và một chút JavaScript, tập trung vào việc mô phỏng chính xác thiết kế, có tính tương tác và đảm bảo hoạt động trên nhiều kích cỡ màn hình.
Dự án này đáp ứng đầy đủ các yêu cầu của bài tập:
- Giao diện đầy đủ: Giao diện 3 cột (Sidebar, Main Content, Rightbar) và thanh Player được tái hiện chính xác theo mẫu thiết kế.
- 🎨 Chuyển đổi Light / Dark Mode: Người dùng có thể gạt nút ở thanh sidebar để chuyển đổi qua lại giữa 2 chế độ giao diện Sáng và Tối.
- 📱 Responsive UI Design: Giao diện tự động điều chỉnh (sử dụng
@media queries):- Tablet (<= 1100px): Ẩn cột bên phải (
rightbar). - Mobile (<= 800px): Ẩn cả 2 cột bên, giao diện 1 cột, thanh player ghim xuống dưới.
- Tablet (<= 1100px): Ẩn cột bên phải (
- ✨ Hiệu ứng Transitions: Tất cả các thành phần tương tác (nút, link, thẻ card) đều có hiệu ứng
hovermượt mà. Hiệu ứng chuyển đổi Light/Dark mode cũng mượt mà. - 🎬 Hiệu ứng Animations: Trang web có hiệu ứng
fadeInđơn giản khi tải (sử dụng@keyframes). - 📜 Danh sách cuộn (Scrollable Lists): Các mục "Recent" và "Next in Queue" có chiều cao cố định và tự động xuất hiện thanh cuộn khi danh sách quá dài.
- HTML5: Cấu trúc ngữ nghĩa cho trang web.
- CSS3: Tạo kiểu giao diện, bao gồm:
- Flexbox và Grid để dựng bố cục.
- CSS Variables (Biến CSS) để quản lý theme Light/Dark.
- Media Queries cho Responsive Design.
- Transitions và Animations cho hiệu ứng động.
- JavaScript (ES6+): Một đoạn script ngắn gọn để xử lý logic bật/tắt
classcho Light/Dark mode.
<title>Circle Music</title>
Home
Search
Playlists
Notifications
Premium Content
<title>Circle Music</title>
Home
Search
Playlists
Notifications
Premium Content
<script>
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
themeToggle.addEventListener('change', function() {
if (this.checked) {
body.classList.add('dark-mode');
} else {
body.classList.remove('dark-mode');
}
});
</script>
Ai lớn cũng phải
CAPTAIN BOY
01:50
-03:36
Taylor Swift
Justin Bieber
Charlie Puth
Katy Perry
Ariana Grande
Bruno Mars
The Daily
Huberman Lab
