diff --git a/homelabds-brand/README.md b/homelabds-brand/README.md new file mode 100644 index 0000000..2feee91 --- /dev/null +++ b/homelabds-brand/README.md @@ -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 +``` diff --git a/homelabds-brand/logo/favicon-homelabds.svg b/homelabds-brand/logo/favicon-homelabds.svg new file mode 100644 index 0000000..b793f1e --- /dev/null +++ b/homelabds-brand/logo/favicon-homelabds.svg @@ -0,0 +1,11 @@ + + + + + + + + + + H + diff --git a/homelabds-brand/logo/logo-homelabds.svg b/homelabds-brand/logo/logo-homelabds.svg new file mode 100644 index 0000000..2a9ec62 --- /dev/null +++ b/homelabds-brand/logo/logo-homelabds.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + H + + + + + HomelabDS + + + INFRAESTRUTURA & TECNOLOGIA + + diff --git a/homelabds-brand/theme-fusionpbx/homelabds-theme.css b/homelabds-brand/theme-fusionpbx/homelabds-theme.css new file mode 100644 index 0000000..7f6d0af --- /dev/null +++ b/homelabds-brand/theme-fusionpbx/homelabds-theme.css @@ -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; +}