App web offline-first com mapa interativo estilo Google Maps, IA embarcada, identificação de fauna por foto, planejador de viagem com custo real, social feed estilo Instagram com fotos reais da ilha e painel ecológico — tudo em um único arquivo HTML de 593 KB, zero instalação, zero servidor.
|
|
|
|
|
|
| Categoria | Qtd | Destaques |
|---|---|---|
| 🏖️ Praias | 8 | Baía do Sancho, Baía dos Porcos, Cacimba do Padre, Baía do Sueste, Praia do Porto |
| 🏠 Pousadas | 11 | NANNAI ⭐5.0, Canto do Boldró ⭐5.0, Pousada do Vale, Zé Maria |
| 🍽️ Restaurantes | 8 | Restaurante do Vale, Varanda, Xica da Silva, Maré Noronha, O Pico |
| 🍺 Bares | 4 | Dog Bar, Boldró Bar & Sunset, Bar do Meio, Quiosque da Vila |
| 🥾 Trilhas | 5 | Capim Açu (12km), Atalaia, Piquinho, Costa Azul, Abreus |
| 🤿 Mergulho | 3 | Águas Claras (desde 1985), Atlantis Divers, Noronha Divers |
| 🛥️ Passeios | 3 | Pé na Ilha, Canoa Havaiana, Ilha Tour |
| 🛒 Mercados | 4 | Mercadinho Noronha, Empório Orgânico, Minimercado do Porto |
| 🥐 Padarias | 3 | Café Noronha, Padaria da Ilha, Casa de Tapioca |
| 🏥 Saúde | 3 | Hospital São Lucas 24h, Farmácia Noronha, Clínica Odontológica |
# Baixe o arquivo e abra no navegador — zero instalação
open noronha-app-premium-14.html# 1. Fork este repositório
# 2. Settings → Pages → Source: main / (root)
# 3. Acesse: https://seu-usuario.github.io/noronha-appgit clone https://github.com/seu-usuario/noronha-app.git
cd noronha-app
python3 -m http.server 8080 # Python
npx serve . # Node.jsO chat funciona offline por padrão. Para IA real:
// No arquivo HTML (~linha 3245):
headers: {
'Content-Type': 'application/json',
'x-api-key': 'SUA_CHAVE_ANTHROPIC_AQUI',
'anthropic-dangerous-direct-browser-access': 'true'
},
body: JSON.stringify({
model: 'claude-sonnet-4-6', // ✅ já configurado
max_tokens: 2500,
messages: [{ role: 'user', content: prompt }]
})🔑 Chave em console.anthropic.com
⚠️ Em produção use sempre um proxy/backend — nunca exponha a chave no frontend.
noronha-app-premium-14.html (593 KB — arquivo único, zero dependências)
│
├── 🗺️ Leaflet 1.9.4 + MarkerCluster 1.5.3 (CDN com fallback triplo)
├── 🔤 Google Fonts: Cormorant Garamond + Plus Jakarta Sans
│
├── DATA[] ── 55 locais com coordenadas, avaliações e metadados
├── Claude API ── Wizard de roteiro personalizado por IA
├── iNaturalist API ── Identificação de fauna por foto (gratuita)
├── TPA_TABLE ── Tabela progressiva oficial TPA 2026
├── OFFLINE_DB ── Base local (praias, fauna, FAQ, marés, trilhas)
│
├── 📱 Mobile → Tab bar inferior + peek bar + bottom sheet
├── 🖥️ Desktop → Sidebar 380px + FABs empilhados à direita
└── 📴 Offline → Motor v2 com busca inteligente nos 55 locais
| Mobile (≤768px) | Desktop (≥769px) | |
|---|---|---|
| Navegação | Tab bar fixa no rodapé | FABs à direita do mapa |
| Lista de locais | Peek bar + bottom sheet | Sidebar 380px |
| Mapa | Tela cheia | Área direita (sidebar 380px) |
| Busca | Pill flutuante no topo | Campo integrado na sidebar |
| Tecnologia | Versão | Uso |
|---|---|---|
| HTML5 / CSS3 / JS | — | App completo em arquivo único |
| Leaflet.js | 1.9.4 | Mapa interativo OpenStreetMap |
| MarkerCluster | 1.5.3 | Agrupamento de marcadores |
| Claude Sonnet | 4.6 | Roteiros e chat IA |
| iNaturalist CV | API v1 | Identificação de espécies |
| Web Notifications | — | Alertas de maré |
| localStorage | — | Diário de fauna e preferências |
noronha-app/
├── 📄 noronha-app-premium-14.html # App completo (arquivo único, 593 KB)
├── 📄 README.md # Este arquivo
├── 📄 LICENSE # MIT License
├── 📄 CONTRIBUTING.md # Como contribuir e adicionar locais
└── 📄 .gitignore # Ignora .env, DS_Store, node_modules
git checkout -b feature/minha-feature
git commit -m 'feat: descrição'
git push origin feature/minha-feature
# Abra um Pull Request// Dentro do array DATA[] no HTML:
{
id: 99, // ID único
cat: 'restaurante', // categoria
n: 'Nome',
r: 4.7, // avaliação
c: 150, // nº avaliações
lat: -3.8441,
lng: -32.4058,
a: 'Endereço',
t: 'Descrição curta',
p: '+55 81 99999-9999', // opcional
ig: 'instagram_handle', // opcional
site: 'https://...', // opcional
}- 📍 Novos locais com coordenadas verificadas
- 🌐 Tradução EN / ES
- 🔌 API real de passagens (Travelpayouts)
- 📲 PWA com Service Worker
- 🗺️ Tiles offline
- Mapa interativo com 55 locais
- Chat IA com motor offline v2
- Wizard com TPA 2026 oficial
- Identificador de fauna (iNaturalist)
- Social feed estilo Instagram
- Fotos reais embutidas (base64, offline)
- Tab bar mobile + FABs desktop
- Painel Eco com leis e dados oficiais
- PWA com Service Worker
- API real de passagens (Travelpayouts)
- Backend Social (posts persistentes)
- iOS/Android via Capacitor
- Multilíngue (EN / ES)
Preços de passagens e hospedagem são estimativas demonstrativas. TPA e Parnamar seguem tabelas oficiais 2026 sujeitas a alteração. Consulte:
MIT — veja LICENSE.
