InterroGen / app /templates /base_layout.html
yasserrmd's picture
Upload 21 files
e6ecc60 verified
<!DOCTYPE html>
<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>