Initial commit - Fase 1: Setup Rails + Docker

2026-06-10 17:40:07 -03:00
commit eb812868e5
30 changed files with 1390 additions and 0 deletions
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -0,0 +1,95 @@
+<!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)} | Gade Logística" : "Gade Logística" %></title>
+
+  <%# 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>
+    body { font-family: 'Inter', sans-serif; }
+    /* 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>
+
+  <%= 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>