File Manager
Viewing File: login.blade.php
@extends('layouts.guest1')
@section('title', 'Sign In')
@section('content')
<!-- Fintech Trading Platform Login -->
<div class="min-h-screen bg-gray-900 relative overflow-hidden">
<!-- Remove animated background elements and floating orbs -->
<div class="relative z-10 flex min-h-screen items-center justify-center px-4 py-8 sm:px-6 lg:px-8">
<div class="w-full max-w-lg">
<!-- Trading Login Card -->
<div class="relative bg-gray-900 border border-gray-700 rounded-3xl p-8 sm:p-10 shadow-2xl">
<!-- Remove glow effect -->
<div class="relative">
<!-- Status Alert -->
@if (Session::has('status'))
<div class="mb-6 p-4 bg-blue-500/20 border border-blue-400/30 rounded-2xl" role="alert">
<div class="flex items-center gap-3">
<i data-lucide="info" class="h-5 w-5 text-blue-400 flex-shrink-0"></i>
<div class="text-sm text-blue-100">
{{ session('status') }}
</div>
</div>
</div>
@endif
<!-- Header Section -->
<div class="text-center mb-8">
<!-- Logo -->
<div class="flex items-center justify-center mb-6">
<div class="relative">
<!-- Remove glow effect -->
<img src="{{ asset('storage/app/public/'.$settings->logo)}}"
class="relative h-16 w-auto"
alt="{{ $settings->site_name }}" />
</div>
</div>
<!-- Title -->
<h1 class="text-2xl sm:text-3xl font-bold text-white mb-2">
Welcome Back
</h1>
<h2 class="text-lg sm:text-xl font-semibold mb-3">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">{{ $settings->site_name }}</span>
</h2>
<p class="text-gray-300 text-sm sm:text-base">
Access your trading dashboard
</p>
<!-- Trading Stats -->
<div class="flex items-center justify-center gap-6 mt-6 text-xs sm:text-sm">
<div class="text-center">
<div class="flex items-center justify-center gap-1 text-green-400 mb-1">
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span class="font-medium">Live</span>
</div>
<div class="text-gray-400">24/7 Markets</div>
</div>
<div class="w-px h-10 bg-white/20"></div>
<div class="text-center">
<div class="flex items-center justify-center gap-1 text-blue-400 mb-1">
<i data-lucide="zap" class="w-3 h-3"></i>
<span class="font-medium">Fast</span>
</div>
<div class="text-gray-400">Execution</div>
</div>
<div class="w-px h-10 bg-white/20"></div>
<div class="text-center">
<div class="flex items-center justify-center gap-1 text-cyan-400 mb-1">
<i data-lucide="shield" class="w-3 h-3"></i>
<span class="font-medium">Secure</span>
</div>
<div class="text-gray-400">Platform</div>
</div>
</div>
</div>
<!-- Error Messages -->
@if ($errors->has('csrf'))
<div class="mb-6 p-4 bg-yellow-500/20 border border-yellow-400/30 rounded-2xl">
<div class="flex items-center gap-3">
<i data-lucide="clock" class="h-5 w-5 text-yellow-400 flex-shrink-0"></i>
<div class="text-sm text-yellow-100">
{{ $errors->first('csrf') }}
</div>
</div>
</div>
@endif
@error('email')
<div class="mb-6 p-4 bg-red-500/20 border border-red-400/30 rounded-2xl">
<div class="flex items-center gap-3">
<i data-lucide="alert-circle" class="h-5 w-5 text-red-400 flex-shrink-0"></i>
<div class="text-sm text-red-100">
{{ $message }}
</div>
</div>
</div>
@enderror
<!-- Login Form -->
<form action="{{ route('login') }}" method="post" class="space-y-6">
@csrf
<!-- Email Field -->
<div class="space-y-2">
<label for="email" class="block text-sm font-semibold text-gray-200">
Email Address or Username
</label>
<div class="relative group">
<div class="absolute inset-y-0 left-0 flex items-center pl-4">
<i data-lucide="mail" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-400 transition-colors duration-200"></i>
</div>
<input type="text" name="email" id="email" required
class="block w-full rounded-2xl border border-gray-600 bg-gray-900 pl-12 pr-4 py-4 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-medium"
placeholder="your.email@example.com"
value="{{ old('email') }}">
</div>
</div>
<!-- Password Field -->
<div class="space-y-2">
<label for="password" class="block text-sm font-semibold text-gray-200">
Password
</label>
<div class="relative group" x-data="{ showPassword: false }">
<div class="absolute inset-y-0 left-0 flex items-center pl-4">
<i data-lucide="lock" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-400 transition-colors duration-200"></i>
</div>
<input type="password" name="password" id="password" required
:type="showPassword ? 'text' : 'password'"
class="block w-full rounded-2xl border border-gray-600 bg-gray-900 pl-12 pr-12 py-4 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 focus:bg-gray-800 transition-all duration-200 text-sm font-medium"
placeholder="Enter your password">
<button type="button" @click="showPassword = !showPassword"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-gray-400 hover:text-blue-400 transition-colors">
<i data-lucide="eye" class="h-5 w-5" x-show="!showPassword"></i>
<i data-lucide="eye-off" class="h-5 w-5" x-show="showPassword" x-cloak></i>
</button>
</div>
</div>
<!-- Remember Me & Forgot Password -->
<div class="flex items-center justify-between text-sm">
<div class="flex items-center">
<input type="checkbox" name="remember" id="remember"
class="h-4 w-4 rounded border-gray-600 bg-gray-900 text-blue-500 focus:ring-2 focus:ring-blue-400/20 transition-colors">
<label for="remember" class="ml-3 text-gray-300 font-medium">
Remember me
</label>
</div>
<a href="{{ route('password.request') }}"
class="text-blue-400 hover:text-blue-300 transition-colors underline underline-offset-2">
Forgot password?
</a>
</div>
<!-- Login Button -->
<div class="mt-8">
<button type="submit"
class="group relative flex w-full justify-center items-center gap-3 rounded-2xl bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 px-6 py-4 text-base font-bold text-white transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-400/50 disabled:opacity-50 disabled:cursor-not-allowed">
<i data-lucide="log-in" class="h-5 w-5"></i>
<span>Access Dashboard</span>
<i data-lucide="arrow-right" class="h-4 w-4 group-hover:translate-x-1 transition-transform"></i>
</button>
</div>
</form>
<!-- Biometric Login Methods -->
<div class="mt-8">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-white/20"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="bg-gray-900 px-4 text-gray-300 font-medium">Quick Access</span>
</div>
</div>
<div class="mt-6 flex justify-center space-x-4">
<button type="button" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false"
class="group relative inline-flex items-center justify-center w-14 h-14 rounded-2xl border border-gray-600 bg-gray-800 hover:bg-gray-700 hover:border-blue-400/50 transition-all duration-200 shadow-lg hover:shadow-xl">
<i data-lucide="fingerprint" class="h-6 w-6 text-blue-400 group-hover:text-blue-300 group-hover:scale-110 transition-all duration-200"></i>
<div class="absolute -bottom-12 left-1/2 transform -translate-x-1/2 bg-gray-900/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
Fingerprint
</div>
</button>
<button type="button" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false"
class="group relative inline-flex items-center justify-center w-14 h-14 rounded-2xl border border-gray-600 bg-gray-800 hover:bg-gray-700 hover:border-cyan-400/50 transition-all duration-200 shadow-lg hover:shadow-xl">
<i data-lucide="scan-face" class="h-6 w-6 text-cyan-400 group-hover:text-cyan-300 group-hover:scale-110 transition-all duration-200"></i>
<div class="absolute -bottom-12 left-1/2 transform -translate-x-1/2 bg-gray-900/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
Face ID
</div>
</button>
<button type="button" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false"
class="group relative inline-flex items-center justify-center w-14 h-14 rounded-2xl border border-gray-600 bg-gray-800 hover:bg-gray-700 hover:border-green-400/50 transition-all duration-200 shadow-lg hover:shadow-xl">
<i data-lucide="qr-code" class="h-6 w-6 text-green-400 group-hover:text-green-300 group-hover:scale-110 transition-all duration-200"></i>
<div class="absolute -bottom-12 left-1/2 transform -translate-x-1/2 bg-gray-900/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
QR Code
</div>
</button>
</div>
</div>
<!-- Footer -->
<div class="mt-10 text-center space-y-6">
<!-- Register Link -->
<div class="text-sm">
<span class="text-gray-300">New to trading? </span>
<a href="{{ route('register') }}"
class="font-semibold text-blue-400 hover:text-blue-300 transition-colors underline underline-offset-2">
Create your account
</a>
</div>
<!-- Security Badges -->
<div class="flex items-center justify-center gap-6 py-4 text-xs text-gray-400">
<div class="flex items-center gap-1">
<i data-lucide="shield-check" class="w-3 h-3 text-green-400"></i>
<span>SSL Secured</span>
</div>
<div class="flex items-center gap-1">
<i data-lucide="lock" class="w-3 h-3 text-blue-400"></i>
<span>256-bit Encryption</span>
</div>
<div class="flex items-center gap-1">
<i data-lucide="award" class="w-3 h-3 text-cyan-400"></i>
<span>Regulated</span>
</div>
</div>
<!-- Copyright -->
<p class="text-xs text-gray-500">
© {{ date('Y') }} {{ $settings->site_name }}. All rights reserved.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Auto-focus email field
const emailField = document.getElementById('email');
if (emailField) {
emailField.focus();
}
// Initialize Lucide icons
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
});
// Re-initialize icons after Alpine updates
document.addEventListener('alpine:updated', () => {
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
});
</script>
@endsection