Horizon - Sistema de Autenticación

Sistema de login y registro moderno con diseño glassmorphism y animaciones de partículas para aplicaciones FinTech.

🚀 Características

• Diseño Glassmorphism: Tarjetas translúcidas con efecto de cristal
• Animación de Fondo: Red de partículas animadas con Canvas HTML
• Responsive Design: Adaptable a todos los dispositivos
• Validación de Formularios: Validación en tiempo real
• Tema FinTech Dark: Paleta de colores profesional
• Accesibilidad: Cumple con estándares de accesibilidad web

📁 Estructura del Proyecto

Horizon-Login/
├── assets/                  # Recursos estáticos
│   ├── icons/              # Iconos y logos
│   │   ├── icon.png        # Logo principal
│   │   └── README.md       # Documentación de iconos
│   ├── images/             # Imágenes del proyecto
│   ├── fonts/              # Fuentes personalizadas
│   └── README.md           # Documentación de assets
├── css/                    # Estilos
│   └── styles.css          # Estilos principales
├── js/                     # JavaScript
│   ├── background-animation.js  # Animación de partículas
│   └── form-handler.js     # Funcionalidad de formularios
├── pages/                  # Páginas de la aplicación
│   ├── portfolios.html     # Gestión de portafolios
│   ├── create-portfolio.html # Creación de portafolios
│   └── assets.html         # Gestión de activos
├── index.html              # Página de login (entrada principal)
├── register.html           # Página de registro
├── package.json            # Dependencias npm
├── tailwind.config.js      # Configuración Tailwind
├── postcss.config.js       # Configuración PostCSS
└── README.md               # Este archivo

🎨 Paleta de Colores

Financial Tech Dark Theme:

• Verde azulado oscuro: #0A192F
• Azul petróleo: #003B46
• Verde menta: #7DF9FF
• Dorado champán: #D4AF37
• Gris claro: #E1E1E1
• Gris titanio: #8A9AAB

⚡ Instalación y Uso

Prerrequisitos

• Node.js (opcional, para desarrollo)
• Navegador web moderno

Instalación

1. Clona el repositorio:

   git clone <repository-url>
   cd Horizon-Login

2. Instala dependencias (opcional):

   npm install

3. Abre en navegador:

   • Abre index.html directamente en tu navegador
   • O usa un servidor local para desarrollo

Scripts de Desarrollo

# Compilar CSS (si usas build process)
npm run build-css

# Modo watch para desarrollo
npm run watch-css

🖥️ Páginas

Login (index.html)

• Formulario de inicio de sesión
• Toggle de visibilidad de contraseña
• Checkbox "Recordarme"
• Botones de login social (Google, Microsoft, LinkedIn)
• Enlace a página de registro

Registro (register.html)

• Formulario de registro completo
• Validación de contraseñas coincidentes
• Campos: Nombre, Email, Contraseña, Fecha de nacimiento, Género
• Términos y condiciones
• Scroll container para formularios largos
• Redirección automática a portafolios tras registro exitoso

Portafolios (pages/portfolios.html)

• Vista principal de gestión de portafolios
• Lista de portafolios existentes con estadísticas
• Resumen de valor total e indicadores de rendimiento
• Acceso directo a gestión de activos
• Creación de nuevos portafolios

Crear Portafolio (pages/create-portfolio.html)

• Formulario para crear nuevos portafolios
• Campos: Nombre y descripción opcional
• Plantillas predefinidas (Tech, Dividendos, Cripto)
• Validación y contadores de caracteres
• Redirección automática a gestión de activos

Gestión de Activos (pages/assets.html)

• Interface completa para gestionar activos del portafolio
• Buscador de activos con filtrado avanzado
• Cálculo automático de valor total
• Validación de formularios
• Persistencia de datos del portafolio

🔧 Tecnologías

• HTML5: Estructura semántica
• Tailwind CSS: Framework de utilidades CSS
• Vanilla JavaScript: Funcionalidad sin dependencias
• Canvas API: Animaciones de partículas
• CSS3: Efectos glassmorphism y transiciones

📱 Características Técnicas

Animación de Fondo

• Partículas flotantes conectadas por líneas
• Respuesta a redimensionamiento de ventana
• Optimizado para rendimiento
• Configuración personalizable

Formularios

• Validación en tiempo real
• Estados visuales de focus/hover
• Accesibilidad con labels y ARIA
• Prevención de envío con errores

Responsive Design

• Mobile-first approach
• Breakpoints optimizados
• Contenido adaptable
• Touch-friendly interactions

🎯 Personalización

Colores

Modifica las variables en css/styles.css o tailwind.config.js

Animaciones

Ajusta parámetros en js/background-animation.js:

particleConfig = {
    count: 80,        // Número de partículas
    speed: 0.3,       // Velocidad de movimiento
    maxRadius: 3,     // Radio máximo
    lineDistance: 150 // Distancia de conexión
}

Formularios

Personaliza validaciones en js/form-handler.js

🌐 Navegadores Soportados

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver LICENSE para más detalles.

🤝 Contribución

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📞 Soporte

Para soporte o preguntas, contacta:

• Email: support@horizon-app.com
• Issues: GitHub Issues page

---

Horizon - Diseñado para el futuro de las finanzas digitales 🚀