⚙️
Arabella
Luxury
Sistema em manutenção
Estamos realizando melhorias no sistema.
Em breve estará disponível novamente.
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="theme-color" content="#0a0a0a" /> <title>Arabella Luxury</title> <link rel="icon" type="image/png" href="assets/favicon.png"> <link rel="apple-touch-icon" href="assets/favicon.png"> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/layout.css" /> <link rel="stylesheet" href="css/forms.css" /> <link rel="stylesheet" href="css/tables.css" /> <link rel="stylesheet" href="css/dashboard.css" /> <link rel="stylesheet" href="css/responsive.css" /> </head> <body> <!-- ============================================ --> <!-- TELA DE LOGIN (visível quando sem sessão) --> <!-- ============================================ --> <div id="login-screen" class="login-screen" hidden> <div class="login-side"> <div class="login-side-bg"></div> <div class="login-side-content"> <div class="login-mark"> <svg width="38" height="38" viewBox="0 0 32 32" fill="none" aria-hidden="true"> <circle cx="16" cy="16" r="14" stroke="currentColor" stroke-width="1.2"/> <path d="M16 6 L22 26 L16 22 L10 26 Z" fill="currentColor"/> </svg> <div> <div class="login-mark-name brand-serif"><em>Arabella</em></div> <div class="login-mark-tag">LUXURY</div> </div> </div> <div class="login-quote"> <div class="login-line"></div> <h2 class="brand-serif"><em>Gestão</em> a alma do negócio.</h2> <p>Gestão completa de vendas, estoque e clientes para uma operação de perfumaria fina. Acesso administrativo restrito.</p> </div> <div class="login-features"> <div class="login-feature"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z"/> <path d="M19 14l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/> </svg> <span>Vendas, parcelas e cobranças</span> </div> <div class="login-feature"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M3 8l4-2 4 2v5l-4 2-4-2z"/> <path d="M13 8l4-2 4 2v5l-4 2-4-2z"/> <path d="M8 16l4-2 4 2v5l-4 2-4-2z"/> </svg> <span>Estoque por lote e fornecedor</span> </div> <div class="login-feature"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M4 19V9M10 19V5M16 19v-7M22 19H2"/> </svg> <span>Relatórios e fechamento mensal</span> </div> </div> <div class="login-side-foot">DUO LTDA</div> </div> </div> <div class="login-form-side"> <div class="login-form-wrap"> <div class="login-form-head"> <div class="login-eyebrow">PAINEL INTERNO</div> <h1 class="brand-serif"> <em>Bem-vindo</em> <span class="login-welcome-name"> de volta.</span> </h1> <p>Entre para acessar o sistema administrativo.</p> </div> <form id="login-form" class="login-form-new" autocomplete="off"> <div id="login-error" class="form-error" hidden></div> <label class="field"> <span class="field-label">E-mail</span> <div class="input-with-icon"> <input class="input-new" type="email" id="login-email" placeholder="escreva o e-mail." required autocomplete="username"/> </div> </label> <label class="field"> <span class="field-label">Senha</span> <div class="input-with-icon"> <input class="input-new password-input-new" type="password" id="login-password" placeholder="••••••••••" required autocomplete="current-password"/> <button type="button" class="toggle-pwd" aria-label="Mostrar senha"> <svg class="eye-show" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/> <circle cx="12" cy="12" r="3"/> </svg> <svg class="eye-hide" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="display:none"> <path d="M3 3l18 18"/> <path d="M10.6 6.1a10.5 10.5 0 0 1 11.4 5.9 10.7 10.7 0 0 1-4.1 4.9"/> <path d="M6.6 6.6A10.5 10.5 0 0 0 2 12s3.5 7 10 7a10 10 0 0 0 4-1"/> </svg> </button> </div> </label> <div class="login-row"> <label class="login-check"> <input type="checkbox" checked/> <span>Manter sessão por 6h</span> </label> </div> <button type="submit" class="btn-login-submit" id="login-submit"> <span id="login-submit-text">Entrar no painel</span> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="submit-arrow"> <path d="M9 6l6 6-6 6"/> </svg> </button> <div class="login-divider"> <span class="divider-line"></span> <span class="divider-text">acesso restrito</span> <span class="divider-line"></span> </div> <div class="login-help"> Esqueceu seu acesso? <a href="mailto:suporte@arabella.com">Contatar suporte</a> </div> </form> <div class="login-foot"> © 2026 Arabella Luxury · v1.0 · <span style="font-family:var(--font-mono,monospace)">DUO LTDA</span> </div> </div> </div> </div> <!-- ============================================ --> <!-- SHELL DO APP (visível quando autenticado) --> <!-- ============================================ --> <div id="app-shell" class="app-shell" hidden> <header class="app-header"> <button class="menu-toggle" id="menu-toggle" aria-label="Menu"> <span></span><span></span><span></span> </button> <div class="app-brand">Arabella<span>Luxury</span></div> <div class="global-search" id="global-search-wrap"> <input type="search" id="global-search-input" placeholder="Buscar cliente, produto ou venda..." autocomplete="off" class="global-search-input" /> <div id="global-search-results" class="global-search-results" hidden></div> </div> <div class="app-session"> <div class="popover-anchor" id="theme-toggle-wrap"> <button class="btn-icon" id="theme-toggle-btn" aria-label="Alternar tema" title="Alternar tema"> <svg class="theme-icon-light" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="5"/> <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> </svg> <svg class="theme-icon-dark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="display:none"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> </svg> </button> <div class="popover popover-sm" id="theme-popover" hidden> <button class="popover-item" data-theme-option="light"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="5"/> <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> </svg> <span>Claro</span> <svg class="theme-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"> <polyline points="20 6 9 17 4 12"/> </svg> </button> <button class="popover-item" data-theme-option="dark"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> </svg> <span>Escuro</span> <svg class="theme-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"> <polyline points="20 6 9 17 4 12"/> </svg> </button> <button class="popover-item" data-theme-option="system"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="3" width="20" height="14" rx="2"/> <path d="M8 21h8M12 17v4"/> </svg> <span>Sistema</span> <svg class="theme-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"> <polyline points="20 6 9 17 4 12"/> </svg> </button> </div> </div> <div class="popover-anchor" id="bell-wrap"> <button class="btn-icon" id="bell-btn" aria-label="Notificações" title="Alertas do sistema"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/> <path d="M13.73 21a2 2 0 0 1-3.46 0"/> </svg> <span class="bell-dot" id="bell-dot" hidden></span> </button> <div class="popover popover-lg" id="bell-popover" hidden> <div class="popover-header"> <div> <div class="popover-title">Alertas</div> <div class="popover-subtitle" id="bell-subtitle">Carregando...</div> </div> </div> <div class="popover-body" id="bell-body"></div> <div class="popover-foot"> <button class="popover-item" onclick="window.location.hash='#/dashboard'"> Ver painel completo </button> </div> </div> </div> <span id="session-timer" class="session-timer" title="Tempo restante de sessão">--:--</span> <button class="btn-ghost" id="logout-btn">Sair</button> </div> </header> <nav class="app-nav" id="app-nav"> <div class="nav-section"> <div class="nav-section-title">Principal</div> <a href="#/dashboard" data-route="dashboard"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/> <rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/> </svg> </span> <span class="nav-label">Dashboard</span> </a> <a href="#/quick-sale" data-route="quick-sale"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/> </svg> </span> <span class="nav-label">Venda Rápida</span> </a> <a href="#/sales" data-route="sales"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10 a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/> <rect x="9" y="3" width="6" height="4" rx="1"/> <path d="M9 12h6M9 16h4"/> </svg> </span> <span class="nav-label">Vendas Realizadas</span> </a> <a href="#/clients" data-route="clients"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> <circle cx="9" cy="7" r="4"/> <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> <path d="M16 3.13a4 4 0 0 1 0 7.75"/> </svg> </span> <span class="nav-label">Clientes</span> <span class="nav-count" id="nav-count-clients" hidden></span> </a> <a href="#/products" data-route="products"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/> <line x1="7" y1="7" x2="7.01" y2="7"/> </svg> </span> <span class="nav-label">Produtos</span> </a> </div> <div class="nav-section"> <div class="nav-section-title">Estoque</div> <a href="#/suppliers" data-route="suppliers"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/> <polyline points="9 22 9 12 15 12 15 22"/> </svg> </span> <span class="nav-label">Fornecedores</span> </a> <a href="#/stock" data-route="stock"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/> <polyline points="3.27 6.96 12 12.01 20.73 6.96"/> <line x1="12" y1="22.08" x2="12" y2="12"/> </svg> </span> <span class="nav-label">Estoque</span> </a> <a href="#/invoices" data-route="invoices"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> <polyline points="14 2 14 8 20 8"/> <line x1="16" y1="13" x2="8" y2="13"/> <line x1="16" y1="17" x2="8" y2="17"/> </svg> </span> <span class="nav-label">NF / Despesas</span> </a> </div> <div class="nav-section"> <div class="nav-section-title">Financeiro</div> <a href="#/installments" data-route="installments"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="1" x2="12" y2="23"/> <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> </svg> </span> <span class="nav-label">Cobranças</span> <span class="nav-count" id="nav-count-installments" hidden></span> </a> <a href="#/reservations" data-route="reservations"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/> </svg> </span> <span class="nav-label">Reservas</span> </a> <a href="#/orders" data-route="orders"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/> </svg> </span> <span class="nav-label">Encomendas</span> </a> <a href="#/sellers" data-route="sellers"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> <circle cx="12" cy="7" r="4"/> </svg> </span> <span class="nav-label">Vendedores</span> </a> </div> <div class="nav-section"> <div class="nav-section-title">Análise</div> <a href="#/reports" data-route="reports"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="20" x2="18" y2="10"/> <line x1="12" y1="20" x2="12" y2="4"/> <line x1="6" y1="20" x2="6" y2="14"/> </svg> </span> <span class="nav-label">Relatórios</span> </a> <a href="#/history" data-route="history"> <span class="nav-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"/> <polyline points="12 6 12 12 16 14"/> </svg> </span> <span class="nav-label">Histórico</span> </a> </div> </nav> <div class="nav-overlay" id="nav-overlay"></div> <main class="app-main app-content" id="app-main"> <!-- Conteúdo das rotas é injetado aqui pelo router --> </main> </div> <!-- ============================================ --> <!-- TOAST / LOADER GLOBAIS --> <!-- ============================================ --> <div id="toast-container" class="toast-container"></div> <div id="global-loader" class="global-loader" hidden> <div class="spinner"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.4/jspdf.plugin.autotable.min.js"></script> <!-- Bootstrap do app --> <script type="module" src="js/app.js"></script> </body> </html>