Virtual School Dashboard

"Generate a responsive Virtual School dashboard UI design with the following specifications: Layout Structure and Components: Header: A top navigation bar with a background color of #0C3C58 (Dark Blue). Left-aligned text: 'Virtual School' in white (#FFFFFF). A profile icon on the right with a dropdown menu for user settings. Ensure padding for all sides of the header (20px padding). Upcoming Events Section: Create a section titled 'Upcoming Events' (in white text, 18px font size, bold). This section should have a horizontal scrollable list of event cards. Each card should be a rounded rectangle with a white background and shadow effect: Roma Theatre: Time: 13:30 - 8:00 AM - 11:45 AM. Description: "In William Shakespeare's Romeo and Juliet..." Include 4 participant avatars on the bottom-left of the card. Flower Gallery: Time: 13:30 - All day. Description: "One of the most popular plant galleries..." 4 participant avatars on the bottom-left. Volleyball: Time: 16:10 - 8:00 AM - 10:00 AM. Description: "Intensive volleyball training..." 4 participant avatars. Days to Holiday Counter (left side): A large, bold number 68 in black font. Below the number, text 'Days to holiday' in gray (#6c757d). Add a smiley face emoji next to the number. Ensure this counter is enclosed in a rounded white card. Exams Progress Section (left-side): Title: 'Exams Progress'. Show three circular progress bars with each subject's progress: Biology: 25% complete (14 chapters), circular bar with green. History: 75% complete (92 chapters), circular bar with green. English: 50% complete (77/14 chapters), circular bar with green. Ensure 'See All' button in green (#2A9D8F) at the bottom. Today's Calendar (center): A vertical timeline with event details for today: 7:45 AM - Biology (with icon). 9:00 AM - French (with French flag icon). 10:00 AM - Geography. 12:15 PM - Basketball. Use soft light blue backgrounds (#F0F9FF) for each event block with icons on the left. Your Classes Section (right side): Title: 'Your Classes'. Four rectangular cards with rounded edges, each with icons: Japan Culture (Pastel Green #D4F2E7 background). Vege Lovers (Pastel Pink #FFDFDF background). Master Volleyball (Light Gray background). Class 2C (Purple). Statistics Section (bottom-right): A bar chart to display the following monthly statistics for marks: Marks from September to June. Two categories: 'All marks' and 'Marks below C' using two shades of green. Ensure clear gridlines and labels for each month. Design Specifics: Use rounded corners for all cards and sections with a consistent border-radius of 10px. Apply shadow effects to cards for depth. Text: Use Montserrat font or Sans Serif (ensure bold titles and regular body text). Buttons and interactive elements should have hover states with a slightly darker background. All numbers, dates, and labels should match the data from the attached image. Include appropriate padding between components to ensure a balanced and uncluttered design. Color Codes: Header Background: #0C3C58 (Dark Blue). Background: #F0F9FF (Light Blue). Text: White (#FFFFFF) for the header, black for major text, gray (#6c757d) for secondary text. Cards Background: White (#FFFFFF). Progress Bars/Buttons: Green (#2A9D8F). Class Cards: Pastel Green (#D4F2E7), Pastel Pink (#FFDFDF), Light Gray (#F4F7FC), Purple (for Class 2C). Additional Requirements: Ensure full responsiveness for both desktop and mobile views. Maintain a modern, clean UI design with soft colors and padding for all elements. Accurately reflect all data and design elements as per the provided layout, including font sizes, spacing, and color schemes."