Blogger MCP Server
by niyonabil
Verified
- blogger-mcp-server
- public
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blogger MCP Server - Tableau de bord</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
<div class="position-sticky pt-3">
<div class="text-center mb-4">
<h5 class="text-white">Blogger MCP Server</h5>
<p class="text-muted">Tableau de bord</p>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#dashboard">
<i class="bi bi-speedometer2 me-2"></i>
Tableau de bord
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connections">
<i class="bi bi-people me-2"></i>
Connexions
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tools">
<i class="bi bi-tools me-2"></i>
Outils
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#logs">
<i class="bi bi-journal-text me-2"></i>
Journaux
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#settings">
<i class="bi bi-gear me-2"></i>
Paramètres
</a>
</li>
</ul>
</div>
</div>
<!-- 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">Tableau de bord</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" id="restart-server" class="btn btn-sm btn-outline-secondary">
<i class="bi bi-arrow-repeat me-1"></i>
Redémarrer
</button>
<button type="button" id="refresh-data" class="btn btn-sm btn-outline-secondary">
<i class="bi bi-arrow-clockwise me-1"></i>
Actualiser
</button>
</div>
</div>
</div>
<!-- Status Cards -->
<div class="row mb-4">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Statut</h5>
<p class="card-text status-badge">
<span id="server-status" class="badge bg-success">En ligne</span>
</p>
<p class="card-text">Mode: <span id="server-mode">HTTP</span></p>
<p class="card-text">Démarré: <span id="server-uptime">--</span></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Connexions</h5>
<h2 class="card-text" id="connection-count">0</h2>
<p class="card-text">Clients connectés</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Requêtes</h5>
<h2 class="card-text" id="request-count">0</h2>
<p class="card-text">Total des requêtes</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Taux de succès</h5>
<h2 class="card-text" id="success-rate">0%</h2>
<p class="card-text">Requêtes réussies</p>
</div>
</div>
</div>
</div>
<!-- Connections Section -->
<div class="row mb-4" id="connections">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5>Connexions actives</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>ID</th>
<th>IP</th>
<th>Connecté à</th>
<th>Dernière activité</th>
<th>Requêtes</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="connections-table">
<!-- Connections will be populated here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Tools Usage Section -->
<div class="row mb-4" id="tools">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Utilisation des outils</h5>
</div>
<div class="card-body">
<canvas id="tools-chart"></canvas>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Outils disponibles</h5>
</div>
<div class="card-body">
<ul class="list-group" id="tools-list">
<!-- Tools will be populated here -->
</ul>
</div>
</div>
</div>
</div>
<!-- Logs Section -->
<div class="row mb-4" id="logs">
<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5>Journaux récents</h5>
<button class="btn btn-sm btn-outline-secondary" id="clear-logs">
<i class="bi bi-trash me-1"></i>
Effacer
</button>
</div>
<div class="card-body">
<div class="logs-container">
<pre id="logs-content" class="logs-pre">Aucun journal disponible</pre>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="main.js"></script>
</body>
</html>