milo
052570cefb
Implement comprehensive Flask web interface for bot configuration, statistics, and memory management. Includes responsive design, auto-refreshing stats, and clear URL logging for easy access.
137 lines
No EOL
6.2 KiB
HTML
137 lines
No EOL
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Delta Bot Dashboard{% endblock %}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
.sidebar {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
.sidebar .nav-link {
|
|
color: rgba(255,255,255,0.8);
|
|
border-radius: 0.5rem;
|
|
margin: 0.2rem 0;
|
|
}
|
|
.sidebar .nav-link:hover, .sidebar .nav-link.active {
|
|
color: white;
|
|
background-color: rgba(255,255,255,0.1);
|
|
}
|
|
.stat-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.status-online { color: #28a745; }
|
|
.status-offline { color: #dc3545; }
|
|
.status-warning { color: #ffc107; }
|
|
.navbar-brand {
|
|
font-weight: bold;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
<nav class="col-md-3 col-lg-2 d-md-block sidebar collapse">
|
|
<div class="position-sticky pt-3">
|
|
<div class="text-center mb-4">
|
|
<h4 class="text-white"><i class="fas fa-robot"></i> Delta Bot</h4>
|
|
<small class="text-white-50">Management Dashboard</small>
|
|
</div>
|
|
<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="fas fa-tachometer-alt"></i> Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint == 'config' %}active{% endif %}" href="{{ url_for('config') }}">
|
|
<i class="fas fa-cog"></i> Configuration
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint == 'stats' %}active{% endif %}" href="{{ url_for('stats') }}">
|
|
<i class="fas fa-chart-bar"></i> Statistics
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint == 'memory' %}active{% endif %}" href="{{ url_for('memory') }}">
|
|
<i class="fas fa-brain"></i> Memory
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<hr class="text-white-50">
|
|
<div class="text-center">
|
|
<small class="text-white-50">
|
|
<i class="fas fa-server"></i>
|
|
{{ db_stats.backend_type|title if db_stats else 'Unknown' }} Backend
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main content -->
|
|
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">{% block page_title %}{% endblock %}</h1>
|
|
<div class="btn-toolbar mb-2 mb-md-0">
|
|
<div class="btn-group me-2">
|
|
<span class="badge bg-success fs-6" id="status-indicator">
|
|
<i class="fas fa-circle"></i> Online
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flash messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// Auto-refresh stats every 30 seconds
|
|
setInterval(function() {
|
|
fetch('/api/stats')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Update status indicator
|
|
const statusIndicator = document.getElementById('status-indicator');
|
|
if (data.bot_stats) {
|
|
statusIndicator.innerHTML = '<i class="fas fa-circle"></i> Online';
|
|
statusIndicator.className = 'badge bg-success fs-6';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
const statusIndicator = document.getElementById('status-indicator');
|
|
statusIndicator.innerHTML = '<i class="fas fa-circle"></i> Offline';
|
|
statusIndicator.className = 'badge bg-danger fs-6';
|
|
});
|
|
}, 30000);
|
|
</script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html> |