From 155bd60b5f230dd1feeadcaacbbb014be627778b Mon Sep 17 00:00:00 2001 From: Blxckbxll24 Date: Wed, 26 Aug 2026 16:05:36 -0500 Subject: [PATCH] se mejora el login --- src/App.tsx | 2 +- src/index.css | 64 +++++-- src/views/LoginView.tsx | 375 ++++++++++++++++--------------------- src/views/RegisterView.tsx | 323 +++++++++++++++----------------- 4 files changed, 366 insertions(+), 398 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 76bf989..109126e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -96,7 +96,7 @@ export function App() { return (
- + {/* Toast notification banner */} {toastMessage && (
diff --git a/src/index.css b/src/index.css index c0afe3b..d6f45c6 100644 --- a/src/index.css +++ b/src/index.css @@ -26,30 +26,39 @@ background: #475569; } -/* Cart Running Animation */ -@keyframes cart-run { +/* Full-Screen Crossing Flying Spaceship Animation */ +@keyframes float-spaceship { 0% { - transform: translateX(0) rotate(0deg) translateY(0); + transform: translate(-10vw, 68vh) rotate(23deg) scale(0.65); + opacity: 0.1; } - 20% { - transform: translateX(3px) rotate(-10deg) translateY(-2px); + + 15% { + opacity: 0.85; } - 40% { - transform: translateX(1px) rotate(-5deg) translateY(1px); + + 35% { + transform: translate(30vw, 45vh) rotate(25deg) scale(0.85); + opacity: 0.95; } - 60% { - transform: translateX(4px) rotate(-12deg) translateY(-2px); + + 65% { + transform: translate(65vw, 25vh) rotate(22deg) scale(1); + opacity: 0.95; } - 80% { - transform: translateX(2px) rotate(-8deg) translateY(0px); + + 85% { + opacity: 0.85; } + 100% { - transform: translateX(0) rotate(0deg) translateY(0); + transform: translate(110vw, 5vh) rotate(24deg) scale(0.7); + opacity: 0.1; } } -.animate-cart-run { - animation: cart-run 0.5s ease-in-out infinite; +.animate-spaceship { + animation: float-spaceship 20s cubic-bezier(0.35, 0, 0.25, 1) infinite; } /* Speed Streaks for Cart */ @@ -58,10 +67,12 @@ opacity: 0; transform: translateX(0) scaleX(0.2); } + 50% { opacity: 0.8; transform: translateX(-8px) scaleX(1); } + 100% { opacity: 0; transform: translateX(-16px) scaleX(0); @@ -77,23 +88,42 @@ pointer-events: none; } -.group-hover\\:animate-cart-run:hover .speed-line-1 { +.group:hover .speed-line-1 { animation: speed-streak 0.6s infinite linear; top: 30%; right: 110%; width: 12px; } -.group-hover\\:animate-cart-run:hover .speed-line-2 { +.group:hover .speed-line-2 { animation: speed-streak 0.5s infinite linear 0.2s; top: 60%; right: 100%; width: 8px; } -.group-hover\\:animate-cart-run:hover .speed-line-3 { +.group:hover .speed-line-3 { animation: speed-streak 0.7s infinite linear 0.4s; bottom: 10%; right: 120%; width: 14px; +} + +/* Twinkling Star Particles Animation */ +@keyframes star-twinkle { + + 0%, + 100% { + opacity: 0.15; + transform: scale(0.65); + } + + 50% { + opacity: 0.95; + transform: scale(1.3); + } +} + +.animate-twinkle { + animation: star-twinkle 3s ease-in-out infinite alternate; } \ No newline at end of file diff --git a/src/views/LoginView.tsx b/src/views/LoginView.tsx index 88f5711..f8c108c 100644 --- a/src/views/LoginView.tsx +++ b/src/views/LoginView.tsx @@ -1,18 +1,15 @@ import React, { useState } from 'react'; import { useNavigate, Link } from 'react-router'; import { BrandLogo } from '../components/common/BrandLogo'; -import { - FiMail, - FiLock, - FiEye, - FiEyeOff, - FiArrowRight, +import { + FiMail, + FiLock, + FiEye, + FiEyeOff, + FiArrowRight, FiArrowLeft, - FiStar, - FiCheckCircle, - FiBookOpen, - FiAward, - FiUsers + FiCheckCircle, + FiLoader } from 'react-icons/fi'; import type { User } from '../types/course'; @@ -27,223 +24,173 @@ export const LoginView: React.FC = ({ onShowToast, onLogin }) => const [password, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [rememberMe, setRememberMe] = useState(true); + const [isLoading, setIsLoading] = useState(false); - const handleMockLogin = (name: string, role: 'buyer' | 'seller', avatarUrl?: string) => { - const mockUser: User = { - id: Math.random().toString(36).substr(2, 9), - name, - email: email || `${role}@rycourses.com`, - role, - avatar: avatarUrl || 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80', - }; - onLogin(mockUser); - onShowToast(`¡Bienvenido de nuevo, ${name}!`); - navigate(role === 'seller' ? '/seller' : '/courses'); - }; + const isValidEmail = email.includes('@') && email.includes('.'); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if (email && password) { - handleMockLogin('Usuario Estudiante', 'buyer'); - } + if (!email || !password) return; + + setIsLoading(true); + + setTimeout(() => { + let derivedName = 'Usuario RyCourses'; + if (email.includes('@')) { + const rawName = email.split('@')[0]; + derivedName = rawName + .replace(/[._-]/g, ' ') + .replace(/\b\w/g, (char) => char.toUpperCase()); + } + + const isSeller = email.toLowerCase().includes('instructor') || email.toLowerCase().includes('seller'); + const role: 'buyer' | 'seller' = isSeller ? 'seller' : 'buyer'; + + const userObj: User = { + id: Math.random().toString(36).substring(2, 11), + name: derivedName, + email, + role, + avatar: role === 'seller' + ? 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&auto=format&fit=crop&q=80' + : 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80', + }; + + onLogin(userObj); + onShowToast(`¡Bienvenido de nuevo, ${derivedName}!`); + setIsLoading(false); + navigate(role === 'seller' ? '/seller' : '/courses'); + }, 450); }; return ( -
- - {/* Ambient background glow */} -
-
+
- {/* ============================================================== */} - {/* LEFT COLUMN: BRANDING & GRAPHIC BANNER */} - {/* ============================================================== */} -
- - {/* Decorative Grid and Ambient Lights */} -
-
-
+ {/* Top-Right Background Radial Gradient Glow (RyCourses Cyan & Blue Brand Colors) */} +
+
+
- {/* Brand Header Banner */} -
-
- -
- -
- - +1,200 Cursos Disponibles -
-
+ {/* Interactive Background Atmosphere: Twinkling Star Particles & Flying Space Shuttle */} +
- {/* Hero Illustration Box */} -
- - {/* Main Visual Frame */} -
- - {/* Embedded 3D Learning Image */} -
- Aprende y crece en RyCourses -
-
+ {/* Twinkling Star Field */} +
+
+
+
+
+
+
+
+
+
- {/* Top Badge Overlay */} -
- - Aprende con Tecnologías Reales -
+ {/* Crossing Space Shuttle Rocket */} +
+ + {/* Plasma Rocket Flame Trail */} + - {/* Bottom Overlay Card */} -
-
-
-
- 🚀 -
-
-

- Aumenta tus habilidades profesionales -

-

- Cursos prácticos creados por mentores de la industria. -

-
-
+ {/* Main Rocket Fuselage Body */} + -
- - 4.9 / 5.0 -
-
-
+ {/* Nose Cone Tip */} + -
+ {/* Left Booster Fin */} + -
+ {/* Right Booster Fin */} + - {/* Feature Highlights Grid */} -
-
-
- -
-
-

Acceso De Por Vida

-

Estudia a tu propio ritmo

-
-
+ {/* Porthole Window 1 */} + + + -
-
- -
-
-

Certificados

-

Acredita tus proyectos

-
-
+ {/* Porthole Window 2 */} + + -
-
- -
-
-

+50,000 Alumnos

-

Comunidad global activa

-
-
+ + + + + + + + + + + + + +
- {/* ============================================================== */} - {/* RIGHT COLUMN: FORM & AUTHENTICATION */} - {/* ============================================================== */} -
- - {/* Top Header Navigation */} -
- - - - -
+ {/* Top Navigation Bar (Only Back Link, No duplicate logo) */} +
+ + + Volver al inicio + +
- - - Volver al inicio - -
+ {/* Main Login Card Container */} +
+
- {/* Login Form Main Container */} -
- - {/* Section Titles */} -
-
- - Tu Portal Educativo + {/* Subtle Top Border Gradient Accent */} +
+ + {/* Centered Brand Logo & Titles inside Form Card */} +
+
+
-

- ¡Hola de nuevo! 👋 +

+ Iniciar Sesión

- Ingresa tus credenciales para continuar tu ruta de aprendizaje + Ingresa tus credenciales para acceder a tu cuenta.

- {/* Quick Demo Access Bar */} -
-

- Acceso Rápido Demo: -

-
- - - -
-
- - {/* Login Form */} + {/* Form */}
- + {/* Email field */}
- +
+ + {isValidEmail && ( + + Formato válido + + )} +
- + setEmail(e.target.value)} - placeholder="estudiante@ejemplo.com" - className="w-full pl-10 pr-4 py-3 bg-slate-900/90 border border-slate-800 focus:border-cyan-500 rounded-xl text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/30 transition" + placeholder="nombre@empresa.com" + className="w-full pl-10 pr-4 py-2.5 bg-slate-950/80 border border-slate-800 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 rounded-xl text-xs text-white placeholder-slate-500 focus:outline-none transition-all" />
@@ -251,7 +198,7 @@ export const LoginView: React.FC = ({ onShowToast, onLogin }) => {/* Password field */}
- + setPassword(e.target.value)} placeholder="••••••••" - className="w-full pl-10 pr-10 py-3 bg-slate-900/90 border border-slate-800 focus:border-cyan-500 rounded-xl text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/30 transition" + className="w-full pl-10 pr-10 py-2.5 bg-slate-950/80 border border-slate-800 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 rounded-xl text-xs text-white placeholder-slate-500 focus:outline-none transition-all" /> @@ -279,47 +227,54 @@ export const LoginView: React.FC = ({ onShowToast, onLogin }) =>
{/* Remember Me */} -
+
{/* Submit Button */} {/* Register Callout */} -
- ¿Aún no eres miembro de RyCourses?{' '} - - Regístrate gratis aquí +
+ ¿Aún no tienes una cuenta?{' '} + + Regístrate aquí
+
- {/* Footer info */} -
- © 2026 RyCourses Platform. Todos los derechos reservados. -
- + {/* Footer info */} +
+ © 2026 RyCourses. Todos los derechos reservados.
); }; - - diff --git a/src/views/RegisterView.tsx b/src/views/RegisterView.tsx index 59dfa35..4971829 100644 --- a/src/views/RegisterView.tsx +++ b/src/views/RegisterView.tsx @@ -1,19 +1,16 @@ import React, { useState } from 'react'; import { useNavigate, Link } from 'react-router'; import { BrandLogo } from '../components/common/BrandLogo'; -import { - FiMail, - FiLock, - FiUser, - FiArrowRight, +import { + FiMail, + FiLock, + FiUser, + FiArrowRight, FiArrowLeft, - FiCheckCircle, - FiStar, - FiBookOpen, - FiAward, - FiUsers, + FiCheckCircle, FiEye, - FiEyeOff + FiEyeOff, + FiLoader } from 'react-icons/fi'; import { FaGraduationCap, FaChalkboardTeacher } from 'react-icons/fa'; import type { User } from '../types/course'; @@ -30,283 +27,269 @@ export const RegisterView: React.FC = ({ onShowToast, onLogin const [password, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [accountType, setAccountType] = useState<'buyer' | 'seller'>('buyer'); + const [isLoading, setIsLoading] = useState(false); + + const isValidEmail = email.includes('@') && email.includes('.'); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if (name && email && password) { + if (!name || !email || !password) return; + + setIsLoading(true); + setTimeout(() => { const newUser: User = { - id: Math.random().toString(36).substr(2, 9), + id: Math.random().toString(36).substring(2, 11), name, email, role: accountType, - avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80', + avatar: accountType === 'seller' + ? 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&auto=format&fit=crop&q=80' + : 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80', }; onLogin(newUser); onShowToast(`¡Cuenta de ${accountType === 'buyer' ? 'Estudiante' : 'Instructor'} creada con éxito!`); + setIsLoading(false); navigate(accountType === 'seller' ? '/seller' : '/courses'); - } + }, 450); }; return ( -
- - {/* Ambient background glow */} -
-
+
- {/* ============================================================== */} - {/* LEFT COLUMN: BRANDING BANNER */} - {/* ============================================================== */} -
- - {/* Ambient Lights */} -
-
-
+ {/* Top-Right Background Radial Gradient Glow (RyCourses Cyan & Blue Brand Colors) */} +
+
+
- {/* Brand Header */} -
- - -
- - Regístrate 100% Gratis -
-
+ {/* Interactive Background Atmosphere: Twinkling Star Particles & Flying Space Shuttle */} +
- {/* Hero Visual Box */} -
-
- -
- Comienza tu aprendizaje en RyCourses -
-
+ {/* Twinkling Star Field */} +
+
+
+
+
+
+
+
+
+
-
- - Aprende a Tu Propio Ritmo -
+ {/* Crossing Space Shuttle Rocket */} +
+ + {/* Plasma Rocket Flame Trail */} + -
-
-
-
- 🎓 -
-
-

- Obtén certificados con reconocimiento internacional -

-

- Proyectos prácticos para enriquecer tu portafolio profesional. -

-
-
-
-
+ {/* Main Rocket Fuselage Body */} + -
-
+ {/* Nose Cone Tip */} + - {/* Feature Highlights Grid */} -
-
-
- -
-
-

Cursos Prácticos

-

Proyectos reales

-
-
+ {/* Left Booster Fin */} + -
-
- -
-
-

Badges Digitales

-

Comparte en Linkedin

-
-
+ {/* Right Booster Fin */} + -
-
- -
-
-

Mentores 24/7

-

Soporte continuo

-
-
+ {/* Porthole Window 1 */} + + + + + {/* Porthole Window 2 */} + + + + + + + + + + + + + + + + +
- {/* ============================================================== */} - {/* RIGHT COLUMN: FORM & REGISTER */} - {/* ============================================================== */} -
- - {/* Top Navigation Header */} -
- - - - -
+ {/* Top Navigation Bar (Only Back Link, No duplicate logo) */} +
+ + + Volver al inicio + +
- - - Volver al inicio - -
+ {/* Main Centered Register Card Container */} +
+
- {/* Form Body Container */} -
- - {/* Titles */} -
-
- - Únete a RyCourses + {/* Subtle Top Border Gradient Accent */} +
+ + {/* Centered Brand Logo & Header Titles inside Form Card */} +
+
+
-

- Crear Cuenta Gratis ✨ +

+ Crear Cuenta

- Comienza a aprender o enseñar hoy mismo en la plataforma líder. + Crea tu perfil en RyCourses para comenzar tu experiencia.

{/* Account type switcher */} -
+
{/* Form */}
-
- +
+ + {isValidEmail && ( + + Formato válido + + )} +
- + setEmail(e.target.value)} placeholder="sofia@ejemplo.com" - className="w-full pl-10 pr-4 py-2.5 bg-slate-900/90 border border-slate-800 focus:border-cyan-500 rounded-xl text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/30 transition" + className="w-full pl-10 pr-4 py-2.5 bg-slate-950/80 border border-slate-800 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 rounded-xl text-xs text-white placeholder-slate-500 focus:outline-none transition-all" />
-
-
+
- Acepto los Términos y Políticas de Privacidad. + Acepto los Términos de Servicio y Políticas de Privacidad.
{/* Login Link */} -
+
¿Ya tienes una cuenta registrada?{' '} - + Inicia sesión aquí
+
- {/* Footer info */} -
- © 2026 RyCourses Platform. Todos los derechos reservados. -
- + {/* Footer info */} +
+ © 2026 RyCourses. Todos los derechos reservados.
); }; - -