Path: C:\
<!DOCTYPE html>
<html lang='pt-br'>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Relatório Térmico</title>
<link href="../images/favicon.ico" rel="icon" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src='../js/jquery-2.1.3.min.js'></script>
<script src='../js/tabelas.js'></script>
<script src="../js/jquery.mask.min.js"></script>
<script src="https://kit.fontawesome.com/737b290986.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
$('.date').mask('00/00/0000');
$('.time').mask('00:00');
function loadHistory() {
$.get('salvar_historico_quali.php', function (data) {
var list = $('#history-list');
list.empty();
if (!data || data.length === 0) {
list.append('<p style="color:#718096; font-size:0.9rem;">Nenhum histórico salvo ainda.</p>');
return;
}
data.forEach(function (item) {
var card = $('<div class="history-item"></div>');
card.append('<div class="history-item-title">Coleta: ' + item.coleta + '</div>');
card.append('<div class="history-item-detail"><strong>Motorista:</strong> ' + item.motorista + '</div>');
var dateStr = '';
if (item.inicio) {
var p = item.inicio.split('-');
dateStr = p.length === 3 ? (p[2] + '/' + p[1] + '/' + p[0]) : item.inicio;
}
card.append('<div class="history-item-detail"><strong>Data:</strong> ' + dateStr + '</div>');
card.click(function () {
$('#motorista').val(item.motorista);
$('#coleta').val(item.coleta);
$('#veiculo').val(item.veiculo);
$('#carreta').val(item.carreta);
$('#minima').val(item.minima);
$('#maxima').val(item.maxima);
$('#inicio').val(item.inicio);
$('#horainicio').val(item.horainicio);
$('#fim').val(item.fim);
$('#horafim').val(item.horafim);
});
list.append(card);
});
}, 'json');
}
loadHistory();
$('form').on('submit', function (e) {
e.preventDefault();
var formData = {
motorista: $('#motorista').val(),
coleta: $('#coleta').val(),
veiculo: $('#veiculo').val(),
carreta: $('#carreta').val(),
minima: $('#minima').val(),
maxima: $('#maxima').val(),
inicio: $('#inicio').val(),
horainicio: $('#horainicio').val(),
fim: $('#fim').val(),
horafim: $('#horafim').val()
};
$.ajax({
type: 'POST',
url: 'salvar_historico_quali.php',
data: JSON.stringify(formData),
contentType: 'application/json',
success: function () {
$('form')[0].submit();
},
error: function () {
$('form')[0].submit();
}
});
});
});
</script>
<style>
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-45deg, #0a1128, #102a5c, #0d7377, #1f4287, #071e3d);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: #333;
padding: 20px;
}
.wrapper {
display: flex;
gap: 30px;
width: 100%;
max-width: 1200px;
align-items: flex-start;
flex-wrap: wrap;
}
.form-container {
flex: 2;
min-width: 300px;
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
padding: 40px;
backdrop-filter: blur(10px);
}
.history-sidebar {
flex: 1;
min-width: 300px;
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
padding: 30px;
backdrop-filter: blur(10px);
max-height: 800px;
overflow-y: auto;
}
.history-sidebar h3 {
font-size: 1.2rem;
color: #2d3748;
margin-bottom: 20px;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 10px;
font-weight: 700;
}
.history-item {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.3s ease;
}
.history-item:hover {
border-color: #3182ce;
box-shadow: 0 4px 12px rgba(49, 130, 206, 0.15);
transform: translateY(-2px);
}
.history-item-title {
font-weight: 700;
color: #2b6cb0;
margin-bottom: 6px;
font-size: 1.05rem;
}
.history-item-detail {
font-size: 0.85rem;
color: #4a5568;
margin-bottom: 4px;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header img {
max-width: 100%;
height: auto;
max-height: 85px;
border-radius: 8px;
}
.row {
display: flex;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.col {
flex: 1;
min-width: 250px;
}
.form-group {
display: flex;
flex-direction: column;
}
label {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 8px;
color: #4a5568;
}
input[type="text"],
input[type="date"] {
width: 100%;
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
background-color: #f8fafc;
color: #2d3748;
}
input[type="text"]:focus,
input[type="date"]:focus {
outline: none;
border-color: #3182ce;
box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
background-color: #fff;
}
.section-title {
font-size: 1.1rem;
font-weight: 600;
color: #2d3748;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 10px;
margin: 10px 0 20px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title img {
height: 25px;
object-fit: contain;
}
.submit-btn {
width: 100%;
background: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%);
color: #fff;
border: none;
border-radius: 8px;
padding: 16px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
}
.submit-btn:hover {
background: linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(43, 108, 176, 0.3);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="form-container">
<div style="margin-top: 15px; margin-bottom: 15px; text-align: center;">
<a href="quali07.php" class="text-decoration-none"
style="color: #3182ce; text-decoration: none; font-weight: 600; font-size: 1.5rem; transition: color 0.3s;"
onmouseover="this.style.color='#93c5fd'" onmouseout="this.style.color='#60a5fa'"><i
class="fa-solid fa-arrow-right-arrow-left me-1"></i> Carregar Relatório
Automático</a>
</div>
<div class="header">
<img src="images/logo.png" alt="Logo" />
</div>
<form method="GET" action="quali10x.php">
<div class="row">
<div class="col form-group" style="flex: 100%;">
<label for="motorista">Nome do Motorista</label>
<input id="motorista" name="motorista" type="text" maxlength="50" required
placeholder="Digite o nome do motorista" />
</div>
</div>
<div class="row">
<div class="col form-group" style="flex: 100%;">
<label for="coleta">Número da Coleta</label>
<input id="coleta" name="coleta" type="text" maxlength="7" required placeholder="Ex: 1234567" />
</div>
</div>
<div class="row">
<div class="col form-group">
<label for="veiculo">Placa do Veículo</label>
<input id="veiculo" name="veiculo" type="text" maxlength="7" required placeholder="Ex: ABC1234" />
</div>
<div class="col form-group">
<label for="carreta">Placa da Carreta</label>
<input id="carreta" name="carreta" type="text" maxlength="7" value="N/A" />
</div>
</div>
<div class="row">
<div class="col form-group">
<label for="minima">Temperatura Mínima (°C)</label>
<input id="minima" name="minima" type="text" maxlength="3" required placeholder="Ex: -18" />
</div>
<div class="col form-group">
<label for="maxima">Temperatura Máxima (°C)</label>
<input id="maxima" name="maxima" type="text" maxlength="3" required placeholder="Ex: -12" />
</div>
</div>
<div class="row">
<div class="col">
<div class="section-title">
Período de Início
</div>
<div class="row">
<div class="col form-group">
<label for="inicio">Data</label>
<input type="date" name="inicio" id="inicio" required autofocus />
</div>
<div class="col form-group">
<label for="horainicio">Hora</label>
<input type="text" name="horainicio" id="horainicio" class="time" maxlength="5" required
placeholder="00:00" />
</div>
</div>
</div>
<div class="col">
<div class="section-title">
Período de Fim
</div>
<div class="row">
<div class="col form-group">
<label for="fim">Data</label>
<input type="date" name="fim" id="fim" required />
</div>
<div class="col form-group">
<label for="horafim">Hora</label>
<input type="text" name="horafim" id="horafim" class="time" maxlength="5" required
placeholder="00:00" />
</div>
</div>
</div>
</div>
<button type="submit" class="submit-btn" value=" OK ">Gerar Relatório</button>
</form>
</div>
<div class="history-sidebar">
<h3>Últimas Consultas</h3>
<div id="history-list">
<!-- Carregado via JS -->
</div>
</div>
</div>
</body>
</html>