feat: add Customer Portal (Área do Cliente & Central de Acessos) with 23 preloaded items and WhatsApp export
This commit is contained in:
+470
@@ -2147,4 +2147,474 @@ body {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
ÁREA DO CLIENTE & CENTRAL DE ACESSOS STYLES
|
||||
========================================================================= */
|
||||
|
||||
.brand-prefix {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.brand-sep {
|
||||
color: #475569;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.brand-icon-cert {
|
||||
background: linear-gradient(135deg, #0ea5e9, #2563eb);
|
||||
}
|
||||
|
||||
.brand-icon-wpp {
|
||||
background: linear-gradient(135deg, #059669, #10b981);
|
||||
}
|
||||
|
||||
.brand-icon-portal {
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
}
|
||||
|
||||
.app-nav-btn-portal {
|
||||
color: #c084fc !important;
|
||||
}
|
||||
|
||||
.pill-portal {
|
||||
background-color: rgba(168, 85, 247, 0.2) !important;
|
||||
color: #c084fc !important;
|
||||
}
|
||||
|
||||
/* Portal Container */
|
||||
.portal-container {
|
||||
width: 100%;
|
||||
max-width: 1260px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Header Card */
|
||||
.portal-header-card {
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem 1.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.25rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.portal-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.portal-header-icon-box {
|
||||
background: linear-gradient(135deg, #6366f1, #a855f7);
|
||||
color: white;
|
||||
padding: 0.65rem;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
|
||||
}
|
||||
|
||||
.portal-header-title {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.portal-header-sub {
|
||||
font-size: 0.85rem;
|
||||
color: #94a3b8;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.portal-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-whatsapp-export {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: linear-gradient(135deg, #059669, #10b981);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.65rem 1.25rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.btn-whatsapp-export:hover {
|
||||
background: linear-gradient(135deg, #047857, #059669);
|
||||
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-portal-new {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.65rem 1.25rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.btn-portal-new:hover {
|
||||
background: linear-gradient(135deg, #4f46e5, #7c3aed);
|
||||
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.portal-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.portal-search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
padding: 0.6rem 1rem;
|
||||
min-width: 320px;
|
||||
flex: 1;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.portal-search-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-clear-search {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.btn-clear-search:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.portal-tools-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-portal-tool {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
padding: 0.5rem 0.85rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-portal-tool:hover {
|
||||
background-color: var(--bg-card-hover);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
/* Categories Bar */
|
||||
.portal-categories-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.portal-cat-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
padding: 0.5rem 0.95rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.825rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.portal-cat-btn:hover {
|
||||
background-color: var(--bg-card-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.portal-cat-active {
|
||||
background-color: rgba(99, 102, 241, 0.15) !important;
|
||||
border-color: rgba(99, 102, 241, 0.4) !important;
|
||||
color: #a5b4fc !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cat-count-badge {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.portal-cat-active .cat-count-badge {
|
||||
background-color: #6366f1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Cards Grid */
|
||||
.portal-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.portal-card {
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 14px;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.portal-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
background-color: rgba(26, 36, 58, 0.6);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.portal-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.portal-title-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.portal-item-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: #f8fafc;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.portal-item-desc {
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
margin-top: 0.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.portal-card-actions-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.btn-portal-icon-action {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.35rem;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-portal-icon-action:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-portal-delete:hover {
|
||||
background-color: rgba(244, 63, 94, 0.15);
|
||||
color: #fb7185;
|
||||
}
|
||||
|
||||
/* Links Area */
|
||||
.portal-links-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.portal-url-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(14, 165, 233, 0.08);
|
||||
border: 1px solid rgba(14, 165, 233, 0.25);
|
||||
color: #38bdf8;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.portal-url-btn:hover {
|
||||
background: rgba(14, 165, 233, 0.16);
|
||||
border-color: #38bdf8;
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.portal-url-secondary {
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.portal-url-secondary:hover {
|
||||
background: rgba(16, 185, 129, 0.16);
|
||||
border-color: #34d399;
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
.portal-url-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.portal-ext-icon {
|
||||
flex-shrink: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Credentials Pills */
|
||||
.portal-credentials-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: auto;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.portal-cred-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background-color: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.35rem 0.65rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.portal-cred-pill:hover {
|
||||
border-color: var(--border-hover);
|
||||
background-color: var(--bg-card-hover);
|
||||
}
|
||||
|
||||
.portal-cred-label {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.portal-cred-val {
|
||||
color: #f8fafc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-toggle-cred-pw {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.15rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-toggle-cred-pw:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.portal-empty-state {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 5rem 1.5rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.portal-empty-state h3 {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.portal-empty-state p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user