<!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);
}


body {
    background-color: var(--main-bg);
    color: var(--text-color);
    font-family:'Montserra', 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: transparent;
}

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

.navbar-toggler:hover .navbar-toggler-icon {
    opacity: 1;
}

.navbar-nav .nav-link {
    color: var(--text-color);
    margin: 0 0.5rem;
    transition: color 0.3s ease-in-out;
}

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


.intro {
    text-align: center;
    background: rgba(28, 28, 46, 0.9);
    padding: 3rem;
    border-radius: 15px;
    box-shadow: var(--box-shadow);
    max-width: 800px;
    margin: 2rem auto;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.intro h1 {
    color: var(--accent-color);
    font-size: 3rem;
    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;
    transition: background-color 0.3s ease-in-out;
}

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


.table-responsive {
    margin: 2rem 0;
}

.top_player_top {
    border-radius: 12px;
    overflow: hidden;
}

table {
    background: var(--table-bg);
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
}

table th, table td {
    padding: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

thead th {
    background: var(--accent-color);
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid var(--main-bg);
}

tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease-in-out;
}

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

tbody tr:hover {
    background: var(--table-row-hover-bg);
    cursor: pointer;
}

tbody td {
    color: var(--text-color);
}

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

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

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

@media (max-width: 768px) {
    footer .socials a {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .intro {
        padding: 1.5rem;
    }

    .intro h1 {
        font-size: 2rem;
    }

    table {
        font-size: 0.875rem;
    }

    header {
        padding: 0.5rem;
    }

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

</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="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>

improve table styling, make it more beatiful. do not comment css code. this very important website so please make it as beatiful as you can, on this website there are player stats from cs:go server, also before changing anything, write me what you will change detailed