A
Anonymous

Meal Timetable Component - Copy this Html, Bootstrap Component to your project

"Create a responsive web UI for a meal timetable with the following features: Datetime Picker for Selecting a Week: Add a datetime picker that allows users to select a date within a 7 day week (from Monday to Sunday). After selecting a date, automatically populate the days (from Monday to Sunday) under the respective weekday columns (Thứ 2, Thứ 3, ..., Chủ Nhật). Columns for Sáng, Trưa, Tối: Each day of the week (Thứ 2, Thứ 3, ..., Chủ Nhật) should have three rows for 'Sáng', 'Trưa', and 'Tối'. Add Dish Button: Include a button labeled 'Thêm Món Ăn' in each cell under the Sáng, Trưa, and Tối columns to allow users to add a meal to that time slot. Mobile Adaptation: When viewed on mobile, display each day's columns (Sáng, Trưa, Tối) as a stacked list with meal times vertically. The weekday names (Thứ 2, Thứ 3, ..., Chủ Nhật) should be shortened to icons inside circular buttons, like a calendar app (e.g., 'T2' for 'Thứ 2', 'CN' for 'Chủ Nhật'). The 'Add Dish' button should be displayed as a plus icon ('+') in mobile view. The layout should be compact and responsive, resembling the look of a typical calendar app on mobile devices. Desktop Adaptation: On desktop, the full weekday names (Thứ 2, Thứ 3, ..., Chủ Nhật) should remain visible across the top, with a grid layout for the meal timetable, and the 'Thêm Món Ăn' buttons clearly displayed in each cell. Ensure the UI is clean, visually appealing, and works well on both desktop and mobile devices."

Prompt
Component Preview

About

Meal Timetable Component - Create a responsive meal planner with a datetime picker, meal slots, and 'Add Dish' buttons, built with HTML. Start coding now!

Share

Last updated 1 month ago