Add AGENTS

AGENTS.md

@@ -0,0 +1,131 @@
+Create a complete responsive Foreign Exchange Dashboard using HTML, CSS, and JavaScript in a single HTML file.
+
+Use this API:
+https://github.com/fawazahmed0/exchange-api
+
+Use these API endpoint patterns:
+Primary:
+https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/{baseCurrency}.json
+
+Historical:
+https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@YYYY-MM-DD/v1/currencies/{baseCurrency}.json
+
+Fallback:
+https://latest.currency-api.pages.dev/v1/currencies/{baseCurrency}.json
+https://YYYY-MM-DD.currency-api.pages.dev/v1/currencies/{baseCurrency}.json
+
+Build a polished foreign exchange dashboard with the following features:
+
+1. Current value section
+- Show the selected base currency and target currency.
+- Display the latest exchange rate prominently.
+- Include daily percentage change if historical data is available.
+- Add small status badges such as “Uptrend,” “Downtrend,” or “Stable.”
+
+2. Currency table or list
+- Show a searchable and sortable table of currency exchange rates.
+- Include currency code, currency name if available, current rate, change percentage, and trend direction.
+- Highlight strongest and weakest currencies.
+
+3. Candlestick chart
+- Add a candlestick-style chart for the selected currency pair.
+- Since the API provides daily exchange rates, build historical candles using daily values.
+- Use previous day rate as open and current day rate as close.
+- Estimate high and low based on the daily range or volatility.
+- Clearly label the candlestick chart as “daily estimated candles.”
+
+4. Line chart
+- Add a clean historical line chart showing exchange rate movement over time.
+- Let users choose 7 days, 14 days, 30 days, and 90 days.
+- Use Chart.js or a lightweight chart library through CDN.
+
+5. Calculator
+- Add a currency converter calculator.
+- Inputs:
+  - Amount
+  - From currency
+  - To currency
+- Output the converted amount instantly.
+- Update the result whenever the user changes amount or currency.
+
+6. Pattern and trend analysis
+- Detect simple market patterns using JavaScript:
+  - Uptrend
+  - Downtrend
+  - Sideways movement
+  - Breakout
+  - Volatility spike
+  - Moving average crossover
+- Show a short explanation for each detected pattern.
+
+7. AI insight panel
+- Create an “AI Insight” card.
+- Generate smart, human-readable insights based on the exchange rate data.
+- Do not use a paid AI API.
+- Use rule-based analysis that feels intelligent.
+- Example insights:
+  - “USD/PHP is showing mild upward pressure over the last 7 days.”
+  - “Volatility is higher than usual, so short-term movement may be unstable.”
+  - “The current price is above its 7-day moving average, suggesting bullish momentum.”
+
+8. Heatmap
+- Add a currency strength heatmap.
+- Compare major currencies such as USD, EUR, GBP, JPY, AUD, CAD, CHF, CNY, SGD, and PHP.
+- Use cool colors only.
+- Use blue, cyan, teal, navy, slate, and soft green tones.
+- Do not use purple.
+- Strong currencies should appear brighter or more saturated.
+- Weak currencies should appear darker or muted.
+
+9. Light and dark mode
+- Add a toggle for light mode and dark mode.
+- Save the user’s selected theme using localStorage.
+- Design both themes carefully.
+- Light mode should feel clean and airy.
+- Dark mode should feel professional and finance-focused.
+
+10. Visual and design requirements
+- Use a modern dashboard layout.
+- Color palette must use cool colors only.
+- Avoid purple completely.
+- Suggested colors:
+  - Navy
+  - Deep blue
+  - Cyan
+  - Teal
+  - Slate
+  - Ice blue
+  - Soft mint
+- Use glassmorphism or subtle card shadows.
+- Use rounded cards, clean spacing, and responsive grids.
+- Make it look like a professional fintech dashboard.
+- Add smooth hover states and transitions.
+- Make the dashboard fully responsive for desktop, tablet, and mobile.
+
+11. UX requirements
+- Add currency selectors for base and target currency.
+- Add loading states while fetching data.
+- Add error handling if the API request fails.
+- Use the fallback API automatically if the primary API fails.
+- Add refresh button.
+- Add last updated timestamp.
+- Make all charts and values update when the selected currencies change.
+
+12. Technical requirements
+- Put everything in one HTML file.
+- Include HTML, CSS, and JavaScript.
+- Use semantic HTML.
+- Use CSS variables for themes.
+- Use async/await for API calls.
+- Use clean reusable JavaScript functions.
+- Comment important sections of the code.
+- Avoid unnecessary frameworks.
+- CDN libraries are allowed for charts only.
+- The final output should be ready to copy, paste, and run in a browser.
+
+Important:
+- Do not use purple anywhere in the UI.
+- Make the design visually impressive.
+- The dashboard should not be static.
+- It must fetch real exchange-rate data from the provided API.
+- If exact OHLC data is not available, clearly present the candlestick as estimated from daily exchange-rate values.