My Blog

Sample Page

This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

…or something like this:

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!


<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Troca de Plantão GNV</title>
<style>
:root {
--primary: #007bff;
--primary-dark: #0056b3;
--bg: #f4f6f9;
--card-bg: #ffffff;
--text: #333;
--danger: #dc3545;
--success: #28a745;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
margin: 0;
padding: 15px;
display: flex;
justify-content: center;
}

.container {
width: 100%;
max-width: 500px;
background: var(--card-bg);
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

h2, h3, h4 {
text-align: center;
margin-top: 0;
}

.step-indicator {
text-align: center;
font-weight: bold;
color: var(--primary);
margin-bottom: 15px;
}

.step {
display: none;
}

.step.active {
display: block;
}

.form-group {
margin-bottom: 12px;
}

label {
display: block;
font-size: 0.9em;
margin-bottom: 4px;
font-weight: 600;
}

input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
font-size: 1em;
}

.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.btn-group {
display: flex;
justify-content: space-between;
margin-top: 20px;
gap: 10px;
}

button {
flex: 1;
padding: 12px;
border: none;
border-radius: 6px;
background-color: var(--primary);
color: white;
font-size: 1em;
font-weight: bold;
cursor: pointer;
}

button.btn-secondary {
background-color: #6c757d;
}

button.btn-success {
background-color: var(--success);
}

/* Dashboard & Tabelas */
.review-card {
background: #e9ecef;
padding: 12px;
border-radius: 8px;
margin-bottom: 10px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.review-card:hover {
background: #dee2e6;
}

.dash-metric {
text-align: center;
padding: 12px;
border-radius: 8px;
margin-bottom: 10px;
background: #f8f9fa;
border: 1px solid #e0e0e0;
}

.dash-metric span {
display: block;
font-size: 0.85em;
color: #666;
}

.dash-metric strong {
font-size: 1.4em;
}

.val-positive { color: var(--success); }
.val-negative { color: var(--danger); }

/* Estilo da Tabela de Bicos */
.table-container {
overflow-x: auto;
margin-bottom: 15px;
}

.bico-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85em;
text-align: center;
background: #fff;
}

.bico-table th, .bico-table td {
border: 1px solid #dee2e6;
padding: 8px 4px;
}

.bico-table th {
background-color: #f1f3f5;
font-weight: 600;
}

.bico-table td.dif-col {
font-weight: bold;
color: var(--primary);
background-color: #f8f9fa;
}
</style>
</head>
<body>

<div class="container">
<h2>Troca de Plantão GNV</h2>

<form id="plantaoForm">
<!-- ETAPA 1 -->
<div class="step active" id="step-1">
<div class="step-indicator">Etapa 1 de 3: Assumindo o Turno</div>
<div class="form-group">
<label>Data</label>
<input type="date" id="data">
</div>
<div class="form-group">
<label>Frentista / Operador</label>
<input type="text" id="operador" placeholder="Seu nome">
</div>

<h3>Leituras Iniciais (m³)</h3>
<div class="grid-2">
<div class="form-group"><label>Bico A</label><input type="number" step="0.01" class="bico-inicio" id="ini_a" value="0"></div>
<div class="form-group"><label>Bico B</label><input type="number" step="0.01" class="bico-inicio" id="ini_b" value="0"></div>
<div class="form-group"><label>Bico C</label><input type="number" step="0.01" class="bico-inicio" id="ini_c" value="0"></div>
<div class="form-group"><label>Bico D</label><input type="number" step="0.01" class="bico-inicio" id="ini_d" value="0"></div>
<div class="form-group"><label>Bico E</label><input type="number" step="0.01" class="bico-inicio" id="ini_e" value="0"></div>
<div class="form-group"><label>Bico F</label><input type="number" step="0.01" class="bico-inicio" id="ini_f" value="0"></div>
</div>

<div class="btn-group">
<button type="button" onclick="nextStep(2)">Próxima Pergunta →</button>
</div>
</div>

<!-- ETAPA 2 -->
<div class="step" id="step-2">
<div class="step-indicator">Etapa 2 de 3: Passando o Plantão</div>
<h3>Leituras Finais (m³)</h3>
<div class="grid-2">
<div class="form-group"><label>Bico A</label><input type="number" step="0.01" class="bico-fim" id="fim_a" value="0"></div>
<div class="form-group"><label>Bico B</label><input type="number" step="0.01" class="bico-fim" id="fim_b" value="0"></div>
<div class="form-group"><label>Bico C</label><input type="number" step="0.01" class="bico-fim" id="fim_c" value="0"></div>
<div class="form-group"><label>Bico D</label><input type="number" step="0.01" class="bico-fim" id="fim_d" value="0"></div>
<div class="form-group"><label>Bico E</label><input type="number" step="0.01" class="bico-fim" id="fim_e" value="0"></div>
<div class="form-group"><label>Bico F</label><input type="number" step="0.01" class="bico-fim" id="fim_f" value="0"></div>
</div>

<div class="btn-group">
<button type="button" class="btn-secondary" onclick="nextStep(1)">← Voltar</button>
<button type="button" onclick="nextStep(3)">Próxima Pergunta →</button>
</div>
</div>

<!-- ETAPA 3 -->
<div class="step" id="step-3">
<div class="step-indicator">Etapa 3 de 3: Contagem de Caixa</div>
<div class="form-group">
<label>Preço por m³ do GNV (R)</label>
<input type="number" step="0.01" id="credito" value="0">
</div>
<div class="form-group">
<label>Cartão Débito (R)</label>
<input type="number" step="0.01" id="pix" value="0">
</div>
<div class="form-group">
<label>Sangria (R)</label>
<input type="number" step="0.01" id="dinheiro_gaveta" value="0">
</div>

<div class="btn-group">
<button type="button" class="btn-secondary" onclick="nextStep(2)">← Voltar</button>
<button type="button" class="btn-success" onclick="calcularEExibirDashboard()">Finalizar e Ver Dashboard ✓</button>
</div>
</div>

<!-- DASHBOARD -->
<div class="step" id="step-dashboard">
<h3>Resultado e Dashboard do Plantão</h3>

<!-- Tabela com Detalhamento de Cada Bico -->
<h4 style="margin-bottom: 8px;">Detalhamento dos Bicos (m³)</h4>
<div class="table-container">
<table class="bico-table">
<thead>
<tr>
<th>Bico</th>
<th>Inicial</th>
<th>Final</th>
<th>Consumo</th>
</tr>
</thead>
<tbody id="tabela-bicos-body">
<!-- Gerado via JavaScript -->
</tbody>
</table>
</div>

<div class="review-card" onclick="nextStep(1)">
<div>
<small>Volume Total Vendido</small><br>
<strong id="res-volume">0.00 m³ GNV</strong>
</div>
<small style="color: var(--primary);">Alterar Leituras</small>
</div>

<div class="review-card" onclick="nextStep(3)">
<div>
<small>Cartões/PIX/Sangria</small><br>
<strong id="res-nao-dinheiro">R$` 0,00</strong>
</div>
<small style="color: var(--primary);">Alterar</small>
</div>

<div class="review-card" onclick="nextStep(3)">
<div>
<small>Dinheiro Contado</small><br>
<strong id="res-dinheiro-gaveta">R`$ 0,00</strong>
</div>
<small style="color: var(--primary);">Alterar</small>
</div>

<hr style="margin: 15px 0; border: none; border-top: 1px solid #ddd;">

<div class="dash-metric">
<span>Faturamento Bicos</span>
<strong id="dash-faturamento">R$` 0,00</strong>
</div>

<div class="dash-metric">
<span>Dinheiro Esperado</span>
<strong id="dash-esperado">R`$ 0,00</strong>
</div>

<div class="dash-metric">
<span>Sobra de Caixa (Gorjeta) / Falta</span>
<strong id="dash-diferenca">R$` 0,00</strong>
</div>

<div class="btn-group">
<button type="button" class="btn-secondary" onclick="resetForm()">Iniciar Novo Questionário</button>
</div>
</div>
</form>
</div>

<script>
// Definir data de hoje como padrão
document.getElementById('data').valueAsDate = new Date();

function nextStep(stepNumber) {
document.querySelectorAll('.step').forEach(el => el.classList.remove('active'));

if(stepNumber === 'dashboard') {
document.getElementById('step-dashboard').classList.add('active');
} else {
document.getElementById('step-' + stepNumber).classList.add('active');
}
}

function getVal(id) {
return parseFloat(document.getElementById(id).value) || 0;
}

function formatMoney(val) {
return val.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}

function calcularEExibirDashboard() {
const bicos = ['a', 'b', 'c', 'd', 'e', 'f'];
let totalM3 = 0;
let tabelaHtml = '';

bicos.forEach(bico => {
const ini = getVal('ini_' + bico);
const fim = getVal('fim_' + bico);
const diferencaBico = fim >= ini ? (fim - ini) : 0;
totalM3 += diferencaBico;

// Monta as linhas da tabela no Dashboard
tabelaHtml += &lt;tr&gt; &lt;td&gt;&lt;strong&gt;${bico.toUpperCase()}</strong></td>
<td>{fim.toFixed(2)}</td>
<td class="dif-col">${diferencaBico.toFixed(2)} m³</td>
</tr>
`;
});

// Atualiza a tabela na tela do Dashboard
document.getElementById('tabela-bicos-body').innerHTML = tabelaHtml;

const precoM3 = getVal('preco_gnv');
const faturamentoTotal = totalM3 * precoM3;

const credito = getVal('credito');
const debito = getVal('debito');
const pix = getVal('pix');
const sangria = getVal('sangria');
const dinheiroGaveta = getVal('dinheiro_gaveta');

const totalNaoDinheiro = credito + debito + pix + sangria;
const dinheiroEsperado = faturamentoTotal - totalNaoDinheiro;
const diferenca = dinheiroGaveta - dinheiroEsperado;

// Atualiza cards de revisão
document.getElementById('res-volume').innerText = totalM3.toFixed(2).replace('.', ',') + ' m³ GNV';
document.getElementById('res-nao-dinheiro').innerText = formatMoney(totalNaoDinheiro);
document.getElementById('res-dinheiro-gaveta').innerText = formatMoney(dinheiroGaveta);

// Atualiza Dashboard principal
document.getElementById('dash-faturamento').innerText = formatMoney(faturamentoTotal);
document.getElementById('dash-esperado').innerText = formatMoney(dinheiroEsperado);

const elDiferenca = document.getElementById('dash-diferenca');
elDiferenca.innerText = formatMoney(diferenca);

// Cor indicativa para Sobra ou Falta
if (diferenca < 0) {
elDiferenca.className = 'val-negative';
} else if (diferenca > 0) {
elDiferenca.className = 'val-positive';
} else {
elDiferenca.className = '';
}

nextStep('dashboard');
}

function resetForm() {
if (confirm("Deseja limpar todos os dados para iniciar um novo plantão?")) {
document.getElementById('plantaoForm').reset();
document.getElementById('data').valueAsDate = new Date();
nextStep(1);
}
}
</script>

</body>
</html> 

   Jair Gregório

             Consultor de benefícios


                     21 98074 2032