TUH
Thi Ui Hoa

Container - Copy this React, Mui Component to your project

Tạo ứng dụng Photo Finder với giao diện hiện đại theo phong cách iOS/Google Photos: 1. Cấu trúc giao diện chính: Cửa sổ chính chia làm 2 phần: Sidebar (280px) bên trái và Main Content bên phải Kích thước cửa sổ mặc định: 1024x768px Theme màu: Tông màu sáng, hiện đại 2. Sidebar (280px): Logo/Header "Tìm Ảnh" với icon 🔍 Mục Folders: + Source Folder (📂) + Output Folder (💾) Mục Options: + Lock Source (checkbox) + Lock Output (checkbox) + Auto Sub (checkbox) Hiển thị đường dẫn: + Source Path + Output Path 3. Main Content: Bảng kết quả gọn gàng hiển thị: + Tên file + Trạng thái (✅/❌) + Đường dẫn (Source → Destination) + Mỗi dòng có thể click để mở folder chứa file Khu vực thông báo: + Hiển thị theo dòng với icon ▸ + Nội dung ngắn gọn: "Copied: file.jpg" hoặc "Failed: file.jpg Lý do" + Tự động cuộn khi có thông báo mới Thanh tiến trình ở dưới cùng: + Hiển thị phần trăm hoàn thành + Số file đã xử lý/tổng số + Thanh progress bar trực quan [███░░░] 4. Tương tác: Các đường dẫn có thể click để mở folder Thông báo tự động cập nhật Thanh tiến trình cập nhật real time Giao diện responsive, thích ứng khi thay đổi kích thước 5. Màu sắc & Font chữ: Sử dụng font sans serif dễ đọc Màu sắc tương phản vừa đủ Icons rõ ràng, dễ nhận biết Các thông báo lỗi/thành công có màu phân biệt Yêu cầu kỹ thuật: Sử dụng Electron.js cho desktop app React + MUI cho UI Tối ưu hiệu năng khi xử lý nhiều file Hỗ trợ dark/light mode

Prompt
Component Preview

About

Container - A modern UI layout with a sidebar and main content, featuring file paths, notifications, and progress bars, built with Rea. View and copy code!

Share

Last updated 1 month ago