Merge pull request #15 from lucasrguerra/docs/screenshots

Docs: interface screenshots in the READMEs and docs/interface.md

README.md

@@ -2,10 +2,12 @@
 <h1 align="center">Guará</h1>
 <p align="center">Free file recovery for hard drives, SSDs and USB sticks.<br>Terminal and graphical interface · Windows, Linux and macOS · read-only on the source.</p>
 
-<p align="center"><a href="docs/support.md">What it supports</a> · <a href="docs/cli.md">Terminal</a> · <a href="docs/architecture.md">Architecture</a> · <a href="ROADMAP.md">Roadmap</a> · <a href="CHANGELOG.md">Changelog</a></p>
+<p align="center"><a href="docs/support.md">What it supports</a> · <a href="docs/interface.md">Interface</a> · <a href="docs/cli.md">Terminal</a> · <a href="docs/architecture.md">Architecture</a> · <a href="ROADMAP.md">Roadmap</a> · <a href="CHANGELOG.md">Changelog</a></p>
 
 <p align="center"><b>English</b> · <a href="README.pt-BR.md">Português</a></p>
 
+<p align="center"><img src="docs/img/explorer-light-en.png" width="900" alt="The Guará explorer showing recovered photos grouped by month, with a sidebar to filter and a details panel on the right"><br><sub>The real interface running on a synthetic test image (generated photos, no real data).</sub></p>
+
 ---
 
 In a single scan, Guará does what tools like Recuva, PhotoRec, TestDisk and Disk Drill do separately:
@@ -67,7 +69,9 @@ Other commands (`inspect`, `health`, `hash`, `search`, `export`, `report`, `veri
 
 ## Graphical interface
 
-A desktop app (Tauri) in the style of a file manager, designed for when Guará finds thousands of items. The same front end runs in the browser with `guara ui`.
+A desktop app (Tauri) in the style of a file manager, designed for when Guará finds thousands of items. The same front end runs in the browser with `guara ui`. More screenshots and details in **[docs/interface.md](docs/interface.md)**.
+
+<p align="center"><img src="docs/img/explorer-dark-en.png" width="640" alt="The explorer in the dark theme"> <img src="docs/img/settings-language-en.png" width="250" alt="Settings with the language selector"></p>
 
 - **Thumbnail grid** or **list**, grouping by day or month and virtual scrolling for tens of thousands of files.
 - **Sidebar navigation** by type, real photo date (EXIF), folder, camera, confidence and GPS, with an option to hide duplicates.

README.pt-BR.md

@@ -2,10 +2,12 @@
 <h1 align="center">Guará</h1>
 <p align="center">Recuperação de arquivos livre e gratuita para HD, SSD e pendrive.<br>Terminal e interface gráfica · Windows, Linux e macOS · somente leitura na origem.</p>
 
-<p align="center"><a href="docs/pt-BR/suporte.md">O que suporta</a> · <a href="docs/pt-BR/cli.md">Terminal</a> · <a href="docs/pt-BR/arquitetura.md">Arquitetura</a> · <a href="ROADMAP.pt-BR.md">Roadmap</a> · <a href="CHANGELOG.pt-BR.md">Changelog</a></p>
+<p align="center"><a href="docs/pt-BR/suporte.md">O que suporta</a> · <a href="docs/pt-BR/interface.md">Interface</a> · <a href="docs/pt-BR/cli.md">Terminal</a> · <a href="docs/pt-BR/arquitetura.md">Arquitetura</a> · <a href="ROADMAP.pt-BR.md">Roadmap</a> · <a href="CHANGELOG.pt-BR.md">Changelog</a></p>
 
 <p align="center"><a href="README.md">English</a> · <b>Português</b></p>
 
+<p align="center"><img src="docs/img/explorer-light-pt.png" width="900" alt="O explorador do Guará mostrando fotos recuperadas agrupadas por mês, com a barra lateral para filtrar e o painel de detalhes à direita"><br><sub>A interface de verdade rodando sobre uma imagem de teste sintética (fotos geradas, sem dados reais).</sub></p>
+
 ---
 
 O Guará junta, numa única varredura, o que ferramentas como Recuva, PhotoRec, TestDisk e Disk Drill fazem separadamente:
@@ -67,7 +69,9 @@ Outros comandos (`inspect`, `health`, `hash`, `search`, `export`, `report`, `ver
 
 ## Interface gráfica
 
-App desktop (Tauri) no estilo de um gerenciador de arquivos, pensado para quando o Guará acha milhares de itens. O mesmo front-end roda no navegador com `guara ui`.
+App desktop (Tauri) no estilo de um gerenciador de arquivos, pensado para quando o Guará acha milhares de itens. O mesmo front-end roda no navegador com `guara ui`. Mais telas e detalhes em **[docs/pt-BR/interface.md](docs/pt-BR/interface.md)**.
+
+<p align="center"><img src="docs/img/explorer-dark-pt.png" width="640" alt="O explorador no tema escuro"> <img src="docs/img/settings-language-pt.png" width="250" alt="Configurações com o seletor de idioma"></p>
 
 - **Grade de miniaturas** ou **lista**, agrupamento por dia ou mês e rolagem virtual para dezenas de milhares de arquivos.
 - **Navegação lateral** por tipo, data real da foto (EXIF), pasta, câmera, confiança e GPS, com opção de ocultar duplicadas.

docs/architecture.md

@@ -76,7 +76,9 @@ The interface is a single page (`apps/gui/ui`). There are two ways to run it:
 - **Desktop app (Tauri):** the window loads the page and talks to the core directly.
 - **`guara ui`:** the binary starts a token-protected server on `127.0.0.1` and opens the browser.
 
-Because the front end is the same, everything that exists in one exists in the other.
+Because the front end is the same, everything that exists in one exists in the other. See [interface.md](interface.md) for what it looks like.
+
+<p align="center"><img src="img/explorer-light-en.png" width="720" alt="The Guará explorer"></p>
 
 ## Design decisions
 

docs/interface.md

@@ -0,0 +1,36 @@
+# Graphical interface
+
+[English](interface.md) · [Português](pt-BR/interface.md)
+
+Guará has a desktop app (Tauri) and the same front end in the browser with `guara ui`. Everything below exists in both.
+
+<p align="center"><img src="img/explorer-light-en.png" width="900" alt="The Guará explorer showing recovered photos grouped by month, with a sidebar to filter and a details panel on the right"></p>
+
+## The explorer
+
+After a scan, results open in a file-manager style explorer built for thousands of items:
+
+- **Left:** navigation by type, real photo date (EXIF, by year and month), folder, camera, confidence and GPS, with an option to hide small files and duplicates.
+- **Center:** thumbnail grid or list, grouped by day or month, with virtual scrolling. A filter chip shows what is active and clears it in one click.
+- **Right:** details panel with the preview, folder, dates (taken, modified, created, accessed), camera, resolution and the file metadata. The badge shows the **confidence** of the file (high, medium or low).
+- **Bottom bar:** selection count and the recovery buttons. Recovery always goes to another folder and writes a manifest with MD5, SHA-1 and SHA-256.
+
+Arrow keys move through the files, and Space opens the full-screen quick look. Selection works like Finder or Explorer (Ctrl, Shift, keyboard).
+
+## Themes
+
+The switch at the bottom of the sidebar offers **Auto** (follows the system), **Light** and **Dark**. The choice is saved.
+
+<p align="center"><img src="img/explorer-dark-en.png" width="900" alt="The same explorer in the dark theme"></p>
+
+## Language
+
+**Settings** (the gear at the bottom of the sidebar) has a **Language** selector: **Auto** follows the system language, or you can pick **Português** or **English**. The change applies right away. The same dialog controls notifications for long tasks and online maps for photos with GPS (off by default, because it downloads OpenStreetMap tiles).
+
+<p align="center"><img src="img/settings-language-en.png" width="420" alt="The Settings dialog with the Language selector set to English"></p>
+
+Error messages that come from the core, and the terminal output, are still in Portuguese.
+
+## About these screenshots
+
+They show the real interface, not a mock-up, running on a synthetic test image: 72 generated JPEGs with fake EXIF (cameras, dates, GPS) that were deleted from a FAT32 image by `scripts/make-photo-fixture.py` and found by a normal `guara scan`. No real data appears. The device name in the sidebar was replaced with a generic one.

docs/pt-BR/arquitetura.md

@@ -76,7 +76,9 @@ A interface é uma página só (`apps/gui/ui`). Há duas formas de rodá-la:
 - **App desktop (Tauri):** a janela carrega a página e fala com o núcleo diretamente.
 - **`guara ui`:** o binário sobe um servidor em `127.0.0.1` protegido por token e abre o navegador.
 
-Como o front-end é o mesmo, tudo que existe em um existe no outro.
+Como o front-end é o mesmo, tudo que existe em um existe no outro. Veja como ele é em [interface.md](interface.md).
+
+<p align="center"><img src="../img/explorer-light-pt.png" width="720" alt="O explorador do Guará"></p>
 
 ## Decisões de projeto
 

docs/pt-BR/interface.md

@@ -0,0 +1,36 @@
+# Interface gráfica
+
+[English](../interface.md) · **Português**
+
+O Guará tem um app desktop (Tauri) e o mesmo front-end no navegador com `guara ui`. Tudo o que está abaixo existe nos dois.
+
+<p align="center"><img src="../img/explorer-light-pt.png" width="900" alt="O explorador do Guará mostrando fotos recuperadas agrupadas por mês, com a barra lateral para filtrar e o painel de detalhes à direita"></p>
+
+## O explorador
+
+Depois da varredura, os resultados abrem num explorador no estilo de um gerenciador de arquivos, pensado para milhares de itens:
+
+- **Esquerda:** navegação por tipo, data real da foto (EXIF, por ano e mês), pasta, câmera, confiança e GPS, com opção de ocultar arquivos pequenos e duplicadas.
+- **Centro:** grade de miniaturas ou lista, agrupadas por dia ou mês, com rolagem virtual. Uma etiqueta mostra o filtro ativo e o remove com um clique.
+- **Direita:** painel de detalhes com a pré-visualização, pasta, datas (tirada, modificada, criada, acessada), câmera, resolução e os metadados do arquivo. O selo mostra a **confiança** do arquivo (alta, média ou baixa).
+- **Barra inferior:** quantidade selecionada e os botões de recuperação. A recuperação sempre vai para outra pasta e grava um manifesto com MD5, SHA-1 e SHA-256.
+
+As setas navegam pelos arquivos e a barra de espaço abre a visualização rápida em tela cheia. A seleção funciona como no Finder ou no Explorer (Ctrl, Shift e teclado).
+
+## Temas
+
+O seletor no fim da barra lateral oferece **Auto** (acompanha o sistema), **Claro** e **Escuro**. A escolha fica salva.
+
+<p align="center"><img src="../img/explorer-dark-pt.png" width="900" alt="O mesmo explorador no tema escuro"></p>
+
+## Idioma
+
+Em **Configurações** (a engrenagem no fim da barra lateral) há o seletor **Idioma**: **Auto** acompanha o idioma do sistema, ou você escolhe **Português** ou **English**. A troca vale na hora. A mesma janela controla as notificações de tarefas longas e os mapas online das fotos com GPS (desligados por padrão, porque baixam blocos do OpenStreetMap).
+
+<p align="center"><img src="../img/settings-language-pt.png" width="420" alt="A janela de Configurações com o seletor de Idioma"></p>
+
+As mensagens de erro que vêm do núcleo e a saída do terminal continuam em português.
+
+## Sobre estas telas
+
+Mostram a interface de verdade, não uma maquete, rodando sobre uma imagem de teste sintética: 72 JPEGs gerados com EXIF falso (câmeras, datas, GPS), apagados de uma imagem FAT32 por `scripts/make-photo-fixture.py` e encontrados por um `guara scan` normal. Nenhum dado real aparece. O nome do dispositivo na barra lateral foi trocado por um genérico.