ExchangeRate.fun 🌐

Conversão de moedas em tempo real — Fiat + Cripto + Gráficos

✨ Novidades da

• Bootstrap 5.3.8 — Layout responsivo via CDN (css + js bundle)
• Material Design 3 — Visual completo com sistema de cores Material, elevation/shadows, ripple effects, cards arredondados, FABs, chips, tipografia Inter
• Material Icons — Substituição total de emojis por Material Icons Outlined via CDN
• Criptomoedas — Integração com CoinGecko API (sem chave!)
  • Conversor de cripto → moeda fiduciária
  • Lista das Top 10 criptos com preço e variação 24h
  • Gráfico histórico de criptomoedas (1d a 1 ano)
• Dark Mode — Alternância com ícone, respeitando preferência do sistema
• 4 Seções — Moedas Fiat, Cripto, Histórico, Gráficos
• Navegação Mobile — Bottom navigation em telas pequenas

🛠️ Tecnologias

Tecnologia	Versão	Uso
Bootstrap	5.3.8	Grid, utilitários, bundle JS
Material Icons	Outlined	Ícones em toda a UI
Inter	Google Fonts	Tipografia Material
Chart.js	4.4.7	Gráficos de variação
Frankfurter API	—	Cotações fiat (BCE)
CoinGecko API	v3	Preços e gráficos de cripto

🚀 Como Usar

1. Clone ou baixe este repositório
2. Abra index.html no navegador — funciona 100% client-side!
3. Nenhuma dependência para instalar (tudo via CDN)

# Ou sirva com qualquer servidor estático:
npx serve .
# ou
python3 -m http.server 8000

📂 Estrutura

ExchangeRate.fun/
├── index.html      ← Página principal (Bootstrap + Material Icons)
├── styles.css       ← Material Design 3 completo (light/dark)
├── app.js           ← Lógica: Fiat + Crypto + Charts
├── types.ts         ← Definições TypeScript
├── tsconfig.json    ← Config do TypeScript
└── README.md

🔌 APIs

Frankfurter (Fiat)

• URL: https://api.frankfurter.app
• Auth: Nenhuma necessária
• Endpoints: /latest, /{date}..{date}
• Fonte: Banco Central Europeu

CoinGecko (Cripto)

• URL: https://api.coingecko.com/api/v3
• Auth: Nenhuma necessária (API pública)
• Rate limit: ~10-30 calls/min (por IP)
• Endpoints:
  • GET /simple/price — Preço de moedas específicas
  • GET /coins/markets — Top N com dados de mercado
  • GET /coins/{id}/market_chart — Gráfico histórico

Nota: A CoinGecko API pública tem rate limit por IP. Em caso de erro 429, aguarde alguns segundos e tente novamente.

🎨 Design System

Paleta de Cores (Light)

• Primary: #4f46e5 (Indigo 600)
• Crypto: #f59e0b (Amber 500)
• Surface: #fef7ff
• On Surface: #1c1b1f

Paleta de Cores (Dark)

• Primary: #b8b0ff
• Crypto: #fbbf24
• Surface: #141218
• On Surface: #e6e1e5

Elevação (Shadows)

• Level 1–4 com box-shadow progressivo
• Cards: elevation-2 (repouso) → elevation-3 (hover)

Componentes Material

• Cards com border-radius: 16px
• FABs com border-radius: 16px
• Chips/pílulas com border-radius: 9999px
• Ripple effect em botões e FABs
• Snackbar para notificações
• Dropdowns com busca para seletores de moeda

📱 Responsividade

• Desktop: Layout com grid Bootstrap, tabs no app bar
• Mobile (<768px): Bottom navigation, layout empilhado

📄 Licença

MIT — Use livremente!

---

ExchangeRate.fun © 2026