{% 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">Chart 1</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="piechart" style="width: 50%;height:450px;"></div>
                <div id="columnchart_values" style="width: 50%; height:450px;"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 2</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_values" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 3</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">Chart 4</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="chart_div" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 5</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="StackedColumnsChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 6</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="DurationChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 7</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="TransmittedChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 8</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="TransmittedBytesChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 9</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="SwitchChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 10</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="LineChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 11</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="PieSliceChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 12</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="LineColumnsChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 13</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="LineBytesColumnsChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 14</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="LineFlowDurationChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 15</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="LineBWDDurationChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 16</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="columnInThreeChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 17</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="columnInTwoChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 18</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="columnInHTTPChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 19</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="columnInBarHTTPChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 20</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="columnInBarSimillarChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 21</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="columnInBarChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 22</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="ScatterDDoSPCAChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 23</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="ScatterDDoSSneChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
        <div class="chartOpenClose">
            <div class="tabSectionHeader">
                <p class="tabTitle">Chart 24</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="ScatterDDoSChart" style="width: 100%; height:500px"></div>
            </div>
        </div>
    </div>
   
    <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/LineBytesColumnsChart.js'%}"></script>
    <script src="{% static 'ddos/js/LineFlowDurationChart.js'%}"></script>
    <script src="{% static 'ddos/js/LineBWDDurationChart.js'%}"></script>
    <script src="{% static 'ddos/js/columnInThreeChart.js'%}"></script>
    <script src="{% static 'ddos/js/columnInTwoChart.js'%}"></script>
    <script src="{% static 'ddos/js/columnInHTTPChart.js'%}"></script>
    <script src="{% static 'ddos/js/columnInBarHTTPChart.js'%}"></script>
    <script src="{% static 'ddos/js/columnInBarSimillarChart.js'%}"></script>
    <script src="{% static 'ddos/js/columnInBarChart.js'%}"></script>
    <script src="{% static 'ddos/js/ScatterDDoSPCAChart.js'%}"></script>
    <script src="{% static 'ddos/js/ScatterDDoSSneChart.js'%}"></script>
    <script src="{% static 'ddos/js/ScatterDDoSChart.js'%}"></script>
    <script src="{% static 'ddos/js/index.js'%}"></script>
</body>
{% endblock %}
</html>