Initial commit
This commit is contained in:
347
index.html
Normal file
347
index.html
Normal file
@@ -0,0 +1,347 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Dashboard Telseg</title>
|
||||
<!-- Favicon em branco para não exibir logo na aba -->
|
||||
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=" />
|
||||
<link rel="stylesheet" href="assets/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<div class="brand">
|
||||
<img src="assets/Logo tema Claro.png" class="logo-img light" alt="Logo" />
|
||||
<img src="assets/Logo tema Escuro.png" class="logo-img dark" alt="" />
|
||||
<h1>Dashboard Telseg</h1>
|
||||
</div>
|
||||
<nav class="top-actions">
|
||||
<button id="themeToggle" title="Alternar tema" class="icon-btn" aria-label="Alternar tema">🌗</button>
|
||||
<button id="exportBtn" class="btn" title="Exportar dados">Exportar</button>
|
||||
<label for="importFile" class="btn" title="Importar dados">Importar</label>
|
||||
<input id="importFile" type="file" accept="application/json" hidden />
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" data-tab="unidades">OC Discadora</button>
|
||||
<button class="tab" data-tab="senhas">Senhas de Acesso</button>
|
||||
<button class="tab" data-tab="notas">Notas</button>
|
||||
<button class="tab" data-tab="usuarios" id="tab-users" class="hidden">Usuários</button>
|
||||
</div>
|
||||
|
||||
<main class="views">
|
||||
<!-- OC Discadora -->
|
||||
<section id="view-unidades" class="view active" aria-labelledby="tab-unidades">
|
||||
<div class="view-bar">
|
||||
<div class="left">
|
||||
<button id="addUnidadeBtn" class="btn primary">+ Adicionar OC</button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input id="searchUnidades" class="input" placeholder="Buscar por cliente, OC ou IP" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="unidadesList" class="cards"></div>
|
||||
</section>
|
||||
|
||||
<!-- Senhas -->
|
||||
<section id="view-senhas" class="view" aria-labelledby="tab-senhas">
|
||||
<div id="vaultLocked" class="vault-lock">
|
||||
<h2>Cofre de Senhas</h2>
|
||||
<p id="vaultStatus">Proteja suas senhas com uma senha mestra.</p>
|
||||
<form id="setVaultForm" class="vault-form hidden">
|
||||
<div class="grid">
|
||||
<label>
|
||||
<span>Senha Mestra</span>
|
||||
<input type="password" id="vaultPass1" class="input" autocomplete="new-password" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Confirmar Senha</span>
|
||||
<input type="password" id="vaultPass2" class="input" autocomplete="new-password" required />
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn primary" type="submit">Definir senha mestra</button>
|
||||
</form>
|
||||
|
||||
<form id="unlockVaultForm" class="vault-form hidden">
|
||||
<label>
|
||||
<span>Senha Mestra</span>
|
||||
<input type="password" id="vaultUnlockPass" class="input" autocomplete="current-password" required />
|
||||
</label>
|
||||
<button class="btn primary" type="submit">Desbloquear</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="vaultUnlocked" class="hidden">
|
||||
<div class="view-bar">
|
||||
<div class="left">
|
||||
<button id="addCredBtn" class="btn primary">+ Nova Credencial</button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input id="searchCreds" class="input" placeholder="Buscar por nome, usuário ou URL" />
|
||||
<button id="lockVaultBtn" class="btn" title="Bloquear cofre">Bloquear</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="credsList" class="cards"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Notas -->
|
||||
<section id="view-notas" class="view" aria-labelledby="tab-notas">
|
||||
<div class="view-bar">
|
||||
<div class="left">
|
||||
<button id="addNoteBtn" class="btn primary">+ Nova Nota</button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<input id="searchNotes" class="input" placeholder="Buscar notas por título ou conteúdo" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Duas colunas: Notas e Passo a Passo -->
|
||||
<div id="notesColumns" class="notes-columns">
|
||||
<div class="notes-col">
|
||||
<h3 class="column-title">Notas</h3>
|
||||
<div id="notesTextList" class="cards"></div>
|
||||
</div>
|
||||
<div class="notes-col">
|
||||
<h3 class="column-title">Passo a Passo</h3>
|
||||
<div id="notesStepsList" class="cards"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Usuários (apenas Master) -->
|
||||
<section id="view-usuarios" class="view" aria-labelledby="tab-usuarios">
|
||||
<div class="view-bar">
|
||||
<div class="left">
|
||||
<h3 style="margin:0">Gerenciar Usuários</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid" style="margin-bottom:10px">
|
||||
<form id="userForm" class="card" style="grid-column: 1 / -1">
|
||||
<h4>Novo Usuário</h4>
|
||||
<div class="grid">
|
||||
<label><span>Usuário</span><input id="newUserName" class="input" required /></label>
|
||||
<label><span>Senha</span><input id="newUserPass" class="input" type="password" required /></label>
|
||||
<label><span>Perfil</span>
|
||||
<select id="newUserRole" class="input">
|
||||
<option value="user">Usuário</option>
|
||||
<option value="master">Master</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="k">Permissões</div>
|
||||
<div class="grid">
|
||||
<label><input type="checkbox" id="p_units_read"/> OC: ver</label>
|
||||
<label><input type="checkbox" id="p_units_write"/> OC: editar/excluir</label>
|
||||
<label><input type="checkbox" id="p_creds_read"/> Senhas: ver</label>
|
||||
<label><input type="checkbox" id="p_creds_write"/> Senhas: editar/excluir</label>
|
||||
<label><input type="checkbox" id="p_notes_read"/> Notas: ver</label>
|
||||
<label><input type="checkbox" id="p_notes_write"/> Notas: editar/excluir</label>
|
||||
</div>
|
||||
<div class="modal-foot" style="padding:0">
|
||||
<button type="submit" class="btn primary">Criar Usuário</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="usersList" class="cards"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Modal OC -->
|
||||
<div id="unidadeModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="unidadeModalTitle">
|
||||
<div class="modal-card">
|
||||
<div class="modal-head">
|
||||
<h3 id="unidadeModalTitle">OC Discadora</h3>
|
||||
<button class="icon-btn" data-close-modal="unidadeModal" aria-label="Fechar">✕</button>
|
||||
</div>
|
||||
<form id="unidadeForm" class="modal-body">
|
||||
<input type="hidden" id="unidadeId" />
|
||||
<div class="grid">
|
||||
<label>
|
||||
<span>Nome do Cliente</span>
|
||||
<input id="unidadeNome" class="input" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Data de Criação</span>
|
||||
<input id="unidadeData" type="date" class="input" required />
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>Números das OCs (separe por vírgula ou linha)</span>
|
||||
<textarea id="unidadeOCs" class="input" rows="3" placeholder="Ex.: 12345, 67890"></textarea>
|
||||
</label>
|
||||
<div class="grid">
|
||||
<label>
|
||||
<span>Link de Acesso</span>
|
||||
<input id="unidadeLink" class="input" type="url" placeholder="https://..." />
|
||||
</label>
|
||||
<label>
|
||||
<span>IP do Servidor</span>
|
||||
<input id="unidadeIP" class="input" placeholder="0.0.0.0" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<label>
|
||||
<span>Login</span>
|
||||
<input id="unidadeLogin" class="input" placeholder="usuário" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Senha</span>
|
||||
<input id="unidadeSenha" class="input" type="password" placeholder="senha" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button type="button" class="btn" data-close-modal="unidadeModal">Cancelar</button>
|
||||
<button type="submit" class="btn primary">Salvar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Credencial -->
|
||||
<div id="credModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="credModalTitle">
|
||||
<div class="modal-card">
|
||||
<div class="modal-head">
|
||||
<h3 id="credModalTitle">Credencial</h3>
|
||||
<button class="icon-btn" data-close-modal="credModal" aria-label="Fechar">✕</button>
|
||||
</div>
|
||||
<form id="credForm" class="modal-body">
|
||||
<input type="hidden" id="credId" />
|
||||
<div class="grid">
|
||||
<label>
|
||||
<span>Nome</span>
|
||||
<input id="credNome" class="input" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Usuário</span>
|
||||
<input id="credUsuario" class="input" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<label>
|
||||
<span>Senha</span>
|
||||
<input id="credSenha" type="password" class="input" />
|
||||
</label>
|
||||
<label>
|
||||
<span>URL</span>
|
||||
<input id="credUrl" class="input" type="url" placeholder="https://..." />
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>Notas</span>
|
||||
<textarea id="credNotas" class="input" rows="3"></textarea>
|
||||
</label>
|
||||
<div class="modal-foot">
|
||||
<button type="button" class="btn" data-close-modal="credModal">Cancelar</button>
|
||||
<button type="submit" class="btn primary">Salvar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Nota -->
|
||||
<div id="noteModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="noteModalTitle">
|
||||
<div class="modal-card">
|
||||
<div class="modal-head">
|
||||
<h3 id="noteModalTitle">Nota</h3>
|
||||
<button class="icon-btn" data-close-modal="noteModal" aria-label="Fechar">✕</button>
|
||||
</div>
|
||||
<form id="noteForm" class="modal-body">
|
||||
<input type="hidden" id="noteId" />
|
||||
<label>
|
||||
<span>Título</span>
|
||||
<input id="noteTitle" class="input" placeholder="Ex.: Tarefas do cliente" required />
|
||||
</label>
|
||||
<div class="grid">
|
||||
<label>
|
||||
<span>Tipo da Nota</span>
|
||||
<select id="noteType" class="input">
|
||||
<option value="texto">Texto livre</option>
|
||||
<option value="passos">Passo a passo</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>Conteúdo</span>
|
||||
<textarea id="noteBody" class="input" rows="8" placeholder="Escreva suas notas aqui..."></textarea>
|
||||
</label>
|
||||
<div id="stepsBlock" class="hidden">
|
||||
<span class="k">Passos</span>
|
||||
<div class="row" style="gap:8px; align-items:stretch;">
|
||||
<input id="newStepText" class="input" placeholder="Descreva o próximo passo" />
|
||||
<button id="addStepBtn" type="button" class="btn">Adicionar passo</button>
|
||||
</div>
|
||||
<div id="stepsList" class="cards" style="grid-template-columns: 1fr; margin-top:8px;"></div>
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button type="button" class="btn" data-close-modal="noteModal">Cancelar</button>
|
||||
<button type="submit" class="btn primary">Salvar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Visualização de Nota -->
|
||||
<div id="noteViewModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="noteViewTitle">
|
||||
<div class="modal-card wide note-view">
|
||||
<div class="modal-head">
|
||||
<h3 id="noteViewTitle">Nota</h3>
|
||||
<button class="icon-btn" data-close-modal="noteViewModal" aria-label="Fechar">✕</button>
|
||||
</div>
|
||||
<div class="modal-body" id="noteViewBody">
|
||||
<!-- conteúdo renderizado via JS -->
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button id="noteViewEdit" class="btn">Editar</button>
|
||||
<button id="noteViewDelete" class="btn danger">Excluir</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Visualização de Credencial -->
|
||||
<div id="credViewModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="credViewTitle">
|
||||
<div class="modal-card wide cred-view">
|
||||
<div class="modal-head">
|
||||
<h3 id="credViewTitle">Credencial</h3>
|
||||
<button class="icon-btn" data-close-modal="credViewModal" aria-label="Fechar">✕</button>
|
||||
</div>
|
||||
<div class="modal-body" id="credViewBody">
|
||||
<!-- conteúdo renderizado via JS -->
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button id="credViewOpen" class="btn">Abrir</button>
|
||||
<button id="credViewCopyUser" class="btn">Copiar usuário</button>
|
||||
<button id="credViewCopyPass" class="btn">Copiar senha</button>
|
||||
<button id="credViewReveal" class="btn">Revelar</button>
|
||||
<button id="credViewEdit" class="btn">Editar</button>
|
||||
<button id="credViewDelete" class="btn danger">Excluir</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="app-footer">
|
||||
<small id="storageInfo">Detectando modo de armazenamento…</small>
|
||||
</footer>
|
||||
|
||||
<!-- Autenticação -->
|
||||
<div id="authGate" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="loginTitle">
|
||||
<div class="modal-card" style="max-width:420px">
|
||||
<div class="modal-head">
|
||||
<h3 id="loginTitle">Entrar</h3>
|
||||
</div>
|
||||
<form id="loginForm" class="modal-body">
|
||||
<label><span>Usuário</span><input id="loginUser" class="input" required /></label>
|
||||
<label><span>Senha</span><input id="loginPass" type="password" class="input" required /></label>
|
||||
<div class="modal-foot">
|
||||
<button type="submit" class="btn primary">Entrar</button>
|
||||
</div>
|
||||
<div class="k">Dica: no primeiro acesso via Docker use as credenciais definidas nas variáveis ADMIN_USER e ADMIN_PASSWORD.</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user