Prompt for Generating a Web Application Based on Provided Material-Themed Mobile App ScreenshotsYou are tasked with generating a modern, fully-responsive web application that precisely replicates the visual structure, navigation, and functionality of the quiz-oriented mobile application shown in the provided screenshots. You must utilize a Material Design system (preferably Material Design 3 or Material UI 5+ for React), ensuring pixel-perfect adaptation to web for both light and dark themes, and implement all necessary interactive and stateful behaviors.1. TECHNOLOGY STACKUse React (with functional components and hooks), TypeScript preferred.Use Material UI library (v5+; @mui/material and @mui/icons-material).Manage state with React Context or Redux Toolkit.Implement routing with React Router DOM (v6+).Persist theme and user state in localStorage.Support responsive web and mobile breakpoints using Material UI’s Grid, Box, or Stack components.Implement “dark” and “light” theme switching; store user preference.All forms must have validation, proper label association, and accessible tab order.2. APP STRUCTUREApp root: <App /> with theme provider and router.Page layouts: Each screen from the screenshots is a dedicated route and component.Bottom navigation bar fixed at bottom, always visible, with routing integration.Use Material UI’s AppBar, BottomNavigation, Paper, and card components.All UI/UX elements conform to Material Design spacing, elevation, and color rules in both themes.ROUTES: * /api/v1/quiz/:userId == get user specific quizzes * /api/v1/quiz/save == save-questions from user * /api/v1/quiz/:id/questions == get the questions of the specific quiz (not in live quiz) * /api/v1/quiz/live == get all the live and public quiz * /api/v1/quiz/update == update the quiz and related questions if there any update in the questions * /api/v1/quiz/generate/prompt == generate the quiz with AI prompt * /api/v1/quiz/generate/csv == generate the quiz with user uploaded CSV file * /api/v1/quiz/generate/pdf == generate the quiz with user uploaded pdf file3. DASHBOARD PAGE (/dashboard)Header: “Dashboard”, large Material Typography (variant h5 or h4).Lobby code join:Outlined text field: placeholder “Enter lobby code”Rounded, elevated "Join" button (color="primary", variant="contained")Both grouped with vertical/horizontal spacing; handle join event (dummy alert is fine).Active Quizzes Section:Section title: “Active Quizzes (Waiting to Start)” in bold, slightly larger font.Map over an array of activeQuizzes, rendering Material Card for each:Card displays:Quiz name (larger), e.g., “Flutter Basics”Host (smaller, below name), e.g. “Hosted by: Alice”Chevron/right-arrow icon at end (<ChevronRight />) indicating pressable cardCard is clickable; navigates to /quiz/:idMouse hover raises card with a shadowBottom Navigation bar:Four items: Dashboard, MyQuiz, Medusa AI, Settings.Each has an icon (Dashboard, Quiz, SmartToy, Settings from MUI Icons).Highlight the current route/section.Persistent at bottom of viewport (on mobile/desktop).Navigation updates the main view accordingly.4. MY QUIZZES PAGE (/myquizzes)Header: “My Quizzes”, large bold title.Add New Quiz button:Prominent, full-width, rounded (Material UI Button), icon “Add” on left.Fixed at top under the header, with vertical spacing.Opens a modal or navigates to /myquizzes/new (dummy or alert is sufficient).Quiz List:Display quizzes as horizontal cards (responsive wrap for mobile, grid for desktop).Each card shows:Quiz Title (bold)Description (smaller, one line)Difficulty chip (Chip component): “medium”, “hard”, etc. with matching color+icon (FlashOn)Time per question: icon (Timer), label (e.g. “30s per question”)Points per question: icon (Star), label (e.g. “500 points/question”)Chevron/arrow icon at card end; card is click-able for detailCards are elevated, have Material hover effect, responsive to screen size.5. QUIZ DETAILS PAGE (/quiz/:quizId)Header: Back arrow button (ArrowBack), “Quiz Title” (from data), Trash Icon (Delete) for removal (dummy for now).Quiz Summary card:Elevated Card with:Quiz Title (large)Short descriptionTwo chips: “difficulty” (medium/hard, color-coded), “Active” statusInside a grid container, two columns (mobile: stack vertically)Quiz properties table:Use two-column grid layout.Each field as a small rounded card or Paper:Type (manual/auto)Time per Question (e.g. “30 sec”)Order (e.g. “fixed”)Points per Question (numeric)Times Played (numeric)Avg. Score (percentage)Total PlayersParticipant LimitCreated At (format YYYY-MM-DD)All fields are clearly labeled.Action buttons: “Preview”, “Edit”, “Play” at bottom, full width on mobile, side-by-side on desktop.Distinct icons from MUI (Visibility, Edit, PlayArrow)Color: Preview (default), Edit (secondary), Play (primary)Ripple effect, elevated6. MEDUSA AI PAGE (/medusa-ai)Header: “Medusa AI”, large bold.Prompt input card:Elevated Material Card.Title (“Enter Your Prompt”) in bold.Multiline outlined TextField for prompt entry; placeholder: "Type your keywords... Example: 'Math Quiz for Class 10'"“Generate” button: large, with AutoAwesome or SmartToy icon, filled color primary.Vertically aligned, with adequate spacing.On submit, dummy handler is sufficient.Upload PDF/CSV card:Title: “Upload PDF or CSV”File upload (Input type="file") for PDF/CSV files, Material Outlined Input.Multiline TextField for custom prompt, placeholder: "Write a custom prompt for your file..."“Generate from File” button: same style as above, color secondary.Proper form state handling; show a dummy success/snackbar on submit.7. SETTINGSRoute exists (/settings), accessible by navigation bar, but can display “Coming soon” or placeholder.8. THEME SUPPORTTheme Provider at app root; dark/light toggle in settings (or floating action button).Use Material palette tokens for background, surface, primary, secondary, error, text, and divider colors.All cards, inputs, navbars, and text adapt to theme instantly.Animate theme transitions with smooth fade (CSS transition).Store selected theme in localStorage and restore on refresh.9. GENERAL STYLING AND ACCESSIBILITYUse Material UI’s sx prop for custom styling (border radius, boxShadow, etc).Proper color contrast for text/icons in both themes.All inputs have associated labels, aria attributes as necessary.Tab order and keyboard accessibility for all interactive elements.Error/success messages use Material Snackbar/Alert components.10. DATA STRUCTURE (EXAMPLE):typescripttype Quiz = { id: string; title: string; description: string; difficulty: "easy" | "medium" | "hard"; status: "Active" | "Inactive"; type: "manual" | "auto"; timePerQuestion: number; // in seconds pointsPerQuestion: number; order: "fixed" | "random"; timesPlayed: number; avgScore: number; // percentage totalPlayers: number; participantLimit: number; createdAt: string; // YYYY-MM-DD host?: string; }; Store sample quizzes as static state/JSON.Lobby codes, prompt inputs, and uploads may be handled with dummy logic.11. EXAMPLE THEMES (MATERIAL UI):typescriptconst lightTheme = createTheme({ palette: { mode: 'light', primary: { main: '#6750a4' }, secondary: { main: '#625b71' }, background: { default: '#f7f2fa', paper: '#fff' }, text: { primary: '#1c1b1f', secondary: '#49454f' }, }, shape: { borderRadius: 16 }, }); const darkTheme = createTheme({ palette: { mode: 'dark', primary: { main: '#d0bcff' }, secondary: { main: '#ccc2dc' }, background: { default: '#1c1b1f', paper: '#2c2935' }, text: { primary: '#e6e1e5', secondary: '#c9c5ca' }, }, shape: { borderRadius: 16 }, }); 12. FILE/COMPONENT STRUCTURE (SUGGESTION):src/App.tsx (theme and router root)components/Header.tsxBottomNav.tsxQuizCard.tsxQuizDetails.tsxThemeToggle.tsxetc.pages/Dashboard.tsxMyQuizzes.tsxQuizDetail.tsxMedusaAI.tsxSettings.tsxtheme/light.tsdark.tsutils/ (helpers)13. RESPONSIVENESSMobile: Cards one per row, typography reduces, buttons full-width.Tablet/Desktop: Cards two-three per row, forms inline where space allows.Bottom nav always docked; mocks mobile “tab bar” for web.14. ICONSUse Material Icons throughout: e.g.Dashboard, Quiz, SmartToy, Settings, ChevronRight, ArrowBack, Delete, Add, FlashOn, Timer, Star, AutoAwesome15. ADDITIONAL FUNCTIONALITYAll navigation implemented and responsive.Implement React Context or Redux store for persistent state.Each form has controlled state, resets properly.Quiz actions (preview, edit, play) print to console or show dummy modal/snackbar.Your task is to generate the complete web application as per the above specifications and the provided screenshots. Apply the utmost care to faithfully translate every UI, theme, navigation, layout, color, icon, and interaction detail to the web, using the Material Design philosophy for an outstanding user experience.