{% 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>