<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASCII Art</title>
    <style>
        body {
            margin: 0;
            background-color: black;
            color: white;
            font-family: 'Courier New', monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh; /* Changed from min-height to height */
            padding-top: 5vh;
            overflow-y: hidden; /* Hide vertical scrollbar */
            overflow-x: hidden; /* Hide horizontal scrollbar */
        }

        .ascii {
            white-space: pre;
            text-align: center;
            margin-bottom: 10px;
            width: 100%;
            font-size: 0.9em;  /* Slightly larger */
            line-height: 1.2;  /* Slightly more spacing */
            transform: scale(1.1, 1);  /* Wider characters */
        }

        .socials {
            display: flex;
            gap: 20px;
            justify-content: center;
            padding: 20px;
            width: fit-content;
        }

        .socials a {
            color: white;
            text-decoration: none;
            font-size: 18px;
            margin: 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .socials a svg {
            margin-right: 10px;
            width: 24px;
            height: 24px;
        }

        .socials a:hover {
            color: #00acee; /* Slight hover effect */
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }
        
        .divider {
            width: 60%; /* Smaller width */
            height: 1px;
            background: #333; /* Simple line */
            margin: 15px 0;
        }

        .chart-container {
            background-color: #000;
            padding: 10px;
            width: 40%;
            margin: 10px auto;
        }

        #dstatChart {
            width: 100%;
            height: 300px;
        }
    </style>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div class="ascii">
        <pre>
            ..                                                               s                                                
            oec :                                 . uW8"                    ..                                          :8    
           @88888                ..    .     :    `t888              u.    @L                                          .88    
           8"*88%       .u     .888: x888  x888.   8888   .    ...ue888b  9888i   .dL               .         u       :888ooo 
           8b.       ud8888.  ~`8888~'888X`?888f`  9888.z88N   888R Y888r `Y888k:*888.         .udR88N     us888u.  -*8888888 
          u888888> :888'8888.   X888  888X '888>   9888  888E  888R I888>   888E  888I        <888'888k .@88 "8888"   8888    
           8888R   d888 '88%"   X888  888X '888>   9888  888E  888R I888>   888E  888I        9888 'Y"  9888  9888    8888    
           8888P   8888.+"      X888  888X '888>   9888  888E  888R I888>   888E  888I        9888      9888  9888    8888    
           *888>   8888L        X888  888X '888>   9888  888E u8888cJ888    888E  888I    .   9888      9888  9888   .8888Lu= 
           4888    '8888c. .+  "*88%""*88" '888!` .8888  888"  "*888*P"    x888N><888'  .@8c  ?8888u../ 9888  9888   ^%888*   
           '888     "88888%      `~    "    `"`    `%888*%"      'Y"        "88"  888  '%888"  "8888P'  "888*""888"    'Y"    
            88R       "YP'                            "`                          88F    ^*      "P'     ^Y"   ^Y'            
            88>                                                                  98"                                          
            48                                                                 ./"                                            
            '8                                                                ~`                                               
        </pre>
    </div>

    <div class="socials">
        <a href="https://github.com/udpcat" target="_blank">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="#fff" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
            GitHub: udpcat
        </a>
        <a href="https://t.me/udp_cat" target="_blank">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="#fff" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8m115 168.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7.2-.7.3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3.7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6.5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7 43.8 43.8 0 0 1 .5 9.9"/></svg>
            Telegram: udp_cat
        </a>
    </div>

    <div class="divider"></div>

    <div class="chart-container">
        <div id="dstatChart"></div>
    </div>

    <script>
        Highcharts.createElement('link', {
            href: '//fonts.googleapis.com/css?family=Unica+One',
            rel: 'stylesheet',
            type: 'text/css'
        }, null, document.getElementsByTagName('head')[0]);

        document.addEventListener('DOMContentLoaded', function() {
            const chart = Highcharts.chart('dstatChart', {
                chart: {
                    type: 'line',
                    backgroundColor: '#000000',
                    style: {
                        fontFamily: 'Courier New, monospace'
                    }
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: 'DSTAT',
                    style: { color: '#ffffff' }
                },
                xAxis: {
                    type: 'datetime',
                    labels: { style: { color: '#ffffff' } },
                    lineColor: '#ffffff',
                    tickColor: '#ffffff'
                },
                yAxis: {
                    labels: { style: { color: '#ffffff' } },
                    gridLineColor: '#333333',
                    lineColor: '#ffffff',
                    tickColor: '#ffffff',
                    title: { 
                        text: 'Requests',
                        style: { color: '#ffffff' }
                    }
                },
                series: [{
                    name: 'Total Requests',
                    color: '#ffffff',
                    data: []
                }],
                legend: { enabled: false }
            });

            function updateData() {
                fetch('/rps?' + Date.now())
                    .then(response => response.json())
                    .then(data => {
                        const x = Date.now();
                        const y = data.c;  // Changed from data.value to data.c
                        const series = chart.series[0];
                        series.addPoint([x, y], true, series.data.length > 30);
                    });
            }

            setInterval(updateData, 1000);
        });
    </script>
</body>
</html>
