📱 QR Code Generator (Gerador Local)

Um gerador de QR Code rápido, belo e 100% focado em privacidade, construído com Vanilla JS, CSS responsivo e uma arquitetura moderna orientada a objetos.

Versão em Português (PT-BR) | English Version (EN)

---

🇧🇷 Versão em Português

📋 Sobre o Projeto

O QR Code Generator é um aplicativo web ("Portable Web App") que foi completamente refatorado visando arquitetura limpa, dependência invertida (SOLID), segurança OWASP e alta modularidade. Todo o processamento do QR Code é feio 100% localmente no navegador do usuário — nenhum dado é enviado a servidores externos, garantindo privacidade absoluta.

🎯 Funcionalidades

• Geração Instantânea: Digite qualquer texto ou URL e o QR Code aparece na hora.
• Personalização Visual: Escolha tamanhos (Pequeno a Extra Grande) e paleta cromática (Módulos e Fundo).
• Sem Servidor Externo: Funciona de forma integral usando o processamento da própria máquina.
• Exportação Simples: Transfira para a Área de Transferência ou faça Download via .png.
• Theme Manager: Alternância suave entre Modo Claro ☀️ e Dark Mode 🌙 salvo na memória (LocalStorage).
• Defesa Ativa (OWASP): Sanitização avançada de inputs removendo control chars para evitar injeção XSS.

🏗️ Estrutura Técnica (System Modules ES6)

A aplicação sofreu forte modularização. O monólito index.html original deu lugar a separação de responsabilidades no front:

• css/ e index.html: Responsáveis pela View limpa e semântica pura.
• js/config.js: Centralização de todas as constantes e "Magic Numbers".
• js/InputSanitizer.js: Defesa de profundidade e controle OWASP A03.
• js/QRCodeRenderer.js: Renderização usando o motor QRious via Canvas.
• js/FormReader.js & js/ResultView.js: Abstração de DOM (leitura e UI).
• js/QRGeneratorApp.js: O grande orquestrador que coordena todas as peças acima via Injeção de Dependência (DIP).

📊 Diagrama de Arquitetura

graph TD
    UI[index.html / CSS] --> Bootstrap[main.js]
    Bootstrap --> Orquestrador[QRGeneratorApp]
    Bootstrap --> Theme[ThemeManager]
    
    Orquestrador --> Reader[FormReader]
    Reader --> Sanitize[InputSanitizer<br/>OWASP Security]
    
    Orquestrador --> Render[QRCodeRenderer]
    Render --> QRious[(Library QRious)]
    
    Orquestrador --> Exporter[QRExporter]
    Exporter --> Feedback[ToastNotifier]
    
    Orquestrador --> View[ResultView]

Loading

🚀 Como Executar Localmente

Devido à modernização da arquitetura para a sintaxe isolada de módulos do ES6 (import/export), abrir o index.html com duplo clique bloqueará os scripts por políticas naturais de CORS do navegador.

Para usar:

1. Abra a pasta qrcode no VS Code.
2. Inicie um Local Web Server (ex: extensão Live Server).
3. E pronto!

---

🇺🇸 English Version

📋 About the Project

The QR Code Generator is a "Portable Web App" completely refactored with a focus on clean architecture, dependency inversion (SOLID rules), OWASP security, and high modularity. All QR Code generation runs 100% locally on the user's browser — no data is sent to external servers, ensuring absolute privacy.

🎯 Features

• Instant Generation: Type any text or URL and watch the QR Code appear on-the-fly.
• Visual Customization: Choose sizes (Small to Extra Large) and custom palettes (Modules and Background).
• Serverless (Client Only): Runs integrally using the device's processing power.
• Easy Exporting: Copy to Clipboard or Download directly as .png.
• Theme Manager: Smooth toggling between Light ☀️ and Dark 🌙 modes, persisted in LocalStorage.
• Active Defense (OWASP): Advanced input sanitization removing control chars to prevent XSS attacks.

🏗️ Technical Structure (ES6 System Modules)

The single monolithic index.html file evolved into a multi-layered structure based on separation of concerns (SRP):

• css/ and index.html: Clean semantic markup and style layers.
• js/config.js: Centralizes all global constants and DOM selectors.
• js/InputSanitizer.js: Core layer for OWASP A03 mitigation (XSS).
• js/QRCodeRenderer.js: Canvas drawing handling wrapping the QRious engine.
• js/FormReader.js & js/ResultView.js: DOM abstraction (read logic & UI changes).
• js/QRGeneratorApp.js: The orchestrator tying all logic via Dependency Injection (DIP).

📊 Architecture Diagram

graph TD
    UI[index.html / CSS] --> Bootstrap[main.js]
    Bootstrap --> Orchestrator[QRGeneratorApp]
    Bootstrap --> Theme[ThemeManager]
    
    Orchestrator --> Reader[FormReader]
    Reader --> Sanitize[InputSanitizer<br/>OWASP Security]
    
    Orchestrator --> Render[QRCodeRenderer]
    Render --> QRious[(QRious Lib)]
    
    Orchestrator --> Exporter[QRExporter]
    Exporter --> Feedback[ToastNotifier]
    
    Orchestrator --> View[ResultView]

Loading

🚀 How to Run Locally

Due to the architectural update and usage of ES6 Modules (import/export), opening index.html as a local file:// will block scripts because of strict browser CORS policies.

To run:

1. Open the qrcode folder in VS Code.
2. Start a Local Web Server (e.g., using the Live Server extension/plugin).
3. You're set! Enjoy.