82c1906607
Replace the green accent with a warm orange/amber palette and switch to a dark-first design. Add a fixed sidebar for desktop navigation and a bottom tab bar for mobile, replacing the top navbar. Cards now use glass-morphism with left accent bars, buttons use orange gradients, and decorative glow effects add depth. All 8 page templates updated, both light and dark modes tested across desktop and mobile viewports. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
93 lines
4.5 KiB
HTML
93 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Login | FoxFitt{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- === LOGIN PAGE — full-screen centred with premium orange theme === -->
|
|
<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-body); position: relative; overflow: hidden;">
|
|
|
|
<!-- Decorative orange glow -->
|
|
<div style="position: absolute; top: -200px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%); pointer-events: none;"></div>
|
|
<div style="position: absolute; bottom: -200px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(232, 133, 26, 0.08) 0%, transparent 70%); pointer-events: none;"></div>
|
|
|
|
<div class="card" style="width: 100%; max-width: 420px; position: relative; z-index: 1;">
|
|
<div class="card-body p-4 p-md-5">
|
|
|
|
<!-- Brand icon + name -->
|
|
<div class="text-center mb-4">
|
|
<div class="sidebar-brand__icon mx-auto mb-3" style="width: 48px; height: 48px; font-size: 1.25rem;">
|
|
<i class="fas fa-bolt"></i>
|
|
</div>
|
|
<h1 class="mb-1" style="font-size: 2rem;">
|
|
<span style="color: var(--accent); font-weight: 700;">Fox</span><span style="font-weight: 700;">Fitt</span>
|
|
</h1>
|
|
<p class="text-muted mb-0" style="font-size: 0.85rem;">Payroll Management System</p>
|
|
</div>
|
|
|
|
<!-- Error message -->
|
|
{% if form.errors %}
|
|
<div class="alert alert-danger d-flex align-items-center" role="alert" style="font-size: 0.875rem;">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
Your username and password didn't match. Please try again.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Login form -->
|
|
<form method="post" action="{% url 'login' %}">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<label for="id_username" class="form-label">Username</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-user" style="width: 1rem; text-align: center;"></i></span>
|
|
<input type="text" name="username" class="form-control form-control-lg" id="id_username" placeholder="Enter username" required autofocus>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="id_password" class="form-label">Password</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-lock" style="width: 1rem; text-align: center;"></i></span>
|
|
<input type="password" name="password" class="form-control form-control-lg" id="id_password" placeholder="Enter password" required>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-accent btn-lg w-100">
|
|
<i class="fas fa-sign-in-alt me-2"></i>Login
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Theme toggle (since sidebar isn't visible on login page) -->
|
|
<div class="text-center mt-4 pt-3" style="border-top: 1px solid var(--border-subtle);">
|
|
<button type="button" class="theme-toggle" id="loginThemeToggle" style="border-color: var(--border-default); color: var(--text-secondary); margin: 0 auto;">
|
|
<i class="fas fa-moon" id="loginThemeIcon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<!-- Theme toggle for login page (sidebar toggle is hidden when not authenticated) -->
|
|
<script>
|
|
(function() {
|
|
var toggle = document.getElementById('loginThemeToggle');
|
|
var icon = document.getElementById('loginThemeIcon');
|
|
if (!toggle || !icon) return;
|
|
|
|
function updateLoginToggle() {
|
|
var isDark = document.documentElement.getAttribute('data-theme') !== 'light';
|
|
icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
|
|
}
|
|
|
|
updateLoginToggle();
|
|
|
|
toggle.addEventListener('click', function() {
|
|
var current = document.documentElement.getAttribute('data-theme');
|
|
var next = (current === 'light') ? 'dark' : 'light';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('foxfitt-theme', next);
|
|
updateLoginToggle();
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|