686 lines
34 KiB
HTML
686 lines
34 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Password Change Details - 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>
|
|
<a href="{% url 'accounts:password_history_list' %}" class="me-3">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
Password Change Details
|
|
</h4>
|
|
<h6>Detailed information about this password change event</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<button class="btn btn-outline-primary me-2" onclick="generateSecurityReport()">
|
|
<i class="fas fa-file-alt me-1"></i>Security Report
|
|
</button>
|
|
<button class="btn btn-outline-secondary" onclick="printDetails()">
|
|
<i class="fas fa-print me-1"></i>Print
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Main Details -->
|
|
<div class="col-lg-8 col-md-12">
|
|
<!-- Change Summary -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Change Summary
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="change-summary">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="summary-item mb-4">
|
|
<div class="d-flex align-items-center">
|
|
{% if object.change_type == 'user_initiated' %}
|
|
<i class="fas fa-user fa-2x text-primary me-3"></i>
|
|
{% elif object.change_type == 'admin_reset' %}
|
|
<i class="fas fa-user-shield fa-2x text-info me-3"></i>
|
|
{% elif object.change_type == 'forced_change' %}
|
|
<i class="fas fa-exclamation-triangle fa-2x text-warning me-3"></i>
|
|
{% elif object.change_type == 'security_breach' %}
|
|
<i class="fas fa-shield-alt fa-2x text-danger me-3"></i>
|
|
{% endif %}
|
|
<div>
|
|
<h6 class="mb-1">Change Type</h6>
|
|
<span class="badge
|
|
{% if object.change_type == 'user_initiated' %}bg-primary
|
|
{% elif object.change_type == 'admin_reset' %}bg-info
|
|
{% elif object.change_type == 'forced_change' %}bg-warning
|
|
{% elif object.change_type == 'security_breach' %}bg-danger
|
|
{% endif %}">
|
|
{{ object.change_type|default:"User Initiated"|title }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="summary-item mb-4">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-calendar-alt fa-2x text-success me-3"></i>
|
|
<div>
|
|
<h6 class="mb-1">Date & Time</h6>
|
|
<div>
|
|
<strong>{{ object.created_at|default:"Mar 01, 2024 02:30 PM"|date:"M d, Y g:i A" }}</strong>
|
|
<small class="d-block text-muted">{{ object.created_at|default:"45 days ago"|timesince }} ago</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="summary-item mb-4">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-network-wired fa-2x text-info me-3"></i>
|
|
<div>
|
|
<h6 class="mb-1">IP Address</h6>
|
|
<div>
|
|
<code>{{ object.ip_address|default:"192.168.1.100" }}</code>
|
|
<small class="d-block text-muted">{{ object.network_type|default:"Home Network" }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="summary-item mb-4">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-shield-alt fa-2x text-success me-3"></i>
|
|
<div>
|
|
<h6 class="mb-1">Security Score</h6>
|
|
<div>
|
|
<div class="progress mb-1" style="height: 8px; width: 120px;">
|
|
<div class="progress-bar bg-success" style="width: {{ object.security_score|default:85 }}%"></div>
|
|
</div>
|
|
<strong class="text-success">{{ object.security_score|default:85 }}% Strong</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location & Device Information -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-map-marker-alt me-2"></i>
|
|
Location & Device Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="location-details">
|
|
<h6 class="mb-3">
|
|
<i class="fas fa-globe me-2"></i>Geographic Location
|
|
</h6>
|
|
<div class="location-info">
|
|
<div class="info-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">Country:</span>
|
|
<strong>{{ object.country|default:"United States" }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">State/Region:</span>
|
|
<strong>{{ object.region|default:"New York" }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">City:</span>
|
|
<strong>{{ object.city|default:"New York" }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">ISP:</span>
|
|
<strong>{{ object.isp|default:"Verizon Communications" }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">Timezone:</span>
|
|
<strong>{{ object.timezone|default:"EST (UTC-5)" }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="device-details">
|
|
<h6 class="mb-3">
|
|
<i class="fas fa-desktop me-2"></i>Device & Browser
|
|
</h6>
|
|
<div class="device-info">
|
|
<div class="info-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">Device Type:</span>
|
|
<strong>
|
|
<i class="fas fa-desktop text-primary me-1"></i>
|
|
{{ object.device_type|default:"Desktop" }}
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">Operating System:</span>
|
|
<strong>{{ object.os|default:"Windows 11" }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">Browser:</span>
|
|
<strong>{{ object.browser|default:"Chrome 122.0" }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">Screen Resolution:</span>
|
|
<strong>{{ object.screen_resolution|default:"1920x1080" }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="text-muted">User Agent:</span>
|
|
<small class="text-truncate" style="max-width: 200px;" title="{{ object.user_agent|default:'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' }}">
|
|
{{ object.user_agent|default:"Mozilla/5.0 (Windows NT 10.0; Win64; x64)..." }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Security Analysis -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-lock me-2"></i>
|
|
Password Security Analysis
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="security-analysis">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="analysis-section">
|
|
<h6 class="mb-3">
|
|
<i class="fas fa-chart-bar me-2"></i>Strength Metrics
|
|
</h6>
|
|
<div class="metric-item mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Length</span>
|
|
<div class="d-flex align-items-center">
|
|
<div class="progress me-2" style="width: 100px; height: 6px;">
|
|
<div class="progress-bar bg-success" style="width: 90%"></div>
|
|
</div>
|
|
<span class="badge bg-success">Excellent</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="metric-item mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Complexity</span>
|
|
<div class="d-flex align-items-center">
|
|
<div class="progress me-2" style="width: 100px; height: 6px;">
|
|
<div class="progress-bar bg-success" style="width: 85%"></div>
|
|
</div>
|
|
<span class="badge bg-success">Strong</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="metric-item mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Uniqueness</span>
|
|
<div class="d-flex align-items-center">
|
|
<div class="progress me-2" style="width: 100px; height: 6px;">
|
|
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
|
</div>
|
|
<span class="badge bg-warning">Good</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="metric-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Dictionary Check</span>
|
|
<div class="d-flex align-items-center">
|
|
<div class="progress me-2" style="width: 100px; height: 6px;">
|
|
<div class="progress-bar bg-success" style="width: 95%"></div>
|
|
</div>
|
|
<span class="badge bg-success">Passed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="analysis-section">
|
|
<h6 class="mb-3">
|
|
<i class="fas fa-shield-alt me-2"></i>Security Features
|
|
</h6>
|
|
<div class="feature-item mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-check-circle text-success me-2"></i>
|
|
<span>Contains uppercase letters</span>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-check-circle text-success me-2"></i>
|
|
<span>Contains lowercase letters</span>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-check-circle text-success me-2"></i>
|
|
<span>Contains numbers</span>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-check-circle text-success me-2"></i>
|
|
<span>Contains special characters</span>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-times-circle text-warning me-2"></i>
|
|
<span>No common patterns detected</span>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-check-circle text-success me-2"></i>
|
|
<span>Not in breach databases</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Change Context -->
|
|
{% if object.change_reason or object.notes %}
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-comment-alt me-2"></i>
|
|
Change Context
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if object.change_reason %}
|
|
<div class="context-item mb-3">
|
|
<h6>Reason for Change</h6>
|
|
<p class="text-muted">{{ object.change_reason|default:"User requested password update for enhanced security." }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if object.notes %}
|
|
<div class="context-item">
|
|
<h6>Additional Notes</h6>
|
|
<p class="text-muted">{{ object.notes|default:"Password changed successfully with no issues detected." }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4 col-md-12">
|
|
<!-- Security Status -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-shield-alt me-2"></i>
|
|
Security Status
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="security-status">
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Risk Level</span>
|
|
<span class="badge
|
|
{% if object.risk_level == 'low' %}bg-success
|
|
{% elif object.risk_level == 'medium' %}bg-warning
|
|
{% elif object.risk_level == 'high' %}bg-danger
|
|
{% else %}bg-success
|
|
{% endif %}">
|
|
{{ object.risk_level|default:"Low"|title }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Verification Status</span>
|
|
<span class="badge bg-success">
|
|
<i class="fas fa-check-circle me-1"></i>Verified
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-item mb-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Location Trust</span>
|
|
<span class="badge
|
|
{% if object.location_trusted %}bg-success
|
|
{% else %}bg-warning
|
|
{% endif %}">
|
|
{% if object.location_trusted|default:True %}Trusted{% else %}Unknown{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Device Trust</span>
|
|
<span class="badge
|
|
{% if object.device_trusted %}bg-success
|
|
{% else %}bg-warning
|
|
{% endif %}">
|
|
{% if object.device_trusted|default:True %}Trusted{% else %}Unknown{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Related Events -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-history me-2"></i>
|
|
Related Events
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-primary"></div>
|
|
<div class="timeline-content">
|
|
<h6 class="mb-1">Password Changed</h6>
|
|
<small class="text-muted">{{ object.created_at|default:"Mar 01, 2024 02:30 PM"|date:"M d, Y g:i A" }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-info"></div>
|
|
<div class="timeline-content">
|
|
<h6 class="mb-1">Email Notification Sent</h6>
|
|
<small class="text-muted">{{ object.created_at|default:"Mar 01, 2024 02:31 PM"|date:"M d, Y g:i A" }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-success"></div>
|
|
<div class="timeline-content">
|
|
<h6 class="mb-1">Security Verification</h6>
|
|
<small class="text-muted">{{ object.created_at|default:"Mar 01, 2024 02:32 PM"|date:"M d, Y g:i A" }}</small>
|
|
</div>
|
|
</div>
|
|
{% if object.change_type == 'security_breach' %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-danger"></div>
|
|
<div class="timeline-content">
|
|
<h6 class="mb-1">Security Alert Triggered</h6>
|
|
<small class="text-muted">{{ object.created_at|default:"Mar 01, 2024 02:25 PM"|date:"M d, Y g:i A" }}</small>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-bolt me-2"></i>
|
|
Quick Actions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-outline-primary" onclick="generateSecurityReport()">
|
|
<i class="fas fa-file-alt me-2"></i>Generate Security Report
|
|
</button>
|
|
<button class="btn btn-outline-info" onclick="checkSimilarEvents()">
|
|
<i class="fas fa-search me-2"></i>Find Similar Events
|
|
</button>
|
|
<button class="btn btn-outline-warning" onclick="flagForReview()">
|
|
<i class="fas fa-flag me-2"></i>Flag for Review
|
|
</button>
|
|
{% if object.change_type == 'security_breach' %}
|
|
<button class="btn btn-outline-danger" onclick="viewIncidentReport()">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>View Incident Report
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Recommendations -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-lightbulb me-2"></i>
|
|
Security Recommendations
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="recommendations">
|
|
<div class="recommendation-item mb-3">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-shield-alt text-success me-2 mt-1"></i>
|
|
<div>
|
|
<small><strong>Enable 2FA</strong></small>
|
|
<p class="text-muted small mb-0">Add an extra layer of security to your account.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="recommendation-item mb-3">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-clock text-warning me-2 mt-1"></i>
|
|
<div>
|
|
<small><strong>Regular Updates</strong></small>
|
|
<p class="text-muted small mb-0">Change your password every 90 days.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="recommendation-item">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-key text-info me-2 mt-1"></i>
|
|
<div>
|
|
<small><strong>Password Manager</strong></small>
|
|
<p class="text-muted small mb-0">Use a password manager for unique passwords.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function generateSecurityReport() {
|
|
alert('Generating comprehensive security report for this password change...');
|
|
}
|
|
|
|
function checkSimilarEvents() {
|
|
alert('Searching for similar password change events...');
|
|
}
|
|
|
|
function flagForReview() {
|
|
if (confirm('Flag this password change event for security review?')) {
|
|
alert('Event flagged for security team review.');
|
|
}
|
|
}
|
|
|
|
function viewIncidentReport() {
|
|
alert('Opening detailed security incident report...');
|
|
}
|
|
|
|
function printDetails() {
|
|
window.print();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.change-summary {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.summary-item {
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
background: white;
|
|
}
|
|
|
|
.location-details,
|
|
.device-details {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.info-item {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.info-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.security-analysis {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.analysis-section {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
height: 100%;
|
|
}
|
|
|
|
.metric-item,
|
|
.feature-item {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.status-item {
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.status-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: #dee2e6;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.timeline-marker {
|
|
position: absolute;
|
|
left: -25px;
|
|
top: 5px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.timeline-content h6 {
|
|
margin-bottom: 5px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.recommendation-item {
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.recommendation-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.change-summary .row {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.summary-item {
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.location-details,
|
|
.device-details {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.analysis-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.d-flex.justify-content-between {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|