Add HomelabDS brand identity: logo, colors, FusionPBX theme

2026-05-31 01:07:19 +00:00
parent cd303570d7
commit 8b37bfb20f
4 changed files with 266 additions and 0 deletions
@@ -0,0 +1,57 @@
+# HomelabDS — Identidade Visual
+
+_Marca criada em 2026-05-30_
+
+---
+
+## 🎨 Paleta de Cores
+
+| Cor | Hex | RGB | Uso |
+|-----|-----|-----|-----|
+| **Primary** | `#00D4AA` | rgb(0, 212, 170) | Elementos principais, links, botões |
+| **Primary Dark** | `#009B7D` | rgb(0, 155, 125) | Hover, active states |
+| **Secondary** | `#1A1A2E` | rgb(26, 26, 46) | Backgrounds escuros, headers |
+| **Accent** | `#FF6B6B` | rgb(255, 107, 107) | Destaques, alerts, badges |
+| **Surface** | `#F8F9FA` | rgb(248, 249, 250) | Fundos de cards, seções |
+| **Text** | `#2D3436` | rgb(45, 52, 54) | Texto principal |
+| **Text Light** | `#636E72` | rgb(99, 110, 114) | Texto secundário |
+| **White** | `#FFFFFF` | rgb(255, 255, 255) | Fundo puro |
+
+## 🆎 Tipografia
+
+- **Títulos:** Inter (Google Fonts) — SemiBold 600
+- **Corpo:** Inter — Regular 400
+- **Monospace:** JetBrains Mono — código, logs
+- **Tamanhos:** 14px (corpo), 16px (lead), 20-32px (títulos)
+
+## 📐 Logo
+
+O logotipo do HomelabDS segue o conceito de:
+- Escudo/escudo tecnológico (proteção + infraestrutura)
+- Gradiente verde (#00D4AA → #009B7D)
+- Forma limpa, moderna
+- Versão completa e versão simplificada (ícone apenas)
+
+## 🖼️ Aplicações
+
+### Login / Painel
+- Background: gradiente escuro (#1A1A2E → #16213E)
+- Logo centralizado no topo
+- Cards com sombra suave (box-shadow)
+- Inputs com borda primary no focus
+
+### Botões
+- Primary: bg #00D4AA, text white
+- Secondary: bg transparent, border #00D4AA
+- Danger: bg #FF6B6B
+- Hover: escurecer 10%
+
+## 📁 Arquivos
+
+```
+homelabds-brand/
+├── README.md          ← este arquivo (manual)
+├── colors.md          ← paleta detalhada
+├── logo/              ← versões do logo
+└── theme-fusionpbx/   ← tema para FusionPBX
+```
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00D4AA;stop-color:1" />
+      <stop offset="100%" style="stop-color:#009B7D;stop-color:1" />
+    </linearGradient>
+  </defs>
+  <polygon points="32,4 58,20 58,44 32,60 6,44 6,20" fill="url(#grad)" opacity="0.95"/>
+  <polygon points="32,12 50,24 50,40 32,52 14,40 14,24" fill="none" stroke="#fff" stroke-width="2.5" opacity="0.9"/>
+  <text x="32" y="42" font-family="Arial, sans-serif" font-size="26" font-weight="700" fill="#fff" text-anchor="middle">H</text>
+</svg>
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120" width="400" height="120">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00D4AA;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#009B7D;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Shield/Hexagon icon -->
+  <g transform="translate(20, 10)">
+    <polygon points="40,0 80,23 80,69 40,92 0,69 0,23" fill="url(#grad)" opacity="0.9"/>
+    <polygon points="40,12 68,28 68,60 40,76 12,60 12,28" fill="none" stroke="#fff" stroke-width="2.5" opacity="0.9"/>
+    <text x="40" y="52" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700" fill="#fff" text-anchor="middle">H</text>
+  </g>
+
+  <!-- Text -->
+  <text x="120" y="52" font-family="Inter, Arial, sans-serif" font-size="36" font-weight="700" fill="#1A1A2E" letter-spacing="1">
+    Homelab<tspan fill="#00D4AA">DS</tspan>
+  </text>
+  <text x="122" y="78" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="400" fill="#636E72" letter-spacing="3">
+    INFRAESTRUTURA &amp; TECNOLOGIA
+  </text>
+</svg>
@@ -0,0 +1,175 @@
+/* ============================================
+   HomelabDS Theme — para FusionPBX
+   Substitui a identidade visual do FusionPBX
+   ============================================ */
+
+/* Paleta HomelabDS */
+:root {
+  --hl-primary: #00D4AA;
+  --hl-primary-dark: #009B7D;
+  --hl-secondary: #1A1A2E;
+  --hl-accent: #FF6B6B;
+  --hl-surface: #F8F9FA;
+  --hl-text: #2D3436;
+  --hl-text-light: #636E72;
+}
+
+/* ========== TOP BAR / HEADER ========== */
+.navbar, .navbar-inverse {
+  background: var(--hl-secondary) !important;
+  border: none !important;
+}
+
+.navbar-inverse .navbar-brand {
+  color: #fff !important;
+  font-weight: 700 !important;
+  font-size: 18px !important;
+  letter-spacing: 1px !important;
+}
+
+.navbar-inverse .navbar-nav > li > a {
+  color: rgba(255,255,255,0.8) !important;
+}
+
+.navbar-inverse .navbar-nav > li > a:hover,
+.navbar-inverse .navbar-nav > .active > a {
+  color: var(--hl-primary) !important;
+  background: transparent !important;
+}
+
+.navbar-brand:before {
+  content: "◆ " !important;
+  color: var(--hl-primary) !important;
+}
+
+/* ========== BUTTONS ========== */
+.btn-primary {
+  background: var(--hl-primary) !important;
+  border-color: var(--hl-primary) !important;
+  color: #fff !important;
+}
+
+.btn-primary:hover {
+  background: var(--hl-primary-dark) !important;
+  border-color: var(--hl-primary-dark) !important;
+}
+
+.btn-danger {
+  background: var(--hl-accent) !important;
+  border-color: var(--hl-accent) !important;
+}
+
+/* ========== LINKS ========== */
+a {
+  color: var(--hl-primary-dark) !important;
+}
+
+a:hover {
+  color: var(--hl-primary) !important;
+}
+
+/* ========== PANELS / CARDS ========== */
+.panel {
+  border-color: #e8e8e8 !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
+}
+
+.panel-heading {
+  background: var(--hl-surface) !important;
+  border-bottom: 2px solid var(--hl-primary) !important;
+  font-weight: 600 !important;
+}
+
+.panel-primary > .panel-heading {
+  background: var(--hl-secondary) !important;
+  color: #fff !important;
+  border-bottom: 3px solid var(--hl-primary) !important;
+}
+
+/* ========== TABLES ========== */
+.table > thead > tr > th {
+  border-bottom: 2px solid var(--hl-primary) !important;
+  color: var(--hl-secondary) !important;
+  font-weight: 600 !important;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+  background: var(--hl-surface) !important;
+}
+
+/* ========== FORMS ========== */
+.form-control:focus {
+  border-color: var(--hl-primary) !important;
+  box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.15) !important;
+}
+
+/* ========== LABELS / BADGES ========== */
+.label-primary {
+  background: var(--hl-primary) !important;
+}
+
+.label-success {
+  background: var(--hl-primary-dark) !important;
+}
+
+.label-danger {
+  background: var(--hl-accent) !important;
+}
+
+/* ========== SIDEBAR / MENU ========== */
+.sidebar-menu > li > a {
+  color: var(--hl-text) !important;
+}
+
+.sidebar-menu > li.active > a {
+  border-left: 3px solid var(--hl-primary) !important;
+  color: var(--hl-primary-dark) !important;
+  font-weight: 600 !important;
+}
+
+/* ========== LOGIN PAGE ========== */
+body.login-page {
+  background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%) !important;
+}
+
+.login-page .login-box-body {
+  background: #fff !important;
+  border-radius: 8px !important;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
+  border-top: 4px solid var(--hl-primary) !important;
+}
+
+.login-page .login-logo h1 {
+  font-size: 28px !important;
+  font-weight: 700 !important;
+}
+
+.login-page .login-logo h1:before {
+  content: "◆ " !important;
+  color: var(--hl-primary) !important;
+}
+
+/* ========== FOOTER ========== */
+.main-footer {
+  border-top: 2px solid var(--hl-primary) !important;
+  color: var(--hl-text-light) !important;
+}
+
+/* ========== PAGINATION ========== */
+.pagination > .active > a {
+  background: var(--hl-primary) !important;
+  border-color: var(--hl-primary) !important;
+}
+
+.pagination > li > a:hover {
+  color: var(--hl-primary-dark) !important;
+}
+
+/* ========== ALERTS ========== */
+.alert-success {
+  border-left: 4px solid var(--hl-primary-dark) !important;
+}
+
+.alert-danger {
+  border-left: 4px solid var(--hl-accent) !important;
+}