Spaces:
Sleeping
Sleeping
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>InterroGen - {% block title %}Intelligent Interrogation Assistant{% endblock %}</title> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" rel="stylesheet"> | |
<style> | |
:root { | |
--primary: #3f6ad8; --secondary: #6c757d; --success: #3ac47d; --info: #16aaff; | |
--warning: #f7b924; --danger: #d92550; --light: #eee; --dark: #343a40; | |
--bg-light: #f8f9fa; --text-muted: #6c757d; | |
} | |
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f7fa; color: #495057; } | |
.sidebar { | |
background-color: white; | |
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); | |
height: 100vh; | |
position: fixed; | |
z-index: 100; | |
width: 280px; /* Fixed width for sidebar */ | |
overflow-y: auto; /* Scroll for sidebar if content overflows */ | |
} | |
.sidebar .nav-link { | |
color: #495057; | |
border-radius: 0.25rem; | |
margin: 0.25rem 0.5rem; | |
padding: 0.75rem 1rem; | |
transition: all 0.2s; | |
} | |
.sidebar .nav-link:hover, .sidebar .nav-link.active { | |
background-color: var(--primary); | |
color: white; | |
} | |
.sidebar .nav-link i { | |
margin-right: 0.75rem; | |
width: 1.25rem; | |
text-align: center; | |
} | |
.logo-wrapper { | |
padding: 1.5rem 1rem; | |
border-bottom: 1px solid rgba(0,0,0,0.05); | |
} | |
.logo { | |
font-size: 1.5rem; | |
font-weight: 700; | |
color: var(--primary); | |
display: flex; | |
align-items: center; | |
} | |
.main-content { | |
margin-left: 280px; /* Same as sidebar width */ | |
padding: 0; /* Remove padding, will be handled by wrappers */ | |
} | |
.top-bar-wrapper { | |
padding: 2rem 2rem 0 2rem; /* Padding for the container of top-bar */ | |
} | |
.page-content-wrapper { | |
padding: 2rem; /* Padding for the actual page content */ | |
} | |
.card { | |
border: none; | |
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); | |
margin-bottom: 1.5rem; | |
border-radius: 0.5rem; | |
} | |
.card-header { | |
background-color: white; | |
border-bottom: 1px solid rgba(0,0,0,0.05); | |
font-weight: 600; | |
padding: 1.25rem 1.5rem; | |
} | |
.top-bar { | |
background-color: white; | |
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); | |
padding: 1rem 2rem; | |
border-radius: 0.5rem; | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.search-wrapper { | |
position: relative; | |
width: 300px; | |
} | |
.search-wrapper i { | |
position: absolute; | |
left: 1rem; | |
top: 50%; | |
transform: translateY(-50%); | |
color: var(--text-muted); | |
} | |
.search-input { | |
padding-left: 2.5rem; | |
border-radius: 2rem; | |
background-color: #f5f7fa; | |
border: none; | |
} | |
.user-menu { | |
display: flex; | |
align-items: center; | |
} | |
.user-avatar { | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background-color: var(--primary); | |
color: white; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
font-weight: 600; | |
margin-right: 0.75rem; | |
} | |
.btn-primary { | |
background-color: var(--primary); | |
border-color: var(--primary); | |
} | |
.btn-primary:hover { | |
background-color: #3257b3; | |
border-color: #3257b3; | |
} | |
.btn-outline-primary { | |
color: var(--primary); | |
border-color: var(--primary); | |
} | |
.btn-outline-primary:hover { | |
background-color: var(--primary); | |
color: white; | |
} | |
.dropdown-item i { | |
margin-right: 0.5rem; | |
width: 1rem; | |
text-align: center; | |
} | |
.heading-container { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-bottom: 1.5rem; | |
} | |
</style> | |
{% block head_extra %}{% endblock %} | |
</head> | |
<body> | |
<!-- Sidebar --> | |
<div class="sidebar"> | |
<div class="logo-wrapper"> | |
<div class="logo"> | |
<i class="bi bi-shield-lock-fill me-2"></i> InterroGen | |
</div> | |
</div> | |
<div class="position-sticky pt-3"> | |
<ul class="nav flex-column"> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint == 'dashboard' %}active{% endif %}" href="{{ url_for('dashboard') }}"><i class="bi bi-grid-1x2-fill"></i> Dashboard</a></li> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint in ['manage_cases', 'view_case'] %}active{% endif %}" href="{{ url_for('manage_cases') }}"><i class="bi bi-folder2-open"></i> Cases</a></li> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint == 'interrogations_page' %}active{% endif %}" href="{{ url_for('interrogations_page') }}"><i class="bi bi-chat-square-text-fill"></i> Interrogations</a></li> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint in ['reports_list_page', 'view_report'] %}active{% endif %}" href="{{ url_for('reports_list_page') }}"><i class="bi bi-file-earmark-text-fill"></i> Reports</a></li> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint == 'regional_guidelines_page' %}active{% endif %}" href="{{ url_for('regional_guidelines_page') }}"><i class="bi bi-globe"></i> Regional Guidelines</a></li> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint == 'team' %}active{% endif %}" href="{{ url_for('team') }}"><i class="bi bi-people-fill"></i> Team</a></li> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint == 'analytics' %}active{% endif %}" href="{{ url_for('analytics') }}"><i class="bi bi-graph-up"></i> Analytics</a></li> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint == 'evidence' %}active{% endif %}" href="{{ url_for('evidence') }}"><i class="bi bi-archive-fill"></i> Evidence</a></li> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint == 'settings' %}active{% endif %}" href="{{ url_for('settings') }}"><i class="bi bi-gear-fill"></i> Settings</a></li> | |
<li class="nav-item"><a class="nav-link {% if request.endpoint == 'help' %}active{% endif %}" href="{{ url_for('help') }}"><i class="bi bi-question-circle-fill"></i> Help</a></li> | |
</ul> | |
</div> | |
</div> | |
<!-- Main Content --> | |
<div class="main-content"> | |
<!-- Top bar --> | |
<div class="top-bar-wrapper"> | |
<div class="top-bar"> | |
<div class="search-wrapper"> | |
<i class="bi bi-search"></i> | |
<input type="text" class="form-control search-input" placeholder="Search cases, reports..."> | |
</div> | |
<div class="user-menu"> | |
<div class="dropdown"> | |
<a class="btn btn-sm btn-primary me-3" href="{{ url_for('manage_cases', action='new') }}" role="button"> | |
<i class="bi bi-plus-lg"></i> New Case | |
</a> | |
<button class="btn" type="button" id="notificationDropdown" data-bs-toggle="dropdown" aria-expanded="false"> | |
<i class="bi bi-bell position-relative"> | |
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3<span class="visually-hidden">unread messages</span></span> | |
</i> | |
</button> | |
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notificationDropdown"> | |
<li><h6 class="dropdown-header">Notifications</h6></li> | |
<li><a class="dropdown-item" href="#"><i class="bi bi-file-earmark-text"></i> New report available</a></li> | |
<li><a class="dropdown-item" href="#"><i class="bi bi-person-plus"></i> New team member added</a></li> | |
<li><a class="dropdown-item" href="#"><i class="bi bi-exclamation-triangle"></i> Case status updated</a></li> | |
<li><hr class="dropdown-divider"></li> | |
<li><a class="dropdown-item text-center" href="#">View all</a></li> | |
</ul> | |
</div> | |
<div class="dropdown"> | |
<a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false"> | |
<div class="user-avatar">JD</div> | |
<div> | |
<div class="fw-bold">John Doe</div> | |
<div class="small text-muted">Senior Investigator</div> | |
</div> | |
</a> | |
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown"> | |
<li><a class="dropdown-item" href="#"><i class="bi bi-person"></i> Profile</a></li> | |
<li><a class="dropdown-item" href="#"><i class="bi bi-gear"></i> Settings</a></li> | |
<li><a class="dropdown-item" href="#"><i class="bi bi-activity"></i> Activity Log</a></li> | |
<li><hr class="dropdown-divider"></li> | |
<li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right"></i> Sign out</a></li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Page specific content --> | |
<div class="page-content-wrapper"> | |
{% block page_content %}{% endblock %} | |
</div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> | |
{% block scripts %}{% endblock %} | |
</body> | |
</html> | |