https://7d4ee783.dica-hugo.pages.dev/Recent content on DicaHugopt-brSat, 08 Aug 2026 00:05:00 +0000https://7d4ee783.dica-hugo.pages.dev/como-criar-nota-modelo-lista-desenho-dicanote/Sat, 08 Aug 2026 00:05:00 +0000https://7d4ee783.dica-hugo.pages.dev/como-criar-nota-modelo-lista-desenho-dicanote/<p>O DicaNote não cria só “nota em branco”. Ao tocar no botão <strong>+</strong>, o app mostra um menu com quatro opções. Este tutorial cobre o básico: <strong>como começar</strong> do jeito certo para cada tipo de conteúdo.</p> <p>Se você ainda não viu o fluxo completo de edição e salvamento, combine este guia com o post <a href="https://7d4ee783.dica-hugo.pages.dev/como-criar-primeira-nota-dicanote/">Como criar sua primeira nota no DicaNote</a>.</p> <figure> <img src="https://7d4ee783.dica-hugo.pages.dev/img/dicanote-tutoriais/dicanote-menu-criar.png" alt="Menu de criação do DicaNote com Create note, Note template, To-Do List e Drawing" width="900" height="2000" decoding="async" fetchpriority="high"> <figcaption>Menu do botão +: nota em branco, modelo, lista de tarefas e desenho.</figcaption> </figure> <h2 id="abra-o-menu-de-criaãão">Abra o menu de criação</h2> <ol> <li>Abra o <strong>DicaNote</strong>.</li> <li>Na tela inicial, toque no botão amarelo <strong>+</strong>, no canto inferior direito.</li> <li>Escolha uma das quatro opções do menu.</li> </ol> <table> <thead> <tr> <th>Opção no app</th> <th>Em português</th> <th>Quando usar</th> </tr> </thead> <tbody> <tr> <td><strong>Create note</strong></td> <td>Criar nota</td> <td>Ideia rápida, texto livre, plano, diário</td> </tr> <tr> <td><strong>Note template</strong></td> <td>Modelo de nota</td> <td>Começar a partir de um modelo salvo</td> </tr> <tr> <td><strong>To-Do List</strong></td> <td>Lista de tarefas</td> <td>Checklist, compras, mala, pendências</td> </tr> <tr> <td><strong>Drawing</strong></td> <td>Desenho</td> <td>Esboço, diagrama, rascunho à mão</td> </tr> </tbody> </table> <div class="bloco-perito dica-img"> <p><strong>Dica:</strong> se estiver em dúvida, use <strong>Create note</strong>. Depois você pode acrescentar checklist, anexos, categoria e etiquetas na barra inferior.</p>https://7d4ee783.dica-hugo.pages.dev/how-to-add-images-files-dicanote/Sat, 08 Aug 2026 00:05:00 +0000https://7d4ee783.dica-hugo.pages.dev/how-to-add-images-files-dicanote/<p>A note can hold more than text. In DicaNote you can attach images, PDFs, audio, and video. For a clean library (and better screenshots), give <strong>each media type its own note</strong>, then link those notes from your main plan.</p> <h2 id="attach-something-to-a-note">Attach something to a note</h2> <ol> <li>Open the note that should receive the file.</li> <li>Tap the <strong>paperclip</strong> on the bottom bar.</li> <li>Choose the content type (image, file, audio, video, and so on).</li> <li>Pick or capture the file.</li> <li>Confirm, then save the note.</li> </ol> <p>Android may ask for permission to photos, camera, microphone, or files. Allow only what that action needs.</p>https://7d4ee783.dica-hugo.pages.dev/how-to-create-note-template-todo-drawing-dicanote/Sat, 08 Aug 2026 00:05:00 +0000https://7d4ee783.dica-hugo.pages.dev/how-to-create-note-template-todo-drawing-dicanote/<p>DicaNote does more than open a blank page. Tap the yellow <strong>+</strong> button and you get a menu with four create options. This guide covers the basics: <strong>which path to use</strong> and <strong>how to start</strong>.</p> <p>For a deeper walkthrough of the editor after you create a blank note, see <a href="https://7d4ee783.dica-hugo.pages.dev/how-to-create-first-note-dicanote/">How to create your first note in DicaNote</a> (local English draft) or the published Portuguese guide <a href="https://7d4ee783.dica-hugo.pages.dev/como-criar-primeira-nota-dicanote/">Como criar sua primeira nota no DicaNote</a>.</p>https://7d4ee783.dica-hugo.pages.dev/how-to-tasks-reminders-dicanote/Sat, 08 Aug 2026 00:05:00 +0000https://7d4ee783.dica-hugo.pages.dev/how-to-tasks-reminders-dicanote/<p>DicaNote supports two practical patterns:</p> <ol> <li><strong>Task notes</strong> — a whole note is a to-do with date and reminder.</li> <li><strong>Checklists inside a note</strong> — items on a packing list or project page.</li> </ol> <h2 id="create-a-task-note">Create a task note</h2> <ol> <li>Create a note (or open an existing one).</li> <li>Mark it as a <strong>task</strong> in the note options (title completion / task controls).</li> <li>Set a <strong>due date</strong> and optional time.</li> <li>Enable a <strong>reminder</strong> if you want a notification.</li> <li>Save.</li> </ol> <p>Examples from the demo library:</p>https://7d4ee783.dica-hugo.pages.dev/how-to-create-first-note-dicanote/Sat, 08 Aug 2026 00:05:00 +0000https://7d4ee783.dica-hugo.pages.dev/how-to-create-first-note-dicanote/<p>DicaNote is built for quick capture. Start with a sentence, then add a title, checklist, category, or link when you need more structure.</p> <p>This tutorial walks through the basic path: create a note, write in it, and save.</p> <figure> <img src="https://7d4ee783.dica-hugo.pages.dev/img/dicanote-tutorials/dicanote-home.png" alt="DicaNote home screen with pinned Weekend trip note, smart search, and create button" width="900" height="2000" decoding="async" fetchpriority="high"> <figcaption>Home shows pinned notes, smart search, and the yellow + button to create.</figcaption> </figure> <h2 id="create-a-note">Create a note</h2> <ol> <li>Open <strong>DicaNote</strong>.</li> <li>Tap the yellow <strong>+</strong> button in the lower right.</li> <li>Choose <strong>Create note</strong> (blank note).</li> <li>Type a title you will recognize later.</li> <li>Write the body of the note.</li> <li>Tap <strong>Save</strong> (disk icon) at the top when you are done.</li> </ol> <div class="bloco-perito dica-img"> <p><strong>Tip:</strong> you do not need perfect folders first. Capture the idea, then add categories or tags only if they help you find it again.</p>https://7d4ee783.dica-hugo.pages.dev/how-to-link-notes-dicanote/Sat, 08 Aug 2026 00:05:00 +0000https://7d4ee783.dica-hugo.pages.dev/how-to-link-notes-dicanote/<p>Linked notes let you keep a <strong>clean hub</strong> (the plan) and open specialized notes when you need them.</p> <h2 id="why-link-instead-of-stacking-files">Why link instead of stacking files</h2> <p>If one card holds images, audio, video, and a PDF, the home preview becomes noisy and hard to teach. Prefer:</p> <ul> <li><strong>Weekend trip</strong> — text plan</li> <li>Linked <strong>Trip photos</strong>, <strong>Road playlist</strong>, <strong>Lookout clip</strong>, <strong>Weekend itinerary</strong></li> </ul> <figure> <img src="https://7d4ee783.dica-hugo.pages.dev/img/dicanote-tutorials/dicanote-weekend-trip.png" alt="Weekend trip hub note linking to Trip photos" width="900" height="2000" decoding="async" fetchpriority="high"> <figcaption>Hub note with a note-link card that previews the photo note.</figcaption> </figure> <h2 id="create-a-note-link">Create a note link</h2> <ol> <li>Open the hub note.</li> <li>Use the <strong>related notes</strong> control (connected nodes) or insert a note link from the editor.</li> <li>Choose the target note (for example Trip photos).</li> <li>Save.</li> </ol> <p>On the home screen, the link can show a thumbnail when the target note has a pinned image.</p>https://7d4ee783.dica-hugo.pages.dev/how-to-organize-notes-dicanote/Sat, 08 Aug 2026 00:05:00 +0000https://7d4ee783.dica-hugo.pages.dev/how-to-organize-notes-dicanote/<p>You do not need a complex folder tree. DicaNote works well with a few <strong>categories</strong>, light <strong>tags</strong>, and <strong>smart search</strong>.</p> <h2 id="categories">Categories</h2> <p>Categories are broad buckets such as Travel, Personal, or Work.</p> <ol> <li>Open a note.</li> <li>Tap the <strong>folder</strong> icon on the bottom bar.</li> <li>Create or select a category.</li> <li>Save the note.</li> </ol> <p>From home, open the categories control (menu icon inside the search bar) to browse by category.</p> <figure> <img src="https://7d4ee783.dica-hugo.pages.dev/img/dicanote-tutorials/dicanote-categories.png" alt="Categories panel in DicaNote with Travel and Personal" width="900" height="2000" decoding="async" fetchpriority="high"> <figcaption>A short category list is enough for most people.</figcaption> </figure> <h2 id="tags">Tags</h2> <p>Tags are flexible labels such as <code>travel</code>, <code>photos</code>, <code>urgent</code>, or <code>ideas</code>.</p>https://7d4ee783.dica-hugo.pages.dev/colorir-foto-preto-e-branco-online/Fri, 07 Aug 2026 22:00:00 +0000https://7d4ee783.dica-hugo.pages.dev/colorir-foto-preto-e-branco-online/<div class="fs-workspace rbg-fs" data-nosnippet> <div id="clr-app" class="rbg-app is-empty"> <header class="rbg-topbar"> <div class="rbg-topbar-left"> <span class="rbg-brand" aria-hidden="true"><svg class="rbg-brand-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg></span> <span class="rbg-brand-text">Colorir P&amp;B</span> <span class="rbg-top-status" id="clr-status" role="status" aria-live="polite">Envie uma foto em preto e branco.</span> </div> <div class="rbg-topbar-actions"> <div class="rbg-primary-wrap"><button type="button" class="rbg-top-btn rbg-top-btn-primary" id="clr-btn-run" disabled title="Colorir"><span class="rbg-btn-label-full">Colorir</span><span class="rbg-btn-label-short">Colorir</span></button><span class="rbg-first-run-hint" id="clr-first-run-hint">1ª vez ~1 min no Wi‑Fi; depois fica rápido</span></div> <button type="button" class="rbg-top-btn" id="clr-btn-cancel" hidden>Cancelar</button> <button type="button" class="rbg-top-btn" id="clr-btn-copy" disabled title="Copiar imagem">Copiar</button> <button type="button" class="rbg-top-btn" id="clr-btn-dl" disabled>Baixar</button> <button type="button" class="rbg-top-btn rbg-top-btn-ghost" id="clr-btn-clear">Limpar</button> </div> </header> <div class="rbg-body"> <main class="rbg-workspace"> <div id="clr-drop" class="rbg-drop" role="button" tabindex="0" aria-label="Enviar foto para colorir" aria-label="Enviar foto para colorir" aria-label="Enviar foto para colorir" aria-label="Enviar foto para colorir"> <div class="rbg-drop-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" width="48" height="48"><path fill="currentColor" d="M21 19V5c0-1.1.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg> </div> <div class="rbg-drop-title">Arraste uma foto em preto e branco</div><div class="rbg-drop-hint">JPG, PNG, WebP · colorir com IA · máx. ~25&nbsp;MB · ou cole com Ctrl+V</div> <div class="clr-drop-actions"> <button type="button" class="rbg-drop-cta itool-drop-cta" id="clr-drop-cta">Escolher imagem</button> <div class="rbg-sample-wrap"><button type="button" class="rbg-stage-bar-btn" id="clr-btn-sample">Usar exemplo</button><span class="rbg-sample-caption">Ou teste com o exemplo</span></div> </div> </div> <label class="sr-only" for="clr-file">Arquivo de imagem</label> <input id="clr-file" class="rbg-file-input" type="file" accept="image/*"> <div id="clr-stage-wrap" class="rbg-stage-wrap" hidden> <div class="rbg-stage-bar"> <button type="button" class="rbg-stage-bar-btn" id="clr-btn-replace">Trocar imagem</button> <span class="rbg-meta" id="clr-meta"></span> </div> <!-- Before/after slider (shown after colorize) --> <div id="clr-ba" class="clr-ba" hidden> <div class="clr-ba-frame"> <img id="clr-ba-color" class="clr-ba-img clr-ba-img--color" alt="Colorida"> <div id="clr-ba-clip" class="clr-ba-clip" style="width:50%"> <img id="clr-ba-gray" class="clr-ba-img clr-ba-img--gray" alt="Original"> </div> <div class="clr-ba-handle" aria-hidden="true"> <span class="clr-ba-line"></span> <span class="clr-ba-knob">⟷</span> </div> <input id="clr-ba-range" class="clr-ba-range" type="range" min="0" max="100" value="50" aria-label="Comparar original e colorida"> </div> <div class="clr-ba-labels"> <span>Original</span> <span>Colorida</span> </div> </div> <div id="clr-compare" class="rbg-compare"> <div class="rbg-pane" id="clr-preview-pane"> <div class="rbg-pane-label">Original</div> <div id="clr-preview-wrap" class="rbg-preview-wrap"> <img id="clr-preview" alt="Original"> </div> </div> <div class="rbg-pane rbg-result-pane" id="clr-result-pane" hidden> <div class="rbg-pane-label">Colorida</div> <div id="clr-result-wrap" class="rbg-result-wrap"> <img id="clr-result" alt="Resultado colorido"> </div> </div> </div> <div id="clr-progress-wrap" class="rbg-progress-wrap" hidden> <div class="rbg-progress-bar"><div class="rbg-progress-fill" id="clr-progress-fill" style="width:0%"></div></div> <div class="rbg-progress-text" id="clr-progress-text"></div> </div> <nav id="clr-next" class="rbg-next" hidden aria-label="Próximos passos"> <span class="rbg-next-label">Próximo:</span> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/melhorar-resolucao-imagem-online/">Melhorar resolução</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/remover-fundo-imagem-online/">Remover fundo</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/comprimir-fotos-reduzir-tamanho-imagem/">Comprimir</a> </nav> </div> </main> <aside class="rbg-rail is-locked" aria-label="Opções"> <div class="rbg-rail-title">Opções</div> <p id="clr-adjust-hint" class="rbg-field-hint" hidden style="margin:0 0 10px">Ajustes abaixo reaplicam <strong>sem</strong> rodar a IA de novo.</p>https://7d4ee783.dica-hugo.pages.dev/como-desenhar-online/Fri, 07 Aug 2026 12:20:00 +0000https://7d4ee783.dica-hugo.pages.dev/como-desenhar-online/<p>Quer <strong>desenhar online</strong> sem instalar app? O quadro do Dica tem caneta, formas, texto, balde e seleção. No final você baixa PNG (pixels) ou SVG (vetor).</p> <div class="itool-tutorial-cta"> <div class="itool-tutorial-cta-text"> <span class="itool-tutorial-cta-kicker">Ferramenta grátis</span> <p class="itool-tutorial-cta-benefit">Caneta, formas e texto no navegador — baixe PNG ou SVG no final.</p> </div> <a class="itool-tutorial-cta-btn" href="https://7d4ee783.dica-hugo.pages.dev/desenhar-online/">Abrir ferramenta</a> </div> <h2>Passo a passo</h2> <ol> <li>Abra o <a href="https://7d4ee783.dica-hugo.pages.dev/desenhar-online/">desenhar online</a>.</li> <li>Escolha a caneta no tray. Formas, texto e balde ficam nos modos ao lado.</li> <li>Desenhe. <kbd>V</kbd> seleciona e move; <kbd>Q</kbd> trava a ferramenta se você quiser ficar no mesmo modo.</li> <li>Baixe PNG para post e print, ou SVG se for redimensionar depois sem perder o traço limpo.</li> </ol> <h2>Dicas rápidas</h2> <ul> <li>Depois de um traço com a caneta, o modo continua na caneta. Não precisa clicar de novo a cada linha.</li> <li>Quer camadas e pincel mais “pintura”? Use o <a href="https://7d4ee783.dica-hugo.pages.dev/pintar-online/">pintar online</a>.</li> <li>Print com seta e tarja? O caminho é o <a href="https://7d4ee783.dica-hugo.pages.dev/anotar-print-online/">anotar print</a>.</li> </ul> <div class="itool-faq"> <details open> <summary>Funciona no celular?</summary> <p>Sim. Toque e arraste no quadro. No desktop o mouse e os atalhos de teclado ajudam mais.</p>https://7d4ee783.dica-hugo.pages.dev/como-redimensionar-imagem-online/Fri, 07 Aug 2026 12:15:00 +0000https://7d4ee783.dica-hugo.pages.dev/como-redimensionar-imagem-online/<p><strong>Redimensionar imagem online</strong> é mudar largura e altura sem abrir editor pesado. Serve para banner, anúncio, foto de perfil ou limite de site. Não é a mesma coisa que “melhorar resolução”: aqui você só altera o tamanho.</p> <div class="itool-tutorial-cta"> <div class="itool-tutorial-cta-text"> <span class="itool-tutorial-cta-kicker">Ferramenta grátis</span> <p class="itool-tutorial-cta-benefit">Mude largura e altura em poucos cliques — sem instalar editor.</p> </div> <a class="itool-tutorial-cta-btn" href="https://7d4ee783.dica-hugo.pages.dev/redimensionar-imagem-online/">Abrir ferramenta</a> </div> <h2>Passo a passo</h2> <ol> <li>Abra o <a href="https://7d4ee783.dica-hugo.pages.dev/redimensionar-imagem-online/">redimensionar imagem online</a>.</li> <li>Envie a foto.</li> <li>Informe a largura ou a altura. Se quiser manter a proporção, deixe a trava de proporção ligada.</li> <li>Baixe o arquivo novo.</li> </ol> <h2>Redimensionar, comprimir e upscale</h2> <ul> <li>Redimensionar muda quantos pixels a imagem tem na tela.</li> <li><a href="https://7d4ee783.dica-hugo.pages.dev/comprimir-fotos-reduzir-tamanho-imagem/">Comprimir</a> reduz o peso em KB; às vezes também encolhe a largura.</li> <li><a href="https://7d4ee783.dica-hugo.pages.dev/melhorar-resolucao-imagem-online/">Melhorar resolução</a> tenta ampliar com IA quando a foto já é pequena demais.</li> </ul> <div class="itool-faq"> <details open> <summary>Funciona no celular?</summary> <p>Sim. Tudo roda no navegador.</p>https://7d4ee783.dica-hugo.pages.dev/como-comprimir-imagem-online/Fri, 07 Aug 2026 12:10:00 +0000https://7d4ee783.dica-hugo.pages.dev/como-comprimir-imagem-online/<p>Anexo de e-mail estourando, WhatsApp recusando o arquivo, site lento por causa de foto gigante: o caminho usual é <strong>comprimir a imagem online</strong>. No Dica isso roda no navegador. Dá para mandar várias de uma vez e baixar em ZIP se preferir.</p> <div class="itool-tutorial-cta"> <div class="itool-tutorial-cta-text"> <span class="itool-tutorial-cta-kicker">Ferramenta grátis</span> <p class="itool-tutorial-cta-benefit">Reduza o peso de JPG, PNG e WebP no navegador — lote e ZIP inclusos.</p> </div> <a class="itool-tutorial-cta-btn" href="https://7d4ee783.dica-hugo.pages.dev/comprimir-fotos-reduzir-tamanho-imagem/">Abrir ferramenta</a> </div> <h2>Passo a passo</h2> <ol> <li>Abra o <a href="https://7d4ee783.dica-hugo.pages.dev/comprimir-fotos-reduzir-tamanho-imagem/">comprimir fotos / reduzir tamanho</a>.</li> <li>Envie uma ou várias imagens.</li> <li>Ajuste a qualidade. Se quiser, limite a largura máxima.</li> <li>Baixe o resultado (ou o ZIP do lote).</li> </ol> <h2>Quando usar outra ferramenta</h2> <ul> <li>Só precisa mudar largura/altura? Use o <a href="https://7d4ee783.dica-hugo.pages.dev/redimensionar-imagem-online/">redimensionar</a>.</li> <li>Foto do iPhone em HEIC no Windows? Converta com <a href="https://7d4ee783.dica-hugo.pages.dev/heic-para-jpg/">HEIC → JPG</a> e, se ainda estiver pesada, comprima.</li> <li>PNG de produto com fundo transparente enorme? Às vezes o caminho é recortar o fundo e exportar de novo; comprimir JPEG de foto “cheia” é outro caso.</li> </ul> <div class="itool-faq"> <details open> <summary>Qual formato baixar?</summary> <p>JPEG costuma ser o menor em foto. PNG quando precisa de transparência ou máxima fidelidade. WebP equilibra tamanho e qualidade se o destino aceitar.</p>https://7d4ee783.dica-hugo.pages.dev/como-melhorar-resolucao-de-imagem/Fri, 07 Aug 2026 12:05:00 +0000https://7d4ee783.dica-hugo.pages.dev/como-melhorar-resolucao-de-imagem/<p><strong>Melhorar a resolução online</strong> (upscale) tenta recuperar nitidez ao ampliar 2× ou 4×. Ajuda em miniatura, print antigo e foto que ficou pequena demais para post ou loja. Não faz milagre: não vira a mesma coisa que uma foto nítida desde o começo.</p> <div class="itool-tutorial-cta"> <div class="itool-tutorial-cta-text"> <span class="itool-tutorial-cta-kicker">Ferramenta grátis</span> <p class="itool-tutorial-cta-benefit">Amplie 2× ou 4× com IA no navegador — ideal para miniatura e print pequeno.</p> </div> <a class="itool-tutorial-cta-btn" href="https://7d4ee783.dica-hugo.pages.dev/melhorar-resolucao-imagem-online/">Abrir ferramenta</a> </div> <figure class="itool-ba-demo"> <img src="https://7d4ee783.dica-hugo.pages.dev/img/tool-samples/ba-melhorar-resolucao.jpg" alt="Antes e depois de upscale: foto borrada e versão com mais nitidez" width="1280" height="720" loading="lazy" decoding="async"> <figcaption>Upscale inventa detalhes plausíveis na ampliação. Olhe o antes/depois com calma antes de publicar.</figcaption> </figure> <h2>Passo a passo</h2> <ol> <li>Abra o <a href="https://7d4ee783.dica-hugo.pages.dev/melhorar-resolucao-imagem-online/">melhorar resolução de imagem online</a>.</li> <li>Envie a imagem (evite arquivos enormes; o limite fica em torno de 25&nbsp;MB).</li> <li>Use 2× na maioria dos casos. 4× só se a foto for bem pequena.</li> <li>Clique em Ampliar. Na 1ª vez o modelo demora, principalmente no Wi‑Fi fraco.</li> <li>Compare no slider e baixe em JPEG, PNG ou WebP.</li> </ol> <h2>Upscale e redimensionar não são a mesma coisa</h2> <p><a href="https://7d4ee783.dica-hugo.pages.dev/redimensionar-imagem-online/">Redimensionar</a> só muda o tamanho dos pixels. Se você estica uma foto pequena, ela borra. O upscale tenta preencher detalhe com IA. Depois de ampliar, se for postar na web, vale <a href="https://7d4ee783.dica-hugo.pages.dev/comprimir-fotos-reduzir-tamanho-imagem/">comprimir</a> para não ficar um arquivo pesado.</p>https://7d4ee783.dica-hugo.pages.dev/como-remover-fundo-de-imagem/Fri, 07 Aug 2026 12:00:00 +0000https://7d4ee783.dica-hugo.pages.dev/como-remover-fundo-de-imagem/<p>Se a ideia é <strong>remover o fundo de uma imagem online</strong> e sair com PNG transparente, dá para fazer no navegador. A ferramenta do Dica roda a IA no seu aparelho. Serve bem para foto de produto, figurinha e recorte de perfil.</p> <div class="itool-tutorial-cta"> <div class="itool-tutorial-cta-text"> <span class="itool-tutorial-cta-kicker">Ferramenta grátis</span> <p class="itool-tutorial-cta-benefit">PNG transparente no navegador — sem instalar e sem enviar a foto para servidor.</p> </div> <a class="itool-tutorial-cta-btn" href="https://7d4ee783.dica-hugo.pages.dev/remover-fundo-imagem-online/">Abrir ferramenta</a> </div> <figure class="itool-ba-demo"> <img src="https://7d4ee783.dica-hugo.pages.dev/img/tool-samples/ba-remover-fundo.jpg" alt="Antes e depois de remover fundo: produto com cenário e PNG transparente" width="1280" height="720" loading="lazy" decoding="async"> <figcaption>À esquerda a foto original; à direita o mesmo objeto sem fundo (o tabuleiro mostra a transparência).</figcaption> </figure> <h2>Passo a passo</h2> <ol> <li>Abra o <a href="https://7d4ee783.dica-hugo.pages.dev/remover-fundo-imagem-online/">remover fundo de imagem online</a>.</li> <li>Mande a foto: arraste, escolha o arquivo ou teste com o exemplo.</li> <li>Clique em Remover fundo. Na primeira vez o modelo baixa uns 84&nbsp;MB; Wi‑Fi ajuda.</li> <li>Olhe o antes/depois no slider e baixe o PNG.</li> <li>Se quiser fundo branco ou cor sólida, use as opções da ferramenta ou o <a href="https://7d4ee783.dica-hugo.pages.dev/png-fundo-online/">fundo no PNG</a>.</li> </ol> <h2>O que melhora o recorte</h2> <ul> <li>Sujeito nítido e fundo simples costumam sair mais limpos.</li> <li>Cabelo e borda fina: o modelo “Máximo” acerta mais, mas é mais lento.</li> <li>Para mandar por e-mail depois, <a href="https://7d4ee783.dica-hugo.pages.dev/comprimir-fotos-reduzir-tamanho-imagem/">comprima a imagem</a>.</li> </ul> <div class="itool-faq"> <details open> <summary>A foto sai do meu computador?</summary> <p>Não. O processamento fica no navegador. A gente não sobe a imagem para um servidor nosso.</p>https://7d4ee783.dica-hugo.pages.dev/melhorar-resolucao-imagem-online/Thu, 06 Aug 2026 18:00:00 +0000https://7d4ee783.dica-hugo.pages.dev/melhorar-resolucao-imagem-online/<div class="fs-workspace rbg-fs" data-nosnippet> <div id="up-app" class="rbg-app is-empty"> <header class="rbg-topbar"> <div class="rbg-topbar-left"> <span class="rbg-brand" aria-hidden="true"><svg class="rbg-brand-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg></span> <span class="rbg-brand-text">Melhorar resolução</span> <span class="rbg-top-status" id="up-status" role="status" aria-live="polite">Envie uma imagem para aumentar a resolução.</span> </div> <div class="rbg-topbar-actions"> <div class="rbg-primary-wrap"> <button type="button" class="rbg-top-btn rbg-top-btn-primary" id="up-btn-run" disabled title="Melhorar resolução"> <span class="up-btn-label-full">Melhorar resolução</span> <span class="up-btn-label-short">Ampliar</span> </button> <span class="rbg-first-run-hint" id="up-first-run-hint">1ª vez ~1 min no Wi‑Fi; depois fica rápido</span> </div> <button type="button" class="rbg-top-btn" id="up-btn-cancel" hidden>Cancelar</button> <button type="button" class="rbg-top-btn" id="up-btn-copy" disabled title="Copiar imagem">Copiar</button> <button type="button" class="rbg-top-btn" id="up-btn-dl" disabled>Baixar</button> <button type="button" class="rbg-top-btn rbg-top-btn-ghost" id="up-btn-clear">Limpar</button> </div> </header> <div class="rbg-body"> <main class="rbg-workspace"> <div id="up-drop" class="rbg-drop" role="button" tabindex="0" aria-label="Enviar imagem para melhorar resolução"> <div class="rbg-drop-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" width="48" height="48"><path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg> </div> <div class="rbg-drop-title">Arraste uma miniatura ou foto pequena</div> <div class="rbg-drop-hint">JPG, PNG, WebP · upscale 2×/4× · máx. ~25&nbsp;MB · ou cole com Ctrl+V</div> <div class="clr-drop-actions"> <button type="button" class="rbg-drop-cta itool-drop-cta" id="up-drop-cta">Escolher imagem</button> <div class="rbg-sample-wrap"> <button type="button" class="rbg-stage-bar-btn" id="up-btn-sample">Usar exemplo</button> <span class="rbg-sample-caption">Ou teste com o exemplo</span> </div> </div> </div> <label class="sr-only" for="up-file">Arquivo de imagem</label> <input id="up-file" class="rbg-file-input" type="file" accept="image/*"> <div id="up-stage-wrap" class="rbg-stage-wrap" hidden> <div class="rbg-stage-bar"> <button type="button" class="rbg-stage-bar-btn" id="up-btn-replace">Trocar imagem</button> <span class="rbg-meta" id="up-meta"></span> </div> <!-- Before/after slider after success --> <div id="up-ba" class="clr-ba" hidden> <div class="clr-ba-frame"> <img id="up-ba-hi" class="clr-ba-img clr-ba-img--color" alt="Maior resolução"> <div id="up-ba-clip" class="clr-ba-clip" style="width:50%"> <img id="up-ba-lo" class="clr-ba-img clr-ba-img--gray" alt="Original"> </div> <div class="clr-ba-handle" aria-hidden="true"> <span class="clr-ba-line"></span> <span class="clr-ba-knob">⟷</span> </div> <input id="up-ba-range" class="clr-ba-range" type="range" min="0" max="100" value="50" aria-label="Comparar original e resultado"> </div> <div class="clr-ba-labels"> <span>Original</span> <span>Maior resolução</span> </div> </div> <div id="up-compare" class="rbg-compare"> <div class="rbg-pane" id="up-preview-pane"> <div class="rbg-pane-label">Original</div> <div id="up-preview-wrap" class="rbg-preview-wrap"> <img id="up-preview" alt="Original"> </div> </div> <div class="rbg-pane rbg-result-pane" id="up-result-pane" hidden> <div class="rbg-pane-label">Maior resolução</div> <div id="up-result-wrap" class="rbg-result-wrap"> <img id="up-result" alt="Resultado em maior resolução"> </div> </div> </div> <div id="up-progress-wrap" class="rbg-progress-wrap" hidden> <div class="rbg-progress-bar"><div class="rbg-progress-fill" id="up-progress-fill" style="width:0%"></div></div> <div class="rbg-progress-text" id="up-progress-text"></div> </div> <nav id="up-next" class="rbg-next" hidden aria-label="Próximos passos"> <span class="rbg-next-label">Próximo:</span> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/comprimir-fotos-reduzir-tamanho-imagem/">Comprimir</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/redimensionar-imagem-online/">Redimensionar</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/remover-fundo-imagem-online/">Remover fundo</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/marca-dagua-online/">Marca d'água</a> </nav> </div> </main> <aside class="rbg-rail is-locked" aria-label="Opções"> <div class="rbg-rail-title">Opções</div> <fieldset class="rbg-rail-group" disabled> <legend class="rbg-rail-group-title">Processamento</legend> <div class="rbg-field"> <label class="rbg-label" for="up-scale">Escala</label> <select id="up-scale" class="rbg-select" title="2× recomendado na maioria das fotos"> <option value="2" selected title="Rápido e seguro na maioria das fotos">2× (recomendado)</option> <option value="4" title="Só em fotos pequenas; mais lento">4× (mais lento)</option> </select> <p class="rbg-field-hint">4×: só em fotos pequenas; mais lento.</p>https://7d4ee783.dica-hugo.pages.dev/desfocar-fundo-foto-online/Wed, 05 Aug 2026 15:00:00 +0000https://7d4ee783.dica-hugo.pages.dev/desfocar-fundo-foto-online/<div class="fs-workspace rbg-fs" data-nosnippet> <div id="dfb-app" class="rbg-app is-empty"> <header class="rbg-topbar"> <div class="rbg-topbar-left"> <span class="rbg-brand" aria-hidden="true"><svg class="rbg-brand-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg></span> <span class="rbg-brand-text">Desfocar fundo</span> <span class="rbg-top-status" id="dfb-status" role="status" aria-live="polite">Envie uma foto de pessoa ou produto.</span> </div> <div class="rbg-topbar-actions"> <div class="rbg-primary-wrap"> <button type="button" class="rbg-top-btn rbg-top-btn-primary" id="dfb-btn-run" disabled title="Desfocar fundo"> <span class="rbg-btn-label-full">Desfocar fundo</span> <span class="rbg-btn-label-short">Desfocar</span> </button> <span class="rbg-first-run-hint" id="dfb-first-run-hint">1ª vez ~1 min no Wi‑Fi; depois fica rápido</span> </div> <button type="button" class="rbg-top-btn" id="dfb-btn-cancel" hidden>Cancelar</button> <button type="button" class="rbg-top-btn" id="dfb-btn-copy" disabled title="Copiar imagem">Copiar</button> <button type="button" class="rbg-top-btn" id="dfb-btn-dl" disabled>Baixar</button> <button type="button" class="rbg-top-btn rbg-top-btn-ghost" id="dfb-btn-clear">Limpar</button> </div> </header> <div class="rbg-body"> <main class="rbg-workspace"> <div id="dfb-drop" class="rbg-drop" role="button" tabindex="0" aria-label="Enviar imagem para desfocar o fundo"> <div class="rbg-drop-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" width="48" height="48"><path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg> </div> <div class="rbg-drop-title">Arraste um retrato ou foto de produto</div> <div class="rbg-drop-hint">JPG, PNG, WebP · efeito retrato · máx. ~25&nbsp;MB · ou cole com Ctrl+V</div> <div class="clr-drop-actions"> <button type="button" class="rbg-drop-cta itool-drop-cta" id="dfb-drop-cta">Escolher imagem</button> <div class="rbg-sample-wrap"> <button type="button" class="rbg-stage-bar-btn" id="dfb-btn-sample">Usar exemplo</button> <span class="rbg-sample-caption">Ou teste com o exemplo</span> </div> </div> </div> <label class="sr-only" for="dfb-file">Arquivo de imagem</label> <input id="dfb-file" class="rbg-file-input" type="file" accept="image/*"> <div id="dfb-stage-wrap" class="rbg-stage-wrap" hidden> <div class="rbg-stage-bar"> <button type="button" class="rbg-stage-bar-btn" id="dfb-btn-replace">Trocar imagem</button> <span class="rbg-meta" id="dfb-meta"></span> </div> <div id="dfb-ba" class="clr-ba" hidden> <div class="clr-ba-frame"> <img id="dfb-ba-hi" class="clr-ba-img clr-ba-img--color" alt="Fundo desfocado"> <div id="dfb-ba-clip" class="clr-ba-clip" style="width:50%"> <img id="dfb-ba-lo" class="clr-ba-img clr-ba-img--gray" alt="Original"> </div> <div class="clr-ba-handle" aria-hidden="true"> <span class="clr-ba-line"></span> <span class="clr-ba-knob">⟷</span> </div> <input id="dfb-ba-range" class="clr-ba-range" type="range" min="0" max="100" value="50" aria-label="Comparar original e fundo desfocado"> </div> <div class="clr-ba-labels"> <span>Original</span> <span>Retrato</span> </div> </div> <div id="dfb-compare" class="rbg-compare"> <div class="rbg-pane" id="dfb-preview-pane"> <div class="rbg-pane-label">Original</div> <div id="dfb-preview-wrap" class="rbg-preview-wrap"> <img id="dfb-preview" alt="Original"> </div> </div> <div class="rbg-pane rbg-result-pane" id="dfb-result-pane" hidden> <div class="rbg-pane-label">Fundo desfocado</div> <div id="dfb-result-wrap" class="rbg-result-wrap"> <img id="dfb-result" alt="Resultado com fundo desfocado"> </div> </div> </div> <div id="dfb-progress-wrap" class="rbg-progress-wrap" hidden> <div class="rbg-progress-bar"><div class="rbg-progress-fill" id="dfb-progress-fill" style="width:0%"></div></div> <div class="rbg-progress-text" id="dfb-progress-text"></div> </div> <nav id="dfb-next" class="rbg-next" hidden aria-label="Próximos passos"> <span class="rbg-next-label">Próximo:</span> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/remover-fundo-imagem-online/">Remover fundo</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/desfocar-rosto-online/">Desfocar rosto</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/comprimir-fotos-reduzir-tamanho-imagem/">Comprimir</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/anotar-print-online/">Anotar print</a> </nav> </div> </main> <aside class="rbg-rail is-locked" aria-label="Opções"> <div class="rbg-rail-title">Opções</div> <fieldset class="rbg-rail-group" disabled> <legend class="rbg-rail-group-title">Processamento</legend> <div class="rbg-field"> <label class="rbg-label" for="dfb-model">Modelo</label> <select id="dfb-model" class="rbg-select" title="Equilibrado basta na maioria dos casos"> <option value="isnet_fp16" selected title="Bom equilíbrio qualidade e velocidade">Equilibrado (~84&nbsp;MB)</option> <option value="isnet_quint8" title="Mais leve e rápido; menos detalhe">Rápido (~42&nbsp;MB)</option> <option value="isnet" title="Bordas finas (cabelo); mais lento">Máximo (~168&nbsp;MB)</option> </select> <p class="rbg-field-hint">Mesmo motor do <a href="https://7d4ee783.dica-hugo.pages.dev/remover-fundo-imagem-online/">remover fundo</a>.</p>https://7d4ee783.dica-hugo.pages.dev/desfocar-rosto-online/Tue, 04 Aug 2026 14:30:00 +0000https://7d4ee783.dica-hugo.pages.dev/desfocar-rosto-online/<div class="fs-workspace rbg-fs" data-nosnippet> <div id="dfr-app" class="rbg-app is-empty"> <header class="rbg-topbar"> <div class="rbg-topbar-left"> <span class="rbg-brand" aria-hidden="true"><svg class="rbg-brand-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></span> <span class="rbg-brand-text">Desfocar rosto</span> <span class="rbg-top-status" id="dfr-status" role="status" aria-live="polite">Envie uma imagem com rostos.</span> </div> <div class="rbg-topbar-actions"> <div class="rbg-primary-wrap"> <button type="button" class="rbg-top-btn rbg-top-btn-primary" id="dfr-btn-run" disabled title="Desfocar rostos"> <span class="rbg-btn-label-full">Desfocar rostos</span> <span class="rbg-btn-label-short">Desfocar</span> </button> <span class="rbg-first-run-hint" id="dfr-first-run-hint">1ª vez baixa o detector; depois fica rápido</span> </div> <button type="button" class="rbg-top-btn" id="dfr-btn-cancel" hidden>Cancelar</button> <button type="button" class="rbg-top-btn" id="dfr-btn-copy" disabled title="Copiar imagem">Copiar</button> <button type="button" class="rbg-top-btn" id="dfr-btn-dl" disabled>Baixar</button> <button type="button" class="rbg-top-btn rbg-top-btn-ghost" id="dfr-btn-clear">Limpar</button> </div> </header> <div class="rbg-body"> <main class="rbg-workspace"> <div id="dfr-drop" class="rbg-drop" role="button" tabindex="0" aria-label="Enviar imagem para desfocar rostos"> <div class="rbg-drop-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" width="48" height="48"><path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg> </div> <div class="rbg-drop-title">Arraste uma foto com rostos</div> <div class="rbg-drop-hint">JPG, PNG, WebP · desfoque, pixel ou tarja · máx. ~20&nbsp;MB · ou cole com Ctrl+V</div> <div class="clr-drop-actions"> <button type="button" class="rbg-drop-cta itool-drop-cta" id="dfr-drop-cta">Escolher imagem</button> <div class="rbg-sample-wrap"> <button type="button" class="rbg-stage-bar-btn" id="dfr-btn-sample">Usar exemplo</button> <span class="rbg-sample-caption">Ou teste com o exemplo</span> </div> </div> </div> <label class="sr-only" for="dfr-file">Arquivo de imagem</label> <input id="dfr-file" class="rbg-file-input" type="file" accept="image/*"> <div id="dfr-stage-wrap" class="rbg-stage-wrap" hidden> <div class="rbg-stage-bar"> <button type="button" class="rbg-stage-bar-btn" id="dfr-btn-replace">Trocar imagem</button> <span class="rbg-meta" id="dfr-meta"></span> </div> <div id="dfr-ba" class="clr-ba" hidden> <div class="clr-ba-frame"> <img id="dfr-ba-hi" class="clr-ba-img clr-ba-img--color" alt="Com rostos desfocados"> <div id="dfr-ba-clip" class="clr-ba-clip" style="width:50%"> <img id="dfr-ba-lo" class="clr-ba-img clr-ba-img--gray" alt="Original"> </div> <div class="clr-ba-handle" aria-hidden="true"> <span class="clr-ba-line"></span> <span class="clr-ba-knob">⟷</span> </div> <input id="dfr-ba-range" class="clr-ba-range" type="range" min="0" max="100" value="50" aria-label="Comparar original e resultado"> </div> <div class="clr-ba-labels"> <span>Original</span> <span>Desfocado</span> </div> </div> <div id="dfr-compare" class="rbg-compare"> <div class="rbg-pane" id="dfr-preview-pane"> <div class="rbg-pane-label">Original</div> <div id="dfr-preview-wrap" class="rbg-preview-wrap"> <img id="dfr-preview" alt="Original"> </div> </div> <div class="rbg-pane rbg-result-pane" id="dfr-result-pane" hidden> <div class="rbg-pane-label">Desfocado</div> <div id="dfr-result-wrap" class="rbg-result-wrap"> <img id="dfr-result" alt="Resultado com rostos desfocados"> </div> </div> </div> <div id="dfr-progress-wrap" class="rbg-progress-wrap" hidden> <div class="rbg-progress-bar"><div class="rbg-progress-fill" id="dfr-progress-fill" style="width:0%"></div></div> <div class="rbg-progress-text" id="dfr-progress-text"></div> </div> <nav id="dfr-next" class="rbg-next" hidden aria-label="Próximos passos"> <span class="rbg-next-label">Próximo:</span> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/desfocar-fundo-foto-online/">Desfocar fundo</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/anotar-print-online/">Anotar print</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/comprimir-fotos-reduzir-tamanho-imagem/">Comprimir</a> <a class="rbg-next-chip" href="https://7d4ee783.dica-hugo.pages.dev/ocr-imagem-online/">OCR texto</a> </nav> </div> </main> <aside class="rbg-rail is-locked" aria-label="Opções"> <div class="rbg-rail-title">Opções</div> <fieldset class="rbg-rail-group" disabled> <legend class="rbg-rail-group-title">Processamento</legend> <div class="rbg-field"> <label class="rbg-label" for="dfr-mode">Estilo</label> <select id="dfr-mode" class="rbg-select" title="Como ocultar o rosto"> <option value="blur" selected title="Desfoque natural; bom para prints">Desfoque suave</option> <option value="pixel" title="Pixelização tipo TV">Pixelado</option> <option value="black" title="Tarja sólida, máxima privacidade">Tarja preta</option> </select> </div> <div class="rbg-field"> <label class="rbg-label" for="dfr-strength">Intensidade <span id="dfr-strength-val">18</span></label> <input id="dfr-strength" type="range" min="6" max="48" value="18" class="rbg-select" style="padding:8px 0" title="Maior = mais desfoque ou pixels maiores"> <p class="rbg-field-hint">Maior = mais desfoque / pixels maiores.</p>https://7d4ee783.dica-hugo.pages.dev/editor-de-audio-online/Mon, 03 Aug 2026 12:00:00 +0000https://7d4ee783.dica-hugo.pages.dev/editor-de-audio-online/<div class="fs-workspace aeditor-fs" data-nosnippet> <div id="aeditor-draft-banner" class="aeditor-draft-banner" hidden> <span aria-hidden="true">✦</span> <span>Projeto salvo neste navegador encontrado.</span> <button type="button" class="aeditor-draft-btn" id="aeditor-draft-restore">Restaurar</button> <button type="button" class="aeditor-draft-btn aeditor-draft-dismiss" id="aeditor-draft-dismiss">Descartar</button> </div> <div id="aeditor" class="aeditor-app"> <header class="aeditor-topbar"> <div class="aeditor-topbar-left"> <span class="aeditor-brand" aria-hidden="true"> <svg viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg> </span> <div class="aeditor-brand-text"> <strong>Editor de áudio</strong> <span id="aeditor-summary" class="aeditor-project-meta">Novo projeto</span> </div> </div> <div class="aeditor-topbar-center"> <button type="button" class="aeditor-icon-btn" id="aeditor-undo" title="Desfazer (Ctrl+Z)" disabled>↶</button> <button type="button" class="aeditor-icon-btn" id="aeditor-redo" title="Refazer (Ctrl+Y)" disabled>↷</button> <span class="aeditor-topbar-sep" aria-hidden="true"></span> <button type="button" class="aeditor-icon-btn" id="aeditor-copy" title="Copiar (Ctrl+C)" disabled>Copiar</button> <button type="button" class="aeditor-icon-btn" id="aeditor-cut" title="Recortar (Ctrl+X)" disabled>Recortar</button> <button type="button" class="aeditor-icon-btn" id="aeditor-paste" title="Colar no playhead (Ctrl+V)" disabled>Colar</button> <button type="button" class="aeditor-icon-btn" id="aeditor-del-sel" title="Apagar seleção (Del)" disabled>Apagar sel.</button> <span class="aeditor-topbar-sep" aria-hidden="true"></span> <button type="button" class="aeditor-icon-btn" id="aeditor-split" title="Dividir no playhead (S)" disabled>Dividir</button> <button type="button" class="aeditor-icon-btn" id="aeditor-dup" title="Duplicar clipe" disabled>Duplicar</button> <button type="button" class="aeditor-icon-btn aeditor-icon-btn--danger" id="aeditor-rm" title="Remover clipe" disabled>×</button> <span class="aeditor-topbar-sep" aria-hidden="true"></span> <button type="button" class="aeditor-icon-btn" id="aeditor-marker" title="Marcador no playhead (M)">⚑</button> <button type="button" class="aeditor-icon-btn aeditor-icon-btn--accent" id="aeditor-record" title="Gravar microfone">● Gravar</button> </div> <div class="aeditor-topbar-right"> <button type="button" class="aeditor-btn aeditor-btn-ghost" id="aeditor-save" title="Salvar neste navegador">Salvar</button> <label class="aeditor-out-label" for="aeditor-out-name"> <span class="aeditor-sr">Nome do arquivo</span> <input id="aeditor-out-name" type="text" value="audio-editado" maxlength="80" placeholder="nome do arquivo"> </label> <button type="button" class="aeditor-btn aeditor-btn-ghost" id="aeditor-clear">Limpar</button> <button type="button" class="aeditor-btn aeditor-btn-primary" id="aeditor-export" disabled>Exportar</button> </div> </header> <div class="aeditor-body"> <aside class="aeditor-panel aeditor-panel--left" aria-label="Arquivos"> <div class="aeditor-panel-head"> <span>Arquivos</span> <div class="aeditor-btn-row"> <button type="button" class="aeditor-btn aeditor-btn-sm" id="aeditor-add">+ Áudio</button> <button type="button" class="aeditor-btn aeditor-btn-sm" id="aeditor-add-track" title="Nova trilha">+ Trilha</button> </div> </div> <div id="aeditor-media-list" class="aeditor-media-list"> <p class="aeditor-media-empty" id="aeditor-media-empty">Importe MP3, WAV, M4A, OGG…</p>https://7d4ee783.dica-hugo.pages.dev/anotar-print-online/Sun, 02 Aug 2026 16:00:00 +0000https://7d4ee783.dica-hugo.pages.dev/anotar-print-online/<div class="fs-workspace ann-fs" data-nosnippet> <div id="ann-app" class="ann-app is-empty"> <!-- Top bar: brand + actions (Annotely / Snagit pattern) --> <header class="ann-topbar"> <div class="ann-topbar-left"> <span class="ann-brand" aria-hidden="true">✎</span> <span class="ann-brand-text">Anotar print</span> <span class="ann-top-status" id="ann-status">Envie um print.</span> </div> <div class="ann-topbar-actions"> <button type="button" class="ann-top-btn" id="ann-btn-undo" disabled title="Desfazer (Ctrl+Z)">Desfazer</button> <button type="button" class="ann-top-btn" id="ann-btn-clear-marks" disabled title="Limpar marcações">Limpar marcações</button> <button type="button" class="ann-top-btn" id="ann-btn-copy" disabled title="Copiar PNG (Ctrl+Shift+C)">Copiar</button> <button type="button" class="ann-top-btn ann-top-btn-primary" id="ann-btn-dl" disabled title="Baixar PNG">Baixar PNG</button> <button type="button" class="ann-top-btn ann-top-btn-ghost" id="ann-btn-clear" title="Limpar tudo">Limpar</button> </div> </header> <div class="ann-body"> <!-- Left tool rail --> <aside class="ann-rail" aria-label="Ferramentas"> <div class="ann-tools" role="toolbar" aria-orientation="vertical" aria-label="Ferramentas de anotação"> <button type="button" class="ann-tool is-active" data-ann-tool="pen" title="Caneta (P)"> <span class="ann-tool-ico" aria-hidden="true">✏️</span> <span class="ann-tool-label">Caneta</span> </button> <button type="button" class="ann-tool" data-ann-tool="highlight" title="Destaque (H)"> <span class="ann-tool-ico" aria-hidden="true">🖍</span> <span class="ann-tool-label">Destaque</span> </button> <button type="button" class="ann-tool" data-ann-tool="line" title="Linha (L)"> <span class="ann-tool-ico" aria-hidden="true">／</span> <span class="ann-tool-label">Linha</span> </button> <button type="button" class="ann-tool" data-ann-tool="arrow" title="Seta (A)"> <span class="ann-tool-ico" aria-hidden="true">➤</span> <span class="ann-tool-label">Seta</span> </button> <button type="button" class="ann-tool" data-ann-tool="rect" title="Retângulo (R)"> <span class="ann-tool-ico" aria-hidden="true">▭</span> <span class="ann-tool-label">Retângulo</span> </button> <button type="button" class="ann-tool" data-ann-tool="ellipse" title="Elipse (E)"> <span class="ann-tool-ico" aria-hidden="true">◯</span> <span class="ann-tool-label">Elipse</span> </button> <button type="button" class="ann-tool ann-tool-step" data-ann-tool="step" title="Passo numerado (N)"> <span class="ann-tool-ico" aria-hidden="true"><span class="ann-step-icon">#</span><span id="ann-step-badge" class="ann-step-badge">1</span></span> <span class="ann-tool-label">Passo</span> </button> <button type="button" class="ann-tool" data-ann-tool="text" title="Texto (T)"> <span class="ann-tool-ico" aria-hidden="true">T</span> <span class="ann-tool-label">Texto</span> </button> <button type="button" class="ann-tool" data-ann-tool="blur" title="Desfoque (B)"> <span class="ann-tool-ico" aria-hidden="true">💧</span> <span class="ann-tool-label">Desfoque</span> </button> <button type="button" class="ann-tool" data-ann-tool="redact" title="Tarja (X)"> <span class="ann-tool-ico" aria-hidden="true">■</span> <span class="ann-tool-label">Tarja</span> </button> <button type="button" class="ann-tool" data-ann-tool="crop" title="Recortar (C)"> <span class="ann-tool-ico" aria-hidden="true">✂</span> <span class="ann-tool-label">Recortar</span> </button> </div> <div class="ann-rail-opts"> <div class="ann-swatches" aria-label="Cores rápidas"> <button type="button" class="ann-swatch is-active" data-ann-swatch="#fa5b0f" style="--sw:#fa5b0f" title="Laranja"></button> <button type="button" class="ann-swatch" data-ann-swatch="#e11d48" style="--sw:#e11d48" title="Vermelho"></button> <button type="button" class="ann-swatch" data-ann-swatch="#2563eb" style="--sw:#2563eb" title="Azul"></button> <button type="button" class="ann-swatch" data-ann-swatch="#16a34a" style="--sw:#16a34a" title="Verde"></button> <button type="button" class="ann-swatch" data-ann-swatch="#eab308" style="--sw:#eab308" title="Amarelo"></button> <button type="button" class="ann-swatch" data-ann-swatch="#0f172a" style="--sw:#0f172a" title="Preto"></button> <button type="button" class="ann-swatch" data-ann-swatch="#ffffff" style="--sw:#ffffff" title="Branco"></button> </div> <label class="ann-color-label" title="Cor personalizada"> <input type="color" id="ann-color" value="#fa5b0f"> </label> <label class="ann-size-label"> <span>Espessura <strong id="ann-size-val">4</strong></span> <input type="range" id="ann-size" min="1" max="24" value="4"> </label> <label class="ann-fill-label" title="Preencher retângulo e elipse"> <input type="checkbox" id="ann-fill"> Preencher </label> <button type="button" class="ann-rail-btn" id="ann-btn-step-reset" title="Reinicia contador de passos">Passo → 1</button> </div> </aside> <!-- Canvas workspace --> <main class="ann-workspace"> <div id="ann-drop" class="ann-drop" role="button" tabindex="0"> <div class="ann-drop-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" width="48" height="48"><path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg> </div> <div class="ann-drop-title">Arraste um print ou cole (Ctrl+V)</div> <div class="ann-drop-hint">PNG, JPG, WebP · online · </div> <button type="button" class="ann-drop-cta" id="ann-drop-cta">Escolher imagem</button> </div> <input id="ann-file" class="ann-file-input" type="file" accept="image/*"> <div id="ann-stage-wrap" class="ann-stage-wrap" hidden> <div class="ann-stage-bar"> <button type="button" class="ann-stage-bar-btn" id="ann-btn-replace">Trocar print</button> <span class="ann-meta" id="ann-meta"></span> </div> <div id="ann-stage" class="ann-stage"> <canvas id="ann-base" class="ann-layer"></canvas> <canvas id="ann-draw" class="ann-layer"></canvas> <canvas id="ann-ui" class="ann-layer ann-ui"></canvas> </div> </div> </main> </div> </div> </div> <!-- end-fs-workspace --> <p class="itool-intro"><strong>Anotar print online</strong>: cole ou envie o screenshot e marque com seta, passos 1-2-3, texto, caneta, desfoque ou tarja. Depois baixe ou copie o PNG. Serve para tutorial, bug e suporte.</p>https://7d4ee783.dica-hugo.pages.dev/pintar-online/Sat, 01 Aug 2026 10:20:00 +0000https://7d4ee783.dica-hugo.pages.dev/pintar-online/<div class="fs-workspace paint-fs" data-nosnippet> <div id="paint-draft-banner" class="paint-draft-banner" hidden> <span aria-hidden="true">✦</span> <span>Rascunho de pintura encontrado neste navegador.</span> <button type="button" class="paint-draft-btn" id="paint-draft-restore">Restaurar</button> <button type="button" class="paint-draft-btn paint-draft-dismiss" id="paint-draft-dismiss">Descartar</button> </div> <div id="paint-app" class="paint-app paint-app--rail paint-app--shell"> <div class="paint-shell"> <!-- App menu bar (Arquivo / Editar / …) --> <nav class="paint-menubar" role="menubar" aria-label="Menu do editor"> <div class="paint-menu"> <button type="button" class="paint-menu-btn" data-menu="file" aria-haspopup="true">Arquivo</button> <div class="paint-menu-dd" id="paint-menu-file" role="menu" hidden> <button type="button" role="menuitem" data-act="doc-new">Novo documento</button> <button type="button" role="menuitem" data-act="import">Importar imagem…</button> <button type="button" role="menuitem" data-act="import-tab">Importar em nova aba…</button> <button type="button" role="menuitem" data-act="import-desenhar">Importar Desenhar</button> <hr> <button type="button" role="menuitem" data-act="proj-save">Salvar projeto JSON</button> <label class="paint-menu-file" role="menuitem">Abrir projeto JSON…<input type="file" id="paint-proj-load" accept="application/json,.json" hidden></label> <hr> <button type="button" role="menuitem" data-act="export-png">Exportar PNG</button> <button type="button" role="menuitem" data-act="export-png2">Exportar PNG 2×</button> <button type="button" role="menuitem" data-act="export-sq">Exportar 1080²</button> <button type="button" role="menuitem" data-act="export-jpg">Exportar JPEG</button> <button type="button" role="menuitem" data-act="copy-image">Copiar imagem</button> <label class="paint-menu-check"><input type="checkbox" id="paint-png-alpha"> PNG transparente</label> <hr> <label class="paint-menu-file" role="menuitem">Carregar ponta PNG…<input type="file" id="paint-tip-import" accept="image/*" hidden></label> <button type="button" role="menuitem" data-act="preset-export">Exportar presets…</button> <label class="paint-menu-file" role="menuitem">Importar presets…<input type="file" id="paint-brush-preset-import" accept="application/json,.json" hidden></label> </div> </div> <div class="paint-menu"> <button type="button" class="paint-menu-btn" data-menu="edit" aria-haspopup="true">Editar</button> <div class="paint-menu-dd" id="paint-menu-edit" role="menu" hidden> <button type="button" role="menuitem" data-act="undo">Desfazer <kbd>Ctrl+Z</kbd></button> <button type="button" role="menuitem" data-act="redo">Refazer <kbd>Ctrl+Y</kbd></button> <hr> <button type="button" role="menuitem" data-act="copy">Copiar seleção <kbd>Ctrl+C</kbd></button> <button type="button" role="menuitem" data-act="paste">Colar <kbd>Ctrl+V</kbd></button> <hr> <button type="button" role="menuitem" data-act="clear-layer">Limpar camada</button> <button type="button" role="menuitem" data-act="clear-all">Limpar tudo</button> </div> </div> <div class="paint-menu"> <button type="button" class="paint-menu-btn" data-menu="image" aria-haspopup="true">Imagem</button> <div class="paint-menu-dd" id="paint-menu-image" role="menu" hidden> <label class="paint-menu-select">Quadro <select id="paint-canvas-size" aria-label="Tamanho do quadro"> <option value="1280x720" selected>HD 1280×720</option> <option value="1920x1080">Full HD 1920×1080</option> <option value="1080x1080">Quadrado 1080</option> <option value="800x600">800×600</option> <option value="2048x2048">2K quadrado</option> <option value="custom">Personalizado…</option> </select> </label> <button type="button" role="menuitem" data-act="tool-crop">Cortar quadro</button> <hr> <button type="button" role="menuitem" data-act="adj-bright">Brilho / contraste…</button> <button type="button" role="menuitem" data-act="adj-hue">Matiz / saturação…</button> <button type="button" role="menuitem" data-act="adj-invert">Inverter cores</button> <button type="button" role="menuitem" data-act="adj-desat">Dessaturar</button> <button type="button" role="menuitem" data-act="adj-autotone">Auto tom</button> <hr> <button type="button" role="menuitem" data-act="filter-blur">Desfoque…</button> <button type="button" role="menuitem" data-act="filter-sharpen">Nitidez…</button> <hr> <button type="button" role="menuitem" data-act="guide-v">Guia vertical</button> <button type="button" role="menuitem" data-act="guide-h">Guia horizontal</button> <button type="button" role="menuitem" data-act="guide-clear">Limpar guias</button> <label class="paint-menu-check"><input type="checkbox" id="paint-snap" checked> Snap a guias</label> </div> </div> <div class="paint-menu"> <button type="button" class="paint-menu-btn" data-menu="layer" aria-haspopup="true">Camada</button> <div class="paint-menu-dd" id="paint-menu-layer" role="menu" hidden> <button type="button" role="menuitem" data-act="layer-add">Nova camada</button> <button type="button" role="menuitem" data-act="layer-group">Novo grupo</button> <button type="button" role="menuitem" data-act="layer-dup">Duplicar</button> <button type="button" role="menuitem" data-act="layer-merge">Mesclar abaixo</button> <button type="button" role="menuitem" data-act="layer-up">Subir</button> <button type="button" role="menuitem" data-act="layer-down">Descer</button> <hr> <button type="button" role="menuitem" data-act="fx-shadow">Alternar sombra (fx)</button> <button type="button" role="menuitem" data-act="fx-glow">Alternar brilho (fx)</button> <hr> <button type="button" role="menuitem" data-act="mask-toggle">Editar máscara</button> <button type="button" role="menuitem" data-act="mask-from-sel">Máscara ← seleção</button> <button type="button" role="menuitem" data-act="mask-apply">Aplicar máscara</button> <button type="button" role="menuitem" data-act="mask-clear">Remover máscara</button> </div> </div> <div class="paint-menu"> <button type="button" class="paint-menu-btn" data-menu="select" aria-haspopup="true">Seleção</button> <div class="paint-menu-dd" id="paint-menu-select" role="menu" hidden> <button type="button" role="menuitem" data-act="tool-select">Retângulo <kbd>M</kbd></button> <button type="button" role="menuitem" data-act="tool-ellipse">Elipse</button> <button type="button" role="menuitem" data-act="tool-lasso">Laço <kbd>L</kbd></button> <button type="button" role="menuitem" data-act="tool-wand">Varinha <kbd>W</kbd></button> <hr> <button type="button" role="menuitem" data-act="sel-invert">Inverter seleção</button> <button type="button" role="menuitem" data-act="sel-reselect">Reselecionar</button> <button type="button" role="menuitem" data-act="sel-deselect">Desmarcar <kbd>Esc</kbd></button> <button type="button" role="menuitem" data-act="sel-stroke">Contornar seleção…</button> <button type="button" role="menuitem" data-act="quick-mask">Máscara rápida <kbd>Q</kbd></button> <p class="paint-menu-hint">Shift = somar · Alt = subtrair</p>https://7d4ee783.dica-hugo.pages.dev/desenhar-online/Fri, 31 Jul 2026 19:00:00 +0000https://7d4ee783.dica-hugo.pages.dev/desenhar-online/<div class="fs-workspace draw-fs" data-nosnippet> <div id="draw-draft-banner" class="draw-draft-banner" hidden> <span class="draw-draft-ico" aria-hidden="true">✦</span> <span class="draw-draft-msg">Rascunho salvo neste navegador encontrado.</span> <button type="button" class="draw-draft-btn" id="draw-draft-restore">Restaurar</button> <button type="button" class="draw-draft-btn draw-draft-dismiss" id="draw-draft-dismiss">Descartar</button> </div> <div id="draw-app" class="draw-app is-empty"> <!-- Single toolbar row: modes · pens · colors · controls (matches product mock) --> <div class="draw-topbar" role="toolbar" aria-label="Ferramentas de desenho"> <div class="draw-modes"> <button type="button" class="draw-mode" data-mode="selecionar" title="Selecionar traço, forma ou texto (V)"> <span class="draw-mode-ico" aria-hidden="true"> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" stroke-dasharray="3 2.5"/></svg> </span> <span class="draw-mode-label">Selecionar</span> </button> <button type="button" class="draw-mode" data-mode="mao" title="Mão — pan (H ou Espaço+arrastar)"> <span class="draw-mode-ico" aria-hidden="true"> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-4 0"/><path d="M14 10V4a2 2 0 0 0-4 0v2"/><path d="M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-5.8-2.7L3 14.5"/></svg> </span> <span class="draw-mode-label">Mão</span> </button> <button type="button" class="draw-mode" data-mode="borracha" title="Borracha (E)"> <span class="draw-mode-ico" aria-hidden="true"> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg> </span> <span class="draw-mode-label">Borracha</span> </button> <button type="button" class="draw-mode" data-mode="balde" title="Balde de tinta (Shift+B)"> <span class="draw-mode-ico" aria-hidden="true"> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z"/><path d="m5 2 5 5"/><path d="M2 13h15"/><path d="M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z"/></svg> </span> <span class="draw-mode-label">Balde</span> </button> <button type="button" class="draw-mode" data-mode="texto" title="Texto (T)"> <span class="draw-mode-ico" aria-hidden="true"> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg> </span> <span class="draw-mode-label">Texto</span> </button> <button type="button" class="draw-mode" data-mode="formas" title="Formas — retângulo, elipse, triângulo, losango, polígonos, estrela, seta, coração, linha"> <span class="draw-mode-ico" aria-hidden="true"> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><circle cx="17.5" cy="6.5" r="3.5"/><path d="M14 20 17 14l3 6H14z"/></svg> </span> <span class="draw-mode-label">Formas</span> </button> <button type="button" class="draw-mode" id="draw-tool-lock" title="Travar ferramenta — continua na mesma após desenhar (Q)" aria-pressed="false"> <span class="draw-mode-ico" aria-hidden="true"> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg> </span> <span class="draw-mode-label">Travar</span> </button> <!-- Excalidraw-style: less frequent tools in overflow --> <div class="draw-menu" data-draw-menu="tools"> <button type="button" class="draw-mode draw-menu-toggle" id="draw-more-tools" aria-haspopup="true" aria-expanded="false" title="Mais ferramentas"> <span class="draw-mode-ico" aria-hidden="true"> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1.4" fill="currentColor"/><circle cx="12" cy="12" r="1.4" fill="currentColor"/><circle cx="12" cy="19" r="1.4" fill="currentColor"/></svg> </span> <span class="draw-mode-label">Mais</span> </button> <div class="draw-menu-panel draw-menu-panel-tools" id="draw-more-tools-panel" hidden role="menu" aria-label="Mais ferramentas"> <button type="button" class="draw-menu-item draw-mode-menu" data-mode="lasso" role="menuitem" title="Laço de seleção (ou Alt+arraste)"> <span class="draw-menu-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4c-3 2-4 6-2 9s6 5 9 3 5-6 3-9-6-5-10-3z" stroke-dasharray="3 2"/></svg></span> <span>Laço</span> <kbd>Alt</kbd> </button> <button type="button" class="draw-menu-item draw-mode-menu" data-mode="sticky" role="menuitem" title="Nota adesiva"> <span class="draw-menu-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9z"/><path d="M15 3v6h6"/></svg></span> <span>Nota adesiva</span> </button> </div> </div> </div> <span class="draw-tools-sep" aria-hidden="true"></span> <div class="draw-pen-tray" id="draw-pens" aria-label="Canetas"></div> <span class="draw-tools-sep" aria-hidden="true"></span> <div class="draw-swatch-panel"> <div class="draw-swatches" id="draw-swatches" aria-label="Cores"></div> </div> <span class="draw-tools-sep draw-tools-sep-soft" aria-hidden="true"></span> <div class="draw-sliders"> <div class="draw-sliders-row draw-sliders-ranges"> <label class="draw-field draw-field-range" for="draw-size"> <span id="draw-size-label">Tamanho</span> <input type="range" id="draw-size" min="1" max="64" step="1" value="6"> <span class="draw-field-val" id="draw-size-val">6</span> </label> <label class="draw-field draw-field-range" for="draw-opacity"> <span>Opacidade</span> <input type="range" id="draw-opacity" min="5" max="100" step="1" value="100"> <span class="draw-field-val" id="draw-opacity-val">100%</span> </label> </div> <div class="draw-sliders-row draw-sliders-opts"> <label class="draw-field draw-check" for="draw-fill-shapes" title="Preencher forma"> <input type="checkbox" id="draw-fill-shapes"> <span>Preencher</span> </label> </div> </div> <!-- Excalidraw-style: styles / canvas prefs in overflow (not permanent bar) --> <div class="draw-menu draw-menu-opts" data-draw-menu="opts"> <button type="button" class="draw-btn draw-btn-sm draw-menu-toggle" id="draw-more-opts" aria-haspopup="true" aria-expanded="false" title="Estilos e opções do quadro"> <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg> Opções </button> <div class="draw-menu-panel draw-menu-panel-opts" id="draw-more-opts-panel" hidden role="dialog" aria-label="Estilos e opções"> <div class="draw-menu-section-label">Traço</div> <div class="draw-style-group" role="group" aria-label="Estilo do traço"> <button type="button" class="draw-chip is-active" data-stroke-style="solid" title="Traço sólido">━</button> <button type="button" class="draw-chip" data-stroke-style="dashed" title="Tracejado">┅</button> <button type="button" class="draw-chip" data-stroke-style="dotted" title="Pontilhado">┈</button> </div> <div class="draw-menu-section-label">Preenchimento</div> <div class="draw-style-group" role="group" aria-label="Preenchimento"> <button type="button" class="draw-chip is-active" data-fill-style="solid" title="Preenchimento sólido">■</button> <button type="button" class="draw-chip" data-fill-style="hatch" title="Hachura">▨</button> <button type="button" class="draw-chip" data-fill-style="none" title="Sem preenchimento">□</button> </div> <div class="draw-menu-section-label">Texto</div> <div class="draw-menu-row"> <label class="draw-field" for="draw-font" title="Fonte do texto"> <select id="draw-font" aria-label="Fonte"> <option value="system-ui,Segoe UI,sans-serif">Sistema</option> <option value="Georgia,Times New Roman,serif">Serif</option> <option value="ui-monospace,Consolas,monospace">Mono</option> </select> </label> <div class="draw-style-group" role="group" aria-label="Alinhamento do texto"> <button type="button" class="draw-chip is-active" data-text-align="left" title="Texto à esquerda">⬅</button> <button type="button" class="draw-chip" data-text-align="center" title="Texto ao centro">↔</button> <button type="button" class="draw-chip" data-text-align="right" title="Texto à direita">➡</button> </div> </div> <div class="draw-menu-section-label">Quadro</div> <div class="draw-menu-row draw-menu-row-wrap"> <label class="draw-field draw-check" for="draw-show-grid" title="Mostrar grade"> <input type="checkbox" id="draw-show-grid"> <span>Grade</span> </label> <label class="draw-field draw-check" for="draw-snap-grid" title="Encaixar na grade"> <input type="checkbox" id="draw-snap-grid"> <span>Snap</span> </label> <label class="draw-field draw-check" for="draw-png-alpha" title="PNG transparente"> <input type="checkbox" id="draw-png-alpha"> <span>PNG transparente</span> </label> </div> <label class="draw-field draw-field-bg" for="draw-bg" title="Fundo do quadro"> <span>Fundo</span> <select id="draw-bg" aria-label="Fundo"> <option value="#ffffff">Branco</option> <option value="#f8fafc">Cinza</option> <option value="#0f172a">Escuro</option> <option value="transparent" selected>Pontilhado</option> </select> </label> </div> </div> </div> <!-- Context menu --> <div id="draw-ctx" class="draw-ctx" hidden> <button type="button" data-ctx="edit">Editar texto</button> <button type="button" data-ctx="dup">Duplicar</button> <button type="button" data-ctx="copy">Copiar</button> <button type="button" data-ctx="paste">Colar</button> <button type="button" data-ctx="delete">Apagar</button> <hr> <button type="button" data-ctx="group">Agrupar</button> <button type="button" data-ctx="ungroup">Desagrupar</button> <button type="button" data-ctx="lock">Bloquear</button> <button type="button" data-ctx="front">Para frente</button> <button type="button" data-ctx="back">Para trás</button> <hr> <button type="button" data-ctx="flipH">Espelhar H</button> <button type="button" data-ctx="flipV">Espelhar V</button> <button type="button" data-ctx="rotate">Rotacionar…</button> <button type="button" data-ctx="exportSel">Exportar seleção</button> </div> <!-- Canvas --> <div id="draw-surface-wrap" class="draw-surface-wrap is-dots"> <p id="draw-hint" class="draw-hint">Clique ou toque para desenhar</p>