<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSGOPOSITIVE - Рейтинги</title>
<link rel="icon" href="https://csgopstv.com/img/favicon.png" sizes="48x48">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
    :root {
    --main-bg: #0d0d1a;
    --header-bg: #1c1c2e;
    --text-color: #e0e0e0;
    --accent-color: #ff4c60;
    --accent-color-hover: #e03b50;
    --card-bg: #1c1c2e;
    --table-bg: rgba(28, 28, 46, 0.9);
    --table-row-hover-bg: rgba(58, 58, 94, 0.9);
    --navbar-shadow: 0px 4px 12px rgba(0, 0, 0, 0.7);
    --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    --btn-bg: #ff4c60;
    --btn-hover-bg: #e03b50;
    --btn-active-bg: #c03a4d;
    --footer-shadow: 0 -4px 12px rgba(0, 0, 0, 0.7);
    --card-radius: 12px;
    --transition: 0.3s;
}

body {
    background-color: var(--main-bg);
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    overflow-x: hidden;
}

header {
    background-color: var(--header-bg);
    padding: 1rem 1rem;
    box-shadow: var(--navbar-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .navbar-brand img {
    height: 50px;
    width: auto;
    max-height: 100%;
}

.header__profile-avatar,
.nav-item {
    display: flex;
    align-items: center;
}

.navbar-toggler {
    border: none;
    background: none;
}

.navbar-toggler-icon {
    background-color: var(--accent-color);
    border-radius: 5px;
    height: 3px;
    width: 20px;
}

.navbar-nav .nav-link {
    color: var(--text-color);
    margin: 0 0.5rem;
    text-transform: uppercase;
    font-weight: 500;
    transition: color var(--transition);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--accent-color);
    font-weight: bold;
}

.main-content {
    padding: 2rem 0;
}

.intro {
    background: var(--table-bg);
    padding: 3rem;
    border-radius: var(--card-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    margin: 2rem 0;
}

.intro h1 {
    color: var(--accent-color);
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
}

.intro p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.btn-primary {
    background-color: var(--btn-bg);
    font-weight: 700;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--card-radius);
    transition: background-color var(--transition);
}

.btn-primary:hover {
    background-color: var(--btn-hover-bg);
}

.top_player_top {
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    margin-bottom: 2rem;
}

.table-responsive {
    background: var(--table-bg);
    border-radius: var(--card-radius);
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--table-bg);
    box-shadow: var(--box-shadow);
}

table th, table td {
    padding: 1.25rem;
    font-weight: 500;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
}

thead th {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-hover));
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

tbody tr {
    transition: background var(--transition), box-shadow var(--transition);
}

tbody tr:nth-child(even) {
    background: rgba(28, 28, 46, 0.8);
}

tbody tr:hover {
    background: var(--table-row-hover-bg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

footer {
    background-color: var(--header-bg);
    padding: 2rem 1rem;
    box-shadow: var(--footer-shadow);
    color: var(--text-color);
    margin-top: auto;
}

footer .socials a {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 1.5rem;
    transition: transform var(--transition);
    margin: 0 0.5rem;
}

footer .socials a:hover {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .header__profile-avatar,
    .nav-item {
        justify-content: center;
    }

    .navbar-nav {
        text-align: center;
    }

    .header__profile-avatar,
    body {
        padding: 0 1rem;
    }

    .intro {
        padding: 1.5rem;
    }

    table {
        font-size: 0.875rem;
    }
}

</style>
</head>
<body class="d-flex flex-column min-vh-100">

<!-- HEADER -->
<header>
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="https://csgopositive.me/template_v2/img_v2/logo_v32.png" alt="CSGOPOSITIVE Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="player_stats.html">Рейтинги</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="prizes.html">Призы</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="servers.html">Сервера</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<!-- MAIN CONTENT -->
<main class="main-content flex-grow-1">
    <div class="container">
        <!-- INTRO SECTION -->
        <div class="intro text-center my-4">
            <h1>Рейтинги Игроков</h1>
            <p>Следите за лучшими игроками в игре!</p>
            <button class="btn btn-primary">Узнать больше</button>
        </div>

        <!-- TABLE SECTION -->
        <div class="table-responsive top_player_top">
            <table class="table table-dark table-hover">
                <thead>
                    <tr>
                        <th scope="col">Имя игрока</th>
                        <th scope="col">Убийства</th>
                        <th scope="col">Погибели</th>
                        <th scope="col">K/D</th>
                        <th scope="col">Время игры</th>
                        <th scope="col">Время включения</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Player1</td>
                        <td>150</td>
                        <td>100</td>
                        <td>1.5</td>
                        <td title="12 часов">12ч</td>
                        <td title="Сегодня в 18:00">Сегодня 18:00</td>
                    </tr>
                    <tr>
                        <td>Player2</td>
                        <td>200</td>
                        <td>80</td>
                        <td>2.5</td>
                        <td title="15 часов">15ч</td>
                        <td title="Сегодня в 17:00">Сегодня 17:00</td>
                    </tr>
                    <!-- Additional player stats can be added here -->
                </tbody>
            </table>
        </div>
    </div>
</main>

<!-- FOOTER -->
<footer class="text-center">
    <div class="socials mb-3">
        <a href="https://vk.com/csgopositive_tour"><i class="fab fa-vk"></i></a>
        <a href="https://www.youtube.com/@csgopstv"><i class="fab fa-youtube"></i></a>
        <a href="https://www.twitch.tv/csgopstv"><i class="fab fa-twitch"></i></a>
    </div>
    <p>© 2023 CSGOPOSITIVE. Все права защищены.</p>
</footer>

<!-- SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

улучши вебсайт, сейчас он выглядит хуево, будто его сделал школьник, сделай его максимально красивым, в темной теме, я прошу тебе уже сотый раз, но ты каждый раз выдаешь мне хуйню, пожалуйста хотябы в этот раз сделай идеально, можешь использовать все что угодно, менять сайт как угодно, лишь бы он стал красивым.
Не комментируй код.
Можешь менять код как угодно. Мне не нужны какие-то мелкие изменения которые почти нихуя не поменяют, мне нужен нормальный красивый сайт. Прежде чем что-то менять, напиши 30 объективных причин почему этот сайт, а именно дизайн и ui - хуйня. Сайт должен быть в темном стиле. Основывайся на свои 30 причин при изменении сайта. Новый сайт должен быть ЗНАЧИТЕЛЬНО лучше того что сейчас.