36 lines
1.1 KiB
HTML
36 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Waku Node Visualizer</title>
|
|
<style>
|
|
.node {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 2px;
|
|
display: inline-block;
|
|
background-color: grey;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 220px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container" id="nodeContainer"></div>
|
|
|
|
<div id="network"></div>
|
|
<div id="pieChartContainer" style="display: none; position: fixed; top: 10px; left: 10px; background-color: rgba(255, 255, 255, 0.9); padding: 15px; border-radius: 10px; z-index: 10000; box-shadow: 0 0 20px rgba(0,0,0,0.7);">
|
|
<canvas id="pieChart" width="250" height="250"></canvas>
|
|
<div id="colorDistribution" style="margin-top: 10px; font-weight: bold;"></div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vis-network/standalone/umd/vis-network.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|