Skip to content

Instantly share code, notes, and snippets.

@celsowm
Last active July 10, 2025 00:51
Show Gist options
  • Save celsowm/e6cfd5f584a35cf5e456b75f9e82c21e to your computer and use it in GitHub Desktop.
Save celsowm/e6cfd5f584a35cf5e456b75f9e82c21e to your computer and use it in GitHub Desktop.
nova caixa de entrada do pgedigital
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PGE Digital - Caixa de Entrada</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
:root {
--color-bg: #f6f8fa; --color-border: #d0d7de; --color-card-bg: #ffffff;
--color-text-primary: #1f2328; --color-text-secondary: #57606a; --color-text-link: #0969da;
--color-accent-blue: #0969da; --color-accent-orange: #d46a05; --color-accent-red: #d1242f;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
body { background-color: var(--color-bg); font-family: var(--font-family); margin: 0; padding: 2rem; color: var(--color-text-primary); }
.inbox-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.inbox-title { font-size: 1.75rem; font-weight: 600; }
.inbox-filters button { font-size: 0.9rem; padding: 0.5rem 1rem; border: 1px solid var(--color-border); background-color: var(--color-card-bg); cursor: pointer; }
.inbox-filters button:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.inbox-filters button:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.inbox-filters button.active { background-color: var(--color-accent-blue); color: white; border-color: var(--color-accent-blue); font-weight: 600; }
.inbox-alert { display: flex; align-items: center; gap: 0.5rem; background-color: rgba(209, 36, 47, 0.1); color: var(--color-accent-red); padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; }
.process-list { display: flex; flex-direction: column; gap: 2px; }
.process-item { display: flex; background-color: var(--color-card-bg); border: 1px solid var(--color-border); padding: 1rem; position: relative; transition: background-color 0.2s; }
.process-item:first-child { border-radius: 6px 6px 0 0; }
.process-item:last-child { border-radius: 0 0 6px 6px; }
.process-item:not(:last-child) { border-bottom: none; }
.process-item:hover { background-color: #fcfcfc; }
.process-item::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; }
.process-item.status-intimation::before { background-color: var(--color-accent-blue); }
.process-item.status-citation::before { background-color: var(--color-accent-orange); }
.process-item.status-urgent::before { background-color: var(--color-accent-red); }
.item-selector { margin-right: 1rem; display: flex; align-items: center; }
.item-content { flex-grow: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.content-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.process-title { font-size: 1rem; font-weight: 600; margin: 0; }
.process-metadata { font-size: 0.8rem; color: var(--color-text-secondary); }
.process-tags { display: flex; gap: 0.5rem; flex-shrink: 0; }
.tag { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 1rem; border: 1px solid; }
.tag.type-intimation { border-color: var(--color-accent-blue); color: var(--color-accent-blue); }
.tag.type-citation { border-color: var(--color-accent-orange); color: var(--color-accent-orange); }
.tag.class-strategic { border-color: var(--color-accent-red); color: var(--color-accent-red); background-color: rgba(209, 36, 47, 0.1); }
.tag.class-common { border-color: var(--color-border); color: var(--color-text-secondary); }
.process-info { font-size: 0.8rem; color: var(--color-text-secondary); }
.process-actions { display: flex; align-items: center; gap: 0.5rem; }
.cnj-identifier { font-family: monospace; font-size: 0.8rem; background-color: var(--color-bg); padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.action-button { background: none; border: none; padding: 0.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); font-size: 16px; width: 24px; }
.action-button:hover { color: var(--color-text-link); }
</style>
</head>
<body>
<header class="inbox-header">
<div>
<h2 class="inbox-title">Caixa de Entrada (81)</h2>
<div class="inbox-filters">
<button class="active">Contencioso</button><button>Consultivo</button><button>Autocomposição</button>
</div>
</div>
<div class="inbox-alert">
<i class="fa-solid fa-triangle-exclamation"></i>
<span>12 Prazos Vencidos</span>
</div>
</header>
<main class="process-list">
<article class="process-item status-urgent">
<div class="item-selector"><input type="checkbox"></div>
<div class="item-content">
<div class="content-row">
<div>
<!-- NOME ATUALIZADO AQUI -->
<h3 class="process-title">João da Silva x Rio Previdência</h3>
<div class="process-metadata">Vinicius George C. da S. Paes • há 3 horas • <strong>Prazo: 10/07/2024</strong></div>
</div>
<div class="process-tags">
<span class="tag type-intimation">INTIMAÇÃO</span><span class="tag class-strategic">ESTRATÉGICO</span>
</div>
</div>
<div class="content-row">
<div class="process-info">PGE/005.00026/2022 • R$ 32.316.965,00</div>
<div class="process-actions">
<div class="cnj-identifier">0416469-29.2015.8.19.0001</div>
<button class="action-button" title="Copiar"><i class="fa-solid fa-copy"></i></button>
<button class="action-button" title="Minutar"><i class="fa-solid fa-pen-to-square"></i></button>
<button class="action-button" title="Mais"><i class="fa-solid fa-ellipsis-vertical"></i></button>
</div>
</div>
</div>
</article>
<article class="process-item status-citation">
<div class="item-selector"><input type="checkbox"></div>
<div class="item-content">
<div class="content-row">
<div>
<!-- NOME ATUALIZADO AQUI -->
<h3 class="process-title">Maria da Silva x Estado do Rio</h3>
<div class="process-metadata">Sistema PCE Digital • há 2 horas • <strong>Prazo: 17/07/2024</strong></div>
</div>
<div class="process-tags">
<span class="tag type-citation">CITAÇÃO</span><span class="tag class-common">COMUM</span>
</div>
</div>
<div class="content-row">
<div class="process-info">PGE/005.00009/2024 • R$ 29.132,36</div>
<div class="process-actions">
<div class="cnj-identifier">0000202-31.2023.8.19.0036</div>
<button class="action-button" title="Copiar"><i class="fa-solid fa-copy"></i></button>
<button class="action-button" title="Minutar"><i class="fa-solid fa-pen-to-square"></i></button>
<button class="action-button" title="Mais"><i class="fa-solid fa-ellipsis-vertical"></i></button>
</div>
</div>
</div>
</article>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment