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

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); }