VibeChat - Sell Project

Descripción General del Proyecto VibeChat es un prototipo frontend de red social y aplicación de chat interactiva de alta gama, diseñado con una estética moderna de inspiración anime/tecnológica. Está dirigido específicamente al entorno estudiantil y juvenil. Este desarrollo resuelve la necesidad de contar con un espacio digital comunitario, fluido y gamificado. Está construido con un diseño visual impecable y estructurado en HTML5, CSS3 moderno (Flexbox, gradientes, sombras) y JavaScript puro, lo que garantiza un código limpio, ligero y fácil de adaptar o escalar hacia un backend real (como Firebase o Supabase). ⚙️ Desglose Completo de Funciones del Prototipo El sistema cuenta con 5 pantallas principales completamente interactivas que simulan el comportamiento de una app móvil nativa dentro de un marco de teléfono estético: Pantalla de Inicio de Sesión (Login): Interfaz Oscura Estilizada: Fondo con degradados profundos y efectos visuales inmersivos. Autenticación Simulada: Campos de texto interactivos para usuario/correo institucional y contraseña con efectos de enfoque (focus). Acceso Directo: Botón principal con animación táctil para ingresar al feed de la comunidad. Navegación al Registro: Botón secundario contorneado para alternar instantáneamente hacia la pantalla de creación de cuentas. Pantalla de Registro de Usuario (Sign Up): Selector de Avatar Interactivo: Un panel dinámico con iconos de avatares estilo anime/emojis (🦊, 🐱, 🤖, ⚡) que el usuario puede seleccionar, aplicando efectos visuales de selección en tiempo real. Formulario Completo: Campos para nombre completo, correo institucional y contraseña con diseño limpio sobre fondo claro. Guardado de Perfil: Al registrarse, el avatar y los datos seleccionados se actualizan automáticamente en la pantalla de perfil del usuario. Feed Principal de la Comunidad ("VibeFeed"): Barra Superior de "Vibes" (Historias de Estudiantes): Sección deslizante horizontal simulando historias con avatares personalizados, indicadores de estado flotantes en tiempo real (en línea, ocupado, en clase) y alertas emergentes (toast) al hacer clic en los estados de otros usuarios. Listado Dinámico de Chats: Tarjetas interactivas organizadas para chats grupales y directos (ej. Grupo de Física, chats con compañeros, canales de memes) que incluyen iconos distintivos, vista previa del último mensaje, remitente y marcas de tiempo. Control de Sesión: Botón de apagado/cierre de sesión integrado de forma sutil en la cabecera. Ventana de Chat en Vivo: Cabecera Dinámica: Muestra el título activo del grupo o chat seleccionado y un botón de opciones adicionales. Burbujas de Mensajes Diferenciadas: Distinción visual clara entre mensajes recibidos (fondo blanco con sombra sutil y nombre del remitente) y mensajes enviados (con degradado morado/fucsia característico). Simulación de Respuesta Automática: Al enviar un mensaje de texto desde la barra inferior con botón de envío circular, el sistema procesa el texto, lo añade al historial, desplaza el chat automáticamente hacia abajo y genera una respuesta automática inteligente del bot o sistema tras un breve retraso. Soporte para Teclado: Funcionalidad habilitada para enviar mensajes presionando la tecla Enter. Pantalla de Perfil de Usuario: Tarjeta de Identidad Personalizada: Muestra de forma dinámica el avatar seleccionado por el usuario, su nombre completo y una insignia de rango o nivel ("Estudiante Nivel 5 ⚡"). Panel de Estadísticas (Stats Grid): Cuadros de métricas integrados que muestran datos simulados de actividad del usuario (como Puntos Vibe y cantidad de Amigos). Gestión de Sesión: Botón dedicado para cerrar sesión de manera segura y regresar a la pantalla de autenticación. Barra de Navegación Inferior (Tab Bar) y Sistema de Notificaciones: Navegación Fluida: Barra fija en la parte inferior con pestañas interactivas (Chats y Perfil) que cambian de color e intensidad de manera activa según la sección en la que se encuentre el usuario. Notificaciones tipo Toast: Sistema de alertas flotantes elegantes que aparecen en la parte superior para confirmar acciones (éxito al iniciar sesión, alertas de estados, etc.) sin interrumpir la experiencia visual