RUNE

Nav;Gation

Navegador desktop minimalista, rápido e hackável — feito em Electron, com tabs reais e UI limpa.

Baixar

Navegar sem distrações. Construir sem atrito.

O Nav;Gation é um navegador desktop feito para quem cria: UI minimalista, performance estável, e controles práticos para imprimir, limpar dados locais, e focar no que importa.

* Projeto irmão do ecossistema Steins/Isekai/Nixie. Sem <webview>: páginas locais carregadas direto em index.html.
home.html
+ Nova aba

Home

Carregando arquivos HTML locais com transições suaves e atalhos de produtividade.

Ctrl+L
Abrir página local
F11
Modo TV/Focus
Ctrl+Shift+K
Limpar dados locais

Mock ilustrativo, não é screenshot do app.

O que é o Nav;Gation?

Um navegador desktop minimalista construído em Electron com foco em desempenho estável, multi-abas reais e uma UI que não briga com você. Ao invés de depender de <webview>, o app carrega arquivos HTML locais (como home.html, favoritos.html, etc.) diretamente dentro do index.html, trocando os conteúdos de forma leve e controlada.

Tabs Reais

Abertura/fechamento rápido, persistência opcional e restauração por sessão.

Mini‑modal de utilidades

Limpar dados locais, imprimir, preferências — sempre à mão, sem sobrecarregar.

Estilo limpo

Tema escuro de fábrica, bordas suaves, gradiente neon e micro‑transições.

Principais recursos

v0.1 — work‑in‑progress

Arquitetura sem webview

Conteúdos locais (HTML/CSS/JS) são injetados em contêiner central, reduzindo mistura de contextos e melhorando previsibilidade.

// Exemplo de troca de telas
fetch('favoritos.html').then(r => r.text()).then(html => {
  document.querySelector('#app').innerHTML = html;
});

Abas leves + persistência

Cada aba referencia um arquivo local. Opção de restaurar sessão anterior e pinar páginas-chave.

  • Ctrl+T nova aba • Ctrl+W fechar
  • Ctrl+Tab alternar • Ctrl+Shift+T reabrir

Modo TV/Focus

UI some após inatividade e reaparece ao mover o mouse. Ideal para painéis e dashboards.

Personalização via tempo de inatividade, opacidade e hotkeys.

Utilidades rápidas

Mini‑menu abaixo do botão de configurações: limpar cache/localStorage, imprimir, abrir pasta de dados e mais.

Estilo Steins‑like

Paleta #0f172a / #1e293b com acento #00ffa8, glow radial e toasts elegantes.

Pronto para integrar

Carrega páginas do seu ecossistema (Linkys, IsekaiTracker, Steins;Tracker dashboards) como se fossem apps nativos.

Como usar

  1. 1) Organize suas páginas

    Mantenha home.html, favoritos.html, configuracoes.html na mesma pasta do app. Use caminhos relativos.

  2. 2) Defina a navegação

    Mapeie botões/atalhos para trocar o conteúdo dentro do contêiner #app. Nada de iframes.

  3. 3) Ative o modo TV

    Oculte barras após 10s sem interação. Ideal para painéis de monitoramento ou exibição.

  4. 4) Personalize

    Ajuste a paleta, bordas e toasts no CSS. A ideia é sumir e deixar o conteúdo brilhar.

Snippet de troca de páginas (client-side)
const app = document.getElementById('app');
async function loadView(file){
  const html = await (await fetch(file,{cache:'no-store'})).text();
  app.classList.add('opacity-0','translate-y-2');
  setTimeout(()=>{ app.innerHTML = html; app.classList.remove('opacity-0','translate-y-2'); },150);
}
// Ex.: loadView('favoritos.html')

Arquitetura de alto nível

Fluxo

  • Electron Main: cria janela, gerencia menu/bandeja, hotkeys e permissões.
  • Renderer (index.html): contêiner único com injeção de views locais.
  • Mini‑modal: actions de sistema (limpar dados, imprimir, tema).
  • Persistência: estado de abas e preferências via localStorage.

Boas práticas

  • • Evitar executar scripts remotos por segurança; use assets locais.
  • • Isolar estilos de cada view para evitar vazamentos de CSS.
  • • Hotkeys documentados e consistentes entre views.
  • • Logs simples no console para diagnósticos rápidos.

Roadmap

  • • Página inicial com favoritos dinâmicos
  • • Gerenciador visual de abas (arrastar/soltar)
  • • Tema claro refinado e alto contraste opcional
  • • Integração com Linkys/Isekai/Steins por atalhos
  • • Perfil de uso (pessoal, apresentação, TV)

FAQ

Por que não usar <webview>?

Para simplificar o contexto de execução, reduzir bugs estranhos e manter previsibilidade. Views locais são rápidas e transparentes.

Dá para abrir sites externos?

Sim, mas o foco é conteúdo local. Sites externos podem abrir no navegador padrão via shell.openExternal.

Funciona offline?

Totalmente. Todos os assets podem (e devem) ser locais.

Pronto para navegar do seu jeito?

Baixe o executável, coloque suas páginas na pasta e comece a usar. Nenhum ritual arcano necessário.

* Links meramente ilustrativos nesta página.