Initial
This commit is contained in:
jjbrunton committed
commit
c552956516
23 files changed
+5193
No files matched your search
@@ -0,0 +1,487 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Reddit Bot Dashboard</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: #e4e4e4;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
background: #2ecc71;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status-dry-run {
|
||||
background: #f39c12;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #888;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stat-card .subtext {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stat-card.highlight {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
|
||||
}
|
||||
|
||||
.stat-card.highlight h3,
|
||||
.stat-card.highlight .subtext {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.panels {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.panels {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 16px 20px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 0;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.activity-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.activity-icon.sent {
|
||||
background: #2ecc71;
|
||||
}
|
||||
|
||||
.activity-icon.skipped {
|
||||
background: #95a5a6;
|
||||
}
|
||||
|
||||
.activity-icon.response {
|
||||
background: #9b59b6;
|
||||
}
|
||||
|
||||
.activity-icon.error {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.activity-message {
|
||||
font-size: 14px;
|
||||
color: #ddd;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.message-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.message-recipient {
|
||||
font-weight: 600;
|
||||
color: #ff6b6b;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 14px;
|
||||
color: #bbb;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.response-badge {
|
||||
background: #9b59b6;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.config-section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.config-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.config-item h4 {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.config-item .value {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: rgba(255, 107, 107, 0.2);
|
||||
color: #ff6b6b;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Reddit Bot Dashboard</h1>
|
||||
<div id="status-badges">
|
||||
<span class="status-badge status-running" id="running-badge">Running</span>
|
||||
<span class="status-badge status-dry-run" id="dryrun-badge" style="display: none;">Dry Run</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card highlight">
|
||||
<h3>Messages Sent</h3>
|
||||
<div class="value" id="stat-sent">0</div>
|
||||
<div class="subtext"><span id="stat-hour">0</span> / <span id="stat-max-hour">8</span> this hour</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Responses</h3>
|
||||
<div class="value" id="stat-responses">0</div>
|
||||
<div class="subtext"><span id="stat-rate">0</span>% response rate</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Posts Processed</h3>
|
||||
<div class="value" id="stat-processed">0</div>
|
||||
<div class="subtext">Total analyzed</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Success Examples</h3>
|
||||
<div class="value" id="stat-examples">0</div>
|
||||
<div class="subtext">Learning from responses</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panels">
|
||||
<div class="panel">
|
||||
<div class="panel-header">Recent Activity</div>
|
||||
<div class="panel-content" id="activity-list">
|
||||
<div class="empty-state">No activity yet</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-header">Recent Messages</div>
|
||||
<div class="panel-content" id="messages-list">
|
||||
<div class="empty-state">No messages sent yet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-section">
|
||||
<div class="config-grid">
|
||||
<div class="config-item">
|
||||
<h4>Monitoring Subreddits</h4>
|
||||
<div class="value" id="config-subreddits"></div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<h4>Target Genders</h4>
|
||||
<div class="value" id="config-genders"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function formatTime(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diff = now - date;
|
||||
|
||||
if (diff < 60000) return 'Just now';
|
||||
if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
|
||||
if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
function getActivityIcon(type) {
|
||||
const icons = {
|
||||
sent: '✉️',
|
||||
skipped: '⏭️',
|
||||
response: '💬',
|
||||
error: '❌'
|
||||
};
|
||||
return icons[type] || '📌';
|
||||
}
|
||||
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const res = await fetch('/api/stats');
|
||||
const stats = await res.json();
|
||||
|
||||
document.getElementById('stat-sent').textContent = stats.totalMessagesSent;
|
||||
document.getElementById('stat-hour').textContent = stats.messagesThisHour;
|
||||
document.getElementById('stat-max-hour').textContent = stats.maxMessagesPerHour;
|
||||
document.getElementById('stat-responses').textContent = stats.totalResponses;
|
||||
document.getElementById('stat-rate').textContent = stats.responseRate;
|
||||
document.getElementById('stat-processed').textContent = stats.totalProcessed;
|
||||
|
||||
document.getElementById('dryrun-badge').style.display = stats.dryRunMode ? 'inline' : 'none';
|
||||
|
||||
document.getElementById('config-subreddits').innerHTML = stats.subreddits
|
||||
.map(s => `<span class="tag">r/${s}</span>`).join('');
|
||||
document.getElementById('config-genders').innerHTML = stats.targetGenders
|
||||
.map(g => `<span class="tag">${g}</span>`).join('');
|
||||
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch stats:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchActivity() {
|
||||
try {
|
||||
const res = await fetch('/api/activity');
|
||||
const activity = await res.json();
|
||||
|
||||
const container = document.getElementById('activity-list');
|
||||
|
||||
if (activity.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state">No activity yet</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = activity.map(item => `
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon ${item.type}">${getActivityIcon(item.type)}</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-message">${escapeHtml(item.message)}</div>
|
||||
<div class="activity-time">${formatTime(item.timestamp)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch activity:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchMessages() {
|
||||
try {
|
||||
const res = await fetch('/api/messages');
|
||||
const messages = await res.json();
|
||||
|
||||
const container = document.getElementById('messages-list');
|
||||
|
||||
if (messages.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state">No messages sent yet</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = messages.map(msg => `
|
||||
<div class="message-item">
|
||||
<div class="message-recipient">
|
||||
u/${escapeHtml(msg.recipient)}
|
||||
${msg.gotResponse ? '<span class="response-badge">Got Response!</span>' : ''}
|
||||
</div>
|
||||
<div class="message-text">${escapeHtml(msg.message)}</div>
|
||||
<div class="message-meta">
|
||||
<span>${formatTime(msg.sentAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch messages:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchSuccessful() {
|
||||
try {
|
||||
const res = await fetch('/api/successful');
|
||||
const successful = await res.json();
|
||||
document.getElementById('stat-examples').textContent = successful.length;
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch successful:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Initial fetch
|
||||
fetchStats();
|
||||
fetchActivity();
|
||||
fetchMessages();
|
||||
fetchSuccessful();
|
||||
|
||||
// Poll for updates
|
||||
setInterval(() => {
|
||||
fetchStats();
|
||||
fetchActivity();
|
||||
fetchMessages();
|
||||
fetchSuccessful();
|
||||
}, 5000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user