ASSISTA AGORA Veja tudo uqui acontece at final 😭 não esperava
Assista agora Ad 2
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>HEINEKEN ON TRADE - APP ENGINE MAX</title>
<!-- Google Fonts & FontAwesome Icons -->
<link href="https://googleapis.com" rel="stylesheet">
<link rel="stylesheet" href="https://cloudflare.com">
<style>
:root {
--heineken-green: #00824A;
--heineken-bright-green: #00F27E;
--heineken-red: #D61A22;
--bg-deep: #050a08;
--card-bg: rgba(255, 255, 255, 0.03);
--text-main: #f4f4f4;
--text-dim: #a0a0a0;
--glass-blur: blur(25px);
--glass-border: rgba(255, 255, 255, 0.08);
--safe-area-top: env(safe-area-inset-top, 0px);
}
* {
box-sizing: border-box; margin: 0; padding: 0;
font-family: 'Inter', sans-serif;
-webkit-tap-highlight-color: transparent;
}
body {
background-color: var(--bg-deep);
background-image: radial-gradient(circle at 50% 0%, #0c1a12 0%, #050a08 100%);
color: var(--text-main);
padding-top: calc(85px + var(--safe-area-top));
min-height: 100vh;
overflow-x: hidden;
}
header {
position: fixed; top: 0; left: 0; width: 100%; height: calc(70px + var(--safe-area-top));
background: rgba(0, 10, 5, 0.85); backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
display: flex; justify-content: space-between; align-items: center;
padding: var(--safe-area-top) 20px 0 20px;
border-bottom: 1px solid var(--glass-border); z-index: 9999;
}
.header-title { display: flex; align-items: center; gap: 10px; }
header h1 { font-size: 1.1rem; font-weight: 900; letter-spacing: 1px; }
.heineken-star { color: var(--heineken-red); font-size: 1.3rem; }
main { padding: 15px; max-width: 1200px; margin: 0 auto; }
/* KPI CONTADORES */
.kpi-container {
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px; margin-bottom: 20px;
}
.kpi-card {
background: var(--card-bg); border: 1px solid var(--glass-border);
border-radius: 12px; padding: 15px; text-align: center;
}
.kpi-card p { font-size: 0.75rem; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.kpi-card h3 { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.kpi-total { color: #fff; }
.kpi-ativo { color: var(--heineken-bright-green); }
.kpi-pendente { color: var(--heineken-red); }
.section-card {
background: var(--card-bg); border: 1px solid var(--glass-border);
border-radius: 16px; padding: 20px; margin-bottom: 20px;
}
.section-card h2 {
font-size: 1.05rem; color: var(--heineken-bright-green);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 12px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;
}
.app-grid { display: grid; grid-template-columns: 1.1fr 1.9fr; gap: 20px; }
@media (max-width: 992px) { .app-grid { grid-template-columns: 1fr; } }
/* FORMULÁRIO */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 0.8rem; margin-bottom: 5px; color: #d0d0d0; font-weight: 600; }
.input-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.input-wrapper i { position: absolute; left: 12px; color: var(--text-dim); font-size: 0.9rem; z-index: 2; }
.form-input {
width: 100%; padding: 12px 12px 12px 35px; border-radius: 8px;
background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff; font-size: 0.9rem; outline: none; transition: 0.2s;
}
.form-input:focus { border-color: var(--heineken-bright-green); background: rgba(0,0,0,0.6); }
/* BOTÃO GPS INTEGRADO */
.btn-gps {
position: absolute; right: 8px; background: rgba(255,255,255,0.1);
border: none; color: var(--heineken-bright-green); padding: 6px 10px;
border-radius: 6px; font-size: 0.75rem; font-weight: 700; cursor: pointer;
transition: 0.2s; display: flex; align-items: center; gap: 4px;
}
.btn-gps:hover { background: var(--heineken-bright-green); color: #000; }
/* BARRA DE FERRAMENTAS (PESQUISA + EXPORTAR) */
.toolbar {
display: flex; gap: 10px; margin-bottom: 15px; align-items: center; flex-wrap: wrap;
}
.toolbar .search-box { flex-grow: 1; min-width: 200px; }
/* TABELA */
.table-responsive { overflow-x: auto; max-height: 320px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; }
th, td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
th { color: var(--heineken-bright-green); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; position: sticky; top: 0; background: #060e0a; z-index: 5; }
.estado-ok { color: var(--heineken-bright-green); font-weight: 600; }
.estado-pendente { color: var(--heineken-red); font-weight: 600; }
/* BOTÕES DE COMPONENTES */
.btn {
padding: 12px; border: none; border-radius: 8px; width: 100%;
font-size: 0.85rem; font-weight: 700; cursor: pointer; text-transform: uppercase;
transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; gap: 8px;
}
.btn-success { background-color: var(--heineken-green); color: white; }
.btn-success:hover { background-color: #009655; }
.btn-export { background: transparent; border: 1px solid var(--heineken-bright-green); color: var(--heineken-bright-green); width: auto; padding: 11px 16px; }
.btn-export:hover { background: var(--heineken-bright-green); color: #000; }
.actions-cell { display: flex; gap: 6px; }
.btn-mini {
padding: 6px 10px; border: none; border-radius: 4px; font-size: 0.7rem;
font-weight: 600; cursor: pointer; background: rgba(255,255,255,0.06); color: #fff;
transition: 0.15s; display: inline-flex; align-items: center; gap: 4px;
}
.btn-edit:hover { background: var(--heineken-bright-green); color: #000; }
.btn-delete:hover { background: var(--heineken-red); color: #fff; }
/* GRÁFICO SVG PREMIUM */
.chart-box { display: flex; justify-content: center; align-items: center; margin-top: 15px; padding: 10px; }
.chart-ring-track { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 8; }
.chart-ring-fill { fill: none; stroke: var(--heineken-bright-green); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; transform: rotate(-90deg); transform-origin: 50px 50px; }
.chart-text { font-size: 14px; font-weight: 800; fill: #fff; text-anchor: middle; font-family: sans-serif; }
.chart-label { font-size: 6px; fill: var(--text-dim); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.5px; }
/* MODAL */
.modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
display: flex; justify-content: center; align-items: center; z-index: 10000;
opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.modal.active { opacity: 1; pointer-events: auto; }
.modal-content {
background: #09120e; border: 1px solid var(--heineken-bright-green);
padding: 22px; border-radius: 14px; width: 90%; max-width: 380px;
}
.modal-content h3 { font-size: 1rem; margin-bottom: 15px; font-weight: 700; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; }
.modal-btn { padding: 10px 16px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: none; text-transform: uppercase; }
.btn-save { background: var(--heineken-bright-green); color: #000; }
.btn-cancel { background: rgba(255,255,255,0.08); color: #fff; }
</style>
</head>
<body>
<header>
<div class="header-title">
<i class="fa-solid fa-star heineken-star"></i>
<h1>HEINEKEN ON TRADE APP</h1>
</div>
</header>
<main>
<!-- KPI METRICS ENGINE -->
<div class="kpi-container">
<div class="kpi-card">
<p>Total PDVs</p>
<h3 id="kpi-total-val" class="kpi-total">0</h3>
</div>
<div class="kpi-card">
<p>Registo Ativo</p>
<h3 id="kpi-ativo-val" class="kpi-ativo">0</h3>
</div>
<div class="kpi-card">
<p>Pendente</p>
<h3 id="kpi-pendente-val" class="kpi-pendente">0</h3>
</div>
</div>
<div class="app-grid">
<!-- ENGINE DE CADASTRO -->
<div class="left-column">
<section class="section-card">
<h2><i class="fa-solid fa-plus"></i> Novo PDV</h2>
<form id="form-novo-pdv" onsubmit="AppEngine.adicionar(event)">
<div class="form-group">
