web_defender/templates/ddos.html
2024-12-09 13:43:16 +05:30

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>