WealthOS, birikimini, aylık nakit akışını ve finansal özgürlüğe ne kadar uzak olduğunu gösteren kişisel bir servet planlama panosu. Prompt; net varlık grafiği, gelecek hedefleri, "ya şöyle olsaydı" simülatörü, güvenli, dengeli ve agresif senaryo karşılaştırması ile işlem listesini tek tek tarif ediyor.
Her şeyin tek bir index.html dosyasında, sunucu, veritabanı ve giriş ekranı olmadan çalışması isteniyor. Panel ilk açılışta örnek verilerle dolu geliyor, bir de "Reset Demo" düğmesi var. Prompt İngilizce.
Build a complete, highly polished web application called **WealthOS** — a futuristic personal wealth planning and financial simulation dashboard. The goal is to make this feel like a premium fintech startup product worth millions of dollars, while keeping the entire project extremely simple technically. ## TECHNICAL REQUIREMENTS - The entire application MUST be contained inside **ONE single `index.html` file**. - Use only HTML, CSS and vanilla JavaScript. - NO backend. - NO database. - NO login/authentication. - NO API keys. - NO build tools. - NO frameworks. - NO npm. - NO server required. - It must work simply by double-clicking `index.html` and opening it in a browser. - Do not split CSS or JavaScript into separate files. - Do not use placeholder buttons. Every visible interactive element should work. - Save user settings and financial data using `localStorage`. - All calculations and charts must work locally. - Do not fetch financial information from the internet. - Use realistic demo data on first launch. ## PRODUCT CONCEPT WealthOS helps users answer: **"If I continue living and investing like this, what will my financial life look like in the future?"** The user can enter: - Current age - Current savings - Monthly income - Monthly expenses - Monthly investment amount - Expected annual investment return - Expected annual salary growth - Inflation - Target net worth - Target age The app should instantly calculate and visualize their financial future. ## DESIGN Create an extremely polished modern fintech interface. Visual direction: - Dark premium dashboard - Deep charcoal/black background - Glassmorphism cards - Subtle gradients - Beautiful typography - Smooth animations - Rounded panels - Small glowing accents - Professional fintech aesthetic - Inspired by high-end products like Linear, Revolut, Stripe and modern investment dashboards - NOT a generic Bootstrap dashboard Include a left sidebar with: - Overview - Projection - Goals - Scenarios - Transactions At the top show: **Good evening, Alex** and a small subtitle: **Here's how your financial future is looking.** ## OVERVIEW DASHBOARD Create four major stat cards: ### Net Worth Example: $48,420 Show: +12.8% this year ### Monthly Cash Flow Example: +$1,240 ### Savings Rate Example: 32% ### Financial Freedom Example: 68% Include small animated indicators and mini visualizations inside cards. ## NET WORTH CHART Create a beautiful large interactive projection chart. Show projected net worth from the user's current age until age 60. The graph should dynamically calculate compound growth using: - current savings - monthly investment - expected annual return - salary growth Display two lines: - Projected Net Worth - Amount Personally Invested Hovering over the chart should display the age and values. Animate the chart when values change. Implement the chart yourself using Canvas or SVG so no external chart library is required. ## FUTURE MILESTONES Automatically calculate milestones such as: **$100K** Estimated age: 27 **$250K** Estimated age: 31 **$500K** Estimated age: 36 **$1M** Estimated age: 42 Present these as attractive milestone cards underneath the chart. If a milestone is not reached within the projection, display: "Beyond current projection" ## WHAT-IF SIMULATOR Create a section called: **What if?** Add interactive sliders for: Monthly investment: $0 – $5,000 Annual return: 0% – 15% Monthly expenses: $500 – $10,000 Income growth: 0% – 15% As sliders move, ALL projections should update instantly. Underneath show a large sentence such as: **Investing an extra $400/month could make you a millionaire 5 years earlier.** Calculate this dynamically. ## SCENARIO COMPARISON Include three scenario cards: ### Safe Lower return assumptions ### Balanced Default assumptions ### Aggressive Higher return assumptions Clicking a scenario updates the projection. Show: - Net worth at 40 - Net worth at 50 - Millionaire age - Total invested - Investment gains Highlight the currently selected scenario. ## FINANCIAL FREEDOM SCORE Create a circular animated score from 0–100. Calculate the score using: - savings rate - emergency fund - investment rate - expense-to-income ratio Show explanatory messages such as: **You're ahead of 68% of your target trajectory.** Also provide three small personalized insights. Example: "Reducing monthly expenses by $250 could move financial freedom forward by 2.3 years." ## GOAL SYSTEM Allow the user to add financial goals. Examples: - Buy a car — $35,000 - House deposit — $80,000 - Emergency fund — $15,000 - Become a millionaire — $1,000,000 Each goal should have: - Target value - Target date - Progress bar - Percentage complete Allow creating and deleting goals. Persist goals using localStorage. ## TRANSACTIONS Add a simple visual transaction section. Provide demo entries such as: Salary +$5,200 Rent -$1,600 Investments -$1,200 Groceries -$420 Allow users to add and delete transactions. Automatically update cash flow statistics. No real banking connection is required. ## DELIGHTFUL DETAILS Add premium micro-interactions: - Animated number counters - Smooth slider updates - Card hover effects - Tooltips - Animated chart transitions - Subtle background effects - Progress animations - Smooth navigation between dashboard sections Include a small green indicator: **● Financial system healthy** ## DEMO EXPERIENCE The application must look impressive immediately after opening it. Populate it with realistic demo data so the dashboard is already visually rich before the user enters anything. Include a small **Reset Demo** button. Make the interface responsive for desktop and mobile, but prioritize a beautiful 16:9 desktop presentation because the application will be demonstrated in a YouTube video. ## FINAL REQUIREMENT Do not explain how to build the app. Do not give me snippets. Generate the COMPLETE finished application as a single `index.html` file. Prioritize: 1. Visual polish 2. Working interactions 3. Smooth animations 4. Accurate local calculations 5. An impressive first-launch experience
Yorumlar
Yorum Yap