Improve login screen design and functionality
- Increased logo size from 60x60 to 120x120px with proper styling - Enhanced card layout with better padding and rounded corners - Added modern gradient background and improved visual hierarchy - Improved form styling with larger inputs and better spacing - Enhanced password visibility toggle with better UX - Improved error message styling with icons and rounded corners - Added responsive design improvements for better mobile experience - Updated color scheme with modern gradients and improved contrast
This commit is contained in:
HotSwapp
Binary file not shown.
@@ -5,66 +5,75 @@
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="col-md-8 col-lg-5">
|
||||
<div class="card shadow-lg" style="border: none; border-radius: 15px;">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center mb-4">
|
||||
<img src="{{ url_for('static', path='/logo/delphi-logo.webp') }}" alt="Delphi Logo" class="mb-3" style="width: 60px; height: 60px;">
|
||||
<h2 class="card-title">Welcome Back</h2>
|
||||
<img src="{{ url_for('static', path='/logo/delphi-logo.webp') }}" alt="Delphi Logo" class="mb-4" style="width: 120px; height: 120px; object-fit: contain;">
|
||||
<h2 class="card-title mb-2">Welcome Back</h2>
|
||||
<p class="text-muted">Sign in to access Delphi Database</p>
|
||||
</div>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill me-2"></i>{{ error }}
|
||||
<div class="alert alert-danger d-flex align-items-center" role="alert" style="border-radius: 8px;">
|
||||
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
||||
<div>{{ error }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/login">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
||||
<input type="text" class="form-control" id="username" name="username" required
|
||||
placeholder="Enter your username" autocomplete="username">
|
||||
<div class="mb-4">
|
||||
<label for="username" class="form-label fw-semibold">Username</label>
|
||||
<div class="input-group input-group-lg">
|
||||
<span class="input-group-text bg-light border-end-0">
|
||||
<i class="bi bi-person text-muted"></i>
|
||||
</span>
|
||||
<input type="text" class="form-control border-start-0 bg-light"
|
||||
id="username" name="username" required
|
||||
placeholder="Enter your username" autocomplete="username"
|
||||
style="border-left: none;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-key"></i></span>
|
||||
<input type="password" class="form-control" id="password" name="password" required
|
||||
placeholder="Enter your password" autocomplete="current-password">
|
||||
<div class="mb-4">
|
||||
<label for="password" class="form-label fw-semibold">Password</label>
|
||||
<div class="input-group input-group-lg">
|
||||
<span class="input-group-text bg-light border-end-0">
|
||||
<i class="bi bi-key text-muted"></i>
|
||||
</span>
|
||||
<input type="password" class="form-control border-start-0 bg-light"
|
||||
id="password" name="password" required
|
||||
placeholder="Enter your password" autocomplete="current-password"
|
||||
style="border-left: none;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 form-check">
|
||||
<div class="mb-4 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="rememberMe">
|
||||
<label class="form-check-label" for="rememberMe">
|
||||
<label class="form-check-label text-muted" for="rememberMe">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<div class="d-grid mb-3">
|
||||
<button type="submit" class="btn btn-primary btn-lg fw-semibold">
|
||||
<i class="bi bi-box-arrow-in-right me-2"></i>Sign In
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<div class="text-center mt-4 p-3" style="background-color: #f8f9fa; border-radius: 8px;">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
Default credentials: admin / admin123
|
||||
<strong>Default credentials:</strong> admin / admin123
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-3">
|
||||
<div class="text-center mt-4">
|
||||
<small class="text-muted">
|
||||
Don't have an account? Contact your administrator.
|
||||
Don't have an account? <a href="mailto:admin@delphi.com" class="text-decoration-none">Contact your administrator</a>.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,32 +88,41 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('username').focus();
|
||||
});
|
||||
|
||||
// Show/hide password toggle (optional enhancement)
|
||||
// Show/hide password toggle functionality
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const passwordField = document.getElementById('password');
|
||||
const toggleBtn = document.createElement('button');
|
||||
toggleBtn.type = 'button';
|
||||
toggleBtn.className = 'btn btn-outline-secondary';
|
||||
toggleBtn.innerHTML = '<i class="bi bi-eye"></i>';
|
||||
toggleBtn.style.border = 'none';
|
||||
toggleBtn.style.background = 'transparent';
|
||||
toggleBtn.className = 'btn btn-light border-start-0';
|
||||
toggleBtn.innerHTML = '<i class="bi bi-eye text-muted"></i>';
|
||||
toggleBtn.style.border = '2px solid #e9ecef';
|
||||
toggleBtn.style.borderLeft = 'none';
|
||||
toggleBtn.style.background = '#f8f9fa';
|
||||
toggleBtn.style.borderRadius = '0 8px 8px 0';
|
||||
|
||||
// Add toggle functionality
|
||||
// Add toggle functionality with better UX
|
||||
toggleBtn.addEventListener('click', function() {
|
||||
if (passwordField.type === 'password') {
|
||||
passwordField.type = 'text';
|
||||
this.innerHTML = '<i class="bi bi-eye-slash"></i>';
|
||||
this.innerHTML = '<i class="bi bi-eye-slash text-muted"></i>';
|
||||
this.classList.remove('btn-light');
|
||||
this.classList.add('btn-outline-primary');
|
||||
} else {
|
||||
passwordField.type = 'password';
|
||||
this.innerHTML = '<i class="bi bi-eye"></i>';
|
||||
this.innerHTML = '<i class="bi bi-eye text-muted"></i>';
|
||||
this.classList.remove('btn-outline-primary');
|
||||
this.classList.add('btn-light');
|
||||
}
|
||||
});
|
||||
|
||||
// Insert toggle button into password input group
|
||||
const passwordInputGroup = passwordField.closest('.input-group');
|
||||
if (passwordInputGroup) {
|
||||
const span = passwordInputGroup.querySelector('.input-group-text');
|
||||
passwordInputGroup.insertBefore(toggleBtn, span.nextSibling);
|
||||
passwordInputGroup.appendChild(toggleBtn);
|
||||
|
||||
// Adjust the input field border radius
|
||||
passwordField.style.borderRadius = '8px 0 0 8px';
|
||||
passwordField.style.borderRight = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user