|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PharmaManager - Sistema de Gerenciamento de Farmácia</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .sidebar-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .logo-text { |
|
|
display: none; |
|
|
} |
|
|
.main-content { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.main-content.expanded { |
|
|
margin-left: 70px; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
width: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 0; |
|
|
} |
|
|
.main-content { |
|
|
margin-left: 0; |
|
|
} |
|
|
.mobile-menu-btn { |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
.toast { |
|
|
animation: fadeInOut 3s ease-in-out; |
|
|
} |
|
|
@keyframes fadeInOut { |
|
|
0% { opacity: 0; } |
|
|
10% { opacity: 1; } |
|
|
90% { opacity: 1; } |
|
|
100% { opacity: 0; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
|
|
|
<button class="mobile-menu-btn fixed top-4 left-4 z-50 bg-blue-600 text-white p-2 rounded-md shadow-lg md:hidden"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div class="sidebar fixed h-full bg-blue-800 text-white w-64 shadow-lg"> |
|
|
<div class="p-4 flex items-center"> |
|
|
<i class="fas fa-pills text-2xl mr-2"></i> |
|
|
<span class="logo-text text-xl font-bold">PharmaManager</span> |
|
|
</div> |
|
|
<nav class="mt-6"> |
|
|
<div class="px-4 py-2 hover:bg-blue-700 cursor-pointer flex items-center"> |
|
|
<i class="fas fa-tachometer-alt mr-3"></i> |
|
|
<span class="sidebar-text">Dashboard</span> |
|
|
</div> |
|
|
<div class="px-4 py-2 hover:bg-blue-700 cursor-pointer flex items-center" id="customer-nav"> |
|
|
<i class="fas fa-users mr-3"></i> |
|
|
<span class="sidebar-text">Clientes</span> |
|
|
</div> |
|
|
<div class="px-4 py-2 hover:bg-blue-700 cursor-pointer flex items-center" id="products-nav"> |
|
|
<i class="fas fa-boxes mr-3"></i> |
|
|
<span class="sidebar-text">Produtos</span> |
|
|
</div> |
|
|
<div class="px-4 py-2 hover:bg-blue-700 cursor-pointer flex items-center" id="sales-nav"> |
|
|
<i class="fas fa-shopping-cart mr-3"></i> |
|
|
<span class="sidebar-text">Vendas</span> |
|
|
</div> |
|
|
<div class="px-4 py-2 hover:bg-blue-700 cursor-pointer flex items-center" id="inventory-nav"> |
|
|
<i class="fas fa-warehouse mr-3"></i> |
|
|
<span class="sidebar-text">Estoque</span> |
|
|
</div> |
|
|
<div class="px-4 py-2 hover:bg-blue-700 cursor-pointer flex items-center" id="reports-nav"> |
|
|
<i class="fas fa-chart-bar mr-3"></i> |
|
|
<span class="sidebar-text">Relatórios</span> |
|
|
</div> |
|
|
<div class="px-4 py-2 hover:bg-blue-700 cursor-pointer flex items-center" id="settings-nav"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span class="sidebar-text">Configurações</span> |
|
|
</div> |
|
|
<div class="px-4 py-2 hover:bg-blue-700 cursor-pointer flex items-center" id="backup-nav"> |
|
|
<i class="fas fa-database mr-3"></i> |
|
|
<span class="sidebar-text">Backup/Restore</span> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content ml-64 min-h-screen"> |
|
|
|
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-semibold text-gray-800" id="page-title">Dashboard</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-bell text-gray-600 cursor-pointer hover:text-blue-600"></i> |
|
|
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<img src="https://via.placeholder.com/40" alt="User" class="rounded-full"> |
|
|
<span class="text-gray-700">Admin</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
|
|
|
<div id="dashboard-content"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-500">Clientes Cadastrados</p> |
|
|
<h3 class="text-2xl font-bold" id="customer-count">0</h3> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
|
<i class="fas fa-users text-blue-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-500">Produtos em Estoque</p> |
|
|
<h3 class="text-2xl font-bold" id="product-count">0</h3> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-boxes text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-500">Vendas Hoje</p> |
|
|
<h3 class="text-2xl font-bold" id="sales-today">0</h3> |
|
|
</div> |
|
|
<div class="bg-yellow-100 p-3 rounded-full"> |
|
|
<i class="fas fa-shopping-cart text-yellow-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-500">Receita Mensal</p> |
|
|
<h3 class="text-2xl font-bold" id="monthly-revenue">R$ 0,00</h3> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-full"> |
|
|
<i class="fas fa-money-bill-wave text-purple-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md lg:col-span-2"> |
|
|
<h2 class="text-xl font-semibold mb-4">Vendas Recentes</h2> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200" id="recent-sales"> |
|
|
<tr> |
|
|
<td colspan="4" class="px-6 py-4 text-center text-gray-500">Nenhuma venda recente</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Estoque Baixo</h2> |
|
|
<div class="space-y-4" id="low-stock"> |
|
|
<div class="text-center text-gray-500">Nenhum produto com estoque baixo</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="customer-content" class="hidden"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-semibold">Gerenciamento de Clientes</h2> |
|
|
<button id="add-customer-btn" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Novo Cliente |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b flex justify-between items-center"> |
|
|
<div class="relative w-64"> |
|
|
<input type="text" id="customer-search" placeholder="Buscar clientes..." class="w-full pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="export-customers" class="bg-green-600 text-white px-3 py-1 rounded-md hover:bg-green-700 flex items-center"> |
|
|
<i class="fas fa-file-export mr-1"></i> Exportar |
|
|
</button> |
|
|
<button id="import-customers" class="bg-purple-600 text-white px-3 py-1 rounded-md hover:bg-purple-700 flex items-center"> |
|
|
<i class="fas fa-file-import mr-1"></i> Importar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPF</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Telefone</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200" id="customer-table-body"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="p-4 border-t flex justify-between items-center"> |
|
|
<div class="text-sm text-gray-500"> |
|
|
Mostrando <span id="customer-start">1</span> a <span id="customer-end">10</span> de <span id="customer-total">0</span> clientes |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="customer-prev" class="px-3 py-1 border rounded-md disabled:opacity-50" disabled>Anterior</button> |
|
|
<button id="customer-next" class="px-3 py-1 border rounded-md disabled:opacity-50" disabled>Próximo</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="backup-content" class="hidden"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-semibold">Backup e Restauração</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-download mr-2 text-blue-600"></i> Criar Backup |
|
|
</h3> |
|
|
<p class="text-gray-600 mb-4">Crie um backup completo do banco de dados para restaurar posteriormente.</p> |
|
|
<button id="create-backup-btn" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center w-full justify-center"> |
|
|
<i class="fas fa-save mr-2"></i> Criar Backup |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-upload mr-2 text-green-600"></i> Restaurar Backup |
|
|
</h3> |
|
|
<p class="text-gray-600 mb-4">Restaurar o banco de dados a partir de um arquivo de backup.</p> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Selecione o arquivo de backup:</label> |
|
|
<input type="file" id="restore-file" class="block w-full text-sm text-gray-500 |
|
|
file:mr-4 file:py-2 file:px-4 |
|
|
file:rounded-md file:border-0 |
|
|
file:text-sm file:font-semibold |
|
|
file:bg-blue-50 file:text-blue-700 |
|
|
hover:file:bg-blue-100"> |
|
|
</div> |
|
|
<button id="restore-backup-btn" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 flex items-center w-full justify-center"> |
|
|
<i class="fas fa-redo mr-2"></i> Restaurar Backup |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md mt-6"> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-history mr-2 text-purple-600"></i> Backups Disponíveis |
|
|
</h3> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tamanho</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200" id="backup-list"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="customer-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold" id="modal-title">Adicionar Novo Cliente</h3> |
|
|
<button id="close-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<form id="customer-form"> |
|
|
<input type="hidden" id="customer-id"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="customer-name" class="block text-gray-700 mb-2">Nome Completo*</label> |
|
|
<input type="text" id="customer-name" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="customer-cpf" class="block text-gray-700 mb-2">CPF*</label> |
|
|
<input type="text" id="customer-cpf" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="customer-phone" class="block text-gray-700 mb-2">Telefone*</label> |
|
|
<input type="text" id="customer-phone" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="customer-email" class="block text-gray-700 mb-2">Email</label> |
|
|
<input type="email" id="customer-email" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="customer-address" class="block text-gray-700 mb-2">Endereço</label> |
|
|
<input type="text" id="customer-address" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
|
|
<div> |
|
|
<label for="customer-city" class="block text-gray-700 mb-2">Cidade</label> |
|
|
<input type="text" id="customer-city" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="customer-state" class="block text-gray-700 mb-2">Estado</label> |
|
|
<input type="text" id="customer-state" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="customer-zip" class="block text-gray-700 mb-2">CEP</label> |
|
|
<input type="text" id="customer-zip" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button type="button" id="cancel-customer" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100">Cancelar</button> |
|
|
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Salvar</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-md shadow-lg hidden"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span id="toast-message">Operação realizada com sucesso!</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="confirm-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold" id="confirm-title">Confirmar ação</h3> |
|
|
<button id="close-confirm" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p id="confirm-message">Tem certeza que deseja realizar esta ação?</p> |
|
|
<div class="flex justify-end space-x-3 mt-6"> |
|
|
<button type="button" id="cancel-confirm" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100">Cancelar</button> |
|
|
<button type="button" id="confirm-action" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">Confirmar</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let db; |
|
|
const DB_NAME = "PharmaManagerDB"; |
|
|
const DB_VERSION = 1; |
|
|
|
|
|
|
|
|
const request = indexedDB.open(DB_NAME, DB_VERSION); |
|
|
|
|
|
request.onupgradeneeded = (event) => { |
|
|
db = event.target.result; |
|
|
|
|
|
|
|
|
if (!db.objectStoreNames.contains('customers')) { |
|
|
const customersStore = db.createObjectStore('customers', { keyPath: 'id', autoIncrement: true }); |
|
|
customersStore.createIndex('name', 'name', { unique: false }); |
|
|
customersStore.createIndex('cpf', 'cpf', { unique: true }); |
|
|
customersStore.createIndex('phone', 'phone', { unique: false }); |
|
|
} |
|
|
|
|
|
|
|
|
if (!db.objectStoreNames.contains('products')) { |
|
|
const productsStore = db.createObjectStore('products', { keyPath: 'id', autoIncrement: true }); |
|
|
productsStore.createIndex('name', 'name', { unique: false }); |
|
|
productsStore.createIndex('barcode', 'barcode', { unique: true }); |
|
|
} |
|
|
|
|
|
|
|
|
if (!db.objectStoreNames.contains('sales')) { |
|
|
const salesStore = db.createObjectStore('sales', { keyPath: 'id', autoIncrement: true }); |
|
|
salesStore.createIndex('customerId', 'customerId', { unique: false }); |
|
|
salesStore.createIndex('date', 'date', { unique: false }); |
|
|
} |
|
|
|
|
|
|
|
|
if (!db.objectStoreNames.contains('backups')) { |
|
|
db.createObjectStore('backups', { keyPath: 'id', autoIncrement: true }); |
|
|
} |
|
|
}; |
|
|
|
|
|
request.onsuccess = (event) => { |
|
|
db = event.target.result; |
|
|
console.log("Database opened successfully"); |
|
|
updateDashboardCounts(); |
|
|
loadCustomers(); |
|
|
loadBackups(); |
|
|
}; |
|
|
|
|
|
request.onerror = (event) => { |
|
|
console.error("Database error:", event.target.error); |
|
|
}; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); |
|
|
const sidebar = document.querySelector('.sidebar'); |
|
|
const mainContent = document.querySelector('.main-content'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('customer-nav').addEventListener('click', () => { |
|
|
showSection('customer-content', 'Clientes'); |
|
|
loadCustomers(); |
|
|
}); |
|
|
|
|
|
document.getElementById('backup-nav').addEventListener('click', () => { |
|
|
showSection('backup-content', 'Backup/Restore'); |
|
|
loadBackups(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('add-customer-btn').addEventListener('click', () => { |
|
|
openCustomerModal(); |
|
|
}); |
|
|
|
|
|
document.getElementById('close-modal').addEventListener('click', () => { |
|
|
closeCustomerModal(); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancel-customer').addEventListener('click', () => { |
|
|
closeCustomerModal(); |
|
|
}); |
|
|
|
|
|
document.getElementById('customer-form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
saveCustomer(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('create-backup-btn').addEventListener('click', () => { |
|
|
createBackup(); |
|
|
}); |
|
|
|
|
|
document.getElementById('restore-backup-btn').addEventListener('click', () => { |
|
|
restoreBackup(); |
|
|
}); |
|
|
|
|
|
|
|
|
showSection('dashboard-content', 'Dashboard'); |
|
|
}); |
|
|
|
|
|
function showSection(sectionId, title) { |
|
|
|
|
|
document.querySelectorAll('[id$="-content"]').forEach(section => { |
|
|
section.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(sectionId).classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('page-title').textContent = title; |
|
|
} |
|
|
|
|
|
|
|
|
function loadCustomers(page = 1, search = '') { |
|
|
const transaction = db.transaction(['customers'], 'readonly'); |
|
|
const store = transaction.objectStore('customers'); |
|
|
const request = store.getAll(); |
|
|
|
|
|
request.onsuccess = () => { |
|
|
const customers = request.result; |
|
|
let filteredCustomers = customers; |
|
|
|
|
|
|
|
|
if (search) { |
|
|
const searchTerm = search.toLowerCase(); |
|
|
filteredCustomers = customers.filter(customer => |
|
|
customer.name.toLowerCase().includes(searchTerm) || |
|
|
customer.cpf.includes(searchTerm) || |
|
|
customer.phone.includes(searchTerm) || |
|
|
(customer.email && customer.email.toLowerCase().includes(searchTerm)) |
|
|
); |
|
|
} |
|
|
|
|
|
|
|
|
const itemsPerPage = 10; |
|
|
const startIndex = (page - 1) * itemsPerPage; |
|
|
const endIndex = startIndex + itemsPerPage; |
|
|
const paginatedCustomers = filteredCustomers.slice(startIndex, endIndex); |
|
|
const totalPages = Math.ceil(filteredCustomers.length / itemsPerPage); |
|
|
|
|
|
|
|
|
const tbody = document.getElementById('customer-table-body'); |
|
|
tbody.innerHTML = ''; |
|
|
|
|
|
if (paginatedCustomers.length === 0) { |
|
|
const row = document.createElement('tr'); |
|
|
row.innerHTML = `<td colspan="6" class="px-6 py-4 text-center text-gray-500">Nenhum cliente encontrado</td>`; |
|
|
tbody.appendChild(row); |
|
|
} else { |
|
|
paginatedCustomers.forEach(customer => { |
|
|
const row = document.createElement('tr'); |
|
|
row.innerHTML = ` |
|
|
<td class="px-6 py-4 whitespace-nowrap">${customer.id}</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">${customer.name}</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">${formatCPF(customer.cpf)}</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">${formatPhone(customer.phone)}</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">${customer.email || '-'}</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<button class="edit-customer text-blue-600 hover:text-blue-800 mr-3" data-id="${customer.id}"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="delete-customer text-red-600 hover:text-red-800" data-id="${customer.id}"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
`; |
|
|
tbody.appendChild(row); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.edit-customer').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const id = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
editCustomer(id); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.delete-customer').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const id = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
confirmDeleteCustomer(id); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('customer-start').textContent = startIndex + 1; |
|
|
document.getElementById('customer-end').textContent = Math.min(endIndex, filteredCustomers.length); |
|
|
document.getElementById('customer-total').textContent = filteredCustomers.length; |
|
|
|
|
|
|
|
|
const prevBtn = document.getElementById('customer-prev'); |
|
|
const nextBtn = document.getElementById('customer-next'); |
|
|
|
|
|
prevBtn.disabled = page <= 1; |
|
|
nextBtn.disabled = page >= totalPages; |
|
|
|
|
|
prevBtn.onclick = () => loadCustomers(page - 1, search); |
|
|
nextBtn.onclick = () => loadCustomers(page + 1, search); |
|
|
}; |
|
|
|
|
|
request.onerror = () => { |
|
|
console.error("Error loading customers"); |
|
|
}; |
|
|
} |
|
|
|
|
|
function openCustomerModal(customer = null) { |
|
|
const modal = document.getElementById('customer-modal'); |
|
|
const form = document.getElementById('customer-form'); |
|
|
|
|
|
if (customer) { |
|
|
document.getElementById('modal-title').textContent = 'Editar Cliente'; |
|
|
document.getElementById('customer-id').value = customer.id; |
|
|
document.getElementById('customer-name').value = customer.name; |
|
|
document.getElementById('customer-cpf').value = customer.cpf; |
|
|
document.getElementById('customer-phone').value = customer.phone; |
|
|
document.getElementById('customer-email').value = customer.email || ''; |
|
|
document.getElementById('customer-address').value = customer.address || ''; |
|
|
document.getElementById('customer-city').value = customer.city || ''; |
|
|
document.getElementById('customer-state').value = customer.state || ''; |
|
|
document.getElementById('customer-zip').value = customer.zip || ''; |
|
|
} else { |
|
|
document.getElementById('modal-title').textContent = 'Adicionar Novo Cliente'; |
|
|
form.reset(); |
|
|
} |
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeCustomerModal() { |
|
|
document.getElementById('customer-modal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function saveCustomer() { |
|
|
const id = document.getElementById('customer-id').value; |
|
|
const customer = { |
|
|
name: document.getElementById('customer-name').value.trim(), |
|
|
cpf: document.getElementById('customer-cpf').value.replace(/\D/g, ''), |
|
|
phone: document.getElementById('customer-phone').value.replace(/\D/g, ''), |
|
|
email: document.getElementById('customer-email').value.trim() || null, |
|
|
address: document.getElementById('customer-address').value.trim() || null, |
|
|
city: document.getElementById('customer-city').value.trim() || null, |
|
|
state: document.getElementById('customer-state').value.trim() || null, |
|
|
zip: document.getElementById('customer-zip').value.replace(/\D/g, '') || null |
|
|
}; |
|
|
|
|
|
if (!customer.name || !customer.cpf || !customer.phone) { |
|
|
showToast('Por favor, preencha os campos obrigatórios', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const transaction = db.transaction(['customers'], 'readwrite'); |
|
|
const store = transaction.objectStore('customers'); |
|
|
|
|
|
if (id) { |
|
|
customer.id = parseInt(id); |
|
|
const request = store.put(customer); |
|
|
|
|
|
request.onsuccess = () => { |
|
|
showToast('Cliente atualizado com sucesso!'); |
|
|
closeCustomerModal(); |
|
|
loadCustomers(); |
|
|
updateDashboardCounts(); |
|
|
}; |
|
|
|
|
|
request.onerror = () => { |
|
|
showToast('Erro ao atualizar cliente', 'error'); |
|
|
}; |
|
|
} else { |
|
|
const request = store.add(customer); |
|
|
|
|
|
request.onsuccess = () => { |
|
|
showToast('Cliente cadastrado com sucesso!'); |
|
|
closeCustomerModal(); |
|
|
loadCustomers(); |
|
|
updateDashboardCounts(); |
|
|
}; |
|
|
|
|
|
request.onerror = (e) => { |
|
|
if (e.target.error.name === 'ConstraintError') { |
|
|
showToast('CPF já cadastrado', 'error'); |
|
|
} else { |
|
|
showToast('Erro ao cadastrar cliente', 'error'); |
|
|
} |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
function editCustomer(id) { |
|
|
const transaction = db.transaction(['customers'], 'readonly'); |
|
|
const store = transaction.objectStore('customers'); |
|
|
const request = store.get(id); |
|
|
|
|
|
request.onsuccess = () => { |
|
|
openCustomerModal(request.result); |
|
|
}; |
|
|
|
|
|
request.onerror = () => { |
|
|
showToast('Erro ao carregar cliente', 'error'); |
|
|
}; |
|
|
} |
|
|
|
|
|
function confirmDeleteCustomer(id) { |
|
|
const modal = document.getElementById('confirm-modal'); |
|
|
document.getElementById('confirm-title').textContent = 'Excluir Cliente'; |
|
|
document.getElementById('confirm-message').textContent = 'Tem certeza que deseja excluir este cliente? Esta ação não pode ser desfeita.'; |
|
|
|
|
|
document.getElementById('confirm-action').onclick = () => { |
|
|
deleteCustomer(id); |
|
|
modal.classList.add('hidden'); |
|
|
}; |
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function deleteCustomer(id) { |
|
|
const transaction = db.transaction(['customers'], 'readwrite'); |
|
|
const store = transaction.objectStore('customers'); |
|
|
const request = store.delete(id); |
|
|
|
|
|
request.onsuccess = () => { |
|
|
showToast('Cliente excluído com sucesso!'); |
|
|
loadCustomers(); |
|
|
updateDashboardCounts(); |
|
|
}; |
|
|
|
|
|
request.onerror = () => { |
|
|
showToast('Erro ao excluir cliente', 'error'); |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function createBackup() { |
|
|
|
|
|
const transaction = db.transaction(['customers', 'products', 'sales'], 'readonly'); |
|
|
|
|
|
const customersRequest = transaction.objectStore('customers').getAll(); |
|
|
const productsRequest = transaction.objectStore('products').getAll(); |
|
|
const salesRequest = transaction.objectStore('sales').getAll(); |
|
|
|
|
|
Promise.all([ |
|
|
new Promise(resolve => { customersRequest.onsuccess = () => resolve(customersRequest.result); }), |
|
|
new Promise(resolve => { productsRequest.onsuccess = () => resolve(productsRequest.result); }), |
|
|
new Promise(resolve => { salesRequest.onsuccess = () => resolve(salesRequest.result); }) |
|
|
]).then(([customers, products, sales]) => { |
|
|
const backupData = { |
|
|
timestamp: new Date().getTime(), |
|
|
date: new Date().toISOString(), |
|
|
customers, |
|
|
products, |
|
|
sales |
|
|
}; |
|
|
|
|
|
|
|
|
const backupTransaction = db.transaction(['backups'], 'readwrite'); |
|
|
const backupStore = backupTransaction.objectStore('backups'); |
|
|
backupStore.add(backupData); |
|
|
|
|
|
backupTransaction.oncomplete = () => { |
|
|
showToast('Backup criado com sucesso!'); |
|
|
loadBackups(); |
|
|
|
|
|
|
|
|
const dataStr = JSON.stringify(backupData); |
|
|
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr); |
|
|
|
|
|
const exportName = `pharmamanager_backup_${new Date().toISOString().slice(0, 10)}.json`; |
|
|
|
|
|
const linkElement = document.createElement('a'); |
|
|
linkElement.setAttribute('href', dataUri); |
|
|
linkElement.setAttribute('download', exportName); |
|
|
linkElement.click(); |
|
|
}; |
|
|
|
|
|
backupTransaction.onerror = () => { |
|
|
showToast('Erro ao salvar backup local', 'error'); |
|
|
}; |
|
|
}).catch(error => { |
|
|
console.error("Backup error:", error); |
|
|
showToast('Erro ao criar backup', 'error'); |
|
|
}); |
|
|
} |
|
|
|
|
|
function restoreBackup() { |
|
|
const fileInput = document.getElementById('restore-file'); |
|
|
const file = fileInput.files[0]; |
|
|
|
|
|
if (!file) { |
|
|
showToast('Selecione um arquivo de backup', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const reader = new FileReader(); |
|
|
reader.onload = (event) => { |
|
|
try { |
|
|
const backupData = JSON.parse(event.target.result); |
|
|
|
|
|
|
|
|
const modal = document.getElementById('confirm-modal'); |
|
|
document.getElementById('confirm-title').textContent = 'Restaurar Backup'; |
|
|
document.getElementById('confirm-message').textContent = `Tem certeza que deseja restaurar o backup de ${new Date(backupData.timestamp).toLocaleString()}? Todos os dados atuais serão substituídos.`; |
|
|
|
|
|
document.getElementById('confirm-action').onclick = () => { |
|
|
performRestore(backupData); |
|
|
modal.classList.add('hidden'); |
|
|
}; |
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
} catch (e) { |
|
|
console.error("Error parsing backup file:", e); |
|
|
showToast('Arquivo de backup inválido', 'error'); |
|
|
} |
|
|
}; |
|
|
reader.readAsText(file); |
|
|
} |
|
|
|
|
|
function performRestore(backupData) { |
|
|
|
|
|
const transaction = db.transaction(['customers', 'products', 'sales', 'backups'], 'readwrite'); |
|
|
|
|
|
|
|
|
transaction.objectStore('customers').clear(); |
|
|
transaction.objectStore('products').clear(); |
|
|
transaction.objectStore('sales').clear(); |
|
|
|
|
|
|
|
|
backupData.customers.forEach(customer => { |
|
|
transaction.objectStore('customers').add(customer); |
|
|
}); |
|
|
|
|
|
backupData.products.forEach(product => { |
|
|
transaction.objectStore('products').add(product); |
|
|
}); |
|
|
|
|
|
backupData.sales.forEach(sale => { |
|
|
transaction.objectStore('sales').add(sale); |
|
|
}); |
|
|
|
|
|
|
|
|
transaction.objectStore('backups').add(backupData); |
|
|
|
|
|
transaction.oncomplete = () => { |
|
|
showToast('Backup restaurado com sucesso!'); |
|
|
loadCustomers(); |
|
|
updateDashboardCounts(); |
|
|
loadBackups(); |
|
|
}; |
|
|
|
|
|
transaction.onerror = () => { |
|
|
showToast('Erro ao restaurar backup', 'error'); |
|
|
}; |
|
|
} |
|
|
|
|
|
function loadBackups() { |
|
|
const transaction = db.transaction(['backups'], 'readonly'); |
|
|
const store = transaction.objectStore('backups'); |
|
|
const request = store.getAll(); |
|
|
|
|
|
request.onsuccess = () => { |
|
|
const backups = request.result; |
|
|
const tbody = document.getElementById('backup-list'); |
|
|
tbody.innerHTML = ''; |
|
|
|
|
|
if (backups.length === 0) { |
|
|
const row = document.createElement('tr'); |
|
|
row.innerHTML = `<td colspan="3" class="px-6 py-4 text-center text-gray-500">Nenhum backup disponível</td>`; |
|
|
tbody.appendChild(row); |
|
|
} else { |
|
|
|
|
|
backups.sort((a, b) => b.timestamp - a.timestamp); |
|
|
|
|
|
backups.forEach(backup => { |
|
|
const date = new Date(backup.timestamp); |
|
|
const size = JSON.stringify(backup).length; |
|
|
const sizeKB = (size / 1024).toFixed(2); |
|
|
|
|
|
const row = document.createElement('tr'); |
|
|
row.innerHTML = ` |
|
|
<td class="px-6 py-4 whitespace-nowrap">${date.toLocaleString()}</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">${sizeKB} KB</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<button class="download-backup text-blue-600 hover:text-blue-800 mr-3" data-id="${backup.id}"> |
|
|
<i class="fas fa-download"></i> Download |
|
|
</button> |
|
|
<button class="restore-from-list text-green-600 hover:text-green-800" data-id="${backup.id}"> |
|
|
<i class="fas fa-redo"></i> Restaurar |
|
|
</button> |
|
|
</td> |
|
|
`; |
|
|
tbody.appendChild(row); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.download-backup').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const id = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
downloadBackup(id); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.restore-from-list').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const id = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
confirmRestoreBackup(id); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
}; |
|
|
} |
|
|
|
|
|
function downloadBackup(id) { |
|
|
const transaction = db.transaction(['backups'], 'readonly'); |
|
|
const store = transaction.objectStore('backups'); |
|
|
const request = store.get(id); |
|
|
|
|
|
request.onsuccess = () => { |
|
|
const backupData = request.result; |
|
|
const dataStr = JSON.stringify(backupData); |
|
|
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr); |
|
|
|
|
|
const exportName = `pharmamanager_backup_${new Date(backupData.timestamp).toISOString().slice(0, 10)}.json`; |
|
|
|
|
|
const linkElement = document.createElement('a'); |
|
|
linkElement.setAttribute('href', dataUri); |
|
|
linkElement.setAttribute('download', exportName); |
|
|
linkElement.click(); |
|
|
|
|
|
showToast('Download do backup iniciado'); |
|
|
}; |
|
|
} |
|
|
|
|
|
function confirmRestoreBackup(id) { |
|
|
const modal = document.getElementById('confirm-modal'); |
|
|
document.getElementById('confirm-title').textContent = 'Restaurar Backup'; |
|
|
document.getElementById('confirm-message').textContent = 'Tem certeza que deseja restaurar este backup? Todos os dados atuais serão substituídos.'; |
|
|
|
|
|
document.getElementById('confirm-action').onclick = () => { |
|
|
restoreFromBackup(id); |
|
|
modal.classList.add('hidden'); |
|
|
}; |
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function restoreFromBackup(id) { |
|
|
const transaction = db.transaction(['backups'], 'readonly'); |
|
|
const store = transaction.objectStore('backups'); |
|
|
const request = store.get(id); |
|
|
|
|
|
request.onsuccess = () => { |
|
|
performRestore(request.result); |
|
|
}; |
|
|
|
|
|
request.onerror = () => { |
|
|
showToast('Erro ao carregar backup', 'error'); |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function updateDashboardCounts() { |
|
|
|
|
|
const customerTransaction = db.transaction(['customers'], 'readonly'); |
|
|
const customerStore = customerTransaction.objectStore('customers'); |
|
|
const customerCountRequest = customerStore.count(); |
|
|
|
|
|
customerCountRequest.onsuccess = () => { |
|
|
document.getElementById('customer-count').textContent = customerCountRequest.result; |
|
|
}; |
|
|
|
|
|
|
|
|
const productTransaction = db.transaction(['products'], 'readonly'); |
|
|
const productStore = productTransaction.objectStore('products'); |
|
|
const productCountRequest = productStore.count(); |
|
|
|
|
|
productCountRequest.onsuccess = () => { |
|
|
document.getElementById('product-count').textContent = productCountRequest.result; |
|
|
}; |
|
|
|
|
|
|
|
|
const salesTransaction = db.transaction(['sales'], 'readonly'); |
|
|
const salesStore = salesTransaction.objectStore('sales'); |
|
|
const today = new Date().toISOString().slice(0, 10); |
|
|
const salesTodayRequest = salesStore.index('date').getAll(today); |
|
|
|
|
|
salesTodayRequest.onsuccess = () => { |
|
|
document.getElementById('sales-today').textContent = salesTodayRequest.result.length; |
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById('monthly-revenue').textContent = 'R$ 0,00'; |
|
|
} |
|
|
|
|
|
|
|
|
function showToast(message, type = 'success') { |
|
|
const toast = document.getElementById('toast'); |
|
|
const toastMessage = document.getElementById('toast-message'); |
|
|
|
|
|
toastMessage.textContent = message; |
|
|
|
|
|
|
|
|
if (type === 'error') { |
|
|
toast.classList.remove('bg-green-500'); |
|
|
toast.classList.add('bg-red-500'); |
|
|
} else { |
|
|
toast.classList.remove('bg-red-500'); |
|
|
toast.classList.add('bg-green-500'); |
|
|
} |
|
|
|
|
|
toast.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
toast.classList.add('hidden'); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
function formatCPF(cpf) { |
|
|
return cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4'); |
|
|
} |
|
|
|
|
|
function formatPhone(phone) { |
|
|
if (phone.length === 11) { |
|
|
return phone.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3'); |
|
|
} else if (phone.length === 10) { |
|
|
return phone.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3'); |
|
|
} |
|
|
return phone; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('customer-search').addEventListener('input', (e) => { |
|
|
loadCustomers(1, e.target.value); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', (e) => { |
|
|
const customerModal = document.getElementById('customer-modal'); |
|
|
if (e.target === customerModal) { |
|
|
closeCustomerModal(); |
|
|
} |
|
|
|
|
|
const confirmModal = document.getElementById('confirm-modal'); |
|
|
if (e.target === confirmModal) { |
|
|
confirmModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('close-confirm').addEventListener('click', () => { |
|
|
document.getElementById('confirm-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancel-confirm').addEventListener('click', () => { |
|
|
document.getElementById('confirm-modal').classList.add('hidden'); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jptec2024/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
