81 lines
3.4 KiB
Plaintext
81 lines
3.4 KiB
Plaintext
<%# app/views/motorista/sessoes/new.html.erb — Login por PIN (mobile-first, público baixo tech) %>
|
|
<% content_for :title, 'Entrar — Motorista' %>
|
|
|
|
<div class="min-h-screen flex items-center justify-center p-4">
|
|
<div class="w-full max-w-sm">
|
|
|
|
<%# Logo %>
|
|
<div class="text-center mb-8">
|
|
<div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center font-black text-black text-3xl mx-auto mb-3">G</div>
|
|
<h1 class="text-white font-bold text-2xl">Reem Logística</h1>
|
|
<% if @motorista_pre %>
|
|
<p class="text-white text-lg mt-1">Olá, <span class="font-bold text-orange-400"><%= @motorista_pre.nome.split.first %></span>!</p>
|
|
<p class="text-gray-400 text-base">Confirme com seu PIN de 4 números</p>
|
|
<% else %>
|
|
<p class="text-gray-400 text-base mt-1">Digite seu PIN de 4 números</p>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= form_with url: motorista_login_path, method: :post, id: 'form-pin' do |f| %>
|
|
<%# Mostradores do PIN %>
|
|
<div class="flex justify-center gap-3 mb-8" id="pin-display">
|
|
<% 4.times do |i| %>
|
|
<div class="pin-dot w-14 h-16 bg-[#1a1a1a] border-2 border-[#2a2a2a] rounded-xl flex items-center justify-center text-white text-3xl font-black"></div>
|
|
<% end %>
|
|
</div>
|
|
<%= hidden_field_tag :pin, '', id: 'pin-valor' %>
|
|
|
|
<%# Teclado numérico grande %>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<% [1,2,3,4,5,6,7,8,9].each do |n| %>
|
|
<button type="button" onclick="digitar('<%= n %>')"
|
|
class="bg-[#1a1a1a] hover:bg-[#2a2a2a] active:bg-orange-500 active:text-black text-white font-bold text-2xl rounded-xl py-5 min-h-[64px] transition-colors">
|
|
<%= n %>
|
|
</button>
|
|
<% end %>
|
|
<button type="button" onclick="apagar()"
|
|
class="bg-[#1a1a1a] hover:bg-red-900 text-white font-bold text-xl rounded-xl py-5 min-h-[64px]">
|
|
⌫
|
|
</button>
|
|
<button type="button" onclick="digitar('0')"
|
|
class="bg-[#1a1a1a] hover:bg-[#2a2a2a] active:bg-orange-500 active:text-black text-white font-bold text-2xl rounded-xl py-5 min-h-[64px]">
|
|
0
|
|
</button>
|
|
<button type="submit" id="btn-entrar" disabled
|
|
class="bg-orange-500 disabled:bg-[#2a2a2a] disabled:text-gray-600 text-black font-bold text-xl rounded-xl py-5 min-h-[64px] transition-colors">
|
|
✓
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
|
|
<p class="text-gray-300 text-base text-center mt-6">
|
|
💡 Você também pode escanear o QR Code do seu holerite para entrar direto.
|
|
</p>
|
|
<p class="text-center mt-4">
|
|
<%= link_to 'Sou administrador/gerente →', new_user_session_path, class: 'text-orange-500 hover:text-orange-400 text-sm' %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let pin = '';
|
|
function digitar(n) {
|
|
if (pin.length >= 4) return;
|
|
pin += n;
|
|
atualizar();
|
|
if (pin.length === 4) {
|
|
// Envia automaticamente após o 4º dígito
|
|
setTimeout(() => document.getElementById('form-pin').requestSubmit(), 250);
|
|
}
|
|
}
|
|
function apagar() { pin = pin.slice(0, -1); atualizar(); }
|
|
function atualizar() {
|
|
document.getElementById('pin-valor').value = pin;
|
|
document.querySelectorAll('.pin-dot').forEach((d, i) => {
|
|
d.textContent = pin[i] ? '●' : '';
|
|
d.classList.toggle('border-orange-500', !!pin[i]);
|
|
});
|
|
document.getElementById('btn-entrar').disabled = pin.length !== 4;
|
|
}
|
|
</script>
|