From 6e06142e7ababfd1b8e33b5a732d4a3122297ccf Mon Sep 17 00:00:00 2001
From: Sergey Karmanov <ppoocpel8888@gmail.com>
Date: Sun, 9 Mar 2025 23:59:32 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=BB=20=D1=81=D0=BB=D0=B0=D0=B2=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Pages/Achievements.razor       | 175 ++++++++++++++++++
 .../Components/Pages/Achievements.razor.js    |   5 +
 2 files changed, 180 insertions(+)
 create mode 100644 src/Otchinslator/Components/Pages/Achievements.razor
 create mode 100644 src/Otchinslator/Components/Pages/Achievements.razor.js

diff --git a/src/Otchinslator/Components/Pages/Achievements.razor b/src/Otchinslator/Components/Pages/Achievements.razor
new file mode 100644
index 0000000..c61a1c1
--- /dev/null
+++ b/src/Otchinslator/Components/Pages/Achievements.razor
@@ -0,0 +1,175 @@
+@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/xxx.png" alt="Image 1"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 2"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 3"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 4"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 5"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 6"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 7"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 8"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 9"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 10"></div>
+    </div>
+</div>
+<div class="carousel-container">
+    <div class="carousel reverse">
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 1"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 2"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 3"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 4"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 5"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 6"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 7"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 8"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 9"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 10"></div>
+    </div>
+</div>
+<div class="carousel-container">
+    <div class="carousel">
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 1"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 2"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 3"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 4"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 5"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 6"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 7"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 8"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 9"></div>
+        <div class="card"><img src="/img/notifications/xxx.png" alt="Image 10"></div>
+    </div>
+</div>
diff --git a/src/Otchinslator/Components/Pages/Achievements.razor.js b/src/Otchinslator/Components/Pages/Achievements.razor.js
new file mode 100644
index 0000000..e9376c2
--- /dev/null
+++ b/src/Otchinslator/Components/Pages/Achievements.razor.js
@@ -0,0 +1,5 @@
+export class Achievements {
+  
+}
+
+window.Achievements = Achievements;
\ No newline at end of file