pieter/mastodon-collector
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
mastodon-collector/app/templates/base.html

266 lines
8.9 KiB
HTML
Raw Permalink Normal View History

Initial commit: Mastodon collector application Add Flask-based application for collecting and archiving Mastodon posts from configured accounts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-09 08:05:54 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Mastodon Collector{% endblock %}</title>
<style>
:root {
--bg: #1a1a2e;
--bg-card: #16213e;
--bg-hover: #1a2745;
--text: #e0e0e0;
--text-muted: #8892a4;
--accent: #e2dbff;
--accent-hover: #ffffff;
--link: #7dd3fc;
--success: #2ecc71;
--warning: #f39c12;
--danger: #e74c3c;
--border: #2a3a5c;
--tag-post: #3498db;
--tag-reply: #e67e22;
--tag-mention: #9b59b6;
--tag-reblog: #1abc9c;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
nav {
background: var(--bg-card);
border-bottom: 1px solid var(--border);
padding: 12px 0;
position: sticky;
top: 0;
z-index: 100;
}
nav .container {
display: flex;
align-items: center;
gap: 24px;
}
nav .logo {
font-size: 18px;
font-weight: 700;
color: var(--accent);
text-decoration: none;
}
nav a {
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
padding: 6px 12px;
border-radius: 6px;
transition: all 0.2s;
}
nav a:hover, nav a.active {
color: var(--text);
background: var(--bg-hover);
}
main { padding: 24px 0; }
h1 { font-size: 24px; margin-bottom: 20px; }
h2 { font-size: 18px; margin-bottom: 12px; color: var(--text-muted); }
.flash {
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 14px;
}
.flash.success { background: rgba(46, 204, 113, 0.15); border: 1px solid var(--success); color: var(--success); }
.flash.error { background: rgba(231, 76, 60, 0.15); border: 1px solid var(--danger); color: var(--danger); }
.flash.info { background: rgba(108, 99, 255, 0.15); border: 1px solid var(--accent); color: var(--accent); }
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px;
text-align: center;
}
.stat-card .number {
font-size: 32px;
font-weight: 700;
color: var(--accent);
}
.stat-card .label {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px;
margin-bottom: 16px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
th, td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border);
}
th {
color: var(--text-muted);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
tr:hover { background: var(--bg-hover); }
td a { color: var(--link); text-decoration: none; }
td a:hover { color: #ffffff; text-decoration: underline; }
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.badge-post { background: rgba(52, 152, 219, 0.2); color: var(--tag-post); }
.badge-reply { background: rgba(230, 126, 34, 0.2); color: var(--tag-reply); }
.badge-mention { background: rgba(155, 89, 182, 0.2); color: var(--tag-mention); }
.badge-reblog { background: rgba(26, 188, 156, 0.2); color: var(--tag-reblog); }
.badge-active { background: rgba(46, 204, 113, 0.2); color: var(--success); }
.badge-paused { background: rgba(243, 156, 18, 0.2); color: var(--warning); }
.badge-success { background: rgba(46, 204, 113, 0.2); color: var(--success); }
.badge-error { background: rgba(231, 76, 60, 0.2); color: var(--danger); }
.badge-running { background: rgba(108, 99, 255, 0.2); color: var(--accent); }
.btn {
display: inline-block;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #c0392b; }
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
input[type="text"], input[type="search"], select {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 12px;
color: var(--text);
font-size: 14px;
outline: none;
}
input:focus, select:focus { border-color: var(--accent); }
.form-inline {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.status-content {
font-size: 14px;
line-height: 1.7;
word-break: break-word;
}
.status-content a { color: var(--accent); }
.pagination {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.pagination a {
color: var(--text-muted);
text-decoration: none;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 6px;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current {
background: var(--accent);
color: white;
padding: 6px 12px;
border-radius: 6px;
}
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.flex { display: flex; }
.gap-2 { gap: 8px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
</style>
Fix flagged page styling by adding CSS/JS blocks to base template - Add {% block extra_css %} to base.html head section - Add {% block extra_js %} to base.html before closing body tag - Add encode_uri template filter for URL encoding Flagged page CSS and JavaScript now load correctly, fixing: - Filter bar styling - Table formatting - Review button styles and functionality 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-31 09:25:18 +02:00
{% block extra_css %}{% endblock %}
Initial commit: Mastodon collector application Add Flask-based application for collecting and archiving Mastodon posts from configured accounts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-09 08:05:54 +01:00
</head>
<body>
<nav>
<div class="container">
<a href="{{ url_for('index') }}" class="logo">Mastodon Collector</a>
<a href="{{ url_for('index') }}" class="{{ 'active' if request.endpoint == 'index' }}">Dashboard</a>
<a href="{{ url_for('accounts_list') }}" class="{{ 'active' if request.endpoint == 'accounts_list' }}">Accounts</a>
<a href="{{ url_for('statuses_list') }}" class="{{ 'active' if request.endpoint == 'statuses_list' }}">Statuses</a>
Complete toxicity analysis system setup and testing - Copy and integrate analysis templates from Bluesky collector - Add template filters (format_number, time_ago, truncate_text) - Add Analysis link to navigation - Fix analyzer database schema compatibility (account_db_id, status_type) - Add OPENAI_API_KEY to docker-compose environment - Successfully tested analyzer on 100 statuses ($0.0116, 75.4 seconds) Web interface available at /analysis and /analysis/flagged 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-30 15:39:36 +02:00
<a href="{{ url_for('analysis_dashboard') }}" class="{{ 'active' if 'analysis' in request.endpoint }}">Analysis</a>
Initial commit: Mastodon collector application Add Flask-based application for collecting and archiving Mastodon posts from configured accounts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-09 08:05:54 +01:00
<a href="{{ url_for('export_csv') }}">Export CSV</a>
<a href="{{ url_for('api_stats') }}">API</a>
</div>
</nav>
<main>
<div class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% for category, message in messages %}
<div class="flash {{ category }}">{{ message }}</div>
{% endfor %}
{% endwith %}
{% block content %}{% endblock %}
</div>
</main>
Fix flagged page styling by adding CSS/JS blocks to base template - Add {% block extra_css %} to base.html head section - Add {% block extra_js %} to base.html before closing body tag - Add encode_uri template filter for URL encoding Flagged page CSS and JavaScript now load correctly, fixing: - Filter bar styling - Table formatting - Review button styles and functionality 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-31 09:25:18 +02:00
{% block extra_js %}{% endblock %}
Initial commit: Mastodon collector application Add Flask-based application for collecting and archiving Mastodon posts from configured accounts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-09 08:05:54 +01:00
</body>
</html>
Reference in a new issue Copy permalink