pure-app

I already have an existing app version built with HTML, CSS, and JavaScript, but you cannot access those files here. So use this description as the source of truth and build a cleaner, more stable, more maintainable version of the same app. Build a premium mobile-first web app called: LifeFlow – Tasks, Habits & Money Manager This is an all-in-one life management app for students and young builders. It should feel like a polished premium product, not a basic CRUD app. Important: - Do NOT make a generic dashboard app - Do NOT oversimplify - Do NOT remove feature depth - Keep it mobile-first - Keep it premium - Use HTML, CSS, and vanilla JavaScript style logic if possible - Prioritize stability, clean structure, and maintainability ================================================== APP STRUCTURE ================================================== Bottom navigation screens: 1. Home 2. Planner 3. Habits 4. Money 5. Notes ================================================== HOME SCREEN ================================================== Include: - time-based greeting - current date - hero stats - quick add buttons - motivational quote - preview of today’s tasks - habits today - money today - debts overview - recent notes - goals preview - mood preview - focus timer card ================================================== PLANNER SCREEN ================================================== Task management system with: - add task - edit task - delete task - mark complete - filters: today, tomorrow, week, all - search - sort by time, priority, category - task cards with: - title - description - date - start/end time - priority - category ================================================== HABITS SCREEN ================================================== Habit tracker with: - add/edit/delete habit - daily tracking - streaks - date-based status - sections: - in progress - missed - skipped - completed - challenges: - 21 days - 30 days - 66 days - custom - analytics tab - weekly chart - monthly heatmap - habit performance view ================================================== MONEY SCREEN ================================================== This screen has 3 inner tabs: 1. Expenses 2. Shared 3. Debts ------------------------------------------ EXPENSES TAB ------------------------------------------ - add income/expense - edit/delete entry - monthly budget - net balance - income - expenses - savings rate - top category - weekly spend - pending dues - no-spend streak - selected range summary - smart insight - date filters: - all - today - 7 days - month - custom/more - expense categories including custom category support ------------------------------------------ SHARED TAB ------------------------------------------ Mini Splitwise-style feature: - add/edit/delete shared expense - manage members - manage shared categories/sections - fields: - amount - date - category - paid by - description - note - split among - equal split by default - expandable expense cards - per-expense split details - who pays whom logic - category filters - time filters - compact clean UI - avoid crowded layout ------------------------------------------ DEBTS TAB ------------------------------------------ - add/edit/delete debt - debt types: - you gave - you owe - status: - pending - paid - totals: - to receive - you owe ================================================== NOTES SCREEN ================================================== Notes system must be strong and polished: - add/edit/delete note - pin note - search notes - note detail view - two types: 1. text note 2. todo note - pinned notes section - note categories - smooth notes UX - notes should feel enhanced and premium ================================================== OTHER FEATURES ================================================== - mood logging with emoji and journal - goals system with progress - focus timer with presets and custom minutes - user profile panel with avatar/name/bio/stats - dark/light theme - local-first persistence ================================================== IMPORTANT FIX GOALS ================================================== Build this app in a cleaner and more stable way than a typical quick prototype. Focus on: - correct HTML structure - stable tab switching - stable bottom navigation - stable modals - no duplicate IDs - no broken wrappers - no fragile DOM logic - safe rendering - maintainable code structure - reliable local persistence - smooth mobile layout If rings/charts/canvas elements are used, only keep them if stable. Do not let decorative features break the app. ================================================== UI DIRECTION ================================================== - premium, cinematic, modern UI - glassmorphism - gradients - rounded cards - soft shadows - mobile app feel - clean spacing - elegant typography - strong hierarchy - polished empty states ================================================== OUTPUT ================================================== Provide: 1. short audit summary 2. implementation plan 3. full app code 4. changelog 5. test checklist Final goal: Create a premium, stable, production-style version of this app concept called: LifeFlow – Tasks, Habits & Money Manager