106 lines
3.7 KiB
Plaintext
106 lines
3.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="pt-BR" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-param" content="<%= request_forgery_protection_token %>">
|
|
<meta name="csrf-token" content="<%= form_authenticity_token %>">
|
|
<title><%= content_for?(:title) ? "#{yield(:title)} | Reem Logística" : "Reem Logística" %></title>
|
|
|
|
<%# Favicon / ícone do app (marca Reem — van laranja) %>
|
|
<link rel="icon" href="/favicon.png" type="image/png">
|
|
<link rel="apple-touch-icon" href="/favicon.png">
|
|
|
|
<%# Tailwind via CDN em desenvolvimento — compilar em produção %>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
preto: '#0a0a0a',
|
|
'preto-card': '#1a1a1a',
|
|
laranja: '#f97316',
|
|
'laranja-escuro': '#ea580c',
|
|
branco: '#ffffff',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<%# Google Fonts — Inter %>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* Fonte base maior para conforto de leitura (Tailwind usa rem → escala tudo).
|
|
16px no desktop e 18px no celular, conforme o padrão de design do projeto. */
|
|
html { font-size: 17px; }
|
|
@media (max-width: 767px) { html { font-size: 18px; } }
|
|
|
|
body { font-family: 'Inter', sans-serif; -webkit-text-size-adjust: 100%; }
|
|
/* Scrollbar tema escuro */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: #0a0a0a; }
|
|
::-webkit-scrollbar-thumb { background: #f97316; border-radius: 3px; }
|
|
/* Loading spinner laranja */
|
|
.spinner {
|
|
border: 3px solid #1a1a1a;
|
|
border-top-color: #f97316;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|
|
|
|
<%= javascript_importmap_tags %>
|
|
<%= yield :head %>
|
|
</head>
|
|
|
|
<body class="bg-[#0a0a0a] text-white min-h-screen">
|
|
|
|
<%# ── Navbar ─────────────────────────────────────────── %>
|
|
<% if user_signed_in? %>
|
|
<%= render 'layouts/navbar' %>
|
|
<% end %>
|
|
|
|
<%# ── Flash Messages ─────────────────────────────────── %>
|
|
<% if notice.present? %>
|
|
<div id="flash-notice"
|
|
class="fixed top-4 right-4 z-50 bg-orange-500 text-black font-semibold px-5 py-3 rounded-lg shadow-lg flex items-center gap-2 animate-fade-in"
|
|
data-controller="flash">
|
|
<span>✅</span> <%= notice %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if alert.present? %>
|
|
<div id="flash-alert"
|
|
class="fixed top-4 right-4 z-50 bg-red-600 text-white font-semibold px-5 py-3 rounded-lg shadow-lg flex items-center gap-2"
|
|
data-controller="flash">
|
|
<span>⚠️</span> <%= alert %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# ── Conteúdo principal ──────────────────────────────── %>
|
|
<main class="<%= user_signed_in? ? 'ml-0 md:ml-64 p-4 md:p-8' : '' %> min-h-screen">
|
|
<%= yield %>
|
|
</main>
|
|
|
|
<%# Auto-hide flash após 4s (JS simples) %>
|
|
<script>
|
|
setTimeout(() => {
|
|
['flash-notice', 'flash-alert'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.style.transition = 'opacity 0.5s', el.style.opacity = '0',
|
|
setTimeout(() => el.remove(), 500);
|
|
});
|
|
}, 4000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|