Vue login template - v0 by Vercel

<template> <div class="min-h-screen relative overflow-hidden">  <div class="absolute inset-0 z-0"> <div v-for="(image, index) in backgroundImages" :key="index" :class="[ 'absolute inset-0 bg-cover bg-center transition-opacity duration-1000', currentImageIndex === index ? 'opacity-100' : 'opacity-0' ]" :style="{ backgroundImage: `url(${image})` }" ></div>  <div class="absolute inset-0 bg-black/60"></div> </div>  <div class="relative z-10 min-h-screen flex items-center justify-center p-4"> <div class="w-full max-w-md">  <div class="text-center mb-8 animate-fade-in"> <div class="inline-block mb-6"> <img src="/images/logo/Artboard-10.png" alt="BlazeCart Logo" class="h-16 w-auto mx-auto drop-shadow-2xl" /> </div> <h1 class="text-4xl font-bold text-white mb-2"> Bienvenido de vuelta </h1> <p class="text-gray-300">Accede a tu cuenta BlazeCart</p> </div>  <div class="bg-white/95 backdrop-blur-sm rounded-2xl p-8 shadow-2xl border border-gray-200"> <form @submit.prevent="handleLogin" class="space-y-6">  <div class="space-y-2"> <label for="email" class="block text-sm font-semibold text-gray-800"> Correo Electrónico </label> <div class="relative"> <input id="email" v-model="form.email" type="email" required class="w-full px-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-lg text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all duration-200" placeholder="tu@email.com" /> <div class="absolute inset-y-0 right-0 pr-3 flex items-center"> <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/> <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/> </svg> </div> </div> </div>  <div class="space-y-2"> <label for="password" class="block text-sm font-semibold text-gray-800"> Contraseña </label> <div class="relative"> <input id="password" v-model="form.password" :type="showPassword ? 'text' : 'password'" required class="w-full px-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-lg text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all duration-200 pr-12" placeholder="Ingresa tu contraseña" /> <button type="button" @click="togglePasswordVisibility" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors duration-200" > <svg v-if="!showPassword" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/> </svg> <svg v-else class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"/> </svg> </button> </div> </div>  <div class="flex items-center justify-between"> <div class="flex items-center"> <input id="remember" v-model="form.remember" type="checkbox" class="h-4 w-4 text-yellow-500 focus:ring-yellow-400 border-gray-300 rounded" /> <label for="remember" class="ml-2 block text-sm text-gray-700 font-medium"> Recordarme </label> </div> <a href="#" class="text-sm text-yellow-600 hover:text-yellow-700 transition-colors duration-200 font-medium"> ¿Olvidaste tu contraseña? </a> </div>  <button type="submit" :disabled="isLoading" class="w-full bg-gradient-to-r from-yellow-400 to-yellow-500 text-black py-3 px-4 rounded-lg font-bold hover:from-yellow-500 hover:to-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none shadow-lg" > <span v-if="!isLoading" class="flex items-center justify-center"> <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/> </svg> Iniciar Sesión </span> <span v-else class="flex items-center justify-center"> <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-black" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> Iniciando Sesión... </span> </button> </form>  <div class="mt-6 text-center"> <p class="text-gray-600 text-sm"> Operaciones Logísticas de Transporte de Carga </p> <div class="mt-4 flex items-center justify-center space-x-2"> <div class="w-2 h-2 bg-yellow-400 rounded-full"></div> <span class="text-xs text-gray-500 font-medium">BLAZECART LOGISTICS</span> <div class="w-2 h-2 bg-yellow-400 rounded-full"></div> </div> </div> </div>  <div class="text-center mt-8"> <p class="text-gray-300 text-sm"> ¿Necesitas ayuda? <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-200 font-medium"> Contacta soporte técnico </a> </p> <p class="text-gray-400 text-xs mt-2"> © 2024 BlazeCart LLC. Todos los derechos reservados. </p> </div> </div> </div>  <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 z-20"> <div class="flex space-x-2"> <button v-for="(image, index) in backgroundImages" :key="index" @click="currentImageIndex = index" :class="[ 'w-3 h-3 rounded-full transition-all duration-200', currentImageIndex === index ? 'bg-yellow-400 scale-110 shadow-lg' : 'bg-white/50 hover:bg-white/75' ]" ></button> </div> </div> </div></template><script setup>import { onMounted, onUnmounted, ref } from 'vue'// Reactive dataconst form = ref({ email: '', password: '', remember: false})const showPassword = ref(false)const isLoading = ref(false)const currentImageIndex = ref(0)// Background images for slider - logistics themedconst backgroundImages = ref([ '/images/fondos/camion.jpg',])let imageSliderInterval = null// Methodsconst togglePasswordVisibility = () => { showPassword.value = !showPassword.value}const handleLogin = async () => { isLoading.value = true try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 2000)) console.log('Login attempt:', { email: form.value.email, password: form.value.password, remember: form.value.remember }) // Here you would typically make an API call to authenticate alert('¡Inicio de sesión exitoso! Bienvenido a BlazeCart') } catch (error) { console.error('Login error:', error) alert('Error al iniciar sesión. Por favor, intenta nuevamente.') } finally { isLoading.value = false }}const startImageSlider = () => { imageSliderInterval = setInterval(() => { currentImageIndex.value = (currentImageIndex.value + 1) % backgroundImages.value.length }, 6000) // Change image every 6 seconds}const stopImageSlider = () => { if (imageSliderInterval) { clearInterval(imageSliderInterval) imageSliderInterval = null }}// Lifecycle hooksonMounted(() => { startImageSlider()})onUnmounted(() => { stopImageSlider()})</script><style>@keyframes fade-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); }}.animate-fade-in { animation: fade-in 0.8s ease-out;}/* Custom scrollbar for webkit browsers */::-webkit-scrollbar { width: 6px;}::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1);}::-webkit-scrollbar-thumb { background: rgba(251, 191, 36, 0.5); border-radius: 3px;}::-webkit-scrollbar-thumb:hover { background: rgba(251, 191, 36, 0.7);}/* Enhanced backdrop blur support */@supports (backdrop-filter: blur(10px)) { .backdrop-blur-sm { backdrop-filter: blur(8px); }}/* Fallback for browsers that don't support backdrop-filter */@supports not (backdrop-filter: blur(10px)) { .backdrop-blur-sm { background-color: rgba(255, 255, 255, 0.95); }}/* Custom checkbox styling */input[type="checkbox"]:checked { background-color: #f59e0b; border-color: #f59e0b;}/* Enhanced button hover effects */button:hover { transform: translateY(-1px);}button:active { transform: translateY(0);}/* Smooth transitions for all interactive elements */* { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms;}</style> agrega al logo un fondo claro para aque vea porque se ve transparente

Show full message