diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..1d9aefc --- /dev/null +++ b/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.