Tôi muốn tạo một bộ khung giao diện Web App Blogger chuyên nghiệp cho dự án VeoFood, lấy cảm hứng từ GrabFood, ShopeeFood, BeFood và các ứng dụng giao đồ ăn hiện đại.
Yêu cầu chung:
* Nền tảng: Blogger (Blogspot)
* Ngôn ngữ: HTML5, CSS3, Javascript ES6 thuần
* Không sử dụng Bootstrap, jQuery hoặc framework bên ngoài
* Tối ưu SEO Blogger
* Tối ưu Core Web Vitals
* Tối ưu Mobile First
* Responsive hoàn toàn
* PWA Ready
* Kích thước tối đa toàn bộ giao diện: 680px
* Căn giữa màn hình trên Desktop
* Trên Desktop hiển thị như giao diện App Mobile
* Màu chủ đạo: #5a0fc8
* Màu tương phản chính: #ffffff
* Màu nền phụ: #f7f7fb
* Màu chữ chính: #222222
* Màu nhấn CTA: #ff6b35
* Bo góc mềm mại từ 12px đến 24px
* Hiệu ứng chuyển động mượt mà
* Tất cả class, id, biến CSS đều bắt đầu bằng tiền tố "veofood-"
* Ví dụ:
* .veofood-container
* .veofood-header
* .veofood-search
* .veofood-card
* .veofood-footer
* Tất cả widget chính phải có box-shadow chuyên nghiệp:
box-shadow: 0 8px 30px rgba(0,0,0,.08);
Cấu trúc tổng thể:
1. Wrapper App
* .veofood-app
* max-width: 680px
* margin: auto
* min-height: 100vh
* background trắng
* shadow toàn khung
* overflow hidden
2. Header Sticky
Yêu cầu:
* Sticky top
* Glassmorphism
* Blur nền
* Luôn hiển thị trên cùng
Bên trái:
* SVG Menu
* Logo VeoFood
* Text:
VEOFOOD.NET
Giữa:
* Thanh tìm kiếm bo tròn
* Placeholder:
"Tìm món ăn, quán ăn..."
* Icon tìm kiếm SVG
Responsive:
* Trên 500px:
Hiển thị đầy đủ ô tìm kiếm
* Dưới 500px:
Ẩn thanh tìm kiếm
Chỉ hiển thị icon Search
Khi click icon Search:
* Popup Search Full Width
* Trượt từ trên xuống
* Nền blur tối
* Có nút đóng
* Có autofocus
* Animation mượt 300ms
Bên phải:
* SVG Giỏ hàng
* SVG Thông báo
* SVG Tài khoản
Tính năng:
* Badge số lượng giỏ hàng
* Badge thông báo
* Hover animation
* Ripple effect
3. Main Content
Tạo sẵn khung:
* Banner Slider
* Danh mục món ăn
* Danh sách quán ăn
* Danh sách món ăn
* Flash Sale
* Sản phẩm nổi bật
* Gần bạn
* Đề xuất hôm nay
Chỉ tạo layout rỗng để dễ bổ sung dữ liệu sau.
4. Bottom Navigation
Cố định dưới màn hình
Gồm:
* Trang chủ
* Danh mục
* Giỏ hàng
* Đơn hàng
* Tài khoản
Yêu cầu:
* Kiểu GrabFood/ShopeeFood
* Icon SVG
* Active Animation
* Floating Cart Button
* Glass Effect
* Safe Area iPhone
5. Footer
Thiết kế hiện đại gồm 3 phần:
Cột 1:
Về VeoFood
* Giới thiệu
* Chính sách
* Điều khoản
* Liên hệ
Cột 2:
Hỗ trợ khách hàng
* Hướng dẫn đặt món
* Hướng dẫn thanh toán
* Theo dõi đơn hàng
* Câu hỏi thường gặp
Cột 3:
Thông tin doanh nghiệp
* Hotline
* Email
* Website
* Địa chỉ
Footer phải:
* Responsive
* Chuyển thành 1 cột trên Mobile
* Có icon mạng xã hội
* Có copyright
6. Animation
Tạo sẵn:
* Fade In
* Slide Up
* Slide Down
* Scale
* Ripple
* Floating
* Skeleton Loading
* Toast Notification
7. Dark Mode
Tạo sẵn hệ thống:
* Light Mode
* Dark Mode
Lưu lựa chọn bằng LocalStorage.
8. Hiệu suất
* Lazy Load hình ảnh
* Không dùng thư viện ngoài
* Không render thừa
* Tối ưu tốc độ Blogger
9. Kết quả đầu ra
Xuất riêng:
* HTML hoàn chỉnh
* CSS hoàn chỉnh
* Javascript hoàn chỉnh
Mỗi phần tách riêng rõ ràng để dễ dàng chèn vào Blogger Theme XML hoặc Widget HTML/Javascript.
Học Thiết Kế Website Không Cân Biết Lập Trình Từ Blogger
Chia sẻ