Hugging Face's logo

Spaces:
stadv
/
legalforge-pro-smart-document-foundry
Running

App Files Community
stadv commited on
Commit
24f91e1
·
verified ·
1 Parent(s): 7454989

<!DOCTYPE html>

Browse files

<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confissão de Dívida - Gerador</title>
<!-- Incluindo Tailwind CSS para os controles de interface -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
/* PALETA MONOCROMÁTICA */
--cor-primaria: #1a1a1a;
--cor-secundaria: #333333;
--cor-texto: #2a2a2a;
--cor-texto-secundario: #666666;
--cor-texto-claro: #888888;

/* FUNDOS */
--fundo-principal: #ffffff;
--fundo-secundario: #fafafa;
--fundo-destaque: #f5f5f5;

/* BORDAS */
--borda-principal: #e0e0e0;
--borda-sutil: #f0f0f0;

/* ESPAÇAMENTOS */
--espaco-sm: 16px;
--espaco-md: 24px;
--espaco-lg: 32px;
--espaco-xl: 48px;
--espaco-xxl: 64px;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Times New Roman', serif;
line-height: 1.7;
color: var(--cor-texto);
background: var(--fundo-secundario);
font-size: 14px;
min-height: 100vh;
}

.main-layout {
display: flex;
flex-direction: column;
gap: 0;
}

/* Estilos do Documento (Otimizados para Impressão) */
.documento-container {
flex-grow: 1;
max-width: 21cm;
min-height: 29.7cm; /* A4 height */
margin: 0 auto;
background: var(--fundo-principal);
padding: 2cm;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
/* Fontes Times New Roman para aparência legal de documentos */
font-family: 'Times New Roman', serif;
}

.cabecalho { text-align: center; padding-bottom: var(--espaco-lg); border-bottom: 1px solid var(--borda-principal); margin-bottom: var(--espaco-xxl); }
.titulo-documento { font-size: 28px; font-weight: 700; color: var(--cor-primaria); letter-spacing: -0.5px; margin-bottom: var(--espaco-sm); }
.subtitulo-documento { font-size: 14px; color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: 1px; }

.secao { margin-bottom: var(--espaco-xxl); }
.secao-titulo { font-size: 16px; font-weight: 700; color: var(--cor-primaria); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--espaco-lg); padding-bottom: var(--espaco-sm); border-bottom: 1px solid var(--borda-sutil); }
.paragrafo { font-size: 14px; line-height: 1.8; text-align: justify; margin-bottom: var(--espaco-md); }

/* CAMPOS INTEGRADOS NATURALMENTE */
.campo-variavel {
display: inline;
font-weight: 500;
color: var(--cor-primaria);
border-bottom: 1px dotted var(--cor-texto-secundario); /* Dotted line to show it's a field */
transition: border-color 0.2s ease;
}
.campo-destaque { font-weight: 700; color: var(--cor-primaria); }

/* TABELA DE VALORES */
.tabela-valores { width: 100%; border-collapse: collapse; margin: var(--espaco-lg) 0; border: 1px solid var(--borda-principal); }
.tabela-valores th { background: var(--fundo-destaque); padding: var(--espaco-sm); text-align: left; font-weight: 700; font-size: 11px; color: var(--cor-primaria); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--borda-principal); }
.tabela-valores td { padding: var(--espaco-sm); border-bottom: 1px solid var(--borda-sutil); }
.tabela-valores tr:last-child td { border-bottom: none; }
.tabela-valores tr:nth-child(even) { background: var(--fundo-secundario); }
.valor-total { font-weight: 700; font-size: 16px; color: var(--cor-primaria); }

/* CLÁUSULAS */
.clausula { margin-bottom: var(--espaco-lg); }
.clausula-numero { font-weight: 700; color: var(--cor-primaria); margin-bottom: var(--espaco-sm); }
.clausula-texto { font-size: 14px; line-height: 1.7; text-align: justify; }

/* CRONOGRAMA */
#cronograma-lista { padding-top: var(--espaco-sm); }
.cronograma-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--borda-sutil);
font-size: 13px;
}

/* ASSINATURAS */
.assinaturas { margin-top: var(--espaco-xxl); padding-top: var(--espaco-xl); }
.assinatura-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-xxl); margin-top: var(--espaco-xl); }
.assinatura-box { text-align: center; }
.assinatura-linha { border-top: 1px solid var(--cor-primaria); margin-bottom: var(--espaco-sm); padding-top: var(--espaco-xxl); }
.assinatura-nome { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--cor-primaria); }
.assinatura-documento { font-size: 11px; color: var(--cor-texto-secundario); }

/* RODAPÉ */
.rodape { margin-top: var(--espaco-xxl); padding-top: var(--espaco-lg); border-top: 1px solid var(--borda-sutil); text-align: center; font-size: 11px; color: var(--cor-texto-claro); }

/* LAYOUT PRINCIPAL E RESPONSIVIDADE */
@media (min-width: 1024px) {
.main-layout {
flex-direction: row;
justify-content: center;
align-items: flex-start;
padding: var(--espaco-xl) 0;
}
.documento-container {
margin: 0 var(--espaco-md);
min-height: auto;
}
#control-panel {
width: 320px;
position: sticky;
top: var(--espaco-xl);
max-height: calc(100vh - var(--espaco-xxl));
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
}

@media (max-width: 1023px) {
.documento-container {
padding: var(--espaco-lg);
margin: var(--espaco-md) 0;
width: 100%;
min-height: auto;
}
.assinatura-grid {
grid-template-columns: 1fr;
gap: var(--espaco-lg);
}
#control-panel {
order: -1; /* Move painel para o topo em mobile */
}
}

/* IMPRESSÃO */
@media print {
body { background: white; }
.main-layout { padding: 0; }
#control-panel { display: none; }
.documento-container {
box-shadow: none;
margin: 0;
max-width: none;
width: 100%;
min-height: 100vh;
}
.campo-variavel {
/* Remove the dotted line when printing */
border-bottom: 1px solid transparent !important;
}
}
</style>
</head>
<body>

<div class="main-layout">

<!-- PAINEL DE CONTROLE (TAILWIND-BASED) -->
<div id="control-panel" class="bg-white p-6 rounded-lg shadow-lg space-y-6 lg:w-80 w-full mx-auto my-6 lg:my-0">
<h2 class="text-xl font-bold text-gray-800 mb-4 border-b pb-2">Preencher Documento</h2>

<!-- Seção Devedor -->
<fieldset class="border border-gray-200 p-4 rounded-md">
<legend class="text-sm font-semibold text-gray-600 px-1">Dados do Devedor</legend>
<div class="space-y-3">
<label class="block">
<span class="text-xs font-medium text-gray-500">Nome Devedor:</span>
<input type="text" id="inputDebtorName" value="MARIA DOS SANTOS" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2 text-sm">
</label>
<label class="block">
<span class="text-xs font-medium text-gray-500">CPF:</span>
<input type="text" id="inputDebtorCPF" value="987.654.321-00" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2 text-sm">
</label>
<label class="block">
<span class="text-xs font-medium text-gray-500">Endereço:</span>
<textarea id="inputDebtorAddress" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2 text-sm">Avenida Exemplo, 456, Apto 78, Bairro Jardins, São Paulo/SP, CEP 98765-432</textarea>
</label>
</div>
</fieldset>

<!-- Seção Credor -->
<fieldset class="border border-gray-200 p-4 rounded-md">
<legend class="text-sm font-semibold text-gray-600 px-1">Dados do Credor</legend>
<div class="space-y-3">
<label class="block">
<span class="text-xs font-medium text-gray-500">Nome Credor (Empresa):</span>
<input type="text" id="inputCreditorName" value="EMPRESA XYZ LTDA" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2 text-sm">
</label>
<label class="block">
<span class="text-xs font-medium text-gray-500">CNPJ:</span>
<input type="text" id="inputCreditorCNPJ" value="12.345.678/0001-90" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2 text-sm">

Files changed (4) hide show
  1. README.md +9 -5
  2. components/document-editor.js +114 -0
  3. components/sidebar-editor.js +103 -0
  4. index.html +147 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Legalforge Pro Smart Document Foundry
3
- emoji: 🐠
4
- colorFrom: red
5
- colorTo: blue
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: LegalForge Pro | Smart Document Foundry ⚖️
3
+ colorFrom: blue
4
+ colorTo: green
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://deepsite.hf.co).
14
+
components/document-editor.js ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class DocumentEditor extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: flex;
8
+ height: 100vh;
9
+ background: #f8f4f0;
10
+ font-family: 'Crimson Pro', serif;
11
+ }
12
+
13
+ .editor-container {
14
+ flex: 1;
15
+ display: flex;
16
+ padding: 2rem;
17
+ gap: 2rem;
18
+ }
19
+
20
+ .input-pane, .preview-pane {
21
+ flex: 1;
22
+ background: white;
23
+ padding: 3rem;
24
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
25
+ border-radius: 2px;
26
+ border: 1px solid #e0d6cc;
27
+ }
28
+
29
+ .input-pane {
30
+ font-family: 'Inter', sans-serif;
31
+ background: #fffefc;
32
+ }
33
+
34
+ textarea {
35
+ width: 100%;
36
+ height: 100%;
37
+ border: none;
38
+ resize: none;
39
+ font-size: 1rem;
40
+ line-height: 1.8;
41
+ padding: 1rem;
42
+ color: #444;
43
+ background: transparent;
44
+ }
45
+
46
+ .preview-content {
47
+ height: 100%;
48
+ overflow-y: auto;
49
+ font-size: 1.1rem;
50
+ color: #333;
51
+ padding: 1rem;
52
+ }
53
+
54
+ .toolbar {
55
+ position: fixed;
56
+ top: 0;
57
+ left: 0;
58
+ right: 0;
59
+ background: #fff;
60
+ padding: 1rem 2rem;
61
+ display: flex;
62
+ justify-content: space-between;
63
+ align-items: center;
64
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
65
+ z-index: 100;
66
+ }
67
+
68
+ .document-title {
69
+ font-size: 1.2rem;
70
+ color: #555;
71
+ font-weight: 500;
72
+ }
73
+
74
+ .action-buttons {
75
+ display: flex;
76
+ gap: 1rem;
77
+ }
78
+
79
+ button {
80
+ background: none;
81
+ border: none;
82
+ color: #888;
83
+ font-size: 0.9rem;
84
+ cursor: pointer;
85
+ transition: all 0.2s;
86
+ }
87
+
88
+ button:hover {
89
+ color: #333;
90
+ }
91
+ </style>
92
+
93
+ <div class="toolbar">
94
+ <div class="document-title">Novo Documento</div>
95
+ <div class="action-buttons">
96
+ <button id="save-btn">Salvar</button>
97
+ <button id="preview-btn">Visualizar</button>
98
+ <button id="export-btn">Exportar</button>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="editor-container">
103
+ <div class="input-pane">
104
+ <textarea placeholder="Digite seu conteúdo aqui..."></textarea>
105
+ </div>
106
+ <div class="preview-pane">
107
+ <div class="preview-content"></div>
108
+ </div>
109
+ </div>
110
+ `;
111
+ }
112
+ }
113
+
114
+ customElements.define('document-editor', DocumentEditor);
components/sidebar-editor.js ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class EditorSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ width: 300px;
9
+ background: #f0e8e0;
10
+ border-right: 1px solid #e0d6cc;
11
+ height: 100vh;
12
+ position: fixed;
13
+ left: 0;
14
+ top: 0;
15
+ padding-top: 4rem;
16
+ }
17
+
18
+ .sidebar-section {
19
+ padding: 1.5rem;
20
+ border-bottom: 1px solid #e0d6cc;
21
+ }
22
+
23
+ .section-title {
24
+ font-size: 0.9rem;
25
+ text-transform: uppercase;
26
+ letter-spacing: 0.5px;
27
+ color: #888;
28
+ margin-bottom: 1rem;
29
+ }
30
+
31
+ .template-item {
32
+ padding: 0.5rem 0;
33
+ cursor: pointer;
34
+ color: #555;
35
+ transition: all 0.2s;
36
+ }
37
+
38
+ .template-item:hover {
39
+ color: #333;
40
+ }
41
+
42
+ .format-control {
43
+ margin-bottom: 1rem;
44
+ }
45
+
46
+ label {
47
+ display: block;
48
+ margin-bottom: 0.5rem;
49
+ font-size: 0.9rem;
50
+ color: #666;
51
+ }
52
+
53
+ select, input {
54
+ width: 100%;
55
+ padding: 0.5rem;
56
+ border: 1px solid #e0d6cc;
57
+ background: white;
58
+ font-family: inherit;
59
+ }
60
+ </style>
61
+
62
+ <div class="sidebar-section">
63
+ <div class="section-title">Modelos</div>
64
+ <div class="template-item">Petição Inicial</div>
65
+ <div class="template-item">Contrato de Prestação</div>
66
+ <div class="template-item">Declaração de Dívida</div>
67
+ </div>
68
+
69
+ <div class="sidebar-section">
70
+ <div class="section-title">Formatação</div>
71
+
72
+ <div class="format-control">
73
+ <label>Fonte</label>
74
+ <select>
75
+ <option>Crimson Pro</option>
76
+ <option>Times New Roman</option>
77
+ <option>Georgia</option>
78
+ </select>
79
+ </div>
80
+
81
+ <div class="format-control">
82
+ <label>Tamanho</label>
83
+ <input type="range" min="12" max="18" value="14">
84
+ </div>
85
+
86
+ <div class="format-control">
87
+ <label>Alinhamento</label>
88
+ <select>
89
+ <option>Justificado</option>
90
+ <option>Alinhado à Esquerda</option>
91
+ </select>
92
+ </div>
93
+
94
+ <div class="format-control">
95
+ <label>Margens</label>
96
+ <input type="range" min="1" max="5" value="2.5" step="0.5">
97
+ </div>
98
+ </div>
99
+ `;
100
+ }
101
+ }
102
+
103
+ customElements.define('editor-sidebar', EditorSidebar);
index.html CHANGED
@@ -1,19 +1,147 @@
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
+
2
+ <!DOCTYPE html>
3
+ <html lang="pt-BR">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>LegalForge Pro | Smart Document Foundry</title>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600&family=Inter:wght@300;400;500&display=swap">
9
+ <link rel="stylesheet" href="style.css">
10
+ <script src="components/document-editor.js"></script>
11
+ <script src="components/sidebar-editor.js"></script>
12
+ <style>
13
+ :root {
14
+ --primary: #1a365d;
15
+ --secondary: #2c5282;
16
+ --accent: #4299e1;
17
+ --text: #2d3748;
18
+ --light-text: #718096;
19
+ --bg: #f7fafc;
20
+ --card-bg: #ffffff;
21
+ --border: #e2e8f0;
22
+ }
23
+
24
+ body {
25
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
26
+ background-color: var(--bg);
27
+ color: var(--text);
28
+ }
29
+
30
+ .document-preview {
31
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
32
+ transition: all 0.3s ease;
33
+ }
34
+
35
+ .document-preview:hover {
36
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
37
+ transform: translateY(-2px);
38
+ }
39
+
40
+ .template-card {
41
+ border-left: 4px solid var(--accent);
42
+ }
43
+
44
+ .dark {
45
+ --primary: #2b6cb0;
46
+ --secondary: #4299e1;
47
+ --accent: #63b3ed;
48
+ --text: #e2e8f0;
49
+ --light-text: #a0aec0;
50
+ --bg: #1a202c;
51
+ --card-bg: #2d3748;
52
+ --border: #4a5568;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body>
57
+ <editor-sidebar></editor-sidebar>
58
+ <document-editor></document-editor>
59
+ <!-- Header -->
60
+ <div class="flex justify-between items-center mb-8">
61
+ <h1 class="text-3xl font-bold text-gray-800">Meus Documentos</h1>
62
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm transition duration-150 ease-in-out">
63
+ + Novo Documento
64
+ </button>
65
+ </div>
66
+
67
+ <!-- Document Grid -->
68
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
69
+ <!-- Document Card 1 -->
70
+ <div class="document-preview bg-white rounded-lg overflow-hidden border border-gray-200">
71
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
72
+ <div class="flex justify-between items-center">
73
+ <h3 class="font-medium text-gray-800">Petição Inicial</h3>
74
+ <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Ativo</span>
75
+ </div>
76
+ </div>
77
+ <div class="p-4">
78
+ <p class="text-sm text-gray-600 mb-4">Modelo para ações de cobrança com base em contrato de prestação de serviços.</p>
79
+ <div class="flex justify-between text-xs text-gray-500">
80
+ <span>Última modificação: 15/06/2023</span>
81
+ <span>12 campos</span>
82
+ </div>
83
+ </div>
84
+ <div class="bg-gray-50 px-4 py-3 flex justify-end space-x-2 border-t border-gray-200">
85
+ <button class="text-sm text-blue-600 hover:text-blue-800">Editar</button>
86
+ <button class="text-sm text-gray-600 hover:text-gray-800">Duplicar</button>
87
+ <button class="text-sm text-red-600 hover:text-red-800">Excluir</button>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Document Card 2 -->
92
+ <div class="document-preview bg-white rounded-lg overflow-hidden border border-gray-200">
93
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
94
+ <div class="flex justify-between items-center">
95
+ <h3 class="font-medium text-gray-800">Contrato de Prestação</h3>
96
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Padrão</span>
97
+ </div>
98
+ </div>
99
+ <div class="p-4">
100
+ <p class="text-sm text-gray-600 mb-4">Modelo genérico para contratos de prestação de serviços profissionais.</p>
101
+ <div class="flex justify-between text-xs text-gray-500">
102
+ <span>Última modificação: 02/05/2023</span>
103
+ <span>28 campos</span>
104
+ </div>
105
+ </div>
106
+ <div class="bg-gray-50 px-4 py-3 flex justify-end space-x-2 border-t border-gray-200">
107
+ <button class="text-sm text-blue-600 hover:text-blue-800">Editar</button>
108
+ <button class="text-sm text-gray-600 hover:text-gray-800">Duplicar</button>
109
+ <button class="text-sm text-red-600 hover:text-red-800">Excluir</button>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Document Card 3 -->
114
+ <div class="document-preview bg-white rounded-lg overflow-hidden border border-gray-200">
115
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
116
+ <div class="flex justify-between items-center">
117
+ <h3 class="font-medium text-gray-800">Declaração de Dívida</h3>
118
+ <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Rascunho</span>
119
+ </div>
120
+ </div>
121
+ <div class="p-4">
122
+ <p class="text-sm text-gray-600 mb-4">Modelo para reconhecimento de dívida com cronograma de pagamento.</p>
123
+ <div class="flex justify-between text-xs text-gray-500">
124
+ <span>Última modificação: 22/06/2023</span>
125
+ <span>18 campos</span>
126
+ </div>
127
+ </div>
128
+ <div class="bg-gray-50 px-4 py-3 flex justify-end space-x-2 border-t border-gray-200">
129
+ <button class="text-sm text-blue-600 hover:text-blue-800">Editar</button>
130
+ <button class="text-sm text-gray-600 hover:text-gray-800">Duplicar</button>
131
+ <button class="text-sm text-red-600 hover:text-red-800">Excluir</button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Templates Section -->
137
+ <div class="mt-12">
138
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Modelos Disponíveis</h2>
139
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
140
+ <!-- Template 1 -->
141
+ <div class="template-card bg-white p-4 rounded-md border border-gray-200">
142
+ <div class="text-blue-600 font-medium mb-2">Petição Inicial</div>
143
+ <p class="text-sm text-gray-600 mb-3">Modelo base para diversas ações judiciais.</p>
144
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray
145
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
146
+ </body>
147
+ </html>