195 lines
8.3 KiB
PHP
195 lines
8.3 KiB
PHP
{{--
|
|
Professional Login Page - Professional Bootstrap Design
|
|
Clean and modern login interface
|
|
|
|
@author David Valera Melendez <david@valera-melendez.de>
|
|
@created 2025-08-08
|
|
@location Made in Germany 🇩🇪
|
|
--}}
|
|
|
|
@extends('layouts.material-auth')
|
|
|
|
@section('title', 'Sign In - Professional Resume Builder')
|
|
@section('page_class', 'auth-page login-page')
|
|
|
|
@section('content')
|
|
<!-- Professional Login Page - Bootstrap Style -->
|
|
<div class="login-container">
|
|
<!-- Hero Background Section -->
|
|
<div class="hero-background">
|
|
<div class="hero-overlay">
|
|
<div class="hero-content">
|
|
<div class="hero-icon">
|
|
<i class="bi bi-person-badge large-icon"></i>
|
|
</div>
|
|
<h1 class="hero-title">Professional Resume Builder</h1>
|
|
<p class="hero-subtitle">
|
|
Create impressive, professional resumes with modern design and expert guidance
|
|
</p>
|
|
<p class="author-signature">
|
|
<strong>Created by David Valera Melendez</strong> | Made in Germany 🇩🇪
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Form Container -->
|
|
<div class="login-form-container">
|
|
<div class="login-card">
|
|
<div class="card-body">
|
|
<!-- Form Header -->
|
|
<div class="form-header">
|
|
<div class="login-avatar">
|
|
<i class="bi bi-box-arrow-in-right"></i>
|
|
</div>
|
|
<h2 class="form-title">Sign In</h2>
|
|
<p class="form-subtitle">Welcome back to Resume Builder</p>
|
|
</div>
|
|
|
|
<!-- Error Messages -->
|
|
@if($errors->any())
|
|
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
|
<div>
|
|
@foreach($errors->all() as $error)
|
|
<div>{{ $error }}</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Login Form -->
|
|
<form method="POST" action="{{ route('login') }}" class="login-form">
|
|
@csrf
|
|
|
|
<!-- Email Field -->
|
|
<div class="form-group">
|
|
<div class="form-field">
|
|
<input
|
|
type="email"
|
|
class="form-control material-input @error('email') is-invalid @enderror"
|
|
id="email"
|
|
name="email"
|
|
value="{{ old('email') }}"
|
|
required
|
|
autocomplete="email"
|
|
autofocus
|
|
placeholder=" "
|
|
>
|
|
<label for="email" class="form-label">Email Address</label>
|
|
<div class="form-outline"></div>
|
|
@error('email')
|
|
<div class="invalid-feedback">
|
|
<i class="bi bi-exclamation-circle me-1"></i>
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Field -->
|
|
<div class="form-group">
|
|
<div class="form-field">
|
|
<input
|
|
type="password"
|
|
class="form-control material-input @error('password') is-invalid @enderror"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
autocomplete="current-password"
|
|
placeholder=" "
|
|
>
|
|
<label for="password" class="form-label">Password</label>
|
|
<div class="form-outline"></div>
|
|
<button type="button" class="password-toggle" onclick="togglePassword('password')">
|
|
<i class="bi bi-eye" id="password-icon"></i>
|
|
</button>
|
|
@error('password')
|
|
<div class="invalid-feedback">
|
|
<i class="bi bi-exclamation-circle me-1"></i>
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remember Me & Forgot Password -->
|
|
<div class="form-options">
|
|
<div class="form-check">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="remember"
|
|
name="remember"
|
|
{{ old('remember') ? 'checked' : '' }}
|
|
>
|
|
<label class="form-check-label" for="remember">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
|
|
@if (Route::has('password.request'))
|
|
<a href="{{ route('password.request') }}" class="forgot-password-link">
|
|
Forgot password?
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Login Button -->
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-primary login-btn">
|
|
<i class="bi bi-box-arrow-in-right me-2"></i>
|
|
Sign In
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Social Login Section -->
|
|
<div class="social-login">
|
|
<div class="divider">
|
|
<span>or continue with</span>
|
|
</div>
|
|
|
|
<div class="social-buttons">
|
|
<button type="button" class="btn social-btn google-btn">
|
|
<i class="bi bi-google me-2"></i>
|
|
Google
|
|
</button>
|
|
<button type="button" class="btn social-btn github-btn">
|
|
<i class="bi bi-github me-2"></i>
|
|
GitHub
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Register Link -->
|
|
<div class="register-link">
|
|
<p>Don't have an account?
|
|
<a href="{{ route('register') }}" class="register-link-text">
|
|
Sign up here
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function togglePassword(fieldId) {
|
|
const passwordField = document.getElementById(fieldId);
|
|
const passwordIcon = document.getElementById(fieldId + '-icon');
|
|
|
|
if (passwordField.type === 'password') {
|
|
passwordField.type = 'text';
|
|
passwordIcon.className = 'bi bi-eye-slash';
|
|
} else {
|
|
passwordField.type = 'password';
|
|
passwordIcon.className = 'bi bi-eye';
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|
|
@endsection
|