Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update app branding with new icono and titulosib logos

Browse Source
This commit is contained in:
Johan Samudio
2026-03-09 12:59:10 -05:00
parent d5763cd6d6
commit 8c0e683b70
6 changed files with 68 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/AppHeader.vue
View File

@ -87,7 +87,9 @@
</Transition>
</div>
<h1 class="header-title" @click="goToHome">{{ t('header.title') }}</h1>
<div class="header-title-container" @click="goToHome">
<img src="/titulosib.png" alt="SIB Logo" class="header-logo-img" />
</div>
<div class="header-actions">
<!-- Side Menu handles all actions for a cleaner UI -->
@ -205,27 +207,28 @@ const handleLogout = () => {
}
}
.header-title {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--text-primary);
margin: 0;
text-align: center;
.header-title-container {
display: flex;
align-items: center;
justify-content: center;
grid-column: 2;
cursor: pointer;
height: 40px;
transition: all 0.3s ease;
text-transform: uppercase;
}
:global(.dark) .header-title {
color: var(--active-color);
text-shadow: 0 0 15px rgba(254, 231, 21, 0.3);
.header-logo-img {
height: 100%;
max-width: 140px;
object-fit: contain;
}
.header-title:hover {
transform: scale(1.02);
letter-spacing: 0.05em;
:global(.dark) .header-logo-img {
filter: drop-shadow(0 0 10px rgba(254, 231, 21, 0.2));
}
.header-title-container:hover {
transform: scale(1.05);
}

15
frontend/src/views/AdminPanel.vue
View File

@ -3,7 +3,8 @@
<div class="header-section">
<div class="badge">SISTEMA CENTRAL</div>
<h1>Panel de Control</h1>
<p class="subtitle">Ecosistema Administrativo SIB</p>
<img src="/titulosib.png" alt="SIB Logo" class="admin-brand-header" />
<p class="subtitle">Ecosistema Administrativo Central</p>
</div>
<div class="dashboard-sections">
@ -146,12 +147,20 @@ h1 {
margin: 0;
}
.admin-brand-header {
height: 50px;
max-width: 200px;
margin: 0 auto 10px;
object-fit: contain;
}
.subtitle {
color: var(--text-secondary);
font-size: 1rem;
font-size: 0.9rem;
font-weight: 500;
margin-top: 6px;
margin-top: 2px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.dashboard-sections {

18
frontend/src/views/AuthView.vue
View File

@ -45,8 +45,8 @@ const toggleAuth = () => {
<div class="auth-content-grid">
<!-- Branding Side (Desktop only) -->
<div class="branding-section">
<img src="/sib.png" alt="SIB Logo" class="brand-logo" />
<h1 class="brand-title">SIB</h1>
<img src="/icono.png" alt="SIB Icon" class="brand-logo" />
<img src="/titulosib.png" alt="SIB Logo" class="brand-title-img" />
<p class="brand-tagline">{{ t('auth.brandingSubtitle') }}</p>
<div class="brand-features">
<div class="feature-item">
@ -69,7 +69,7 @@ const toggleAuth = () => {
<div class="glass-card auth-card">
<!-- Mobile Logo -->
<div class="mobile-header">
<img src="/sib.png" alt="SIB Logo" class="mobile-logo" />
<img src="/titulosib.png" alt="SIB Logo" class="mobile-logo" />
</div>
<!-- Tab Selector -->
@ -192,15 +192,9 @@ const toggleAuth = () => {
filter: drop-shadow(0 0 20px rgba(254, 231, 21, 0.4));
}
.brand-title {
font-size: 5rem;
font-weight: 800;
margin: 0;
letter-spacing: -0.04em;
background: linear-gradient(to right, #fff, var(--active-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
.brand-title-img {
width: 280px;
filter: drop-shadow(0 0 15px rgba(254, 231, 21, 0.3));
}
.brand-tagline {

2
frontend/src/views/RoutesView.vue
View File

@ -85,7 +85,7 @@ const correlimientos = computed(() => {
<button @click="router.back()" class="size-10 flex items-center justify-center rounded-full bg-slate-100 dark:bg-card-dark text-slate-600 dark:text-gray-300 active:scale-95 transition-transform">
<span class="material-icons text-[20px]">arrow_back</span>
</button>
<h1 class="text-xl font-extrabold tracking-tight text-primary uppercase italic">SIB</h1>
<img src="/titulosib.png" alt="SIB Logo" class="h-6 object-contain" />
<div class="size-10"></div>
</div>

6
frontend/src/views/SplashScreen.vue
View File

@ -4,7 +4,7 @@
<!-- Logo with animation -->
<div class="logo-container" :class="{ 'logo-visible': logoVisible }">
<div class="logo-box">
<img src="/icon-192.png" alt="SIB" class="logo-icon" />
<img src="/icono.png" alt="SIB" class="logo-icon" />
</div>
</div>
@ -147,8 +147,8 @@ async function performInitializationTasks() {
.logo-box {
width: 140px;
height: 140px;
background-color: #fee715;
border-radius: 28px;
background-color: transparent;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;

32
frontend/src/views/StrategicAnalytics.vue
View File

@ -8,8 +8,11 @@
</button>
<div class="badge">INTELIGENCIA ESTRATÉGICA</div>
</div>
<h1>Centro de Operaciones</h1>
<p class="subtitle">Análisis segmentado de rendimiento SIB</p>
<div class="analytics-header-branding">
<img src="/titulosib.png" alt="SIB Logo" class="analytics-logo" />
<h1>Centro de Operaciones</h1>
</div>
<p class="subtitle">Análisis estratégico y rendimiento de red</p>
</div>
<!-- TACTICAL TAB SELECTOR -->
@ -631,8 +634,29 @@ onMounted(async () => {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(254, 231, 21, 0.3);
}
h1 { font-size: 2.2rem; font-weight: 900; margin: 0; }
.subtitle { color: var(--text-secondary); margin-top: 6px; }
.analytics-header-branding {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 2px;
}
.analytics-logo {
height: 44px;
object-fit: contain;
}
h1 { font-size: 2.2rem; font-weight: 900; margin: 0; letter-spacing: -0.04em; }
.subtitle {
color: var(--text-secondary);
margin-top: 4px;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.1em;
font-weight: 600;
}
/* TABS */
.tabs-control { display: flex; gap: 12px; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }