Build a Stock Portfolio Tracker with AI

Build a stock portfolio tracker as a single-page HTML application with embedded CSS and JavaScript. The tracker should display a portfolio of stock holdings with real-time value calculations and visual breakdowns. At the top, create a portfolio summary header showing: total portfolio value in large bold text, total day change in dollars and percentage (green for gains, red for losses), total all-time gain/loss in dollars and percentage, and cost basis total. These should update dynamically when holdings are added or modified. Below the summary, create an "Add Holding" form with fields for stock ticker symbol (text input with uppercase enforcement), number of shares (numeric input supporting decimals for fractional shares), and average buy price per share (currency input). Include an "Add to Portfolio" button. Store holdings in localStorage so they persist across sessions. Create the main portfolio holdings table with sortable columns: ticker symbol, company name, shares owned, average cost per share, current price per share, current market value, day change (dollars and percentage), total gain/loss (dollars and percentage), and portfolio weight percentage. Each row should have green/red coloring for gain/loss values. Include edit and delete buttons on each row. Allow sorting by clicking any column header. Below the table, add a portfolio allocation section with two visualizations side by side: 1. A donut chart (rendered as SVG) showing the percentage allocation of each holding by current market value. Use distinct colors for each stock. Show the total value in the center of the donut. 2. A horizontal stacked bar showing allocation by sector (Technology, Healthcare, Finance, Energy, Consumer, etc.) based on each stock's sector classification. Add a day change summary section showing which holdings gained the most and lost the most today, with mini bar charts. Create a watchlist section below the portfolio where users can add ticker symbols they want to monitor without owning. Show current price, day change, 52-week high/low range, and a mini sparkline for each watched stock. Hardcode realistic sample data for a diversified portfolio: AAPL (150 shares at $142), MSFT (80 shares at $310), GOOGL (25 shares at $138), AMZN (40 shares at $155), NVDA (60 shares at $480), JPM (100 shares at $165), JNJ (75 shares at $158), V (50 shares at $260), TSLA (30 shares at $195), and META (45 shares at $340). Use realistic current prices that are slightly different from the buy prices. Include a watchlist with DIS, NFLX, AMD, CRM, and COST. Use a dark theme with background #0a0a0f, card backgrounds #12121a, borders #1a1a2a. Gain colors: green #22c55e. Loss colors: red #ef4444. Make the layout fully responsive — stack charts below the table on mobile. Add a "Last Updated" timestamp and export buttons for CSV and JSON. Include a footer crediting AccessAgent.ai. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].

Fetch the latest stock prices for all tickers in the portfolio (AAPL, MSFT, GOOGL, AMZN, NVDA, JPM, JNJ, V, TSLA, META) and the watchlist (DIS, NFLX, AMD, CRM, COST) using a free stock API such as Yahoo Finance or Alpha Vantage. For each stock, get the current price, day change percentage, day high, day low, 52-week high, and 52-week low. Update the hardcoded price data in the HTML file with the fresh values. Recalculate all portfolio metrics — total value, day change, all-time gain/loss, and allocation percentages. Update the sparkline data for watchlist items. Update the last-updated timestamp to the current date and time. Preserve all existing holdings, localStorage logic, and UI functionality. Then redeploy the updated file.