Spaces:

Zhofang
/

statmo

Paused

App Files Files Community

Zhofang commited on Jun 10, 2024

Commit

adc96fd

verified ·

1 Parent(s): 696f055

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -81

index.html CHANGED Viewed

@@ -1,89 +1,100 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Layer7 - DSTAT</title>
-    <style>
-      html,
-      body {
-        height: 100%;
-        margin: 0;
-      }
-      body {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-      }
-      body > div {
-        width: 100%;
-      }
-      #chart {
-        width: 80%;
-        margin: auto;
-      }
-      #info {
-        margin-top: 2em;
-        text-align: center;
-        font-family: Arial, Helvetica, sans-serif;
-      }
-    </style>
-  </head>
-  <body>
-    <div>
-      <h2 id="info"></h2>
-      <div id="chart"></div>
-    </div>
-    <script src="https://code.highcharts.com/highcharts.js"></script>
-    <script src="https://code.highcharts.com/modules/exporting.js"></script>
-    <script>
-      window.onload = () => {
-        let info = document.getElementById("info");
-        let chart = Highcharts.chart("chart", {
-          exporting: {
-            enabled: true,
-          },
-          chart: {
-            type: "area",
-          },
-          title: {
-            text: "Layer7 DSTAT",
-          },
-          xAxis: {
-            type: "datetime",
-          },
-          yAxis: {
-            title: {
-              text: "",
-            },
-          },
-          series: [
-            {
-              name: "Requests",
-              data: [],
-            },
-          ],
-        });
-        info.innerText = "Capturing requests from " + location.host + "/dstat";
-        let ws = new WebSocket(
-          (location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/"
-        );
-        ws.onmessage = (event) => {
-          let requests = Number(event.data);
-          let time = new Date().getTime();
-          chart.series[0].addPoint([time, requests], true, chart.series[0].points.length > 60);
-        };
-      };
-    </script>
-  </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Custom Dstat By @Vano_Ganzzz</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <div class="card" style="border-radius: 50px;">
+                <div class="card-body">
+                    <canvas id="canvas"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!--suppress JSUnresolvedLibraryURL -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+<!--suppress JSUnresolvedLibraryURL -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
+<!--suppress JSUnresolvedLibraryURL -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
+<script>
+    $(document).ready(function () {
+        const config = {
+            type: 'line',
+            data: {
+                labels: [],
+                datasets: [{
+                    label: "requests",
+                    backgroundColor: 'rgb(255, 99, 132)',
+                    borderColor: 'rgb(255, 99, 132)',
+                    data: [],
+                    fill: false,
+                }],
+            },
+            options: {
+                responsive: true,
+                title: {
+                    display: true,
+                    text: 'custom rule /attack'
+                },
+                tooltips: {
+                    mode: 'index',
+                    intersect: false,
+                },
+                hover: {
+                    mode: 'nearest',
+                    intersect: true
+                },
+                scales: {
+                    xAxes: [{
+                        display: true,
+                        scaleLabel: {
+                            display: true
+                        }
+                    }],
+                    yAxes: [{
+                        display: true,
+                        scaleLabel: {
+                            display: true
+                        }
+                    }]
+                }
+            }
+        };
+        const context = document.getElementById('canvas').getContext('2d');
+        const lineChart = new Chart(context, config);
+        const source = new EventSource("/chart-data");
+        source.onmessage = function (event) {
+            const data = JSON.parse(event.data);
+            if (config.data.labels.length === 20) {
+                config.data.labels.shift();
+                config.data.datasets[0].data.shift();
+            }
+            config.data.labels.push(data.time);
+            config.data.datasets[0].data.push(data.value);
+            lineChart.update();
+        }
+        // Kenapa tuh kira²? wkwkwk
+        let titleIndex = 0;
+        const titles = ["Custom Dstat By @Vano_Ganzzz", "TELEGRAM @CANTDOWN", "No Chaptha DSTAT", "CUSTOM HTML BY @VANO_GANZZZ"];
+        setInterval(() => {
+            document.title = titles[titleIndex];
+            titleIndex = (titleIndex + 1) % titles.length;
+        }, 3000);
+    });
+</script>
+</body>
 </html>