@page "/Achievements"

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<PageTitle>Зал славы</PageTitle>

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #111;
        overflow: hidden;
        overflow-y: hidden;
        flex-direction: column;
    }

    .carousel-container {
        position: relative;
        height: 400px;
        transform: rotate(20deg);
        margin: 20px 0;
    }

    .carousel {
        display: flex;
        width: max-content;
        flex-wrap: nowrap;
        animation: scroll 15s linear infinite;
    }

    .carousel.reverse {
        animation: scroll-reverse 15s linear infinite;
    }

    .card {
        width: 213px;
        height: 300px;
        background: #222;
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .card img {
        width: 210px;
        height: 297px;
        object-fit: cover;
        border-radius: 5px;
    }

    @@keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-10%);
        }
    }

    @@keyframes scroll-reverse {
        0% {
            transform: translateX(-10%);
        }
        100% {
            transform: translateX(0);
        }
    }

    .hall-of-fame {
        z-index: 9999;
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 3vw;
        color: white;
        font-weight: bold;
        background-color: #444;
        border-radius: 9999px;
        padding: 2px 15px;
    }

    .back-button {
        z-index: 9999;
        position: absolute;
        bottom: 10px;
        left: 20px;
        font-size: 2vw;
        color: white;
        border: none;
        cursor: pointer;
        background-color: #444;
        border-radius: 9999px;
        padding: 4px 20px;
    }

    /* Адаптивность для маленьких экранов */
    @@media (max-width: 600px) {
    .hall-of-fame {
        font-size: 5vw;
        padding: 5px 20px;
    }

    .back-button {
        font-size: 4vw;
        padding: 6px 25px;
    }
    }

    /* Адаптивность для средних экранов */
    @@media (min-width: 601px) and (max-width: 1024px) {
    .hall-of-fame {
        font-size: 4vw;
        padding: 4px 18px;
    }

    .back-button {
        font-size: 3vw;
        padding: 5px 22px;
    }
    }
    
    .back-button:hover {
        background-color: #666;
    }
</style>

<div class="hall-of-fame">Зал славы</div>
<a class="back-button" href="/">Назад</a>

<div class="carousel-container">
    <div class="carousel">
        <div class="card"><img src="/img/notifications/1.png" alt="Image 1"></div>
        <div class="card"><img src="/img/notifications/2.png" alt="Image 2"></div>
        <div class="card"><img src="/img/notifications/3.png" alt="Image 3"></div>
        <div class="card"><img src="/img/notifications/4.png" alt="Image 4"></div>
        <div class="card"><img src="/img/notifications/5.png" alt="Image 5"></div>
        <div class="card"><img src="/img/notifications/6.png" alt="Image 6"></div>
        <div class="card"><img src="/img/notifications/7.png" alt="Image 7"></div>
        <div class="card"><img src="/img/notifications/8.png" alt="Image 8"></div>
        <div class="card"><img src="/img/notifications/8.png" alt="Image 9"></div>
        <div class="card"><img src="/img/notifications/9.png" alt="Image 10"></div>
    </div>
</div>
<div class="carousel-container">
    <div class="carousel reverse">
        <div class="card"><img src="/img/notifications/10.png" alt="Image 1"></div>
        <div class="card"><img src="/img/notifications/11.png" alt="Image 2"></div>
        <div class="card"><img src="/img/notifications/12.png" alt="Image 3"></div>
        <div class="card"><img src="/img/notifications/13.png" alt="Image 4"></div>
        <div class="card"><img src="/img/notifications/14.png" alt="Image 5"></div>
        <div class="card"><img src="/img/notifications/15.png" alt="Image 6"></div>
        <div class="card"><img src="/img/notifications/16.png" alt="Image 7"></div>
        <div class="card"><img src="/img/notifications/17.png" alt="Image 8"></div>
        <div class="card"><img src="/img/notifications/18.png" alt="Image 9"></div>
        <div class="card"><img src="/img/notifications/19.png" alt="Image 10"></div>
    </div>
</div>
<div class="carousel-container">
    <div class="carousel">
        <div class="card"><img src="/img/notifications/20.png" alt="Image 1"></div>
        <div class="card"><img src="/img/notifications/21.png" alt="Image 2"></div>
        <div class="card"><img src="/img/notifications/22.png" alt="Image 3"></div>
        <div class="card"><img src="/img/notifications/23.png" alt="Image 4"></div>
        <div class="card"><img src="/img/notifications/24.png" alt="Image 5"></div>
        <div class="card"><img src="/img/notifications/25.png" alt="Image 6"></div>
        <div class="card"><img src="/img/notifications/26.png" alt="Image 7"></div>
        <div class="card"><img src="/img/notifications/27.png" alt="Image 8"></div>
        <div class="card"><img src="/img/notifications/28.png" alt="Image 9"></div>
        <div class="card"><img src="/img/notifications/29.png" alt="Image 10"></div>
    </div>
</div>
