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

feat: redesign Login/Register with HUD aesthetic and Google Auth integration

Browse Source
This commit is contained in:
Johan Samudio
2026-02-22 15:31:02 -05:00
parent c6b97c4188
commit 33154169c8
12 changed files with 1116 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,78 +11,134 @@ const toggleAuth = () => {
</script>
<template>
<div class="auth-view">
<div class="auth-box">
<div class="auth-header">
<img src="/icon-192.png" alt="SIBU Logo" class="logo" />
<h1 class="brand-name">SIBU</h1>
<p class="brand-tagline">Moviendo a tu comunidad</p>
</div>
<div class="auth-view-hud bg-[#0F1115] min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
<!-- HUD Background Elements -->
<div class="absolute inset-0 pointer-events-none">
<div class="scanning-lines"></div>
<div class="hud-corner top-left"></div>
<div class="hud-corner top-right"></div>
<div class="hud-corner bottom-left"></div>
<div class="hud-corner bottom-right"></div>
<transition name="fade" mode="out-in">
<LoginForm v-if="isLogin" :on-toggle="toggleAuth" />
<RegisterForm v-else :on-toggle="toggleAuth" :on-success="() => isLogin = true" />
</transition>
<!-- Animated HUD Circles -->
<div class="hud-circle opacity-10"></div>
<div class="hud-circle-inner opacity-5"></div>
</div>
<div class="auth-container relative z-10 w-full max-w-md">
<!-- SIBU Branding -->
<div class="text-center mb-10">
<h1 class="text-5xl font-black italic tracking-tighter text-primary mb-2">SIBU</h1>
<div class="flex items-center justify-center gap-2">
<span class="h-px w-8 bg-primary/30"></span>
<p class="text-[10px] font-bold text-primary tracking-[0.3em] uppercase">Auth System v2.0</p>
<span class="h-px w-8 bg-primary/30"></span>
</div>
</div>
<!-- Auth Box -->
<div class="bg-[#1C1F26]/60 backdrop-blur-xl rounded-[2.5rem] p-8 border border-white/5 shadow-2xl relative">
<!-- Floating HUD bracket -->
<div class="absolute -top-4 -left-4 size-12 border-t-2 border-l-2 border-primary/40 rounded-tl-2xl"></div>
<div class="absolute -bottom-4 -right-4 size-12 border-b-2 border-r-2 border-primary/40 rounded-br-2xl"></div>
<transition name="hud-fade" mode="out-in">
<div :key="isLogin ? 'login' : 'register'">
<div class="mb-8">
<h2 class="text-2xl font-black text-white mb-1">
{{ isLogin ? 'SNC: INICIAR SESIÓN' : 'SNC: REGISTRO' }}
</h2>
<p class="text-xs text-slate-500 font-bold uppercase tracking-wider">
{{ isLogin ? 'Acceso autorizado requerido' : 'Crear nuevas credenciales de acceso' }}
</p>
</div>
<LoginForm v-if="isLogin" @toggle="toggleAuth" />
<RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
</div>
</transition>
</div>
<!-- Footer Help -->
<div class="mt-8 text-center">
<p class="text-[10px] font-bold text-slate-600 uppercase tracking-widest">
Encriptación End-to-End • SIBU Cloud Services
</p>
</div>
</div>
</div>
</template>
<style scoped>
.auth-view {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #42b983 0%, #2c3e50 100%);
padding: 20px;
.auth-view-hud {
font-family: 'Plus Jakarta Sans', 'Space Grotesk', sans-serif;
}
.auth-box {
background: var(--card-bg);
width: 100%;
max-width: 440px;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
.scanning-lines {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 50%,
rgba(254, 231, 21, 0.02) 50%
);
background-size: 100% 4px;
animation: scan 10s linear infinite;
}
.auth-header {
text-align: center;
margin-bottom: 32px;
@keyframes scan {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
.logo {
width: 80px;
height: 80px;
margin-bottom: 12px;
.hud-corner {
position: absolute;
width: 40px;
height: 40px;
border-color: rgba(254, 231, 21, 0.2);
border-style: solid;
}
.brand-name {
font-size: 28px;
font-weight: 800;
color: var(--text-primary);
margin: 0;
.top-left { top: 40px; left: 40px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.top-right { top: 40px; right: 40px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.bottom-left { bottom: 40px; left: 40px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.bottom-right { bottom: 40px; right: 40px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.hud-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
border: 1px dashed rgba(254, 231, 21, 0.3);
border-radius: 50%;
animation: spin 60s linear infinite;
}
.brand-tagline {
font-size: 14px;
color: var(--text-secondary);
margin: 4px 0 0 0;
.hud-circle-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border: 40px double rgba(254, 231, 21, 0.2);
border-radius: 50%;
}
/* Animations */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease, transform 0.3s ease;
@keyframes spin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.fade-enter-from {
.hud-fade-enter-active, .hud-fade-leave-active {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hud-fade-enter-from, .hud-fade-leave-to {
opacity: 0;
transform: translateY(10px);
}
.fade-leave-to {
opacity: 0;
transform: translateY(-10px);
transform: scale(0.95);
filter: blur(10px);
}
</style>