sneakygeek/SneakyScan
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve UI design system and fix notification positioning

Browse Source 
- Overhaul CSS with comprehensive design tokens (shadows, transitions, radii)
- Add hover effects and smooth transitions to cards, buttons, tables
- Improve typography hierarchy and color consistency
- Remove inline styles from 10 template files for better maintainability
- Add global notification container to ensure toasts appear above modals
- Update showNotification/showAlert functions to use centralized container
- Add accessibility improvements (focus states, reduced motion support)
- Improve responsive design and mobile styling
- Add print styles
This commit is contained in:
Phillip Tarrant
2025-11-19 21:45:36 -06:00
parent fdf689316f
commit 0fc51eb032
13 changed files with 1004 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/web/templates/sites.html
View File

@@ -6,7 +6,7 @@
<div class="row mt-4">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 style="color: #60a5fa;">Site Management</h1>
<h1>Site Management</h1>
<div>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createSiteModal">
<i class="bi bi-plus-circle"></i> Create New Site
@@ -44,7 +44,7 @@
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h5 class="mb-0" style="color: #60a5fa;">All Sites</h5>
<h5 class="mb-0">All Sites</h5>
<input type="text" id="search-input" class="form-control" style="max-width: 300px;"
placeholder="Search sites...">
</div>
@@ -93,31 +93,31 @@
<!-- Create Site Modal -->
<div class="modal fade" id="createSiteModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="background-color: #1e293b; border: 1px solid #334155;">
<div class="modal-header" style="border-bottom: 1px solid #334155;">
<h5 class="modal-title" style="color: #60a5fa;">
<i class="bi bi-plus-circle"></i> Create New Site
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i class="bi bi-plus-circle me-2"></i>Create New Site
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="create-site-form">
<div class="mb-3">
<label for="site-name" class="form-label" style="color: #e2e8f0;">Site Name *</label>
<label for="site-name" class="form-label">Site Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="site-name" required
placeholder="e.g., Production Web Servers">
</div>
<div class="mb-3">
<label for="site-description" class="form-label" style="color: #e2e8f0;">Description</label>
<label for="site-description" class="form-label">Description</label>
<textarea class="form-control" id="site-description" rows="3"
placeholder="Optional description of this site"></textarea>
</div>
<div class="alert alert-info" style="background-color: #1e3a5f; border-color: #2d5a8c; color: #a5d6ff;">
<i class="bi bi-info-circle"></i> After creating the site, you'll be able to add IP addresses using CIDRs, individual IPs, or bulk import.
<div class="alert alert-info">
<i class="bi bi-info-circle me-1"></i>After creating the site, you'll be able to add IP addresses using CIDRs, individual IPs, or bulk import.
</div>
</form>
</div>
<div class="modal-footer" style="border-top: 1px solid #334155;">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="createSite()">
<i class="bi bi-check-circle"></i> Create Site
@@ -1108,22 +1108,20 @@ async function saveIp() {
// Show alert
function showAlert(type, message) {
const alertHtml = `
<div class="alert alert-${type} alert-dismissible fade show mt-3" role="alert">
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
const container = document.getElementById('notification-container');
const notification = document.createElement('div');
notification.className = `alert alert-${type} alert-dismissible fade show mb-2`;
notification.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
const container = document.querySelector('.container-fluid');
container.insertAdjacentHTML('afterbegin', alertHtml);
container.appendChild(notification);
// Auto-dismiss after 5 seconds
setTimeout(() => {
const alert = container.querySelector('.alert');
if (alert) {
bootstrap.Alert.getInstance(alert)?.close();
}
notification.remove();
}, 5000);
}
@@ -1163,52 +1161,4 @@ document.getElementById('save-ip-btn').addEventListener('click', saveIp);
document.addEventListener('DOMContentLoaded', loadSites);
</script>
<style>
.stat-card {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
border: 1px solid #475569;
border-radius: 10px;
padding: 20px;
text-align: center;
}
.stat-value {
font-size: 2rem;
font-weight: bold;
color: #60a5fa;
}
.stat-label {
color: #94a3b8;
font-size: 0.875rem;
margin-top: 5px;
}
.card {
background-color: #1e293b;
border: 1px solid #334155;
}
.card-header {
background-color: #334155;
border-bottom: 1px solid #475569;
}
.table {
color: #e2e8f0;
}
.table thead th {
color: #94a3b8;
border-bottom: 1px solid #475569;
}
.table tbody tr {
border-bottom: 1px solid #334155;
}
.table tbody tr:hover {
background-color: #334155;
}
</style>
{% endblock %}