ui-optago 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/ui-optago.css +19 -1
  3. package/ui-optago.js +56 -3
  4. package/ui-optago.html +0 -1268
package/ui-optago.html DELETED
@@ -1,1268 +0,0 @@
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
-
7
- <!-- SEO -->
8
- <title>UI Óptago | Design System em CSS puro & JS vanilla</title>
9
- <meta name="description" content="Design System da Óptago: biblioteca de componentes UI em CSS puro e JavaScript vanilla, com tema claro/escuro, verde-lima #C0FF6B e app shell com sidebar colapsável. Sem Tailwind, sem build.">
10
- <meta name="keywords" content="design system, ui, css puro, componentes, vanilla js, dark mode, óptago">
11
- <meta name="author" content="Óptago">
12
- <meta name="theme-color" content="#050505" media="(prefers-color-scheme: dark)">
13
- <meta name="theme-color" content="#EEF2F7" media="(prefers-color-scheme: light)">
14
- <link rel="canonical" href="https://optago.com.br/">
15
-
16
- <!-- Open Graph / redes sociais -->
17
- <meta property="og:type" content="website">
18
- <meta property="og:title" content="UI Óptago Design System">
19
- <meta property="og:description" content="Componentes UI em CSS puro e JS vanilla, com tema claro/escuro e o verde-lima da marca Óptago.">
20
- <meta property="og:locale" content="pt_BR">
21
- <meta property="og:site_name" content="Óptago">
22
- <meta name="twitter:card" content="summary_large_image">
23
- <meta name="twitter:title" content="UI Óptago Design System">
24
- <meta name="twitter:description" content="Componentes UI em CSS puro e JS vanilla, com tema claro/escuro e o verde-lima da marca Óptago.">
25
-
26
- <!-- Favicon: octógono verde-lima da marca, embutido em SVG (sem arquivo externo) -->
27
- <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><polygon points=%2230,4 70,4 96,30 96,70 70,96 30,96 4,70 4,30%22 fill=%22%23C0FF6B%22/></svg>">
28
-
29
- <link rel="stylesheet" href="./ui-optago.css">
30
- <script src="./ui-optago.js"></script>
31
- </head>
32
-
33
- <body class="op-app">
34
-
35
- <!-- ==================== COLUNA PRINCIPAL (header + main + footer) ==================== -->
36
- <div class="op-app-body">
37
-
38
- <!-- Glows de fundo (verde-lima desfocado) ficam atrás do conteúdo -->
39
- <div class="op-glow op-glow-lg" style="top:-140px; left:22%;"></div>
40
- <div class="op-glow op-glow-sm" style="bottom:10%; left:-80px;"></div>
41
- <div class="op-glow op-glow-info op-glow-sm" style="bottom:-60px; right:8%;"></div>
42
-
43
- <!-- HEADER (fixo) -->
44
- <header class="op-header">
45
- <div class="op-header-group">
46
- <div class="op-brand">
47
- <div class="op-brand-mark"></div>
48
- <span class="op-brand-name">Óptago</span>
49
- </div>
50
- <div class="op-header-divider"></div>
51
- <div class="op-header-group">
52
- <strong style="font-family:var(--op-font-display); font-size:.875rem;">UI</strong>
53
- <span class="op-badge op-badge-brand op-badge-pill"><span class="op-dot op-dot-pulse"></span>v1.0.2</span>
54
- </div>
55
- </div>
56
- <div class="op-header-group">
57
- <button class="op-btn op-btn-icon op-tip-bottom" data-op-theme-toggle data-op-tip="Alternar tema">
58
- <i class="ph ph-moon op-icon-moon"></i>
59
- <i class="ph ph-sun op-icon-sun" style="display:none"></i>
60
- </button>
61
-
62
- <!-- Hamburguer: aparece só no mobile para abrir o drawer -->
63
- <button class="op-btn op-btn-icon op-mobile-only" data-op-sidebar-mobile>
64
- <i class="ph ph-list"></i>
65
- </button>
66
- </div>
67
- </header>
68
-
69
- <!-- MAIN (única área rolável) -->
70
- <main class="op-main">
71
- <div class="op-container">
72
-
73
- <section class="op-mb-4">
74
- <h1>Design System Óptago</h1>
75
- <p class="op-text-muted" style="max-width:640px;">
76
- Biblioteca completa de componentes em <strong>CSS puro</strong> sem Tailwind, sem build.
77
- Inclua <code>ui-optago.css</code> e <code>ui-optago.js</code> no seu projeto e use as classes
78
- com prefixo <code>op-</code>. Em cada bloco abaixo, use <strong>Copiar</strong> para levar o
79
- HTML direto pro seu projeto, ou <strong>Ver código</strong> para inspecionar.
80
- </p>
81
-
82
- <div class="op-alert op-alert-info op-mt-2 ">
83
- <i class="ph ph-cloud-arrow-down"></i>
84
- <div style="min-width:0; flex:1;">
85
- <p class="op-alert-title">Usar via CDN</p>
86
- <p class="op-alert-text op-mb-1">Sem baixar nada adicione as duas linhas ao <code>&lt;head&gt;</code>:</p>
87
- <pre class="op-demo-code is-visible" style="border:1px solid var(--op-border); border-radius:var(--op-radius-sm); margin:0;">&lt;link rel="stylesheet" href="https://unpkg.com/ui-optago/ui-optago.css"&gt;
88
- &lt;script src="https://unpkg.com/ui-optago/ui-optago.js"&gt;&lt;/script&gt;</pre>
89
- </div>
90
- </div>
91
- </section>
92
-
93
- <!-- ==================== 1. CORES ==================== -->
94
- <section id="cores" class="op-mb-4" style="scroll-margin-top:1rem;">
95
- <div class="op-section-head">
96
- <i class="ph ph-palette"></i>
97
- <h2>Cores da Marca</h2>
98
- </div>
99
- <div class="op-grid-4 op-mb-4">
100
- <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
101
- <div style="height:72px; background:#000;"></div>
102
- <div style="padding:.875rem 1rem;"><strong>Preto Base</strong><br><code class="op-text-muted op-text-xs">#000000</code></div>
103
- </div>
104
- <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
105
- <div style="height:72px; background:#C0FF6B;"></div>
106
- <div style="padding:.875rem 1rem;"><strong>Verde-lima Destaque</strong><br><code class="op-text-muted op-text-xs">#C0FF6B · --op-accent</code></div>
107
- </div>
108
- <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
109
- <div style="height:72px; background:#D5D5D5;"></div>
110
- <div style="padding:.875rem 1rem;"><strong>Cinza-claro Texto</strong><br><code class="op-text-muted op-text-xs">#D5D5D5 · --op-text</code></div>
111
- </div>
112
- <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
113
- <div style="height:72px; background:#656565;"></div>
114
- <div style="padding:.875rem 1rem;"><strong>Cinza-chumbo Apoio</strong><br><code class="op-text-muted op-text-xs">#656565 · --op-muted</code></div>
115
- </div>
116
- </div>
117
-
118
- <div class="op-section-head">
119
- <i class="ph ph-traffic-signal"></i>
120
- <h2>Cores Semânticas</h2>
121
- </div>
122
- <div class="op-grid-4">
123
- <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
124
- <div style="height:72px; background:#3B82F6;"></div>
125
- <div style="padding:.875rem 1rem;"><strong>Info</strong><br><code class="op-text-muted op-text-xs">#3B82F6 · --op-info</code></div>
126
- </div>
127
- <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
128
- <div style="height:72px; background:#10B981;"></div>
129
- <div style="padding:.875rem 1rem;"><strong>Success</strong><br><code class="op-text-muted op-text-xs">#10B981 · --op-success</code></div>
130
- </div>
131
- <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
132
- <div style="height:72px; background:#F59E0B;"></div>
133
- <div style="padding:.875rem 1rem;"><strong>Warning</strong><br><code class="op-text-muted op-text-xs">#F59E0B · --op-warning</code></div>
134
- </div>
135
- <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
136
- <div style="height:72px; background:#EF4444;"></div>
137
- <div style="padding:.875rem 1rem;"><strong>Danger / Error</strong><br><code class="op-text-muted op-text-xs">#EF4444 · --op-danger</code></div>
138
- </div>
139
- </div>
140
- </section>
141
-
142
- <!-- ==================== 2. TIPOGRAFIA ==================== -->
143
- <section id="tipografia" class="op-mb-4" style="scroll-margin-top:1rem;">
144
- <div class="op-section-head">
145
- <i class="ph ph-text-aa"></i>
146
- <h2>Tipografia</h2>
147
- </div>
148
- <div class="op-demo">
149
- <div class="op-demo-preview" id="d-tipografia">
150
- <h1>Heading 1 Chakra Petch</h1>
151
- <h2>Heading 2 Seções</h2>
152
- <h3>Heading 3 Cards e blocos</h3>
153
- <h4>Heading 4 Subtítulos</h4>
154
- <p>Parágrafo padrão em <strong>Inter</strong>. Criamos e mantemos produtos próprios e sob medida,
155
- sempre com a mesma régua: proteger dados, reduzir atrito e manter tudo no ar.</p>
156
- <p class="op-text-muted">Texto secundário / muted para descrições e apoio.</p>
157
- <p class="op-text-mono op-text-sm">JetBrains Mono dados técnicos, códigos e rótulos. <span class="op-text-accent">optago.com.br</span></p>
158
- <p>Atalho de teclado: <kbd>Ctrl</kbd> + <kbd>K</kbd> · código inline: <code>--op-accent: #C0FF6B</code></p>
159
- </div>
160
- <div class="op-demo-bar">
161
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-tipografia"><i class="ph ph-code"></i> Ver código</button>
162
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-tipografia"><i class="ph ph-copy"></i> Copiar</button>
163
- </div>
164
- </div>
165
- </section>
166
-
167
- <!-- ==================== 3. BOTÕES ==================== -->
168
- <section id="botoes" class="op-mb-4" style="scroll-margin-top:1rem;">
169
- <div class="op-section-head">
170
- <i class="ph ph-hand-pointing"></i>
171
- <h2>Botões</h2>
172
- </div>
173
- <div class="op-demo">
174
- <div class="op-demo-preview" id="d-botoes">
175
- <div class="op-row op-mb-2">
176
- <button class="op-btn op-btn-primary"><i class="ph ph-rocket-launch"></i> Primário</button>
177
- <button class="op-btn op-btn-secondary">Secundário</button>
178
- <button class="op-btn op-btn-success"><i class="ph ph-check"></i> Success</button>
179
- <button class="op-btn op-btn-danger"><i class="ph ph-trash"></i> Danger</button>
180
- <button class="op-btn op-btn-warning"><i class="ph ph-warning"></i> Warning</button>
181
- <button class="op-btn op-btn-info"><i class="ph ph-info"></i> Info</button>
182
- </div>
183
- <div class="op-row op-mb-2">
184
- <button class="op-btn op-btn-ghost">Ghost</button>
185
- <button class="op-btn op-btn-ghost-info">Ghost Info</button>
186
- <button class="op-btn op-btn-ghost-success">Ghost Success</button>
187
- <button class="op-btn op-btn-ghost-warning">Ghost Warning</button>
188
- <button class="op-btn op-btn-ghost-danger">Ghost Danger</button>
189
- </div>
190
- <div class="op-row op-mb-2">
191
- <button class="op-btn op-btn-primary op-btn-sm">Pequeno</button>
192
- <button class="op-btn op-btn-primary">Padrão</button>
193
- <button class="op-btn op-btn-primary op-btn-lg">Grande</button>
194
- <button class="op-btn op-btn-primary" disabled>Desabilitado</button>
195
- <button class="op-btn op-btn-secondary is-loading">Carregando</button>
196
- </div>
197
- <div class="op-row">
198
- <button class="op-btn op-btn-icon" data-op-tip="Configurações"><i class="ph ph-gear"></i></button>
199
- <button class="op-btn op-btn-icon" data-op-tip="Notificações"><i class="ph ph-bell"></i></button>
200
- <div class="op-btn-group">
201
- <button class="op-btn op-btn-secondary"><i class="ph ph-caret-left"></i></button>
202
- <button class="op-btn op-btn-secondary">Hoje</button>
203
- <button class="op-btn op-btn-secondary"><i class="ph ph-caret-right"></i></button>
204
- </div>
205
- </div>
206
- </div>
207
- <div class="op-demo-bar">
208
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-botoes"><i class="ph ph-code"></i> Ver código</button>
209
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-botoes"><i class="ph ph-copy"></i> Copiar</button>
210
- </div>
211
- </div>
212
- </section>
213
-
214
- <!-- ==================== 4. BADGES ==================== -->
215
- <section id="badges" class="op-mb-4" style="scroll-margin-top:1rem;">
216
- <div class="op-section-head">
217
- <i class="ph ph-tag"></i>
218
- <h2>Badges & Etiquetas</h2>
219
- </div>
220
- <div class="op-demo">
221
- <div class="op-demo-preview" id="d-badges">
222
- <div class="op-row">
223
- <span class="op-badge">Default</span>
224
- <span class="op-badge op-badge-brand"><span class="op-dot op-dot-pulse"></span> Brand · Online</span>
225
- <span class="op-badge op-badge-info">Info</span>
226
- <span class="op-badge op-badge-success"><i class="ph ph-check-circle"></i> Resolvido</span>
227
- <span class="op-badge op-badge-warning"><i class="ph ph-clock"></i> Pendente</span>
228
- <span class="op-badge op-badge-danger">Crítico</span>
229
- <span class="op-badge op-badge-pill op-badge-success">Pill</span>
230
- <span class="op-badge op-badge-pill op-badge-danger"><span class="op-dot"></span> Offline</span>
231
- </div>
232
- </div>
233
- <div class="op-demo-bar">
234
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-badges"><i class="ph ph-code"></i> Ver código</button>
235
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-badges"><i class="ph ph-copy"></i> Copiar</button>
236
- </div>
237
- </div>
238
- </section>
239
-
240
- <!-- ==================== 5. ALERTAS ==================== -->
241
- <section id="alertas" class="op-mb-4" style="scroll-margin-top:1rem;">
242
- <div class="op-section-head">
243
- <i class="ph ph-warning-circle"></i>
244
- <h2>Alertas</h2>
245
- </div>
246
- <div class="op-demo">
247
- <div class="op-demo-preview op-stack" id="d-alertas">
248
- <div class="op-alert op-alert-info">
249
- <i class="ph ph-info"></i>
250
- <div>
251
- <p class="op-alert-title">Atualização disponível</p>
252
- <p class="op-alert-text">A versão 3.4 do painel já pode ser instalada.</p>
253
- </div>
254
- <button class="op-alert-close" data-op-dismiss><i class="ph ph-x"></i></button>
255
- </div>
256
- <div class="op-alert op-alert-success">
257
- <i class="ph ph-check-circle"></i>
258
- <div>
259
- <p class="op-alert-title">Deploy concluído</p>
260
- <p class="op-alert-text">Todos os serviços estão no ar e saudáveis.</p>
261
- </div>
262
- <button class="op-alert-close" data-op-dismiss><i class="ph ph-x"></i></button>
263
- </div>
264
- <div class="op-alert op-alert-warning">
265
- <i class="ph ph-warning"></i>
266
- <div>
267
- <p class="op-alert-title">Espaço quase esgotado</p>
268
- <p class="op-alert-text">Seu disco principal atingiu 90% de capacidade.</p>
269
- </div>
270
- <button class="op-alert-close" data-op-dismiss><i class="ph ph-x"></i></button>
271
- </div>
272
- <div class="op-alert op-alert-danger">
273
- <i class="ph ph-x-circle"></i>
274
- <div>
275
- <p class="op-alert-title">Falha na conexão</p>
276
- <p class="op-alert-text">Não foi possível conectar ao banco de dados.</p>
277
- </div>
278
- <button class="op-alert-close" data-op-dismiss><i class="ph ph-x"></i></button>
279
- </div>
280
- </div>
281
- <div class="op-demo-bar">
282
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-alertas"><i class="ph ph-code"></i> Ver código</button>
283
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-alertas"><i class="ph ph-copy"></i> Copiar</button>
284
- </div>
285
- </div>
286
- </section>
287
-
288
- <!-- ==================== 6. FORMULÁRIOS ==================== -->
289
- <section id="formularios" class="op-mb-4" style="scroll-margin-top:1rem;">
290
- <div class="op-section-head">
291
- <i class="ph ph-textbox"></i>
292
- <h2>Formulários</h2>
293
- </div>
294
- <div class="op-demo">
295
- <div class="op-demo-preview" id="d-forms">
296
- <div class="op-grid-2 op-mb-2">
297
- <div class="op-field">
298
- <label class="op-label" for="f-nome">Nome completo <span class="req">*</span></label>
299
- <input class="op-input" id="f-nome" type="text" placeholder="Ex.: Aline Franco">
300
- <p class="op-help">Como aparece no documento.</p>
301
- </div>
302
- <div class="op-field">
303
- <label class="op-label" for="f-email">E-mail com ícone</label>
304
- <div class="op-input-icon">
305
- <i class="ph ph-envelope"></i>
306
- <input class="op-input" id="f-email" type="email" placeholder="voce@optago.com.br">
307
- </div>
308
- </div>
309
- <div class="op-field">
310
- <label class="op-label" for="f-erro">Campo com erro</label>
311
- <input class="op-input is-error" id="f-erro" type="text" value="cpf inválido">
312
- <p class="op-help is-error"><i class="ph ph-warning-circle"></i> Verifique o CPF informado.</p>
313
- </div>
314
- <div class="op-field">
315
- <label class="op-label" for="f-ok">Campo válido</label>
316
- <input class="op-input is-success" id="f-ok" type="text" value="optago.com.br">
317
- <p class="op-help is-success"><i class="ph ph-check-circle"></i> Domínio disponível!</p>
318
- </div>
319
- <div class="op-field">
320
- <label class="op-label" for="f-select">Select</label>
321
- <select class="op-select" id="f-select">
322
- <option>sa-east-1 (São Paulo)</option>
323
- <option>us-east-1 (Virgínia)</option>
324
- <option>eu-west-1 (Irlanda)</option>
325
- </select>
326
- </div>
327
- <div class="op-field">
328
- <label class="op-label" for="f-site">Input group</label>
329
- <div class="op-input-group">
330
- <span class="op-input-addon">https://</span>
331
- <input class="op-input" id="f-site" type="text" placeholder="meusite">
332
- <span class="op-input-addon">.com.br</span>
333
- </div>
334
- </div>
335
- </div>
336
- <div class="op-field op-mb-2">
337
- <label class="op-label" for="f-msg">Textarea</label>
338
- <textarea class="op-textarea" id="f-msg" placeholder="Descreva o que você precisa..."></textarea>
339
- </div>
340
- <div class="op-row op-mb-2">
341
- <label class="op-check"><input type="checkbox" checked> <span>Checkbox marcado</span></label>
342
- <label class="op-check"><input type="checkbox"> <span>Checkbox</span></label>
343
- <label class="op-check"><input type="checkbox" disabled> <span>Desabilitado</span></label>
344
- <label class="op-check"><input type="radio" name="r1" checked> <span>Radio A</span></label>
345
- <label class="op-check"><input type="radio" name="r1"> <span>Radio B</span></label>
346
- </div>
347
- <div class="op-row op-mb-2">
348
- <label class="op-switch"><input type="checkbox" checked> <span>Notificações ativas</span></label>
349
- <label class="op-switch"><input type="checkbox"> <span>Modo manutenção</span></label>
350
- </div>
351
- <div class="op-field" style="max-width:320px;">
352
- <label class="op-label" for="f-range">Range 75%</label>
353
- <input class="op-range" id="f-range" type="range" min="0" max="100" value="75">
354
- </div>
355
- </div>
356
- <div class="op-demo-bar">
357
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-forms"><i class="ph ph-code"></i> Ver código</button>
358
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-forms"><i class="ph ph-copy"></i> Copiar</button>
359
- </div>
360
- </div>
361
- </section>
362
-
363
- <!-- ==================== 7. TABELAS ==================== -->
364
- <section id="tabelas" class="op-mb-4" style="scroll-margin-top:1rem;">
365
- <div class="op-section-head">
366
- <i class="ph ph-table"></i>
367
- <h2>Tabelas</h2>
368
- </div>
369
- <div class="op-demo">
370
- <div class="op-demo-preview" id="d-tabelas">
371
- <div class="op-table-wrap">
372
- <table class="op-table op-table-hover">
373
- <thead>
374
- <tr>
375
- <th>Usuário</th>
376
- <th>Função</th>
377
- <th>Status</th>
378
- <th>Uso</th>
379
- <th style="text-align:right;">Ações</th>
380
- </tr>
381
- </thead>
382
- <tbody>
383
- <tr>
384
- <td>
385
- <div class="op-row" style="gap:.75rem; flex-wrap:nowrap;">
386
- <div class="op-avatar">AF</div>
387
- <div>
388
- <strong style="color:var(--op-strong);">Aline Franco</strong><br>
389
- <span class="op-text-mono op-text-xs op-text-muted">usr_8921</span>
390
- </div>
391
- </div>
392
- </td>
393
- <td>Administradora</td>
394
- <td><span class="op-badge op-badge-success op-badge-pill"><span class="op-dot"></span> Ativo</span></td>
395
- <td style="min-width:140px;">
396
- <div class="op-progress"><div class="op-progress-bar is-success" style="width:64%"></div></div>
397
- </td>
398
- <td style="text-align:right;">
399
- <button class="op-btn op-btn-icon op-btn-sm"><i class="ph ph-dots-three"></i></button>
400
- </td>
401
- </tr>
402
- <tr>
403
- <td>
404
- <div class="op-row" style="gap:.75rem; flex-wrap:nowrap;">
405
- <div class="op-avatar">CE</div>
406
- <div>
407
- <strong style="color:var(--op-strong);">Carlos Eduardo</strong><br>
408
- <span class="op-text-mono op-text-xs op-text-muted">usr_1174</span>
409
- </div>
410
- </div>
411
- </td>
412
- <td>DevOps</td>
413
- <td><span class="op-badge op-badge-warning op-badge-pill"><span class="op-dot"></span> Ausente</span></td>
414
- <td><div class="op-progress"><div class="op-progress-bar is-warning" style="width:88%"></div></div></td>
415
- <td style="text-align:right;">
416
- <button class="op-btn op-btn-icon op-btn-sm"><i class="ph ph-dots-three"></i></button>
417
- </td>
418
- </tr>
419
- <tr>
420
- <td>
421
- <div class="op-row" style="gap:.75rem; flex-wrap:nowrap;">
422
- <div class="op-avatar">MR</div>
423
- <div>
424
- <strong style="color:var(--op-strong);">Marina Reis</strong><br>
425
- <span class="op-text-mono op-text-xs op-text-muted">usr_3350</span>
426
- </div>
427
- </div>
428
- </td>
429
- <td>Suporte</td>
430
- <td><span class="op-badge op-badge-danger op-badge-pill"><span class="op-dot"></span> Bloqueado</span></td>
431
- <td><div class="op-progress"><div class="op-progress-bar is-danger" style="width:97%"></div></div></td>
432
- <td style="text-align:right;">
433
- <button class="op-btn op-btn-icon op-btn-sm"><i class="ph ph-dots-three"></i></button>
434
- </td>
435
- </tr>
436
- </tbody>
437
- </table>
438
- </div>
439
- </div>
440
- <div class="op-demo-bar">
441
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-tabelas"><i class="ph ph-code"></i> Ver código</button>
442
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-tabelas"><i class="ph ph-copy"></i> Copiar</button>
443
- </div>
444
- </div>
445
-
446
- <h3 class="op-mt-3 op-mb-2"><i class="ph ph-lightning op-text-accent"></i> Tabela avançada Tabulator</h3>
447
- <p class="op-text-muted op-text-sm op-mb-2">
448
- Para tabelas com ordenação, paginação e filtros, use a variante com
449
- <a href="https://tabulator.info" target="_blank" rel="noopener">Tabulator</a> e tema Óptago.
450
- A biblioteca é carregada sob demanda: <code>OptagoUI.tabulator('#minhaTabela', opções)</code>
451
- clique nos cabeçalhos para ordenar.
452
- </p>
453
- <div class="op-demo">
454
- <div class="op-demo-preview" id="d-tabulator-wrap">
455
- <div id="demo-tabulator"></div>
456
- </div>
457
- <div class="op-demo-bar">
458
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-tabulator-src"><i class="ph ph-code"></i> Ver código</button>
459
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-tabulator-src"><i class="ph ph-copy"></i> Copiar</button>
460
- </div>
461
- </div>
462
- <!-- Código de referência exibido pelos botões acima -->
463
- <script type="text/plain" id="d-tabulator-src">
464
- <div id="minhaTabela"></div>
465
- <script>
466
- OptagoUI.tabulator('#minhaTabela', {
467
- layout: 'fitColumns',
468
- pagination: true,
469
- paginationSize: 5,
470
- data: [ { instancia: 'srv-prod-01', regiao: 'sa-east-1', cpu: 64, status: 'Ativo' } ],
471
- columns: [
472
- { title: 'Instância', field: 'instancia' },
473
- { title: 'Região', field: 'regiao' },
474
- { title: 'CPU', field: 'cpu', formatter: cell => {
475
- const v = cell.getValue();
476
- const cor = v > 90 ? 'is-danger' : v > 75 ? 'is-warning' : 'is-success';
477
- return `<div class="op-progress"><div class="op-progress-bar ${cor}" style="width:${v}%"></div></div>`;
478
- }},
479
- { title: 'Status', field: 'status', formatter: cell => {
480
- const mapa = { 'Ativo': 'success', 'Ausente': 'warning', 'Bloqueado': 'danger' };
481
- return `<span class="op-badge op-badge-${mapa[cell.getValue()]} op-badge-pill"><span class="op-dot"></span> ${cell.getValue()}</span>`;
482
- }}
483
- ]
484
- });
485
- <\/script>
486
- </script>
487
- </section>
488
-
489
- <!-- ==================== 8. CARDS ==================== -->
490
- <section id="cards" class="op-mb-4" style="scroll-margin-top:1rem;">
491
- <div class="op-section-head">
492
- <i class="ph ph-cards"></i>
493
- <h2>Cards</h2>
494
- </div>
495
- <div class="op-demo">
496
- <div class="op-demo-preview" id="d-cards">
497
- <div class="op-grid-3 op-mb-2">
498
- <div class="op-card op-card-hover">
499
- <div class="op-card-icon op-oct" style="background:color-mix(in srgb, var(--op-accent) 12%, transparent); border:none;"><i class="ph ph-shield-check op-text-accent"></i></div>
500
- <h3 class="op-card-title">Auditoria de Segurança</h3>
501
- <p class="op-card-text">Execute uma varredura completa nos seus containers em busca de vulnerabilidades.</p>
502
- <a href="#" class="op-card-link">Iniciar scan <i class="ph ph-arrow-right"></i></a>
503
- </div>
504
- <div class="op-card op-card-hover">
505
- <div class="op-stat">
506
- <span class="op-stat-label">Requisições / mês</span>
507
- <span class="op-stat-value">1.42M</span>
508
- <span class="op-stat-delta is-up"><i class="ph ph-trend-up"></i> +12,4% vs. mês anterior</span>
509
- </div>
510
- </div>
511
- <div class="op-card op-card-hover">
512
- <div class="op-stat">
513
- <span class="op-stat-label">Tempo de resposta</span>
514
- <span class="op-stat-value">184ms</span>
515
- <span class="op-stat-delta is-down"><i class="ph ph-trend-down"></i> -8ms esta semana</span>
516
- </div>
517
- </div>
518
- </div>
519
- <div class="op-card" style="display:flex; align-items:center; gap:1rem; max-width:420px;">
520
- <div class="op-avatar op-avatar-lg op-avatar-ring">CE</div>
521
- <div>
522
- <h3 class="op-card-title" style="margin-bottom:.125rem;">Carlos Eduardo</h3>
523
- <p class="op-text-mono op-text-xs op-text-muted" style="margin-bottom:.5rem;">Engenheiro DevOps</p>
524
- <div class="op-row" style="gap:.375rem;">
525
- <span class="op-badge">Admin</span>
526
- <span class="op-badge op-badge-brand">Óptago</span>
527
- </div>
528
- </div>
529
- </div>
530
- </div>
531
- <div class="op-demo-bar">
532
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-cards"><i class="ph ph-code"></i> Ver código</button>
533
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-cards"><i class="ph ph-copy"></i> Copiar</button>
534
- </div>
535
- </div>
536
- </section>
537
-
538
- <!-- ==================== 9. AVATARES ==================== -->
539
- <section id="avatares" class="op-mb-4" style="scroll-margin-top:1rem;">
540
- <div class="op-section-head">
541
- <i class="ph ph-user-circle"></i>
542
- <h2>Avatares</h2>
543
- </div>
544
- <div class="op-demo">
545
- <div class="op-demo-preview" id="d-avatares">
546
- <div class="op-row">
547
- <div class="op-avatar op-avatar-sm">SM</div>
548
- <div class="op-avatar">MD</div>
549
- <div class="op-avatar op-avatar-lg">LG</div>
550
- <div class="op-avatar op-avatar-ring">AR</div>
551
- <div class="op-avatar-group">
552
- <div class="op-avatar">AF</div>
553
- <div class="op-avatar">CE</div>
554
- <div class="op-avatar">MR</div>
555
- <div class="op-avatar op-text-muted">+5</div>
556
- </div>
557
- </div>
558
- </div>
559
- <div class="op-demo-bar">
560
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-avatares"><i class="ph ph-code"></i> Ver código</button>
561
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-avatares"><i class="ph ph-copy"></i> Copiar</button>
562
- </div>
563
- </div>
564
- </section>
565
-
566
- <!-- ==================== 10. PROGRESSO & LOADERS ==================== -->
567
- <section id="progresso" class="op-mb-4" style="scroll-margin-top:1rem;">
568
- <div class="op-section-head">
569
- <i class="ph ph-spinner-gap"></i>
570
- <h2>Progresso, Spinners & Skeleton</h2>
571
- </div>
572
- <div class="op-demo">
573
- <div class="op-demo-preview" id="d-progresso">
574
- <div class="op-stack op-mb-3" style="max-width:420px;">
575
- <div>
576
- <div class="op-progress-header"><span class="lbl">Deploy em andamento</span><span class="val">75%</span></div>
577
- <div class="op-progress"><div class="op-progress-bar is-animated" style="width:75%"></div></div>
578
- </div>
579
- <div>
580
- <div class="op-progress-header"><span class="lbl">Upload</span><span class="val">40%</span></div>
581
- <div class="op-progress"><div class="op-progress-bar is-info" style="width:40%"></div></div>
582
- </div>
583
- <div>
584
- <div class="op-progress-header"><span class="lbl">Disco</span><span class="val">92%</span></div>
585
- <div class="op-progress"><div class="op-progress-bar is-danger" style="width:92%"></div></div>
586
- </div>
587
- </div>
588
- <div class="op-row op-mb-3">
589
- <span class="op-spinner op-spinner-sm"></span>
590
- <span class="op-spinner"></span>
591
- <span class="op-spinner op-spinner-lg"></span>
592
- <div class="op-spinner-dots"><span></span><span></span><span></span></div>
593
- </div>
594
- <div class="op-grid-3">
595
- <!-- Skeleton: card com imagem -->
596
- <div class="op-card">
597
- <div class="op-skeleton op-skeleton-thumb"></div>
598
- <div class="op-skeleton op-skeleton-title"></div>
599
- <div class="op-skeleton op-skeleton-text" style="width:95%;"></div>
600
- <div class="op-skeleton op-skeleton-text" style="width:70%;"></div>
601
- <div class="op-row op-mt-2" style="gap:.5rem;">
602
- <div class="op-skeleton op-skeleton-btn"></div>
603
- <div class="op-skeleton op-skeleton-badge"></div>
604
- </div>
605
- </div>
606
- <!-- Skeleton: lista de contatos -->
607
- <div class="op-card">
608
- <div class="op-skeleton op-skeleton-title" style="width:40%;"></div>
609
- <div class="op-skeleton-row">
610
- <div class="op-skeleton op-skeleton-circle" style="width:38px; height:38px;"></div>
611
- <div style="flex:1;">
612
- <div class="op-skeleton op-skeleton-text" style="width:55%;"></div>
613
- <div class="op-skeleton op-skeleton-text" style="width:80%; margin-bottom:0;"></div>
614
- </div>
615
- </div>
616
- <div class="op-skeleton-row">
617
- <div class="op-skeleton op-skeleton-circle" style="width:38px; height:38px;"></div>
618
- <div style="flex:1;">
619
- <div class="op-skeleton op-skeleton-text" style="width:65%;"></div>
620
- <div class="op-skeleton op-skeleton-text" style="width:45%; margin-bottom:0;"></div>
621
- </div>
622
- </div>
623
- <div class="op-skeleton-row">
624
- <div class="op-skeleton op-skeleton-circle" style="width:38px; height:38px;"></div>
625
- <div style="flex:1;">
626
- <div class="op-skeleton op-skeleton-text" style="width:50%;"></div>
627
- <div class="op-skeleton op-skeleton-text" style="width:70%; margin-bottom:0;"></div>
628
- </div>
629
- </div>
630
- </div>
631
- <!-- Skeleton: tabela / KPI -->
632
- <div class="op-card">
633
- <div class="op-row op-mb-2" style="justify-content:space-between; flex-wrap:nowrap;">
634
- <div class="op-skeleton op-skeleton-text" style="width:30%; margin-bottom:0;"></div>
635
- <div class="op-skeleton op-skeleton-badge"></div>
636
- </div>
637
- <div class="op-skeleton" style="height:34px; margin-bottom:.625rem;"></div>
638
- <div class="op-skeleton" style="height:34px; margin-bottom:.625rem; opacity:.8;"></div>
639
- <div class="op-skeleton" style="height:34px; margin-bottom:.625rem; opacity:.6;"></div>
640
- <div class="op-skeleton" style="height:34px; opacity:.4;"></div>
641
- </div>
642
- </div>
643
- </div>
644
- <div class="op-demo-bar">
645
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-progresso"><i class="ph ph-code"></i> Ver código</button>
646
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-progresso"><i class="ph ph-copy"></i> Copiar</button>
647
- </div>
648
- </div>
649
- </section>
650
-
651
- <!-- ==================== 11. TABS ==================== -->
652
- <section id="tabs" class="op-mb-4" style="scroll-margin-top:1rem;">
653
- <div class="op-section-head">
654
- <i class="ph ph-tabs"></i>
655
- <h2>Tabs</h2>
656
- </div>
657
- <div class="op-demo">
658
- <div class="op-demo-preview" id="d-tabs">
659
- <div data-op-tab-group="exemplo1" class="op-mb-3">
660
- <div class="op-tabs">
661
- <button class="op-tab is-active" data-op-tab="geral"><i class="ph ph-gauge"></i> Geral</button>
662
- <button class="op-tab" data-op-tab="config"><i class="ph ph-gear"></i> Configurações</button>
663
- <button class="op-tab" data-op-tab="logs"><i class="ph ph-terminal-window"></i> Logs</button>
664
- </div>
665
- <div class="op-tab-panel is-active" data-op-tab-panel="geral">
666
- <p class="op-text-muted" style="margin:0;">Visão geral do sistema: tudo operando normalmente.</p>
667
- </div>
668
- <div class="op-tab-panel" data-op-tab-panel="config">
669
- <p class="op-text-muted" style="margin:0;">Ajuste preferências, chaves de API e integrações.</p>
670
- </div>
671
- <div class="op-tab-panel" data-op-tab-panel="logs">
672
- <p class="op-text-mono op-text-sm" style="margin:0;">[12:04:31] INFO serviço reiniciado com sucesso</p>
673
- </div>
674
- </div>
675
- <div data-op-tab-group="exemplo2" class="op-mb-3">
676
- <div class="op-tabs-pills">
677
- <button class="op-tab is-active" data-op-tab="dia">Dia</button>
678
- <button class="op-tab" data-op-tab="semana">Semana</button>
679
- <button class="op-tab" data-op-tab="mes">Mês</button>
680
- </div>
681
- <div class="op-tab-panel is-active" data-op-tab-panel="dia"><p class="op-text-muted" style="margin:0;">Métricas das últimas 24 horas.</p></div>
682
- <div class="op-tab-panel" data-op-tab-panel="semana"><p class="op-text-muted" style="margin:0;">Métricas dos últimos 7 dias.</p></div>
683
- <div class="op-tab-panel" data-op-tab-panel="mes"><p class="op-text-muted" style="margin:0;">Métricas dos últimos 30 dias.</p></div>
684
- </div>
685
- <div data-op-tab-group="exemplo3" class="op-tabs-vertical">
686
- <div class="op-tabs-col">
687
- <button class="op-tab is-active" data-op-tab="perfil"><i class="ph ph-user"></i> Perfil</button>
688
- <button class="op-tab" data-op-tab="seguranca"><i class="ph ph-shield-check"></i> Segurança</button>
689
- <button class="op-tab" data-op-tab="cobranca"><i class="ph ph-credit-card"></i> Cobrança</button>
690
- <button class="op-tab" data-op-tab="api"><i class="ph ph-key"></i> API Keys</button>
691
- </div>
692
- <div class="op-tab-panels">
693
- <div class="op-tab-panel is-active" data-op-tab-panel="perfil">
694
- <div class="op-card">
695
- <h3 class="op-card-title">Perfil</h3>
696
- <p class="op-card-text" style="margin-bottom:0;">Tabs verticais são ideais para páginas de configuração com muitas categorias.</p>
697
- </div>
698
- </div>
699
- <div class="op-tab-panel" data-op-tab-panel="seguranca">
700
- <div class="op-card">
701
- <h3 class="op-card-title">Segurança</h3>
702
- <p class="op-card-text" style="margin-bottom:0;">Autenticação em duas etapas, sessões ativas e histórico de acesso.</p>
703
- </div>
704
- </div>
705
- <div class="op-tab-panel" data-op-tab-panel="cobranca">
706
- <div class="op-card">
707
- <h3 class="op-card-title">Cobrança</h3>
708
- <p class="op-card-text" style="margin-bottom:0;">Plano atual, faturas e método de pagamento.</p>
709
- </div>
710
- </div>
711
- <div class="op-tab-panel" data-op-tab-panel="api">
712
- <div class="op-card">
713
- <h3 class="op-card-title">API Keys</h3>
714
- <p class="op-card-text" style="margin-bottom:0;">Gere e revogue chaves de acesso à API.</p>
715
- </div>
716
- </div>
717
- </div>
718
- </div>
719
- </div>
720
- <div class="op-demo-bar">
721
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-tabs"><i class="ph ph-code"></i> Ver código</button>
722
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-tabs"><i class="ph ph-copy"></i> Copiar</button>
723
- </div>
724
- </div>
725
- </section>
726
-
727
- <!-- ==================== 12. ACCORDION ==================== -->
728
- <section id="accordion" class="op-mb-4" style="scroll-margin-top:1rem;">
729
- <div class="op-section-head">
730
- <i class="ph ph-rows"></i>
731
- <h2>Accordion</h2>
732
- </div>
733
- <div class="op-demo">
734
- <div class="op-demo-preview" id="d-accordion">
735
- <div class="op-accordion">
736
- <details open>
737
- <summary>O que é a Óptago?</summary>
738
- <div class="op-accordion-body">Criamos e mantemos produtos próprios (Comanda Rápida, Stats Rails, Brasil Buscador) e prestamos serviços sob medida sempre com a mesma régua: segurança, privacidade e performance.</div>
739
- </details>
740
- <details>
741
- <summary>O site usa cookies?</summary>
742
- <div class="op-accordion-body">Usamos apenas 1 cookie, para lembrar se você prefere o tema claro ou escuro. Nenhum rastreador ou coleta de dados além disso.</div>
743
- </details>
744
- <details>
745
- <summary>Como funciona o suporte?</summary>
746
- <div class="op-accordion-body">Atendimento direto pelo WhatsApp comercial, com SLA definido em contrato para clientes de consultoria.</div>
747
- </details>
748
- </div>
749
- </div>
750
- <div class="op-demo-bar">
751
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-accordion"><i class="ph ph-code"></i> Ver código</button>
752
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-accordion"><i class="ph ph-copy"></i> Copiar</button>
753
- </div>
754
- </div>
755
- </section>
756
-
757
- <!-- ==================== 13. DROPDOWN ==================== -->
758
- <section id="dropdown" class="op-mb-4" style="scroll-margin-top:1rem;">
759
- <div class="op-section-head">
760
- <i class="ph ph-caret-circle-down"></i>
761
- <h2>Dropdown</h2>
762
- </div>
763
- <div class="op-demo">
764
- <div class="op-demo-preview" id="d-dropdown" style="min-height:280px;">
765
- <div class="op-dropdown">
766
- <button class="op-btn op-btn-secondary" data-op-dropdown-toggle>
767
- Ações <i class="ph ph-caret-down"></i>
768
- </button>
769
- <div class="op-menu">
770
- <div class="op-menu-label">Instância</div>
771
- <button class="op-menu-item"><i class="ph ph-pencil-simple"></i> Editar</button>
772
- <button class="op-menu-item"><i class="ph ph-copy"></i> Duplicar</button>
773
- <button class="op-menu-item"><i class="ph ph-arrow-clockwise"></i> Reiniciar</button>
774
- <div class="op-menu-divider"></div>
775
- <button class="op-menu-item is-danger"><i class="ph ph-trash"></i> Excluir</button>
776
- </div>
777
- </div>
778
- </div>
779
- <div class="op-demo-bar">
780
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-dropdown"><i class="ph ph-code"></i> Ver código</button>
781
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-dropdown"><i class="ph ph-copy"></i> Copiar</button>
782
- </div>
783
- </div>
784
- </section>
785
-
786
- <!-- ==================== 14. TOOLTIPS ==================== -->
787
- <section id="tooltips" class="op-mb-4" style="scroll-margin-top:1rem;">
788
- <div class="op-section-head">
789
- <i class="ph ph-chat-centered-text"></i>
790
- <h2>Tooltips</h2>
791
- </div>
792
- <div class="op-demo">
793
- <div class="op-demo-preview" id="d-tooltips" style="padding-top:3.5rem;">
794
- <div class="op-row">
795
- <button class="op-btn op-btn-secondary" data-op-tip="Tooltip em CSS puro">Passe o mouse</button>
796
- <button class="op-btn op-btn-icon" data-op-tip="Configurações"><i class="ph ph-gear"></i></button>
797
- <span class="op-badge op-badge-brand" data-op-tip="Serviço saudável há 42 dias"><span class="op-dot op-dot-pulse"></span> Uptime</span>
798
- </div>
799
- </div>
800
- <div class="op-demo-bar">
801
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-tooltips"><i class="ph ph-code"></i> Ver código</button>
802
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-tooltips"><i class="ph ph-copy"></i> Copiar</button>
803
- </div>
804
- </div>
805
- </section>
806
-
807
- <!-- ==================== 15. NAVEGAÇÃO ==================== -->
808
- <section id="navegacao" class="op-mb-4" style="scroll-margin-top:1rem;">
809
- <div class="op-section-head">
810
- <i class="ph ph-compass"></i>
811
- <h2>Breadcrumb & Paginação</h2>
812
- </div>
813
- <div class="op-demo">
814
- <div class="op-demo-preview op-stack" id="d-navegacao">
815
- <ul class="op-breadcrumb">
816
- <li><a href="#"><i class="ph ph-house"></i> Início</a></li>
817
- <li><a href="#">Projetos</a></li>
818
- <li><a href="#">Stats Rails</a></li>
819
- <li>Configurações</li>
820
- </ul>
821
- <ul class="op-pagination">
822
- <li><a class="op-page is-disabled" href="#"><i class="ph ph-caret-left"></i></a></li>
823
- <li><a class="op-page is-active" href="#">1</a></li>
824
- <li><a class="op-page" href="#">2</a></li>
825
- <li><a class="op-page" href="#">3</a></li>
826
- <li><span class="op-page is-disabled">…</span></li>
827
- <li><a class="op-page" href="#">12</a></li>
828
- <li><a class="op-page" href="#"><i class="ph ph-caret-right"></i></a></li>
829
- </ul>
830
- </div>
831
- <div class="op-demo-bar">
832
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-navegacao"><i class="ph ph-code"></i> Ver código</button>
833
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-navegacao"><i class="ph ph-copy"></i> Copiar</button>
834
- </div>
835
- </div>
836
- </section>
837
-
838
- <!-- ==================== 15b. TIMELINE ==================== -->
839
- <section id="timeline" class="op-mb-4" style="scroll-margin-top:1rem;">
840
- <div class="op-section-head">
841
- <i class="ph ph-git-commit"></i>
842
- <h2>Timeline</h2>
843
- </div>
844
- <div class="op-demo">
845
- <div class="op-demo-preview" id="d-timeline">
846
- <ul class="op-timeline" style="max-width:560px;">
847
- <li class="op-timeline-item">
848
- <span class="op-timeline-marker is-brand is-pulse"></span>
849
- <span class="op-timeline-time">Agora · 14:32</span>
850
- <p class="op-timeline-title">Deploy em produção <span class="op-badge op-badge-brand">em andamento</span></p>
851
- <p class="op-timeline-text">Publicando a versão 3.4.0 nos servidores sa-east-1.</p>
852
- </li>
853
- <li class="op-timeline-item">
854
- <span class="op-timeline-marker is-success"></span>
855
- <span class="op-timeline-time">Hoje · 13:58</span>
856
- <p class="op-timeline-title">Testes aprovados</p>
857
- <p class="op-timeline-text">128 testes executados, 0 falhas. Cobertura em 94%.</p>
858
- </li>
859
- <li class="op-timeline-item">
860
- <span class="op-timeline-marker is-warning"></span>
861
- <span class="op-timeline-time">Hoje · 11:20</span>
862
- <p class="op-timeline-title">Alerta de uso de disco</p>
863
- <p class="op-timeline-text">Volume principal atingiu 85% limpeza automática agendada.</p>
864
- </li>
865
- <li class="op-timeline-item">
866
- <span class="op-timeline-marker is-danger"></span>
867
- <span class="op-timeline-time">Ontem · 22:47</span>
868
- <p class="op-timeline-title">Incidente resolvido <span class="op-badge op-badge-success op-badge-pill">resolvido</span></p>
869
- <p class="op-timeline-text">Instabilidade na API de pagamentos durou 12 minutos.</p>
870
- </li>
871
- <li class="op-timeline-item">
872
- <span class="op-timeline-marker"></span>
873
- <span class="op-timeline-time">02 Jul · 09:00</span>
874
- <p class="op-timeline-title">Projeto criado</p>
875
- <p class="op-timeline-text">Repositório inicializado e pipeline configurado.</p>
876
- </li>
877
- </ul>
878
- </div>
879
- <div class="op-demo-bar">
880
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-timeline"><i class="ph ph-code"></i> Ver código</button>
881
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-timeline"><i class="ph ph-copy"></i> Copiar</button>
882
- </div>
883
- </div>
884
- </section>
885
-
886
- <!-- ==================== 15c. EFEITOS / GLOW ==================== -->
887
- <section id="efeitos" class="op-mb-4" style="scroll-margin-top:1rem;">
888
- <div class="op-section-head">
889
- <i class="ph ph-sparkle"></i>
890
- <h2>Efeitos Glow verde-lima</h2>
891
- </div>
892
- <p class="op-text-muted op-text-sm op-mb-2">
893
- Manchas desfocadas de verde-lima para dar profundidade ao fundo esta própria página usa três
894
- (topo e cantos). Posicione <code>.op-glow</code> dentro de um container com
895
- <code>position:relative</code>; o conteúdo por cima deve ter <code>z-index</code> maior.
896
- Variações: <code>op-glow-sm</code>, <code>op-glow-lg</code>, <code>op-glow-strong</code>, <code>op-glow-info</code>.
897
- </p>
898
- <div class="op-demo">
899
- <div class="op-demo-preview" style="padding:0;">
900
- <div id="d-efeitos" style="position:relative; overflow:clip; padding:3.5rem 2rem; border-radius:0;">
901
- <div class="op-glow op-glow-strong" style="top:-120px; left:-60px;"></div>
902
- <div class="op-glow op-glow-sm op-glow-strong" style="bottom:-100px; right:10%;"></div>
903
- <div style="position:relative; z-index:1; text-align:center; max-width:520px; margin:0 auto;">
904
- <h2 style="margin-bottom:.5rem;">Hero com glow de fundo</h2>
905
- <p class="op-text-muted op-mb-2">Segurança, privacidade e performance a mesma régua em todos os produtos.</p>
906
- <button class="op-btn op-btn-primary"><i class="ph ph-rocket-launch"></i> Começar agora</button>
907
- </div>
908
- </div>
909
- </div>
910
- <div class="op-demo-bar">
911
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-efeitos"><i class="ph ph-code"></i> Ver código</button>
912
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-efeitos"><i class="ph ph-copy"></i> Copiar</button>
913
- </div>
914
- </div>
915
- </section>
916
-
917
- <!-- ==================== 16. TOASTS ==================== -->
918
- <section id="toasts" class="op-mb-4" style="scroll-margin-top:1rem;">
919
- <div class="op-section-head">
920
- <i class="ph ph-bell-ringing"></i>
921
- <h2>Toasts / Notificações</h2>
922
- </div>
923
- <div class="op-demo">
924
- <div class="op-demo-preview" id="d-toasts">
925
- <p class="op-text-muted op-text-sm" style="margin-top:0;">Notificações aparecem centralizadas no topo. API: <code>OptagoUI.toast(mensagem, tipo)</code></p>
926
- <div class="op-row">
927
- <button class="op-btn op-btn-ghost-success" onclick="OptagoUI.toast('Operação realizada com sucesso!', 'success')">Sucesso</button>
928
- <button class="op-btn op-btn-ghost-danger" onclick="OptagoUI.toast('Falha ao conectar no banco de dados.', 'error')">Erro</button>
929
- <button class="op-btn op-btn-ghost-warning" onclick="OptagoUI.toast('Sua sessão expira em 5 minutos.', 'warning')">Aviso</button>
930
- <button class="op-btn op-btn-ghost-info" onclick="OptagoUI.toast('Nova mensagem recebida no painel.', 'info')">Info</button>
931
- </div>
932
- </div>
933
- <div class="op-demo-bar">
934
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-toasts"><i class="ph ph-code"></i> Ver código</button>
935
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-toasts"><i class="ph ph-copy"></i> Copiar</button>
936
- </div>
937
- </div>
938
- </section>
939
-
940
- <!-- ==================== 17. CARREGAMENTO ==================== -->
941
- <section id="carregamento" class="op-mb-4" style="scroll-margin-top:1rem;">
942
- <div class="op-section-head">
943
- <i class="ph ph-circle-notch"></i>
944
- <h2>Tela de carregamento</h2>
945
- </div>
946
- <div class="op-demo">
947
- <div class="op-demo-preview" id="d-carregamento">
948
- <p class="op-text-muted op-text-sm" style="margin-top:0;">Overlay em tela cheia para usar ao submeter formulários ou aguardar uma ação. API: <code>OptagoUI.showLoading(mensagem)</code> / <code>OptagoUI.hideLoading()</code>.</p>
949
- <div class="op-row">
950
- <button class="op-btn op-btn-primary" onclick="OptagoUI.showLoading('Salvando alterações...'); setTimeout(OptagoUI.hideLoading, 2200)">
951
- <i class="ph ph-floppy-disk"></i> Disparar via JS
952
- </button>
953
- <form data-op-loading-form data-op-loading-message="Enviando formulário..." onsubmit="event.preventDefault(); setTimeout(OptagoUI.hideLoading, 2200)">
954
- <button class="op-btn op-btn-secondary" type="submit">
955
- <i class="ph ph-paper-plane-tilt"></i> Disparar via submit do form
956
- </button>
957
- </form>
958
- </div>
959
- </div>
960
- <div class="op-demo-bar">
961
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-carregamento"><i class="ph ph-code"></i> Ver código</button>
962
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-carregamento"><i class="ph ph-copy"></i> Copiar</button>
963
- </div>
964
- </div>
965
- </section>
966
-
967
- <!-- ==================== 18. MODAIS ==================== -->
968
- <section id="modais" class="op-mb-4" style="scroll-margin-top:1rem;">
969
- <div class="op-section-head">
970
- <i class="ph ph-app-window"></i>
971
- <h2>Modais</h2>
972
- </div>
973
- <div class="op-demo">
974
- <div class="op-demo-preview" id="d-modais">
975
- <div class="op-row">
976
- <button class="op-btn op-btn-primary" data-op-modal-open="#modalExemplo">
977
- <i class="ph ph-arrows-out"></i> Padrão
978
- </button>
979
- <button class="op-btn op-btn-danger" data-op-modal-open="#modalConfirm">
980
- <i class="ph ph-trash"></i> Confirmação
981
- </button>
982
- <button class="op-btn op-btn-ghost-success" data-op-modal-open="#modalSucesso">
983
- <i class="ph ph-check-circle"></i> Centrado (sucesso)
984
- </button>
985
- <button class="op-btn op-btn-secondary" data-op-modal-open="#modalForm">
986
- <i class="ph ph-user-plus"></i> Com formulário
987
- </button>
988
- <button class="op-btn op-btn-ghost-info" data-op-modal-open="#modalDrawer">
989
- <i class="ph ph-sidebar"></i> Drawer lateral
990
- </button>
991
- </div>
992
- </div>
993
- <div class="op-demo-bar">
994
- <button class="op-btn op-btn-ghost op-btn-sm" data-op-code="#d-modal-src"><i class="ph ph-code"></i> Ver código</button>
995
- <button class="op-btn op-btn-secondary op-btn-sm" data-op-copy="#d-modal-src"><i class="ph ph-copy"></i> Copiar</button>
996
- </div>
997
- </div>
998
- </section>
999
-
1000
- <!-- ==================== 19. LAYOUT ==================== -->
1001
- <section id="layout" class="op-mb-4" style="scroll-margin-top:1rem;">
1002
- <div class="op-section-head">
1003
- <i class="ph ph-layout"></i>
1004
- <h2>Layout App Shell</h2>
1005
- </div>
1006
- <div class="op-alert op-alert-info op-mb-2">
1007
- <i class="ph ph-info"></i>
1008
- <div>
1009
- <p class="op-alert-title">Esta própria página usa o app shell</p>
1010
- <p class="op-alert-text">Header, footer e sidebar (direita) são fixos apenas o conteúdo central rola. A sidebar colapsa no desktop (só ícones + tooltip) e vira drawer no mobile.</p>
1011
- </div>
1012
- </div>
1013
- <div class="op-demo">
1014
- <div class="op-demo-preview" style="padding:0;">
1015
- <pre class="op-demo-code is-visible" style="border-top:none;">&lt;body class="op-app"&gt;
1016
- &lt;div class="op-app-body"&gt;
1017
- &lt;header class="op-header"&gt;...&lt;/header&gt;
1018
- &lt;main class="op-main"&gt;CONTEÚDO ROLÁVEL&lt;/main&gt;
1019
- &lt;footer class="op-footer"&gt;...&lt;/footer&gt;
1020
- &lt;/div&gt;
1021
- &lt;aside class="op-sidebar"&gt;
1022
- &lt;nav class="op-sidebar-nav"&gt;
1023
- &lt;a class="op-nav-item" href="#secao"&gt;
1024
- &lt;i class="ph ph-palette"&gt;&lt;/i&gt;
1025
- &lt;span class="op-nav-text"&gt;Título&lt;/span&gt;
1026
- &lt;span class="op-nav-tooltip"&gt;Título&lt;/span&gt;
1027
- &lt;/a&gt;
1028
- &lt;/nav&gt;
1029
- &lt;/aside&gt;
1030
- &lt;/body&gt;</pre>
1031
- </div>
1032
- </div>
1033
- </section>
1034
-
1035
- </div>
1036
- </main>
1037
-
1038
- <!-- FOOTER (fixo) -->
1039
- <footer class="op-footer">
1040
- <span>ÓPTAGO © 2026 Design System v1.0.2</span>
1041
- <span><a href="https://optago.com.br" target="_blank" rel="noopener">optago.com.br</a> · 1 cookie (só p/ tema)</span>
1042
- </footer>
1043
- </div>
1044
-
1045
- <!-- ==================== SIDEBAR DIREITA (fixa, colapsável) ==================== -->
1046
- <aside class="op-sidebar">
1047
- <div class="op-sidebar-header">
1048
- <span class="op-sidebar-header-text op-text-mono op-text-xs" style="font-weight:700; letter-spacing:.2em; color:var(--op-muted);">SUMÁRIO</span>
1049
- <button class="op-btn op-btn-icon op-btn-sm" data-op-sidebar-toggle>
1050
- <i class="ph ph-sidebar-simple"></i>
1051
- </button>
1052
- </div>
1053
- <nav class="op-sidebar-nav">
1054
- <div class="op-sidebar-label">Fundamentos</div>
1055
- <a class="op-nav-item" href="#cores"><i class="ph ph-palette"></i><span class="op-nav-text">Cores</span><span class="op-nav-tooltip">Cores</span></a>
1056
- <a class="op-nav-item" href="#tipografia"><i class="ph ph-text-aa"></i><span class="op-nav-text">Tipografia</span><span class="op-nav-tooltip">Tipografia</span></a>
1057
- <div class="op-sidebar-label">Componentes</div>
1058
- <a class="op-nav-item" href="#botoes"><i class="ph ph-hand-pointing"></i><span class="op-nav-text">Botões</span><span class="op-nav-tooltip">Botões</span></a>
1059
- <a class="op-nav-item" href="#badges"><i class="ph ph-tag"></i><span class="op-nav-text">Badges</span><span class="op-nav-tooltip">Badges</span></a>
1060
- <a class="op-nav-item" href="#alertas"><i class="ph ph-warning-circle"></i><span class="op-nav-text">Alertas</span><span class="op-nav-tooltip">Alertas</span></a>
1061
- <a class="op-nav-item" href="#formularios"><i class="ph ph-textbox"></i><span class="op-nav-text">Formulários</span><span class="op-nav-tooltip">Formulários</span></a>
1062
- <a class="op-nav-item" href="#tabelas"><i class="ph ph-table"></i><span class="op-nav-text">Tabelas</span><span class="op-nav-tooltip">Tabelas</span></a>
1063
- <a class="op-nav-item" href="#cards"><i class="ph ph-cards"></i><span class="op-nav-text">Cards</span><span class="op-nav-tooltip">Cards</span></a>
1064
- <a class="op-nav-item" href="#avatares"><i class="ph ph-user-circle"></i><span class="op-nav-text">Avatares</span><span class="op-nav-tooltip">Avatares</span></a>
1065
- <a class="op-nav-item" href="#progresso"><i class="ph ph-spinner-gap"></i><span class="op-nav-text">Progresso</span><span class="op-nav-tooltip">Progresso</span></a>
1066
- <a class="op-nav-item" href="#tabs"><i class="ph ph-tabs"></i><span class="op-nav-text">Tabs</span><span class="op-nav-tooltip">Tabs</span></a>
1067
- <a class="op-nav-item" href="#accordion"><i class="ph ph-rows"></i><span class="op-nav-text">Accordion</span><span class="op-nav-tooltip">Accordion</span></a>
1068
- <a class="op-nav-item" href="#dropdown"><i class="ph ph-caret-circle-down"></i><span class="op-nav-text">Dropdown</span><span class="op-nav-tooltip">Dropdown</span></a>
1069
- <a class="op-nav-item" href="#tooltips"><i class="ph ph-chat-centered-text"></i><span class="op-nav-text">Tooltips</span><span class="op-nav-tooltip">Tooltips</span></a>
1070
- <a class="op-nav-item" href="#navegacao"><i class="ph ph-compass"></i><span class="op-nav-text">Navegação</span><span class="op-nav-tooltip">Navegação</span></a>
1071
- <a class="op-nav-item" href="#timeline"><i class="ph ph-git-commit"></i><span class="op-nav-text">Timeline</span><span class="op-nav-tooltip">Timeline</span></a>
1072
- <a class="op-nav-item" href="#efeitos"><i class="ph ph-sparkle"></i><span class="op-nav-text">Efeitos / Glow</span><span class="op-nav-tooltip">Efeitos / Glow</span></a>
1073
- <div class="op-sidebar-label">Interativos</div>
1074
- <a class="op-nav-item" href="#toasts"><i class="ph ph-bell-ringing"></i><span class="op-nav-text">Toasts</span><span class="op-nav-tooltip">Toasts</span></a>
1075
- <a class="op-nav-item" href="#carregamento"><i class="ph ph-circle-notch"></i><span class="op-nav-text">Carregamento</span><span class="op-nav-tooltip">Carregamento</span></a>
1076
- <a class="op-nav-item" href="#modais"><i class="ph ph-app-window"></i><span class="op-nav-text">Modais</span><span class="op-nav-tooltip">Modais</span></a>
1077
- <a class="op-nav-item" href="#layout"><i class="ph ph-layout"></i><span class="op-nav-text">Layout</span><span class="op-nav-tooltip">Layout</span></a>
1078
- </nav>
1079
- </aside>
1080
-
1081
- <!-- ==================== MODAIS DE EXEMPLO ==================== -->
1082
- <div id="d-modal-src">
1083
- <div class="op-modal" id="modalExemplo">
1084
- <div class="op-modal-box">
1085
- <div class="op-modal-header">
1086
- <h3 class="op-modal-title">
1087
- <span class="op-oct" style="width:36px; height:36px; background:color-mix(in srgb, var(--op-accent) 14%, transparent); display:flex; align-items:center; justify-content:center;">
1088
- <i class="ph ph-rocket-launch op-text-accent" style="font-size:1.125rem;"></i>
1089
- </span>
1090
- Nova Instância
1091
- </h3>
1092
- <button class="op-modal-close" data-op-modal-close><i class="ph ph-x"></i></button>
1093
- </div>
1094
- <div class="op-modal-body">
1095
- <p class="op-text-sm">Confirme as configurações antes de provisionar o servidor na rede principal da Óptago.</p>
1096
- <div class="op-card op-text-mono op-text-sm" style="padding:1rem; border-radius:var(--op-radius);">
1097
- <div style="display:flex; justify-content:space-between; padding:.25rem 0;"><span class="op-text-muted">Região:</span> <strong>sa-east-1</strong></div>
1098
- <div style="display:flex; justify-content:space-between; padding:.25rem 0;"><span class="op-text-muted">Tipo:</span> <strong>t3.micro</strong></div>
1099
- <div style="display:flex; justify-content:space-between; padding:.25rem 0;"><span class="op-text-muted">Storage:</span> <strong>20GB SSD</strong></div>
1100
- </div>
1101
- </div>
1102
- <div class="op-modal-footer">
1103
- <button class="op-btn op-btn-secondary" data-op-modal-close>Cancelar</button>
1104
- <button class="op-btn op-btn-primary" data-op-modal-close onclick="OptagoUI.toast('Servidor provisionado com sucesso!', 'success')">Confirmar</button>
1105
- </div>
1106
- </div>
1107
- </div>
1108
-
1109
- <div class="op-modal op-modal-sm" id="modalConfirm">
1110
- <div class="op-modal-box">
1111
- <div class="op-modal-header">
1112
- <h3 class="op-modal-title" style="color:var(--op-danger);"><i class="ph ph-warning-octagon"></i> Excluir instância?</h3>
1113
- <button class="op-modal-close" data-op-modal-close><i class="ph ph-x"></i></button>
1114
- </div>
1115
- <div class="op-modal-body">
1116
- <p class="op-text-sm" style="margin:0;">Essa ação é <strong>irreversível</strong>. Todos os dados da instância <code>srv-prod-01</code> serão apagados.</p>
1117
- </div>
1118
- <div class="op-modal-footer">
1119
- <button class="op-btn op-btn-secondary" data-op-modal-close>Cancelar</button>
1120
- <button class="op-btn op-btn-danger" data-op-modal-close onclick="OptagoUI.toast('Instância excluída.', 'error')"><i class="ph ph-trash"></i> Excluir</button>
1121
- </div>
1122
- </div>
1123
- </div>
1124
-
1125
- <!-- Modal centrado (sucesso) -->
1126
- <div class="op-modal op-modal-centered" id="modalSucesso">
1127
- <div class="op-modal-box">
1128
- <div class="op-modal-body">
1129
- <div class="op-modal-icon is-success"><i class="ph ph-check-bold"></i></div>
1130
- <h3 style="margin-bottom:.25rem;">Tudo certo!</h3>
1131
- <p class="op-text-muted op-text-sm" style="margin:0;">Seu pagamento foi confirmado e a fatura enviada para <strong>cowork@optago.com.br</strong>.</p>
1132
- </div>
1133
- <div class="op-modal-footer">
1134
- <button class="op-btn op-btn-primary" data-op-modal-close>Continuar</button>
1135
- </div>
1136
- </div>
1137
- </div>
1138
-
1139
- <!-- Modal com formulário -->
1140
- <div class="op-modal" id="modalForm">
1141
- <div class="op-modal-box">
1142
- <div class="op-modal-header">
1143
- <h3 class="op-modal-title"><i class="ph ph-user-plus op-text-accent"></i> Novo usuário</h3>
1144
- <button class="op-modal-close" data-op-modal-close><i class="ph ph-x"></i></button>
1145
- </div>
1146
- <div class="op-modal-body op-stack">
1147
- <div class="op-field">
1148
- <label class="op-label" for="m-nome">Nome <span class="req">*</span></label>
1149
- <input class="op-input" id="m-nome" type="text" placeholder="Nome completo">
1150
- </div>
1151
- <div class="op-field">
1152
- <label class="op-label" for="m-email">E-mail <span class="req">*</span></label>
1153
- <div class="op-input-icon">
1154
- <i class="ph ph-envelope"></i>
1155
- <input class="op-input" id="m-email" type="email" placeholder="usuario@empresa.com.br">
1156
- </div>
1157
- </div>
1158
- <div class="op-field">
1159
- <label class="op-label" for="m-funcao">Função</label>
1160
- <select class="op-select" id="m-funcao">
1161
- <option>Administrador</option>
1162
- <option>Desenvolvedor</option>
1163
- <option>Suporte</option>
1164
- </select>
1165
- </div>
1166
- <label class="op-switch"><input type="checkbox" checked> <span>Enviar convite por e-mail</span></label>
1167
- </div>
1168
- <div class="op-modal-footer">
1169
- <button class="op-btn op-btn-secondary" data-op-modal-close>Cancelar</button>
1170
- <button class="op-btn op-btn-primary" data-op-modal-close onclick="OptagoUI.toast('Usuário criado com sucesso!', 'success')"><i class="ph ph-check"></i> Criar usuário</button>
1171
- </div>
1172
- </div>
1173
- </div>
1174
-
1175
- <!-- Drawer lateral -->
1176
- <div class="op-modal op-modal-drawer" id="modalDrawer">
1177
- <div class="op-modal-box">
1178
- <div class="op-modal-header">
1179
- <h3 class="op-modal-title"><i class="ph ph-cube op-text-accent"></i> Detalhes da instância</h3>
1180
- <button class="op-modal-close" data-op-modal-close><i class="ph ph-x"></i></button>
1181
- </div>
1182
- <div class="op-modal-body op-stack">
1183
- <div class="op-row" style="justify-content:space-between;">
1184
- <div>
1185
- <strong style="color:var(--op-strong); font-family:var(--op-font-display); font-size:1.125rem;">srv-prod-01</strong><br>
1186
- <span class="op-text-mono op-text-xs op-text-muted">i-0f2e88c1a9b3</span>
1187
- </div>
1188
- <span class="op-badge op-badge-success op-badge-pill"><span class="op-dot op-dot-pulse"></span> Rodando</span>
1189
- </div>
1190
- <hr class="op-divider" style="margin:.25rem 0;">
1191
- <div>
1192
- <div class="op-progress-header"><span class="lbl">CPU</span><span class="val">64%</span></div>
1193
- <div class="op-progress"><div class="op-progress-bar is-success" style="width:64%"></div></div>
1194
- </div>
1195
- <div>
1196
- <div class="op-progress-header"><span class="lbl">Memória</span><span class="val">81%</span></div>
1197
- <div class="op-progress"><div class="op-progress-bar is-warning" style="width:81%"></div></div>
1198
- </div>
1199
- <div class="op-card op-text-mono op-text-sm" style="padding:1rem; border-radius:var(--op-radius); box-shadow:none;">
1200
- <div style="display:flex; justify-content:space-between; padding:.25rem 0;"><span class="op-text-muted">Região:</span> <strong>sa-east-1</strong></div>
1201
- <div style="display:flex; justify-content:space-between; padding:.25rem 0;"><span class="op-text-muted">Tipo:</span> <strong>t3.medium</strong></div>
1202
- <div style="display:flex; justify-content:space-between; padding:.25rem 0;"><span class="op-text-muted">Uptime:</span> <strong>42 dias</strong></div>
1203
- </div>
1204
- <ul class="op-timeline" style="margin-top:.5rem;">
1205
- <li class="op-timeline-item">
1206
- <span class="op-timeline-marker is-brand is-pulse"></span>
1207
- <span class="op-timeline-time">14:32</span>
1208
- <p class="op-timeline-title" style="font-size:.8125rem;">Deploy v3.4.0 iniciado</p>
1209
- </li>
1210
- <li class="op-timeline-item">
1211
- <span class="op-timeline-marker is-success"></span>
1212
- <span class="op-timeline-time">13:58</span>
1213
- <p class="op-timeline-title" style="font-size:.8125rem;">Backup concluído</p>
1214
- </li>
1215
- </ul>
1216
- </div>
1217
- <div class="op-modal-footer">
1218
- <button class="op-btn op-btn-ghost-danger"><i class="ph ph-power"></i> Desligar</button>
1219
- <button class="op-btn op-btn-primary" data-op-modal-close>Fechar</button>
1220
- </div>
1221
- </div>
1222
- </div>
1223
- </div>
1224
-
1225
- <!-- Inicialização da tabela Tabulator do showcase -->
1226
- <script>
1227
- OptagoUI.tabulator('#demo-tabulator', {
1228
- layout: 'fitColumns',
1229
- pagination: true,
1230
- paginationSize: 5,
1231
- columnDefaults: { resizable: false },
1232
- data: [
1233
- { instancia: 'srv-prod-01', regiao: 'sa-east-1', tipo: 't3.medium', cpu: 64, status: 'Ativo' },
1234
- { instancia: 'srv-prod-02', regiao: 'sa-east-1', tipo: 't3.micro', cpu: 31, status: 'Ativo' },
1235
- { instancia: 'srv-stage-01', regiao: 'us-east-1', tipo: 't3.small', cpu: 78, status: 'Ausente' },
1236
- { instancia: 'srv-db-01', regiao: 'sa-east-1', tipo: 'r6g.large', cpu: 92, status: 'Ativo' },
1237
- { instancia: 'srv-cache-01', regiao: 'us-east-1', tipo: 't4g.micro', cpu: 12, status: 'Bloqueado' },
1238
- { instancia: 'srv-worker-01', regiao: 'eu-west-1', tipo: 't3.small', cpu: 55, status: 'Ativo' },
1239
- { instancia: 'srv-worker-02', regiao: 'eu-west-1', tipo: 't3.small', cpu: 47, status: 'Ausente' },
1240
- { instancia: 'srv-backup-01', regiao: 'sa-east-1', tipo: 't3.micro', cpu: 8, status: 'Ativo' }
1241
- ],
1242
- columns: [
1243
- { title: 'Instância', field: 'instancia', formatter: function (cell) {
1244
- return '<strong style="color:var(--op-strong);">' + cell.getValue() + '</strong>';
1245
- }},
1246
- { title: 'Região', field: 'regiao' },
1247
- { title: 'Tipo', field: 'tipo', formatter: function (cell) {
1248
- return '<code>' + cell.getValue() + '</code>';
1249
- }},
1250
- { title: 'CPU', field: 'cpu', sorter: 'number', formatter: function (cell) {
1251
- var v = cell.getValue();
1252
- var cor = v > 90 ? 'is-danger' : v > 75 ? 'is-warning' : 'is-success';
1253
- return '<div class="op-progress"><div class="op-progress-bar ' + cor + '" style="width:' + v + '%"></div></div>';
1254
- }},
1255
- { title: 'Status', field: 'status', formatter: function (cell) {
1256
- var mapa = { 'Ativo': 'success', 'Ausente': 'warning', 'Bloqueado': 'danger' };
1257
- var v = cell.getValue();
1258
- return '<span class="op-badge op-badge-' + mapa[v] + ' op-badge-pill"><span class="op-dot"></span> ' + v + '</span>';
1259
- }}
1260
- ]
1261
- }).catch(function (err) {
1262
- console.warn(err);
1263
- OptagoUI.toast('Não foi possível carregar o Tabulator (sem internet?).', 'warning');
1264
- });
1265
- </script>
1266
-
1267
- </body>
1268
- </html>