hotswap/delphi-database-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve login screen design and functionality

Browse Source 
- 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
2025-10-07 21:33:12 -05:00
parent aeb0be6982
commit 7fe57ccb6d
3 changed files with 121 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/__pycache__/main.cpython-313.pyc
View File

Binary file not shown.

92
app/templates/login.html
View File

@@ -5,66 +5,75 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-lg-4"> <div class="col-md-8 col-lg-5">
<div class="card shadow-sm"> <div class="card shadow-lg" style="border: none; border-radius: 15px;">
<div class="card-body"> <div class="card-body p-5">
<div class="text-center mb-4"> <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;"> <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">Welcome Back</h2> <h2 class="card-title mb-2">Welcome Back</h2>
<p class="text-muted">Sign in to access Delphi Database</p> <p class="text-muted">Sign in to access Delphi Database</p>
</div> </div>
{% if error %} {% if error %}
<div class="alert alert-danger" role="alert"> <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>{{ error }} <i class="bi bi-exclamation-triangle-fill me-2"></i>
<div>{{ error }}</div>
</div> </div>
{% endif %} {% endif %}
<form method="post" action="/login"> <form method="post" action="/login">
<div class="mb-3"> <div class="mb-4">
<label for="username" class="form-label">Username</label> <label for="username" class="form-label fw-semibold">Username</label>
<div class="input-group"> <div class="input-group input-group-lg">
<span class="input-group-text"><i class="bi bi-person"></i></span> <span class="input-group-text bg-light border-end-0">
<input type="text" class="form-control" id="username" name="username" required <i class="bi bi-person text-muted"></i>
placeholder="Enter your username" autocomplete="username"> </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> </div>
<div class="mb-3"> <div class="mb-4">
<label for="password" class="form-label">Password</label> <label for="password" class="form-label fw-semibold">Password</label>
<div class="input-group"> <div class="input-group input-group-lg">
<span class="input-group-text"><i class="bi bi-key"></i></span> <span class="input-group-text bg-light border-end-0">
<input type="password" class="form-control" id="password" name="password" required <i class="bi bi-key text-muted"></i>
placeholder="Enter your password" autocomplete="current-password"> </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> </div>
<div class="mb-3 form-check"> <div class="mb-4 form-check">
<input type="checkbox" class="form-check-input" id="rememberMe"> <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 Remember me
</label> </label>
</div> </div>
<div class="d-grid"> <div class="d-grid mb-3">
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary btn-lg fw-semibold">
<i class="bi bi-box-arrow-in-right me-2"></i>Sign In <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
</button> </button>
</div> </div>
</form> </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"> <small class="text-muted">
<i class="bi bi-info-circle me-1"></i> <i class="bi bi-info-circle me-1"></i>
Default credentials: admin / admin123 <strong>Default credentials:</strong> admin / admin123
</small> </small>
</div> </div>
</div> </div>
</div> </div>
<div class="text-center mt-3"> <div class="text-center mt-4">
<small class="text-muted"> <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> </small>
</div> </div>
</div> </div>
@@ -79,32 +88,41 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('username').focus(); document.getElementById('username').focus();
}); });
// Show/hide password toggle (optional enhancement) // Show/hide password toggle functionality
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const passwordField = document.getElementById('password'); const passwordField = document.getElementById('password');
const toggleBtn = document.createElement('button'); const toggleBtn = document.createElement('button');
toggleBtn.type = 'button'; toggleBtn.type = 'button';
toggleBtn.className = 'btn btn-outline-secondary'; toggleBtn.className = 'btn btn-light border-start-0';
toggleBtn.innerHTML = '<i class="bi bi-eye"></i>'; toggleBtn.innerHTML = '<i class="bi bi-eye text-muted"></i>';
toggleBtn.style.border = 'none'; toggleBtn.style.border = '2px solid #e9ecef';
toggleBtn.style.background = 'transparent'; 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() { toggleBtn.addEventListener('click', function() {
if (passwordField.type === 'password') { if (passwordField.type === 'password') {
passwordField.type = 'text'; 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 { } else {
passwordField.type = 'password'; 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 // Insert toggle button into password input group
const passwordInputGroup = passwordField.closest('.input-group'); const passwordInputGroup = passwordField.closest('.input-group');
if (passwordInputGroup) { if (passwordInputGroup) {
const span = passwordInputGroup.querySelector('.input-group-text'); passwordInputGroup.appendChild(toggleBtn);
passwordInputGroup.insertBefore(toggleBtn, span.nextSibling);
// Adjust the input field border radius
passwordField.style.borderRadius = '8px 0 0 8px';
passwordField.style.borderRight = 'none';
} }
}); });
</script> </script>

67
static/css/custom.css
View File

@@ -2,7 +2,72 @@
/* Additional styles can be added here */ /* Additional styles can be added here */
body { body {
background-color: #f8f9fa; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Login page specific styles */
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* Enhanced card styling for login */
.card {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Logo styling */
.card .card-body .text-center img {
border-radius: 50%;
background: white;
padding: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Input group styling */
.input-group-lg .form-control {
border-radius: 8px !important;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
.input-group-lg .form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
background: white;
}
.input-group-text {
border-radius: 8px 0 0 8px !important;
border: 2px solid #e9ecef;
border-right: none;
background: #f8f9fa;
}
/* Button styling */
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 8px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
} }
/* Custom navbar styles */ /* Custom navbar styles */