Hugging Face's logo

Spaces:
paulapeniel
/
integrar-e-motion-tracker-report
Running

App Files Community
paulapeniel commited on
Commit
d4dcefc
·
verified ·
1 Parent(s): 7b98703

Crie um modelo visual de relatório institucional em formato A4 para impressão e uso no Google Looker Studio.

Browse files

O título principal deve ser "Relatório de Movimentação do Sistema Integrar-e".

O design deve usar tons de azul escuro, branco e cinza claro, seguindo um estilo limpo, profissional e moderno, semelhante a relatórios de órgãos públicos.

Cabeçalho:

Logotipo do Ministério Público no canto esquerdo.

Título centralizado em azul escuro.

Linha inferior com 5 filtros principais exibidos como cartões ou caixas arredondadas:

Órgão

Assunto

Classe

Movimento

Período (com ícone de calendário)

Corpo:

Tabela central com colunas: Órgão | Classe | Movimento | Quantidade.

Linhas alternadas em cinza muito claro e branco.

Cabeçalho da tabela em azul escuro com texto branco.

Bordas sutis e espaçamento equilibrado.

Rodapé:

Texto alinhado à direita com “Data de emissão: {{data_atual}}”.

Faixa fina azul escuro no rodapé.

Estilo geral: institucional, limpo, fontes sem serifa (ex: Open Sans, Roboto ou Lato), aparência moderna e equilibrada, voltada para relatórios impressos e exportações em PDF.

Files changed (4) hide show
  1. README.md +8 -5
  2. components/filter-card.js +40 -0
  3. index.html +132 -19
  4. style.css +19 -22
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Integrar E Motion Tracker Report
3
- emoji: 🐢
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Integrar-e Motion Tracker Report 📊
3
+ colorFrom: pink
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/filter-card.js ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class FilterCard extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ background: white;
9
+ padding: 0.75rem;
10
+ border-radius: 0.5rem;
11
+ border: 1px solid #e5e7eb;
12
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
13
+ }
14
+ label {
15
+ font-size: 0.75rem;
16
+ font-weight: 500;
17
+ color: #6b7280;
18
+ display: block;
19
+ margin-bottom: 0.25rem;
20
+ }
21
+ .value {
22
+ font-size: 0.875rem;
23
+ font-weight: 500;
24
+ color: #374151;
25
+ }
26
+ .icon {
27
+ width: 1rem;
28
+ height: 1rem;
29
+ margin-right: 0.25rem;
30
+ }
31
+ </style>
32
+ <div>
33
+ <label><slot name="label"></slot></label>
34
+ <div class="value"><slot name="value"></slot></div>
35
+ </div>
36
+ `;
37
+ }
38
+ }
39
+
40
+ customElements.define('filter-card', FilterCard);
index.html CHANGED
@@ -1,19 +1,132 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Relatório de Movimentação do Sistema Integrar-e</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
12
+ body {
13
+ font-family: 'Roboto', sans-serif;
14
+ }
15
+ @page {
16
+ size: A4;
17
+ margin: 0;
18
+ }
19
+ .page {
20
+ width: 210mm;
21
+ min-height: 297mm;
22
+ padding: 20mm;
23
+ margin: 10mm auto;
24
+ background: white;
25
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-100">
30
+ <div class="page">
31
+ <!-- Header -->
32
+ <header class="mb-8">
33
+ <div class="flex items-center">
34
+ <div class="w-1/4">
35
+ <img src="http://static.photos/government/200x200/1" alt="Ministério Público" class="h-16">
36
+ </div>
37
+ <div class="w-3/4 text-center">
38
+ <h1 class="text-2xl font-bold text-blue-900">Relatório de Movimentação do Sistema Integrar-e</h1>
39
+ </div>
40
+ </div>
41
+
42
+ <!-- Filter Cards -->
43
+ <div class="grid grid-cols-5 gap-4 mt-8">
44
+ <div class="filter-card">
45
+ <label class="text-xs font-medium text-gray-500">Órgão</label>
46
+ <div class="text-sm font-medium text-gray-700">Todos</div>
47
+ </div>
48
+ <div class="filter-card">
49
+ <label class="text-xs font-medium text-gray-500">Assunto</label>
50
+ <div class="text-sm font-medium text-gray-700">Selecione</div>
51
+ </div>
52
+ <div class="filter-card">
53
+ <label class="text-xs font-medium text-gray-500">Classe</label>
54
+ <div class="text-sm font-medium text-gray-700">Selecione</div>
55
+ </div>
56
+ <div class="filter-card">
57
+ <label class="text-xs font-medium text-gray-500">Movimento</label>
58
+ <div class="text-sm font-medium text-gray-700">Selecione</div>
59
+ </div>
60
+ <div class="filter-card">
61
+ <label class="text-xs font-medium text-gray-500">Período</label>
62
+ <div class="flex items-center text-sm font-medium text-gray-700">
63
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
64
+ Últimos 30 dias
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </header>
69
+
70
+ <!-- Main Content -->
71
+ <main>
72
+ <div class="overflow-x-auto">
73
+ <table class="min-w-full border-collapse">
74
+ <thead>
75
+ <tr class="bg-blue-900 text-white">
76
+ <th class="table-header">Órgão</th>
77
+ <th class="table-header">Classe</th>
78
+ <th class="table-header">Movimento</th>
79
+ <th class="table-header">Quantidade</th>
80
+ </tr>
81
+ </thead>
82
+ <tbody>
83
+ <tr class="bg-gray-50">
84
+ <td class="table-cell">1ª Vara Criminal</td>
85
+ <td class="table-cell">Ação Penal</td>
86
+ <td class="table-cell">Distribuição</td>
87
+ <td class="table-cell text-right">42</td>
88
+ </tr>
89
+ <tr class="bg-white">
90
+ <td class="table-cell">2ª Vara Cível</td>
91
+ <td class="table-cell">Ação Civil Pública</td>
92
+ <td class="table-cell">Julgamento</td>
93
+ <td class="table-cell text-right">28</td>
94
+ </tr>
95
+ <tr class="bg-gray-50">
96
+ <td class="table-cell">3ª Vara da Fazenda</td>
97
+ <td class="table-cell">Execução Fiscal</td>
98
+ <td class="table-cell">Petição</td>
99
+ <td class="table-cell text-right">35</td>
100
+ </tr>
101
+ <tr class="bg-white">
102
+ <td class="table-cell">4ª Vara de Família</td>
103
+ <td class="table-cell">Divórcio</td>
104
+ <td class="table-cell">Audiência</td>
105
+ <td class="table-cell text-right">19</td>
106
+ </tr>
107
+ <tr class="bg-gray-50">
108
+ <td class="table-cell">5ª Vara do Trabalho</td>
109
+ <td class="table-cell">Reclamação Trabalhista</td>
110
+ <td class="table-cell">Sentença</td>
111
+ <td class="table-cell text-right">31</td>
112
+ </tr>
113
+ </tbody>
114
+ </table>
115
+ </div>
116
+ </main>
117
+
118
+ <!-- Footer -->
119
+ <footer class="mt-12 pt-4 border-t border-blue-900">
120
+ <div class="text-right text-sm text-gray-600">
121
+ Data de emissão: <span id="current-date"></span>
122
+ </div>
123
+ </footer>
124
+ </div>
125
+
126
+ <script>
127
+ document.getElementById('current-date').textContent = new Date().toLocaleDateString('pt-BR');
128
+ feather.replace();
129
+ </script>
130
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
131
+ </body>
132
+ </html>
style.css CHANGED
@@ -1,28 +1,25 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
1
+ .filter-card {
2
+ @apply bg-white p-3 rounded-lg border border-gray-200 shadow-sm;
 
3
  }
4
 
5
+ .table-header {
6
+ @apply py-3 px-4 text-left text-sm font-semibold;
 
7
  }
8
 
9
+ .table-cell {
10
+ @apply py-3 px-4 text-sm border-b border-gray-200;
 
 
 
11
  }
12
 
13
+ @media print {
14
+ body {
15
+ background: none;
16
+ }
17
+ .page {
18
+ margin: 0;
19
+ box-shadow: none;
20
+ }
21
+ .filter-card {
22
+ box-shadow: none;
23
+ border: 1px solid #e5e7eb;
24
+ }
25
+ }