145 lines
4.4 KiB
Vue
145 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import LoginForm from '@/components/auth/LoginForm.vue'
|
|
import RegisterForm from '@/components/auth/RegisterForm.vue'
|
|
|
|
const isLogin = ref(true)
|
|
|
|
const toggleAuth = () => {
|
|
isLogin.value = !isLogin.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|
|
|
|
<!-- 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-hud {
|
|
font-family: 'Plus Jakarta Sans', 'Space Grotesk', sans-serif;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@keyframes scan {
|
|
from { background-position: 0 0; }
|
|
to { background-position: 0 100%; }
|
|
}
|
|
|
|
.hud-corner {
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-color: rgba(254, 231, 21, 0.2);
|
|
border-style: solid;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: translate(-50%, -50%) rotate(0deg); }
|
|
to { transform: translate(-50%, -50%) rotate(360deg); }
|
|
}
|
|
|
|
.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: scale(0.95);
|
|
filter: blur(10px);
|
|
}
|
|
</style>
|