chelsea
e821a26b48
- Flask-based web application with PostgreSQL - User authentication and session management - Content moderation and filtering - Docker deployment with docker-compose - Admin interface for content management 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
580 lines
19 KiB
HTML
580 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Panel - BalanceBoard</title>
|
|
<link rel="stylesheet" href="{{ url_for('serve_theme', filename='modern-card-ui/styles.css') }}">
|
|
<style>
|
|
.admin-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.admin-header {
|
|
background: linear-gradient(135deg, var(--primary-dark) 0%, #2a5068 100%);
|
|
color: white;
|
|
padding: 32px;
|
|
border-radius: 12px;
|
|
margin-bottom: 24px;
|
|
border-bottom: 3px solid var(--primary-color);
|
|
}
|
|
|
|
.admin-header h1 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.admin-header p {
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.admin-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
border-bottom: 2px solid var(--divider-color);
|
|
}
|
|
|
|
.tab-btn {
|
|
padding: 12px 24px;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
color: var(--primary-color);
|
|
border-bottom-color: var(--primary-color);
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.admin-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--surface-color);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 4px var(--surface-elevation-1);
|
|
border-left: 4px solid var(--primary-color);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.admin-section {
|
|
background: var(--surface-color);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 2px 4px var(--surface-elevation-1);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.users-table {
|
|
background: var(--surface-color);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px var(--surface-elevation-1);
|
|
}
|
|
|
|
.users-table table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.users-table th {
|
|
background: var(--primary-dark);
|
|
color: white;
|
|
padding: 16px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.users-table td {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.users-table tr:hover {
|
|
background: var(--hover-overlay);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.badge-admin {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.badge-user {
|
|
background: var(--background-color);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.badge-active {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.badge-inactive {
|
|
background: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 6px 12px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.action-btn-primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.action-btn-primary:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
|
|
.action-btn-danger {
|
|
background: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.action-btn-danger:hover {
|
|
background: #c82333;
|
|
}
|
|
|
|
.action-btn-warning {
|
|
background: #ffc107;
|
|
color: #212529;
|
|
}
|
|
|
|
.action-btn-warning:hover {
|
|
background: #e0a800;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-block;
|
|
margin-bottom: 16px;
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.back-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.flash-messages {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.flash-message {
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.flash-message.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.flash-message.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.flash-message.warning {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.system-info {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.info-card {
|
|
background: var(--background-color);
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
border-left: 3px solid var(--primary-color);
|
|
}
|
|
|
|
.info-card h4 {
|
|
margin: 0 0 8px 0;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.info-card p {
|
|
margin: 4px 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--divider-color);
|
|
border-radius: 6px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: var(--primary-color);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.admin-tabs {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.admin-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.system-info {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="admin-container">
|
|
<a href="{{ url_for('index') }}" class="back-link">← Back to Feed</a>
|
|
|
|
<div class="admin-header">
|
|
<h1>Admin Panel</h1>
|
|
<p>Manage users, content, and system settings</p>
|
|
</div>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="flash-messages">
|
|
{% for category, message in messages %}
|
|
<div class="flash-message {{ category }}">{{ message }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="admin-tabs">
|
|
<button class="tab-btn active" onclick="showTab('overview')">Overview</button>
|
|
<button class="tab-btn" onclick="showTab('users')">Users</button>
|
|
<button class="tab-btn" onclick="showTab('content')">Content</button>
|
|
<button class="tab-btn" onclick="showTab('system')">System</button>
|
|
</div>
|
|
|
|
<!-- Overview Tab -->
|
|
<div id="overview" class="tab-content active">
|
|
<div class="admin-stats">
|
|
<div class="stat-card">
|
|
<div class="stat-number">{{ users|length }}</div>
|
|
<div class="stat-label">Total Users</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">{{ users|selectattr('3', 'equalto', 1)|list|length }}</div>
|
|
<div class="stat-label">Admins</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">{{ users|selectattr('5', 'ne', None)|list|length }}</div>
|
|
<div class="stat-label">Active Users</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">73</div>
|
|
<div class="stat-label">Total Posts</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">1,299</div>
|
|
<div class="stat-label">Total Comments</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">3</div>
|
|
<div class="stat-label">Content Sources</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h3 class="section-title">Recent Activity</h3>
|
|
<div class="system-info">
|
|
<div class="info-card">
|
|
<h4>Latest User</h4>
|
|
<p><strong>{{ users[-1].username if users else 'None' }}</strong></p>
|
|
<p>Joined: {{ users[-1].created_at.strftime('%Y-%m-%d') if users and users[-1].created_at else 'N/A' }}</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>System Status</h4>
|
|
<p><strong>🟢 Operational</strong></p>
|
|
<p>Last update: Just now</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Storage Usage</h4>
|
|
<p><strong>~50 MB</strong></p>
|
|
<p>Posts and comments</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Tab -->
|
|
<div id="users" class="tab-content">
|
|
<div class="admin-section">
|
|
<h3 class="section-title">User Management</h3>
|
|
<div class="users-table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Email</th>
|
|
<th>Role</th>
|
|
<th>Status</th>
|
|
<th>Created</th>
|
|
<th>Last Login</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for user in users %}
|
|
<tr>
|
|
<td>
|
|
<div class="user-info">
|
|
<div class="user-avatar">{{ user.username[:2].upper() }}</div>
|
|
<strong>{{ user.username }}</strong>
|
|
</div>
|
|
</td>
|
|
<td>{{ user.email }}</td>
|
|
<td>
|
|
{% if user.is_admin %}
|
|
<span class="badge badge-admin">Admin</span>
|
|
{% else %}
|
|
<span class="badge badge-user">User</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if user.last_login %}
|
|
<span class="badge badge-active">Active</span>
|
|
{% else %}
|
|
<span class="badge badge-inactive">Inactive</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ user.created_at.strftime('%Y-%m-%d') if user.created_at else 'N/A' }}</td>
|
|
<td>{{ user.last_login.strftime('%Y-%m-%d') if user.last_login else 'Never' }}</td>
|
|
<td>
|
|
<form method="POST" action="{{ url_for('admin_toggle_admin', user_id=user.id) }}" style="display: inline;">
|
|
<button type="submit" class="action-btn action-btn-primary">
|
|
{% if user.is_admin %}Remove Admin{% else %}Make Admin{% endif %}
|
|
</button>
|
|
</form>
|
|
<form method="POST" action="{{ url_for('admin_delete_user', user_id=user.id) }}" style="display: inline;"
|
|
onsubmit="return confirm('Are you sure you want to delete this user?');">
|
|
<button type="submit" class="action-btn action-btn-danger">Delete</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Tab -->
|
|
<div id="content" class="tab-content">
|
|
<div class="admin-section">
|
|
<h3 class="section-title">Content Management</h3>
|
|
<div class="system-info">
|
|
<div class="info-card">
|
|
<h4>Content Sources</h4>
|
|
<p>Reddit - Active</p>
|
|
<p>Hacker News - Active</p>
|
|
<p>Lobsters - Active</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Filter Sets</h4>
|
|
<p>safe_content - Default</p>
|
|
<p>no_filter - Unfiltered</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Content Stats</h4>
|
|
<p>Posts today: 12</p>
|
|
<p>Comments today: 45</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h3 class="section-title">Content Actions</h3>
|
|
<form method="POST" action="{{ url_for('admin_regenerate_content') }}">
|
|
<button type="submit" class="btn btn-primary">Regenerate All Content</button>
|
|
<p style="margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary);">
|
|
This will regenerate all HTML files with current templates and filters.
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Tab -->
|
|
<div id="system" class="tab-content">
|
|
<div class="admin-section">
|
|
<h3 class="section-title">System Information</h3>
|
|
<div class="system-info">
|
|
<div class="info-card">
|
|
<h4>Application</h4>
|
|
<p>BalanceBoard v2.0</p>
|
|
<p>Python 3.9+</p>
|
|
<p>Flask Framework</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Database</h4>
|
|
<p>PostgreSQL</p>
|
|
<p>Connection: Active</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<h4>Storage</h4>
|
|
<p>Posts: 73 files</p>
|
|
<p>Comments: 1,299 files</p>
|
|
<p>Themes: 2 available</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h3 class="section-title">System Maintenance</h3>
|
|
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
|
|
<a href="{{ url_for('admin_polling') }}" class="action-btn action-btn-primary">📡 Manage Polling</a>
|
|
<form method="POST" action="{{ url_for('admin_clear_cache') }}" style="display: inline;">
|
|
<button type="submit" class="action-btn action-btn-warning">Clear Cache</button>
|
|
</form>
|
|
<form method="POST" action="{{ url_for('admin_backup_data') }}" style="display: inline;">
|
|
<button type="submit" class="action-btn action-btn-primary">Backup Data</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showTab(tabName) {
|
|
// Hide all tabs
|
|
const tabs = document.querySelectorAll('.tab-content');
|
|
tabs.forEach(tab => tab.classList.remove('active'));
|
|
|
|
// Remove active class from all buttons
|
|
const buttons = document.querySelectorAll('.tab-btn');
|
|
buttons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
// Show selected tab
|
|
document.getElementById(tabName).classList.add('active');
|
|
|
|
// Add active class to clicked button
|
|
event.target.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|