127 lines
7.1 KiB
HTML
127 lines
7.1 KiB
HTML
{% extends 'navbar/navbar.html' %}
|
|
{% load static %}
|
|
{% block home %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="{% static 'ddos/css/ddos.css' %}">
|
|
<title>x-sys</title>
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="ipSection">
|
|
<h2 class="ipNumber">DDos</h2>
|
|
</div>
|
|
<div class="gridGraphSection ">
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">AI training graphs</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div id="columnchart_values" style="width: 100%; height:450px;"></div>
|
|
<div id="barchart_values" style="width: 100%; height:500px"></div>
|
|
<div id="chart_div" style="width: 100%; height:500px"></div>
|
|
<div id="StackedColumnsChart" style="width: 100%; height:500px"></div>
|
|
<div id="DurationChart" style="width: 100%; height:500px"></div>
|
|
</div>
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">Graphical Analysis for AI Training of Individual DDoS Parameters</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div id="TransmittedChart" style="width: 100%; height:500px"></div>
|
|
<div id="TransmittedBytesChart" style="width: 100%; height:500px"></div>
|
|
<div id="SwitchChart" style="width: 100%; height:500px"></div>
|
|
</div>
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">DDoS Attack Type</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="chartTitleLable">
|
|
<p><span></span>BENIGN</p>
|
|
<p><span></span>MSSQL</p>
|
|
<p><span></span>Portmap</p>
|
|
<p><span></span>NetBIOS</p>
|
|
<p><span></span>UDP</p>
|
|
<p><span></span>Syn</p>
|
|
<p><span></span>UDPLag</p>
|
|
</div>
|
|
<div id="PieSliceChart" style="width: 100%; height:500px"></div>
|
|
<div id="LineColumnsChart" style="width: 100%; height:500px"></div>
|
|
<div id="LineFlowDurationChart" style="width: 100%; height:500px"></div>
|
|
<div style="margin-bottom:50px">
|
|
<div id="columnInThreeChart" style="width: 95%;"></div>
|
|
</div>
|
|
<div style="margin-bottom:50px">
|
|
<div id="columnInHTTPChart" style="width: 95%; height:500px"></div>
|
|
</div>
|
|
</div>
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">Number of Attack request</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="chart-flex">
|
|
<div id="barchart_attack" style="width: 100%; height:500px"></div>
|
|
</div>
|
|
</div>
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">DDoS Visualization</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="chart-flex" style="padding:10px">
|
|
<div id="ScatterDDoSPCAChart" style="width: 100%; height:500px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{% static 'navbar/js/jquery-3.7.0.js' %}"></script>
|
|
<script src="{% static 'ddos/js/pieChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/columnChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/barChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/barchartAttack.js'%}"></script>
|
|
<script src="{% static 'ddos/js/StackedBarCharts.js'%}"></script>
|
|
<script src="{% static 'ddos/js/StackedColumnsChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/DurationChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/TransmittedChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/TransmittedBytesChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/SwitchChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/LineChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/PieSliceChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/LineColumnsChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/LineFlowDurationChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/columnInThreeChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/columnInHTTPChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/ScatterDDoSPCAChart.js'%}"></script>
|
|
<script src="{% static 'ddos/js/index.js'%}"></script>
|
|
</body>
|
|
{% endblock %}
|
|
</html> |