

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to HIT+64</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
            <style>
            
            
/* Universal Styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}
            
            
* a:hover {
color: goldenrod !important;
}

/* Background Image on html */
html {
    background-image: url("../../inc/imgr/h64background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 90% 90%; 
    background-position: center -100%;
    background-color: #020c18 !important; /* Corrected background color */
    color: white !important;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Ensure body does not have a white background */
body {
    background-color: transparent !important; /* Transparent background */
    height: 100%; /* Full page height */
}

            
/* Logo styling */
.logo {
    max-width: 8.5vh;
    max-height: 5.5vh;
    margin-right: 5px;
}

/* Font-face settings */
@font-face {
    font-family: "toxi", "Chopsic";
    src: url(inc/fonts/toxi.ttf) format("truetype");
    src: url(inc/fonts/Chopsic.ttf) format("truetype");
}

/* Universal font setting */
* {
    font-family: "toxi", Verdana, Tahoma !important;
}

/* Navbar styling */
.navbar-brand {
    font-family: "Chopsic", Verdana, Tahoma !important;
    color: white !important;
}

.nav-link {
    color: white !important;
}

/* Full Container for UCP */
.fullContain {
    position: relative; /* Reference point for absolute positioning */
    width: 100%;
    min-height: 50vh; /* Ensure a minimum height */
    padding: 10px; /* Add some padding for inner spacing */
    box-sizing: border-box; /* Ensure padding does not affect width */
}

/* Space Between Navbar and Main Container */
.containerSpace {
    height: 20px; /* Adjust space between nav and main container */
}

/* Control Panel Styling */
.control-panel {
    position: absolute; /* Fixed positioning inside .fullContain */
    top: 15%; /* Align to top */
    right: 50px;
    width: 650px;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    z-index: 1000;
    transition: width 0.3s ease, right 0.3s ease; /* Ensure smooth transition for both width and position */
}

/* Control Panel Responsiveness */
@media (max-width: 1200px) {
    .control-panel {
        width: 650px; /* Slightly reduce the width on smaller large screens */
        right: 10%; /* Adjust the position to keep some space */
    }
}

@media (max-width: 1000px) {
    .control-panel {
        width: 80%; /* Increase width slightly on medium-sized screens */
        right: 5%;
    }
}

@media (max-width: 800px) {
    .control-panel {
        right: 0 !important;
        min-width: 300px;
        width: 100%; /* Make it full width for smaller screens */
    }
}

@media (max-width: 600px) {
    .control-panel {
        width: 100%; /* Full width on very small screens */
        right: 0;
        top: 10%; /* Adjust the vertical position for better view */
        border-radius: 0; /* Remove the rounded corners for mobile-friendly design */
    }
    
    .fullContain {
        min-height: 80vh; /* Make sure the container takes full height on mobile */
    }
    
    .containerSpace {
        height: 10px; /* Reduce space between navbar and main content on small screens */
    }
    
    .control-panel a {
        font-size: 2vw;
    }
    
    .card .border-custom {
        width: 120%;
        margin-left: -28.5px;
    }
    
    .news-post {
        width: 125%;
        margin-left: -28.5px;
    }
    
    #levelContentContainer{
        width: 120%;
        margin-left: -28.5px;
    }
}

/* Optional: Adding Flexbox for better alignment inside the control panel (Optional) */
.control-panel .innerContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
}

/* Ensure Text and Elements inside .control-panel scale down */
.control-panel h1, .control-panel p {
    font-size: 16px; /* Adjust font size for smaller screens */
}

@media (max-width: 400px) {
    .control-panel h1, .control-panel p {
        font-size: 14px; /* Smaller font size on very small screens */
    }
}

            
/* Main Content Styling */
.mainContainer {
    padding-top: 20px; /* Adjust space from navbar */
}

            
            .show{
                background-color: #222222 !important;
                border-color: white;
                color: lightblue !important;
            }
            
            .show a.dropdown-item{
                color: lightblue !important;
            }

            
            .dropdown-divider {
                border-top: 1px solid white !important;  
            }


/* Header with Banner Image */
.control-panel-header {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

.banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Profile Picture Section */
.profile-container {
    text-align: center;
    margin-top: -50px;
    position: relative;
    padding: 5px;
}

.profile-img-container {
    position: relative;
    width: 90px; /* Adjust size for profile image */
    height: 90px;
    margin: 0 auto;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Profile Picture Border Image (overlay on top) */
.profile-img-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0; /* No rounding for the border */
    background-image: url('../../inc/imgr/pfpborder.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Username Text */
h4 {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

/* Navigation Links */
.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* This will make the list items inline */
    justify-content: space-between; /* Distribute space between the items */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
}

.nav-item {
    margin: 0 10px; /* Add horizontal spacing between items */
}

.nav-link {
    color: #f0f0f0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    display: block;
    padding: 10px;
    border-radius: 5px;
}

.nav-link:hover {
    background-color: #333;
    color: #007bff;
}

/* Optional: Add some spacing between links */
.nav-item a {
    padding: 10px;
    display: block;
    border-radius: 5px;
}


.control-panel .cpLoggedOut {
    padding: 5px !important;
}

.control-panel .loggedOut {
    margin-top: -25px !important;
}

.control-panel .loggedOut li {
    margin-left: auto !important;
    margin-right: auto !important;
}

.nav-link {
    color: #f0f0f0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    display: block;
}

.nav-link:hover {
    background-color: #333;
    border-radius: 5px;
    color: #007bff;
}

/* Additional Styling for Links */
.nav-item a {
    padding: 10px;
    display: block;
    border-radius: 5px;
    z-index: 9999 !important;
}

table {
    background-color: #495057;
    color: #f8f9fa;
}
.news-section {
    background-color: #212529;
    padding: 10px;
    border-radius: 5px;
}
            
/* Main content section */
.content {
    min-height: 100%;  /* Content should take full height */
    padding-bottom: 75px;  /* Prevent overlap with footer */
}

/* Footer Styles - FIXED to the bottom of the page */
#footer {
    position: fixed !important;  /* Fix the footer to the bottom of the screen */
    bottom: 0;  /* Stick it to the bottom */
    left: 0;  /* Align it with the left edge */
    width: 100%;  /* Full width */
    background-color: #333;  /* Dark background */
    color: white;  /* White text */
    text-align: center;
    padding: 15px;
    z-index: 9999 !important;  /* Ensure it stays above other content */
}

/* Optional: Styling links in the footer */
#footer a {
    color: lightblue;
    text-decoration: none;
}

#footer a:hover {
    color: cyan;
}
            
            .formContainer {
                min-height: 25vh;
            }
            
            .scoreContainer {
                min-height: 40vh;
            }
            
            .navbar {
                background-color: rgba(1, 57, 87, 0.7) !important;
                border-left: 2px solid #014970 !important;
                border-right: 2px solid #014970 !important;
                border-bottom: 2px solid #014970 !important;
                text-shadow: 2px 2px 8px #000000 !important;
            }
            
            
.card {
    background-color: #1f1f1f;
    border: 1px solid #333;
    border-radius: 10px;
}

.table {
    background-color: #2a2a2a;
    color: #fff;
}

.table th,
.table td {
    vertical-align: middle;
}

.table th {
    background-color: #333;
    color: #fff;
}

.container-fluid {
    padding-top: 20px;
}

.card-header {
    background-color: #333;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
}
            
            .card-body {
                color: white !important;
            }

/* Border and background styling for Recent Submissions and Main Information */
.recent-submissions, .main-information {
    background-color: rgba(1, 57, 87, 0.7) !important;
    border-left: 2px solid #014970 !important;
    border-right: 2px solid #014970 !important;
    border-bottom: 2px solid #014970 !important;
    text-shadow: 2px 2px 8px #000000 !important;
    overflow: hidden;
}

.border-custom {
    border: 2px solid #555;
    border-radius: 10px;
    padding: 20px;
}

.news-column {
    padding-right: 20px;
}

.news-post {
    background-color: #2c2c2c;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
}

.right-align {
    text-align: right;
}

.score-header {
    font-size: 1.2rem;
    font-weight: bold;
}
            
            .hAdjust {
                margin-top: -25px;
                background-color: rgba(0,0,0,0.6);
                width: 120%;
                margin-left: -20px;
                padding-top: 10px;
                
            }
            
/* Scrollbar track (background of the scrollbar) */
::-webkit-scrollbar {
    width: 8px;  /* Set the width of the scrollbar */
}

/* Scrollbar thumb (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
    background-color: #014970;  /* Red color for the thumb */
    border-radius: 10px;  /* Rounded edges for the thumb */
}

/* Hover state for the scrollbar thumb (to make it darker when hovered) */
::-webkit-scrollbar-thumb:hover {
    background-color: #a6e7ff;  /* Darker red when hovered */
}

/* Scrollbar track (area behind the thumb) */
::-webkit-scrollbar-track {
    background-color: #2a2a2a;  /* Dark background for the track */
    border-radius: 10px;  /* Rounded edges for the track */
}

/* Optional: Scrollbar corner (bottom-right corner where two scrollbars meet) */
::-webkit-scrollbar-corner {
    background-color: #2a2a2a;  /* Dark color to match the track */
}
            
            
        </style>
        <style>
        
/* Ensure the link stays inline and aligns content properly */
.nav-link {
    display: inline-flex !important;  /* Keep text and dot on the same line */
    align-items: center !important;   /* Vertically align "LIVE" text and dot */
    text-decoration: none !important;  /* Remove underline */
}

/* Style for the "LIVE" text */
.live-text {
    font-weight: bold !important;
    color: #ff0000 !important;  /* Red color for "LIVE" */
    font-size: 16px !important; /* Adjust font size */
    margin-right: 10px !important; /* Space between text and dot */
    display: inline !important;   /* Make sure it's inline */
}

/* Style for the animated red recording dot */
.live-dot {
    display: inline-block !important;
    width: 12px !important;    /* Size of the dot */
    height: 12px !important;   /* Size of the dot */
    background-color: red !important;
    border-radius: 50% !important; /* Make it circular */
    animation: blink 1s infinite ease-in-out !important; /* Blinking effect */
    
    /* Vendor prefixes for broader support */
    -webkit-animation: blink 1s infinite ease-in-out !important; /* Safari and older Chrome versions */
    -moz-animation: blink 1s infinite ease-in-out !important; /* Firefox */
    -o-animation: blink 1s infinite ease-in-out !important; /* Opera */
    -ms-animation: blink 1s infinite ease-in-out !important; /* Older Internet Explorer */
}

/* Keyframes for the blinking animation */
@keyframes blink {
    0% {
        opacity: 0.5 !important; /* Make dot slightly dim at the start */
    }
    50% {
        opacity: 1 !important; /* Full brightness halfway */
    }
    100% {
        opacity: 0.5 !important; /* Return to dim at the end */
    }
}

/* Vendor prefixed @keyframes for browser support */
@-webkit-keyframes blink {
    0% {
        opacity: 0.5 !important;
    }
    50% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0.5 !important;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0.5 !important;
    }
    50% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0.5 !important;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 0.5 !important;
    }
    50% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0.5 !important;
    }
}

@-ms-keyframes blink {
    0% {
        opacity: 0.5 !important;
    }
    50% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0.5 !important;
    }
}
    
            .control-panel {
                z-index: 0 !important;
            }
        
        </style>
  </head>

<body>
    <!--
-->
    
    <nav class='navbar navbar-expand-lg bg-dark'>
      <div class='container-fluid'>
        <a class='navbar-brand' href='../../index.cfm'><img src='../../inc/imgr/h64logo.png' class='logo'></a>
        <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>
          <span class='navbar-toggler-icon'></span>
        </button>
        <div class='collapse navbar-collapse' id='navbarSupportedContent'>
          <ul class='navbar-nav me-auto mb-2 mb-lg-0'>
            <li class='nav-item'>
              <a class='nav-link active' aria-current='page' href='../../index.cfm'>Home</a>
            </li>
            

            <li class='nav-item'>
              <a class='nav-link' href='../../about.cfm'>About</a>
            </li>
            <li class='nav-item'>
              <a class='nav-link' href='../../rules.cfm'>Rules</a>
            </li>
            <li class='nav-item'>
              <a class='nav-link' href='../../tutorials.cfm'>Tutorials</a>
            </li>
            <li class='nav-item'>
              <a class='nav-link' href='../../runners.cfm'>Runners</a>
            </li>
                <li class='nav-item'>
              <a class='nav-link' href='../../achievements.cfm'>Achievements</a>
            </li>
            <li class='nav-item dropdown'>
              <a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
                Tools & Resources
              </a>
              <ul class='dropdown-menu'>
                <li><a class='dropdown-item' href='../../guides/index.cfm'>Guides & Getting Started</a></li>
                <li><hr class='dropdown-divider'></li>
                <li><a class='dropdown-item' href='../../scoretracker.cfm'>Score Tracker</a></li>
                <li><a class='dropdown-item' href='../../compare.cfm'>Score Comparer</a></li>
                <li><hr class='dropdown-divider'></li>
                <li><a class='dropdown-item' href='../../routepicker.cfm'>Random Route Selector</a></li>
                <li><hr class='dropdown-divider'></li>
                <li><a class='dropdown-item' href='../../stats.cfm'>Submission Statistics</a></li>
                <li><hr class='dropdown-divider'></li>
                <li><a class='dropdown-item' href='https://docs.google.com/spreadsheets/d/1QC6CGIwdm_31ATCUGWDqdbm0OUDEx8YgLNMkiNuKot8/edit?usp=sharing' target="_blank">Gameshark Codes</a></li>
              </ul>
            </li>
              
            <li class='nav-item dropdown' style="z-index: 999 !important;">
              <a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
                Leaderboards
              </a>
                <ul class='dropdown-menu' style="z-index: 999 !important;">
                    
                        <li><a class='dropdown-item' href='../../leaderboards.cfm'>Standard Leaderboards</a></li>
                        <li><a class='dropdown-item' href='../../pcboards.cfm'>Starship/PCPort Leaderboards</a></li>
                        <li><hr class='dropdown-divider'></li>
                        <li><a class='dropdown-item' href='../../legacyboards.cfm'>Infinites Allowed Leaderboards</a></li>
                        <li><hr class='dropdown-divider'></li>
                        <li><a class='dropdown-item' href='../../speedboards.cfm'>2k% Speedruns</a></li>
                    
                </ul>
            </li>
                        
            <li class='nav-item dropdown' style="z-index: 999 !important;">
              <a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
                M.L. Archive
              </a>
                <ul class='dropdown-menu' style="z-index: 999 !important;">
                    <li><a class='dropdown-item' href='../../mlarchive.cfm'>2024</a></li>
                    <li><a class='dropdown-item' href='../../mlarchive.cfm?year=2025&?month=jan'>2025</a></li>
                </ul>
            </li>
            

          </ul>
            
        <div class='navbar-collapse collapse w-100 order-3 dual-collapse2'>
            <ul class='navbar-nav ms-auto'>

            
                        <li class='nav-item'>
                            <a class='nav-link' href='../../changelog.cfm'>Changelog</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href='https://discord.gg/MYVyYNf' target='_blank'>Discord</a>
                        </li>
                    

            </ul>
        </div>
            
            
        </div>
      </div>
    </nav>

    
<!-- Full Container for UCP -->
<div class="fullContain scoreContainer">
    

    <!-- User is not logged in -->
    
        <div class="control-panel">
            <!-- Control Panel Header with Banner Image -->
            <div class="control-panel-header cpLoggedOut">
                <h4>You are currently not logged in!</h4>
            </div>
            <center>
            <ul class="nav loggedOut">
                <li class="nav-item">
                    <a href="../../inc/cfconfig/login.cfm" class="nav-link">Login</a>
                </li>
                <li class="nav-item">
                    <a href="../../inc/cfconfig/register.cfm" class="nav-link">Register</a>
                </li>
            </ul>
            </center>
        </div>
    

</div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Custom CSS -->
    <style>
        .chart-container {
            height: 400px; /* Fixed height for charts */
            margin-bottom: 20px; /* Space between charts and tables */
        }
        .table-container {
            margin-top: 20px; /* Space between charts and tables */
        }
        .sort-buttons {
            display: flex;
            gap: 5px;
            margin-bottom: 10px;
            flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
        }
        .sort-buttons button {
            padding: 5px 10px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .sort-buttons button .indicator {
            font-size: 10px;
        }
        .table-responsive {
            overflow-x: auto; /* Allow horizontal scrolling on small screens */
        }
        @media (max-width: 768px) {
            .chart-container {
                height: 300px; /* Adjust height for smaller screens */
            }
            .sort-buttons button {
                font-size: 10px; /* Smaller font size for buttons */
                padding: 3px 6px;
            }
            .table th, .table td {
                font-size: 12px; /* Smaller font size for table cells */
            }
        }
    </style>

<!-- Spacing Container -->
<div class="containerSpace"></div>

<!-- Main Content -->
<div class="container-flex mainContainer">
    <!-- Recent Submissions Section -->
    <div class="container-fluid">
        <div class="card recent-submissions border-custom bg-dark text-white">
            <div class="card-header hAdjust">
                <h2>HIT+64 Statistics:</h2>
            </div>
            <div class="card-body">    
                <div class="container-fluid">
                    <!-- Top Row: Pie Charts -->
                    <div class="row">
                        <!-- Left: Routes Pie Chart -->
                        <div class="col-md-6">
                            <h2>Routes:</h2>
                            <div class="chart-container">
                                <canvas id="routesPieChart"></canvas>
                            </div>
                        </div>

                        <!-- Right: Individual Levels Pie Chart -->
                        <div class="col-md-6">
                            <h2>Individual Levels:</h2>
                            <div class="chart-container">
                                <canvas id="ilsPieChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Bottom Row: Tables -->
                    <div class="row table-container">
                        <!-- Left: Routes Table -->
                        <div class="col-md-6">
                            <div class="sort-buttons">
                                <button onclick="toggleSort('routesTable', 0)">
                                    Sort by Route
                                    <span class="indicator" id="routesTable-0-indicator"></span>
                                </button>
                                <button onclick="toggleSort('routesTable', 2)">
                                    Sort by Popularity
                                    <span class="indicator" id="routesTable-2-indicator"></span>
                                </button>
                                <button onclick="toggleSort('routesTable', 3)">
                                    Sort by Score Averages
                                    <span class="indicator" id="routesTable-3-indicator"></span>
                                </button>
                                <button onclick="toggleSort('routesTable', 4)">
                                    Sort by Normal
                                    <span class="indicator" id="routesTable-4-indicator"></span>
                                </button>
                                <button onclick="toggleSort('routesTable', 5)">
                                    Sort by Single Life
                                    <span class="indicator" id="routesTable-5-indicator"></span>
                                </button>
                                <button onclick="toggleSort('routesTable', 6)">
                                    Sort by Expert Mode
                                    <span class="indicator" id="routesTable-6-indicator"></span>
                                </button>
                                <button onclick="toggleSort('routesTable', 7)">
                                    Sort by Submitter
                                    <span class="indicator" id="routesTable-7-indicator"></span>
                                </button>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-bordered" id="routesTable">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Route</th>
                                            <th>Popularity</th>
                                            <th>Score Averages</th>
                                            <th>Normal</th>
                                            <th>Single Life</th>
                                            <th>Expert Mode</th>
                                            <th>Most Popular Submitter</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                            
                                                <tr>
                                                    <td>1</td>
                                                    <td>CoMeFoSXTiBoV1</td>
                                                    <td>20</td>
                                                    <td>1740.65</td>
                                                    <td>6</td>
                                                    <td>14</td>
                                                    <td>0</td>
                                                    <td>wordsayer19 (5)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>2</td>
                                                    <td>CoMeFoSXMaBoV1</td>
                                                    <td>8</td>
                                                    <td>2184.25</td>
                                                    <td>3</td>
                                                    <td>5</td>
                                                    <td>0</td>
                                                    <td>safety_man (2)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>3</td>
                                                    <td>CoMeFoSXMaA6V2</td>
                                                    <td>13</td>
                                                    <td>2148.62</td>
                                                    <td>3</td>
                                                    <td>10</td>
                                                    <td>0</td>
                                                    <td>adamX0315 (2)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>4</td>
                                                    <td>CoMeFoSXSZBoV1</td>
                                                    <td>8</td>
                                                    <td>1721.5</td>
                                                    <td>3</td>
                                                    <td>5</td>
                                                    <td>0</td>
                                                    <td>StarFalco64 (3)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>5</td>
                                                    <td>CoMeFoSXSZA6V2</td>
                                                    <td>2</td>
                                                    <td>2011.5</td>
                                                    <td>2</td>
                                                    <td>0</td>
                                                    <td>0</td>
                                                    <td>livvydoodlez (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>6</td>
                                                    <td>CoMeFoSoMaBoV1</td>
                                                    <td>1</td>
                                                    <td>1736</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>7</td>
                                                    <td>CoMeFoSoMaA6V2</td>
                                                    <td>5</td>
                                                    <td>2175.8</td>
                                                    <td>1</td>
                                                    <td>4</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>8</td>
                                                    <td>CoMeKaSXTiBoV1</td>
                                                    <td>1</td>
                                                    <td>1870</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>9</td>
                                                    <td>CoMeKaSXMaBoV1</td>
                                                    <td>1</td>
                                                    <td>2118</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>10</td>
                                                    <td>CoMeKaSXMaA6V2</td>
                                                    <td>141</td>
                                                    <td>2216.57</td>
                                                    <td>101</td>
                                                    <td>40</td>
                                                    <td>0</td>
                                                    <td>wordsayer19 (32)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>11</td>
                                                    <td>CoMeKaSXSZBoV1</td>
                                                    <td>4</td>
                                                    <td>2148.25</td>
                                                    <td>1</td>
                                                    <td>3</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>12</td>
                                                    <td>CoMeKaSXSZA6V2</td>
                                                    <td>1</td>
                                                    <td>2237</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>13</td>
                                                    <td>CoMeKaSoMaBoV1</td>
                                                    <td>1</td>
                                                    <td>2081</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>14</td>
                                                    <td>CoMeKaSoMaA6V2</td>
                                                    <td>7</td>
                                                    <td>2245</td>
                                                    <td>1</td>
                                                    <td>6</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>15</td>
                                                    <td>CoSYKaSXTiBoV1</td>
                                                    <td>5</td>
                                                    <td>2153.2</td>
                                                    <td>1</td>
                                                    <td>4</td>
                                                    <td>0</td>
                                                    <td>Rakanai (2)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>16</td>
                                                    <td>CoSYKaSXMaBoV1</td>
                                                    <td>1</td>
                                                    <td>2050</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>17</td>
                                                    <td>CoSYKaSXMaA6V2</td>
                                                    <td>5</td>
                                                    <td>2364.8</td>
                                                    <td>1</td>
                                                    <td>4</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>18</td>
                                                    <td>CoSYKaSXSZBoV1</td>
                                                    <td>3</td>
                                                    <td>1646.33</td>
                                                    <td>2</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                    <td>livvydoodlez (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>19</td>
                                                    <td>CoSYKaSXSZA6V2</td>
                                                    <td>10</td>
                                                    <td>1921.9</td>
                                                    <td>3</td>
                                                    <td>7</td>
                                                    <td>0</td>
                                                    <td>Rakanai (2)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>20</td>
                                                    <td>CoSYKaSoMaBoV1</td>
                                                    <td>8</td>
                                                    <td>2002</td>
                                                    <td>2</td>
                                                    <td>5</td>
                                                    <td>1</td>
                                                    <td>StarFalco64 (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>21</td>
                                                    <td>CoSYKaSoMaA6V2</td>
                                                    <td>1</td>
                                                    <td>2090</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>22</td>
                                                    <td>CoSYAqZoMaBoV1</td>
                                                    <td>26</td>
                                                    <td>2841.31</td>
                                                    <td>0</td>
                                                    <td>8</td>
                                                    <td>19</td>
                                                    <td>adamX0315 (16)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>23</td>
                                                    <td>CoSYAqZoMaA6V2</td>
                                                    <td>49</td>
                                                    <td>2285.8</td>
                                                    <td>27</td>
                                                    <td>13</td>
                                                    <td>9</td>
                                                    <td>wordsayer19 (8)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>24</td>
                                                    <td>CoSYAqZoSZBoV1</td>
                                                    <td>1</td>
                                                    <td>2200</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                    <td>0</td>
                                                    <td>Rakanai (1)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>25</td>
                                                    <td>CoSYAqZoSZA6V2</td>
                                                    <td>5</td>
                                                    <td>1912.2</td>
                                                    <td>3</td>
                                                    <td>2</td>
                                                    <td>0</td>
                                                    <td>Pe-Penguin (1)</td>
                                                </tr>
                                            
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Right: Individual Levels Table -->
                        <div class="col-md-6">
                            <div class="sort-buttons">
                                <button onclick="toggleSort('ilsTable', 0)">
                                    Sort by Level
                                    <span class="indicator" id="ilsTable-0-indicator"></span>
                                </button>
                                <button onclick="toggleSort('ilsTable', 1)">
                                    Sort by Popularity
                                    <span class="indicator" id="ilsTable-1-indicator"></span>
                                </button>
                                <button onclick="toggleSort('ilsTable', 2)">
                                    Sort by Score Averages
                                    <span class="indicator" id="ilsTable-2-indicator"></span>
                                </button>
                                <button onclick="toggleSort('ilsTable', 3)">
                                    Sort by Normal
                                    <span class="indicator" id="ilsTable-3-indicator"></span>
                                </button>
                                <button onclick="toggleSort('ilsTable', 4)">
                                    Sort by Expert Mode
                                    <span class="indicator" id="ilsTable-4-indicator"></span>
                                </button>
                                <button onclick="toggleSort('ilsTable', 5)">
                                    Sort by Submitter
                                    <span class="indicator" id="ilsTable-5-indicator"></span>
                                </button>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-bordered" id="ilsTable">
                                    <thead>
                                        <tr>
                                            <th>Level</th>
                                            <th>Popularity</th>
                                            <th>Score Averages</th>
                                            <th>Normal</th>
                                            <th>Expert Mode</th>
                                            <th>Most Popular Submitter</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                            
                                                <tr>
                                                    <td>Co</td>
                                                    <td>76</td>
                                                    <td>304.54</td>
                                                    <td>49</td>
                                                    <td>27</td>
                                                    <td>wordsayer19 (31)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>Me</td>
                                                    <td>60</td>
                                                    <td>505.25</td>
                                                    <td>57</td>
                                                    <td>3</td>
                                                    <td>wordsayer19 (28)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>A6</td>
                                                    <td>50</td>
                                                    <td>623.62</td>
                                                    <td>48</td>
                                                    <td>2</td>
                                                    <td>wordsayer19 (18)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>Ma</td>
                                                    <td>45</td>
                                                    <td>323.69</td>
                                                    <td>27</td>
                                                    <td>18</td>
                                                    <td>wordsayer19 (24)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>V1</td>
                                                    <td>42</td>
                                                    <td>361.86</td>
                                                    <td>4</td>
                                                    <td>38</td>
                                                    <td>safety_man (20)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>SY</td>
                                                    <td>38</td>
                                                    <td>412.66</td>
                                                    <td>24</td>
                                                    <td>14</td>
                                                    <td>adamX0315 (16)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>SX</td>
                                                    <td>36</td>
                                                    <td>335.25</td>
                                                    <td>36</td>
                                                    <td>0</td>
                                                    <td>wordsayer19 (20)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>Ka</td>
                                                    <td>33</td>
                                                    <td>288.48</td>
                                                    <td>33</td>
                                                    <td>0</td>
                                                    <td>livvydoodlez (8)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>Zo</td>
                                                    <td>28</td>
                                                    <td>443.68</td>
                                                    <td>7</td>
                                                    <td>21</td>
                                                    <td>adamX0315 (12)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>Aq</td>
                                                    <td>22</td>
                                                    <td>355.91</td>
                                                    <td>6</td>
                                                    <td>16</td>
                                                    <td>adamX0315 (10)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>Ti</td>
                                                    <td>21</td>
                                                    <td>298.38</td>
                                                    <td>11</td>
                                                    <td>10</td>
                                                    <td>Iljadruk (6)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>Bo</td>
                                                    <td>20</td>
                                                    <td>497.5</td>
                                                    <td>12</td>
                                                    <td>8</td>
                                                    <td>safety_man (5)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>Fo</td>
                                                    <td>12</td>
                                                    <td>121.08</td>
                                                    <td>12</td>
                                                    <td>0</td>
                                                    <td>livvydoodlez (5)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>SZ</td>
                                                    <td>11</td>
                                                    <td>127.27</td>
                                                    <td>11</td>
                                                    <td>0</td>
                                                    <td>wordsayer19 (4)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>V2</td>
                                                    <td>8</td>
                                                    <td>276.88</td>
                                                    <td>8</td>
                                                    <td>0</td>
                                                    <td>Rakanai (2)</td>
                                                </tr>
                                            
                                                <tr>
                                                    <td>So</td>
                                                    <td>5</td>
                                                    <td>215.4</td>
                                                    <td>5</td>
                                                    <td>0</td>
                                                    <td>ingx24 (1)</td>
                                                </tr>
                                            
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Fix dropdowns with # in the href
        document.querySelectorAll('.dropdown-toggle').forEach(function (dropdownToggle) {
            dropdownToggle.addEventListener('click', function (e) {
                e.preventDefault(); // Prevent default behavior
                const dropdownMenu = this.nextElementSibling;
                if (dropdownMenu && dropdownMenu.classList.contains('dropdown-menu')) {
                    dropdownMenu.classList.toggle('show');
                }
            });
        });

        // Close dropdowns when clicking outside
        document.addEventListener('click', function (e) {
            if (!e.target.matches('.dropdown-toggle')) {
                document.querySelectorAll('.dropdown-menu').forEach(function (dropdownMenu) {
                    dropdownMenu.classList.remove('show');
                });
            }
        });
    });

    // Function to generate distinct colors
    function generateDistinctColors(count) {
        const colors = [];
        const hueStep = 360 / count; // Distribute hues evenly
        for (let i = 0; i < count; i++) {
            const hue = i * hueStep;
            const color = `hsl(${hue}, 70%, 50%)`; // Use HSL for distinct colors
            colors.push(color);
        }
        return colors;
    }

    // Prepare data for Routes Pie Chart
    const routesLabels = [
        
            
                "CoMeFoSXTiBoV1",
            
                "CoMeFoSXMaBoV1",
            
                "CoMeFoSXMaA6V2",
            
                "CoMeFoSXSZBoV1",
            
                "CoMeFoSXSZA6V2",
            
                "CoMeFoSoMaBoV1",
            
                "CoMeFoSoMaA6V2",
            
                "CoMeKaSXTiBoV1",
            
                "CoMeKaSXMaBoV1",
            
                "CoMeKaSXMaA6V2",
            
                "CoMeKaSXSZBoV1",
            
                "CoMeKaSXSZA6V2",
            
                "CoMeKaSoMaBoV1",
            
                "CoMeKaSoMaA6V2",
            
                "CoSYKaSXTiBoV1",
            
                "CoSYKaSXMaBoV1",
            
                "CoSYKaSXMaA6V2",
            
                "CoSYKaSXSZBoV1",
            
                "CoSYKaSXSZA6V2",
            
                "CoSYKaSoMaBoV1",
            
                "CoSYKaSoMaA6V2",
            
                "CoSYAqZoMaBoV1",
            
                "CoSYAqZoMaA6V2",
            
                "CoSYAqZoSZBoV1",
            
                "CoSYAqZoSZA6V2",
            
        
    ];
    const routesData = [
        
            
                1740.65,
            
                2184.25,
            
                2148.62,
            
                1721.5,
            
                2011.5,
            
                1736,
            
                2175.8,
            
                1870,
            
                2118,
            
                2216.57,
            
                2148.25,
            
                2237,
            
                2081,
            
                2245,
            
                2153.2,
            
                2050,
            
                2364.8,
            
                1646.33,
            
                1921.9,
            
                2002,
            
                2090,
            
                2841.31,
            
                2285.8,
            
                2200,
            
                1912.2,
            
        
    ];

    // Sort routes by score_density in descending order
    const sortedRoutes = routesLabels
        .map((label, index) => ({ label, value: routesData[index] }))
        .sort((a, b) => b.value - a.value);

    const sortedRoutesLabels = sortedRoutes.map(route => route.label);
    const sortedRoutesData = sortedRoutes.map(route => route.value);

    // Generate distinct colors for Routes
    const routesColors = generateDistinctColors(sortedRoutesLabels.length);

    // Render Routes Pie Chart
    if (sortedRoutesLabels.length > 0 && sortedRoutesData.length > 0) {
        const routesCtx = document.getElementById('routesPieChart').getContext('2d');
        new Chart(routesCtx, {
            type: 'pie',
            data: {
                labels: sortedRoutesLabels,
                datasets: [{
                    data: sortedRoutesData,
                    backgroundColor: routesColors
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    } else {
        console.warn("No data available for Routes Pie Chart.");
    }

    // Prepare data for Individual Levels Pie Chart
    const ilsLabels = [
        
            
                "Co",
            
                "Me",
            
                "A6",
            
                "Ma",
            
                "V1",
            
                "SY",
            
                "SX",
            
                "Ka",
            
                "Zo",
            
                "Aq",
            
                "Ti",
            
                "Bo",
            
                "Fo",
            
                "SZ",
            
                "V2",
            
                "So",
            
        
    ];
    const ilsData = [
        
            
                304.54,
            
                505.25,
            
                623.62,
            
                323.69,
            
                361.86,
            
                412.66,
            
                335.25,
            
                288.48,
            
                443.68,
            
                355.91,
            
                298.38,
            
                497.5,
            
                121.08,
            
                127.27,
            
                276.88,
            
                215.4,
            
        
    ];

    // Generate distinct colors for Individual Levels
    const ilsColors = generateDistinctColors(ilsLabels.length);

    // Render Individual Levels Pie Chart
    if (ilsLabels.length > 0 && ilsData.length > 0) {
        const ilsCtx = document.getElementById('ilsPieChart').getContext('2d');
        new Chart(ilsCtx, {
            type: 'pie',
            data: {
                labels: ilsLabels,
                datasets: [{
                    data: ilsData,
                    backgroundColor: ilsColors
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    } else {
        console.warn("No data available for Individual Levels Pie Chart.");
    }

    // Sorting functionality
    const sortStates = {}; // Tracks the current sort state for each table and column
    let lastSortedButton = null; // Tracks the last clicked button

    function toggleSort(tableId, columnIndex) {
        const table = document.getElementById(tableId);
        const tbody = table.querySelector('tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));

        // Initialize sort state if not already set
        if (!sortStates[tableId]) {
            sortStates[tableId] = {};
        }
        if (!sortStates[tableId][columnIndex]) {
            sortStates[tableId][columnIndex] = 'asc'; // Default to ascending
        }

        // Toggle the sort order
        const order = sortStates[tableId][columnIndex];
        sortStates[tableId][columnIndex] = order === 'asc' ? 'desc' : 'asc';

        // Clear all indicators in the current table
        const buttons = document.querySelectorAll(`#${tableId} .sort-buttons button`);
        buttons.forEach(button => {
            button.querySelector('.indicator').textContent = ''; // Clear the indicator
        });

        // Update the indicator for the clicked button
        const indicator = document.getElementById(`${tableId}-${columnIndex}-indicator`);
        indicator.textContent = order === 'asc' ? '▲' : '▼';

        // Track the last sorted button
        lastSortedButton = indicator.id;

        // Sort rows based on the column and order
        rows.sort((a, b) => {
            const aValue = a.children[columnIndex].textContent.trim();
            const bValue = b.children[columnIndex].textContent.trim();

            // Debug: Log the values being compared
            console.log(`Sorting by column index ${columnIndex}: aValue = ${aValue}, bValue = ${bValue}`);

            // Handle sorting for the "Submitter" column
            if (
                (tableId === 'routesTable' && columnIndex === 7) || // Routes Table: Submitter is index 7
                (tableId === 'ilsTable' && columnIndex === 5)      // Individual Levels Table: Submitter is index 5
            ) {
                // Extract the number from the parentheses
                const aNum = parseInt(aValue.match(/\((\d+)\)/)?.[1] || 0);
                const bNum = parseInt(bValue.match(/\((\d+)\)/)?.[1] || 0);

                // Debug: Log the numeric values
                console.log(`Numeric Values: aNum = ${aNum}, bNum = ${bNum}`);

                // Sort numerically
                return order === 'asc' ? aNum - bNum : bNum - aNum;
            }

            // Convert to numbers if the column contains numeric data
            const isNumericColumn =
                (tableId === 'routesTable' && [0, 2, 3, 4, 5, 6].includes(columnIndex)) || // Routes Table numeric columns
                (tableId === 'ilsTable' && [1, 2, 3, 4].includes(columnIndex));            // Individual Levels Table numeric columns

            const aNum = isNumericColumn ? parseFloat(aValue) : null;
            const bNum = isNumericColumn ? parseFloat(bValue) : null;

            // Debug: Log the numeric values (if applicable)
            if (isNumericColumn) {
                console.log(`Numeric Values: aNum = ${aNum}, bNum = ${bNum}`);
            }

            if (isNumericColumn) {
                // Sort numerically
                return order === 'asc' ? aNum - bNum : bNum - aNum;
            } else {
                // Sort alphabetically
                return order === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
            }
        });

        // Clear and re-append sorted rows
        tbody.innerHTML = '';
        rows.forEach(row => tbody.appendChild(row));
    }

    // Default sort by Score Averages (highest to lowest) for both tables
    function initializeDefaultSort() {
        // Sort Routes Table by Score Averages (column index 3)
        sortStates['routesTable'] = { 3: 'desc' }; // Set initial sort state
        toggleSort('routesTable', 3); // Trigger sort

        // Sort Individual Levels Table by Score Averages (column index 2)
        sortStates['ilsTable'] = { 2: 'desc' }; // Set initial sort state
        toggleSort('ilsTable', 2); // Trigger sort
    }

    // Initialize default sort on page load
    window.onload = initializeDefaultSort;
</script>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
<!-- Footer -->
<div id="footer" class="bg-dark text-white text-center py-3">
    <p class="mb-1">
        Website created and owned by: Olivia | 
        <a href="https://linktr.ee/livvydoodlez" class="text-info" target="_blank">"Livvydoodlez"</a> 
        &copy; 2024 - 2025
    </p>
    <p class="footer-powered small mb-0">Powered by ColdFusion</p>
</div>


<!-- Ensure Footer is At the Bottom -->
<script>
    // Ensure footer stays at the bottom but doesn't overlap
    document.addEventListener("DOMContentLoaded", function () {
        const footer = document.getElementById('footer');
        const body = document.body;

        // Add padding to the body to ensure footer spacing
        const footerHeight = footer.offsetHeight + 75; // Footer height + minimum space
        body.style.paddingBottom = `${footerHeight}px`;

        // Make footer "sticky" if content is short
        if (body.scrollHeight <= window.innerHeight) {
            footer.style.position = 'absolute';
            footer.style.bottom = '0';
            footer.style.left = '0';
            footer.style.width = '100%';
        } else {
            footer.style.position = 'relative';
        }
    });
</script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>