jessikitty/lego-instructions-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhanced base template with better fonts, icons in alerts, auto-hide messages, loading states, and micro-interactions

Browse Source
This commit is contained in:
jessikitty
2026-01-05 17:56:32 +11:00
parent 689147d622
commit 9de38dfbe2
1 changed files with 95 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/templates/base.html
View File

@@ -11,6 +11,14 @@
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<!-- Preconnect to CDNs for better performance -->
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Fonts - Inter for modern look -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -21,6 +29,10 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% block extra_css %}{% endblock %}
<!-- Meta description for SEO -->
<meta name="description" content="Organize and manage your LEGO instruction manuals with ease. Upload PDFs, search by theme, and integrate with Brickset API.">
<meta name="theme-color" content="#d11013">
</head>
<body>
<!-- Navigation -->
@@ -67,9 +79,9 @@
<i class="bi bi-person-circle"></i> {{ current_user.username }}
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="{{ url_for('auth.profile') }}">Profile</a></li>
<li><a class="dropdown-item" href="{{ url_for('auth.profile') }}"><i class="bi bi-person"></i> Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}"><i class="bi bi-box-arrow-right"></i> Logout</a></li>
</ul>
</li>
{% else %}
@@ -95,6 +107,15 @@
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{% if category == 'success' %}
<i class="bi bi-check-circle-fill me-2"></i>
{% elif category == 'danger' %}
<i class="bi bi-exclamation-triangle-fill me-2"></i>
{% elif category == 'warning' %}
<i class="bi bi-exclamation-circle-fill me-2"></i>
{% elif category == 'info' %}
<i class="bi bi-info-circle-fill me-2"></i>
{% endif %}
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@@ -109,10 +130,16 @@
</main>
<!-- Footer -->
<footer class="mt-5 py-4 bg-light">
<div class="container text-center text-muted">
<p class="mb-0">
<i class="bi bi-bricks"></i> LEGO Instructions Manager &copy; 2024
<footer class="mt-5 py-4">
<div class="container text-center">
<p class="mb-2">
<i class="bi bi-bricks"></i> <strong>LEGO Instructions Manager</strong>
</p>
<p class="mb-2 small">
Organize, manage, and access all your LEGO instruction manuals
</p>
<p class="mb-0 small">
&copy; 2024-{{ "now"|date("Y") }} LEGO Instructions Manager
{% if brickset_available %}
<span class="badge bg-success ms-2">
<i class="bi bi-check-circle"></i> Brickset Connected
@@ -128,6 +155,67 @@
<!-- jQuery (for easier AJAX) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Custom JavaScript for enhancements -->
<script>
// Add smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Auto-hide flash messages after 5 seconds
setTimeout(function() {
const alerts = document.querySelectorAll('.alert');
alerts.forEach(alert => {
const bsAlert = new bootstrap.Alert(alert);
bsAlert.close();
});
}, 5000);
// Add loading state to buttons on form submit
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', function(e) {
const submitBtn = this.querySelector('button[type="submit"]');
if (submitBtn && !submitBtn.disabled) {
submitBtn.disabled = true;
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Loading...';
// Re-enable after 10 seconds as fallback
setTimeout(() => {
submitBtn.disabled = false;
submitBtn.innerHTML = originalText;
}, 10000);
}
});
});
// Add ripple effect to buttons
document.querySelectorAll('.btn').forEach(button => {
button.addEventListener('click', function(e) {
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.classList.add('ripple');
this.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
});
});
</script>
{% block extra_js %}{% endblock %}
</body>
</html>
</html>