The content is constrained to max-w-2xl and the sidebar pushes it. Let me center it properly and make better use of the full width.
Hmm, that inline style won't override the md class properly. Let me do this cleaner:
Content is now centered properly in the remaining space after the sidebar. Fixed.
Fixed — content now centers in the available space next to the sidebar instead of hugging the left.
why is the website toward my left screen
All features, bold & dark, local storage, name: Green. Here's the plan:
Green — Diet & Calorie Tracker
Stack: Managed (React + Vite + Tailwind). Local storage for all data — no DB/auth needed.
Design Direction:
Pages & Features:
Dashboard (Home) — Daily overview: calorie ring chart, macro progress bars (protein/carbs/fat), water intake tracker, quick-add food button, today's meal log summary
Food Log — Meal categories (breakfast/lunch/dinner/snacks), search from built-in food database (~200 common foods with nutritional data), manual food entry, edit/delete entries
Goals — Set daily calorie target, set macro targets (protein/carbs/fat in grams), set water intake goal, set target weight
Analytics — Weekly/monthly calorie & macro charts (line/bar), weight trend chart, streak tracking
Weight Tracker — Log daily weight, visual trend line
Data: All stored in localStorage with a clean hook-based state management pattern.
Let me build it.
green
Now let me add the shadcn components I'll need and then build everything out.
Good. Now let me write the design system doc and then build all the files.
Now let me build the dark theme styles and all the core files. I'll create:
Now let me build all the components and pages:
Now let me build all the pages:
Now update the main app.tsx with routing and layout:
Now delete the old index page and check the build:
Build succeeded. Let me fix that CSS import order warning and restart the preview:
Let me check the site with the browser:
Looking great! Dark theme with green accents, calorie ring, macro bars, water tracker, meal sections all rendering. Let me check a couple more pages to make sure everything works:
Food Log page with day selector looks clean. Let me check the Goals page quickly:
Everything's looking solid. All pages render correctly with the dark fitness aesthetic. Let me deliver it.
Green is live. Here's what you've got:
All data stored in localStorage — no account needed. Works on mobile with bottom nav, desktop with sidebar.
Want to browse website templates for visual inspiration?: No, just pick a good style for me
What vibe/style are you going for?: Bold & dark (fitness app feel)
Which features do you want?: Log food & track calories/protein/carbs/fat, Set daily calorie/macro goals, Daily nutrition summary with progress bars, Food search database (common foods), Meal categories (breakfast/lunch/dinner/snacks), Water intake tracker, Weekly/monthly charts & analytics, Weight tracking
Should data persist (database) or is local/session storage fine?: Local storage (browser only, simpler)
Any specific name for the app? (leave blank and I'll pick one): green
Let me start by reading the website skill and checking my memory for your preferences.
Waiting on your answers to get this right.
make a diet app which tracker u caliroe protein by the food u give etc proper diet website