766 lines
35 KiB
HTML
766 lines
35 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Password History - Account Security{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4>Password History</h4>
|
|
<h6>View your password change history and security timeline</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'accounts:password_change' %}" class="btn btn-added">
|
|
<i class="fas fa-key me-1"></i>Change Password
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Security Statistics -->
|
|
<div class="row">
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-history"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.total_changes|default:12 }}</h5>
|
|
<h6>Password Changes</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-calendar"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.days_since_last_change|default:45 }}</h5>
|
|
<h6>Days Since Last Change</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-shield-alt"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.security_score|default:85 }}%</h5>
|
|
<h6>Security Score</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-exclamation-triangle"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.failed_attempts|default:2 }}</h5>
|
|
<h6>Failed Attempts (30d)</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Security Status -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-shield-alt me-2"></i>
|
|
Current Password Security Status
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="security-status">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-calendar-check text-success me-3"></i>
|
|
<div>
|
|
<strong>Last Changed</strong>
|
|
<p class="text-muted small mb-0">{{ last_password_change|default:"45 days ago" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-lock text-primary me-3"></i>
|
|
<div>
|
|
<strong>Password Strength</strong>
|
|
<div class="progress mt-1" style="height: 6px;">
|
|
<div class="progress-bar bg-success" style="width: 85%"></div>
|
|
</div>
|
|
<small class="text-success">Strong</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-clock text-warning me-3"></i>
|
|
<div>
|
|
<strong>Recommended Change</strong>
|
|
<p class="text-muted small mb-0">In {{ days_until_recommended|default:45 }} days</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-history text-info me-3"></i>
|
|
<div>
|
|
<strong>Change Frequency</strong>
|
|
<p class="text-muted small mb-0">Every {{ avg_change_frequency|default:90 }} days average</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="security-recommendations">
|
|
<h6 class="text-info mb-3">
|
|
<i class="fas fa-lightbulb me-2"></i>Security Recommendations
|
|
</h6>
|
|
<div class="recommendation-item mb-2">
|
|
<i class="fas fa-check-circle text-success me-2"></i>
|
|
<small>Use unique passwords for each account</small>
|
|
</div>
|
|
<div class="recommendation-item mb-2">
|
|
<i class="fas fa-check-circle text-success me-2"></i>
|
|
<small>Enable two-factor authentication</small>
|
|
</div>
|
|
<div class="recommendation-item mb-2">
|
|
<i class="fas fa-exclamation-triangle text-warning me-2"></i>
|
|
<small>Change password every 90 days</small>
|
|
</div>
|
|
<div class="recommendation-item">
|
|
<i class="fas fa-info-circle text-info me-2"></i>
|
|
<small>Use a password manager</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password History Table -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-top">
|
|
<div class="search-set">
|
|
<div class="search-input">
|
|
<a class="btn btn-searchset">
|
|
<i class="fas fa-search"></i>
|
|
</a>
|
|
<input type="text" id="searchInput" placeholder="Search password history...">
|
|
</div>
|
|
</div>
|
|
<div class="wordset">
|
|
<ul>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Filter" onclick="toggleFilters()">
|
|
<i class="fas fa-filter"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Export" onclick="exportHistory()">
|
|
<i class="fas fa-download"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Print" onclick="printHistory()">
|
|
<i class="fas fa-print"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters Panel -->
|
|
<div id="filtersPanel" class="filters-panel" style="display: none;">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="dateRange" class="form-label">Date Range</label>
|
|
<select class="form-select" id="dateRange">
|
|
<option value="">All Time</option>
|
|
<option value="7">Last 7 days</option>
|
|
<option value="30">Last 30 days</option>
|
|
<option value="90">Last 90 days</option>
|
|
<option value="365">Last year</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="changeType" class="form-label">Change Type</label>
|
|
<select class="form-select" id="changeType">
|
|
<option value="">All Types</option>
|
|
<option value="user_initiated">User Initiated</option>
|
|
<option value="admin_reset">Admin Reset</option>
|
|
<option value="forced_change">Forced Change</option>
|
|
<option value="security_breach">Security Breach</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="ipAddress" class="form-label">IP Address</label>
|
|
<input type="text" class="form-control" id="ipAddress" placeholder="Filter by IP">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label class="form-label"> </label>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="applyFilters()">
|
|
<i class="fas fa-check me-1"></i>Apply
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearFilters()">
|
|
<i class="fas fa-times me-1"></i>Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password History Table -->
|
|
<div class="table-responsive">
|
|
<table class="table" id="historyTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Date & Time</th>
|
|
<th>Change Type</th>
|
|
<th>IP Address</th>
|
|
<th>Location</th>
|
|
<th>Device/Browser</th>
|
|
<th>Security Score</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Sample Data -->
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<strong>Mar 01, 2024 02:30 PM</strong>
|
|
<small class="d-block text-muted">45 days ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-primary">
|
|
<i class="fas fa-user me-1"></i>User Initiated
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<code>192.168.1.100</code>
|
|
<small class="d-block text-muted">Home Network</small>
|
|
</td>
|
|
<td>
|
|
<div class="location-info">
|
|
<i class="fas fa-map-marker-alt text-muted me-1"></i>
|
|
<span>New York, NY</span>
|
|
<small class="d-block text-muted">United States</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="device-info">
|
|
<i class="fas fa-desktop text-primary me-1"></i>
|
|
<span>Chrome 122</span>
|
|
<small class="d-block text-muted">Windows 11</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="security-score">
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-success" style="width: 85%"></div>
|
|
</div>
|
|
<small class="text-success">85% Strong</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'accounts:password_history_detail' 1 %}" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Security Report" onclick="generateSecurityReport(1)">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<strong>Jan 15, 2024 09:15 AM</strong>
|
|
<small class="d-block text-muted">3 months ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-warning">
|
|
<i class="fas fa-exclamation-triangle me-1"></i>Forced Change
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<code>10.0.0.50</code>
|
|
<small class="d-block text-muted">Office Network</small>
|
|
</td>
|
|
<td>
|
|
<div class="location-info">
|
|
<i class="fas fa-map-marker-alt text-muted me-1"></i>
|
|
<span>New York, NY</span>
|
|
<small class="d-block text-muted">United States</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="device-info">
|
|
<i class="fas fa-mobile-alt text-success me-1"></i>
|
|
<span>Safari 17</span>
|
|
<small class="d-block text-muted">iOS 17.2</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="security-score">
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-warning" style="width: 65%"></div>
|
|
</div>
|
|
<small class="text-warning">65% Medium</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'accounts:password_history_detail' 2 %}" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Security Report" onclick="generateSecurityReport(2)">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<strong>Dec 20, 2023 11:45 PM</strong>
|
|
<small class="d-block text-muted">4 months ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-danger">
|
|
<i class="fas fa-shield-alt me-1"></i>Security Breach
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<code>203.0.113.45</code>
|
|
<small class="d-block text-muted">Unknown Network</small>
|
|
</td>
|
|
<td>
|
|
<div class="location-info">
|
|
<i class="fas fa-map-marker-alt text-danger me-1"></i>
|
|
<span>Unknown</span>
|
|
<small class="d-block text-danger">Suspicious Location</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="device-info">
|
|
<i class="fas fa-question-circle text-danger me-1"></i>
|
|
<span>Unknown</span>
|
|
<small class="d-block text-danger">Suspicious Device</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="security-score">
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-success" style="width: 90%"></div>
|
|
</div>
|
|
<small class="text-success">90% Strong</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'accounts:password_history_detail' 3 %}" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Security Report" onclick="generateSecurityReport(3)">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</a>
|
|
<a class="text-danger" href="#" data-bs-toggle="tooltip" title="Security Incident" onclick="viewSecurityIncident(3)">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<strong>Nov 10, 2023 04:20 PM</strong>
|
|
<small class="d-block text-muted">5 months ago</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-info">
|
|
<i class="fas fa-user-shield me-1"></i>Admin Reset
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<code>192.168.1.100</code>
|
|
<small class="d-block text-muted">Home Network</small>
|
|
</td>
|
|
<td>
|
|
<div class="location-info">
|
|
<i class="fas fa-map-marker-alt text-muted me-1"></i>
|
|
<span>New York, NY</span>
|
|
<small class="d-block text-muted">United States</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="device-info">
|
|
<i class="fas fa-desktop text-primary me-1"></i>
|
|
<span>Firefox 119</span>
|
|
<small class="d-block text-muted">Windows 11</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="security-score">
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-success" style="width: 80%"></div>
|
|
</div>
|
|
<small class="text-success">80% Strong</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a class="me-3" href="{% url 'accounts:password_history_detail' 4 %}" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Security Report" onclick="generateSecurityReport(4)">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div class="dataTables_info">
|
|
Showing 1 to 4 of 12 entries
|
|
</div>
|
|
<nav aria-label="Password history pagination">
|
|
<ul class="pagination pagination-sm mb-0">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" tabindex="-1">Previous</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Insights -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-chart-line me-2"></i>
|
|
Password Security Trends
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="securityTrendChart" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
Security Alerts
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-warning">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-clock me-3"></i>
|
|
<div>
|
|
<strong>Password Age Warning</strong>
|
|
<p class="mb-0 small">Your password is 45 days old. Consider changing it soon.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-shield-alt me-3"></i>
|
|
<div>
|
|
<strong>Security Improvement</strong>
|
|
<p class="mb-0 small">Enable 2FA for enhanced account security.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-success">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-check-circle me-3"></i>
|
|
<div>
|
|
<strong>Good Security Practice</strong>
|
|
<p class="mb-0 small">You're using a strong password. Keep it up!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize search functionality
|
|
const searchInput = document.getElementById('searchInput');
|
|
searchInput.addEventListener('keyup', function() {
|
|
filterHistory();
|
|
});
|
|
|
|
// Initialize tooltips
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
|
|
// Initialize security trend chart
|
|
initializeSecurityChart();
|
|
});
|
|
|
|
function filterHistory() {
|
|
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
const table = document.getElementById('historyTable');
|
|
const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
|
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
const row = rows[i];
|
|
const text = row.textContent.toLowerCase();
|
|
|
|
if (text.includes(searchTerm)) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleFilters() {
|
|
const filtersPanel = document.getElementById('filtersPanel');
|
|
filtersPanel.style.display = filtersPanel.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
|
|
function applyFilters() {
|
|
const dateRange = document.getElementById('dateRange').value;
|
|
const changeType = document.getElementById('changeType').value;
|
|
const ipAddress = document.getElementById('ipAddress').value;
|
|
|
|
console.log('Applying filters:', { dateRange, changeType, ipAddress });
|
|
alert('Filters applied successfully!');
|
|
}
|
|
|
|
function clearFilters() {
|
|
document.getElementById('dateRange').value = '';
|
|
document.getElementById('changeType').value = '';
|
|
document.getElementById('ipAddress').value = '';
|
|
|
|
// Reset table display
|
|
const table = document.getElementById('historyTable');
|
|
const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
|
|
for (let i = 0; i < rows.length; i++) {
|
|
rows[i].style.display = '';
|
|
}
|
|
}
|
|
|
|
function generateSecurityReport(historyId) {
|
|
alert(`Generating security report for password change ${historyId}...`);
|
|
}
|
|
|
|
function viewSecurityIncident(historyId) {
|
|
alert(`Viewing security incident details for password change ${historyId}...`);
|
|
}
|
|
|
|
function exportHistory() {
|
|
console.log('Exporting password history...');
|
|
alert('Export functionality would be implemented here.');
|
|
}
|
|
|
|
function printHistory() {
|
|
console.log('Printing password history...');
|
|
window.print();
|
|
}
|
|
|
|
function initializeSecurityChart() {
|
|
const ctx = document.getElementById('securityTrendChart').getContext('2d');
|
|
|
|
// Sample data for security trend
|
|
const data = {
|
|
labels: ['Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr'],
|
|
datasets: [{
|
|
label: 'Security Score',
|
|
data: [75, 80, 65, 85, 85, 85],
|
|
borderColor: '#28a745',
|
|
backgroundColor: 'rgba(40, 167, 69, 0.1)',
|
|
borderWidth: 2,
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
};
|
|
|
|
const config = {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
new Chart(ctx, config);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.dash-widget {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dash-widget .dash-widgetimg span {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.dash-widget .dash-widgetcontent h5 {
|
|
color: white;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
.dash-widget .dash-widgetcontent h6 {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 14px;
|
|
margin: 0;
|
|
}
|
|
|
|
.filters-panel {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.status-item {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.security-score .progress {
|
|
width: 80px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.location-info,
|
|
.device-info {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.recommendation-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
height: 200px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.filters-panel .row {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.filters-panel .col-md-3 {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.location-info,
|
|
.device-info {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.security-score {
|
|
text-align: center;
|
|
}
|
|
|
|
.table-responsive {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|