use this design and add those tables inside it. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UNIVOTE: ADMIN DASHBOARD</title>
<link rel="stylesheet" href="static/css/admin_dash.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
.dashboard-content {
flex: 1;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* Dashboard Grid Layout */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.dashboard-card {
background-color: var(--card-bg);
border-radius: 8px;
box-shadow: 0 2px 10px var(--shadow);
padding: 1.5rem;
border-left: 4px solid var(--primary);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
color: var(--primary-dark);
}
.card-icon {
font-size: 1.5rem;
color: var(--primary);
}
/* Position Participation */
.position-item {
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px dashed var(--border);
}
.position-name {
font-weight: bold;
margin-bottom: 0.25rem;
}
.progress-container {
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
margin: 0.5rem 0;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: var(--primary);
border-radius: 4px;
}
.position-stats {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--text);
}
/* Department Activity */
.department-chart {
height: 200px;
margin: 1rem 0;
position: relative;
}
.department-legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.legend-item {
display: flex;
align-items: center;
font-size: 0.8rem;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
margin-right: 0.5rem;
}
/* Voting Timeline */
.timeline-container {
margin: 1rem 0;
}
.time-remaining {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-dark);
margin: 1rem 0;
text-align: center;
}
.time-progress {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.time-label {
font-size: 0.85rem;
}
/* Activity Feed */
.activity-feed {
max-height: 300px;
overflow-y: auto;
}
.activity-item {
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
.activity-time {
font-size: 0.75rem;
color: #888;
margin-bottom: 0.25rem;
}
.activity-text {
font-size: 0.9rem;
}
/* Flagged Issues */
.issues-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
.issues-table th,
.issues-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.issues-table th {
background-color: var(--primary-light);
color: var(--text-light);
}
.issue-type {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: bold;
}
.issue-critical {
background-color: var(--danger);
color: white;
}
.issue-warning {
background-color: var(--warning);
color: var(--text);
}
.issue-info {
background-color: var(--info);
color: white;
}
/* Export Controls */
.export-controls {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.export-btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
background-color: var(--primary);
color: var(--text-light);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
}
.export-btn:hover {
background-color: var(--primary-dark);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.nav-list {
flex-wrap: wrap;
justify-content: center;
}
}
.user-card {
width: 300px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-header {
background: white;
color: green;
padding: 15px;
font-size: 18px;
font-weight: bold;
}
.user-list {
list-style: none;
padding: 0;
margin: 0;
}
.user-item {
display: flex;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #eee;
}
.user-item:last-child {
border-bottom: none;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #e0e0e0;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #666;
font-weight: bold;
}
.user-name {
font-weight: 500;
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #4caf50;
margin-left: auto;
}
</style>
</head>
<body>
<div class="dashboard">
<header class="dashboard-header">
<div class="header-content">
<h1>UNIVOTE</h1>
<div class="header-actions">
<button id="theme-toggle" class="btn">🌙 Dark Mode</button>
</div>
</div>
</header>
<nav class="dashboard-nav">
<ul class="nav-list">
<li class="nav-item"><a href="{{ url_for('admin_dashboard') }}" class="active">Home</a></li>
<li class="nav-item"><a href="{{ url_for('manage_students') }}">Manage Students</a></li>
<li class="nav-item"><a href="{{ url_for('manage_poll') }}">Manage Poll</a></li>
<li class="nav-item"><a href="{{ url_for('manage_candidates') }}">Manage Candidates</a></li>
<li class="nav-item"><a href="{{ url_for('manage_settings') }}">Manage Voting Settings</a></li>
<li class="nav-item"><a href="{{ url_for('logout') }}"
onclick="return confirm('Are you sure you want to logout?');">Logout</a></li>
<li class="nav-item"><a href="#">Help</a></li>
</ul>
</nav>
<main class="dashboard-content">
<!-- Position Participation Card -->
<div class="dashboard-card">
<div class="user-card">
<div class="card-header">Active Users ({{ active_users|length }})</div>
<ul class="user-list">
{% for user in active_users %}
<li class="user-item">
<div class="user-avatar">
{{ user.first_name[0] }}{{ user.last_name[0] }}
</div>
<span class="user-name">
{{ user.first_name }} {{ user.last_name }}
{% if user.school_id == admin.school_id %}
(You)
{% endif %}
</span>
<div class="status-indicator"></div>
</li>
{% endfor %}
</ul>
</div>
</div>
<br>
<hr>
<br>
<!-- Export Controls Card -->
<div class="dashboard-card">
<div class="card-header">
<h2 class="card-title">📁 Export / Download Controls</h2>
<span class="card-icon"><i class="fas fa-download"></i></span>
</div>
<div class="export-controls">
<button class="export-btn">
<i class="fas fa-file-csv"></i> Export Votes (CSV)
</button>
<button class="export-btn">
<i class="fas fa-file-excel"></i> Voter Turnout Summary
</button>
<button class="export-btn">
<i class="fas fa-database"></i> System Backup
</button>
<button class="export-btn">
<i class="fas fa-archive"></i> Archive Election
</button>
</div>
</div>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.getElementById('theme-toggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
// Check for saved theme or use preferred color scheme
const currentTheme = localStorage.getItem('theme') ||
(prefersDarkScheme.matches ? 'dark' : 'light');
if (currentTheme === 'dark') {
document.body.setAttribute('data-theme', 'dark');
themeToggle.textContent = '☀️ Light Mode';
}
themeToggle.addEventListener('click', () => {
let theme;
if (document.body.getAttribute('data-theme') === 'dark') {
document.body.removeAttribute('data-theme');
theme = 'light';
themeToggle.textContent = '🌙 Dark Mode';
} else {
document.body.setAttribute('data-theme', 'dark');
theme = 'dark';
themeToggle.textContent = '☀️ Light Mode';
}
localStorage.setItem('theme', theme);
});
});
</script>
</body>
</html>